From f338c64d57a6873af1e749a49a218812d49b4957 Mon Sep 17 00:00:00 2001 From: M <120020483+VWSCoronaDashboard30@users.noreply.github.com> Date: Tue, 6 Feb 2024 16:10:58 +0100 Subject: [PATCH] feat(COR-1915): PR comment resolution --- .../age-demographic/age-demographic-chart.tsx | 22 +++++++-------- .../stacked-chart/stacked-chart.tsx | 28 +++++++++---------- .../components/axes/components/axes.tsx | 23 ++++++++------- .../axes/logic/create-time-ticks.ts | 8 +++--- .../components/date-line-marker.tsx | 6 ++-- packages/app/src/utils/use-breakpoints.tsx | 4 +-- packages/common/src/data-sorting.ts | 2 +- packages/common/src/intl/create-formatting.ts | 5 ++-- 8 files changed, 51 insertions(+), 47 deletions(-) diff --git a/packages/app/src/components/age-demographic/age-demographic-chart.tsx b/packages/app/src/components/age-demographic/age-demographic-chart.tsx index 37b65e5958..8fc866b04e 100644 --- a/packages/app/src/components/age-demographic/age-demographic-chart.tsx +++ b/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; diff --git a/packages/app/src/components/stacked-chart/stacked-chart.tsx b/packages/app/src/components/stacked-chart/stacked-chart.tsx index 277a121130..f11b4be12d 100644 --- a/packages/app/src/components/stacked-chart/stacked-chart.tsx +++ b/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; diff --git a/packages/app/src/components/time-series-chart/components/axes/components/axes.tsx b/packages/app/src/components/time-series-chart/components/axes/components/axes.tsx index 182ab38a29..cb23a427bd 100644 --- a/packages/app/src/components/time-series-chart/components/axes/components/axes.tsx +++ b/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 = { bounds: Bounds; @@ -106,6 +106,9 @@ export const Axes = memo(function Axes({ * 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); diff --git a/packages/app/src/components/time-series-chart/components/axes/logic/create-time-ticks.ts b/packages/app/src/components/time-series-chart/components/axes/logic/create-time-ticks.ts index ec11e9111b..d9f5d2221c 100644 --- a/packages/app/src/components/time-series-chart/components/axes/logic/create-time-ticks.ts +++ b/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,7 +13,7 @@ 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. */ @@ -21,11 +21,11 @@ export function createTimeTicksAllTimeFrame(startTick: number, endTick: number, 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; }); diff --git a/packages/app/src/components/time-series-chart/components/date-line-marker.tsx b/packages/app/src/components/time-series-chart/components/date-line-marker.tsx index c70cf7c84c..f6810581ff 100644 --- a/packages/app/src/components/time-series-chart/components/date-line-marker.tsx +++ b/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; diff --git a/packages/app/src/utils/use-breakpoints.tsx b/packages/app/src/utils/use-breakpoints.tsx index 7b26a49dc0..a92e8d3973 100644 --- a/packages/app/src/utils/use-breakpoints.tsx +++ b/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 = { /** diff --git a/packages/common/src/data-sorting.ts b/packages/common/src/data-sorting.ts index af1f5d4b2e..49adc4fad8 100644 --- a/packages/common/src/data-sorting.ts +++ b/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; diff --git a/packages/common/src/intl/create-formatting.ts b/packages/common/src/intl/create-formatting.ts index b31b3c605b..949de68eef 100644 --- a/packages/common/src/intl/create-formatting.ts +++ b/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 {