diff --git a/src/routes/components/charts/breakdown/BreakdownChart.tsx b/src/routes/components/charts/breakdown/BreakdownChart.tsx index 4a460b71..5f7bc6e0 100644 --- 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 = ({ { - 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)} /> diff --git a/src/routes/components/charts/common/chart-utils.ts b/src/routes/components/charts/common/chart-utils.ts index e9cc572a..6a552094 100644 --- 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, 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 index 8c4d4545..f400ecb9 100644 --- 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 = ({ { - 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)} />