Merge pull request #944 from dlabrecq/date-fns

Skip format of empty date strings
RedHatInsights · Jan 10, 2024 · 3f6c9ee · 3f6c9ee
2 parents 4b6c87f + fcfab90
commit 3f6c9ee
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 21 deletions.
diff --git a/src/routes/components/charts/breakdown/BreakdownChart.tsx b/src/routes/components/charts/breakdown/BreakdownChart.tsx
@@ -14,12 +14,13 @@ import {
 import messages from 'locales/messages';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
-import { getMaxValue, isFloat, isInt } from 'routes/components/charts/common/chart-datum';
+import { getMaxValue } from 'routes/components/charts/common/chart-datum';
 import type { ChartSeries } from 'routes/components/charts/common/chart-utils';
 import {
   getChartNames,
   getLegendData,
   getResizeObserver,
+  getTickFormat,
   getTickValues,
   getTooltipLabel,
   initHiddenSeries,
@@ -420,15 +421,7 @@ const BreakdownChart: React.FC<BreakdownChartProps> = ({
           <ChartAxis
             fixLabelOverlap
             style={styles.xAxis}
-            tickFormat={t => {
-              if (isFloat(t) || isInt(t)) {
-                return t;
-              }
-              return intl.formatDate(`${t}T00:00:00`, {
-                month: 'short',
-                year: 'numeric',
-              });
-            }}
+            tickFormat={t => getTickFormat(t, 'short', 'numeric')}
             tickValues={getTickValues(series)}
           />
           <ChartAxis dependentAxis style={styles.yAxis} tickFormat={getTickValue} />

diff --git a/src/routes/components/charts/common/chart-utils.ts b/src/routes/components/charts/common/chart-utils.ts
@@ -4,7 +4,7 @@ import messages from 'locales/messages';
 import type { FormatOptions, Formatter } from 'utils/format';
 import type { DomainTuple, VictoryStyleInterface } from 'victory-core';
 
-import { getMaxMinValues, getTooltipContent } from './chart-datum';
+import { getMaxMinValues, getTooltipContent, isFloat, isInt } from './chart-datum';
 
 export interface ChartData {
   childName?: string;
@@ -90,6 +90,16 @@ export const getLegendData = (series: ChartSeries[], hiddenSeries: Set<number>,
   return result;
 };
 
+export const getTickFormat = (t: string, month: 'long' | 'short' = 'short', year: 'numeric' = undefined) => {
+  if (isFloat(t) || isInt(t) || t?.trim().length === 0) {
+    return t;
+  }
+  return intl.formatDate(`${t}T00:00:00`, {
+    month,
+    ...(year && ({ year } as any)),
+  });
+};
+
 export const getTickValues = (series: ChartSeries[]) => {
   const result = [];
 

diff --git a/src/routes/components/charts/trend/TrendChart.tsx b/src/routes/components/charts/trend/TrendChart.tsx
@@ -13,13 +13,14 @@ import { Title } from '@patternfly/react-core';
 import messages from 'locales/messages';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
-import { getCostRangeString, isFloat, isInt } from 'routes/components/charts/common/chart-datum';
+import { getCostRangeString } from 'routes/components/charts/common/chart-datum';
 import type { ChartSeries } from 'routes/components/charts/common/chart-utils';
 import {
   getChartNames,
   getDomain,
   getLegendData,
   getResizeObserver,
+  getTickFormat,
   getTickValues,
   getTooltipLabel,
   initHiddenSeries,
@@ -320,15 +321,7 @@ const TrendChart: React.FC<TrendChartProps> = ({
             <ChartAxis
               fixLabelOverlap
               style={styles.xAxis}
-              tickFormat={t => {
-                if (isFloat(t) || isInt(t)) {
-                  return t;
-                }
-                return intl.formatDate(`${t}T00:00:00`, {
-                  month: previousData ? 'long' : 'short',
-                  ...(!previousData && ({ year: 'numeric' } as any)),
-                });
-              }}
+              tickFormat={t => getTickFormat(t, previousData ? 'long' : 'short')}
               tickValues={getTickValues(series)}
             />
             <ChartAxis dependentAxis style={styles.yAxis} tickFormat={getTickValue} />