Merge branch 'feature/avg_chart' into 'dev'

avg, min, max charts; buttons tooltips

See merge request spatial/postamates_frontend!55

src/Map/PointChart.jsx

@@ -8,6 +8,8 @@ import {
   Tooltip as ChartTooltip,
   Legend, PointElement, LineElement,
 } from 'chart.js';
+import { useQuery } from "@tanstack/react-query";
+import { api } from "../api.js";
 
 ChartJS.register(
   CategoryScale,
@@ -55,6 +57,21 @@ const GRAPH_LABELS_MAP= {
   business_activity_shap: "Бизнес активность",
 }
 export const PointChart = ({ point }) => {
+  const { data: meanData } = useQuery(
+    ["mean-data"],
+    async () => {
+      const { data } = await api.get(
+        `/api/avg_bi_values/`
+      );
+
+      return data;
+    },
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false
+    }
+  );
+
   const options = {
     indexAxis: 'y',
     elements: {
@@ -75,9 +92,14 @@ export const PointChart = ({ point }) => {
             const label = []
             const shap_key = Object.keys(GRAPH_LABELS_MAP).find(key => GRAPH_LABELS_MAP[key] === context.label);
             const key = shap_key.substring(0, shap_key.length - 5)
-            label.push("Значение: \n" + point[key]);
+            if (context.datasetIndex === 0) label.push("Значение: " + point[key]);
             if (context.parsed.x !== null) {
-              label.push("Вклад в прогноз, %: " + context.parsed.x);
+              let labelText = "";
+              if (context.datasetIndex === 0) labelText = "Вклад в прогноз, %: ";
+              if (context.datasetIndex === 1) labelText = "Средний вклад в прогноз, %: ";
+              if (context.datasetIndex === 2) labelText = "Минимальный вклад в прогноз, %: ";
+              if (context.datasetIndex === 3) labelText = "Максимальный вклад в прогноз, %: ";
+              label.push(labelText + context.parsed.x);
             }
             return label;
           },
@@ -93,6 +115,22 @@ export const PointChart = ({ point }) => {
           display: true,
           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 "#E5E5E5";
+          },
+        },
       }
     }
   };
@@ -109,8 +147,36 @@ export const PointChart = ({ point }) => {
         data: labels.map((l) => point[l]),
         backgroundColor: labels.map((l) => point[l]).map(v => v <= 0 ? '#CC2500' : '#278211'),
         hoverBackgroundColor: labels.map((l) => point[l]).map(v => v <= 0 ? '#F22C00' : '#2DB20C'),
+        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',
+        showLine: false,
+        pointStyle: 'line',
+        pointBorderColor: "#888888",
+        pointRadius: 10,
+        pointHoverRadius: 10,
+        pointRotation: 90
+      },
+      {
+        data: labels.map((l) => meanData ? meanData[`max_${l}`] : 0),
+        type: 'line',
+        showLine: false,
+        pointStyle: 'line',
+        pointBorderColor: "#888888",
+        pointRadius: 10,
+        pointHoverRadius: 10,
+        pointRotation: 90
+      },
     ],
   };
   return <Line options={options} data={data} />

src/Map/Popup/Popup.jsx

@@ -1,4 +1,4 @@
-import {Button, Spin} from "antd";
+import { Button, Spin, Tooltip } from "antd";
 import { CATEGORIES, MODES, STATUSES } from "../../config";
 import { useMode } from "../../stores/useMode";
 import { LAYER_IDS } from "../Layers/constants";
@@ -107,9 +107,11 @@ const YandexPanoramaLink = ({ lat, lng }) => {
   const link = `https://yandex.ru/maps/?panorama[point]=${lng},${lat}`
   return (
     <div className="pl-1 flex">
-      <a target="_blank" href={link}>
-        <PanoramaIcon />
-      </a>
+      <Tooltip title="Перейти на Яндекс.Панорамы">
+        <a target="_blank" href={link}>
+          <PanoramaIcon />
+        </a>
+      </Tooltip>
     </div>
   );
 }

src/Map/TrafficModal.jsx

@@ -1,4 +1,4 @@
-import { Button, Col, Divider, Modal, Popover, Row, Tabs } from "antd";
+import { Button, Col, Divider, Modal, Popover, Row, Tabs, Tooltip } from "antd";
 import { useState } from "react";
 import { BiStats } from "react-icons/all.js";
 import { twMerge } from "tailwind-merge";
@@ -75,9 +75,11 @@ export const TrafficModal = ({point}) => {
   return (
     <div className="flex items-center">
       {point.prediction_current}
-      <Button className="flex justify-center items-center h-6 ml-1 p-1" type="primary" onClick={() => setIsOpened(true)}>
-        <BiStats />
-      </Button>
+      <Tooltip title="Влияние факторов на прогноз">
+        <Button className="flex justify-center items-center h-6 ml-1 p-1" type="primary" onClick={() => setIsOpened(true)}>
+          <BiStats />
+        </Button>
+      </Tooltip>
       <Modal
         open={isOpened}
         title="Вклад факторов в прогноз трафика"