Add support for javascript date localization

change/@fluentui-react-charting-3e3805e8-7750-4654-8e75-736a660ed7b3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add support for javascript date localization",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-charting/TechnicalDetails.md

@@ -42,6 +42,10 @@ The charting components are built using following building blocks.
     | Tree Chart                 | --           | --        | --          |
     | Sparkline Chart            | --           | --        | --          |
 
+  - Axis localization
+    The axes support javascript provided localization for numeric and date axis.
+    Specify the culture and dateLocalizeOptions for date axis to define target localization details.
+
 - 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.

packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx

@@ -134,7 +134,16 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
   }
 
   public render(): JSX.Element {
-    const { calloutProps, points, chartType, chartHoverProps, svgFocusZoneProps, svgProps, culture } = this.props;
+    const {
+      calloutProps,
+      points,
+      chartType,
+      chartHoverProps,
+      svgFocusZoneProps,
+      svgProps,
+      culture,
+      dateLocalizeOptions,
+    } = this.props;
     if (this.props.parentRef) {
       this._fitParentContainer();
     }
@@ -188,7 +197,7 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
         xScale = createNumericXAxis(XAxisParams, culture);
         break;
       case XAxisTypes.DateAxis:
-        xScale = createDateXAxis(XAxisParams, this.props.tickParams!);
+        xScale = createDateXAxis(XAxisParams, this.props.tickParams!, culture, dateLocalizeOptions);
         break;
       case XAxisTypes.StringAxis:
         xScale = createStringXAxis(XAxisParams, this.props.tickParams!, this.props.datasetForXAxisDomain!, culture);

packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts

@@ -492,10 +492,15 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
   svgFocusZoneProps?: IFocusZoneProps;
 
   /**
-   * The prop used to define the culture to localize the numbers
+   * The prop used to define the culture to localize the numbers and date
    */
   culture?: string;
 
+  /**
+   * The prop used to define the date time localization options
+   */
+  dateLocalizeOptions?: Intl.DateTimeFormatOptions;
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getAxisData?: any;
 

packages/react-charting/src/utilities/utilities.ts

@@ -158,14 +158,28 @@ export function createNumericXAxis(xAxisParams: IXAxisParams, culture?: string)
  * @param {IXAxisParams} xAxisParams
  * @param {ITickParams} tickParams
  */
-export function createDateXAxis(xAxisParams: IXAxisParams, tickParams: ITickParams) {
+export function createDateXAxis(
+  xAxisParams: IXAxisParams,
+  tickParams: ITickParams,
+  culture?: string,
+  options?: Intl.DateTimeFormatOptions,
+) {
   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) {
+    xAxis.tickFormat((domainValue: Date, _index: number) => {
+      return domainValue.toLocaleString(culture, options);
+    });
+  }
+
   tickParams.tickValues ? xAxis.tickValues(tickParams.tickValues) : '';
-  tickParams.tickFormat ? xAxis.tickFormat(d3TimeFormat.timeFormat(tickParams.tickFormat)) : '';
+  if (culture === undefined) {
+    tickParams.tickFormat ? xAxis.tickFormat(d3TimeFormat.timeFormat(tickParams.tickFormat)) : '';
+  }
   if (xAxisElement) {
     d3Select(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
   }