feat(COR-1915): PR comment resolution

packages/app/src/components/age-demographic/age-demographic-chart.tsx

@@ -1,20 +1,20 @@
-import { Color, colors } from '@corona-dashboard/common';
+import { AccessibilityDefinition, useAccessibilityAnnotations } from '~/utils/use-accessibility-annotations';
+import { AgeDemographicChartText, AgeDemographicDefaultValue } from './types';
+import { AgeDemographicCoordinates } from './age-demographic-coordinates';
 import { AxisBottom, TickRendererProps } from '@visx/axis';
+import { Bar } from '@visx/shape';
+import { Box } from '~/components/base';
+import { Color, colors } from '@corona-dashboard/common';
+import { fontSizes, fontWeights, space } from '~/style/theme';
+import { formatAgeGroupRange } from './utils';
 import { GridColumns } from '@visx/grid';
 import { Group } from '@visx/group';
+import { KeyboardEvent, MouseEvent } from 'react';
 import { PatternLines } from '@visx/pattern';
-import { Bar } from '@visx/shape';
+import { replaceVariablesInText } from '~/utils';
+import { Text } from '~/components/typography';
 import { Text as VisxText } from '@visx/text';
-import { KeyboardEvent, MouseEvent } from 'react';
 import styled from 'styled-components';
-import { Box } from '~/components/base';
-import { Text } from '~/components/typography';
-import { fontSizes, fontWeights, space } from '~/style/theme';
-import { replaceVariablesInText } from '~/utils';
-import { AccessibilityDefinition, useAccessibilityAnnotations } from '~/utils/use-accessibility-annotations';
-import { AgeDemographicCoordinates } from './age-demographic-coordinates';
-import { AgeDemographicChartText, AgeDemographicDefaultValue } from './types';
-import { formatAgeGroupRange } from './utils';
 
 export const AGE_GROUP_TOOLTIP_WIDTH = 340;
 

packages/app/src/components/stacked-chart/stacked-chart.tsx

@@ -2,36 +2,36 @@
  * Code loosely based on
  * https://codesandbox.io/s/github/airbnb/visx/tree/master/packages/visx-demo/src/sandboxes/visx-barstack
  */
-import { colors, getValuesInTimeframe, TimeframeOption, TimestampedValue } from '@corona-dashboard/common';
-import css from '@styled-system/css';
 import { AxisBottom, AxisLeft, TickFormatter } from '@visx/axis';
+import { BarStack, Line } from '@visx/shape';
+import { colors, getValuesInTimeframe, TimeframeOption, TimestampedValue } from '@corona-dashboard/common';
 import { GridRows } from '@visx/grid';
 import { Group } from '@visx/group';
 import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
-import { BarStack, Line } from '@visx/shape';
 import { Text } from '@visx/text';
+import css from '@styled-system/css';
 /**
  * useTooltipInPortal will not work for IE11 at the moment. See this issue
  * https://github.com/airbnb/visx/issues/904
  */
-import { useTooltip } from '@visx/tooltip';
-import { isEmpty } from 'lodash';
-import { MouseEvent, TouchEvent, useCallback, useMemo } from 'react';
-import { isDefined } from 'ts-is-present';
+import { AccessibilityDefinition, useAccessibilityAnnotations } from '~/utils/use-accessibility-annotations';
 import { Box, Spacer } from '~/components/base';
+import { calculateSeriesMaximum, getSeriesData, getWeekInfo, SeriesValue } from './logic';
+import { DateSpanMarker, Overlay, Tooltip, TooltipData, TooltipFormatter } from '../time-series-chart/components';
+import { isDefined } from 'ts-is-present';
+import { isEmpty } from 'lodash';
 import { Legend } from '~/components/legend';
-import { ValueAnnotation } from '~/components/value-annotation';
-import { useIntl } from '~/intl';
+import { MouseEvent, TouchEvent, useCallback, useMemo } from 'react';
 import { space } from '~/style/theme';
-import { useCurrentDate } from '~/utils/current-date-context';
-import { AccessibilityDefinition, useAccessibilityAnnotations } from '~/utils/use-accessibility-annotations';
+import { TooltipSeriesList } from '../time-series-chart/components/tooltip/tooltip-series-list';
 import { useBreakpoints } from '~/utils/use-breakpoints';
+import { useCurrentDate } from '~/utils/current-date-context';
+import { useIntl } from '~/intl';
 import { useIsMountedRef } from '~/utils/use-is-mounted-ref';
 import { useResizeObserver } from '~/utils/use-resize-observer';
 import { useResponsiveContainer } from '~/utils/use-responsive-container';
-import { DateSpanMarker, Overlay, Tooltip, TooltipData, TooltipFormatter } from '../time-series-chart/components';
-import { TooltipSeriesList } from '../time-series-chart/components/tooltip/tooltip-series-list';
-import { calculateSeriesMaximum, getSeriesData, getWeekInfo, SeriesValue } from './logic';
+import { useTooltip } from '@visx/tooltip';
+import { ValueAnnotation } from '~/components/value-annotation';
 
 type AnyTickFormatter = (value: any) => string;
 

packages/app/src/components/time-series-chart/components/axes/components/axes.tsx

@@ -5,21 +5,21 @@
  * props. It might be easier to just create 2 or 3 different types of axes
  * layouts by forking this component.
  */
-import { colors, TimeframeOption, TimestampedValue, DateSpanValue } from '@corona-dashboard/common';
-import css from '@styled-system/css';
 import { AxisBottom, AxisLeft, TickFormatter } from '@visx/axis';
+import { Bounds } from '../../../logic';
+import { colors, TimeframeOption, TimestampedValue, DateSpanValue } from '@corona-dashboard/common';
+import { createDateFromUnixTimestamp } from '~/utils/create-date-from-unix-timestamp';
+import { fontSizes } from '~/style/theme';
 import { GridRows } from '@visx/grid';
-import { scaleLinear } from '@visx/scale';
-import { NumberValue, ScaleBand, ScaleLinear } from 'd3-scale';
-import { memo, Ref, useCallback, useMemo } from 'react';
 import { isPresent } from 'ts-is-present';
-import { useIntl } from '~/intl';
-import { fontSizes } from '~/style/theme';
-import { createDateFromUnixTimestamp } from '~/utils/create-date-from-unix-timestamp';
+import { memo, Ref, useCallback, useMemo } from 'react';
+import { NumberValue, ScaleBand, ScaleLinear } from 'd3-scale';
+import { scaleLinear } from '@visx/scale';
+import { TickInstance, createTimeTicks, createTimeTicksAllTimeFrame, createTimeTicksMonthlyTimeFrame } from '../logic/create-time-ticks';
 import { useBreakpoints } from '~/utils/use-breakpoints';
-import { Bounds } from '../../../logic';
+import { useIntl } from '~/intl';
 import { WeekNumbers } from '../../week-numbers';
-import { TickInstance, createTimeTicks, createTimeTicksAllTimeFrame, createTimeTicksMonthlyTimeFrame } from '../logic/create-time-ticks';
+import css from '@styled-system/css';
 
 export type AxesProps<T extends TimestampedValue> = {
   bounds: Bounds;
@@ -106,6 +106,9 @@ export const Axes = memo(function Axes<T extends TimestampedValue>({
      * The result is divided by 31557600 and rounded UP with .ceil
      * 31557600 is calculated based on 86400 (seconds in a day)
      * multiplied by 365.25 (number of days in a year and .25 to consider leap years)
+     *
+     * This logic is used to calculate the amount of January 1st dates the algorithm needs
+     * for displaying "all" timeframe.
      */
     const yearsDifferenceInDomain = Math.ceil((endUnix - startUnix) / 31557600);
 

packages/app/src/components/time-series-chart/components/axes/logic/create-time-ticks.ts

@@ -1,5 +1,5 @@
-import { subtractMonthToDate, extractYearFromDate, formatStyle, getFirstDayOfGivenYear, middleOfDayInSeconds, startOfDayInSeconds } from '@corona-dashboard/common';
 import { Breakpoints } from '~/utils/use-breakpoints';
+import { subtractMonthToDate, extractYearFromDate, formatStyle, getFirstDayOfGivenYear, middleOfDayInSeconds, startOfDayInSeconds } from '@corona-dashboard/common';
 
 export interface TickInstance {
   timestamp: number;
@@ -13,19 +13,19 @@ function getDefault2ValuesForXAxis(startTick: number, endTick: number): TickInst
   ] as TickInstance[];
 }
 
-export function createTimeTicksAllTimeFrame(startTick: number, endTick: number, count: number, breakpoints: Breakpoints): TickInstance[] {
+export function createTimeTicksAllTimeFrame(startTick: number, endTick: number, ticksNumber: number, breakpoints: Breakpoints): TickInstance[] {
   /**
    * This method is only used for the `all` timeframe option.
    */
   const start = middleOfDayInSeconds(startTick);
   const end = middleOfDayInSeconds(endTick);
   const startYear = extractYearFromDate(start);
 
-  if (count <= 2) {
+  if (ticksNumber <= 2) {
     return getDefault2ValuesForXAxis(start, end);
   }
 
-  const ticks: TickInstance[] = Array.from({ length: count }, (_, index) => {
+  const ticks: TickInstance[] = Array.from({ length: ticksNumber }, (_, index) => {
     const firstDayOfYearTimeStamp = getFirstDayOfGivenYear(startYear + index + 1); // 01.01.2021, 01.01.2022... etc.
     return { timestamp: startOfDayInSeconds(firstDayOfYearTimeStamp), formatStyle: 'axis-with-day-month-year-short' } as TickInstance;
   });

packages/app/src/components/time-series-chart/components/date-line-marker.tsx

@@ -1,9 +1,9 @@
 import { colors, isDateSpanValue, TimestampedValue } from '@corona-dashboard/common';
+import { HoveredPoint } from '../logic';
+import { space } from '~/style/theme';
+import { useIntl } from '~/intl';
 import css from '@styled-system/css';
 import styled from 'styled-components';
-import { useIntl } from '~/intl';
-import { space } from '~/style/theme';
-import { HoveredPoint } from '../logic';
 
 type LineProps = {
   color: string;

packages/app/src/utils/use-breakpoints.tsx

@@ -1,7 +1,7 @@
-import React, { createContext, ReactNode, useContext, useMemo } from 'react';
-import { useTheme } from 'styled-components';
 import { useIsMounted } from './use-is-mounted';
 import { useMediaQuery } from './use-media-query';
+import { useTheme } from 'styled-components';
+import React, { createContext, ReactNode, useContext, useMemo } from 'react';
 
 export type Breakpoints = {
   /**

packages/common/src/data-sorting.ts

@@ -1,5 +1,5 @@
-import { isDefined } from 'ts-is-present';
 import { ArchivedNlVariantsVariantValue, GmSewerPerInstallationValue, NlVariantsVariantValue } from './types';
+import { isDefined } from 'ts-is-present';
 
 export type UnknownObject = Record<string, unknown>;
 

packages/common/src/intl/create-formatting.ts

@@ -1,9 +1,10 @@
+import { assert } from '../utils';
+import { isDefined } from 'ts-is-present';
 import isSameDay from 'date-fns/isSameDay';
 import isToday from 'date-fns/isToday';
 import isYesterday from 'date-fns/isYesterday';
 import subDays from 'date-fns/subDays';
-import { isDefined } from 'ts-is-present';
-import { assert } from '../utils';
+
 // TypeScript is missing some types for `Intl.DateTimeFormat`.
 // https://github.com/microsoft/TypeScript/issues/35865
 export interface DateTimeFormatOptions extends Intl.DateTimeFormatOptions {