min/max chart, layers order, popup fix

src/Map/Layers/Points.jsx

@@ -27,9 +27,9 @@ export const Points = () => {
       >
         <PendingPoints />
         <OnApprovalPoints />
+        <CancelledPoints />
         <WorkingPoints />
         <FilteredWorkingPoints />
-        <CancelledPoints />
       </Source>
     </>
   );

src/Map/PointChart.jsx

@@ -87,6 +87,8 @@ export const PointChart = ({ point }) => {
       },
       tooltip: {
         displayColors: false,
+        xAlign: "left",
+        yAlign: "bottom",
         callbacks: {
           label: function(context) {
             const label = []
@@ -96,9 +98,8 @@ export const PointChart = ({ point }) => {
             if (context.parsed.x !== null) {
               let labelText = "";
               if (context.datasetIndex === 0) labelText = "Вклад в прогноз, %: ";
-              if (context.datasetIndex === 1) labelText = "Средний вклад в прогноз, %: ";
+              if (context.datasetIndex === 1) labelText = "Минимальный вклад в прогноз, %: ";
-              if (context.datasetIndex === 2) labelText = "Минимальный вклад в прогноз, %: ";
+              if (context.datasetIndex === 2) labelText = "Максимальный вклад в прогноз, %: ";
-              if (context.datasetIndex === 3) labelText = "Максимальный вклад в прогноз, %: ";
               label.push(labelText + context.parsed.x);
             }
             return label;
@@ -107,25 +108,21 @@ export const PointChart = ({ point }) => {
             return "Вклад в прогноз, %:"
           }
         }
-      }
+      },
     },
     scales: {
+      y: {
+        stacked: true,
+      },
       x: {
         title: {
           display: true,
-          text: 'Вклад в прогноз, %'
+          text: 'Вклад в прогноз, %',
         },
         grid: {
-          lineWidth: function(context) {
-            if (context.tick.value === 0) {
-              return 3;
-            }
-
-            return 1;
-          },
           color: function(context) {
             if (context.tick.value === 0) {
-              return "#AAAAAA";
+              return "#000000";
             }
 
             return "#E5E5E5";
@@ -150,32 +147,20 @@ export const PointChart = ({ point }) => {
         type: 'line',
         showLine: false,
       },
-      {
-        data: labels.map((l) => meanData ? meanData[`avg_${l}`] : 0),
-        backgroundColor: "#CCCCCCCC",
-        hoverBackgroundColor: "#BBBBBBCC",
-        type: 'bar',
-        showLine: false
-      },
       {
         data: labels.map((l) => meanData ? meanData[`min_${l}`] : 0),
-        type: 'line',
+        backgroundColor: "#cccccc",
+        hoverBackgroundColor: "#aaaaaa",
+        type: 'bar',
         showLine: false,
-        pointStyle: 'line',
-        pointBorderColor: "#888888",
-        pointRadius: 10,
-        pointHoverRadius: 10,
-        pointRotation: 90
       },
       {
         data: labels.map((l) => meanData ? meanData[`max_${l}`] : 0),
-        type: 'line',
+        backgroundColor: "#cccccc",
+
+        hoverBackgroundColor: "#aaaaaa",
+        type: 'bar',
         showLine: false,
-        pointStyle: 'line',
-        pointBorderColor: "#888888",
-        pointRadius: 10,
-        pointHoverRadius: 10,
-        pointRotation: 90
       },
     ],
   };

src/Map/Popup/Popup.jsx

@@ -80,7 +80,7 @@ const MultipleFeaturesPopup = ({ features, points }) => {
               }}
               key={feature.properties.id}
             >
-              {feature.properties.category === CATEGORIES.residential ? (
+              {feature.properties.category === CATEGORIES.residential || feature.layer.id === LAYER_IDS.working ? (
                 <div className="space-x-2 flex items-center w-full">
                   <span className="flex-1 truncate inline-block">
                     {point.address}

src/Map/Popup/mode-popup/config.js

@@ -72,7 +72,7 @@ export const workingPointFields = [
   { name: "Факт", field: "fact" },
   { name: "Расхождение с прогнозом", field: "delta_current" },
   { name: "Зрелость", field: "age_day" },
-  { name: "id постамата", field: "id", empty: "Не указан" },
+  { name: "id локации", field: "postamat_id", empty: "Не указан" },
 ];
 
 export const rivalsConfig = [

src/Map/TrafficModal.jsx

@@ -1,4 +1,4 @@
-import { Button, Col, Divider, Modal, Popover, Row, Tabs, Tooltip } from "antd";
+import { Button, Col, Divider, Modal, Popover, Row, Tooltip } from "antd";
 import { useState } from "react";
 import { BiStats } from "react-icons/all.js";
 import { twMerge } from "tailwind-merge";
@@ -14,49 +14,6 @@ const ChartHelp = () => {
   )
 }
 
-const getTabs = (point) => {
-  return [
-    {
-      key: '1',
-      label: 'Выбранная точка',
-      children: (
-        <div>
-          <div className="flex flex-col gap-2">
-            <Row className={twMerge("p-1")}>
-              <Col className={"font-semibold"} span={12}>
-                Адрес точки:
-              </Col>
-              <Col span={12}>{point.address}</Col>
-            </Row>
-            <Row className={twMerge("p-1")}>
-              <Col className={"font-semibold"} span={12}>
-                Прогнозный траффик:
-              </Col>
-              <Col span={12}>{point.prediction_current}</Col>
-            </Row>
-          </div>
-          <Divider />
-          <PointChart point={point} />
-          <p>* - в окрестности</p>
-          <Popover
-            content={<ChartHelp autoFocus={true}/>}
-            trigger="click"
-            placement="leftBottom"
-            color="#ffffff"
-          >
-            <Button type="text" className="text-[#1890FF] p-0">Как читать график?</Button>
-          </Popover>
-
-        </div>
-      ),
-    },
-    {
-      key: '2',
-      label: 'Среднее по всем точкам',
-      children: '',
-    },
-  ];
-}
 export const TrafficModal = ({point}) => {
   const [isOpened, setIsOpened] = useState(false);
 
@@ -88,7 +45,34 @@ export const TrafficModal = ({point}) => {
         footer={getFooter()}
         style={{ top: "15px" }}
       >
-        <Tabs defaultActiveKey="1" items={getTabs(point)} />
+        <div>
+          <div className="flex flex-col gap-2">
+            <Row className={twMerge("p-1")}>
+              <Col className={"font-semibold"} span={12}>
+                Адрес точки:
+              </Col>
+              <Col span={12}>{point.address}</Col>
+            </Row>
+            <Row className={twMerge("p-1")}>
+              <Col className={"font-semibold"} span={12}>
+                Прогнозный траффик:
+              </Col>
+              <Col span={12}>{point.prediction_current}</Col>
+            </Row>
+          </div>
+          <Divider />
+          <PointChart point={point} />
+          <p>* - в окрестности</p>
+          <Popover
+            content={<ChartHelp autoFocus={true}/>}
+            trigger="click"
+            placement="leftBottom"
+            color="#ffffff"
+          >
+            <Button type="text" className="text-[#1890FF] p-0">Как читать график?</Button>
+          </Popover>
+
+        </div>
       </Modal>
     </div>
   );