diff --git a/src/Map/Grid.jsx b/src/Map/Grid.jsx index 947e29c..fd3b637 100644 --- a/src/Map/Grid.jsx +++ b/src/Map/Grid.jsx @@ -4,6 +4,46 @@ import { useGridSize } from "../stores/useGridSize"; import { useLayersVisibility } from "../stores/useLayersVisibility"; import { useMemo } from "react"; import { useRateExpression } from "./useRateExpression"; +import { useModel } from "../stores/useModel"; + +const useGridColorScale = () => { + const rate = useRateExpression(); + const { model } = useModel(); + + if (model === "ml") { + return [ + "interpolate", + ["linear"], + rate, + 0, + "rgba(255,0,0,0.78)", + 10, + "rgb(255,137,52)", + 20, + "rgb(255,197,52)", + 30, + "rgb(233,250,0)", + 40, + "rgb(92,164,3)", + 80, + "rgb(7,112,3)", + 100, + "rgb(2,72,1)", + ]; + } + + return [ + "interpolate", + ["linear"], + rate, + 0, + "rgb(204,34,34)", + 10, + "rgb(255,221,52)", + 20, + "rgb(30,131,42)", + ]; +}; export const Grid = ({ rate: rateRange }) => { const { gridSize } = useGridSize(); @@ -12,6 +52,7 @@ export const Grid = ({ rate: rateRange }) => { } = useLayersVisibility(); const rate = useRateExpression(); + const colorScale = useGridColorScale(); const filter = useMemo(() => { return ["all", [">=", rate, rateRange[0]], ["<=", rate, rateRange[1]]]; @@ -19,17 +60,7 @@ export const Grid = ({ rate: rateRange }) => { const paintConfig = { ...gridLayer.paint, - "fill-color": [ - "interpolate", - ["linear"], - rate, - 0, - "rgb(204,34,34)", - 10, - "rgb(255,221,52)", - 20, - "rgb(30,131,42)", - ], + "fill-color": colorScale, }; return ( diff --git a/src/Map/Points.jsx b/src/Map/Points.jsx index c3c689e..0a52b67 100644 --- a/src/Map/Points.jsx +++ b/src/Map/Points.jsx @@ -12,26 +12,25 @@ const usePointSizeScale = () => { const { model } = useModel(); if (model === "ml") { - return ["interpolate", ["linear"], rate, 0, 0, 10, 5, 50, 20]; - // return [ - // "interpolate", - // ["linear"], - // rate, - // 0, - // 0, - // 10, - // 3, - // 20, - // 4, - // 30, - // 5, - // 40, - // 6, - // 80, - // 9, - // 100, - // 15, - // ]; + return [ + "interpolate", + ["linear"], + rate, + 0, + 0, + 10, + 3, + 20, + 4, + 30, + 5, + 40, + 6, + 80, + 9, + 100, + 12, + ]; } return ["interpolate", ["linear"], rate, 0, 0, 10, 5, 50, 20]; diff --git a/src/modules/Sidebar/RatingSlider.jsx b/src/modules/Sidebar/RatingSlider.jsx index 53b4a7d..327f316 100644 --- a/src/modules/Sidebar/RatingSlider.jsx +++ b/src/modules/Sidebar/RatingSlider.jsx @@ -11,6 +11,7 @@ export const RatingSlider = () => { title={"Востребованность постамата, у.e."} value={rate} onAfterChange={handleAfterChange} + min={1} max={100} range /> diff --git a/src/stores/useRating.js b/src/stores/useRating.js index cf556dc..eaf390c 100644 --- a/src/stores/useRating.js +++ b/src/stores/useRating.js @@ -2,7 +2,7 @@ import create from "zustand"; import { immer } from "zustand/middleware/immer"; const store = (set) => ({ - rate: [0, 100], + rate: [1, 100], setRate: (value) => set((state) => { state.rate = value;