diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 3bdb85aa..dc9592ac 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,20 +1,19 @@ -import React, { Suspense, useEffect } from 'react'; -import { Provider } from 'react-redux'; +import React, {Suspense, useEffect} from 'react'; +import {Provider} from 'react-redux'; import './App.scss'; import TopBar from './components/TopBar'; import Sidebar from './components/Sidebar'; import MainContent from './components/MainContent'; -import { Store, Persistor } from './store'; +import {Store, Persistor} from './store'; import Box from '@mui/material/Box'; -import { ThemeProvider } from '@mui/material/styles'; +import {ThemeProvider} from '@mui/material/styles'; import Theme from './util/Theme'; -import { PersistGate } from 'redux-persist/integration/react'; -import { useAppDispatch, useAppSelector } from './store/hooks'; -import { selectDistrict } from './store/DataSelectionSlice'; -import { useTranslation } from 'react-i18next'; - +import {PersistGate} from 'redux-persist/integration/react'; +import {useAppDispatch, useAppSelector} from './store/hooks'; +import {selectDistrict} from './store/DataSelectionSlice'; +import {useTranslation} from 'react-i18next'; /** * This is the root element of the React application. It divides the main screen area into the three main components. @@ -27,7 +26,7 @@ export default function App(): JSX.Element { - + - - - - - ); } @@ -60,7 +54,7 @@ export default function App(): JSX.Element { * component. */ function Initializer() { - const { t } = useTranslation(); + const {t} = useTranslation(); const selectedDistrict = useAppSelector((state) => state.dataSelection.district); const dispatch = useAppDispatch(); @@ -68,7 +62,7 @@ function Initializer() { // before the translations are available. useEffect(() => { if (selectedDistrict.ags === '00000' && selectedDistrict.name === '') { - dispatch(selectDistrict({ ags: '00000', name: t('germany'), type: '' })); + dispatch(selectDistrict({ags: '00000', name: t('germany'), type: ''})); } }, [selectedDistrict, t, dispatch]); diff --git a/frontend/src/components/Sidebar/DistrictMap.tsx b/frontend/src/components/Sidebar/DistrictMap.tsx index 3da9a8be..91e6bb5c 100644 --- a/frontend/src/components/Sidebar/DistrictMap.tsx +++ b/frontend/src/components/Sidebar/DistrictMap.tsx @@ -1,26 +1,26 @@ -import React, { useEffect, useMemo, useState } from 'react'; -import { useTheme } from '@mui/material/styles'; +import React, {useEffect, useMemo, useState} from 'react'; +import {useTheme} from '@mui/material/styles'; import * as am5 from '@amcharts/amcharts5'; import * as am5map from '@amcharts/amcharts5/map'; -import { useTranslation } from 'react-i18next'; -import { useAppDispatch, useAppSelector } from '../../store/hooks'; -import { selectDistrict } from '../../store/DataSelectionSlice'; +import {useTranslation} from 'react-i18next'; +import {useAppDispatch, useAppSelector} from '../../store/hooks'; +import {selectDistrict} from '../../store/DataSelectionSlice'; import Box from '@mui/material/Box'; import Grid from '@mui/material/Grid'; import IconButton from '@mui/material/IconButton'; import Tooltip from '@mui/material/Tooltip'; import LockIcon from '@mui/icons-material/Lock'; -import { useGetSimulationDataByDateQuery } from 'store/services/scenarioApi'; +import {useGetSimulationDataByDateQuery} from 'store/services/scenarioApi'; import HeatLegend from './HeatLegend'; -import { NumberFormatter } from 'util/hooks'; +import {NumberFormatter} from 'util/hooks'; import HeatLegendEdit from './HeatLegendEdit'; -import { HeatmapLegend } from '../../types/heatmapLegend'; +import {HeatmapLegend} from '../../types/heatmapLegend'; import LockOpen from '@mui/icons-material/LockOpen'; import LoadingContainer from '../shared/LoadingContainer'; import mapData from 'assets/lk_germany_reduced.geojson'; -import { useGetCaseDataByDateQuery } from '../../store/services/caseDataApi'; +import {useGetCaseDataByDateQuery} from '../../store/services/caseDataApi'; -const { useRef } = React; +const {useRef} = React; interface IRegionPolygon { value: number; @@ -47,29 +47,29 @@ export default function DistrictMap(): JSX.Element { const legend = useAppSelector((state) => state.userPreference.selectedHeatmap); const [chart, setChart] = useState(null); - const { data: simulationData, isFetching: isSimulationDataFetching } = useGetSimulationDataByDateQuery( + const {data: simulationData, isFetching: isSimulationDataFetching} = useGetSimulationDataByDateQuery( { id: selectedScenario ?? 0, day: selectedDate ?? '', groups: ['total'], compartments: [selectedCompartment ?? ''], }, - { skip: selectedScenario === null || selectedScenario === 0 || !selectedCompartment || !selectedDate } + {skip: selectedScenario === null || selectedScenario === 0 || !selectedCompartment || !selectedDate} ); - const { data: caseData, isFetching: isCaseDataFetching } = useGetCaseDataByDateQuery( + const {data: caseData, isFetching: isCaseDataFetching} = useGetCaseDataByDateQuery( { day: selectedDate ?? '', groups: ['total'], compartments: [selectedCompartment ?? ''], }, - { skip: selectedScenario === null || selectedScenario > 0 || !selectedCompartment || !selectedDate } + {skip: selectedScenario === null || selectedScenario > 0 || !selectedCompartment || !selectedDate} ); const legendRef = useRef(null); - const { t, i18n } = useTranslation(); - const { t: tBackend } = useTranslation('backend'); - const { formatNumber } = NumberFormatter(i18n.language, 1, 0); + const {t, i18n} = useTranslation(); + const {t: tBackend} = useTranslation('backend'); + const {formatNumber} = NumberFormatter(i18n.language, 1, 0); const theme = useTheme(); const dispatch = useAppDispatch(); const lastSelectedPolygon = useRef(null); @@ -188,7 +188,7 @@ export default function DistrictMap(): JSX.Element { // add click event polygonTemplate.events.on('click', (e) => { const item = e.target.dataItem?.dataContext as IRegionPolygon; - dispatch(selectDistrict({ ags: item.RS, name: item.GEN, type: t(item.BEZ) })); + dispatch(selectDistrict({ags: item.RS, name: item.GEN, type: t(item.BEZ)})); }); // add hover state polygonTemplate.states.create('hover', { @@ -271,7 +271,7 @@ export default function DistrictMap(): JSX.Element { if (Number.isFinite(regionData.value)) { if (legend.steps[0].value == 0 && legend.steps[legend.steps.length - 1].value == 1) { // if legend is normalized, also pass mix & max to color function - fillColor = getColorFromLegend(regionData.value, legend, { min: 0, max: aggregatedMax }); + fillColor = getColorFromLegend(regionData.value, legend, {min: 0, max: aggregatedMax}); } else { // if legend is not normalized, min & max are first and last stop of legend and don't need to be passed fillColor = getColorFromLegend(regionData.value, legend); @@ -346,7 +346,7 @@ export default function DistrictMap(): JSX.Element { aria-label={t('heatlegend.lock')} onClick={() => setFixedLegendMaxValue(fixedLegendMaxValue ? null : aggregatedMax)} size='small' - sx={{ padding: theme.spacing(0) }} + sx={{padding: theme.spacing(0)}} > {fixedLegendMaxValue ? : } @@ -361,13 +361,13 @@ export default function DistrictMap(): JSX.Element { function getColorFromLegend( value: number, legend: HeatmapLegend, - aggregatedMinMax?: { min: number; max: number } + aggregatedMinMax?: {min: number; max: number} ): am5.Color { // assume legend stops are absolute let normalizedValue = value; // if aggregated values (min/max) are properly set, the legend items are already normalized => need to normalize value too if (aggregatedMinMax && aggregatedMinMax.min < aggregatedMinMax.max) { - const { min: aggregatedMin, max: aggregatedMax } = aggregatedMinMax; + const {min: aggregatedMin, max: aggregatedMax} = aggregatedMinMax; normalizedValue = (value - aggregatedMin) / (aggregatedMax - aggregatedMin); } else if (aggregatedMinMax) { // log error if any of the above checks fail diff --git a/frontend/src/components/Sidebar/HeatLegend.tsx b/frontend/src/components/Sidebar/HeatLegend.tsx index 118a5332..012c7deb 100644 --- a/frontend/src/components/Sidebar/HeatLegend.tsx +++ b/frontend/src/components/Sidebar/HeatLegend.tsx @@ -1,10 +1,10 @@ -import React, { useEffect } from 'react'; -import { useTheme } from '@mui/material/styles'; +import React, {useEffect} from 'react'; +import {useTheme} from '@mui/material/styles'; import Box from '@mui/material/Box'; import * as am5 from '@amcharts/amcharts5'; -import { useTranslation } from 'react-i18next'; -import { NumberFormatter } from 'util/hooks'; -import { HeatmapLegend } from '../../types/heatmapLegend'; +import {useTranslation} from 'react-i18next'; +import {NumberFormatter} from 'util/hooks'; +import {HeatmapLegend} from '../../types/heatmapLegend'; export default function HeatLegend(props: { // add is_dynamic/absolute? @@ -16,8 +16,8 @@ export default function HeatLegend(props: { id: string; }): JSX.Element { const id = props.id + String(Date.now() + Math.random()); // "guarantee" unique id - const { i18n: i18n } = useTranslation(); - const { formatNumber } = NumberFormatter(i18n.language, 3, 8); + const {i18n: i18n} = useTranslation(); + const {formatNumber} = NumberFormatter(i18n.language, 3, 8); const theme = useTheme(); useEffect(() => { @@ -36,7 +36,7 @@ export default function HeatLegend(props: { ); // compile stop list - const stoplist: { color: am5.Color; opacity: number; offset: number }[] = []; + const stoplist: {color: am5.Color; opacity: number; offset: number}[] = []; props.legend.steps.forEach((item) => { stoplist.push({ color: am5.color(item.color), diff --git a/frontend/src/components/Sidebar/index.tsx b/frontend/src/components/Sidebar/index.tsx index e39dd263..29c9a3a1 100644 --- a/frontend/src/components/Sidebar/index.tsx +++ b/frontend/src/components/Sidebar/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useTheme } from '@mui/material/styles'; +import {useTheme} from '@mui/material/styles'; import SearchBar from './SearchBar'; import DistrictMap from './DistrictMap'; import SidebarTabs from './SidebarTabs'; @@ -28,7 +28,7 @@ export default function Sidebar(): JSX.Element { - + diff --git a/frontend/webpack/webpack.common.js b/frontend/webpack/webpack.common.js index 1b678d13..f45af397 100644 --- a/frontend/webpack/webpack.common.js +++ b/frontend/webpack/webpack.common.js @@ -15,15 +15,15 @@ module.exports = { files: [ { match: /(LOKI_compact)+.+(.svg)$/, - attributes: { as: 'image' }, + attributes: {as: 'image'}, }, { match: /(lk_germany_reduced)+.+(.geojson)$/, - attributes: { as: 'fetch', crossOrigin: 'anonymous' }, + attributes: {as: 'fetch', crossOrigin: 'anonymous'}, }, { match: /(lk_germany_reduced_list)+.+(.json)$/, - attributes: { as: 'fetch', crossOrigin: 'anonymous' }, + attributes: {as: 'fetch', crossOrigin: 'anonymous'}, }, ], }), @@ -49,18 +49,18 @@ module.exports = { }, module: { rules: [ - { test: /\.tsx?$/i, use: ['ts-loader'], exclude: /node_modules/ }, - { test: /\.css$/i, use: ['style-loader', 'css-loader'] }, - { test: /\.scss$/i, use: ['style-loader', 'css-loader', 'sass-loader'] }, + {test: /\.tsx?$/i, use: ['ts-loader'], exclude: /node_modules/}, + {test: /\.css$/i, use: ['style-loader', 'css-loader']}, + {test: /\.scss$/i, use: ['style-loader', 'css-loader', 'sass-loader']}, { test: /\.(png|jpe?g|gif|jp2|webp|svg)$/i, type: 'asset/resource', - generator: { filename: 'images/[name].[hash][ext][query]' }, + generator: {filename: 'images/[name].[hash][ext][query]'}, }, { test: /\.(json|geojson)$/i, type: 'asset/resource', - generator: { filename: 'data/[name].[hash][ext][query]' }, + generator: {filename: 'data/[name].[hash][ext][query]'}, }, { test: /locales.*\.json5$/i, @@ -75,14 +75,14 @@ module.exports = { { test: /\.md$/i, type: 'asset/resource', - generator: { filename: 'docs/[name].[hash][ext][query]' }, + generator: {filename: 'docs/[name].[hash][ext][query]'}, }, - { test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, loader: 'file-loader' }, + {test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, loader: 'file-loader'}, ], }, resolve: { modules: ['src', 'public', 'node_modules'], extensions: ['.ts', '.tsx', '.js', '.jsx'], - fallback: { crypto: false }, + fallback: {crypto: false}, }, };