@fluentui/react-charting 5.24.3 → 5.24.5

package/lib-amd/components/CommonComponents/CartesianChart.types.d.ts

@@ -5,7 +5,7 @@ import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';
 import { IFocusZoneProps, FocusZoneDirection } from '@fluentui/react-focus';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
 import { ILegendsProps } from '../Legends/index';
-import { IAccessibilityProps, IChart, IDataPoint, IGroupedVerticalBarChartData, IHeatMapChartDataPoint, IHorizontalBarChartWithAxisDataPoint, ILineChartPoints, IMargins, IVerticalBarChartDataPoint, IVerticalStackedBarDataPoint } from '../../types/index';
+import { AxisCategoryOrder, IAccessibilityProps, IChart, IDataPoint, IGroupedVerticalBarChartData, IHeatMapChartDataPoint, IHorizontalBarChartWithAxisDataPoint, ILineChartPoints, IMargins, IScatterChartDataPoint, IVerticalBarChartDataPoint, IVerticalStackedBarDataPoint } from '../../types/index';
 import { IChartHoverCardProps } from '../../utilities/index';
 import { TimeLocaleDefinition } from 'd3-time-format';
 import { ChartTypes, IAxisData, IDomainNRange, IYAxisParams, XAxisTypes, YAxisType } from '../../utilities/utilities';
@@ -395,6 +395,16 @@ export interface ICartesianChartProps {
      * @default undefined
      */
     yAxisAnnotation?: string;
+    /**
+     * Specifies the ordering logic for categories (or string tick labels) on the x-axis.
+     * @default 'default'
+     */
+    xAxisCategoryOrder?: AxisCategoryOrder;
+    /**
+     * Specifies the ordering logic for categories (or string tick labels) on the y-axis.
+     * @default 'default'
+     */
+    yAxisCategoryOrder?: AxisCategoryOrder;
 }
 export interface IYValueHover {
     legend?: string;
@@ -555,7 +565,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     /**
      * Get the min and max values of the y-axis
      */
-    getMinMaxOfYAxis: (points: ILineChartPoints[] | IHorizontalBarChartWithAxisDataPoint[] | IVerticalBarChartDataPoint[] | IDataPoint[], yAxisType: YAxisType | undefined, useSecondaryYScale?: boolean) => {
+    getMinMaxOfYAxis: (points: ILineChartPoints[] | IHorizontalBarChartWithAxisDataPoint[] | IVerticalBarChartDataPoint[] | IDataPoint[] | IScatterChartDataPoint[], yAxisType: YAxisType | undefined, useSecondaryYScale?: boolean) => {
         startValue: number;
         endValue: number;
     };

package/lib-amd/components/CommonComponents/CartesianChart.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.types.js","sourceRoot":"../src/","sources":["components/CommonComponents/CartesianChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { ILegendsProps } from '../Legends/index';\nimport {\n  IAccessibilityProps,\n  IChart,\n  IDataPoint,\n  IGroupedVerticalBarChartData,\n  IHeatMapChartDataPoint,\n  IHorizontalBarChartWithAxisDataPoint,\n  ILineChartPoints,\n  IMargins,\n  IVerticalBarChartDataPoint,\n  IVerticalStackedBarDataPoint,\n} from '../../types/index';\nimport { IChartHoverCardProps } from '../../utilities/index';\nimport { TimeLocaleDefinition } from 'd3-time-format';\nimport { ChartTypes, IAxisData, IDomainNRange, IYAxisParams, XAxisTypes, YAxisType } from '../../utilities/utilities';\nimport { ScaleBand, ScaleLinear } from 'd3-scale';\n\n/**\n * Cartesian Chart style properties\n * {@docCategory CartesianChart}\n */\nexport interface ICartesianChartStyleProps {\n  /**\n   * Theme (provided through customization.)\n   */\n  theme: ITheme;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * Height of the chart.\n   */\n  height?: number;\n\n  /**\n   * Color of the chart.\n   */\n  color?: string;\n\n  /**\n   * Link to redirect if click action for graph\n   */\n  href?: string;\n\n  /**\n   * prop to check if the chart is selected or hovered upon to determine opacity\n   */\n  shouldHighlight?: boolean;\n\n  /**\n   * prop to check if the Page is in Rtl\n   */\n  isRtl?: boolean;\n\n  /**\n   * color of the line\n   */\n  lineColor?: string;\n\n  /**\n   * boolean flag which determines if shape is drawn in callout\n   */\n  toDrawShape?: boolean;\n\n  /**\n   * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows\n   */\n  enableReflow?: boolean;\n}\n\n/**\n * Cartesian Chart styles\n * {@docCategory CartesianChart}\n */\nexport interface ICartesianChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Style for the element containing the x-axis.\n   */\n  xAxis?: IStyle;\n\n  /**\n   * Style for the element containing the y-axis.\n   */\n  yAxis?: IStyle;\n\n  /**\n   * Style for legend container\n   */\n  legendContainer?: IStyle;\n\n  /**\n   * line hover box css\n   */\n  hover?: IStyle;\n\n  /**\n   * styles for callout root-content\n   */\n  calloutContentRoot?: IStyle;\n\n  /**\n   * styles for callout x-content\n   */\n  calloutContentX?: IStyle;\n\n  /**\n   * styles for callout y-content\n   */\n  calloutContentY?: IStyle;\n\n  /**\n   * styles for description message\n   */\n  descriptionMessage?: IStyle;\n\n  /**\n   * styles for callout Date time container\n   */\n  calloutDateTimeContainer?: IStyle;\n\n  /**\n   * styles for callout info container\n   */\n  calloutInfoContainer?: IStyle;\n\n  /**\n   * styles for callout block container\n   */\n  calloutBlockContainer?: IStyle;\n\n  /**\n   * styles for callout legend text\n   */\n  calloutlegendText?: IStyle;\n\n  /**\n   * styles for tooltip\n   */\n  tooltip?: IStyle;\n\n  /**\n   * styles for axis title\n   */\n  axisTitle?: IStyle;\n\n  /**\n   * styles for axis annotation\n   */\n  axisAnnotation?: IStyle;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle?: IStyle;\n\n  /**\n   * Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n   */\n  opacityChangeOnHover?: IStyle;\n\n  /**\n   * styles for the shape object in the callout\n   */\n  shapeStyles?: IStyle;\n\n  /**\n   * Styles for the chart wrapper div\n   */\n  chartWrapper?: IStyle;\n\n  /**\n   * Styles for the svg tooltip\n   */\n  svgTooltip?: IStyle;\n}\n\n/**\n * Cartesian Chart properties\n * {@docCategory CartesianChart}\n */\nexport interface ICartesianChartProps {\n  /**\n   * Below height used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  height?: number;\n\n  /**\n   * Below width used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  width?: number;\n\n  /**\n   * this prop takes its parent as a HTML element to define the width and height of the chart\n   */\n  parentRef?: HTMLElement | null;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * Margins for the chart\n   * @default `{ top: 20, bottom: 35, left: 40, right: 20 }`\n   * To avoid edge cuttings to the chart, we recommend you use default values or greater then default values\n   */\n  margins?: IMargins;\n\n  /** decides wether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Do not show tooltips in chart\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * this prop takes values that you want the chart to render on x-axis\n   * This is a optional parameter if not specified D3 will decide which values appear on the x-axis for you\n   * Please look at https://github.com/d3/d3-scale for more information on how D3 decides what data to appear on the axis of chart\n   */\n  tickValues?: number[] | Date[] | string[];\n\n  /**\n   * the format for the data on x-axis. For date object this can be specified to your requirement. Eg: '%m/%d', '%d'\n   * Please look at https://github.com/d3/d3-time-format for all the formats supported for date axis\n   * Only applicable for date axis. For y-axis format use yAxisTickFormat prop.\n   */\n  tickFormat?: string;\n\n  /**\n   * Width of line stroke\n   */\n  strokeWidth?: number;\n\n  /**\n   * x Axis labels tick padding. This defines the gap between tick labels and tick lines.\n   * @default 10\n   */\n  xAxisTickPadding?: number;\n\n  /**\n   * the format in for the data on y-axis. For data object this can be specified to your requirement.\n   *  Eg: d3.format(\".0%\")(0.123),d3.format(\"+20\")(42);\n   * Please look at https://github.com/d3/d3-format for all the formats supported\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yAxisTickFormat?: any;\n\n  /**\n   * Secondary y-scale options\n   * By default this is not defined, meaning there will be no secondary y-scale.\n   */\n  secondaryYScaleOptions?: {\n    /** Minimum value (0 by default) */\n    yMinValue?: number;\n    /** Maximum value (100 by default) */\n    yMaxValue?: number;\n  };\n\n  /**\n   * minimum  data value point in y-axis\n   */\n  yMinValue?: number;\n\n  /**\n   * maximum data value point in y-axis\n   */\n  yMaxValue?: number;\n\n  /**\n   * maximum data value point in x-axis\n   */\n  xMaxValue?: number;\n\n  /**\n   * Number of ticks on the y-axis.\n   * Tick count should be factor of difference between (yMinValue, yMaxValue)?\n   * @default 4\n   */\n  yAxisTickCount?: number;\n\n  /**\n   * defines the number of ticks on the x-axis. Tries to match the nearest interval satisfying the count.\n   * Does not work for string axis.\n   * @default 6\n   */\n  xAxisTickCount?: number;\n\n  /**\n   * define the size of the tick lines on the x-axis\n   * @default 10\n   */\n  xAxistickSize?: number;\n\n  /**\n   * defines the space between the tick line and the data label\n   * @default 10\n   */\n  tickPadding?: number;\n\n  /**\n   * Url that the data-viz needs to redirect to upon clicking on it\n   */\n  href?: string;\n\n  /**\n   * Label to apply to the whole chart.\n   * @deprecated - Use your chart label for the chart.\n   */\n  chartLabel?: string;\n\n  /**\n   * overflow props for the legends\n   */\n  legendsOverflowProps?: Partial<IOverflowSetProps>;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  legendsOverflowText?: any;\n\n  /**\n   * focus zone props in hover card for legends\n   */\n  focusZonePropsForLegendsInHoverCard?: IFocusZoneProps;\n\n  /**\n   * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n   */\n  enabledLegendsWrapLines?: boolean;\n\n  /*\n   * props for the legends in the chart\n   */\n  legendProps?: Partial<ILegendsProps>;\n\n  /**\n   *@default false\n   *Used for to elipse x axis labes and show tooltip on x axis labels\n   */\n  showXAxisLablesTooltip?: boolean;\n\n  /**\n   * @default 4\n   * Used for X axis labels\n   * While Giving showXAxisLablesTooltip prop, need to define after how many chars, we need to truncate the word.\n   */\n  noOfCharsToTruncate?: number;\n\n  /**\n   * @default false\n   * Used to wrap x axis labels values (whole value)\n   */\n  wrapXAxisLables?: boolean;\n\n  /**\n   * @default false\n   * Used to rotate x axis labels by 45 degrees\n   */\n  rotateXAxisLables?: boolean;\n\n  /**\n   * The prop used to define the date time localization options\n   */\n  dateLocalizeOptions?: Intl.DateTimeFormatOptions;\n\n  /**\n   * The prop used to define a custom locale for the date time format.\n   */\n  timeFormatLocale?: TimeLocaleDefinition;\n\n  /**\n   * The prop used to define a custom datetime formatter for date axis.\n   */\n  customDateTimeFormatter?: (dateTime: Date) => string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;\n\n  /**\n   * Callout customization props\n   */\n  calloutProps?: Partial<ICalloutProps>;\n\n  /**\n   * props for the svg; use this to include aria-* or other attributes on the tag\n   */\n  svgProps?: React.SVGProps<SVGSVGElement>;\n\n  /**\n   * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows\n   * @default True for LineChart but False for other charts\n   */\n  enableReflow?: boolean;\n\n  /**\n   * Prop to set the x axis title\n   * @default undefined\n   * Minimum bottom margin required for x axis title is 55px\n   */\n\n  xAxisTitle?: string;\n\n  /**\n   * Prop to set the y axis title\n   * @default undefined\n   * Minimum left margin required for y axis title is 60px and for RTL is 40px\n   * Minimum right margin required for y axis title is 40px and for RTL is 60px\n   */\n  yAxisTitle?: string;\n\n  /**\n   * Prop to set the secondary y axis title\n   * @default undefined\n   * If RTL is enabled, minimum left and right margins required for secondary y axis title is 60px\n   */\n  secondaryYAxistitle?: string;\n\n  /**\n   * Whether to use UTC time for axis scale, ticks, and the time display in callouts.\n   * When set to `true`, time is displayed equally, regardless of the user's timezone settings.\n   * @default true\n   */\n  useUTC?: boolean;\n\n  /**\n   * @default false\n   * Used for enabling negative values in Y axis.\n   */\n  supportNegativeData?: boolean;\n\n  /**\n   * @default false\n   * The prop used to decide rounded ticks on y axis\n   */\n  roundedTicks?: boolean;\n\n  /**\n   * Optional callback to access the IChart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: IRefObject<IChart>;\n\n  /**\n   * Determines whether overlapping x-axis tick labels should be hidden.\n   * @default false\n   */\n  hideTickOverlap?: boolean;\n\n  /**\n   * Prop to set the x axis annotation. Used to display additional information on the x-axis.\n   * This is shown on the top of the chart.\n   * @default undefined\n   */\n  xAxisAnnotation?: string;\n\n  /**\n   * Prop to set the y axis annotation. Used to display additional information on the y-axis.\n   * This is shown on the right side of the chart. Not shown if secondary y-axis is enabled.\n   * @default undefined\n   */\n  yAxisAnnotation?: string;\n}\n\nexport interface IYValueHover {\n  legend?: string;\n  y?: number | string;\n  color?: string;\n  data?: string | number;\n  shouldDrawBorderBottom?: boolean;\n  yAxisCalloutData?: string | { [id: string]: number };\n  index?: number;\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IChildProps {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  xScale?: any;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScalePrimary?: any;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScaleSecondary?: any;\n  containerHeight?: number;\n  containerWidth?: number;\n}\n\n// Only used for Cartesian chart base\nexport interface IModifiedCartesianChartProps extends ICartesianChartProps {\n  /**\n   * Define the chart title\n   */\n  chartTitle?: string;\n\n  /**\n   * Only used for Area chart\n   * Value used to draw y axis of that chart.\n   */\n  maxOfYVal?: number;\n\n  /**\n   * Data of the chart\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  points: any;\n\n  /**\n   * Define type of the chart\n   */\n  chartType: ChartTypes;\n\n  /** X axis type */\n  xAxisType: XAxisTypes;\n\n  /** Y axis type */\n  yAxisType?: YAxisType;\n\n  /**\n   * Legends of the chart.\n   */\n  legendBars: JSX.Element | null;\n\n  /**\n   * Callout props\n   */\n  calloutProps: Partial<ICalloutProps> & {\n    isCalloutVisible: boolean;\n    id: string;\n    YValueHover?: IYValueHover[];\n    hoverXValue?: string | number | null;\n    legend?: string;\n    color?: string;\n    YValue?: string | number;\n    XValue?: string;\n    descriptionMessage?: string;\n  };\n\n  /**\n   * Callback method used for to get margins to the chart.\n   */\n  getmargins?: (margins: IMargins) => void;\n\n  /**\n   * This is a call back method to the chart from cartesian chart.\n   * params are xScale, yScale, containerHeight, containerWidth. These values were used to draw the graph.\n   * It also contians an optional param xAxisElement - defines as x axis scale element.\n   * This param used to enable feature word wrap of Xaxis.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  getGraphData?: any;\n\n  /**\n   * Used for bar chart graphs.\n   * To define width of the bar\n   */\n  barwidth?: number;\n\n  /**\n   * Used for tick styles of the x axis of the chart\n   * Tick params are applicable for date axis only.\n   */\n  tickParams?: {\n    tickValues?: number[] | Date[] | string[];\n    tickFormat?: string;\n  };\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  xAxisPadding?: number;\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  yAxisPadding?: number;\n\n  /**\n   * Children elements specific to derived chart types.\n   */\n  children(props: IChildProps): React.ReactNode;\n\n  /**\n   * To enable callout for individualbar or complete stack. Using for only Vertical stacked bar chart.\n   * @default false\n   * @type \\{boolean \\}\n   */\n  isCalloutForStack?: boolean;\n\n  /** dataset values to find out domain of the String axis\n   * Present using for only vertical stacked bar chart and grouped vertical bar chart\n   */\n  datasetForXAxisDomain?: string[];\n\n  /** Own callout design */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  customizedCallout?: any;\n\n  /**\n   * if the data points for the y-axis is of type string, then we need to give this\n   * prop to construct the y-axis\n   */\n  stringDatasetForYAxisDomain?: string[];\n\n  /**\n   * Focus zone direction to the chart\n   * @default FocusZoneDirection.horizontal\n   */\n  focusZoneDirection?: FocusZoneDirection;\n\n  /**\n   * props to send into the chart hover card\n   */\n  chartHoverProps?: IChartHoverCardProps;\n\n  /**\n   * props to send to the focuszone\n   */\n  svgFocusZoneProps?: IFocusZoneProps;\n\n  /**\n   * The prop used to define the culture to localize the numbers and date\n   */\n  culture?: string;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  getAxisData?: any;\n\n  /**\n   * Callback method used when mouse leaves the chart boundary.\n   */\n  onChartMouseLeave?: () => void;\n\n  /** Callback method to get extra margins for domain */\n  getDomainMargins?: (containerWidth: number) => IMargins;\n\n  /** Callback method to get extra margins for Y-axis domain */\n  getYDomainMargins?: (containerHeight: number) => IMargins;\n\n  /** Padding between each bar/line-point */\n  xAxisInnerPadding?: number;\n\n  /** Padding before first bar/line-point and after last bar/line-point */\n  xAxisOuterPadding?: number;\n\n  /**\n   *@default false\n   *Used for to elipse y axis labes and show tooltip on x axis labels\n   */\n  showYAxisLablesTooltip?: boolean;\n\n  /**\n   *@default false\n   *Used for showing complete y axis lables   */\n  showYAxisLables?: boolean;\n\n  /**\n   * @default false\n   * Used to control the first render cycle Performance optimization code.\n   */\n  enableFirstRenderOptimization?: boolean;\n\n  /**\n   * Get the min and max values of the y-axis\n   */\n  getMinMaxOfYAxis: (\n    points: ILineChartPoints[] | IHorizontalBarChartWithAxisDataPoint[] | IVerticalBarChartDataPoint[] | IDataPoint[],\n    yAxisType: YAxisType | undefined,\n    useSecondaryYScale?: boolean,\n  ) => { startValue: number; endValue: number };\n\n  /**\n   * Create the y-axis\n   */\n  createYAxis: (\n    yAxisParams: IYAxisParams,\n    isRtl: boolean,\n    axisData: IAxisData,\n    isIntegralDataset: boolean,\n    useSecondaryYScale?: boolean,\n    supportNegativeData?: boolean,\n    roundedTicks?: boolean,\n  ) => ScaleLinear<number, number, never>;\n\n  /**\n   * Get the domain and range values\n   */\n  getDomainNRangeValues: (\n    points:\n      | ILineChartPoints[]\n      | IVerticalBarChartDataPoint[]\n      | IVerticalStackedBarDataPoint[]\n      | IHorizontalBarChartWithAxisDataPoint[]\n      | IGroupedVerticalBarChartData[]\n      | IHeatMapChartDataPoint[],\n    margins: IMargins,\n    width: number,\n    chartType: ChartTypes,\n    isRTL: boolean,\n    xAxisType: XAxisTypes,\n    barWidth: number,\n    tickValues: Date[] | number[] | string[] | undefined,\n    shiftX: number,\n  ) => IDomainNRange;\n\n  /**\n   * Create the string y-axis\n   */\n  createStringYAxis: (\n    yAxisParams: IYAxisParams,\n    dataPoints: string[],\n    isRtl: boolean,\n    barWidth: number | undefined,\n    chartType?: ChartTypes,\n  ) => ScaleBand<string>;\n\n  /**\n   * Callback to access the public methods and properties of the component.\n   */\n  ref?: IRefObject<IChart>;\n\n  /**\n   * Controls whether the numeric x-axis domain should be extended to start and end at nice rounded values.\n   * @default true\n   */\n  showRoundOffXTickValues?: boolean;\n}\n"]}
+{"version":3,"file":"CartesianChart.types.js","sourceRoot":"../src/","sources":["components/CommonComponents/CartesianChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { ILegendsProps } from '../Legends/index';\nimport {\n  AxisCategoryOrder,\n  IAccessibilityProps,\n  IChart,\n  IDataPoint,\n  IGroupedVerticalBarChartData,\n  IHeatMapChartDataPoint,\n  IHorizontalBarChartWithAxisDataPoint,\n  ILineChartPoints,\n  IMargins,\n  IScatterChartDataPoint,\n  IVerticalBarChartDataPoint,\n  IVerticalStackedBarDataPoint,\n} from '../../types/index';\nimport { IChartHoverCardProps } from '../../utilities/index';\nimport { TimeLocaleDefinition } from 'd3-time-format';\nimport { ChartTypes, IAxisData, IDomainNRange, IYAxisParams, XAxisTypes, YAxisType } from '../../utilities/utilities';\nimport { ScaleBand, ScaleLinear } from 'd3-scale';\n\n/**\n * Cartesian Chart style properties\n * {@docCategory CartesianChart}\n */\nexport interface ICartesianChartStyleProps {\n  /**\n   * Theme (provided through customization.)\n   */\n  theme: ITheme;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * Height of the chart.\n   */\n  height?: number;\n\n  /**\n   * Color of the chart.\n   */\n  color?: string;\n\n  /**\n   * Link to redirect if click action for graph\n   */\n  href?: string;\n\n  /**\n   * prop to check if the chart is selected or hovered upon to determine opacity\n   */\n  shouldHighlight?: boolean;\n\n  /**\n   * prop to check if the Page is in Rtl\n   */\n  isRtl?: boolean;\n\n  /**\n   * color of the line\n   */\n  lineColor?: string;\n\n  /**\n   * boolean flag which determines if shape is drawn in callout\n   */\n  toDrawShape?: boolean;\n\n  /**\n   * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows\n   */\n  enableReflow?: boolean;\n}\n\n/**\n * Cartesian Chart styles\n * {@docCategory CartesianChart}\n */\nexport interface ICartesianChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Style for the element containing the x-axis.\n   */\n  xAxis?: IStyle;\n\n  /**\n   * Style for the element containing the y-axis.\n   */\n  yAxis?: IStyle;\n\n  /**\n   * Style for legend container\n   */\n  legendContainer?: IStyle;\n\n  /**\n   * line hover box css\n   */\n  hover?: IStyle;\n\n  /**\n   * styles for callout root-content\n   */\n  calloutContentRoot?: IStyle;\n\n  /**\n   * styles for callout x-content\n   */\n  calloutContentX?: IStyle;\n\n  /**\n   * styles for callout y-content\n   */\n  calloutContentY?: IStyle;\n\n  /**\n   * styles for description message\n   */\n  descriptionMessage?: IStyle;\n\n  /**\n   * styles for callout Date time container\n   */\n  calloutDateTimeContainer?: IStyle;\n\n  /**\n   * styles for callout info container\n   */\n  calloutInfoContainer?: IStyle;\n\n  /**\n   * styles for callout block container\n   */\n  calloutBlockContainer?: IStyle;\n\n  /**\n   * styles for callout legend text\n   */\n  calloutlegendText?: IStyle;\n\n  /**\n   * styles for tooltip\n   */\n  tooltip?: IStyle;\n\n  /**\n   * styles for axis title\n   */\n  axisTitle?: IStyle;\n\n  /**\n   * styles for axis annotation\n   */\n  axisAnnotation?: IStyle;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle?: IStyle;\n\n  /**\n   * Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n   */\n  opacityChangeOnHover?: IStyle;\n\n  /**\n   * styles for the shape object in the callout\n   */\n  shapeStyles?: IStyle;\n\n  /**\n   * Styles for the chart wrapper div\n   */\n  chartWrapper?: IStyle;\n\n  /**\n   * Styles for the svg tooltip\n   */\n  svgTooltip?: IStyle;\n}\n\n/**\n * Cartesian Chart properties\n * {@docCategory CartesianChart}\n */\nexport interface ICartesianChartProps {\n  /**\n   * Below height used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  height?: number;\n\n  /**\n   * Below width used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  width?: number;\n\n  /**\n   * this prop takes its parent as a HTML element to define the width and height of the chart\n   */\n  parentRef?: HTMLElement | null;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * Margins for the chart\n   * @default `{ top: 20, bottom: 35, left: 40, right: 20 }`\n   * To avoid edge cuttings to the chart, we recommend you use default values or greater then default values\n   */\n  margins?: IMargins;\n\n  /** decides wether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Do not show tooltips in chart\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * this prop takes values that you want the chart to render on x-axis\n   * This is a optional parameter if not specified D3 will decide which values appear on the x-axis for you\n   * Please look at https://github.com/d3/d3-scale for more information on how D3 decides what data to appear on the axis of chart\n   */\n  tickValues?: number[] | Date[] | string[];\n\n  /**\n   * the format for the data on x-axis. For date object this can be specified to your requirement. Eg: '%m/%d', '%d'\n   * Please look at https://github.com/d3/d3-time-format for all the formats supported for date axis\n   * Only applicable for date axis. For y-axis format use yAxisTickFormat prop.\n   */\n  tickFormat?: string;\n\n  /**\n   * Width of line stroke\n   */\n  strokeWidth?: number;\n\n  /**\n   * x Axis labels tick padding. This defines the gap between tick labels and tick lines.\n   * @default 10\n   */\n  xAxisTickPadding?: number;\n\n  /**\n   * the format in for the data on y-axis. For data object this can be specified to your requirement.\n   *  Eg: d3.format(\".0%\")(0.123),d3.format(\"+20\")(42);\n   * Please look at https://github.com/d3/d3-format for all the formats supported\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yAxisTickFormat?: any;\n\n  /**\n   * Secondary y-scale options\n   * By default this is not defined, meaning there will be no secondary y-scale.\n   */\n  secondaryYScaleOptions?: {\n    /** Minimum value (0 by default) */\n    yMinValue?: number;\n    /** Maximum value (100 by default) */\n    yMaxValue?: number;\n  };\n\n  /**\n   * minimum  data value point in y-axis\n   */\n  yMinValue?: number;\n\n  /**\n   * maximum data value point in y-axis\n   */\n  yMaxValue?: number;\n\n  /**\n   * maximum data value point in x-axis\n   */\n  xMaxValue?: number;\n\n  /**\n   * Number of ticks on the y-axis.\n   * Tick count should be factor of difference between (yMinValue, yMaxValue)?\n   * @default 4\n   */\n  yAxisTickCount?: number;\n\n  /**\n   * defines the number of ticks on the x-axis. Tries to match the nearest interval satisfying the count.\n   * Does not work for string axis.\n   * @default 6\n   */\n  xAxisTickCount?: number;\n\n  /**\n   * define the size of the tick lines on the x-axis\n   * @default 10\n   */\n  xAxistickSize?: number;\n\n  /**\n   * defines the space between the tick line and the data label\n   * @default 10\n   */\n  tickPadding?: number;\n\n  /**\n   * Url that the data-viz needs to redirect to upon clicking on it\n   */\n  href?: string;\n\n  /**\n   * Label to apply to the whole chart.\n   * @deprecated - Use your chart label for the chart.\n   */\n  chartLabel?: string;\n\n  /**\n   * overflow props for the legends\n   */\n  legendsOverflowProps?: Partial<IOverflowSetProps>;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  legendsOverflowText?: any;\n\n  /**\n   * focus zone props in hover card for legends\n   */\n  focusZonePropsForLegendsInHoverCard?: IFocusZoneProps;\n\n  /**\n   * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n   */\n  enabledLegendsWrapLines?: boolean;\n\n  /*\n   * props for the legends in the chart\n   */\n  legendProps?: Partial<ILegendsProps>;\n\n  /**\n   *@default false\n   *Used for to elipse x axis labes and show tooltip on x axis labels\n   */\n  showXAxisLablesTooltip?: boolean;\n\n  /**\n   * @default 4\n   * Used for X axis labels\n   * While Giving showXAxisLablesTooltip prop, need to define after how many chars, we need to truncate the word.\n   */\n  noOfCharsToTruncate?: number;\n\n  /**\n   * @default false\n   * Used to wrap x axis labels values (whole value)\n   */\n  wrapXAxisLables?: boolean;\n\n  /**\n   * @default false\n   * Used to rotate x axis labels by 45 degrees\n   */\n  rotateXAxisLables?: boolean;\n\n  /**\n   * The prop used to define the date time localization options\n   */\n  dateLocalizeOptions?: Intl.DateTimeFormatOptions;\n\n  /**\n   * The prop used to define a custom locale for the date time format.\n   */\n  timeFormatLocale?: TimeLocaleDefinition;\n\n  /**\n   * The prop used to define a custom datetime formatter for date axis.\n   */\n  customDateTimeFormatter?: (dateTime: Date) => string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;\n\n  /**\n   * Callout customization props\n   */\n  calloutProps?: Partial<ICalloutProps>;\n\n  /**\n   * props for the svg; use this to include aria-* or other attributes on the tag\n   */\n  svgProps?: React.SVGProps<SVGSVGElement>;\n\n  /**\n   * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows\n   * @default True for LineChart but False for other charts\n   */\n  enableReflow?: boolean;\n\n  /**\n   * Prop to set the x axis title\n   * @default undefined\n   * Minimum bottom margin required for x axis title is 55px\n   */\n\n  xAxisTitle?: string;\n\n  /**\n   * Prop to set the y axis title\n   * @default undefined\n   * Minimum left margin required for y axis title is 60px and for RTL is 40px\n   * Minimum right margin required for y axis title is 40px and for RTL is 60px\n   */\n  yAxisTitle?: string;\n\n  /**\n   * Prop to set the secondary y axis title\n   * @default undefined\n   * If RTL is enabled, minimum left and right margins required for secondary y axis title is 60px\n   */\n  secondaryYAxistitle?: string;\n\n  /**\n   * Whether to use UTC time for axis scale, ticks, and the time display in callouts.\n   * When set to `true`, time is displayed equally, regardless of the user's timezone settings.\n   * @default true\n   */\n  useUTC?: boolean;\n\n  /**\n   * @default false\n   * Used for enabling negative values in Y axis.\n   */\n  supportNegativeData?: boolean;\n\n  /**\n   * @default false\n   * The prop used to decide rounded ticks on y axis\n   */\n  roundedTicks?: boolean;\n\n  /**\n   * Optional callback to access the IChart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: IRefObject<IChart>;\n\n  /**\n   * Determines whether overlapping x-axis tick labels should be hidden.\n   * @default false\n   */\n  hideTickOverlap?: boolean;\n\n  /**\n   * Prop to set the x axis annotation. Used to display additional information on the x-axis.\n   * This is shown on the top of the chart.\n   * @default undefined\n   */\n  xAxisAnnotation?: string;\n\n  /**\n   * Prop to set the y axis annotation. Used to display additional information on the y-axis.\n   * This is shown on the right side of the chart. Not shown if secondary y-axis is enabled.\n   * @default undefined\n   */\n  yAxisAnnotation?: string;\n\n  /**\n   * Specifies the ordering logic for categories (or string tick labels) on the x-axis.\n   * @default 'default'\n   */\n  xAxisCategoryOrder?: AxisCategoryOrder;\n\n  /**\n   * Specifies the ordering logic for categories (or string tick labels) on the y-axis.\n   * @default 'default'\n   */\n  yAxisCategoryOrder?: AxisCategoryOrder;\n}\n\nexport interface IYValueHover {\n  legend?: string;\n  y?: number | string;\n  color?: string;\n  data?: string | number;\n  shouldDrawBorderBottom?: boolean;\n  yAxisCalloutData?: string | { [id: string]: number };\n  index?: number;\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IChildProps {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  xScale?: any;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScalePrimary?: any;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScaleSecondary?: any;\n  containerHeight?: number;\n  containerWidth?: number;\n}\n\n// Only used for Cartesian chart base\nexport interface IModifiedCartesianChartProps extends ICartesianChartProps {\n  /**\n   * Define the chart title\n   */\n  chartTitle?: string;\n\n  /**\n   * Only used for Area chart\n   * Value used to draw y axis of that chart.\n   */\n  maxOfYVal?: number;\n\n  /**\n   * Data of the chart\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  points: any;\n\n  /**\n   * Define type of the chart\n   */\n  chartType: ChartTypes;\n\n  /** X axis type */\n  xAxisType: XAxisTypes;\n\n  /** Y axis type */\n  yAxisType?: YAxisType;\n\n  /**\n   * Legends of the chart.\n   */\n  legendBars: JSX.Element | null;\n\n  /**\n   * Callout props\n   */\n  calloutProps: Partial<ICalloutProps> & {\n    isCalloutVisible: boolean;\n    id: string;\n    YValueHover?: IYValueHover[];\n    hoverXValue?: string | number | null;\n    legend?: string;\n    color?: string;\n    YValue?: string | number;\n    XValue?: string;\n    descriptionMessage?: string;\n  };\n\n  /**\n   * Callback method used for to get margins to the chart.\n   */\n  getmargins?: (margins: IMargins) => void;\n\n  /**\n   * This is a call back method to the chart from cartesian chart.\n   * params are xScale, yScale, containerHeight, containerWidth. These values were used to draw the graph.\n   * It also contians an optional param xAxisElement - defines as x axis scale element.\n   * This param used to enable feature word wrap of Xaxis.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  getGraphData?: any;\n\n  /**\n   * Used for bar chart graphs.\n   * To define width of the bar\n   */\n  barwidth?: number;\n\n  /**\n   * Used for tick styles of the x axis of the chart\n   * Tick params are applicable for date axis only.\n   */\n  tickParams?: {\n    tickValues?: number[] | Date[] | string[];\n    tickFormat?: string;\n  };\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  xAxisPadding?: number;\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  yAxisPadding?: number;\n\n  /**\n   * Children elements specific to derived chart types.\n   */\n  children(props: IChildProps): React.ReactNode;\n\n  /**\n   * To enable callout for individualbar or complete stack. Using for only Vertical stacked bar chart.\n   * @default false\n   * @type \\{boolean \\}\n   */\n  isCalloutForStack?: boolean;\n\n  /** dataset values to find out domain of the String axis\n   * Present using for only vertical stacked bar chart and grouped vertical bar chart\n   */\n  datasetForXAxisDomain?: string[];\n\n  /** Own callout design */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  customizedCallout?: any;\n\n  /**\n   * if the data points for the y-axis is of type string, then we need to give this\n   * prop to construct the y-axis\n   */\n  stringDatasetForYAxisDomain?: string[];\n\n  /**\n   * Focus zone direction to the chart\n   * @default FocusZoneDirection.horizontal\n   */\n  focusZoneDirection?: FocusZoneDirection;\n\n  /**\n   * props to send into the chart hover card\n   */\n  chartHoverProps?: IChartHoverCardProps;\n\n  /**\n   * props to send to the focuszone\n   */\n  svgFocusZoneProps?: IFocusZoneProps;\n\n  /**\n   * The prop used to define the culture to localize the numbers and date\n   */\n  culture?: string;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  getAxisData?: any;\n\n  /**\n   * Callback method used when mouse leaves the chart boundary.\n   */\n  onChartMouseLeave?: () => void;\n\n  /** Callback method to get extra margins for domain */\n  getDomainMargins?: (containerWidth: number) => IMargins;\n\n  /** Callback method to get extra margins for Y-axis domain */\n  getYDomainMargins?: (containerHeight: number) => IMargins;\n\n  /** Padding between each bar/line-point */\n  xAxisInnerPadding?: number;\n\n  /** Padding before first bar/line-point and after last bar/line-point */\n  xAxisOuterPadding?: number;\n\n  /**\n   *@default false\n   *Used for to elipse y axis labes and show tooltip on x axis labels\n   */\n  showYAxisLablesTooltip?: boolean;\n\n  /**\n   *@default false\n   *Used for showing complete y axis lables   */\n  showYAxisLables?: boolean;\n\n  /**\n   * @default false\n   * Used to control the first render cycle Performance optimization code.\n   */\n  enableFirstRenderOptimization?: boolean;\n\n  /**\n   * Get the min and max values of the y-axis\n   */\n  getMinMaxOfYAxis: (\n    points:\n      | ILineChartPoints[]\n      | IHorizontalBarChartWithAxisDataPoint[]\n      | IVerticalBarChartDataPoint[]\n      | IDataPoint[]\n      | IScatterChartDataPoint[],\n    yAxisType: YAxisType | undefined,\n    useSecondaryYScale?: boolean,\n  ) => { startValue: number; endValue: number };\n\n  /**\n   * Create the y-axis\n   */\n  createYAxis: (\n    yAxisParams: IYAxisParams,\n    isRtl: boolean,\n    axisData: IAxisData,\n    isIntegralDataset: boolean,\n    useSecondaryYScale?: boolean,\n    supportNegativeData?: boolean,\n    roundedTicks?: boolean,\n  ) => ScaleLinear<number, number, never>;\n\n  /**\n   * Get the domain and range values\n   */\n  getDomainNRangeValues: (\n    points:\n      | ILineChartPoints[]\n      | IVerticalBarChartDataPoint[]\n      | IVerticalStackedBarDataPoint[]\n      | IHorizontalBarChartWithAxisDataPoint[]\n      | IGroupedVerticalBarChartData[]\n      | IHeatMapChartDataPoint[],\n    margins: IMargins,\n    width: number,\n    chartType: ChartTypes,\n    isRTL: boolean,\n    xAxisType: XAxisTypes,\n    barWidth: number,\n    tickValues: Date[] | number[] | string[] | undefined,\n    shiftX: number,\n  ) => IDomainNRange;\n\n  /**\n   * Create the string y-axis\n   */\n  createStringYAxis: (\n    yAxisParams: IYAxisParams,\n    dataPoints: string[],\n    isRtl: boolean,\n    barWidth: number | undefined,\n    chartType?: ChartTypes,\n  ) => ScaleBand<string>;\n\n  /**\n   * Callback to access the public methods and properties of the component.\n   */\n  ref?: IRefObject<IChart>;\n\n  /**\n   * Controls whether the numeric x-axis domain should be extended to start and end at nice rounded values.\n   * @default true\n   */\n  showRoundOffXTickValues?: boolean;\n}\n"]}

package/lib-amd/components/DeclarativeChart/DeclarativeChart.js

@@ -123,8 +123,11 @@ define(["require", "exports", "tslib", "react", "@fluentui/react", "../DonutChar
         catch (error) {
             throw new Error("Failed to decode plotly schema: ".concat(error));
         }
-        var plotlyInputWithValidData = tslib_1.__assign(tslib_1.__assign({}, plotlyInput), { data: chart.validTracesInfo.map(function (trace) { return plotlyInput.data[trace[0]]; }) });
-        var validTracesFilteredIndex = chart.validTracesInfo.map(function (trace, index) { return [index, trace[1]]; });
+        var plotlyInputWithValidData = tslib_1.__assign(tslib_1.__assign({}, plotlyInput), { data: chart.validTracesInfo.map(function (trace) { return plotlyInput.data[trace.index]; }) });
+        var validTracesFilteredIndex = chart.validTracesInfo.map(function (trace, index) { return ({
+            index: index,
+            type: trace.type,
+        }); });
         var selectedLegends = plotlySchema.selectedLegends;
         var colorMap = useColorMapping();
         var theme = (0, react_1.useTheme)();
@@ -183,23 +186,42 @@ define(["require", "exports", "tslib", "react", "@fluentui/react", "../DonutChar
             var cartesianProjection = (0, PlotlySchemaAdapter_1.projectPolarToCartesian)(plotlyInputWithValidData);
             plotlyInputWithValidData.data = cartesianProjection.data;
             validTracesFilteredIndex.forEach(function (trace, index) {
-                if (trace[1] === 'scatterpolar') {
-                    validTracesFilteredIndex[index][1] = 'line'; // Change type to line for rendering
+                if (trace.type === 'scatterpolar') {
+                    validTracesFilteredIndex[index].type = 'line'; // Change type to line for rendering
                 }
             });
         }
         var groupedTraces = {};
+        var nonCartesianTraceCount = 0;
         plotlyInputWithValidData.data.forEach(function (trace, index) {
             var _a;
-            var xAxisKey = (_a = trace.xaxis) !== null && _a !== void 0 ? _a : DEFAULT_XAXIS;
-            if (!groupedTraces[xAxisKey]) {
-                groupedTraces[xAxisKey] = [];
+            var traceKey = '';
+            if ((0, PlotlySchemaAdapter_1.isNonPlotType)(chart.validTracesInfo[index].type)) {
+                traceKey = "".concat(PlotlySchemaAdapter_1.NON_PLOT_KEY_PREFIX).concat(nonCartesianTraceCount + 1);
+                nonCartesianTraceCount++;
             }
-            groupedTraces[xAxisKey].push(index);
+            else {
+                traceKey = (_a = trace.xaxis) !== null && _a !== void 0 ? _a : DEFAULT_XAXIS;
+            }
+            if (!groupedTraces[traceKey]) {
+                groupedTraces[traceKey] = [];
+            }
+            groupedTraces[traceKey].push(index);
         });
         isMultiPlot.current = Object.keys(groupedTraces).length > 1;
-        var gridProperties = (0, PlotlySchemaAdapter_1.getGridProperties)(plotlyInputWithValidData.layout, isMultiPlot.current);
-        var allupLegendsProps = (0, PlotlySchemaAdapter_1.getAllupLegendsProps)(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme);
+        var gridProperties = (0, PlotlySchemaAdapter_1.getGridProperties)(plotlyInputWithValidData, isMultiPlot.current, chart.validTracesInfo);
+        // Render only one plot if the grid properties cannot determine positioning of multiple plots.
+        if (isMultiPlot.current &&
+            gridProperties.templateRows === PlotlySchemaAdapter_1.SINGLE_REPEAT &&
+            gridProperties.templateColumns === PlotlySchemaAdapter_1.SINGLE_REPEAT) {
+            Object.keys(groupedTraces).forEach(function (key, index) {
+                if (index > 0) {
+                    delete groupedTraces[key];
+                }
+            });
+            isMultiPlot.current = false;
+        }
+        var allupLegendsProps = (0, PlotlySchemaAdapter_1.getAllupLegendsProps)(plotlyInputWithValidData, colorMap, props.colorwayType, chart.validTracesInfo, isDarkTheme);
         // map through the grouped traces and render the appropriate chart
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { style: {
@@ -210,12 +232,12 @@ define(["require", "exports", "tslib", "react", "@fluentui/react", "../DonutChar
                 var _b, _c, _d;
                 var xAxisKey = _a[0], index = _a[1];
                 var plotlyInputForGroup = tslib_1.__assign(tslib_1.__assign({}, plotlyInputWithValidData), { data: index.map(function (idx) { return plotlyInputWithValidData.data[idx]; }) });
-                var filteredTracesInfo = validTracesFilteredIndex.filter(function (trace) { return index.includes(trace[0]); });
-                var chartType = validTracesFilteredIndex.some(function (trace) { return trace[1] === FALLBACK_TYPE; }) || chart.type === FALLBACK_TYPE
+                var filteredTracesInfo = validTracesFilteredIndex.filter(function (trace) { return index.includes(trace.index); });
+                var chartType = validTracesFilteredIndex.some(function (trace) { return trace.type === FALLBACK_TYPE; }) || chart.type === FALLBACK_TYPE
                     ? FALLBACK_TYPE
-                    : filteredTracesInfo[0][1];
-                if (validTracesFilteredIndex.some(function (trace) { return trace[1] === 'line'; }) &&
-                    validTracesFilteredIndex.some(function (trace) { return trace[1] === 'scatter'; })) {
+                    : filteredTracesInfo[0].type;
+                if (validTracesFilteredIndex.some(function (trace) { return trace.type === 'line'; }) &&
+                    validTracesFilteredIndex.some(function (trace) { return trace.type === 'scatter'; })) {
                     chartType = 'line';
                 }
                 var chartEntry = chartMap[chartType];

package/lib-amd/components/DeclarativeChart/DeclarativeChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/DeclarativeChart.tsx"],"names":[],"mappings":";;;;IA4CA,IAAM,oBAAoB,GAAG,IAAA,iDAAuB,EAAC,kBAAU,CAAC,CAAC;IACjE,IAAM,iCAAiC,GAAG,IAAA,iDAAuB,EAAC,+BAAuB,CAAC,CAAC;IAC3F,IAAM,mBAAmB,GAAG,IAAA,iDAAuB,EAAC,iBAAS,CAAC,CAAC;IAC/D,IAAM,oCAAoC,GAAG,IAAA,iDAAuB,EAAC,kCAA0B,CAAC,CAAC;IACjG,IAAM,mBAAmB,GAAG,IAAA,iDAAuB,EAAC,iBAAS,CAAC,CAAC;IAC/D,IAAM,sBAAsB,GAAG,IAAA,iDAAuB,EAAC,oBAAY,CAAC,CAAC;IACrE,IAAM,qBAAqB,GAAG,IAAA,iDAAuB,EAAC,yBAAW,CAAC,CAAC;IACnE,IAAM,oBAAoB,GAAG,IAAA,iDAAuB,EAAC,kBAAU,CAAC,CAAC;IACjE,IAAM,iCAAiC,GAAG,IAAA,iDAAuB,EAAC,+BAAuB,CAAC,CAAC;IAC3F,IAAM,0BAA0B,GAAG,IAAA,iDAAuB,EAAC,wBAAgB,CAAC,CAAC;IAC7E,IAAM,sBAAsB,GAAG,IAAA,iDAAuB,EAAC,qBAAY,CAAC,CAAC;IACrE,IAAM,oBAAoB,GAAG,IAAA,iDAAuB,EAAC,mBAAU,CAAC,CAAC;IAEjE,kHAAkH;IAClH,IAAM,aAAa,GAAG,GAAG,CAAC;IAC1B,IAAM,aAAa,GAAG,UAAU,CAAC;IAoDjC,IAAM,eAAe,GAAG;QACtB,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,EAAkB,CAAC,CAAC;QACzD,OAAO,QAAQ,CAAC;IAClB,CAAC,CAAC;IAEF,SAAS,WAAW,CAClB,QAAqC;IACrC,8DAA8D;IAC9D,WAAuC;IACvC,8DAA8D;IAC9D,eAAsB,EACtB,WAA4B,EAC5B,OAAe,EACf,UAAkB;QAElB,IAAM,UAAU,GAAG,WAAW,eAAI,eAAe,CAAC,CAAC;QACnD,OAAO,CACL,6BACE,GAAG,EAAE,UAAG,OAAO,cAAI,UAAU,CAAE,EAC/B,KAAK,EAAE;gBACL,YAAY,EAAE,OAAO;gBACrB,UAAU,EAAE,OAAO,GAAG,CAAC;gBACvB,eAAe,EAAE,UAAU;gBAC3B,aAAa,EAAE,UAAU,GAAG,CAAC;aAC9B;YAED,oBAAC,QAAQ,uBAAK,UAAU,EAAM,WAAW,EAAI,CACzC,CACP,CAAC;IACJ,CAAC;IAOD,IAAM,sBAAsB,GAAG,UAAC,WAAyB;QACvD,IAAM,OAAO,GAAI,WAAW,CAAC,IAAI,CAAC,CAAC,CAAc,CAAC,CAAC,CAAC;QACpD,IAAM,QAAQ,GAAG,IAAA,8BAAY,EAAC,OAAO,CAAC,CAAC;QACvC,IAAI,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC;QAClC,IAAI,QAAQ,EAAE,CAAC;YACb,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,UAAC,SAAmB,IAAK,OAAA,uCACtD,SAAS,KACZ,CAAC,EAAE,IAAA,sCAAgB,EAAC,SAAS,CAAC,CAAC,CAAC,IAChC,EAHyD,CAGzD,CAAC,CAAC;QACN,CAAC;QACD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;IAC1D,CAAC,CAAC;IAyDF,IAAM,QAAQ,GAAiB;QAC7B,0BAA0B;QAC1B,KAAK,EAAE;YACL,WAAW,EAAE,qDAA+B;YAC5C,QAAQ,EAAE,oBAAoB;SAC/B;QACD,6BAA6B;QAC7B,MAAM,EAAE;YACN,WAAW,EAAE,sDAAgC;YAC7C,QAAQ,EAAE,qBAAqB;SAChC;QACD,4BAA4B;QAC5B,KAAK,EAAE;YACL,WAAW,EAAE,0DAAoC;YACjD,QAAQ,EAAE,oBAAoB;SAC/B;QACD,2BAA2B;QAC3B,aAAa,EAAE;YACb,WAAW,EAAE,qEAA+C;YAC5D,QAAQ,EAAE,oCAAoC;SAC/C;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,oDAA8B;YAC3C,QAAQ,EAAE,iCAAiC;SAC5C;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,oDAA8B;YAC3C,QAAQ,EAAE,iCAAiC;SAC5C;QACD,OAAO,EAAE;YACP,WAAW,EAAE,uDAAiC;YAC9C,QAAQ,EAAE,sBAAsB;SACjC;QACD,KAAK,EAAE;YACL,WAAW,EAAE,qDAA+B;YAC5C,QAAQ,EAAE,oBAAoB;SAC/B;QACD,WAAW,EAAE;YACX,WAAW,EAAE,mDAA6B;YAC1C,QAAQ,EAAE,0BAA0B;SACrC;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,yDAAmC;YAChD,QAAQ,EAAE,mBAAmB;YAC7B,qBAAqB,EAAE,sBAAsB;SAC9C;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,yDAAmC;YAChD,QAAQ,EAAE,mBAAmB;YAC7B,qBAAqB,EAAE,sBAAsB;SAC9C;QACD,OAAO,EAAE;YACP,WAAW,EAAE,4DAAsC;YACnD,QAAQ,EAAE,sBAAsB;YAChC,qBAAqB,EAAE,sBAAsB;SAC9C;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,oDAA8B;YAC3C,QAAQ,EAAE,iCAAiC;SAC5C;KACF,CAAC;IAEF;;;OAGG;IACU,QAAA,gBAAgB,GAAmD,KAAK,CAAC,UAAU,CAG9F,UAAC,KAAK,EAAE,YAAY;;QACZ,IAAA,YAAY,GAAK,IAAA,8BAAY,EAAC,KAAK,CAAC,WAAW,CAAC,aAApC,CAAqC;QACzD,IAAM,KAAK,GAAoB,IAAA,gCAAc,EAAC,YAAY,CAAC,CAAC;QAC5D,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;YACnB,MAAM,IAAI,KAAK,CAAC,gCAAyB,KAAK,CAAC,YAAY,CAAE,CAAC,CAAC;QACjE,CAAC;QACD,IAAI,WAAW,GAAG,YAA4B,CAAC;QAC/C,IAAI,CAAC;YACH,WAAW,GAAG,IAAA,oCAAkB,EAAC,WAAW,CAAC,CAAC;QAChD,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,MAAM,IAAI,KAAK,CAAC,0CAAmC,KAAK,CAAE,CAAC,CAAC;QAC9D,CAAC;QACD,IAAM,wBAAwB,yCACzB,WAAW,KACd,IAAI,EAAE,KAAK,CAAC,eAAgB,CAAC,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAA1B,CAA0B,CAAC,GACtE,CAAC;QAEF,IAAM,wBAAwB,GAAuB,KAAK,CAAC,eAAgB,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,OAAA,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,EAAjB,CAAiB,CAAC,CAAC;QAE/G,IAAA,eAAe,GAAK,YAAY,gBAAjB,CAAkB;QACvC,IAAM,QAAQ,GAAG,eAAe,EAAE,CAAC;QACnC,IAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;QACzB,IAAM,WAAW,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,mCAAI,KAAK,CAAC;QAC/C,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAS,IAAI,CAAC,CAAC;QAC5C,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAExC,IAAI,CAAC,IAAA,qCAAmB,EAAC,eAAe,CAAC,EAAE,CAAC;YAC1C,eAAe,GAAG,EAAE,CAAC;QACvB,CAAC;QAEK,IAAA,KAAoC,KAAK,CAAC,QAAQ,CAAW,eAAe,CAAC,EAA5E,aAAa,QAAA,EAAE,gBAAgB,QAA6C,CAAC;QACpF,IAAM,qBAAqB,GAAG,UAAC,IAAc;YAC3C,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;gBACzB,KAAK,CAAC,cAAc,CAAC,EAAE,YAAY,EAAE,EAAE,WAAW,aAAA,EAAE,eAAe,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;YACjF,CAAC;QACH,CAAC,CAAC;QAEF,KAAK,CAAC,SAAS,CAAC;YACd,wDAAwD;YAChD,IAAA,YAAY,GAAK,IAAA,8BAAY,EAAC,KAAK,CAAC,WAAW,CAAC,aAApC,CAAqC;YACzD,wDAAwD;YAChD,IAAA,eAAe,GAAK,YAAY,gBAAjB,CAAkB;YACzC,gBAAgB,CAAC,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,EAAE,CAAC,CAAC;QAC1C,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;QAExB,IAAM,sBAAsB,GAAG;YAC7B,wBAAwB,EAAE,IAAI;YAC9B,QAAQ,EAAE,qBAAqB;YAC/B,eAAe,EAAE,aAAa;SAC/B,CAAC;QAEF,IAAM,WAAW,GAAG;YAClB,WAAW,EAAE,sBAAsB;YACnC,YAAY,EAAE,QAAQ;YACtB,YAAY,EAAE,EAAE,UAAU,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,EAAE;SAC7D,CAAC;QAEF,SAAS,aAAa,CAAC,WAA0B;YAC/C,6CAA6C;YAC7C,OAAO,oBAAC,gBAAO,uBAAK,WAAW,IAAE,eAAe,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,IAAI,CAAC;QACvG,CAAC;QAED,IAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACrC,UAAC,IAA0B;YACzB,OAAO,IAAI,OAAO,CAAC,UAAC,OAAO,EAAE,MAAM;gBACjC,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;oBACxB,OAAO,MAAM,CAAC,KAAK,CAAC,uDAAuD,CAAC,CAAC,CAAC;gBAChF,CAAC;gBACD,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,OAAO,QAAQ,CAAC,OAAO,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;oBACxE,OAAO,MAAM,CAAC,KAAK,CAAC,mCAAmC,CAAC,CAAC,CAAC;gBAC5D,CAAC;gBAED,QAAQ,CAAC,OAAO;qBACb,OAAO,oBACN,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,EAC/C,KAAK,EAAE,CAAC,IACL,IAAI,EACP;qBACD,IAAI,CAAC,OAAO,CAAC;qBACb,KAAK,CAAC,MAAM,CAAC,CAAC;YACnB,CAAC,CAAC,CAAC;QACL,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;QAEF,KAAK,CAAC,mBAAmB,CACvB,KAAK,CAAC,YAAY,EAClB,cAAM,OAAA,CAAC;YACL,aAAa,eAAA;SACd,CAAC,EAFI,CAEJ,EACF,CAAC,aAAa,CAAC,CAChB,CAAC;QAEF,IAAI,KAAK,CAAC,IAAI,KAAK,cAAc,EAAE,CAAC;YAClC,IAAM,mBAAmB,GAAG,IAAA,6CAAuB,EAAC,wBAAwB,CAAC,CAAC;YAC9E,wBAAwB,CAAC,IAAI,GAAG,mBAAmB,CAAC,IAAI,CAAC;YACzD,wBAAwB,CAAC,OAAO,CAAC,UAAC,KAAK,EAAE,KAAK;gBAC5C,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,cAAc,EAAE,CAAC;oBAChC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,oCAAoC;gBACnF,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QAED,IAAM,aAAa,GAA6B,EAAE,CAAC;QACnD,wBAAwB,CAAC,IAAI,CAAC,OAAO,CAAC,UAAC,KAAwB,EAAE,KAAK;;YACpE,IAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,aAAa,CAAC;YAC9C,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC7B,aAAa,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC;YAC/B,CAAC;YACD,aAAa,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;QAEH,WAAW,CAAC,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QAC5D,IAAM,cAAc,GAAmB,IAAA,uCAAiB,EAAC,wBAAwB,CAAC,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QAE/G,IAAM,iBAAiB,GAAG,IAAA,0CAAoB,EAAC,wBAAwB,EAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;QAGpH,kEAAkE;QAClE,OAAO,CACL;YACE,6BACE,KAAK,EAAE;oBACL,OAAO,EAAE,MAAM;oBACf,gBAAgB,EAAE,cAAc,CAAC,YAAY;oBAC7C,mBAAmB,EAAE,cAAc,CAAC,eAAe;iBACpD,IAEA,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,UAAC,EAAiB;;oBAAhB,QAAQ,QAAA,EAAE,KAAK,QAAA;gBAClD,IAAM,mBAAmB,yCACpB,wBAAwB,KAC3B,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,UAAA,GAAG,IAAI,OAAA,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,EAAlC,CAAkC,CAAC,GAC3D,CAAC;gBAEF,IAAM,kBAAkB,GAAG,wBAAwB,CAAC,MAAM,CAAC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAxB,CAAwB,CAAC,CAAC;gBAC9F,IAAI,SAAS,GACX,wBAAwB,CAAC,IAAI,CAAC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,CAAC,CAAC,KAAK,aAAa,EAA1B,CAA0B,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa;oBAChG,CAAC,CAAC,aAAa;oBACf,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAE/B,IACE,wBAAwB,CAAC,IAAI,CAAC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,CAAC,CAAC,KAAK,MAAM,EAAnB,CAAmB,CAAC;oBAC3D,wBAAwB,CAAC,IAAI,CAAC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,CAAC,CAAC,KAAK,SAAS,EAAtB,CAAsB,CAAC,EAC9D,CAAC;oBACD,SAAS,GAAG,MAAM,CAAC;gBACrB,CAAC;gBAED,IAAM,UAAU,GAAG,QAAQ,CAAC,SAAsB,CAAC,CAAC;gBACpD,IAAI,UAAU,EAAE,CAAC;oBACP,IAAA,WAAW,GAA6D,UAAU,YAAvE,EAAE,QAAQ,GAAmD,UAAU,SAA7D,EAAE,qBAAqB,GAA4B,UAAU,sBAAtC,EAAE,qBAAqB,GAAK,UAAU,sBAAf,CAAgB;oBAC3F,IAAI,qBAAqB,KAAK,SAAS,IAAI,qBAAqB,CAAC,mBAAmB,CAAC,EAAE,CAAC;wBACtF,IAAM,gBAAgB,GAAG,qBAAqB;4BAC5C,CAAC,CAAC,qBAAqB,CAAC,mBAAmB,CAAC;4BAC5C,CAAC,CAAC,mBAAmB,CAAC;wBACxB,IAAM,cAAc,GAAG,cAAc,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;wBAEvD,OAAO,WAAW,CAChB,QAAQ,EACR,WAAW,EACX,CAAC,gBAAgB,EAAE,WAAW,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,WAAW,CAAC,wCAE7E,WAAW,KACd,eAAe,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,EAC5C,eAAe,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,KAE9C,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,GAAG,mCAAI,CAAC,EACxB,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,MAAM,mCAAI,CAAC,CAC5B,CAAC;oBACJ,CAAC;oBACD,OAAO,yCAAK,CAAC;gBACf,CAAC;qBAAM,CAAC;oBACN,MAAM,IAAI,KAAK,CAAC,kCAA2B,MAAA,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC,0CAAE,IAAI,CAAE,CAAC,CAAC;gBAClF,CAAC;YACH,CAAC,CAAC,CACE;YACL,WAAW,CAAC,OAAO,IAAI,aAAa,CAAC,iBAAiB,CAAC,CACvD,CACJ,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,wBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;IAClD,wBAAgB,CAAC,YAAY,GAAG;QAC9B,YAAY,EAAE,SAAS;KACxB,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport { useTheme } from '@fluentui/react';\nimport { IRefObject } from '@fluentui/react/lib/Utilities';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { decodeBase64Fields } from '@fluentui/chart-utilities';\nimport type { PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray, isMonthArray, mapFluentChart, sanitizeJson } from '@fluentui/chart-utilities';\n\nimport type { GridProperties } from './PlotlySchemaAdapter';\nimport {\n  correctYearMonth,\n  getGridProperties,\n  transformPlotlyJsonToDonutProps,\n  transformPlotlyJsonToVSBCProps,\n  transformPlotlyJsonToAreaChartProps,\n  transformPlotlyJsonToLineChartProps,\n  transformPlotlyJsonToHorizontalBarWithAxisProps,\n  transformPlotlyJsonToHeatmapProps,\n  transformPlotlyJsonToSankeyProps,\n  transformPlotlyJsonToGaugeProps,\n  transformPlotlyJsonToGVBCProps,\n  transformPlotlyJsonToVBCProps,\n  transformPlotlyJsonToChartTableProps,\n  transformPlotlyJsonToScatterChartProps,\n  projectPolarToCartesian,\n  getAllupLegendsProps,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ScatterChart } from '../ScatterChart/index';\nimport { ChartTable } from '../ChartTable/index';\nimport { ILegendsProps, Legends } from '../Legends/index';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\nconst ResponsiveChartTable = withResponsiveContainer(ChartTable);\n\n// Default x-axis key for grouping traces. Also applicable for PieData and SankeyData where x-axis is not defined.\nconst DEFAULT_XAXIS = 'x';\nconst FALLBACK_TYPE = 'fallback';\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n  /**\n   * Plotly schema represented as JSON object\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  plotlySchema: any;\n}\n\n/**\n * DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n */\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n  /**\n   * The schema representing the chart data, layout and configuration\n   */\n  chartSchema: Schema;\n\n  /**\n   * Callback when an event occurs\n   */\n  onSchemaChange?: (eventData: Schema) => void;\n\n  /**\n   * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: IRefObject<IDeclarativeChart>;\n\n  /**\n   * Optional prop to specify the colorway type of the chart.\n   * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n   * - 'builtin': Use Fluent UI colorway.\n   * - 'others': Reserved for future colorways.\n   * @default 'default'\n   */\n  colorwayType?: ColorwayType;\n}\n\n/**\n * {@docCategory DeclarativeChart}\n */\nexport interface IDeclarativeChart {\n  exportAsImage: (opts?: IImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n  const colorMap = React.useRef(new Map<string, string>());\n  return colorMap;\n};\n\nfunction renderChart<TProps>(\n  Renderer: React.ComponentType<TProps>,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  transformer: (...args: any[]) => TProps,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  transformerArgs: any[],\n  commonProps: Partial<TProps>,\n  cellRow: number,\n  cellColumn: number,\n): JSX.Element {\n  const chartProps = transformer(...transformerArgs);\n  return (\n    <div\n      key={`${cellRow}_${cellColumn}`}\n      style={{\n        gridRowStart: cellRow,\n        gridRowEnd: cellRow + 1,\n        gridColumnStart: cellColumn,\n        gridColumnEnd: cellColumn + 1,\n      }}\n    >\n      <Renderer {...chartProps} {...commonProps} />\n    </div>\n  );\n}\n\ntype PreTransformHooks = {\n  preTransformCondition?: (plotlySchema: PlotlySchema) => boolean;\n  preTransformOperation?: (plotlySchema: PlotlySchema) => PlotlySchema;\n};\n\nconst LineAreaPreTransformOp = (plotlyInput: PlotlySchema) => {\n  const xValues = (plotlyInput.data[0] as PlotData).x;\n  const isXMonth = isMonthArray(xValues);\n  let renderData = plotlyInput.data;\n  if (isXMonth) {\n    renderData = plotlyInput.data.map((dataPoint: PlotData) => ({\n      ...dataPoint,\n      x: correctYearMonth(dataPoint.x),\n    }));\n  }\n  return { data: renderData, layout: plotlyInput.layout };\n};\n\ntype ChartTypeMap = {\n  donut: {\n    transformer: typeof transformPlotlyJsonToDonutProps;\n    renderer: typeof ResponsiveDonutChart;\n  } & PreTransformHooks;\n  sankey: {\n    transformer: typeof transformPlotlyJsonToSankeyProps;\n    renderer: typeof ResponsiveSankeyChart;\n  } & PreTransformHooks;\n  table: {\n    transformer: typeof transformPlotlyJsonToChartTableProps;\n    renderer: typeof ResponsiveChartTable;\n  } & PreTransformHooks;\n  horizontalbar: {\n    transformer: typeof transformPlotlyJsonToHorizontalBarWithAxisProps;\n    renderer: typeof ResponsiveHorizontalBarChartWithAxis;\n  } & PreTransformHooks;\n  groupedverticalbar: {\n    transformer: typeof transformPlotlyJsonToGVBCProps;\n    renderer: typeof ResponsiveGroupedVerticalBarChart;\n  } & PreTransformHooks;\n  verticalstackedbar: {\n    transformer: typeof transformPlotlyJsonToVSBCProps;\n    renderer: typeof ResponsiveVerticalStackedBarChart;\n  } & PreTransformHooks;\n  heatmap: {\n    transformer: typeof transformPlotlyJsonToHeatmapProps;\n    renderer: typeof ResponsiveHeatMapChart;\n  } & PreTransformHooks;\n  gauge: {\n    transformer: typeof transformPlotlyJsonToGaugeProps;\n    renderer: typeof ResponsiveGaugeChart;\n  } & PreTransformHooks;\n  verticalbar: {\n    transformer: typeof transformPlotlyJsonToVBCProps;\n    renderer: typeof ResponsiveVerticalBarChart;\n  } & PreTransformHooks;\n  area: {\n    transformer: typeof transformPlotlyJsonToAreaChartProps;\n    renderer: typeof ResponsiveAreaChart;\n  } & PreTransformHooks;\n  line: {\n    transformer: typeof transformPlotlyJsonToLineChartProps;\n    renderer: typeof ResponsiveLineChart;\n  } & PreTransformHooks;\n  scatter: {\n    transformer: typeof transformPlotlyJsonToScatterChartProps;\n    renderer: typeof ResponsiveScatterChart;\n  } & PreTransformHooks;\n  fallback: {\n    transformer: typeof transformPlotlyJsonToVSBCProps;\n    renderer: typeof ResponsiveVerticalStackedBarChart;\n  } & PreTransformHooks;\n};\n\nconst chartMap: ChartTypeMap = {\n  // PieData category charts\n  donut: {\n    transformer: transformPlotlyJsonToDonutProps,\n    renderer: ResponsiveDonutChart,\n  },\n  // SankeyData category charts\n  sankey: {\n    transformer: transformPlotlyJsonToSankeyProps,\n    renderer: ResponsiveSankeyChart,\n  },\n  // TableData category charts\n  table: {\n    transformer: transformPlotlyJsonToChartTableProps,\n    renderer: ResponsiveChartTable,\n  },\n  // PlotData category charts\n  horizontalbar: {\n    transformer: transformPlotlyJsonToHorizontalBarWithAxisProps,\n    renderer: ResponsiveHorizontalBarChartWithAxis,\n  },\n  groupedverticalbar: {\n    transformer: transformPlotlyJsonToGVBCProps,\n    renderer: ResponsiveGroupedVerticalBarChart,\n  },\n  verticalstackedbar: {\n    transformer: transformPlotlyJsonToVSBCProps,\n    renderer: ResponsiveVerticalStackedBarChart,\n  },\n  heatmap: {\n    transformer: transformPlotlyJsonToHeatmapProps,\n    renderer: ResponsiveHeatMapChart,\n  },\n  gauge: {\n    transformer: transformPlotlyJsonToGaugeProps,\n    renderer: ResponsiveGaugeChart,\n  },\n  verticalbar: {\n    transformer: transformPlotlyJsonToVBCProps,\n    renderer: ResponsiveVerticalBarChart,\n  },\n  area: {\n    transformer: transformPlotlyJsonToAreaChartProps,\n    renderer: ResponsiveAreaChart,\n    preTransformOperation: LineAreaPreTransformOp,\n  },\n  line: {\n    transformer: transformPlotlyJsonToLineChartProps,\n    renderer: ResponsiveLineChart,\n    preTransformOperation: LineAreaPreTransformOp,\n  },\n  scatter: {\n    transformer: transformPlotlyJsonToScatterChartProps,\n    renderer: ResponsiveScatterChart,\n    preTransformOperation: LineAreaPreTransformOp,\n  },\n  fallback: {\n    transformer: transformPlotlyJsonToVSBCProps,\n    renderer: ResponsiveVerticalStackedBarChart,\n  },\n};\n\n/**\n * DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n  HTMLDivElement,\n  DeclarativeChartProps\n>((props, forwardedRef) => {\n  const { plotlySchema } = sanitizeJson(props.chartSchema);\n  const chart: OutputChartType = mapFluentChart(plotlySchema);\n  if (!chart.isValid) {\n    throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n  }\n  let plotlyInput = plotlySchema as PlotlySchema;\n  try {\n    plotlyInput = decodeBase64Fields(plotlyInput);\n  } catch (error) {\n    throw new Error(`Failed to decode plotly schema: ${error}`);\n  }\n  const plotlyInputWithValidData: PlotlySchema = {\n    ...plotlyInput,\n    data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace[0]]),\n  };\n\n  const validTracesFilteredIndex: [number, string][] = chart.validTracesInfo!.map((trace, index) => [index, trace[1]]);\n\n  let { selectedLegends } = plotlySchema;\n  const colorMap = useColorMapping();\n  const theme = useTheme();\n  const isDarkTheme = theme?.isInverted ?? false;\n  const chartRef = React.useRef<IChart>(null);\n  const isMultiPlot = React.useRef(false);\n\n  if (!isArrayOrTypedArray(selectedLegends)) {\n    selectedLegends = [];\n  }\n\n  const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n  const onActiveLegendsChange = (keys: string[]) => {\n    setActiveLegends(keys);\n    if (props.onSchemaChange) {\n      props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n    }\n  };\n\n  React.useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-shadow\n    const { plotlySchema } = sanitizeJson(props.chartSchema);\n    // eslint-disable-next-line @typescript-eslint/no-shadow\n    const { selectedLegends } = plotlySchema;\n    setActiveLegends(selectedLegends ?? []);\n  }, [props.chartSchema]);\n\n  const multiSelectLegendProps = {\n    canSelectMultipleLegends: true,\n    onChange: onActiveLegendsChange,\n    selectedLegends: activeLegends,\n  };\n\n  const commonProps = {\n    legendProps: multiSelectLegendProps,\n    componentRef: chartRef,\n    calloutProps: { layerProps: { eventBubblingEnabled: true } },\n  };\n\n  function createLegends(legendProps: ILegendsProps): JSX.Element {\n    // eslint-disable-next-line react/jsx-no-bind\n    return <Legends {...legendProps} selectedLegends={activeLegends} onChange={onActiveLegendsChange} />;\n  }\n\n  const exportAsImage = React.useCallback(\n    (opts?: IImageExportOptions): Promise<string> => {\n      return new Promise((resolve, reject) => {\n        if (isMultiPlot.current) {\n          return reject(Error('Exporting multi plot charts as image is not supported'));\n        }\n        if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {\n          return reject(Error('Chart cannot be exported as image'));\n        }\n\n        chartRef.current\n          .toImage({\n            background: theme.semanticColors.bodyBackground,\n            scale: 5,\n            ...opts,\n          })\n          .then(resolve)\n          .catch(reject);\n      });\n    },\n    [theme],\n  );\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      exportAsImage,\n    }),\n    [exportAsImage],\n  );\n\n  if (chart.type === 'scatterpolar') {\n    const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n    plotlyInputWithValidData.data = cartesianProjection.data;\n    validTracesFilteredIndex.forEach((trace, index) => {\n      if (trace[1] === 'scatterpolar') {\n        validTracesFilteredIndex[index][1] = 'line'; // Change type to line for rendering\n      }\n    });\n  }\n\n  const groupedTraces: Record<string, number[]> = {};\n  plotlyInputWithValidData.data.forEach((trace: Partial<PlotData>, index) => {\n    const xAxisKey = trace.xaxis ?? DEFAULT_XAXIS;\n    if (!groupedTraces[xAxisKey]) {\n      groupedTraces[xAxisKey] = [];\n    }\n    groupedTraces[xAxisKey].push(index);\n  });\n\n  isMultiPlot.current = Object.keys(groupedTraces).length > 1;\n  const gridProperties: GridProperties = getGridProperties(plotlyInputWithValidData.layout, isMultiPlot.current);\n\n  const allupLegendsProps = getAllupLegendsProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme);\n\n  type ChartType = keyof ChartTypeMap;\n  // map through the grouped traces and render the appropriate chart\n  return (\n    <>\n      <div\n        style={{\n          display: 'grid',\n          gridTemplateRows: gridProperties.templateRows,\n          gridTemplateColumns: gridProperties.templateColumns,\n        }}\n      >\n        {Object.entries(groupedTraces).map(([xAxisKey, index]) => {\n          const plotlyInputForGroup: PlotlySchema = {\n            ...plotlyInputWithValidData,\n            data: index.map(idx => plotlyInputWithValidData.data[idx]),\n          };\n\n          const filteredTracesInfo = validTracesFilteredIndex.filter(trace => index.includes(trace[0]));\n          let chartType =\n            validTracesFilteredIndex.some(trace => trace[1] === FALLBACK_TYPE) || chart.type === FALLBACK_TYPE\n              ? FALLBACK_TYPE\n              : filteredTracesInfo[0][1];\n\n          if (\n            validTracesFilteredIndex.some(trace => trace[1] === 'line') &&\n            validTracesFilteredIndex.some(trace => trace[1] === 'scatter')\n          ) {\n            chartType = 'line';\n          }\n\n          const chartEntry = chartMap[chartType as ChartType];\n          if (chartEntry) {\n            const { transformer, renderer, preTransformCondition, preTransformOperation } = chartEntry;\n            if (preTransformCondition === undefined || preTransformCondition(plotlyInputForGroup)) {\n              const transformedInput = preTransformOperation\n                ? preTransformOperation(plotlyInputForGroup)\n                : plotlyInputForGroup;\n              const cellProperties = gridProperties.layout[xAxisKey];\n\n              return renderChart<ReturnType<typeof transformer>>(\n                renderer,\n                transformer,\n                [transformedInput, isMultiPlot.current, colorMap, props.colorwayType, isDarkTheme],\n                {\n                  ...commonProps,\n                  xAxisAnnotation: cellProperties?.xAnnotation,\n                  yAxisAnnotation: cellProperties?.yAnnotation,\n                },\n                cellProperties?.row ?? 1,\n                cellProperties?.column ?? 1,\n              );\n            }\n            return <></>;\n          } else {\n            throw new Error(`Unsupported chart type :${plotlyInputForGroup.data[0]?.type}`);\n          }\n        })}\n      </div>\n      {isMultiPlot.current && createLegends(allupLegendsProps)}\n    </>\n  );\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\nDeclarativeChart.defaultProps = {\n  colorwayType: 'default',\n};\n"]}
+{"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/DeclarativeChart.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport { useTheme } from '@fluentui/react';\nimport { IRefObject } from '@fluentui/react/lib/Utilities';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { decodeBase64Fields } from '@fluentui/chart-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType, TraceInfo } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray, isMonthArray, mapFluentChart, sanitizeJson } from '@fluentui/chart-utilities';\n\nimport type { GridProperties } from './PlotlySchemaAdapter';\nimport {\n  correctYearMonth,\n  getGridProperties,\n  isNonPlotType,\n  transformPlotlyJsonToDonutProps,\n  transformPlotlyJsonToVSBCProps,\n  transformPlotlyJsonToAreaChartProps,\n  transformPlotlyJsonToLineChartProps,\n  transformPlotlyJsonToHorizontalBarWithAxisProps,\n  transformPlotlyJsonToHeatmapProps,\n  transformPlotlyJsonToSankeyProps,\n  transformPlotlyJsonToGaugeProps,\n  transformPlotlyJsonToGVBCProps,\n  transformPlotlyJsonToVBCProps,\n  transformPlotlyJsonToChartTableProps,\n  transformPlotlyJsonToScatterChartProps,\n  projectPolarToCartesian,\n  getAllupLegendsProps,\n  NON_PLOT_KEY_PREFIX,\n  SINGLE_REPEAT,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ScatterChart } from '../ScatterChart/index';\nimport { ChartTable } from '../ChartTable/index';\nimport { ILegendsProps, Legends } from '../Legends/index';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\nconst ResponsiveChartTable = withResponsiveContainer(ChartTable);\n\n// Default x-axis key for grouping traces. Also applicable for PieData and SankeyData where x-axis is not defined.\nconst DEFAULT_XAXIS = 'x';\nconst FALLBACK_TYPE = 'fallback';\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n  /**\n   * Plotly schema represented as JSON object\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  plotlySchema: any;\n}\n\n/**\n * DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n */\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n  /**\n   * The schema representing the chart data, layout and configuration\n   */\n  chartSchema: Schema;\n\n  /**\n   * Callback when an event occurs\n   */\n  onSchemaChange?: (eventData: Schema) => void;\n\n  /**\n   * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: IRefObject<IDeclarativeChart>;\n\n  /**\n   * Optional prop to specify the colorway type of the chart.\n   * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n   * - 'builtin': Use Fluent UI colorway.\n   * - 'others': Reserved for future colorways.\n   * @default 'default'\n   */\n  colorwayType?: ColorwayType;\n}\n\n/**\n * {@docCategory DeclarativeChart}\n */\nexport interface IDeclarativeChart {\n  exportAsImage: (opts?: IImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n  const colorMap = React.useRef(new Map<string, string>());\n  return colorMap;\n};\n\nfunction renderChart<TProps>(\n  Renderer: React.ComponentType<TProps>,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  transformer: (...args: any[]) => TProps,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  transformerArgs: any[],\n  commonProps: Partial<TProps>,\n  cellRow: number,\n  cellColumn: number,\n): JSX.Element {\n  const chartProps = transformer(...transformerArgs);\n  return (\n    <div\n      key={`${cellRow}_${cellColumn}`}\n      style={{\n        gridRowStart: cellRow,\n        gridRowEnd: cellRow + 1,\n        gridColumnStart: cellColumn,\n        gridColumnEnd: cellColumn + 1,\n      }}\n    >\n      <Renderer {...chartProps} {...commonProps} />\n    </div>\n  );\n}\n\ntype PreTransformHooks = {\n  preTransformCondition?: (plotlySchema: PlotlySchema) => boolean;\n  preTransformOperation?: (plotlySchema: PlotlySchema) => PlotlySchema;\n};\n\nconst LineAreaPreTransformOp = (plotlyInput: PlotlySchema) => {\n  const xValues = (plotlyInput.data[0] as PlotData).x;\n  const isXMonth = isMonthArray(xValues);\n  let renderData = plotlyInput.data;\n  if (isXMonth) {\n    renderData = plotlyInput.data.map((dataPoint: PlotData) => ({\n      ...dataPoint,\n      x: correctYearMonth(dataPoint.x),\n    }));\n  }\n  return { data: renderData, layout: plotlyInput.layout };\n};\n\ntype ChartTypeMap = {\n  donut: {\n    transformer: typeof transformPlotlyJsonToDonutProps;\n    renderer: typeof ResponsiveDonutChart;\n  } & PreTransformHooks;\n  sankey: {\n    transformer: typeof transformPlotlyJsonToSankeyProps;\n    renderer: typeof ResponsiveSankeyChart;\n  } & PreTransformHooks;\n  table: {\n    transformer: typeof transformPlotlyJsonToChartTableProps;\n    renderer: typeof ResponsiveChartTable;\n  } & PreTransformHooks;\n  horizontalbar: {\n    transformer: typeof transformPlotlyJsonToHorizontalBarWithAxisProps;\n    renderer: typeof ResponsiveHorizontalBarChartWithAxis;\n  } & PreTransformHooks;\n  groupedverticalbar: {\n    transformer: typeof transformPlotlyJsonToGVBCProps;\n    renderer: typeof ResponsiveGroupedVerticalBarChart;\n  } & PreTransformHooks;\n  verticalstackedbar: {\n    transformer: typeof transformPlotlyJsonToVSBCProps;\n    renderer: typeof ResponsiveVerticalStackedBarChart;\n  } & PreTransformHooks;\n  heatmap: {\n    transformer: typeof transformPlotlyJsonToHeatmapProps;\n    renderer: typeof ResponsiveHeatMapChart;\n  } & PreTransformHooks;\n  gauge: {\n    transformer: typeof transformPlotlyJsonToGaugeProps;\n    renderer: typeof ResponsiveGaugeChart;\n  } & PreTransformHooks;\n  verticalbar: {\n    transformer: typeof transformPlotlyJsonToVBCProps;\n    renderer: typeof ResponsiveVerticalBarChart;\n  } & PreTransformHooks;\n  area: {\n    transformer: typeof transformPlotlyJsonToAreaChartProps;\n    renderer: typeof ResponsiveAreaChart;\n  } & PreTransformHooks;\n  line: {\n    transformer: typeof transformPlotlyJsonToLineChartProps;\n    renderer: typeof ResponsiveLineChart;\n  } & PreTransformHooks;\n  scatter: {\n    transformer: typeof transformPlotlyJsonToScatterChartProps;\n    renderer: typeof ResponsiveScatterChart;\n  } & PreTransformHooks;\n  fallback: {\n    transformer: typeof transformPlotlyJsonToVSBCProps;\n    renderer: typeof ResponsiveVerticalStackedBarChart;\n  } & PreTransformHooks;\n};\n\nconst chartMap: ChartTypeMap = {\n  // PieData category charts\n  donut: {\n    transformer: transformPlotlyJsonToDonutProps,\n    renderer: ResponsiveDonutChart,\n  },\n  // SankeyData category charts\n  sankey: {\n    transformer: transformPlotlyJsonToSankeyProps,\n    renderer: ResponsiveSankeyChart,\n  },\n  // TableData category charts\n  table: {\n    transformer: transformPlotlyJsonToChartTableProps,\n    renderer: ResponsiveChartTable,\n  },\n  // PlotData category charts\n  horizontalbar: {\n    transformer: transformPlotlyJsonToHorizontalBarWithAxisProps,\n    renderer: ResponsiveHorizontalBarChartWithAxis,\n  },\n  groupedverticalbar: {\n    transformer: transformPlotlyJsonToGVBCProps,\n    renderer: ResponsiveGroupedVerticalBarChart,\n  },\n  verticalstackedbar: {\n    transformer: transformPlotlyJsonToVSBCProps,\n    renderer: ResponsiveVerticalStackedBarChart,\n  },\n  heatmap: {\n    transformer: transformPlotlyJsonToHeatmapProps,\n    renderer: ResponsiveHeatMapChart,\n  },\n  gauge: {\n    transformer: transformPlotlyJsonToGaugeProps,\n    renderer: ResponsiveGaugeChart,\n  },\n  verticalbar: {\n    transformer: transformPlotlyJsonToVBCProps,\n    renderer: ResponsiveVerticalBarChart,\n  },\n  area: {\n    transformer: transformPlotlyJsonToAreaChartProps,\n    renderer: ResponsiveAreaChart,\n    preTransformOperation: LineAreaPreTransformOp,\n  },\n  line: {\n    transformer: transformPlotlyJsonToLineChartProps,\n    renderer: ResponsiveLineChart,\n    preTransformOperation: LineAreaPreTransformOp,\n  },\n  scatter: {\n    transformer: transformPlotlyJsonToScatterChartProps,\n    renderer: ResponsiveScatterChart,\n    preTransformOperation: LineAreaPreTransformOp,\n  },\n  fallback: {\n    transformer: transformPlotlyJsonToVSBCProps,\n    renderer: ResponsiveVerticalStackedBarChart,\n  },\n};\n\n/**\n * DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n  HTMLDivElement,\n  DeclarativeChartProps\n>((props, forwardedRef) => {\n  const { plotlySchema } = sanitizeJson(props.chartSchema);\n  const chart: OutputChartType = mapFluentChart(plotlySchema);\n  if (!chart.isValid) {\n    throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n  }\n  let plotlyInput = plotlySchema as PlotlySchema;\n  try {\n    plotlyInput = decodeBase64Fields(plotlyInput);\n  } catch (error) {\n    throw new Error(`Failed to decode plotly schema: ${error}`);\n  }\n  const plotlyInputWithValidData: PlotlySchema = {\n    ...plotlyInput,\n    data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace.index]),\n  };\n\n  const validTracesFilteredIndex: TraceInfo[] = chart.validTracesInfo!.map((trace, index) => ({\n    index,\n    type: trace.type,\n  }));\n\n  let { selectedLegends } = plotlySchema;\n  const colorMap = useColorMapping();\n  const theme = useTheme();\n  const isDarkTheme = theme?.isInverted ?? false;\n  const chartRef = React.useRef<IChart>(null);\n  const isMultiPlot = React.useRef(false);\n\n  if (!isArrayOrTypedArray(selectedLegends)) {\n    selectedLegends = [];\n  }\n\n  const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n  const onActiveLegendsChange = (keys: string[]) => {\n    setActiveLegends(keys);\n    if (props.onSchemaChange) {\n      props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n    }\n  };\n\n  React.useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-shadow\n    const { plotlySchema } = sanitizeJson(props.chartSchema);\n    // eslint-disable-next-line @typescript-eslint/no-shadow\n    const { selectedLegends } = plotlySchema;\n    setActiveLegends(selectedLegends ?? []);\n  }, [props.chartSchema]);\n\n  const multiSelectLegendProps = {\n    canSelectMultipleLegends: true,\n    onChange: onActiveLegendsChange,\n    selectedLegends: activeLegends,\n  };\n\n  const commonProps = {\n    legendProps: multiSelectLegendProps,\n    componentRef: chartRef,\n    calloutProps: { layerProps: { eventBubblingEnabled: true } },\n  };\n\n  function createLegends(legendProps: ILegendsProps): JSX.Element {\n    // eslint-disable-next-line react/jsx-no-bind\n    return <Legends {...legendProps} selectedLegends={activeLegends} onChange={onActiveLegendsChange} />;\n  }\n\n  const exportAsImage = React.useCallback(\n    (opts?: IImageExportOptions): Promise<string> => {\n      return new Promise((resolve, reject) => {\n        if (isMultiPlot.current) {\n          return reject(Error('Exporting multi plot charts as image is not supported'));\n        }\n        if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {\n          return reject(Error('Chart cannot be exported as image'));\n        }\n\n        chartRef.current\n          .toImage({\n            background: theme.semanticColors.bodyBackground,\n            scale: 5,\n            ...opts,\n          })\n          .then(resolve)\n          .catch(reject);\n      });\n    },\n    [theme],\n  );\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      exportAsImage,\n    }),\n    [exportAsImage],\n  );\n\n  if (chart.type === 'scatterpolar') {\n    const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n    plotlyInputWithValidData.data = cartesianProjection.data;\n    validTracesFilteredIndex.forEach((trace, index) => {\n      if (trace.type === 'scatterpolar') {\n        validTracesFilteredIndex[index].type = 'line'; // Change type to line for rendering\n      }\n    });\n  }\n\n  const groupedTraces: Record<string, number[]> = {};\n  let nonCartesianTraceCount = 0;\n  plotlyInputWithValidData.data.forEach((trace: Data, index: number) => {\n    let traceKey = '';\n    if (isNonPlotType(chart.validTracesInfo![index].type)) {\n      traceKey = `${NON_PLOT_KEY_PREFIX}${nonCartesianTraceCount + 1}`;\n      nonCartesianTraceCount++;\n    } else {\n      traceKey = (trace as PlotData).xaxis ?? DEFAULT_XAXIS;\n    }\n    if (!groupedTraces[traceKey]) {\n      groupedTraces[traceKey] = [];\n    }\n    groupedTraces[traceKey].push(index);\n  });\n\n  isMultiPlot.current = Object.keys(groupedTraces).length > 1;\n  const gridProperties: GridProperties = getGridProperties(\n    plotlyInputWithValidData,\n    isMultiPlot.current,\n    chart.validTracesInfo!,\n  );\n\n  // Render only one plot if the grid properties cannot determine positioning of multiple plots.\n  if (\n    isMultiPlot.current &&\n    gridProperties.templateRows === SINGLE_REPEAT &&\n    gridProperties.templateColumns === SINGLE_REPEAT\n  ) {\n    Object.keys(groupedTraces).forEach((key, index) => {\n      if (index > 0) {\n        delete groupedTraces[key];\n      }\n    });\n    isMultiPlot.current = false;\n  }\n\n  const allupLegendsProps = getAllupLegendsProps(\n    plotlyInputWithValidData,\n    colorMap,\n    props.colorwayType,\n    chart.validTracesInfo!,\n    isDarkTheme,\n  );\n\n  type ChartType = keyof ChartTypeMap;\n  // map through the grouped traces and render the appropriate chart\n  return (\n    <>\n      <div\n        style={{\n          display: 'grid',\n          gridTemplateRows: gridProperties.templateRows,\n          gridTemplateColumns: gridProperties.templateColumns,\n        }}\n      >\n        {Object.entries(groupedTraces).map(([xAxisKey, index]) => {\n          const plotlyInputForGroup: PlotlySchema = {\n            ...plotlyInputWithValidData,\n            data: index.map(idx => plotlyInputWithValidData.data[idx]),\n          };\n\n          const filteredTracesInfo = validTracesFilteredIndex.filter(trace => index.includes(trace.index));\n          let chartType =\n            validTracesFilteredIndex.some(trace => trace.type === FALLBACK_TYPE) || chart.type === FALLBACK_TYPE\n              ? FALLBACK_TYPE\n              : filteredTracesInfo[0].type;\n\n          if (\n            validTracesFilteredIndex.some(trace => trace.type === 'line') &&\n            validTracesFilteredIndex.some(trace => trace.type === 'scatter')\n          ) {\n            chartType = 'line';\n          }\n\n          const chartEntry = chartMap[chartType as ChartType];\n          if (chartEntry) {\n            const { transformer, renderer, preTransformCondition, preTransformOperation } = chartEntry;\n            if (preTransformCondition === undefined || preTransformCondition(plotlyInputForGroup)) {\n              const transformedInput = preTransformOperation\n                ? preTransformOperation(plotlyInputForGroup)\n                : plotlyInputForGroup;\n              const cellProperties = gridProperties.layout[xAxisKey];\n\n              return renderChart<ReturnType<typeof transformer>>(\n                renderer,\n                transformer,\n                [transformedInput, isMultiPlot.current, colorMap, props.colorwayType, isDarkTheme],\n                {\n                  ...commonProps,\n                  xAxisAnnotation: cellProperties?.xAnnotation,\n                  yAxisAnnotation: cellProperties?.yAnnotation,\n                },\n                cellProperties?.row ?? 1,\n                cellProperties?.column ?? 1,\n              );\n            }\n            return <></>;\n          } else {\n            throw new Error(`Unsupported chart type :${plotlyInputForGroup.data[0]?.type}`);\n          }\n        })}\n      </div>\n      {isMultiPlot.current && createLegends(allupLegendsProps)}\n    </>\n  );\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\nDeclarativeChart.defaultProps = {\n  colorwayType: 'default',\n};\n"]}

package/lib-amd/components/DeclarativeChart/PlotlyColorAdapter.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import type { PieColors, Color } from '@fluentui/chart-utilities';
+import type { PieColors, Color, PlotData } from '@fluentui/chart-utilities';
 export type ColorwayType = 'default' | 'builtin' | 'others' | undefined;
 export declare const getColor: (legendLabel: string, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string;
 export declare const getSchemaColors: (colorway: string[] | undefined, colors: PieColors | Color | Color[] | string | null | undefined, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string[] | string | undefined;
 export declare const extractColor: (colorway: string[] | undefined, colorwayType: ColorwayType, colors: PieColors | Color | Color[] | string | null | undefined, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string | string[] | undefined;
 export declare const resolveColor: (extractedColors: string[] | string | null | undefined, index: number, legend: string, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string;
+export declare const getOpacity: (series: Partial<PlotData>, index: number) => number;

package/lib-amd/components/DeclarativeChart/PlotlyColorAdapter.js

@@ -1,7 +1,7 @@
 define(["require", "exports", "d3-color", "@fluentui/chart-utilities", "../../utilities/utilities", "../../utilities/colors"], function (require, exports, d3_color_1, chart_utilities_1, utilities_1, colors_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.resolveColor = exports.extractColor = exports.getSchemaColors = exports.getColor = void 0;
+    exports.getOpacity = exports.resolveColor = exports.extractColor = exports.getSchemaColors = exports.getColor = void 0;
     var DEFAULT_PLOTLY_COLORWAY = [
         '#636efa', //1
         '#ef553b', //2
@@ -92,7 +92,7 @@ define(["require", "exports", "d3-color", "@fluentui/chart-utilities", "../../ut
     exports.extractColor = extractColor;
     var resolveColor = function (extractedColors, index, legend, colorMap, isDarkTheme) {
         var color = '';
-        if (extractedColors && (0, chart_utilities_1.isArrayOrTypedArray)(extractedColors) && extractedColors[index]) {
+        if (extractedColors && (0, chart_utilities_1.isArrayOrTypedArray)(extractedColors) && extractedColors.length > 0) {
             color = extractedColors[index % extractedColors.length];
         }
         else if (typeof extractedColors === 'string') {
@@ -104,5 +104,14 @@ define(["require", "exports", "d3-color", "@fluentui/chart-utilities", "../../ut
         return color;
     };
     exports.resolveColor = resolveColor;
+    var getOpacity = function (series, index) {
+        var _a, _b, _c, _d, _e, _f;
+        return ((_a = series.marker) === null || _a === void 0 ? void 0 : _a.opacity)
+            ? (0, chart_utilities_1.isArrayOrTypedArray)((_b = series.marker) === null || _b === void 0 ? void 0 : _b.opacity)
+                ? ((_c = series.marker) === null || _c === void 0 ? void 0 : _c.opacity)[index % ((_d = series.marker) === null || _d === void 0 ? void 0 : _d.opacity).length]
+                : (_e = series.marker) === null || _e === void 0 ? void 0 : _e.opacity
+            : (_f = series.opacity) !== null && _f !== void 0 ? _f : 1;
+    };
+    exports.getOpacity = getOpacity;
 });
 //# sourceMappingURL=PlotlyColorAdapter.js.map

package/lib-amd/components/DeclarativeChart/PlotlyColorAdapter.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlotlyColorAdapter.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/PlotlyColorAdapter.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { color as d3Color } from 'd3-color';\nimport type { PieColors, Color } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray } from '@fluentui/chart-utilities';\nimport { areArraysEqual } from '../../utilities/utilities';\nimport { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';\n\ntype PlotlyColorway = 'plotly' | 'others';\n\n// The color sequences in plotly express are defined here:\n// https://plotly.com/python/discrete-color/#:~:text=Join%20now.-,Color%20Sequences%20in%20Plotly%20Express,-By%20default%2C%20Plotly\nexport type ColorwayType = 'default' | 'builtin' | 'others' | undefined;\n\nconst DEFAULT_PLOTLY_COLORWAY = [\n  '#636efa', //1\n  '#ef553b', //2\n  '#00cc96', //3\n  '#ab63fa', //4\n  '#ffa15a', //5\n  '#19d3f3', //6\n  '#ff6692', //7\n  '#b6e880', //8\n  '#ff97ff', //9\n  '#fecb52', //10\n];\n\nconst PLOTLY_FLUENTVIZ_COLORWAY_MAPPING = [\n  DataVizPalette.color1, //1\n  DataVizPalette.warning, //2\n  DataVizPalette.color8, //3\n  DataVizPalette.color4, //4\n  DataVizPalette.color7, //5\n  DataVizPalette.color6, //6\n  DataVizPalette.color2, //7\n  DataVizPalette.color5, //8\n  DataVizPalette.color9, //9\n  DataVizPalette.color10, //10\n];\n\nfunction getPlotlyColorway(colorway: string[] | undefined): PlotlyColorway {\n  const isPlotlyColorway =\n    isArrayOrTypedArray(colorway) &&\n    areArraysEqual(\n      colorway?.map(c => c.toLowerCase()),\n      DEFAULT_PLOTLY_COLORWAY,\n    );\n\n  return isPlotlyColorway ? 'plotly' : 'others';\n}\n\nfunction tryMapFluentDataViz(hexColor: string, templateColorway: PlotlyColorway, isDarkTheme?: boolean): string {\n  if (templateColorway !== 'plotly') {\n    return hexColor;\n  }\n  const index = DEFAULT_PLOTLY_COLORWAY.indexOf(hexColor.toLowerCase());\n  if (index !== -1) {\n    return getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[index], isDarkTheme);\n  }\n  return hexColor;\n}\n\nexport const getColor = (\n  legendLabel: string,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string => {\n  if (!colorMap.current.has(legendLabel)) {\n    let nextColor: string;\n    if (colorMap.current.size < PLOTLY_FLUENTVIZ_COLORWAY_MAPPING.length) {\n      // Get first 10 colors from plotly-fluentviz colorway mapping\n      nextColor = getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[colorMap.current.size], isDarkTheme);\n    } else {\n      nextColor = getNextColor(colorMap.current.size, 0, isDarkTheme);\n    }\n    colorMap.current.set(legendLabel, nextColor);\n    return nextColor;\n  }\n\n  return colorMap.current.get(legendLabel) as string;\n};\n\nexport const getSchemaColors = (\n  colorway: string[] | undefined,\n  colors: PieColors | Color | Color[] | string | null | undefined,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string[] | string | undefined => {\n  const hexColors: string[] = [];\n  if (!colors) {\n    return undefined;\n  }\n  const templateColorway = getPlotlyColorway(colorway);\n  if (isArrayOrTypedArray(colors)) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (colors as any[]).forEach((element, index) => {\n      const colorString = element?.toString().trim();\n      const nextFluentColor = getColor(`Label_${index}`, colorMap, isDarkTheme);\n      if (colorString) {\n        const parsedColor = d3Color(colorString);\n        hexColors.push(\n          parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor,\n        );\n      } else {\n        hexColors.push(nextFluentColor);\n      }\n    });\n  } else if (typeof colors === 'string') {\n    const parsedColor = d3Color(colors);\n    return parsedColor\n      ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)\n      : getColor('Label_0', colorMap, isDarkTheme);\n  }\n  return hexColors;\n};\n\nexport const extractColor = (\n  colorway: string[] | undefined,\n  colorwayType: ColorwayType,\n  colors: PieColors | Color | Color[] | string | null | undefined,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string | string[] | undefined => {\n  return colorwayType === 'default' && colors ? getSchemaColors(colorway, colors, colorMap, isDarkTheme) : undefined;\n};\n\nexport const resolveColor = (\n  extractedColors: string[] | string | null | undefined,\n  index: number,\n  legend: string,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string => {\n  let color = '';\n  if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors[index]) {\n    color = extractedColors[index % extractedColors.length];\n  } else if (typeof extractedColors === 'string') {\n    color = extractedColors;\n  } else {\n    color = getColor(legend, colorMap, isDarkTheme);\n  }\n  return color;\n};\n"]}
+{"version":3,"file":"PlotlyColorAdapter.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/PlotlyColorAdapter.ts"],"names":[],"mappings":";;;;IAaA,IAAM,uBAAuB,GAAG;QAC9B,SAAS,EAAE,GAAG;QACd,SAAS,EAAE,GAAG;QACd,SAAS,EAAE,GAAG;QACd,SAAS,EAAE,GAAG;QACd,SAAS,EAAE,GAAG;QACd,SAAS,EAAE,GAAG;QACd,SAAS,EAAE,GAAG;QACd,SAAS,EAAE,GAAG;QACd,SAAS,EAAE,GAAG;QACd,SAAS,EAAE,IAAI;KAChB,CAAC;IAEF,IAAM,iCAAiC,GAAG;QACxC,uBAAc,CAAC,MAAM,EAAE,GAAG;QAC1B,uBAAc,CAAC,OAAO,EAAE,GAAG;QAC3B,uBAAc,CAAC,MAAM,EAAE,GAAG;QAC1B,uBAAc,CAAC,MAAM,EAAE,GAAG;QAC1B,uBAAc,CAAC,MAAM,EAAE,GAAG;QAC1B,uBAAc,CAAC,MAAM,EAAE,GAAG;QAC1B,uBAAc,CAAC,MAAM,EAAE,GAAG;QAC1B,uBAAc,CAAC,MAAM,EAAE,GAAG;QAC1B,uBAAc,CAAC,MAAM,EAAE,GAAG;QAC1B,uBAAc,CAAC,OAAO,EAAE,IAAI;KAC7B,CAAC;IAEF,SAAS,iBAAiB,CAAC,QAA8B;QACvD,IAAM,gBAAgB,GACpB,IAAA,qCAAmB,EAAC,QAAQ,CAAC;YAC7B,IAAA,0BAAc,EACZ,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,WAAW,EAAE,EAAf,CAAe,CAAC,EACnC,uBAAuB,CACxB,CAAC;QAEJ,OAAO,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;IAChD,CAAC;IAED,SAAS,mBAAmB,CAAC,QAAgB,EAAE,gBAAgC,EAAE,WAAqB;QACpG,IAAI,gBAAgB,KAAK,QAAQ,EAAE,CAAC;YAClC,OAAO,QAAQ,CAAC;QAClB,CAAC;QACD,IAAM,KAAK,GAAG,uBAAuB,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;QACtE,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;YACjB,OAAO,IAAA,0BAAiB,EAAC,iCAAiC,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC;QAClF,CAAC;QACD,OAAO,QAAQ,CAAC;IAClB,CAAC;IAEM,IAAM,QAAQ,GAAG,UACtB,WAAmB,EACnB,QAAqD,EACrD,WAAqB;QAErB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YACvC,IAAI,SAAS,SAAQ,CAAC;YACtB,IAAI,QAAQ,CAAC,OAAO,CAAC,IAAI,GAAG,iCAAiC,CAAC,MAAM,EAAE,CAAC;gBACrE,6DAA6D;gBAC7D,SAAS,GAAG,IAAA,0BAAiB,EAAC,iCAAiC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC;YACvG,CAAC;iBAAM,CAAC;gBACN,SAAS,GAAG,IAAA,qBAAY,EAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC;YAClE,CAAC;YACD,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;YAC7C,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,OAAO,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,WAAW,CAAW,CAAC;IACrD,CAAC,CAAC;IAlBW,QAAA,QAAQ,YAkBnB;IAEK,IAAM,eAAe,GAAG,UAC7B,QAA8B,EAC9B,MAA+D,EAC/D,QAAqD,EACrD,WAAqB;QAErB,IAAM,SAAS,GAAa,EAAE,CAAC;QAC/B,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,IAAM,gBAAgB,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QACrD,IAAI,IAAA,qCAAmB,EAAC,MAAM,CAAC,EAAE,CAAC;YAChC,8DAA8D;YAC7D,MAAgB,CAAC,OAAO,CAAC,UAAC,OAAO,EAAE,KAAK;gBACvC,IAAM,WAAW,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,GAAG,IAAI,EAAE,CAAC;gBAC/C,IAAM,eAAe,GAAG,IAAA,gBAAQ,EAAC,gBAAS,KAAK,CAAE,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;gBAC1E,IAAI,WAAW,EAAE,CAAC;oBAChB,IAAM,WAAW,GAAG,IAAA,gBAAO,EAAC,WAAW,CAAC,CAAC;oBACzC,SAAS,CAAC,IAAI,CACZ,WAAW,CAAC,CAAC,CAAC,mBAAmB,CAAC,WAAW,CAAC,SAAS,EAAE,EAAE,gBAAgB,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,eAAe,CAC5G,CAAC;gBACJ,CAAC;qBAAM,CAAC;oBACN,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;gBAClC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE,CAAC;YACtC,IAAM,WAAW,GAAG,IAAA,gBAAO,EAAC,MAAM,CAAC,CAAC;YACpC,OAAO,WAAW;gBAChB,CAAC,CAAC,mBAAmB,CAAC,WAAW,CAAC,SAAS,EAAE,EAAE,gBAAgB,EAAE,WAAW,CAAC;gBAC7E,CAAC,CAAC,IAAA,gBAAQ,EAAC,SAAS,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;QACjD,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC;IAhCW,QAAA,eAAe,mBAgC1B;IAEK,IAAM,YAAY,GAAG,UAC1B,QAA8B,EAC9B,YAA0B,EAC1B,MAA+D,EAC/D,QAAqD,EACrD,WAAqB;QAErB,OAAO,YAAY,KAAK,SAAS,IAAI,MAAM,CAAC,CAAC,CAAC,IAAA,uBAAe,EAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACrH,CAAC,CAAC;IARW,QAAA,YAAY,gBAQvB;IAEK,IAAM,YAAY,GAAG,UAC1B,eAAqD,EACrD,KAAa,EACb,MAAc,EACd,QAAqD,EACrD,WAAqB;QAErB,IAAI,KAAK,GAAG,EAAE,CAAC;QACf,IAAI,eAAe,IAAI,IAAA,qCAAmB,EAAC,eAAe,CAAC,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC1F,KAAK,GAAG,eAAe,CAAC,KAAK,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;QAC1D,CAAC;aAAM,IAAI,OAAO,eAAe,KAAK,QAAQ,EAAE,CAAC;YAC/C,KAAK,GAAG,eAAe,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,KAAK,GAAG,IAAA,gBAAQ,EAAC,MAAM,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;QAClD,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAhBW,QAAA,YAAY,gBAgBvB;IAEK,IAAM,UAAU,GAAG,UAAC,MAAyB,EAAE,KAAa;;QACjE,OAAO,CAAA,MAAA,MAAM,CAAC,MAAM,0CAAE,OAAO;YAC3B,CAAC,CAAC,IAAA,qCAAmB,EAAC,MAAA,MAAM,CAAC,MAAM,0CAAE,OAAO,CAAC;gBAC3C,CAAC,CAAC,CAAC,MAAA,MAAM,CAAC,MAAM,0CAAE,OAAoB,CAAA,CAAC,KAAK,GAAG,CAAC,MAAA,MAAM,CAAC,MAAM,0CAAE,OAAoB,CAAA,CAAC,MAAM,CAAC;gBAC3F,CAAC,CAAE,MAAA,MAAM,CAAC,MAAM,0CAAE,OAAkB;YACtC,CAAC,CAAC,MAAA,MAAM,CAAC,OAAO,mCAAI,CAAC,CAAC;IAC1B,CAAC,CAAC;IANW,QAAA,UAAU,cAMrB","sourcesContent":["import * as React from 'react';\nimport { color as d3Color } from 'd3-color';\nimport type { PieColors, Color, PlotData } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray } from '@fluentui/chart-utilities';\nimport { areArraysEqual } from '../../utilities/utilities';\nimport { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';\n\ntype PlotlyColorway = 'plotly' | 'others';\n\n// The color sequences in plotly express are defined here:\n// https://plotly.com/python/discrete-color/#:~:text=Join%20now.-,Color%20Sequences%20in%20Plotly%20Express,-By%20default%2C%20Plotly\nexport type ColorwayType = 'default' | 'builtin' | 'others' | undefined;\n\nconst DEFAULT_PLOTLY_COLORWAY = [\n  '#636efa', //1\n  '#ef553b', //2\n  '#00cc96', //3\n  '#ab63fa', //4\n  '#ffa15a', //5\n  '#19d3f3', //6\n  '#ff6692', //7\n  '#b6e880', //8\n  '#ff97ff', //9\n  '#fecb52', //10\n];\n\nconst PLOTLY_FLUENTVIZ_COLORWAY_MAPPING = [\n  DataVizPalette.color1, //1\n  DataVizPalette.warning, //2\n  DataVizPalette.color8, //3\n  DataVizPalette.color4, //4\n  DataVizPalette.color7, //5\n  DataVizPalette.color6, //6\n  DataVizPalette.color2, //7\n  DataVizPalette.color5, //8\n  DataVizPalette.color9, //9\n  DataVizPalette.color10, //10\n];\n\nfunction getPlotlyColorway(colorway: string[] | undefined): PlotlyColorway {\n  const isPlotlyColorway =\n    isArrayOrTypedArray(colorway) &&\n    areArraysEqual(\n      colorway?.map(c => c.toLowerCase()),\n      DEFAULT_PLOTLY_COLORWAY,\n    );\n\n  return isPlotlyColorway ? 'plotly' : 'others';\n}\n\nfunction tryMapFluentDataViz(hexColor: string, templateColorway: PlotlyColorway, isDarkTheme?: boolean): string {\n  if (templateColorway !== 'plotly') {\n    return hexColor;\n  }\n  const index = DEFAULT_PLOTLY_COLORWAY.indexOf(hexColor.toLowerCase());\n  if (index !== -1) {\n    return getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[index], isDarkTheme);\n  }\n  return hexColor;\n}\n\nexport const getColor = (\n  legendLabel: string,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string => {\n  if (!colorMap.current.has(legendLabel)) {\n    let nextColor: string;\n    if (colorMap.current.size < PLOTLY_FLUENTVIZ_COLORWAY_MAPPING.length) {\n      // Get first 10 colors from plotly-fluentviz colorway mapping\n      nextColor = getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[colorMap.current.size], isDarkTheme);\n    } else {\n      nextColor = getNextColor(colorMap.current.size, 0, isDarkTheme);\n    }\n    colorMap.current.set(legendLabel, nextColor);\n    return nextColor;\n  }\n\n  return colorMap.current.get(legendLabel) as string;\n};\n\nexport const getSchemaColors = (\n  colorway: string[] | undefined,\n  colors: PieColors | Color | Color[] | string | null | undefined,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string[] | string | undefined => {\n  const hexColors: string[] = [];\n  if (!colors) {\n    return undefined;\n  }\n  const templateColorway = getPlotlyColorway(colorway);\n  if (isArrayOrTypedArray(colors)) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (colors as any[]).forEach((element, index) => {\n      const colorString = element?.toString().trim();\n      const nextFluentColor = getColor(`Label_${index}`, colorMap, isDarkTheme);\n      if (colorString) {\n        const parsedColor = d3Color(colorString);\n        hexColors.push(\n          parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor,\n        );\n      } else {\n        hexColors.push(nextFluentColor);\n      }\n    });\n  } else if (typeof colors === 'string') {\n    const parsedColor = d3Color(colors);\n    return parsedColor\n      ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)\n      : getColor('Label_0', colorMap, isDarkTheme);\n  }\n  return hexColors;\n};\n\nexport const extractColor = (\n  colorway: string[] | undefined,\n  colorwayType: ColorwayType,\n  colors: PieColors | Color | Color[] | string | null | undefined,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string | string[] | undefined => {\n  return colorwayType === 'default' && colors ? getSchemaColors(colorway, colors, colorMap, isDarkTheme) : undefined;\n};\n\nexport const resolveColor = (\n  extractedColors: string[] | string | null | undefined,\n  index: number,\n  legend: string,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string => {\n  let color = '';\n  if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors.length > 0) {\n    color = extractedColors[index % extractedColors.length];\n  } else if (typeof extractedColors === 'string') {\n    color = extractedColors;\n  } else {\n    color = getColor(legend, colorMap, isDarkTheme);\n  }\n  return color;\n};\n\nexport const getOpacity = (series: Partial<PlotData>, index: number): number => {\n  return series.marker?.opacity\n    ? isArrayOrTypedArray(series.marker?.opacity)\n      ? (series.marker?.opacity as number[])[index % (series.marker?.opacity as number[]).length]\n      : (series.marker?.opacity as number)\n    : series.opacity ?? 1;\n};\n"]}

package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.d.ts

@@ -10,14 +10,22 @@ import { IGaugeChartProps } from '../GaugeChart/index';
 import { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index';
 import { IVerticalBarChartProps } from '../VerticalBarChart/index';
 import { IChartTableProps } from '../ChartTable/index';
-import type { Datum, Layout, PlotlySchema, PlotData, TypedArray, Color } from '@fluentui/chart-utilities';
+import type { Datum, PlotlySchema, PlotData, TypedArray, Color, TraceInfo } from '@fluentui/chart-utilities';
 import type { ColorwayType } from './PlotlyColorAdapter';
 import { ILegendsProps } from '../Legends/index';
+export declare const NON_PLOT_KEY_PREFIX = "nonplot_";
+export declare const SINGLE_REPEAT = "repeat(1, 1fr)";
+type DomainInterval = {
+    start: number;
+    end: number;
+};
 export type AxisProperties = {
     xAnnotation?: string;
     yAnnotation?: string;
     row: number;
     column: number;
+    xDomain: DomainInterval;
+    yDomain: DomainInterval;
 };
 export type GridAxisProperties = Record<string, AxisProperties>;
 export type GridProperties = {
@@ -47,7 +55,9 @@ export declare const projectPolarToCartesian: (input: PlotlySchema) => PlotlySch
  * @param trace
  */
 export declare function findArrayAttributes(trace: any): void;
-export declare const getAllupLegendsProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ILegendsProps;
+export declare const getAllupLegendsProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, traceInfo: TraceInfo[], isDarkTheme?: boolean) => ILegendsProps;
 export declare const getNumberAtIndexOrDefault: (data: PlotData['z'] | undefined, index: number) => number | undefined;
 export declare const getValidXYRanges: (series: Partial<PlotData>) => [number, number][];
-export declare const getGridProperties: (layout: Partial<Layout> | undefined, isMultiPlot: boolean) => GridProperties;
+export declare const isNonPlotType: (chartType: string) => boolean;
+export declare const getGridProperties: (schema: PlotlySchema | undefined, isMultiPlot: boolean, validTracesInfo: TraceInfo[]) => GridProperties;
+export {};