@@ -46,11 +51,45 @@ const LegendColorRampItem = ({ colors, name }) => {
);
};
-export function Legend() {
- const { mode } = useMode();
+const LegendGroupItem = ({item, color}) => {
+ return (
+
+ )
+}
+
+export function Legend({ postGroups, otherGroups }) {
+ const {mode} = useMode();
return (
-
+
{mode === MODES.PENDING && (
@@ -59,10 +98,11 @@ export function Legend() {
colors={pendingColors}
name="Локации к рассмотрению"
/>
-
+
)}
@@ -71,28 +111,33 @@ export function Legend() {
-
+
)}
{mode === MODES.WORKING && (
<>
-
+
)}
-
-
+ {postGroups?.map((item) => {
+ return
+ })}
+
+
+ {otherGroups?.map((item) => {
+ return
+ })}
);
diff --git a/src/Map/MapComponent.jsx b/src/Map/MapComponent.jsx
index 7e16d4d..b1a1158 100644
--- a/src/Map/MapComponent.jsx
+++ b/src/Map/MapComponent.jsx
@@ -1,6 +1,6 @@
import maplibregl from "maplibre-gl";
import Map, { MapProvider } from "react-map-gl";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
import { Sidebar } from "../modules/Sidebar/Sidebar";
import { Layers } from "./Layers/Layers";
import { MapPopup } from "./Popup/Popup";
@@ -21,6 +21,14 @@ import { useLayersVisibility } from "../stores/useLayersVisibility";
import { LAYER_IDS } from "./Layers/constants";
import { Header } from "./Header";
import { icons } from "../icons/icons-config";
+import { LastMLRun } from "./LastMLRun";
+import { useOtherGroups, usePostamatesAndPvzGroups } from "../api.js";
+import { getFilteredGroups, transliterate } from "../utils.js";
+import {
+ CATEGORIES_MAP,
+ RANGE_FILTERS_KEYS,
+ RANGE_FILTERS_MAP
+} from "../stores/usePendingPointsFilters.js";
export const MapComponent = () => {
const mapRef = useRef(null);
@@ -32,6 +40,51 @@ export const MapComponent = () => {
const { mode } = useMode();
const { tableState, openTable } = useTable();
+ const { data: postamatesAndPvzGroups } = usePostamatesAndPvzGroups();
+ const { data: otherGroups } = useOtherGroups();
+
+ const filteredPostamatesGroups = useMemo(() => {
+ return getFilteredGroups(postamatesAndPvzGroups);
+ }, [postamatesAndPvzGroups]);
+
+ const filteredOtherGroups = useMemo(() => {
+ return getFilteredGroups(otherGroups);
+ }, [otherGroups]);
+
+ const mapIcons = useMemo(() => {
+ const res = [];
+
+ [...filteredOtherGroups, ...filteredPostamatesGroups].map((category) => {
+ category.groups.map((group) => {
+ res.push({name: transliterate(group.name + group.id), url: group.image});
+ })
+ });
+ return [...res, ...icons];
+ }, [icons, filteredPostamatesGroups, filteredOtherGroups]);
+
+ const mapLayersIds = useMemo(() => {
+ const res = []
+
+ filteredPostamatesGroups.map((item) => {
+ RANGE_FILTERS_MAP[`category${item.id}`] = {
+ name: CATEGORIES_MAP[item.name],
+ };
+ item.groups.map((groupItem) => {
+ if (!RANGE_FILTERS_KEYS.includes(`d${groupItem.id}`)) RANGE_FILTERS_KEYS.push(`d${groupItem.id}`);
+ RANGE_FILTERS_MAP[`category${item.id}`][`d${groupItem.id}`] = groupItem.name;
+ res.push(LAYER_IDS.pvz + groupItem.id);
+ });
+ });
+
+ filteredOtherGroups.map((item) => {
+ item.groups.map((groupItem) => {
+ res.push(LAYER_IDS.other + groupItem.id);
+ })
+ });
+
+ return res;
+ }, [filteredPostamatesGroups, filteredOtherGroups]);
+
useEffect(() => {
setLayersVisibility(MODE_TO_LAYER_VISIBILITY_MAPPER[mode]);
setPopup(null);
@@ -131,21 +184,21 @@ export const MapComponent = () => {
LAYER_IDS.working,
LAYER_IDS.filteredWorking,
LAYER_IDS.cancelled,
- LAYER_IDS.pvz,
- LAYER_IDS.other,
+ ...mapLayersIds,
]}
onClick={handleClick}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onLoad={() => {
- icons.map((icon) => {
+ mapIcons.map((icon) => {
const img = new Image(
- icon.size?.width || 24,
- icon.size?.height || 24
+ icon.size?.width || 64,
+ icon.size?.height || 64
);
img.onload = () =>
- mapRef.current.addImage(icon.name, img, { sdf: true });
+ mapRef.current.addImage(icon.name, img);
img.src = icon.url;
+ img.crossOrigin = "Anonymous";
});
}}
id="map"
@@ -165,11 +218,12 @@ export const MapComponent = () => {
-
+
-
+
+
-
+
diff --git a/src/Map/PointChart.jsx b/src/Map/PointChart.jsx
new file mode 100644
index 0000000..a3c306d
--- /dev/null
+++ b/src/Map/PointChart.jsx
@@ -0,0 +1,168 @@
+import { Line } from "react-chartjs-2";
+import {
+ Chart as ChartJS,
+ CategoryScale,
+ LinearScale,
+ BarElement,
+ Title,
+ Tooltip as ChartTooltip,
+ Legend, PointElement, LineElement, BarController,
+} from 'chart.js';
+import { useQuery } from "@tanstack/react-query";
+import { api } from "../api.js";
+
+ChartJS.register(
+ CategoryScale,
+ BarController,
+ PointElement,
+ LineElement,
+ LinearScale,
+ BarElement,
+ Title,
+ ChartTooltip,
+ Legend
+);
+
+const GRAPH_LABELS_MAP= {
+ target_dist_shap: "Расстояние до ближайшего постамата Мой постамат",
+ target_post_cnt_shap: "Кол-во точек Мой постамат*",
+ target_cnt_ao_mean_shap: "Средний трафик в точках Мой постамат в АО",
+ rival_pvz_cnt_shap: "Кол-во ПВЗ*",
+ rival_post_cnt_shap: "Кол-во постаматов конкурентов *",
+ metro_dist_shap: "Расстояние до метро",
+ property_price_bargains_shap: "Цена сделок жилой недвижимости*",
+ property_price_offers_shap: "Цена предложений жилой недвижимости*",
+ property_mean_floor_shap: "Средняя этажность застройки*",
+ property_era_shap: "Эпоха жилой недвижимости*",
+ flats_cnt_shap: "Кол-во квартир*",
+ popul_home_shap: "Численность проживающего населения*",
+ popul_job_shap: "Численность работающего населения*",
+ yndxfood_sum_shap: "Сумма заказов Яндекс.Еда*",
+ yndxfood_cnt_shap: "Кол-во заказов Яндекс.Еда*",
+ school_cnt_shap: "Кол-во школ*",
+ kindergar_cnt_shap: "Кол-во детсадов*",
+ public_stop_cnt_shap: "Кол-во остановок общ. транспорта*",
+ sport_center_cnt_shap: "Кол-во спортивных центров*",
+ pharmacy_cnt_shap: "Кол-во аптек*",
+ supermarket_cnt_shap: "Кол-во супермаркетов*",
+ supermarket_premium_cnt_shap: "Кол-во премиальных супермаркетов*",
+ clinic_cnt_shap: "Кол-во поликлиник*",
+ bank_cnt_shap: "Кол-во банков*",
+ reca_cnt_shap: "Кол-во точек общепита*",
+ lab_cnt_shap: "Кол-во лабораторий*",
+ culture_cnt_shap: "Кол-во объектов культуры*",
+ attraction_cnt_shap: "Кол-во достопримечательностей*",
+ mfc_cnt_shap: "Кол-во МФЦ*",
+ bc_cnt_shap: "Кол-во бизнес-центров*",
+ tc_cnt_shap: "Кол-во торговых центров*",
+ 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: {
+ bar: {
+ borderWidth: 0,
+ borderRadius: 5,
+ pointStyle: 'circle'
+ },
+ },
+ plugins: {
+ legend: {
+ display: false
+ },
+ tooltip: {
+ displayColors: false,
+ yAlign: "top",
+ callbacks: {
+ label: function(context) {
+ 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)
+ if (context.datasetIndex === 0) label.push("Значение: " + point[key]);
+ if (context.parsed.x !== null) {
+ let labelText = "";
+ if (context.datasetIndex === 0) labelText = "Вклад в прогноз, %: ";
+ if (context.datasetIndex === 1) labelText = "Минимальный вклад в прогноз, %: ";
+ if (context.datasetIndex === 2) labelText = "Максимальный вклад в прогноз, %: ";
+ label.push(labelText + context.parsed.x);
+ }
+ return label;
+ },
+ body: () => {
+ return "Вклад в прогноз, %:"
+ }
+ }
+ },
+ },
+ scales: {
+ y: {
+ stacked: true,
+ },
+ x: {
+ title: {
+ display: true,
+ text: 'Вклад в прогноз, %',
+ },
+ grid: {
+ color: function(context) {
+ if (context.tick.value === 0) {
+ return "#000000";
+ }
+
+ return "#E5E5E5";
+ },
+ },
+ }
+ }
+ };
+
+ const labels = Object.keys(GRAPH_LABELS_MAP).sort((a, b) => {
+ if (Math.abs(point[a]) < Math.abs(point[b])) return 1;
+ else return -1;
+ }).slice(0, 15);
+
+ const data = {
+ labels: labels.map((l) => GRAPH_LABELS_MAP[l]),
+ datasets: [
+ {
+ 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[`min_${l}`] : 0),
+ backgroundColor: "#cccccc",
+ hoverBackgroundColor: "#aaaaaa",
+ type: 'bar',
+ showLine: false,
+ },
+ {
+ data: labels.map((l) => meanData ? meanData[`max_${l}`] : 0),
+ backgroundColor: "#cccccc",
+
+ hoverBackgroundColor: "#aaaaaa",
+ type: 'bar',
+ showLine: false,
+ },
+ ],
+ };
+ return
+}
\ No newline at end of file
diff --git a/src/Map/Popup/Popup.jsx b/src/Map/Popup/Popup.jsx
index f024c3d..aece2c2 100644
--- a/src/Map/Popup/Popup.jsx
+++ b/src/Map/Popup/Popup.jsx
@@ -1,4 +1,4 @@
-import { Button } 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";
@@ -8,84 +8,129 @@ import { OnApprovalPointPopup } from "./mode-popup/OnApprovalPointPopup";
import { WorkingPointPopup } from "./mode-popup/WorkingPointPopup";
import { FeatureProperties } from "./mode-popup/FeatureProperties";
import { usePopup } from "../../stores/usePopup.js";
+import { PanoramaIcon } from "../../icons/PanoramaIcon";
+import { useGetPopupPoints } from "../../api.js";
+import { doesMatchFilter } from "../../utils.js";
+import Checkbox from "antd/es/checkbox/Checkbox";
+import { usePointSelection } from "../../stores/usePointSelection.js";
+import { usePendingPointsFilters } from "../../stores/usePendingPointsFilters.js";
-const SingleFeaturePopup = ({ feature }) => {
+const SingleFeaturePopup = ({ feature, point }) => {
const { mode } = useMode();
const isRivals =
- feature.layer?.id === LAYER_IDS.pvz ||
- feature.layer?.id === LAYER_IDS.other;
+ feature.layer?.id.includes(LAYER_IDS.pvz) ||
+ feature.layer?.id.includes(LAYER_IDS.other);
const isPendingPoint = feature.properties.status === STATUSES.pending;
const isWorkingPoint = feature.properties.status === STATUSES.working;
if (isRivals) {
- return
;
+ return
;
}
if (mode === MODES.ON_APPROVAL && !isPendingPoint) {
- return
;
+ return
;
}
if (mode === MODES.WORKING && isWorkingPoint) {
- return
;
+ return
;
}
if (mode === MODES.PENDING && isPendingPoint)
- return
;
+ return
;
- return
;
+ return
;
};
-const MultipleFeaturesPopup = ({ features }) => {
+const MultipleFeaturesPopup = ({ features, points }) => {
const { setPopup } = usePopup();
+ const { selection, include, exclude } = usePointSelection();
+ const { filters, ranges } = usePendingPointsFilters();
return (
{features.map((feature) => {
+ const featureId = feature.properties.id;
+ const point = points.find(p => p.id === featureId);
+ const isSelected = (doesMatchFilter(filters, ranges, feature) && !selection.excluded.has(featureId)) ||
+ selection.included.has(featureId);
+ const handleSelect = () => {
+ if (isSelected) {
+ exclude(featureId);
+ } else {
+ include(featureId);
+ }
+ };
return (
-
);
};
+const YandexPanoramaLink = ({ lat, lng }) => {
+ const link = `https://yandex.ru/maps/?panorama[point]=${lng},${lat}`
+ return (
+
+ );
+}
+
export const MapPopup = ({ features, lat, lng, onClose }) => {
+ const {data: points, isLoading} = useGetPopupPoints(features);
+
const getContent = () => {
if (features.length === 1) {
- return
;
+ return
;
}
- return ;
+ return ;
};
return (
- {getContent()}
+
+ {isLoading ? : getContent()}
);
};
diff --git a/src/Map/Popup/PopupWrapper.jsx b/src/Map/Popup/PopupWrapper.jsx
index 73e9869..03202b1 100644
--- a/src/Map/Popup/PopupWrapper.jsx
+++ b/src/Map/Popup/PopupWrapper.jsx
@@ -7,7 +7,7 @@ export const PopupWrapper = ({ lat, lng, onClose, children }) => {
latitude={lat}
onClose={onClose}
closeOnClick={false}
- style={{ minWidth: "300px" }}
+ style={{ minWidth: "330px" }}
>
{children}
diff --git a/src/Map/Popup/mode-popup/FeatureProperties.jsx b/src/Map/Popup/mode-popup/FeatureProperties.jsx
index 3f2830c..f674e92 100644
--- a/src/Map/Popup/mode-popup/FeatureProperties.jsx
+++ b/src/Map/Popup/mode-popup/FeatureProperties.jsx
@@ -1,35 +1,95 @@
import { CATEGORIES, STATUSES } from "../../../config";
import {
commonPopupConfig,
- residentialPopupConfig,
+ residentialPopupFields,
rivalsConfig,
workingPointFields,
} from "./config";
import { Col, Row } from "antd";
import { twMerge } from "tailwind-merge";
import { LAYER_IDS } from "../../Layers/constants";
-import { isNil } from "../../../utils.js";
+import {getFilteredGroups, isNil} from "../../../utils.js";
import { useGetRegions } from "../../../components/RegionSelect.jsx";
+import {useOtherGroups, usePostamatesAndPvzGroups} from "../../../api.js";
+import {useMemo} from "react";
+import { TrafficModal } from "../../TrafficModal.jsx";
-export const FeatureProperties = ({ feature, dynamicStatus, postamatId }) => {
+const getRivalsName = (feature) => {
+ const { data: postamatesAndPvzGroups } = usePostamatesAndPvzGroups();
+ const { data: otherGroups } = useOtherGroups();
+
+ const filteredPostamatesCategories = useMemo(() => {
+ return getFilteredGroups(postamatesAndPvzGroups);
+ }, [postamatesAndPvzGroups]);
+
+ const filteredOtherCategories = useMemo(() => {
+ return getFilteredGroups(otherGroups);
+ }, [otherGroups]);
+
+ const filteredPostamatesGroups = useMemo(() => {
+ if (!filteredPostamatesCategories) return [];
+ return filteredPostamatesCategories
+ .map((category) => {
+ return [...category.groups]
+ }).flat();
+ }, [filteredPostamatesCategories]);
+
+ const filteredOtherGroups = useMemo(() => {
+ if (!filteredOtherCategories) return [];
+ return filteredOtherCategories
+ .map((category) => {
+ return [...category.groups]
+ }).flat();
+ }, [filteredOtherCategories]);
+
+ const isOther = feature.layer?.id.includes(LAYER_IDS.other);
+ const name = isOther ?
+ filteredOtherCategories.find(c => c.id === feature.properties.category_id)?.name :
+ filteredPostamatesCategories.find(c => c.id === feature.properties.category_id)?.name;
+
+ const groupName = isOther ?
+ filteredOtherGroups.find(c => c.id === feature.properties.group_id)?.name :
+ filteredPostamatesGroups.find(c => c.id === feature.properties.group_id)?.name;
+
+ return {
+ name,
+ groupName
+ }
+}
+
+export const FeatureProperties = ({ feature, dynamicStatus, postamatId, point }) => {
const { data } = useGetRegions();
const isResidential = feature.properties.category === CATEGORIES.residential;
const isWorking = feature.properties.status === STATUSES.working;
+ const { name, groupName } = getRivalsName(feature);
+
const isRivals =
- feature.layer?.id === LAYER_IDS.pvz ||
- feature.layer?.id === LAYER_IDS.other;
+ feature.layer?.id.includes(LAYER_IDS.pvz) ||
+ feature.layer?.id.includes(LAYER_IDS.other);
const getConfig = () => {
if (isRivals) {
return rivalsConfig;
}
- const config = isResidential ? residentialPopupConfig : commonPopupConfig;
- return isWorking ? [...config, ...workingPointFields] : config;
+ const config = isWorking ? [...commonPopupConfig, ...workingPointFields] : commonPopupConfig;
+ return isResidential ? [...config, ...residentialPopupFields] : config;
};
const getValue = ({ field, render, empty, type, fallbackField }) => {
- let value = feature.properties[field];
+ let value = point ? point[field] : feature.properties[field];
+
+ if (field === "prediction_current") {
+ value = ;
+ }
+
+ if (field === "category_id") {
+ value = name;
+ }
+
+ if (field === "group_id") {
+ value = groupName;
+ }
if (field === "status" && dynamicStatus) {
value = dynamicStatus;
@@ -40,7 +100,8 @@ export const FeatureProperties = ({ feature, dynamicStatus, postamatId }) => {
}
if (type === "region") {
- value = value ? value : feature.properties[fallbackField];
+ const valueProvider = point ? point : feature
+ value = value ? value : valueProvider[fallbackField];
value = render(value, data?.normalized);
} else {
value = render ? render(value) : value;
diff --git a/src/Map/Popup/mode-popup/OnApprovalPointPopup.jsx b/src/Map/Popup/mode-popup/OnApprovalPointPopup.jsx
index e9b07ae..47c78fa 100644
--- a/src/Map/Popup/mode-popup/OnApprovalPointPopup.jsx
+++ b/src/Map/Popup/mode-popup/OnApprovalPointPopup.jsx
@@ -10,12 +10,12 @@ import { Button, InputNumber } from "antd";
import { STATUSES } from "../../../config";
import { isNil } from "../../../utils.js";
-export const OnApprovalPointPopup = ({ feature }) => {
+export const OnApprovalPointPopup = ({ feature, point }) => {
const featureId = feature.properties.id;
const { setClickedPointConfig } = useClickedPointConfig();
const { status: initialStatus, postamat_id: initialPostamatId } =
- feature.properties;
+ point;
const [status, setStatus] = useState(initialStatus);
const [postamatId, setPostamatId] = useState(initialPostamatId);
@@ -92,6 +92,7 @@ export const OnApprovalPointPopup = ({ feature }) => {
<>
diff --git a/src/Map/Popup/mode-popup/PendingPointPopup.jsx b/src/Map/Popup/mode-popup/PendingPointPopup.jsx
index 68cee6e..261bddc 100644
--- a/src/Map/Popup/mode-popup/PendingPointPopup.jsx
+++ b/src/Map/Popup/mode-popup/PendingPointPopup.jsx
@@ -5,50 +5,17 @@ import { FeatureProperties } from "./FeatureProperties";
import { Button } from "antd";
import { useCanEdit } from "../../../api";
import { usePendingPointsFilters } from "../../../stores/usePendingPointsFilters";
+import { doesMatchFilter } from "../../../utils.js";
-export const PendingPointPopup = ({ feature }) => {
+export const PendingPointPopup = ({ feature, point }) => {
const { include, selection, exclude } = usePointSelection();
const { setClickedPointConfig } = useClickedPointConfig();
- const { filters } = usePendingPointsFilters();
- const doesMatchFilter = () => {
- const { prediction, categories, region } = filters;
- const {
- prediction_current,
- category,
- area,
- district,
- area_id,
- district_id,
- } = feature.properties;
-
- const doesMatchPredictionFilter =
- prediction_current >= prediction[0] &&
- prediction_current <= prediction[1];
-
- const doesMatchCategoriesFilter =
- categories.length > 0 ? categories.includes(category) : true;
-
- const doesMatchRegionFilter = () => {
- if (!region) return true;
-
- if (region.type === "ao") {
- return (district ?? district_id) === region.id;
- } else {
- return (area ?? area_id) === region.id;
- }
- };
-
- return (
- doesMatchPredictionFilter &&
- doesMatchCategoriesFilter &&
- doesMatchRegionFilter()
- );
- };
+ const { filters, ranges } = usePendingPointsFilters();
const featureId = feature.properties.id;
const isSelected =
- (doesMatchFilter() && !selection.excluded.has(featureId)) ||
+ (doesMatchFilter(filters, ranges, feature) && !selection.excluded.has(featureId)) ||
selection.included.has(featureId);
useEffect(
@@ -68,7 +35,7 @@ export const PendingPointPopup = ({ feature }) => {
return (
<>
-
+
{canEdit && (