fix(vizBuilder): RN-1054: picks wrong date

packages/admin-panel/src/VizBuilderApp/components/PreviewOptions.jsx

@@ -1,7 +1,8 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
+
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
@@ -16,10 +17,9 @@ import {
   FlexStart,
   ImportModal,
 } from '@tupaia/ui-components';
-import { useLocations, useProjects } from '../api/queries';
+import { useLocations, useProjects, useUploadTestData } from '../api';
 import { usePreviewData, useVizConfig } from '../context';
 import { LinkButton } from './LinkButton';
-import { useUploadTestData } from '../api';
 
 const Container = styled(FlexSpaceBetween)`
   padding: 24px 0;
@@ -140,6 +140,13 @@ const UploadDataModal = ({ isOpen, onSubmit, onClose }) => (
   />
 );
 
+/**
+ * @returns ISO date string in the format "yyyy-mm-dd", or `null` if the input is not a valid `Date`
+ * instance.
+ * @param date A `Date` object.
+ */
+const getIsoDateString = date => (isNaN(date.getTime()) ? null : date.toISOString().slice(0, 10));
+
 export const PreviewOptions = () => {
   const { setShowData } = usePreviewData();
   const [locationSearch, setLocationSearch] = useState('');
@@ -174,13 +181,13 @@ export const PreviewOptions = () => {
   };
 
   const handleChangeStartDate = date => {
-    const newDate = date ? date.toISOString() : null;
+    const newDate = date ? getIsoDateString(date) : null;
     setSelectedStartDate(newDate);
     setStartDate(newDate);
   };
 
   const handleChangeEndDate = date => {
-    const newDate = date ? date.toISOString() : null;
+    const newDate = date ? getIsoDateString(date) : null;
     setSelectedEndDate(newDate);
     setEndDate(newDate);
   };

packages/data-table-server/src/__tests__/dataTableService/services/AnalyticsDataTableService.test.ts

@@ -93,7 +93,7 @@ describe('AnalyticsDataTableService', () => {
           dataElementCodes: ['PSSS_AFR_Cases'],
           startDate: 'cat',
         },
-        'startDate must be a `date` type',
+        'startDate must be a valid ISO 8601 date: YYYY-MM-DD',
       ],
       [
         'endDate wrong format',
@@ -103,7 +103,7 @@ describe('AnalyticsDataTableService', () => {
           dataElementCodes: ['PSSS_AFR_Cases'],
           endDate: 'dog',
         },
-        'endDate must be a `date` type',
+        'endDate must be a valid ISO 8601 date: YYYY-MM-DD',
       ],
       [
         'aggregations wrong format',
@@ -142,8 +142,8 @@ describe('AnalyticsDataTableService', () => {
         },
         name: 'dataElementCodes',
       },
-      { config: { defaultValue: new Date('2018-12-01'), type: 'date' }, name: 'startDate' },
-      { config: { defaultValue: new Date('2023-12-31'), type: 'date' }, name: 'endDate' },
+      { config: { defaultValue: '2018-12-01', type: 'string' }, name: 'startDate' },
+      { config: { defaultValue: '2023-12-31', type: 'string' }, name: 'endDate' },
     ]);
   });
 

packages/data-table-server/src/__tests__/dataTableService/services/EventsDataTableService.test.ts

@@ -159,7 +159,7 @@ describe('EventsDataTableService', () => {
           dataGroupCode: 'PSSS_WNR',
           startDate: 'cat',
         },
-        'startDate must be a `date` type',
+        'startDate must be a valid ISO 8601 date: YYYY-MM-DD',
       ],
       [
         'endDate wrong format',
@@ -169,7 +169,7 @@ describe('EventsDataTableService', () => {
           dataGroupCode: 'PSSS_WNR',
           endDate: 'dog',
         },
-        'endDate must be a `date` type',
+        'endDate must be a valid ISO 8601 date: YYYY-MM-DD',
       ],
       [
         'aggregations wrong format',
@@ -208,8 +208,8 @@ describe('EventsDataTableService', () => {
         config: { innerType: { required: true, type: 'string' }, type: 'dataElementCodes' },
         name: 'dataElementCodes',
       },
-      { config: { defaultValue: new Date('2018-12-01'), type: 'date' }, name: 'startDate' },
-      { config: { defaultValue: new Date('2023-12-31'), type: 'date' }, name: 'endDate' },
+      { config: { defaultValue: '2018-12-01', type: 'string' }, name: 'startDate' },
+      { config: { defaultValue: '2023-12-31', type: 'string' }, name: 'endDate' },
     ]);
   });
 

packages/data-table-server/src/dataTableService/services/AnalyticsDataTableService.ts

@@ -8,16 +8,31 @@ import { TupaiaApiClient } from '@tupaia/api-client';
 import { Aggregator } from '@tupaia/aggregator';
 import { DataBroker } from '@tupaia/data-broker';
 import { yup } from '@tupaia/utils';
+import { ISO_DATE_PATTERN } from '@tupaia/tsutils';
 import { DataTableService } from '../DataTableService';
 import { orderParametersByName } from '../utils';
-import { getDefaultEndDate, getDefaultStartDate, mapProjectEntitiesToCountries } from './utils';
+import {
+  getDefaultEndDateString,
+  getDefaultStartDateString,
+  mapProjectEntitiesToCountries,
+} from './utils';
 
 const requiredParamsSchema = yup.object().shape({
   hierarchy: yup.string().default('explore'),
   dataElementCodes: yup.array().of(yup.string().required()).required(),
   organisationUnitCodes: yup.array().of(yup.string().required()).required(),
-  startDate: yup.date().default(getDefaultStartDate),
-  endDate: yup.date().default(getDefaultEndDate),
+  startDate: yup
+    .string()
+    .matches(ISO_DATE_PATTERN, {
+      message: 'startDate must be a valid ISO 8601 date: YYYY-MM-DD',
+    })
+    .default(getDefaultStartDateString),
+  endDate: yup
+    .string()
+    .matches(ISO_DATE_PATTERN, {
+      message: 'endDate must be a valid ISO 8601 date: YYYY-MM-DD',
+    })
+    .default(getDefaultEndDateString),
   aggregations: yup.array().of(
     yup.object().shape({
       type: yup.string().required(),
@@ -50,21 +65,12 @@ export class AnalyticsDataTableService extends DataTableService<
     hierarchy: string;
     dataElementCodes: string[];
     organisationUnitCodes: string[];
-    startDate: Date;
-    endDate: Date;
+    startDate: string;
+    endDate: string;
     aggregations?: { type: string; config?: Record<string, unknown> }[];
   }) {
-    const {
-      hierarchy,
-      dataElementCodes,
-      organisationUnitCodes,
-      startDate,
-      endDate,
-      aggregations,
-    } = params;
-
-    const startDateString = startDate.toISOString();
-    const endDateString = endDate.toISOString();
+    const { hierarchy, dataElementCodes, organisationUnitCodes, startDate, endDate, aggregations } =
+      params;
 
     // Ensure that if fetching for project, we map it to the underlying countries
     const entityCodesForFetch = await mapProjectEntitiesToCountries(
@@ -85,8 +91,8 @@ export class AnalyticsDataTableService extends DataTableService<
       {
         organisationUnitCodes: entityCodesForFetch,
         hierarchy,
-        startDate: startDateString,
-        endDate: endDateString,
+        startDate,
+        endDate,
         detectDataServices: true,
       },
       { aggregations },

packages/data-table-server/src/dataTableService/services/EventsDataTableService.ts

@@ -8,17 +8,32 @@ import { Aggregator } from '@tupaia/aggregator';
 import { TupaiaApiClient } from '@tupaia/api-client';
 import { DataBroker } from '@tupaia/data-broker';
 import { yup } from '@tupaia/utils';
+import { ISO_DATE_PATTERN } from '@tupaia/tsutils';
 import { DataTableService } from '../DataTableService';
 import { orderParametersByName } from '../utils';
-import { getDefaultEndDate, getDefaultStartDate, mapProjectEntitiesToCountries } from './utils';
+import {
+  getDefaultEndDateString,
+  getDefaultStartDateString,
+  mapProjectEntitiesToCountries,
+} from './utils';
 
 const requiredParamsSchema = yup.object().shape({
   hierarchy: yup.string().default('explore'),
   dataGroupCode: yup.string().required(),
   dataElementCodes: yup.array().of(yup.string().required()).min(1),
   organisationUnitCodes: yup.array().of(yup.string().required()).strict().required(),
-  startDate: yup.date().default(getDefaultStartDate),
-  endDate: yup.date().default(getDefaultEndDate),
+  startDate: yup
+    .string()
+    .matches(ISO_DATE_PATTERN, {
+      message: 'startDate must be a valid ISO 8601 date: YYYY-MM-DD',
+    })
+    .default(getDefaultStartDateString),
+  endDate: yup
+    .string()
+    .matches(ISO_DATE_PATTERN, {
+      message: 'endDate must be a valid ISO 8601 date: YYYY-MM-DD',
+    })
+    .default(getDefaultEndDateString),
   aggregations: yup.array().of(
     yup.object().shape({
       type: yup.string().required(),
@@ -73,8 +88,8 @@ export class EventsDataTableService extends DataTableService<
     dataGroupCode: string;
     dataElementCodes?: string[];
     organisationUnitCodes: string[];
-    startDate?: Date;
-    endDate?: Date;
+    startDate?: string;
+    endDate?: string;
     aggregations?: { type: string; config?: Record<string, unknown> }[];
   }) {
     const {
@@ -94,9 +109,6 @@ export class EventsDataTableService extends DataTableService<
       }),
     );
 
-    const startDateString = startDate ? startDate.toISOString() : undefined;
-    const endDateString = endDate ? endDate.toISOString() : undefined;
-
     // Ensure that if fetching for project, we map it to the underlying countries
     const entityCodesForFetch = await mapProjectEntitiesToCountries(
       this.ctx.apiClient,
@@ -112,8 +124,8 @@ export class EventsDataTableService extends DataTableService<
       {
         hierarchy,
         organisationUnitCodes: entityCodesForFetch,
-        startDate: startDateString,
-        endDate: endDateString,
+        startDate,
+        endDate,
         dataElementCodes: dataElementCodesForFetch,
       },
       { aggregations },

packages/data-table-server/src/dataTableService/services/utils/getDefaultDates.ts

@@ -1,11 +1,15 @@
-/**
+/*
  * Tupaia
- * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import { convertPeriodStringToDateRange, getDefaultPeriod } from '@tupaia/utils';
+import { getIsoDateString } from '@tupaia/tsutils';
 
 export const getDefaultStartDate = () =>
   new Date(convertPeriodStringToDateRange(getDefaultPeriod())[0]);
 export const getDefaultEndDate = () =>
   new Date(convertPeriodStringToDateRange(getDefaultPeriod())[1]);
+
+export const getDefaultStartDateString = () => getIsoDateString(getDefaultStartDate());
+export const getDefaultEndDateString = () => getIsoDateString(getDefaultEndDate());

packages/tsutils/src/datetime.ts

@@ -6,6 +6,14 @@
 import moment from 'moment';
 import momentTimezone from 'moment-timezone';
 
+export const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+
+/**
+ * @returns ISO date string in the format "yyyy-mm-dd".
+ * @remarks Assumes the input date object is valid.
+ */
+export const getIsoDateString = (date: Date) => date.toISOString().slice(0, 10);
+
 /**
  * @returns utcOffset in format: "+05:00"
  */
@@ -19,4 +27,4 @@ export const getTimezoneNameFromTimestamp = (timestamp: string) =>
     .names()
     .find(name => getUtcOffsetFromTimestamp(timestamp) === momentTimezone.tz(name).format('Z'));
 
-export const utcMoment = (...args: Parameters<typeof moment['utc']>) => moment.utc(...args);
+export const utcMoment = (...args: Parameters<(typeof moment)['utc']>) => moment.utc(...args);