From e075b0061a182e24529ffbbac04a4e28189216f1 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Mon, 3 Oct 2022 14:29:19 +0530 Subject: [PATCH 1/2] Add custom date time formatter --- packages/react-charting/README.md | 4 ++++ .../CommonComponents/CartesianChart.base.tsx | 10 +++++++++- .../CommonComponents/CartesianChart.types.ts | 5 +++++ packages/react-charting/src/utilities/utilities.ts | 8 ++++++-- 4 files changed, 24 insertions(+), 3 deletions(-) diff --git a/packages/react-charting/README.md b/packages/react-charting/README.md index 79cad1a43d4ad..452874e724ce3 100644 --- a/packages/react-charting/README.md +++ b/packages/react-charting/README.md @@ -99,11 +99,15 @@ The charting components are built using following building blocks. - Axis localization The axes support 2 ways of localization. + 1. Javascript provided inbuilt localization for numeric and date axis. Specify the culture and dateLocalizeOptions for date axis to define target localization. Refer the [javascript localization guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString) for usage. 2. Custom locale definition: The consumer of the library can specify a custom locale definition as supported by d3 (like [this](https://github.com/d3/d3-time-format/blob/main/locale/en-US.json)). The date axis will use the date range and the multiformat specified in the definition to determine the correct format to show in the ticks. For example - If the date range is in days then the axis will show hourly ticks. If the date range spans across months then the axis will show months in tick labels and so on. Specify the custom locale definition in the timeFormatLocale prop. Refer to the Custom Locale Date Axis example in line chart for sample usage. + - Date axis formatting + The date axis can be custom formatted using the customDateTimeFormatter prop. + - Event annotations (Available in line charts). - Data can be annotated using vertical lines representing the events of interest. See [line chart with events](https://fluentuipr.z22.web.core.windows.net/heads/master/react-charting/demo/index.html#/examples/linechart#Variants) for example. diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx index ef04080c0c4a3..947401739bf8d 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -144,6 +144,7 @@ export class CartesianChartBase extends React.Component string; + /** * Call to provide customized styling that will layer on top of the variant rules. */ diff --git a/packages/react-charting/src/utilities/utilities.ts b/packages/react-charting/src/utilities/utilities.ts index 782ec29d0c714..0260dff4beeaf 100644 --- a/packages/react-charting/src/utilities/utilities.ts +++ b/packages/react-charting/src/utilities/utilities.ts @@ -200,14 +200,18 @@ export function createDateXAxis( culture?: string, options?: Intl.DateTimeFormatOptions, timeFormatLocale?: d3TimeFormat.TimeLocaleDefinition, + customDateTimeFormatter?: (dateTime: Date) => string, ) { const { domainNRangeValues, xAxisElement, tickPadding = 6, xAxistickSize = 6, xAxisCount = 6 } = xAxisParams; const xAxisScale = d3ScaleTime() .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue]) .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]); const xAxis = d3AxisBottom(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).ticks(xAxisCount); - - if (culture && options) { + if (customDateTimeFormatter) { + xAxis.tickFormat((domainValue: Date, _index: number) => { + return customDateTimeFormatter(domainValue); + }); + } else if (culture && options) { xAxis.tickFormat((domainValue: Date, _index: number) => { return domainValue.toLocaleString(culture, options); }); From 11c6acb08e0852019b9f63594ddc6dccd2d7d4fa Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Mon, 3 Oct 2022 14:32:04 +0530 Subject: [PATCH 2/2] Add change file --- ...-charting-6b54ee59-501e-4a48-9c6e-5d3bffc6dab0.json | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 change/@fluentui-react-charting-6b54ee59-501e-4a48-9c6e-5d3bffc6dab0.json diff --git a/change/@fluentui-react-charting-6b54ee59-501e-4a48-9c6e-5d3bffc6dab0.json b/change/@fluentui-react-charting-6b54ee59-501e-4a48-9c6e-5d3bffc6dab0.json new file mode 100644 index 0000000000000..95f252162650f --- /dev/null +++ b/change/@fluentui-react-charting-6b54ee59-501e-4a48-9c6e-5d3bffc6dab0.json @@ -0,0 +1,10 @@ +{ + "type": "patch", + "comment": { + "title": "", + "value": "" + }, + "packageName": "@fluentui/react-charting", + "email": "atishay.jain@microsoft.com", + "dependentChangeType": "patch" +}