fix: locale format for cards (#3903)

fixes: https://jsw.ibm.com/browse/MASMON-2771
carbon-design-system · Dec 9, 2024 · cddbe4b · cddbe4b
1 parent bd4e1e2
commit cddbe4b
Show file tree

Hide file tree

Showing 30 changed files with 254 additions and 244 deletions.
diff --git a/packages/react/src/components/BarChartCard/BarChartCard.jsx b/packages/react/src/components/BarChartCard/BarChartCard.jsx
@@ -20,7 +20,7 @@ import {
 } from '../../utils/cardUtilityFunctions';
 import StatefulTable from '../Table/StatefulTable';
 import { csvDownloadHandler } from '../../utils/componentUtilityFunctions';
-import dayjs from '../../utils/dayjs';
+import dayjs, { DAYJS_INPUT_FORMATS } from '../../utils/dayjs';
 import { formatGraphTick } from '../TimeSeriesCard/timeSeriesUtils';
 
 import {
@@ -59,9 +59,9 @@ const defaultProps = {
   },
   locale: 'en',
   showTimeInGMT: false,
-  tooltipDateFormatPattern: 'L HH:mm:ss',
+  tooltipDateFormatPattern: DAYJS_INPUT_FORMATS.SECONDS,
   values: null,
-  defaultDateFormatPattern: 'L HH:mm',
+  defaultDateFormatPattern: DAYJS_INPUT_FORMATS.SECONDS,
 };
 
 const BarChartCard = ({

diff --git a/packages/react/src/components/BarChartCard/barChartUtils.js b/packages/react/src/components/BarChartCard/barChartUtils.js
@@ -1,6 +1,6 @@
 import { isNil, isEmpty, capitalize, omit } from 'lodash-es';
 
-import dayjs from '../../utils/dayjs';
+import dayjs, { DAYJS_INPUT_FORMATS } from '../../utils/dayjs';
 import { BAR_CHART_TYPES, BAR_CHART_LAYOUTS, CARD_SIZES } from '../../constants/LayoutConstants';
 import { CHART_COLORS } from '../../constants/CardPropTypes';
 import { convertStringsToDOMElement } from '../../utils/componentUtilityFunctions';
@@ -425,7 +425,7 @@ export const handleTooltip = (
   defaultTooltip,
   timeDataSourceId,
   showTimeInGMT,
-  tooltipDateFormatPattern = 'L HH:mm:ss',
+  tooltipDateFormatPattern = DAYJS_INPUT_FORMATS.SECONDS,
   locale
 ) => {
   dayjs.locale(locale);
@@ -527,7 +527,7 @@ export const formatTableData = (
   type,
   values,
   chartData,
-  defaultDateFormatPattern = 'L HH:mm'
+  defaultDateFormatPattern = DAYJS_INPUT_FORMATS.SECONDS
 ) => {
   const tableData = [];
   if (!isNil(values) && !isNil(chartData)) {

diff --git a/packages/react/src/components/BarChartCard/barChartUtils.test.js b/packages/react/src/components/BarChartCard/barChartUtils.test.js
@@ -585,7 +585,7 @@ describe('barChartUtils', () => {
         values: {
           Emissions: 120,
           Particles: 447,
-          timestamp: '02/09/2020 10:23',
+          timestamp: '02/09/2020 10:23:45',
         },
       },
       {
@@ -594,7 +594,7 @@ describe('barChartUtils', () => {
         values: {
           Emissions: 150,
           Particles: 450,
-          timestamp: '02/10/2020 10:23',
+          timestamp: '02/10/2020 10:23:45',
         },
       },
       {
@@ -603,7 +603,7 @@ describe('barChartUtils', () => {
         values: {
           Emissions: 170,
           Particles: 512,
-          timestamp: '02/11/2020 10:23',
+          timestamp: '02/11/2020 10:23:45',
         },
       },
       {
@@ -612,7 +612,7 @@ describe('barChartUtils', () => {
         values: {
           Emissions: 200,
           Particles: 565,
-          timestamp: '02/12/2020 10:23',
+          timestamp: '02/12/2020 10:23:45',
         },
       },
     ]);

diff --git a/packages/react/src/components/Card/Card.jsx b/packages/react/src/components/Card/Card.jsx
@@ -25,6 +25,7 @@ import { getUpdatedCardSize, useCardResizing } from '../../utils/cardUtilityFunc
 import { parseValue } from '../DateTimePicker/dateTimePickerUtils';
 import useSizeObserver from '../../hooks/useSizeObserver';
 import EmptyState from '../EmptyState/EmptyState';
+import { DAYJS_INPUT_FORMATS } from '../../utils/dayjs';
 
 import CardTypeContent from './CardTypeContent';
 import CardToolbar from './CardToolbar';
@@ -266,7 +267,7 @@ export const defaultProps = {
   tooltip: undefined,
   titleTextTooltip: undefined,
   footerContent: undefined,
-  dateTimeMask: 'YYYY-MM-DD HH:mm',
+  dateTimeMask: DAYJS_INPUT_FORMATS.RANGE,
   padding: 'default',
   overrides: undefined,
   type: null,

diff --git a/packages/react/src/components/Card/Card.test.jsx b/packages/react/src/components/Card/Card.test.jsx
@@ -18,6 +18,7 @@ const tooltipElement = <div>This is some other text</div>;
 const cardProps = {
   title: 'My Title',
   id: 'my card',
+  dateTimeMask: 'YYYY-MM-DD HH:mm',
 };
 
 describe('Card', () => {

diff --git a/packages/react/src/components/Card/CardToolbar.jsx b/packages/react/src/components/Card/CardToolbar.jsx
@@ -14,6 +14,7 @@ import DateTimePicker, {
 } from '../DateTimePicker/DateTimePickerV2WithoutTimeSpinner';
 import Button from '../Button';
 import { PRESET_VALUES } from '../../constants/DateConstants';
+import { DAYJS_INPUT_FORMATS } from '../../utils/dayjs';
 
 import CardRangePicker, { CardRangePickerPropTypes } from './CardRangePicker';
 
@@ -109,7 +110,7 @@ const defaultProps = {
     extraActionLabel: 'Action Label',
   },
   testId: 'card-toolbar',
-  dateTimeMask: 'YYYY-MM-DD HH:mm',
+  dateTimeMask: DAYJS_INPUT_FORMATS.RANGE,
   renderDateDropdownInPortal: true,
 };
 

diff --git a/packages/react/src/components/Card/__snapshots__/Card.story.storyshot b/packages/react/src/components/Card/__snapshots__/Card.story.storyshot
@@ -5515,7 +5515,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/C
             className="iot--card--subtitle--text"
             data-testid="Card-subtitle"
           >
-            2018-10-28 13:10 to 2018-10-28 13:30
+            10/28/2018 13:10 to 10/28/2018 13:30
           </div>
         </span>
         <div

diff --git a/packages/react/src/components/ComboChartCard/ComboChartCard.jsx b/packages/react/src/components/ComboChartCard/ComboChartCard.jsx
@@ -14,6 +14,7 @@ import { CardPropTypes, ComboChartPropTypes } from '../../constants/CardPropType
 import { settings } from '../../constants/Settings';
 import StatefulTable from '../Table/StatefulTable';
 import { csvDownloadHandler } from '../../utils/componentUtilityFunctions';
+import { DAYJS_INPUT_FORMATS } from '../../utils/dayjs';
 
 import { useTableData, useTableColumns, useChartData, useChartOptions } from './comboChartHelpers';
 
@@ -42,8 +43,8 @@ const defaultProps = {
   },
   showTimeInGMT: false,
   domainRange: null,
-  tooltipDateFormatPattern: 'L HH:mm:ss',
-  defaultDateFormatPattern: 'L HH:mm',
+  tooltipDateFormatPattern: DAYJS_INPUT_FORMATS.SECONDS,
+  defaultDateFormatPattern: DAYJS_INPUT_FORMATS.SECONDS,
 };
 
 const ComboChartCard = ({

diff --git a/packages/react/src/components/ComboChartCard/ComboChartCard.test.jsx b/packages/react/src/components/ComboChartCard/ComboChartCard.test.jsx
@@ -170,7 +170,7 @@ describe('ComboChartCard', () => {
     expect(container.querySelector('#mock-combo-chart')).toBeInTheDocument();
     userEvent.click(screen.getByLabelText('Download table content'));
     expect(fileDownload).toHaveBeenCalledWith(
-      `health,age,condition,rul,date\n83,77,95,92,12/15/2018 00:00\n85,78,97,93,12/01/2018 00:00\n`,
+      `health,age,condition,rul,date\n83,77,95,92,12/15/2018 00:00:00\n85,78,97,93,12/01/2018 00:00:00\n`,
       `Health.csv`
     );
   });

diff --git a/packages/react/src/components/ComboChartCard/__snapshots__/ComboChartCard.story.storyshot b/packages/react/src/components/ComboChartCard/__snapshots__/ComboChartCard.story.storyshot
@@ -717,9 +717,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                           >
                             <span
                               className=""
-                              title="12/15/2018 00:00"
+                              title="12/15/2018 00:00:00"
                             >
-                              12/15/2018 00:00
+                              12/15/2018 00:00:00
                             </span>
                           </span>
                         </td>
@@ -842,9 +842,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                           >
                             <span
                               className=""
-                              title="12/01/2018 00:00"
+                              title="12/01/2018 00:00:00"
                             >
-                              12/01/2018 00:00
+                              12/01/2018 00:00:00
                             </span>
                           </span>
                         </td>
@@ -967,9 +967,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                           >
                             <span
                               className=""
-                              title="10/15/2019 00:00"
+                              title="10/15/2019 00:00:00"
                             >
-                              10/15/2019 00:00
+                              10/15/2019 00:00:00
                             </span>
                           </span>
                         </td>
@@ -1092,9 +1092,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                           >
                             <span
                               className=""
-                              title="10/15/2019 00:00"
+                              title="10/15/2019 00:00:00"
                             >
-                              10/15/2019 00:00
+                              10/15/2019 00:00:00
                             </span>
                           </span>
                         </td>
@@ -1217,9 +1217,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                           >
                             <span
                               className=""
-                              title="10/01/2019 00:00"
+                              title="10/01/2019 00:00:00"
                             >
-                              10/01/2019 00:00
+                              10/01/2019 00:00:00
                             </span>
                           </span>
                         </td>
@@ -1342,9 +1342,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                           >
                             <span
                               className=""
-                              title="09/16/2019 00:00"
+                              title="09/16/2019 00:00:00"
                             >
-                              09/16/2019 00:00
+                              09/16/2019 00:00:00
                             </span>
                           </span>
                         </td>
@@ -1467,9 +1467,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                           >
                             <span
                               className=""
-                              title="09/01/2019 00:00"
+                              title="09/01/2019 00:00:00"
                             >
-                              09/01/2019 00:00
+                              09/01/2019 00:00:00
                             </span>
                           </span>
                         </td>
@@ -1592,9 +1592,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                           >
                             <span
                               className=""
-                              title="08/15/2019 00:00"
+                              title="08/15/2019 00:00:00"
                             >
-                              08/15/2019 00:00
+                              08/15/2019 00:00:00
                             </span>
                           </span>
                         </td>
@@ -1717,9 +1717,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                           >
                             <span
                               className=""
-                              title="08/01/2019 00:00"
+                              title="08/01/2019 00:00:00"
                             >
-                              08/01/2019 00:00
+                              08/01/2019 00:00:00
                             </span>
                           </span>
                         </td>
@@ -1842,9 +1842,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                           >
                             <span
                               className=""
-                              title="07/15/2019 00:00"
+                              title="07/15/2019 00:00:00"
                             >
-                              07/15/2019 00:00
+                              07/15/2019 00:00:00
                             </span>
                           </span>
                         </td>

diff --git a/packages/react/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot b/packages/react/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot
@@ -10086,9 +10086,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/D
                               >
                                 <span
                                   className=""
-                                  title="09/30/2019 00:00"
+                                  title="09/30/2019 00:00:00"
                                 >
-                                  09/30/2019 00:00
+                                  09/30/2019 00:00:00
                                 </span>
                               </span>
                             </td>
@@ -10216,9 +10216,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/D
                               >
                                 <span
                                   className=""
-                                  title="09/30/2019 00:00"
+                                  title="09/30/2019 00:00:00"
                                 >
-                                  09/30/2019 00:00
+                                  09/30/2019 00:00:00
                                 </span>
                               </span>
                             </td>
@@ -10346,9 +10346,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/D
                               >
                                 <span
                                   className=""
-                                  title="09/30/2019 00:00"
+                                  title="09/30/2019 00:00:00"
                                 >
-                                  09/30/2019 00:00
+                                  09/30/2019 00:00:00
                                 </span>
                               </span>
                             </td>
@@ -10476,9 +10476,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/D
                               >
                                 <span
                                   className=""
-                                  title="09/30/2019 00:00"
+                                  title="09/30/2019 00:00:00"
                                 >
-                                  09/30/2019 00:00
+                                  09/30/2019 00:00:00
                                 </span>
                               </span>
                             </td>
@@ -10606,9 +10606,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/D
                               >
                                 <span
                                   className=""
-                                  title="09/30/2019 00:00"
+                                  title="09/30/2019 00:00:00"
                                 >
-                                  09/30/2019 00:00
+                                  09/30/2019 00:00:00
                                 </span>
                               </span>
                             </td>
@@ -10736,9 +10736,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/D
                               >
                                 <span
                                   className=""
-                                  title="09/30/2019 00:00"
+                                  title="09/30/2019 00:00:00"
                                 >
-                                  09/30/2019 00:00
+                                  09/30/2019 00:00:00
                                 </span>
                               </span>
                             </td>
@@ -10866,9 +10866,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/D
                               >
                                 <span
                                   className=""
-                                  title="09/30/2019 00:00"
+                                  title="09/30/2019 00:00:00"
                                 >
-                                  09/30/2019 00:00
+                                  09/30/2019 00:00:00
                                 </span>
                               </span>
                             </td>