From a2953bcc0334fce8d9796a7b675f003ade904f13 Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Mon, 5 Feb 2024 22:03:32 +0530 Subject: [PATCH 1/4] utc formatter added for the default Axis tooltip --- .../DefaultChartsAxisTooltipContent.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx index e02e09e773cf7..c455e284cd0c4 100644 --- a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx @@ -18,7 +18,21 @@ function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) { if (dataIndex == null) { return null; } - const axisFormatter = axis.valueFormatter ?? ((v) => v.toLocaleString()); + + const utcFormatter = (v: any): string => { + try { + const userProvidedDate = new Date(v); + const utcDate = new Date(userProvidedDate.toISOString()); + return utcDate.toUTCString(); + } catch (e) { + return v.toLocaleString(); + } + }; + + const axisFormatter = + axis.valueFormatter ?? + ((v: any) => (axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString())); + return ( From 77d147ede50969a81db0e46d276cd4e7cb292fcd Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Tue, 6 Feb 2024 15:34:53 +0530 Subject: [PATCH 2/4] utc formatter added for the default Axis tooltip --- .../DefaultChartsAxisTooltipContent.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx index c455e284cd0c4..397c1bd85b699 100644 --- a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx @@ -19,19 +19,17 @@ function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) { return null; } - const utcFormatter = (v: any): string => { - try { - const userProvidedDate = new Date(v); - const utcDate = new Date(userProvidedDate.toISOString()); - return utcDate.toUTCString(); - } catch (e) { + const utcFormatter = (v: string | number | Date): string => { + if (v instanceof Date) { + return v.toUTCString(); + } else { return v.toLocaleString(); } }; const axisFormatter = axis.valueFormatter ?? - ((v: any) => (axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString())); + ((v: any) => (axis?.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString())); return ( From f69478716f2baa88f5aa5a40e9a9bfd1ea0cbbe4 Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Tue, 6 Feb 2024 15:48:40 +0530 Subject: [PATCH 3/4] utc formatter added for the default Axis tooltip --- .../src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx index 397c1bd85b699..c616f75a2510a 100644 --- a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx @@ -22,9 +22,8 @@ function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) { const utcFormatter = (v: string | number | Date): string => { if (v instanceof Date) { return v.toUTCString(); - } else { - return v.toLocaleString(); } + return v.toLocaleString(); }; const axisFormatter = From 3adbb91b347e965ded7a794599ad8d6c57cef0ea Mon Sep 17 00:00:00 2001 From: Shaharyar Shamshi Date: Tue, 6 Feb 2024 16:45:47 +0530 Subject: [PATCH 4/4] reformating --- .../DefaultChartsAxisTooltipContent.tsx | 12 +++--------- packages/x-charts/src/ChartsTooltip/utils.tsx | 7 +++++++ 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx index c616f75a2510a..c53f431311fcb 100644 --- a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx @@ -10,7 +10,7 @@ import { ChartsTooltipRow, } from './ChartsTooltipTable'; import type { ChartsAxisContentProps } from './ChartsAxisTooltipContent'; -import { isCartesianSeries } from './utils'; +import { isCartesianSeries, utcFormatter } from './utils'; function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) { const { series, axis, dataIndex, axisValue, sx, classes } = props; @@ -19,16 +19,10 @@ function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) { return null; } - const utcFormatter = (v: string | number | Date): string => { - if (v instanceof Date) { - return v.toUTCString(); - } - return v.toLocaleString(); - }; - const axisFormatter = axis.valueFormatter ?? - ((v: any) => (axis?.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString())); + ((v: string | number | Date) => + axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString()); return ( diff --git a/packages/x-charts/src/ChartsTooltip/utils.tsx b/packages/x-charts/src/ChartsTooltip/utils.tsx index 0b59e3106002c..2045440db9b10 100644 --- a/packages/x-charts/src/ChartsTooltip/utils.tsx +++ b/packages/x-charts/src/ChartsTooltip/utils.tsx @@ -99,3 +99,10 @@ export function isCartesianSeries( ): series is ChartSeriesDefaultized { return isCartesianSeriesType(series.type); } + +export function utcFormatter(v: string | number | Date): string { + if (v instanceof Date) { + return v.toUTCString(); + } + return v.toLocaleString(); +}