diff --git a/frontend/src/pages/MapPage/RoadInfo.tsx b/frontend/src/pages/MapPage/RoadInfo.tsx index b03f02a..e48ff06 100644 --- a/frontend/src/pages/MapPage/RoadInfo.tsx +++ b/frontend/src/pages/MapPage/RoadInfo.tsx @@ -1,6 +1,14 @@ import React, { useState, useCallback } from "react"; import _ from "lodash"; -import { Segment, Menu, Header, Label, Icon, Table } from "semantic-ui-react"; +import { + Segment, + Menu, + Header, + Label, + Icon, + Table, + Message, +} from "semantic-ui-react"; import { Layer, Source } from "react-map-gl"; import { of, from, concat } from "rxjs"; import { useObservable } from "rxjs-hooks"; @@ -9,8 +17,9 @@ import { Chart } from "components"; import { pairwise } from "utils"; import { useTranslation } from "react-i18next"; -import api from 'api' -import {colorByDistance, borderByZone} from 'mapstyles' +import type { Location } from "types"; +import api from "api"; +import { colorByDistance, borderByZone } from "mapstyles"; import styles from "./styles.module.less"; @@ -88,15 +97,20 @@ function RoadStatsTable({ data }) { } function HistogramChart({ bins, counts, zone }) { - const diff = bins[1] - bins[0] + const diff = bins[1] - bins[0]; const colortype = zone === "rural" ? 3 : 5; const data = _.zip( bins.slice(0, bins.length - 1).map((v) => v + diff / 2), counts ).map((value) => ({ value, - itemStyle: {color: selectFromColorMap(colorByDistance()[3][colortype].slice(2), value[0]),}, - })) + itemStyle: { + color: selectFromColorMap( + colorByDistance()[3][colortype].slice(2), + value[0] + ), + }, + })); return ( + {hasFilters && ( + + + + {t("MapPage.roadInfo.hintFiltersNotApplied")} + + + )} + {info?.road.zone && (