feature/COR-1951_dropdown-options-selection-changes

packages/app/src/components/mini-trend-chart.tsx

@@ -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>) {

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

@@ -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;
-}

packages/app/src/domain/variants/variants-stacked-bar-chart-tile.tsx

@@ -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} />

packages/app/src/pages/landelijk/patienten-in-beeld.tsx

@@ -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,

packages/app/src/pages/landelijk/ziekenhuizen-in-beeld.tsx

@@ -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 });

packages/cms/src/studio/data/data-structure.ts

@@ -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',

packages/common/src/utils/timeframe/index.ts

@@ -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) {