feat(react-charts): Migrate VSBC to V9

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

@@ -0,0 +1 @@
+export * from './components/VerticalStackedBarChart/index';

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

@@ -1,9 +1,19 @@
 import * as React from 'react';
 import { LegendsProps } from '../Legends/index';
-import { AccessibilityProps, Margins } from '../../types/index';
-import { ChartTypes, XAxisTypes, YAxisType } from '../../utilities/index';
+import {
+  AccessibilityProps,
+  Margins,
+  HorizontalBarChartWithAxisDataPoint,
+  LineChartPoints,
+  VerticalBarChartDataPoint,
+  DataPoint,
+  VerticalStackedBarDataPoint,
+  GroupedVerticalBarChartData,
+} from '../../types/index';
+import { ChartTypes, XAxisTypes, YAxisType, IYAxisParams, IAxisData, IDomainNRange } 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}
@@ -546,11 +556,22 @@ export interface ModifiedCartesianChartProps extends CartesianChartProps {
    */
   children(props: ChildProps): React.ReactNode;
 
+  /**
+   * To enable callout for individualbar or complete stack. Using for only Vertical stacked bar chart.
+   * @default false
+   * @type \{boolean \}
+   */
+  isCalloutForStack?: boolean;
+
   /** dataset values to find out domain of the String axis
    * Present using for only vertical stacked bar chart and grouped vertical bar chart
    */
   datasetForXAxisDomain?: string[];
 
+  /** Own callout design */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  customizedCallout?: any;
+
   /**
    * if the data points for the y-axis is of type string, then we need to give this
    * prop to construct the y-axis
@@ -595,4 +616,57 @@ 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/Legends/Legends.types.ts

@@ -191,6 +191,32 @@ export interface LegendsProps {
    */
   defaultSelectedLegend?: string;
 
+  /**
+   * Keys (title) that will be used to set selected items in multi-select scenarios when canSelectMultipleLegends is
+   * true. For single-select, use selectedLegend.
+   *
+   * When this prop is provided, the component is controlled and does not automatically update the selection based on
+   * user interactions; the parent component must update the value passed to this property by handling the onChange
+   * event.
+   *
+   * @see defaultSelectedLegends for setting the initially-selected legends in uncontrolled mode.
+   * @see selectedLegends for setting the selected legends when `canSelectMultipleLegends` is `true`.
+   */
+  selectedLegends?: string[];
+
+  /**
+   * Key (title) that will be used to set the selected item in single-select scenarios when canSelectMultipleLegends is
+   * false or unspecified. For multi-select, use selectedLegends.
+   *
+   * When this prop is provided, the component is controlled and does not automatically update the selection based on
+   * user interactions; the parent component must update the value passed to this property by handling the onChange
+   * event.
+   *
+   * @see defaultSelectedLegend for setting the initially-selected legend in uncontrolled mode.
+   * @see selectedLegend for setting the selected legend when `canSelectMultipleLegends` is `false`.
+   */
+  selectedLegend?: string;
+
   /**
    * The shape for the legend.
    */