Fix export; add color ramp for pending points

src/Map/Layers/layers-config.js

@@ -1,7 +1,18 @@
 const POINT_SIZE = 5;
 const UNMATCH_POINT_SIZE = 3;
 
-export const INITIAL_COLOR = "#0572c2";
+export const PENDING_COLOR = {
+  property: "prediction_current",
+  stops: [
+    [190, "#FDEBF0"],
+    [215, "#F8C7D8"],
+    [230, "#F398BC"],
+    [240, "#EE67A1"],
+    [250, "#B64490"],
+    [270, "#7E237E"],
+    [271, "#46016C"],
+  ],
+};
 export const CANCELLED_COLOR = "#CC2222";
 export const APPROVE_COLOR = "#ff7d00";
 export const WORKING_COLOR = "#006e01";
@@ -18,7 +29,7 @@ const DEFAULT_POINT_CONFIG = {
   },
 };
 
-const getPointConfig = (color = INITIAL_COLOR, size = POINT_SIZE) => {
+const getPointConfig = (color = PENDING_COLOR, size = POINT_SIZE) => {
   return {
     ...DEFAULT_POINT_CONFIG,
     paint: {

src/Map/Legend.jsx

@@ -3,8 +3,8 @@ import { MODES } from "../config";
 import {
   APPROVE_COLOR,
   CANCELLED_COLOR,
-  INITIAL_COLOR,
   OTHER_POSTAMATES_COLOR,
+  PENDING_COLOR,
   PVZ_COLOR,
   WORKING_COLOR,
 } from "./Layers/layers-config";
@@ -22,6 +22,26 @@ const LegendPointItem = ({ color, name }) => {
   );
 };
 
+const pendingColors = PENDING_COLOR.stops.map(([_value, color]) => color);
+
+const LegendColorRampItem = ({ colors, name }) => {
+  return (
+    <div className="mb-3">
+      <span className={"mb-1 mt-3 text-center"}>{name}</span>
+      <div className="w-[200px]">
+        <div
+          className={"w-full h-[10px] rounded-xl"}
+          style={{
+            background: `linear-gradient(to right, ${colors.join(",")})`,
+          }}
+        />
+      </div>
+
+      <span className="italic">прогноз трафика →</span>
+    </div>
+  );
+};
+
 export function Legend() {
   const { mode } = useMode();
 
@@ -33,7 +53,10 @@ export function Legend() {
           <div className="space-y-1">
             {mode === MODES.PENDING && (
               <>
-                <LegendPointItem name="К рассмотрению" color={INITIAL_COLOR} />
+                <LegendColorRampItem
+                  colors={pendingColors}
+                  name="К рассмотрению"
+                />
                 <LegendPointItem name="Работает" color={WORKING_COLOR} />
                 <LegendPointItem name="Отменен" color={CANCELLED_COLOR} />
               </>

src/components/SliderComponent.jsx

@@ -50,16 +50,6 @@ export const SliderComponent = ({
     setMarks(getInitialMarks(fullRangeMarks, initialValue));
   }, [initialValue]);
 
-  useEffect(() => {
-    setMarks((prevState) => {
-      return {
-        ...prevState,
-        [min]: <Mark value={min} />,
-        [max]: <Mark value={max} />,
-      };
-    });
-  }, [min, max]);
-
   const handleAfterChange = (value) => {
     if (Array.isArray(value)) {
       const [min, max] = value;

src/modules/Sidebar/PendingPointsFilters/PendingPointsFilters.jsx

@@ -1,4 +1,4 @@
-import { DISABLED_FILTER_TEXT } from "../../../config";
+import { DISABLED_FILTER_TEXT, STATUSES } from "../../../config";
 import { Button, Tooltip } from "antd";
 import { SelectedLocations } from "./SelectedLocations";
 import { TakeToWorkButton } from "./TakeToWorkButton";
@@ -13,12 +13,35 @@ import {
 import { usePendingPointsFilters } from "../../../stores/usePendingPointsFilters";
 import { ClearFiltersButton } from "../../../components/ClearFiltersButton";
 import { getDynamicActiveFilters } from "../utils";
-import { useCanEdit } from "../../../api";
+import { api, useCanEdit } from "../../../api";
+import { useQuery } from "@tanstack/react-query";
 
-export const PendingPointsFilters = ({ fullRange }) => {
+const useGetPendingPointsRange = () => {
+  return useQuery(
+    ["prediction-max-min"],
+    async () => {
+      const { data } = await api.get(
+        `/api/placement_points/filters?status[]=${STATUSES.pending}`
+      );
+
+      return data;
+    },
+    {
+      select: (data) => {
+        return {
+          ...data,
+          prediction: [data.prediction_current[0], data.prediction_current[1]],
+        };
+      },
+    }
+  );
+};
+
+export const PendingPointsFilters = () => {
   const hasManualEdits = useHasManualEdits();
   const { reset: resetPointSelection } = usePointSelection();
   const { filters, setRegion, clear } = usePendingPointsFilters();
+  const { data: fullRange, isInitialLoading } = useGetPendingPointsRange();
 
   const [hover, setHover] = useState(false);
 
@@ -66,7 +89,11 @@ export const PendingPointsFilters = ({ fullRange }) => {
               onChange={setRegion}
             />
             <CategoriesSelect disabled={hasManualEdits} />
-            <PredictionSlider disabled={hasManualEdits} />
+            <PredictionSlider
+              disabled={hasManualEdits}
+              fullRange={fullRange}
+              isLoading={isInitialLoading}
+            />
           </div>
 
           {hasActiveFilters && (

src/modules/Sidebar/PendingPointsFilters/PredictionSlider.jsx

@@ -4,44 +4,20 @@ import {
   INITIAL,
   usePendingPointsFilters,
 } from "../../../stores/usePendingPointsFilters";
-import { useQuery } from "@tanstack/react-query";
-import { api } from "../../../api.js";
-import { STATUSES } from "../../../config.js";
 import { Spin } from "antd";
 
-const useGetPredictionRange = () => {
+export const PredictionSlider = ({ disabled, fullRange, isLoading }) => {
-  return useQuery(
-    ["prediction-max-min"],
-    async () => {
-      const { data } = await api.get(
-        `/api/placement_points/filters?status[]=${STATUSES.pending}`
-      );
-
-      return data;
-    },
-    {
-      select: (data) => {
-        return [data.prediction_current[0], data.prediction_current[1]];
-      },
-    }
-  );
-};
-
-export const PredictionSlider = ({ disabled }) => {
   const {
     filters: { prediction },
     setPrediction,
   } = usePendingPointsFilters();
-
-  const { data: fullRange, isInitialLoading } = useGetPredictionRange();
-
   const handleAfterChange = (range) => setPrediction(range);
 
   useEffect(() => {
     if (!fullRange) return;
 
-    const min = fullRange[0];
+    const min = fullRange.prediction[0];
-    const max = fullRange[1];
+    const max = fullRange.prediction[1];
 
     const shouldSetFullRange =
       prediction[0] === INITIAL.prediction[0] &&
@@ -52,7 +28,7 @@ export const PredictionSlider = ({ disabled }) => {
     }
   }, [fullRange]);
 
-  if (isInitialLoading) {
+  if (isLoading) {
     return (
       <div className={"flex justify-center items-center"}>
         <Spin />
@@ -65,8 +41,8 @@ export const PredictionSlider = ({ disabled }) => {
       title={"Прогнозный трафик"}
       value={prediction}
       onAfterChange={handleAfterChange}
-      min={fullRange[0]}
+      min={fullRange.prediction[0]}
-      max={fullRange[1]}
+      max={fullRange.prediction[1]}
       range
       disabled={disabled}
     />

src/modules/Sidebar/Sidebar.jsx

@@ -38,7 +38,7 @@ export const Sidebar = forwardRef(({ isCollapsed }, ref) => {
 
   const getFilters = () => {
     if (mode === MODES.PENDING) {
-      return <PendingPointsFilters fullRange={filtersValueRange} />;
+      return <PendingPointsFilters />;
     }
 
     if (mode === MODES.ON_APPROVAL) {

src/modules/Table/PendingTable/useExportPendingData.js

@@ -3,29 +3,42 @@ import { useQuery } from "@tanstack/react-query";
 import { exportPoints } from "../../../api";
 import { handleExportSuccess } from "../ExportButton";
 import { usePendingPointsFilters } from "../../../stores/usePendingPointsFilters";
+import { STATUSES } from "../../../config.js";
 
 export const useExportPendingData = (enabled, onSettled) => {
   const { filters } = usePendingPointsFilters();
-  const { prediction, status, categories, region } = filters;
+  const { prediction, categories, region } = filters;
   const { selection } = usePointSelection();
+  const includedArr = [...selection.included];
+  const excludedArr = [...selection.excluded];
 
   return useQuery(
     ["export-initial", filters, selection],
     async () => {
       const params = new URLSearchParams({
         "prediction_current[]": prediction,
-        "status[]": status,
+        "status[]": [STATUSES.pending],
-        "categories[]": categories,
-        "included[]": [...selection.included],
-        "excluded[]": [...selection.excluded],
       });
 
+      if (categories.length) {
+        params.append("categories[]", categories);
+      }
+
+      if (includedArr.length) {
+        params.append("included[]", includedArr);
+      }
+
+      if (excludedArr.length) {
+        params.append("excluded[]", excludedArr);
+      }
+
       return await exportPoints(params, region);
     },
     {
       enabled,
       onSuccess: handleExportSuccess,
       onSettled,
+      retry: false,
     }
   );
 };