Fix PR feedback

minvws · Dec 21, 2022 · d3780c4 · d3780c4
1 parent d3dd5ec
commit d3780c4
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 381 deletions.
diff --git a/packages/app/src/components/choropleth-legenda.tsx b/packages/app/src/components/choropleth-legenda.tsx
@@ -1,13 +1,11 @@
 import { ChoroplethThresholdsValue, colors } from '@corona-dashboard/common';
-import styled from 'styled-components';
 import { ValueAnnotation } from '~/components/value-annotation';
 import { useIntl } from '~/intl';
-import { space, fontSizes } from '~/style/theme';
 import { replaceVariablesInText } from '~/utils';
 import { useBreakpoints } from '~/utils/use-breakpoints';
 import { Box } from './base';
 import { Legend, LegendItem } from './legend';
-import { InlineText, Text } from './typography';
+import { Text } from './typography';
 
 interface ChoroplethLegendaProps {
   title: string;
@@ -37,38 +35,21 @@ export function ChoroplethLegenda({ title, thresholds, valueAnnotation, pageType
       } as LegendItem)
   );
 
+  if (pageType === 'sewer') {
+    legendItems.push({
+      label: outdatedDataLabel,
+      shape: 'square',
+      color: colors.yellow1,
+    } as LegendItem);
+  }
+
   return (
     <Box width="100%" spacing={2} aria-hidden="true">
       {title && <Text variant="subtitle1">{title}</Text>}
 
       <Legend items={legendItems} columns={breakpoints.lg ? 1 : 2} />
 
-      {pageType === 'sewer' && (
-        <Box display="flex" alignItems="center" paddingBottom={space[2]}>
-          <LegendaColor first={true} width={`${100 / thresholds.length}%`} color={colors.yellow1} />
-          <Box paddingLeft={space[3]} fontSize={fontSizes[1]}>
-            <InlineText>{outdatedDataLabel}</InlineText>
-          </Box>
-        </Box>
-      )}
       <ValueAnnotation>{valueAnnotation}</ValueAnnotation>
     </Box>
   );
 }
-
-type LegendaColorProps = {
-  first?: boolean;
-  last?: boolean;
-  width?: string;
-  color: string;
-};
-
-const LegendaColor = styled.div<LegendaColorProps>`
-  width: 100%;
-  height: 10px;
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: ${({ width }) => (width ? width : 'inherit')};
-  border-radius: ${({ first, last }) => (first ? '2px 0 0 2px' : last ? '0 2px 2px 0' : 0)};
-  background-color: ${({ color }) => (color ? color : 'inherit')};
-`;
diff --git a/packages/app/src/components/choropleth-tile.tsx b/packages/app/src/components/choropleth-tile.tsx
@@ -1,4 +1,5 @@
 import { ChoroplethThresholdsValue } from '@corona-dashboard/common';
+import { space } from '~/style/theme';
 import { ChoroplethLegenda } from '~/components/choropleth-legenda';
 import { DataProps } from '~/types/attributes';
 import { useBreakpoints } from '~/utils/use-breakpoints';
@@ -16,7 +17,6 @@ type ChoroplethTileProps = DataProps & {
   legend?: {
     title: string;
     thresholds: ChoroplethThresholdsValue[];
-    type?: 'default' | 'bar';
     outdatedDataLabel?: string;
   };
   metadata?: MetadataProps;
@@ -56,14 +56,14 @@ export function ChoroplethTile({
 
   return (
     <FullscreenChartTile metadata={metadata}>
-      <Box display="flex" flexDirection={{ _: 'column', lg: 'row' }} m={0} as="figure" {...dataProps} height="100%" spacing={3}>
+      <Box display="flex" flexDirection={{ _: 'column', lg: 'row' }} margin={space[0]} as="figure" {...dataProps} height="100%" spacing={3}>
         <Box flex={{ lg: 1 }} as="figcaption" spacing={3}>
           <Heading level={3}>{title}</Heading>
 
           {typeof description === 'string' ? <Text>{description}</Text> : description}
 
           {onChartRegionChange && chartRegion && (
-<Box display="flex" justifyContent="flex-start" paddingTop={space[4]}>
+            <Box display="flex" justifyContent="flex-start" paddingTop={space[4]}>
               <ChartRegionControls value={chartRegion} onChange={onChartRegionChange} />
             </Box>
           )}
@@ -76,7 +76,7 @@ export function ChoroplethTile({
         </Box>
 
         <Box flex={{ lg: 1 }} display="flex" flexDirection="column" height="100%" spacing={3}>
-          <Box height="100%" mt={4} pl={hasPadding && breakpoints.lg ? 4 : undefined}>
+          <Box height="100%" marginTop={space[4]} pl={hasPadding && breakpoints.lg ? 4 : undefined}>
             <ErrorBoundary>{children}</ErrorBoundary>
           </Box>
 

diff --git a/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx b/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx
@@ -1,57 +1,19 @@
-import {
-  colors,
-  DAY_IN_SECONDS,
-  TimeframeOption,
-  TimeframeOptionsList,
-  WEEK_IN_SECONDS,
-} from '@corona-dashboard/common';
+import { colors, DAY_IN_SECONDS, TimeframeOption, TimeframeOptionsList, WEEK_IN_SECONDS } from '@corona-dashboard/common';
 import { Ziekenhuis } from '@corona-dashboard/icons';
 import { last } from 'lodash';
 import { GetStaticPropsContext } from 'next';
-import {
-  ChartTile,
-  DynamicChoropleth,
-  TwoKpiSection,
-  ChoroplethTile,
-  KpiTile,
-  KpiValue,
-  PageInformationBlock,
-  TileList,
-  TimeSeriesChart,
-} from '~/components';
+import { ChartTile, DynamicChoropleth, TwoKpiSection, ChoroplethTile, KpiTile, KpiValue, PageInformationBlock, TileList, TimeSeriesChart } from '~/components';
 import { thresholds } from '~/components/choropleth/logic/thresholds';
 import { Layout, GmLayout } from '~/domain/layout';
 import { useIntl } from '~/intl';
 import { Languages, SiteText } from '~/locale';
-import {
-  ElementsQueryResult,
-  getElementsQuery,
-  getTimelineEvents,
-} from '~/queries/get-elements-query';
-import {
-  getArticleParts,
-  getLinkParts,
-  getPagePartsQuery,
-} from '~/queries/get-page-parts-query';
-import {
-  createGetStaticProps,
-  StaticProps,
-} from '~/static-props/create-get-static-props';
-import {
-  createGetChoroplethData,
-  createGetContent,
-  getLastGeneratedDate,
-  getLokalizeTexts,
-  selectGmData,
-} from '~/static-props/get-data';
+import { ElementsQueryResult, getElementsQuery, getTimelineEvents } from '~/queries/get-elements-query';
+import { getArticleParts, getLinkParts, getPagePartsQuery } from '~/queries/get-page-parts-query';
+import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props';
+import { createGetChoroplethData, createGetContent, getLastGeneratedDate, getLokalizeTexts, selectGmData } from '~/static-props/get-data';
 import { filterByRegionMunicipalities } from '~/static-props/utils/filter-by-region-municipalities';
 import { ArticleParts, LinkParts, PagePartQueryResult } from '~/types/cms';
-import {
-  countTrailingNullValues,
-  getBoundaryDateStartUnix,
-  replaceVariablesInText,
-  useReverseRouter,
-} from '~/utils';
+import { countTrailingNullValues, getBoundaryDateStartUnix, replaceVariablesInText, useReverseRouter } from '~/utils';
 import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page';
 import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
 import { useState } from 'react';
@@ -68,16 +30,12 @@ type LokalizeTexts = ReturnType<typeof selectLokalizeTexts>;
 export { getStaticPaths } from '~/static-paths/gm';
 
 export const getStaticProps = createGetStaticProps(
-  ({ locale }: { locale: keyof Languages }) =>
-    getLokalizeTexts(selectLokalizeTexts, locale),
+  ({ locale }: { locale: keyof Languages }) => getLokalizeTexts(selectLokalizeTexts, locale),
   getLastGeneratedDate,
   selectGmData('hospital_nice', 'code'),
   createGetChoroplethData({
     gm: ({ hospital_nice_choropleth }, context) => ({
-      hospital_nice_choropleth: filterByRegionMunicipalities(
-        hospital_nice_choropleth,
-        context
-      ),
+      hospital_nice_choropleth: filterByRegionMunicipalities(hospital_nice_choropleth, context),
     }),
   }),
   async (context: GetStaticPropsContext) => {
@@ -93,10 +51,7 @@ export const getStaticProps = createGetStaticProps(
 
     return {
       content: {
-        articles: getArticleParts(
-          content.parts.pageParts,
-          'hospitalPageArticles'
-        ),
+        articles: getArticleParts(content.parts.pageParts, 'hospitalPageArticles'),
         links: getLinkParts(content.parts.pageParts, 'hospitalPageLinks'),
         elements: content.elements,
       },
@@ -105,44 +60,24 @@ export const getStaticProps = createGetStaticProps(
 );
 
 function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
-  const {
-    pageText,
-    selectedGmData: data,
-    choropleth,
-    municipalityName,
-    content,
-    lastGenerated,
-  } = props;
+  const { pageText, selectedGmData: data, choropleth, municipalityName, content, lastGenerated } = props;
 
-  const [
-    hospitalAdmissionsOverTimeTimeframe,
-    setHospitalAdmissionsOverTimeTimeframe,
-  ] = useState<TimeframeOption>(TimeframeOption.ALL);
+  const [hospitalAdmissionsOverTimeTimeframe, setHospitalAdmissionsOverTimeTimeframe] = useState<TimeframeOption>(TimeframeOption.ALL);
 
   const { commonTexts, formatDateFromSeconds } = useIntl();
   const reverseRouter = useReverseRouter();
 
-  const { textGm, textShared } = useDynamicLokalizeTexts<LokalizeTexts>(
-    pageText,
-    selectLokalizeTexts
-  );
+  const { textGm, textShared } = useDynamicLokalizeTexts<LokalizeTexts>(pageText, selectLokalizeTexts);
 
   const lastValue = data.hospital_nice.last_value;
-  const lastValueChoropleth =
-    last(choropleth.gm.hospital_nice_choropleth) || lastValue;
+  const lastValueChoropleth = last(choropleth.gm.hospital_nice_choropleth) || lastValue;
 
   const underReportedRange = getBoundaryDateStartUnix(
     data.hospital_nice.values,
-    countTrailingNullValues(
-      data.hospital_nice.values,
-      'admissions_on_date_of_admission_moving_average'
-    )
+    countTrailingNullValues(data.hospital_nice.values, 'admissions_on_date_of_admission_moving_average')
   );
 
-  const sevenDayAverageDates: [number, number] = [
-    underReportedRange - WEEK_IN_SECONDS,
-    underReportedRange - DAY_IN_SECONDS,
-  ];
+  const sevenDayAverageDates: [number, number] = [underReportedRange - WEEK_IN_SECONDS, underReportedRange - DAY_IN_SECONDS];
 
   const metadata = {
     ...commonTexts.gemeente_index.metadata,
@@ -161,9 +96,7 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
       <GmLayout code={data.code} municipalityName={municipalityName}>
         <TileList>
           <PageInformationBlock
-            category={
-              commonTexts.sidebar.categories.consequences_for_healthcare.title
-            }
+            category={commonTexts.sidebar.categories.consequences_for_healthcare.title}
             title={replaceVariablesInText(textGm.titel, {
               municipality: municipalityName,
             })}
@@ -194,14 +127,7 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
                 source: textGm.bronnen.rivm,
               }}
             >
-              <KpiValue
-                data-cy="admissions_on_date_of_reporting"
-                absolute={
-                  lastValue.admissions_on_date_of_admission_moving_average_rounded
-                }
-                isAmount
-                isMovingAverageDifference
-              />
+              <KpiValue data-cy="admissions_on_date_of_reporting" absolute={lastValue.admissions_on_date_of_admission_moving_average_rounded} isAmount isMovingAverageDifference />
             </KpiTile>
           </TwoKpiSection>
 
@@ -221,8 +147,7 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
               seriesConfig={[
                 {
                   type: 'line',
-                  metricProperty:
-                    'admissions_on_date_of_admission_moving_average',
+                  metricProperty: 'admissions_on_date_of_admission_moving_average',
                   label: textGm.linechart_legend_titel_moving_average,
                   color: colors.primary,
                 },
@@ -240,15 +165,10 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
                     end: Infinity,
                     label: textGm.linechart_legend_underreported_titel,
                     shortLabel: commonTexts.common.incomplete,
-                    cutValuesForMetricProperties: [
-                      'admissions_on_date_of_admission_moving_average_rounded',
-                    ],
+                    cutValuesForMetricProperties: ['admissions_on_date_of_admission_moving_average_rounded'],
                   },
                 ],
-                timelineEvents: getTimelineEvents(
-                  content.elements.timeSeries,
-                  'hospital_nice'
-                ),
+                timelineEvents: getTimelineEvents(content.elements.timeSeries, 'hospital_nice'),
               }}
             />
           </ChartTile>
@@ -265,7 +185,6 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
             legend={{
               title: textShared.chloropleth_legenda.titel,
               thresholds: thresholds.gm.admissions_on_date_of_admission,
-              type: 'default',
             }}
           >
             <DynamicChoropleth