topic/COR-1952_COR-1953_graph-adjustments

packages/app/src/components/chart-tile-double-column.tsx

@@ -1,13 +1,13 @@
-import { ReactNode } from 'react';
-import css from '@styled-system/css';
 import { asResponsiveArray } from '~/style/utils';
 import { Box } from './base';
 import { ErrorBoundary } from './error-boundary';
 import { FullscreenChartTile } from './fullscreen-chart-tile';
 import { Heading } from './typography';
 import { Markdown } from './markdown';
-import { MetadataProps } from './metadata';
+import { MetadataProps } from './metadata/types';
+import { ReactNode } from 'react';
 import { space } from '~/style/theme';
+import css from '@styled-system/css';
 
 interface ChartTileDoubleColumnProps {
   title: string;

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

@@ -1,40 +1,40 @@
-import { TimeframeOption } from '@corona-dashboard/common';
-import { ReactNode, useEffect, useState } from 'react';
-import styled from 'styled-components';
-import theme, { space } from '~/style/theme';
 import { Box, Spacer } from './base';
 import { ChartTileToggle, ChartTileToggleProps } from './chart-tile-toggle';
 import { ChartTimeControls } from './chart-time-controls';
 import { ErrorBoundary } from './error-boundary';
 import { FullscreenChartTile } from './fullscreen-chart-tile';
-import { Markdown } from './markdown';
-import { MetadataProps } from './metadata';
 import { Heading } from './typography';
+import { Markdown } from './markdown';
+import { MetadataProps } from './metadata/types';
+import { ReactNode, useEffect, useState } from 'react';
+import { TimeframeOption } from '@corona-dashboard/common';
+import styled from 'styled-components';
+import theme, { space } from '~/style/theme';
 
 interface ChartTileProps {
   children: ReactNode;
-  title: string;
   description?: string;
   disableFullscreen?: boolean;
   id?: string;
   metadata?: MetadataProps;
+  onSelectTimeframe?: (timeframe: TimeframeOption) => void;
   timeframeInitialValue?: TimeframeOption;
   timeframeOptions?: TimeframeOption[];
+  title: string;
   toggle?: ChartTileToggleProps;
-  onSelectTimeframe?: (timeframe: TimeframeOption) => void;
 }
 
 export const ChartTile = ({
   children,
-  title,
   description,
   disableFullscreen,
   id,
   metadata,
+  onSelectTimeframe,
   timeframeInitialValue,
-  toggle,
   timeframeOptions,
-  onSelectTimeframe,
+  title,
+  toggle,
 }: ChartTileProps) => {
   const [timeframe, setTimeframe] = useState<TimeframeOption>(timeframeInitialValue || TimeframeOption.ALL);
 

packages/app/src/components/choropleth-tile.tsx

@@ -1,14 +1,15 @@
-import { ChoroplethThresholdsValue } from '@corona-dashboard/common';
-import { space } from '~/style/theme';
-import { ChoroplethLegenda } from '~/components/choropleth-legenda';
-import { useBreakpoints } from '~/utils/use-breakpoints';
 import { Box } from './base';
+import { CalendarGear } from '@corona-dashboard/icons';
 import { ChartRegionControls, RegionControlOption } from './chart-region-controls';
+import { ChoroplethLegenda } from '~/components/choropleth-legenda';
+import { ChoroplethThresholdsValue } from '@corona-dashboard/common';
 import { ErrorBoundary } from './error-boundary';
 import { FullscreenChartTile } from './fullscreen-chart-tile';
-import { MetadataProps } from './metadata';
 import { Heading, Text } from './typography';
-import { CalendarGear } from '@corona-dashboard/icons';
+import { MetadataProps } from './metadata/types';
+import { space } from '~/style/theme';
+import { useBreakpoints } from '~/utils/use-breakpoints';
+
 type ChoroplethTileProps = {
   title: string;
   description?: string | React.ReactNode;

packages/app/src/components/fullscreen-chart-tile.tsx

@@ -1,18 +1,19 @@
-import { colors } from '@corona-dashboard/common';
+import { Box } from './base/box';
 import { Close, Expand } from '@corona-dashboard/icons';
-import { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { Tile } from '~/components/tile';
-import { useIntl } from '~/intl';
-import { space } from '~/style/theme';
+import { colors } from '@corona-dashboard/common';
+import { IconButton } from './icon-button';
+import { Metadata } from '~/components/metadata';
+import { MetadataProps } from './metadata/types';
+import { Modal } from './modal';
 import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
+import { space } from '~/style/theme';
+import { Spacer } from './base';
+import { Tile } from '~/components/tile';
 import { useBreakpoints } from '~/utils/use-breakpoints';
+import { useEffect, useRef, useState } from 'react';
+import { useIntl } from '~/intl';
 import { usePrevious } from '~/utils/use-previous';
-import { Spacer } from './base';
-import { Box } from './base/box';
-import { IconButton } from './icon-button';
-import { Metadata, MetadataProps } from './metadata';
-import { Modal } from './modal';
+import styled from 'styled-components';
 
 interface FullscreenChartTileProps {
   children: React.ReactNode;

packages/app/src/components/index.ts

@@ -3,12 +3,12 @@ export * from './collapsible/collapsible-content';
 export * from './collapsible/collapsible-section';
 export type { AgeDemographicProps } from './age-demographic';
 export type { PieChartProps } from './pie-chart';
-export type { MetadataProps } from './metadata';
+export type { MetadataProps } from './metadata/types';
 
 export { AgeDemographic } from './age-demographic';
 export { ChartTile } from './chart-tile';
 export { InView } from './in-view';
-export { Metadata } from './metadata';
+export { Metadata } from './metadata/metadata';
 export { PageInformationBlock } from './page-information-block';
 export { TileList } from './tile-list';
 export { Tile } from './tile';

packages/app/src/components/kpi-tile.tsx

@@ -1,9 +1,11 @@
-import { Markdown } from '~/components/markdown';
-import { Tile } from '~/components/tile';
-import { fontSizes } from '~/style/theme';
 import { Box } from './base';
-import { Metadata, MetadataProps } from './metadata';
+import { fontSizes } from '~/style/theme';
 import { Heading } from './typography';
+import { Markdown } from '~/components/markdown';
+import { Metadata } from '~/components/metadata';
+import { MetadataProps } from './metadata/types';
+import { Tile } from '~/components/tile';
+
 interface KpiTileProps {
   title?: string;
   description?: string;

packages/app/src/components/kpi/bordered-kpi-section.tsx

@@ -3,17 +3,30 @@ import styled from 'styled-components';
 import { Box } from '~/components/base';
 import { mediaQueries, space } from '~/style/theme';
 import { KpiTile } from '../kpi-tile';
-import { MetadataProps } from '../metadata';
 import { TwoKpiSection } from '../two-kpi-section';
 import { KpiContent } from './components/kpi-content';
 import { BorderedKpiSectionProps } from './types';
 import { Markdown } from '../markdown';
+import { MetadataProps } from '../metadata/types';
 
-export const BorderedKpiSection = ({ title, description, source, dateOrRange, tilesData, disclaimer }: BorderedKpiSectionProps) => {
+export const BorderedKpiSection = ({
+  title,
+  description,
+  source,
+  timeframePeriod,
+  dateOfInsertion,
+  isTimeframePeriodKpi,
+  tilesData,
+  disclaimer,
+  isArchived,
+}: BorderedKpiSectionProps) => {
   const metadata: MetadataProps = {
-    date: dateOrRange,
+    timeframePeriod: timeframePeriod,
     source: source,
     disclaimer: disclaimer,
+    isTimeframePeriodKpi: isTimeframePeriodKpi,
+    dateOfInsertion: dateOfInsertion,
+    isArchived: isArchived,
   };
 
   return (

packages/app/src/components/kpi/components/kpi-content.tsx

@@ -1,22 +1,24 @@
+import { Bar } from '~/domain/vaccine/components/bar';
+import { BoldText } from '~/components/typography';
 import { Box } from '~/components/base';
 import { KpiValue } from '~/components/kpi-value';
 import { Markdown } from '~/components/markdown';
-import { BoldText } from '~/components/typography';
-import { Bar } from '~/domain/vaccine/components/bar';
+import { Metadata, MetadataProps } from '~/components';
 import { parseBirthyearRange } from '~/domain/vaccine/logic/parse-birthyear-range';
-import { useIntl } from '~/intl';
-import { space } from '~/style/theme';
 import { replaceVariablesInText } from '~/utils';
+import { space } from '~/style/theme';
 import { TileData as KpiContentProps } from '../types';
-import { Metadata, MetadataProps } from '~/components';
+import { useIntl } from '~/intl';
 
-export const KpiContent = ({ title, description, value, bar, birthyear, differenceValue, isPercentage = false, dateOrRange, source }: KpiContentProps) => {
+export const KpiContent = ({ title, description, value, bar, birthyear, differenceValue, isPercentage = false, dateOfInsertion, dateOrRange, source }: KpiContentProps) => {
   const { commonTexts } = useIntl();
   const parsedBirthyearRange = birthyear ? parseBirthyearRange(birthyear) : null;
 
   const metadata: MetadataProps = {
-    date: dateOrRange,
+    timeframePeriod: dateOrRange,
     source: source,
+    isTimeframePeriodKpi: true,
+    dateOfInsertion: dateOfInsertion,
   };
 
   return (

packages/app/src/components/kpi/types.ts

@@ -2,6 +2,7 @@ import { DifferenceInteger } from '@corona-dashboard/common';
 
 export type TileData = {
   dateOrRange?: number | DateRange;
+  dateOfInsertion?: number;
   source?: {
     href: string;
     text: string;
@@ -21,7 +22,10 @@ interface DateRange {
 }
 
 export interface BorderedKpiSectionProps {
-  dateOrRange?: number | DateRange;
+  timeframePeriod?: number | DateRange;
+  isTimeframePeriodKpi?: boolean;
+  dateOfInsertion?: number;
+  isArchived?: boolean;
   description: string;
   source?: {
     href: string;

packages/app/src/components/lokalize-metadata.tsx

@@ -1,7 +1,7 @@
-import { useIntl } from '~/intl';
 import { Box } from '~/components/base';
-import { Text } from '~/components/typography';
 import { space } from '~/style/theme';
+import { Text } from '~/components/typography';
+import { useIntl } from '~/intl';
 
 export interface MetadataProps {
   date: string;

packages/app/src/components/metadata/components/items/metadata-icon.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import css from '@styled-system/css';
+
+export const MetadataIcon = styled.span(() =>
+  css({
+    minWidth: '1.8rem',
+
+    svg: {
+      height: '15px',
+      width: 'auto',
+    },
+  })
+);