fix build errors

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

@@ -7,6 +7,8 @@
 /// <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';
 
@@ -196,8 +198,14 @@ export interface ChartPopoverProps {
     // (undocumented)
     descriptionMessage?: string;
     // (undocumented)
+    gapSpace?: number;
+    // (undocumented)
     hoverXValue?: string | number;
     // (undocumented)
+    id?: string;
+    // (undocumented)
+    isBeakVisible?: boolean;
+    // (undocumented)
     isCalloutForStack?: boolean;
     // (undocumented)
     isCartesian?: boolean;
@@ -206,8 +214,14 @@ export interface ChartPopoverProps {
     // (undocumented)
     legend?: string | number | Date;
     // (undocumented)
+    onDismiss?: () => void;
+    // (undocumented)
+    preventDismissOnLostFocus?: boolean;
+    // (undocumented)
     ratio?: [number, number];
     // (undocumented)
+    target?: SVGGElement;
+    // (undocumented)
     xAxisCalloutAccessibilityData?: {
         ariaLabel?: string;
         data?: string;
@@ -545,6 +559,8 @@ export interface LegendsProps {
     onChange?: (selectedLegends: string[], event: React_2.MouseEvent<HTMLButtonElement>, currentLegend?: Legend) => void;
     overflowStyles?: React_2.CSSProperties;
     overflowText?: string;
+    selectedLegend?: string;
+    selectedLegends?: string[];
     shape?: LegendShape;
     styles?: LegendsStyles;
 }
@@ -675,6 +691,7 @@ export interface LineDataInVerticalStackedBarChart {
     data?: number;
     // (undocumented)
     legend: string;
+    lineOptions?: LineChartLineOptions;
     useSecondaryYScale?: boolean;
     // (undocumented)
     y: number;
@@ -697,14 +714,23 @@ 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;
     onChartMouseLeave?: () => void;
@@ -865,6 +891,62 @@ export interface VerticalBarChartStyles extends CartesianChartStyles {
     yAxisTicks?: string;
 }
 
+// @public (undocumented)
+export const VerticalStackedBarChart: React_2.FunctionComponent<VerticalStackedBarChartProps>;
+
+// @public
+export interface VerticalStackedBarChartProps extends CartesianChartProps {
+    allowHoverOnLegend?: boolean;
+    barCornerRadius?: number;
+    barGapMax?: number;
+    barMinimumHeight?: number;
+    barWidth?: number | 'default' | 'auto';
+    chartTitle?: string;
+    // @deprecated
+    colors?: string[];
+    culture?: string;
+    data: VerticalStackedChartProps[];
+    enableGradient?: boolean;
+    hideLabels?: boolean;
+    isCalloutForStack?: boolean;
+    lineOptions?: LineChartLineOptions;
+    maxBarWidth?: number;
+    mode?: 'default' | 'plotly';
+    onBarClick?: (event: React_2.MouseEvent<SVGElement>, data: VerticalStackedChartProps | VSChartDataPoint) => void;
+    onRenderCalloutPerDataPoint?: RenderFunction<VSChartDataPoint>;
+    onRenderCalloutPerStack?: RenderFunction<VerticalStackedChartProps>;
+    roundCorners?: boolean;
+    styles?: VerticalStackedBarChartStyles;
+    xAxisInnerPadding?: number;
+    xAxisOuterPadding?: number;
+    xAxisPadding?: number;
+    yMinValue?: undefined;
+}
+
+// @public
+export interface VerticalStackedBarChartStyleProps extends CartesianChartStyleProps {
+}
+
+// @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)
 export interface VerticalStackedBarDataPoint extends Omit<DataPoint, 'x'> {
     x: number | string | Date;

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

@@ -620,15 +620,15 @@ export interface ModifiedCartesianChartProps extends CartesianChartProps {
   /**
    * Get the min and max values of the y-axis
    */
-  getMinMaxOfYAxis: (
+  getMinMaxOfYAxis?: (
     points: LineChartPoints[] | HorizontalBarChartWithAxisDataPoint[] | VerticalBarChartDataPoint[] | DataPoint[],
     yAxisType: YAxisType | undefined,
   ) => { startValue: number; endValue: number };
 
   /**
    * Create the y-axis
    */
-  createYAxis: (
+  createYAxis?: (
     yAxisParams: IYAxisParams,
     isRtl: boolean,
     axisData: IAxisData,
@@ -641,7 +641,7 @@ export interface ModifiedCartesianChartProps extends CartesianChartProps {
   /**
    * Get the domain and range values
    */
-  getDomainNRangeValues: (
+  getDomainNRangeValues?: (
     points:
       | LineChartPoints[]
       | VerticalBarChartDataPoint[]
@@ -661,7 +661,7 @@ export interface ModifiedCartesianChartProps extends CartesianChartProps {
   /**
    * Create the string y-axis
    */
-  createStringYAxis: (
+  createStringYAxis?: (
     yAxisParams: IYAxisParams,
     dataPoints: string[],
     isRtl: boolean,

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

@@ -21,6 +21,12 @@ export interface ChartPopoverProps {
   descriptionMessage?: string;
   ratio?: [number, number];
   isCartesian?: boolean;
+  id?: string;
+  target?: SVGGElement;
+  isBeakVisible?: boolean;
+  gapSpace?: number;
+  onDismiss?: () => void;
+  preventDismissOnLostFocus?: boolean;
 }
 
 export interface PopoverComponentStyles {

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

@@ -85,9 +85,12 @@ type CalloutAnchorPointData = {
 export const VerticalStackedBarChart: React.FunctionComponent<VerticalStackedBarChartProps> = props => {
   let _points: VerticalStackedChartProps[] = [];
   let _dataset: VerticalStackedBarDataPoint[];
-  let _xAxisLabels: string[];
+  let _xAxisLabels: string[] = [];
   let _bars: JSX.Element[];
-  let _xAxisType: XAxisTypes;
+  let _xAxisType: XAxisTypes =
+    props.data! && props.data!.length > 0
+      ? (getTypeOfAxis(props.data[0]!.xAxisPoint, true) as XAxisTypes)
+      : XAxisTypes.StringAxis;
   let _barWidth: number = 0;
   const _calloutId: string = useId('callout');
   let _colors: string[];
@@ -205,9 +208,7 @@ export const VerticalStackedBarChart: React.FunctionComponent<VerticalStackedBar
     return (
       <Legends
         legends={totalLegends}
-        overflowProps={props.legendsOverflowProps}
-        enabledWrapLines={props.enabledWrapLines}
-        focusZonePropsInHoverCard={props.focusZonePropsForLegendsInHoverCard}
+        enabledWrapLines={props.enabledLegendsWrapLines}
         overflowText={props.legendsOverflowText}
         {...props.legendProps}
         onChange={_onLegendSelectionChange}
@@ -1087,7 +1088,7 @@ export const VerticalStackedBarChart: React.FunctionComponent<VerticalStackedBar
     const legendBars: JSX.Element = _getLegendData(_points, _createLegendsForLine(props.data));
     const calloutProps: ModifiedCartesianChartProps['calloutProps'] = {
       id: `toolTip${_calloutId}`,
-      target: refSelected,
+      target: refSelected!,
       isBeakVisible: false,
       gapSpace: 15,
       color: color,

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

@@ -578,6 +578,10 @@ export interface LineDataInVerticalStackedBarChart {
    * False by default.
    */
   useSecondaryYScale?: boolean;
+  /**
+   * options for the line drawn
+   */
+  lineOptions?: LineChartLineOptions;
 }
 
 /**

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

@@ -1733,7 +1733,7 @@ export function createNumericYAxis(
     : yMinMaxValues.startValue < yMinValue
     ? 0
     : yMinValue!;
-  const domainValues = prepareDatapoints(finalYmax, finalYmin, yAxisTickCount, isIntegralDataset, roundedTicks);
+  const domainValues = prepareDatapoints(finalYmax, finalYmin, yAxisTickCount, isIntegralDataset);
   const yAxisScale = d3ScaleLinear()
     .domain([supportNegativeData ? domainValues[0] : finalYmin, domainValues[domainValues.length - 1]])
     .range([containerHeight - margins.bottom!, margins.top! + (eventAnnotationProps! ? eventLabelHeight! : 0)]);