resolve comments

packages/charts/react-charts-preview/library/etc/react-charts-preview.api.md

@@ -7,8 +7,6 @@
 /// <reference types="react" />
 
 import * as React_2 from 'react';
-import { ScaleBand } from 'd3-scale';
-import { ScaleLinear } from 'd3-scale';
 import { SVGProps } from 'react';
 import { TimeLocaleDefinition } from 'd3-time-format';
 
@@ -714,22 +712,15 @@ export interface ModifiedCartesianChartProps extends CartesianChartProps {
     chartTitle?: string;
     chartType: ChartTypes;
     children(props: ChildProps): React_2.ReactNode;
-    createStringYAxis?: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, chartType: ChartTypes, barWidth: number | undefined, culture: string) => ScaleBand<string>;
-    createYAxis?: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean, supportNegativeData?: boolean, roundedTicks?: boolean) => ScaleLinear<number, number, never>;
     culture?: string;
     customizedCallout?: any;
     datasetForXAxisDomain?: string[];
     enableFirstRenderOptimization?: boolean;
     // (undocumented)
     getAxisData?: any;
     getDomainMargins?: (containerWidth: number) => Margins;
-    getDomainNRangeValues?: (points: LineChartPoints[] | VerticalBarChartDataPoint[] | VerticalStackedBarDataPoint[] | HorizontalBarChartWithAxisDataPoint[] | GroupedVerticalBarChartData[], margins: Margins, width: number, chartType: ChartTypes, isRTL: boolean, xAxisType: XAxisTypes, barWidth: number, tickValues: Date[] | number[] | string[] | undefined, shiftX: number) => IDomainNRange;
     getGraphData?: any;
     getmargins?: (margins: Margins) => void;
-    getMinMaxOfYAxis?: (points: LineChartPoints[] | HorizontalBarChartWithAxisDataPoint[] | VerticalBarChartDataPoint[] | DataPoint[], yAxisType: YAxisType | undefined) => {
-        startValue: number;
-        endValue: number;
-    };
     isCalloutForStack?: boolean;
     legendBars: JSX.Element | null;
     maxOfYVal?: number;
@@ -930,21 +921,7 @@ export interface VerticalStackedBarChartStyleProps extends CartesianChartStylePr
 // @public
 export interface VerticalStackedBarChartStyles extends CartesianChartStyles {
     barLabel: string;
-    // @deprecated
-    chart?: string;
     opacityChangeOnHover?: string;
-    // @deprecated
-    xAxisDomain?: string;
-    // @deprecated
-    xAxisText?: string;
-    // @deprecated
-    xAxisTicks?: string;
-    // @deprecated
-    yAxisDomain?: string;
-    // @deprecated
-    yAxisText?: string;
-    // @deprecated
-    yAxisTicks?: string;
 }
 
 // @public (undocumented)
@@ -965,6 +942,7 @@ export interface VerticalStackedChartProps {
 export interface VSChartDataPoint {
     callOutAccessibilityData?: AccessibilityProps;
     color?: string;
+    culture?: string;
     data: number;
     legend: string;
     xAxisCalloutData?: string;

packages/charts/react-charts-preview/library/src/components/CommonComponents/CartesianChart.types.ts

@@ -1,19 +1,9 @@
 import * as React from 'react';
 import { LegendsProps } from '../Legends/index';
-import {
-  AccessibilityProps,
-  Margins,
-  HorizontalBarChartWithAxisDataPoint,
-  LineChartPoints,
-  VerticalBarChartDataPoint,
-  DataPoint,
-  VerticalStackedBarDataPoint,
-  GroupedVerticalBarChartData,
-} from '../../types/index';
-import { ChartTypes, XAxisTypes, YAxisType, IYAxisParams, IAxisData, IDomainNRange } from '../../utilities/index';
+import { AccessibilityProps, Margins } from '../../types/index';
+import { ChartTypes, XAxisTypes, YAxisType } from '../../utilities/index';
 import { TimeLocaleDefinition } from 'd3-time-format';
 import { ChartPopoverProps } from './ChartPopover.types';
-import { ScaleBand, ScaleLinear } from 'd3-scale';
 /**
  * Cartesian Chart style properties
  * {@docCategory CartesianChart}
@@ -616,57 +606,4 @@ export interface ModifiedCartesianChartProps extends CartesianChartProps {
    * Used to control the first render cycle Performance optimization code.
    */
   enableFirstRenderOptimization?: boolean;
-
-  /**
-   * Get the min and max values of the y-axis
-   */
-  getMinMaxOfYAxis?: (
-    points: LineChartPoints[] | HorizontalBarChartWithAxisDataPoint[] | VerticalBarChartDataPoint[] | DataPoint[],
-    yAxisType: YAxisType | undefined,
-  ) => { startValue: number; endValue: number };
-
-  /**
-   * Create the y-axis
-   */
-  createYAxis?: (
-    yAxisParams: IYAxisParams,
-    isRtl: boolean,
-    axisData: IAxisData,
-    isIntegralDataset: boolean,
-    useSecondaryYScale?: boolean,
-    supportNegativeData?: boolean,
-    roundedTicks?: boolean,
-  ) => ScaleLinear<number, number, never>;
-
-  /**
-   * Get the domain and range values
-   */
-  getDomainNRangeValues?: (
-    points:
-      | LineChartPoints[]
-      | VerticalBarChartDataPoint[]
-      | VerticalStackedBarDataPoint[]
-      | HorizontalBarChartWithAxisDataPoint[]
-      | GroupedVerticalBarChartData[],
-    margins: Margins,
-    width: number,
-    chartType: ChartTypes,
-    isRTL: boolean,
-    xAxisType: XAxisTypes,
-    barWidth: number,
-    tickValues: Date[] | number[] | string[] | undefined,
-    shiftX: number,
-  ) => IDomainNRange;
-
-  /**
-   * Create the string y-axis
-   */
-  createStringYAxis?: (
-    yAxisParams: IYAxisParams,
-    dataPoints: string[],
-    isRtl: boolean,
-    chartType: ChartTypes,
-    barWidth: number | undefined,
-    culture: string,
-  ) => ScaleBand<string>;
 }

packages/charts/react-charts-preview/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx

@@ -26,7 +26,6 @@ import {
   VSChartDataPoint,
   LineDataInVerticalStackedBarChart,
   ModifiedCartesianChartProps,
-  DataPoint,
   Legend,
   ChartPopover,
   Legends,
@@ -43,13 +42,6 @@ import {
   getScalePadding,
   isScalePaddingDefined,
   calculateAppropriateBarWidth,
-  findVSBCNumericMinMaxOfY,
-  createNumericYAxis,
-  IDomainNRange,
-  domainRangeOfDateForAreaLineVerticalBarChart,
-  domainRangeOfVSBCNumeric,
-  domainRangeOfXStringAxis,
-  createStringYAxis,
   formatDate,
   areArraysEqual,
   calculateLongestLabelWidth,
@@ -345,36 +337,6 @@ export const VerticalStackedBarChart: React.FunctionComponent<VerticalStackedBar
     setPopoverOpen(false);
   }
 
-  function _getDomainNRangeValues(
-    points: DataPoint[],
-    _margins: Margins,
-    width: number,
-    chartType: ChartTypes,
-    isRTL: boolean,
-    xAxisType: XAxisTypes,
-    barWidth: number,
-    tickValues: Date[] | number[] | undefined,
-    shiftX: number,
-  ) {
-    let domainNRangeValue: IDomainNRange;
-    if (xAxisType === XAxisTypes.NumericAxis) {
-      domainNRangeValue = domainRangeOfVSBCNumeric(points, _margins, width, isRTL, barWidth!);
-    } else if (xAxisType === XAxisTypes.DateAxis) {
-      domainNRangeValue = domainRangeOfDateForAreaLineVerticalBarChart(
-        points,
-        _margins,
-        width,
-        isRTL,
-        tickValues! as Date[],
-        chartType,
-        barWidth,
-      );
-    } else {
-      domainNRangeValue = domainRangeOfXStringAxis(_margins, width, isRTL);
-    }
-    return domainNRangeValue;
-  }
-
   function _getMargins(_margins: Margins) {
     margins = _margins;
   }
@@ -644,7 +606,7 @@ export const VerticalStackedBarChart: React.FunctionComponent<VerticalStackedBar
   function _renderCallout(props?: VSChartDataPoint): JSX.Element | null {
     return props ? (
       <ChartPopover
-        culture={'en-us'}
+        culture={props.culture ?? 'en-us'}
         XValue={props.xAxisCalloutData}
         xCalloutValue={xCalloutValue}
         yCalloutValue={yCalloutValue}
@@ -674,8 +636,8 @@ export const VerticalStackedBarChart: React.FunctionComponent<VerticalStackedBar
     color: string,
     mouseEvent: React.MouseEvent<SVGElement> | SVGGElement,
   ) {
-    let clientX = 0,
-      clientY = 0;
+    let clientX = 0;
+    let clientY = 0;
     if ('clientX' in mouseEvent) {
       clientX = mouseEvent.clientX;
       clientY = mouseEvent.clientY;
@@ -1107,14 +1069,10 @@ export const VerticalStackedBarChart: React.FunctionComponent<VerticalStackedBar
         chartType={ChartTypes.VerticalStackedBarChart}
         xAxisType={_xAxisType}
         calloutProps={calloutProps}
-        createYAxis={createNumericYAxis}
         tickParams={tickParams}
         legendBars={legendBars}
-        getMinMaxOfYAxis={findVSBCNumericMinMaxOfY}
         datasetForXAxisDomain={_xAxisLabels}
         isCalloutForStack={shouldFocusWholeStack}
-        getDomainNRangeValues={_getDomainNRangeValues}
-        createStringYAxis={createStringYAxis}
         barwidth={_barWidth}
         getmargins={_getMargins}
         getGraphData={_getGraphData}

packages/charts/react-charts-preview/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.types.ts

@@ -182,46 +182,4 @@ export interface VerticalStackedBarChartStyles extends CartesianChartStyles {
    * Style for the bar labels
    */
   barLabel: string;
-
-  /**
-   * Style for the chart.
-   * @deprecated use root instead.
-   */
-  chart?: string;
-
-  /**
-   * Style for the line representing the domain of the x-axis.
-   * @deprecated - use xAxis instead.
-   */
-  xAxisDomain?: string;
-
-  /**
-   * Style for the lines representing the ticks along the x-axis.
-   * @deprecated - use xAxis instead.
-   */
-  xAxisTicks?: string;
-
-  /**
-   * Style for the text labeling each tick along the x-axis.
-   * @deprecated - use xAxis instead.
-   */
-  xAxisText?: string;
-
-  /**
-   * Style for the line representing the domain of the y-axis.
-   * @deprecated - use xAxis instead.
-   */
-  yAxisDomain?: string;
-
-  /**
-   * Style for the lines representing the ticks along the y-axis.
-   * @deprecated - use xAxis instead.
-   */
-  yAxisTicks?: string;
-
-  /**
-   * Style for the text labeling each tick along the y-axis.
-   * @deprecated - use xAxis instead.
-   */
-  yAxisText?: string;
 }

packages/charts/react-charts-preview/library/src/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.ts

@@ -8,13 +8,6 @@ export const verticalstackedbarchartClassNames: SlotClassNames<VerticalStackedBa
   tooltip: 'fui-vsbc__tooltip',
   barLabel: 'fui-vsbc__barLabel',
   root: '',
-  chart: '',
-  xAxisDomain: '',
-  xAxisTicks: '',
-  xAxisText: '',
-  yAxisDomain: '',
-  yAxisTicks: '',
-  yAxisText: '',
   xAxis: '',
   yAxis: '',
   legendContainer: '',

packages/charts/react-charts-preview/library/src/types/DataPoint.ts

@@ -530,6 +530,11 @@ export interface VSChartDataPoint {
    * Accessibility data for callout
    */
   callOutAccessibilityData?: AccessibilityProps;
+
+  /**
+   * The prop used to define the culture to localized the numbers
+   */
+  culture?: string;
 }
 
 /**