Platon Yasev
3 years ago
parent
225af8fef3
commit
9390b15d81
@ -1,130 +0,0 @@
|
||||
import { Layer, Source } from "react-map-gl";
|
||||
import { gridLayer } from "./layers-config";
|
||||
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();
|
||||
const {
|
||||
isVisible: { grid },
|
||||
} = useLayersVisibility();
|
||||
|
||||
const rate = useRateExpression();
|
||||
const colorScale = useGridColorScale();
|
||||
|
||||
const filter = useMemo(() => {
|
||||
return ["all", [">=", rate, rateRange[0]], ["<=", rate, rateRange[1]]];
|
||||
}, [rate, rateRange]);
|
||||
|
||||
const paintConfig = {
|
||||
...gridLayer.paint,
|
||||
"fill-color": colorScale,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Source
|
||||
id="grid3"
|
||||
type="vector"
|
||||
tiles={[
|
||||
`https://postamates.spatiality.website/martin/public.net_3/{z}/{x}/{y}.pbf`,
|
||||
]}
|
||||
>
|
||||
<Layer
|
||||
{...gridLayer}
|
||||
id={"grid3"}
|
||||
source={"grid3"}
|
||||
source-layer={"public.net_3"}
|
||||
layout={{
|
||||
...gridLayer.layout,
|
||||
visibility: grid && gridSize === "net_3" ? "visible" : "none",
|
||||
}}
|
||||
paint={paintConfig}
|
||||
filter={filter}
|
||||
/>
|
||||
</Source>
|
||||
<Source
|
||||
id="grid4"
|
||||
type="vector"
|
||||
tiles={[
|
||||
`https://postamates.spatiality.website/martin/public.net_4/{z}/{x}/{y}.pbf`,
|
||||
]}
|
||||
>
|
||||
<Layer
|
||||
{...gridLayer}
|
||||
id={"grid4"}
|
||||
source={"grid4"}
|
||||
source-layer={"public.net_4"}
|
||||
layout={{
|
||||
...gridLayer.layout,
|
||||
visibility: grid && gridSize === "net_4" ? "visible" : "none",
|
||||
}}
|
||||
filter={filter}
|
||||
paint={paintConfig}
|
||||
/>
|
||||
</Source>
|
||||
<Source
|
||||
id="grid5"
|
||||
type="vector"
|
||||
tiles={[
|
||||
`https://postamates.spatiality.website/martin/public.net_5/{z}/{x}/{y}.pbf`,
|
||||
]}
|
||||
>
|
||||
<Layer
|
||||
{...gridLayer}
|
||||
id={"grid5"}
|
||||
source={"grid5"}
|
||||
source-layer={"public.net_5"}
|
||||
layout={{
|
||||
...gridLayer.layout,
|
||||
visibility: grid && gridSize === "net_5" ? "visible" : "none",
|
||||
}}
|
||||
filter={filter}
|
||||
paint={paintConfig}
|
||||
/>
|
||||
</Source>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,38 +0,0 @@
|
||||
import { useMemo } from "react";
|
||||
import { useFactors } from "../stores/useFactors";
|
||||
import { useModel } from "../stores/useModel";
|
||||
|
||||
const getWeightedValueExpression = (factor, weight) => {
|
||||
return ["*", ["to-number", ["get", factor]], weight];
|
||||
};
|
||||
|
||||
export const useRateExpression = () => {
|
||||
const { factors } = useFactors();
|
||||
const { model } = useModel();
|
||||
|
||||
const result = useMemo(() => {
|
||||
if (model === "ml") {
|
||||
return ["get", "model"];
|
||||
}
|
||||
|
||||
const weightSum = Object.entries(factors).reduce(
|
||||
(acc, [_factor, weight]) => {
|
||||
acc += weight;
|
||||
return acc;
|
||||
},
|
||||
0
|
||||
);
|
||||
|
||||
const weightedValuesSum = Object.entries(factors).reduce(
|
||||
(acc, [factor, weight]) => {
|
||||
acc.push(getWeightedValueExpression(factor, weight));
|
||||
return acc;
|
||||
},
|
||||
["+"]
|
||||
);
|
||||
|
||||
return ["/", weightedValuesSum, weightSum];
|
||||
}, [factors, model]);
|
||||
|
||||
return result;
|
||||
};
|
||||
@ -1,29 +0,0 @@
|
||||
import { Radio } from "antd";
|
||||
import { Title } from "../../components/Title";
|
||||
import { useGridSize } from "../../stores/useGridSize";
|
||||
|
||||
const options = [
|
||||
{ label: "3 мин", value: "net_3" },
|
||||
{ label: "4 мин", value: "net_4" },
|
||||
{ label: "5 мин", value: "net_5" },
|
||||
];
|
||||
|
||||
export const GridSizeSelect = () => {
|
||||
const { gridSize, setGridSize } = useGridSize();
|
||||
const onChange = ({ target: { value } }) => {
|
||||
setGridSize(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={"flex flex-col items-center"}>
|
||||
<Title text={"Зона пешей доступности"} />
|
||||
<Radio.Group
|
||||
options={options}
|
||||
onChange={onChange}
|
||||
value={gridSize}
|
||||
optionType="button"
|
||||
buttonStyle={"solid"}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,25 +0,0 @@
|
||||
import { Select } from "antd";
|
||||
import { Title } from "../../components/Title";
|
||||
import { useModel } from "../../stores/useModel";
|
||||
|
||||
const options = [
|
||||
{ value: "statistic", label: "Обычная" },
|
||||
{ value: "ml", label: "Основанная на ML" },
|
||||
];
|
||||
|
||||
export const ModelSelect = () => {
|
||||
const { model, setModel } = useModel();
|
||||
const handleChange = (newValue) => setModel(newValue);
|
||||
|
||||
return (
|
||||
<div className={"flex flex-col items-center"}>
|
||||
<Title text={"Модель расчета"} />
|
||||
<Select
|
||||
className={"w-full"}
|
||||
value={model}
|
||||
onChange={handleChange}
|
||||
options={options}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,19 @@
|
||||
import { SliderComponent as Slider } from "../../components/SliderComponent";
|
||||
import { useFilters } from "../../stores/useFilters";
|
||||
|
||||
export const PredictionSlider = () => {
|
||||
const { filters, setPrediction } = useFilters();
|
||||
|
||||
const handleAfterChange = (range) => setPrediction(range);
|
||||
|
||||
return (
|
||||
<Slider
|
||||
title={"Прогнозный трафик, чел."}
|
||||
value={filters.prediction}
|
||||
onAfterChange={handleAfterChange}
|
||||
min={1}
|
||||
max={100}
|
||||
range
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -1,31 +0,0 @@
|
||||
import { SliderComponent as Slider } from "../../components/SliderComponent";
|
||||
import { useFactors } from "../../stores/useFactors";
|
||||
import { factorsNameMapper } from "../../config";
|
||||
import { useModel } from "../../stores/useModel";
|
||||
|
||||
export const Settings = () => {
|
||||
const { factors, setWeight } = useFactors();
|
||||
const { model } = useModel();
|
||||
|
||||
const handleAfterChange = (factor, value) => {
|
||||
setWeight(factor, value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={"space-y-2 min-w-[300px]"}>
|
||||
{Object.entries(factors).map(([field, value]) => {
|
||||
return (
|
||||
<Slider
|
||||
title={factorsNameMapper[field]}
|
||||
value={value}
|
||||
key={field}
|
||||
max={1}
|
||||
step={0.01}
|
||||
onAfterChange={(value) => handleAfterChange(field, value)}
|
||||
disabled={model === "ml"}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,20 +0,0 @@
|
||||
import create from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const store = (set) => ({
|
||||
activeTypes: [],
|
||||
setActiveTypes: (type) =>
|
||||
set((state) => {
|
||||
if (Array.isArray(type)) {
|
||||
state.activeTypes = [];
|
||||
return;
|
||||
}
|
||||
if (state.activeTypes.includes(type)) {
|
||||
state.activeTypes = state.activeTypes.filter((id) => id !== type);
|
||||
} else {
|
||||
state.activeTypes.push(type);
|
||||
}
|
||||
}),
|
||||
});
|
||||
|
||||
export const useActiveTypes = create(immer(store));
|
||||
@ -1,20 +0,0 @@
|
||||
import create from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
import { factorsNameMapper } from "../config";
|
||||
|
||||
const DEFAULT_WEIGHT = 0.5;
|
||||
|
||||
const INITIAL_STATE = Object.keys(factorsNameMapper).reduce((acc, field) => {
|
||||
acc[field] = DEFAULT_WEIGHT;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const store = (set) => ({
|
||||
factors: INITIAL_STATE,
|
||||
setWeight: (factor, value) =>
|
||||
set((state) => {
|
||||
state.factors[factor] = value;
|
||||
}),
|
||||
});
|
||||
|
||||
export const useFactors = create(immer(store));
|
||||
@ -0,0 +1,39 @@
|
||||
import { create } from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const INITIAL = {
|
||||
prediction: [50, 100],
|
||||
categories: [],
|
||||
region: null,
|
||||
};
|
||||
|
||||
const store = (set) => ({
|
||||
filters: INITIAL,
|
||||
setPrediction: (value) => {
|
||||
set((state) => {
|
||||
state.filters.prediction = value;
|
||||
});
|
||||
},
|
||||
|
||||
setCategories: (category) =>
|
||||
set((state) => {
|
||||
if (Array.isArray(category)) {
|
||||
state.filters.categories = [];
|
||||
return;
|
||||
}
|
||||
if (state.filters.categories.includes(category)) {
|
||||
state.filters.categories = state.filters.categories.filter(
|
||||
(id) => id !== category
|
||||
);
|
||||
} else {
|
||||
state.filters.categories.push(category);
|
||||
}
|
||||
}),
|
||||
|
||||
setRegion: (value) =>
|
||||
set((state) => {
|
||||
state.filters.region = value;
|
||||
}),
|
||||
});
|
||||
|
||||
export const useFilters = create(immer(store));
|
||||
@ -1,12 +0,0 @@
|
||||
import create from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const store = (set) => ({
|
||||
gridSize: "net_5",
|
||||
setGridSize: (value) =>
|
||||
set((state) => {
|
||||
state.gridSize = value;
|
||||
}),
|
||||
});
|
||||
|
||||
export const useGridSize = create(immer(store));
|
||||
@ -1,12 +0,0 @@
|
||||
import create from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const store = (set) => ({
|
||||
model: "statistic",
|
||||
setModel: (value) =>
|
||||
set((state) => {
|
||||
state.model = value;
|
||||
}),
|
||||
});
|
||||
|
||||
export const useModel = create(immer(store));
|
||||
@ -1,12 +0,0 @@
|
||||
import create from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const store = (set) => ({
|
||||
rate: [1, 100],
|
||||
setRate: (value) =>
|
||||
set((state) => {
|
||||
state.rate = value;
|
||||
}),
|
||||
});
|
||||
|
||||
export const useRating = create(immer(store));
|
||||
@ -1,12 +0,0 @@
|
||||
import create from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const store = (set) => ({
|
||||
region: null,
|
||||
setRegion: (value) =>
|
||||
set((state) => {
|
||||
state.region = value;
|
||||
}),
|
||||
});
|
||||
|
||||
export const useRegion = create(immer(store));
|
||||
@ -1,12 +0,0 @@
|
||||
import create from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const store = (set) => ({
|
||||
geometry: null,
|
||||
setRegionGeometry: (value) =>
|
||||
set((state) => {
|
||||
state.geometry = value;
|
||||
}),
|
||||
});
|
||||
|
||||
export const useRegionGeometry = create(immer(store));
|
||||
@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
Loading…
Reference in new issue