Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

topic/COR-1952_COR-1953_graph-adjustments #5013

Merged
Prev Previous commit
Next Next commit
feature/COR-1951_dropdown-options-selection-changes (#5010)
* feature/COR-1938-update-format-intial-tick-date (#5003)

* refactor(COR-1938): Make comments JSDoc compliant

* refactor: reorder

* refactor: reorder

* feat(COR-1938): Set dateformat of first tick to include date

* feature(COR-1951): Corrected time frame option values

---------

Co-authored-by: Ben van Eekelen (work) <ben.vaneekelen@netcompany.com>
VWSCoronaDashboard30 and ben-van-eekelen authored Mar 22, 2024
commit 3212efb3169048f5ff95f14102e6c53ef009112d
2 changes: 1 addition & 1 deletion packages/app/src/components/mini-trend-chart.tsx
Original file line number Diff line number Diff line change
@@ -18,7 +18,7 @@ export function MiniTrendChart<T extends TimestampedValue = TimestampedValue>({
accessibility,
seriesConfig,
dataOptions,
timeframe = TimeframeOption.FIVE_WEEKS,
timeframe = TimeframeOption.ALL,
values,
displayTooltipValueOnly,
}: MiniTrendChartProps<T>) {
Original file line number Diff line number Diff line change
@@ -15,39 +15,54 @@ export interface TickInstance {
formatStyle: formatStyle;
}

function getDefault2ValuesForXAxis(startTick: number, endTick: number): TickInstance[] {
return [
{ timestamp: startTick, formatStyle: 'axis-with-day-month-year-short' },
{ timestamp: endTick, formatStyle: 'axis-with-day-month-year-short' },
] as TickInstance[];
}

function populateTicksArray(stepCount: number, step: number, startTick: number, formatStyle: formatStyle): TickInstance[] {
const ticks: TickInstance[] = [];
for (let i = 0; i < stepCount; i++) {
const tick = startTick + i * step;
ticks.push({ timestamp: middleOfDayInSeconds(tick), formatStyle: i == 0 ? 'axis-with-day-month-year-short' : formatStyle });
}
return ticks;
}

/**
* For the All timeframe we are interested in the amount of January 1st dates inbetween
* startUnix and endUnix (e.g 07.09.2020 - 31.01.2024 will results in 4 ticks).
*
* The way it works is that we first check if the startDate is equal to January 1st.
* If so, the count will get +1 at the end since the start year is not included when
* making the difference between the endYear and startYear
*
* This function is used in the Axes component where the bottomAxesTickNumber value
* is being generated.
* @param startUnix fist date on the x-axis
* @param endUnix last date on the x-axis
*/
export function getPrefferedTimeTicksAllTimeFrame(startUnix: number, endUnix: number): number {
/**
* For the All timeframe we are interested in the amount of January 1st dates inbetween
* startUnix and endUnix (e.g 07.09.2020 - 31.01.2024 will results in 4 ticks).
*
* The way it works is that we first check if the startDate is equal to January 1st.
* If so, the count will get +1 at the end since the start year is not included when
* making the difference between the endYear and startYear
*
* This function is used in the Axes component where the bottomAxesTickNumber value
* is being generated.
*/
const firstYearFirstOfJanuary = extractMonthFromDate(startUnix) == 0 && extractDayFromDate(startUnix) == 1;

const count = extractYearFromDate(endUnix) - extractYearFromDate(startUnix);

return firstYearFirstOfJanuary ? count + 1 : count;
}

function getDefault2ValuesForXAxis(startTick: number, endTick: number): TickInstance[] {
return [
{ timestamp: startTick, formatStyle: 'axis-with-day-month-year-short' },
{ timestamp: endTick, formatStyle: 'axis-with-day-month-year-short' },
] as TickInstance[];
}

/**
* This method is only used for the `all` timeframe option.
* The function is not and won't be adjusted to cover all the edge cases available:
* e.g. having a very short period between the start and end date which results
* in only 1 or 2 january dates in between them.
* @param startTick first tick date on the x-axis
* @param endTick last tick date on the x-axis
* @param ticksNumber total number of ticks
* @param breakpoints current screen size
*/
export function createTimeTicksAllTimeFrame(startTick: number, endTick: number, ticksNumber: number, breakpoints: Breakpoints): TickInstance[] {
/**
* This method is only used for the `all` timeframe option.
* The function is not and won't be adjusted to cover all the edge cases available:
* e.g. having a very short period between the start and end date which results
* in only 1 or 2 january dates in between them.
*/
const start = middleOfDayInSeconds(startTick);
const end = middleOfDayInSeconds(endTick);
const startYear = extractYearFromDate(start);
@@ -63,20 +78,24 @@ export function createTimeTicksAllTimeFrame(startTick: number, endTick: number,

// This if statement ensures that first & second label of the all-values timeframe don't overlap
if (breakpoints.lg && Math.floor((ticks[0].timestamp - startTick) / 86400) > 180) {
ticks.unshift({ timestamp: start, formatStyle: 'axis-with-month-year-short' } as TickInstance);
ticks.unshift({ timestamp: start, formatStyle: 'axis-with-day-month-year-short' } as TickInstance);
}

return ticks;
}

/**
* This method will calculate the timestamps for the 3 months interval. It must consist of exactly 4 values.
* First value: 01 (XX - 3) 'YY
* Second value: 01 (XX - 2) 'YY
* Third value: 01 (XX - 1) 'YY
* Fourth value: 01 XX 'YY - Where XX is the current month
* @param startTick first tick date on the x-axis
* @param endTick last tick date on the x-axis
* @param count total number of ticks
* @param breakpoints current screen size
*/
export function createTimeTicksMonthlyTimeFrame(startTick: number, endTick: number, count: number, breakpoints: Breakpoints): TickInstance[] {
/**
* This method will calculate the timestamps for the 3 months interval. It must consist of exactly 4 values.
* First value: 01 (XX - 3) 'YY
* Second value: 01 (XX - 2) 'YY
* Third value: 01 (XX - 1) 'YY
* Fourth value: 01 XX 'YY - Where XX is the current month
*/
const start = middleOfDayInSeconds(startTick);
const end = middleOfDayInSeconds(endTick);

@@ -100,13 +119,18 @@ export function createTimeTicksMonthlyTimeFrame(startTick: number, endTick: numb
return ticks;
}

/**
* This method will create the ticks for the entire interval except the last value
* The way it's setup is that the last value is pushed after `populateTicksArray()`
* is executed. The user is able to define what format style for labels he wants between
* value[1] and second to last value. The last value will always have the same format.
* @param startTick first tick date on the x-axis
* @param endTick last tick date on the x-axis
* @param count total number of ticks
* @param valuesCount total number of data points on x-axis
* @param formatStyle what date format is followed
*/
export function createTimeTicks(startTick: number, endTick: number, count: number, valuesCount: number | undefined, formatStyle: formatStyle): TickInstance[] {
/**
* This method will create the ticks for the entire interval except the last value
* The way it's setup is that the last value is pushed after `populateTicksArray()`
* is executed. The user is able to define what format style for labels he wants between
* value[1] and second to last value. The last value will always have the same format.
*/
const start = middleOfDayInSeconds(startTick);
const end = middleOfDayInSeconds(endTick);

@@ -123,12 +147,3 @@ export function createTimeTicks(startTick: number, endTick: number, count: numbe

return ticks;
}

function populateTicksArray(stepCount: number, step: number, startTick: number, formatStyle: formatStyle): TickInstance[] {
const ticks: TickInstance[] = [];
for (let i = 0; i < stepCount; i++) {
const tick = startTick + i * step;
ticks.push({ timestamp: middleOfDayInSeconds(tick), formatStyle: i == 0 ? 'axis-with-day-month-year-short' : formatStyle });
}
return ticks;
}
Original file line number Diff line number Diff line change
@@ -52,7 +52,7 @@ export const VariantsStackedBarChartTile = ({
const today = useCurrentDate();
const { commonTexts } = useIntl();
const { list, toggle, clear } = useList<keyof VariantChartValue>(alwaysEnabled);
const [variantTimeFrame, setVariantTimeFrame] = useState<TimeframeOption>(TimeframeOption.THIRTY_DAYS);
const [variantTimeFrame, setVariantTimeFrame] = useState<TimeframeOption>(TimeframeOption.ALL);
const barSeriesConfig = useBarConfig(values, variantLabels, tooltipLabels, variantColors, variantOrders, variantTimeFrame, today);

const text = commonTexts.variants_page;
@@ -69,7 +69,7 @@ export const VariantsStackedBarChartTile = ({
description={description}
metadata={metadata}
timeframeOptions={TimeframeOptionsList}
timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
timeframeInitialValue={TimeframeOption.ALL}
onSelectTimeframe={setVariantTimeFrame}
>
<InteractiveLegend helpText={text.legend_help_text} selectOptions={interactiveLegendOptions.reverse()} selection={list} onToggleItem={toggle} onReset={clear} />
8 changes: 4 additions & 4 deletions packages/app/src/pages/landelijk/patienten-in-beeld.tsx
Original file line number Diff line number Diff line change
@@ -198,7 +198,7 @@ const PatientsPage = (props: StaticProps<typeof getStaticProps>) => {
title={textNl.hospitals.admissions_per_age_group_chart.title}
description={textNl.hospitals.admissions_per_age_group_chart.description}
timeframeOptions={TimeframeOptionsList}
timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
timeframeInitialValue={TimeframeOption.ALL}
metadata={{
source: textNl.sources.nice,
dateOfInsertion: lastInsertionDateHospitalAdmissionsPerAgeGroupOverTime,
@@ -228,7 +228,7 @@ const PatientsPage = (props: StaticProps<typeof getStaticProps>) => {
title={textNl.icu.admissions_per_age_group_chart.title}
description={textNl.icu.admissions_per_age_group_chart.description}
timeframeOptions={TimeframeOptionsList}
timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
timeframeInitialValue={TimeframeOption.ALL}
metadata={{
source: textNl.sources.nice,
dateOfInsertion: lastInsertionDateIntensiveCareAdmissionsPerAgeGroupOverTime,
@@ -265,7 +265,7 @@ const PatientsPage = (props: StaticProps<typeof getStaticProps>) => {
timeframePeriod: hospitalAdmissionsOverTimeTimeframePeriod,
}}
timeframeOptions={TimeframeOptionsList}
timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
timeframeInitialValue={TimeframeOption.ALL}
onSelectTimeframe={setHospitalAdmissionsOverTimeTimeframe}
toggle={{
initialValue: selectedAdmissionsOverTimeChart,
@@ -320,7 +320,7 @@ const PatientsPage = (props: StaticProps<typeof getStaticProps>) => {
timeframePeriod: intensiveCareAdmissionsOverTimeTimeframePeriod,
}}
timeframeOptions={TimeframeOptionsList}
timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
timeframeInitialValue={TimeframeOption.ALL}
onSelectTimeframe={setIntensiveCareAdmissionsOverTimeTimeframe}
toggle={{
initialValue: selectedAdmissionsOverTimeChart,
8 changes: 4 additions & 4 deletions packages/app/src/pages/landelijk/ziekenhuizen-in-beeld.tsx
Original file line number Diff line number Diff line change
@@ -78,8 +78,8 @@ const HospitalsAndCarePage = (props: StaticProps<typeof getStaticProps>) => {
const reverseRouter = useReverseRouter();

const [selectedBedsOccupiedOverTimeChart, setSelectedBedsOccupiedOverTimeChart] = useState<string>('beds_occupied_covid_hospital');
const [hospitalBedsOccupiedOverTimeTimeframe, setHospitalBedsOccupiedOverTimeTimeframe] = useState<TimeframeOption>(TimeframeOption.THIRTY_DAYS);
const [intensiveCareBedsTimeframe, setIntensiveCareBedsTimeframe] = useState<TimeframeOption>(TimeframeOption.THIRTY_DAYS);
const [hospitalBedsOccupiedOverTimeTimeframe, setHospitalBedsOccupiedOverTimeTimeframe] = useState<TimeframeOption>(TimeframeOption.ALL);
const [intensiveCareBedsTimeframe, setIntensiveCareBedsTimeframe] = useState<TimeframeOption>(TimeframeOption.ALL);

const [hospitalBedsOccupiedOverTimeTimeframePeriod, setHospitalBedOccupiedOverTimeTimeframePeriod] = useState<DateRange | undefined>({ start: 0, end: 0 });
const [intensiveCareBedsTimeframePeriod, setIntensiveCareBedsTimeframePeriod] = useState<DateRange | undefined>({ start: 0, end: 0 });
@@ -98,8 +98,8 @@ const HospitalsAndCarePage = (props: StaticProps<typeof getStaticProps>) => {
];

const [selectedPatientInfluxOverTimeChart, setSelectedPatientInfluxOverTimeChart] = useState<string>('patients_influx_hospital');
const [hospitalPatientInfluxOverTimeTimeframe, setHospitalPatientInfluxOverTimeTimeframe] = useState<TimeframeOption>(TimeframeOption.THIRTY_DAYS);
const [intensiveCarePatientInfluxOverTimeTimeframe, setIntensiveCarePatientInfluxOverTimeTimeframe] = useState<TimeframeOption>(TimeframeOption.THIRTY_DAYS);
const [hospitalPatientInfluxOverTimeTimeframe, setHospitalPatientInfluxOverTimeTimeframe] = useState<TimeframeOption>(TimeframeOption.ALL);
const [intensiveCarePatientInfluxOverTimeTimeframe, setIntensiveCarePatientInfluxOverTimeTimeframe] = useState<TimeframeOption>(TimeframeOption.ALL);

const [hospitalPatientInfluxOverTimeTimeframePeriod, setHospitalPatientInfluxOverTimeTimeframePeriod] = useState<DateRange | undefined>({ start: 0, end: 0 });
const [intensiveCarePatientInfluxOverTimeTimeframePeriod, setIntensiveCarePatientInfluxOverTimeTimeframePeriod] = useState<DateRange | undefined>({ start: 0, end: 0 });
21 changes: 10 additions & 11 deletions packages/cms/src/studio/data/data-structure.ts
Original file line number Diff line number Diff line change
@@ -38,9 +38,17 @@ export const dataStructure = {
booster_coverage_archived_20220904: ['age_group', 'percentage', 'percentage_label'],
sewer_archived_20230623: ['average', 'total_number_of_samples', 'sampled_installation_count', 'total_installation_count', 'data_is_outdated'],
tested_overall_archived_20230331: ['infected', 'infected_moving_average', 'infected_moving_average_rounded', 'infected_per_100k', 'infected_per_100k_moving_average'],
hospital_nice_archived_20240228: [
'admissions_on_date_of_admission',
'admissions_on_date_of_admission_moving_average',
'admissions_on_date_of_admission_moving_average_rounded',
'admissions_in_the_last_7_days',
'admissions_on_date_of_reporting',
],
},
archived_gm_collection: {
hospital_nice_choropleth_archived_20230830: ['admissions_on_date_of_admission', 'admissions_on_date_of_admission_per_100000', 'admissions_on_date_of_reporting'],
hospital_nice_choropleth_archived_20240228: ['admissions_in_the_last_7_days_per_100000'],
sewer_archived_20230623: ['average', 'total_installation_count', 'data_is_outdated'],
tested_overall_archived_20230331: ['infected_per_100k', 'infected'],
vaccine_coverage_per_age_group_choropleth_archived_20231004: [
@@ -272,17 +280,8 @@ export const dataStructure = {
disability_care_archived_20230126: ['newly_infected_people', 'newly_infected_locations', 'infected_locations_total', 'infected_locations_percentage', 'deceased_daily'],
elderly_at_home_archived_20230126: ['positive_tested_daily', 'positive_tested_daily_per_100k', 'deceased_daily'],
},
gm: {
hospital_nice: [
'admissions_on_date_of_admission',
'admissions_on_date_of_admission_moving_average',
'admissions_on_date_of_admission_moving_average_rounded',
'admissions_in_the_last_7_days',
'admissions_on_date_of_reporting',
],
sewer: ['average', 'data_is_outdated'],
},
gm_collection: { hospital_nice_choropleth: ['admissions_in_the_last_7_days_per_100000'], sewer: ['average', 'data_is_outdated'] },
gm: { sewer: ['average', 'data_is_outdated'] },
gm_collection: { sewer: ['average', 'data_is_outdated'] },
nl: {
intensive_care_nice: [
'admissions_on_date_of_admission',
2 changes: 1 addition & 1 deletion packages/common/src/utils/timeframe/index.ts
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@ export enum TimeframeOption {
ALL = 'all',
}

export const TimeframeOptionsList = [TimeframeOption.ALL, TimeframeOption.THIRTY_DAYS, TimeframeOption.THREE_MONTHS, TimeframeOption.SIX_MONTHS, TimeframeOption.LAST_YEAR];
export const TimeframeOptionsList = [TimeframeOption.ALL, TimeframeOption.LAST_YEAR, TimeframeOption.SIX_MONTHS, TimeframeOption.THREE_MONTHS, TimeframeOption.THIRTY_DAYS];

export function getDaysForTimeframe(timeframe: TimeframeOption): number {
switch (timeframe) {