@fluentui/react-charts 9.2.3 → 9.2.4

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CommonComponents/CartesianChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { LegendsProps } from '../Legends/index';\nimport {\n  AccessibilityProps,\n  Chart,\n  Margins,\n  DataPoint,\n  HorizontalBarChartWithAxisDataPoint,\n  GroupedVerticalBarChartData,\n  HeatMapChartDataPoint,\n  LineChartPoints,\n  VerticalBarChartDataPoint,\n  VerticalStackedBarDataPoint,\n  ScatterChartDataPoint,\n  GanttChartDataPoint,\n  AxisCategoryOrder,\n} from '../../types/index';\nimport { TimeLocaleDefinition } from 'd3-time-format';\nimport { ChartPopoverProps } from './ChartPopover.types';\nimport { ChartTypes, IAxisData, IDomainNRange, IYAxisParams, XAxisTypes, YAxisType } from '../../utilities/utilities';\nimport { ScaleBand, ScaleLinear } from 'd3-scale';\n/**\n * Cartesian Chart style properties\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartStyleProps {\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  useRtl?: 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   * @deprecated Use `reflowProps` instead.\n   */\n  enableReflow?: boolean;\n}\n\n/**\n * Cartesian Chart styles\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: string;\n\n  /**\n   * Style for the element containing the x-axis.\n   */\n  xAxis?: string;\n\n  /**\n   * Style for the element containing the y-axis.\n   */\n  yAxis?: string;\n\n  /**\n   * Style for legend container\n   */\n  legendContainer?: string;\n\n  /**\n   * line hover box css\n   */\n  hover?: string;\n\n  /**\n   * styles for description message\n   */\n  descriptionMessage?: string;\n\n  /**\n   * styles for tooltip\n   */\n  tooltip?: string;\n\n  /**\n   * styles for axis title\n   */\n  axisTitle?: string;\n\n  /**\n   * styles for axis annotation\n   */\n  axisAnnotation?: string;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle?: string;\n\n  /**\n   * Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n   */\n  opacityChangeOnHover?: string;\n\n  /**\n   * styles for the shape object in the callout\n   */\n  shapeStyles?: string;\n\n  /**\n   * Styles for the chart wrapper div\n   */\n  chartWrapper?: string;\n\n  /**\n   * Styles for the svg tooltip\n   */\n  svgTooltip?: string;\n\n  /**\n   * Styles for the chart svg element\n   */\n  chart?: string;\n}\n\n/**\n * Cartesian Chart properties\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartProps {\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   * 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?: Margins;\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[] | undefined;\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  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  legendsOverflowText?: any;\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<LegendsProps>;\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?: CartesianChartStyles;\n\n  /**\n   * Callout customization props\n   */\n  calloutProps?: Partial<ChartPopoverProps>;\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   * @deprecated Use `reflowProps` instead.\n   */\n  enableReflow?: boolean;\n\n  /**\n   * Props related to reflow behavior of the chart\n   */\n  reflowProps?: {\n    /**\n     * Determines the reflow behavior of the chart.\n     * When set to `'min-width'`, the chart will not shrink below a certain width and will enable scrolling if it overflows.\n     * @default 'none'\n     */\n    mode: 'none' | 'min-width';\n  };\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?: string | boolean;\n\n  /**\n   * @default false\n   * The prop used to decide rounded ticks on y axis\n   */\n  roundedTicks?: boolean;\n\n  /**\n   * Determines whether overlapping x-axis tick labels should be hidden.\n   * @default true\n   */\n  hideTickOverlap?: boolean;\n\n  /**\n   * Define a custom callout props override\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  calloutPropsPerDataPoint?: (dataPointCalloutProps: any) => ChartPopoverProps;\n\n  /**\n   * Optional callback to access the Chart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.RefObject<Chart>;\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 YValueHover {\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?: AccessibilityProps;\n}\n\nexport interface ChildProps {\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  optimizeLargeData?: boolean;\n}\n\n// Only used for Cartesian chart base\nexport interface ModifiedCartesianChartProps extends CartesianChartProps {\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: JSXElement | null;\n\n  /**\n   * Callout props\n   */\n  calloutProps?: ChartPopoverProps;\n\n  /**\n   * Callback method used for to get margins to the chart.\n   */\n  getmargins?: (margins: Margins) => 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: ChildProps): React.ReactNode;\n\n  /**\n   * To enable callout for individual bar 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   * 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) => Margins;\n\n  /** Callback method to get extra margins for Y-axis domain */\n  getYDomainMargins?: (containerHeight: number) => Margins;\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      | LineChartPoints[]\n      | HorizontalBarChartWithAxisDataPoint[]\n      | VerticalBarChartDataPoint[]\n      | DataPoint[]\n      | ScatterChartDataPoint[]\n      | GanttChartDataPoint[],\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    chartType: ChartTypes,\n    useSecondaryYScale?: boolean,\n    roundedTicks?: boolean,\n  ) => ScaleLinear<number, number, never>;\n\n  /**\n   * Get the domain and range values\n   */\n  getDomainNRangeValues: (\n    points:\n      | LineChartPoints[]\n      | VerticalBarChartDataPoint[]\n      | VerticalStackedBarDataPoint[]\n      | HorizontalBarChartWithAxisDataPoint[]\n      | GroupedVerticalBarChartData[]\n      | HeatMapChartDataPoint[]\n      | GanttChartDataPoint[],\n    margins: Margins,\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   * 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"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/CommonComponents/CartesianChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { LegendsProps } from '../Legends/index';\nimport {\n  AccessibilityProps,\n  Chart,\n  Margins,\n  DataPoint,\n  HorizontalBarChartWithAxisDataPoint,\n  GroupedVerticalBarChartData,\n  HeatMapChartDataPoint,\n  LineChartPoints,\n  VerticalBarChartDataPoint,\n  VerticalStackedBarDataPoint,\n  ScatterChartPoints,\n  GanttChartDataPoint,\n  AxisCategoryOrder,\n  AxisProps,\n  AxisScaleType,\n} from '../../types/index';\nimport { TimeLocaleDefinition } from 'd3-time-format';\nimport { ChartPopoverProps } from './ChartPopover.types';\nimport { ChartTypes, IAxisData, IDomainNRange, IYAxisParams, XAxisTypes, YAxisType } from '../../utilities/utilities';\nimport { ScaleBand, ScaleLinear } from 'd3-scale';\n/**\n * Cartesian Chart style properties\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartStyleProps {\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  useRtl?: 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   * @deprecated Use `reflowProps` instead.\n   */\n  enableReflow?: boolean;\n}\n\n/**\n * Cartesian Chart styles\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: string;\n\n  /**\n   * Style for the element containing the x-axis.\n   */\n  xAxis?: string;\n\n  /**\n   * Style for the element containing the y-axis.\n   */\n  yAxis?: string;\n\n  /**\n   * Style for legend container\n   */\n  legendContainer?: string;\n\n  /**\n   * line hover box css\n   */\n  hover?: string;\n\n  /**\n   * styles for description message\n   */\n  descriptionMessage?: string;\n\n  /**\n   * styles for tooltip\n   */\n  tooltip?: string;\n\n  /**\n   * styles for axis title\n   */\n  axisTitle?: string;\n\n  /**\n   * styles for axis annotation\n   */\n  axisAnnotation?: string;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle?: string;\n\n  /**\n   * Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n   */\n  opacityChangeOnHover?: string;\n\n  /**\n   * styles for the shape object in the callout\n   */\n  shapeStyles?: string;\n\n  /**\n   * Styles for the chart wrapper div\n   */\n  chartWrapper?: string;\n\n  /**\n   * Styles for the svg tooltip\n   */\n  svgTooltip?: string;\n\n  /**\n   * Styles for the chart svg element\n   */\n  chart?: string;\n}\n\n/**\n * Cartesian Chart properties\n * {@docCategory CartesianChart}\n */\nexport interface CartesianChartProps {\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   * 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?: Margins;\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[] | undefined;\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  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  legendsOverflowText?: any;\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<LegendsProps>;\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?: CartesianChartStyles;\n\n  /**\n   * Callout customization props\n   */\n  calloutProps?: Partial<ChartPopoverProps>;\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   * @deprecated Use `reflowProps` instead.\n   */\n  enableReflow?: boolean;\n\n  /**\n   * Props related to reflow behavior of the chart\n   */\n  reflowProps?: {\n    /**\n     * Determines the reflow behavior of the chart.\n     * When set to `'min-width'`, the chart will not shrink below a certain width and will enable scrolling if it overflows.\n     * @default 'none'\n     */\n    mode: 'none' | 'min-width';\n  };\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?: string | boolean;\n\n  /**\n   * @default false\n   * The prop used to decide rounded ticks on y axis\n   */\n  roundedTicks?: boolean;\n\n  /**\n   * Determines whether overlapping x-axis tick labels should be hidden.\n   * @default true\n   */\n  hideTickOverlap?: boolean;\n\n  /**\n   * Define a custom callout props override\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  calloutPropsPerDataPoint?: (dataPointCalloutProps: any) => ChartPopoverProps;\n\n  /**\n   * Optional callback to access the Chart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.RefObject<Chart>;\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  /**\n   * Defines the scale type for the x-axis.\n   * @default 'default'\n   */\n  xScaleType?: AxisScaleType;\n\n  /**\n   * Defines the scale type for the primary y-axis.\n   * @default 'default'\n   */\n  yScaleType?: AxisScaleType;\n\n  /**\n   * Defines the scale type for the secondary y-axis.\n   * @default 'default'\n   */\n  secondaryYScaleType?: AxisScaleType;\n\n  /**\n   * Explicit set of tick values for the y-axis.\n   * If provided, these values override automatic tick generation.\n   */\n  yAxisTickValues?: number[] | Date[] | string[];\n\n  /**\n   * Configuration for the x-axis.\n   * Use this to control `tickStep`, `tick0`, etc.\n   */\n  xAxis?: AxisProps;\n\n  /**\n   * Configuration for the y-axis.\n   * Use this to control `tickStep`, `tick0`, etc.\n   */\n  yAxis?: AxisProps;\n}\n\nexport interface YValueHover {\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?: AccessibilityProps;\n}\n\nexport interface ChildProps {\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  optimizeLargeData?: boolean;\n}\n\n// Only used for Cartesian chart base\nexport interface ModifiedCartesianChartProps extends CartesianChartProps {\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: JSXElement | null;\n\n  /**\n   * Callout props\n   */\n  calloutProps?: ChartPopoverProps;\n\n  /**\n   * Callback method used for to get margins to the chart.\n   */\n  getmargins?: (margins: Margins) => 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: ChildProps): React.ReactNode;\n\n  /**\n   * To enable callout for individual bar 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   * 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) => Margins;\n\n  /** Callback method to get extra margins for Y-axis domain */\n  getYDomainMargins?: (containerHeight: number) => Margins;\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      | LineChartPoints[]\n      | HorizontalBarChartWithAxisDataPoint[]\n      | VerticalBarChartDataPoint[]\n      | DataPoint[]\n      | ScatterChartPoints[]\n      | GanttChartDataPoint[],\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    chartType: ChartTypes,\n    useSecondaryYScale?: boolean,\n    roundedTicks?: boolean,\n    scaleType?: AxisScaleType,\n  ) => ScaleLinear<number, number, never>;\n\n  /**\n   * Get the domain and range values\n   */\n  getDomainNRangeValues: (\n    points:\n      | LineChartPoints[]\n      | VerticalBarChartDataPoint[]\n      | VerticalStackedBarDataPoint[]\n      | HorizontalBarChartWithAxisDataPoint[]\n      | GroupedVerticalBarChartData[]\n      | HeatMapChartDataPoint[]\n      | GanttChartDataPoint[],\n    margins: Margins,\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   * 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"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js

@@ -67,6 +67,17 @@ const cartesianchartClassNames = {
         Bkfmm31: "fhuob2q",
         a6j6cd: "folz2wl"
     },
+    axisAnnotation: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "f13mqy1h",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "fcpl73t",
+        B80ckks: "fmd4ok8",
+        fsow6f: "f17mccla",
+        sj55zd: "fkfq4zb",
+        Bkfmm31: "fhuob2q",
+        a6j6cd: "folz2wl"
+    },
     xAxis: {
         Bifops1: "fk6onyz",
         lr70ht: "f17odlr9",
@@ -137,18 +148,8 @@ const cartesianchartClassNames = {
         Btl43ni: 0,
         B7oj6ja: 0,
         Dimara: "fq9zq91",
-        Bkecrkj: "f1aehjj5"
-    },
-    axisAnnotation: {
-        Bahqtrf: "fk6fouc",
-        Be2twd7: "f13mqy1h",
-        Bhrd7zp: "fl43uef",
-        Bg96gwp: "fcpl73t",
-        fsow6f: "f17mccla",
-        B80ckks: "fmd4ok8",
-        sj55zd: "fkfq4zb",
-        Bkfmm31: "fhuob2q",
-        a6j6cd: "folz2wl"
+        Bkecrkj: "f1aehjj5",
+        sj55zd: "f19n0e5"
     }
 }, {
     d: [
@@ -210,7 +211,8 @@ const cartesianchartClassNames = {
                 p: -1
             }
         ],
-        ".f1aehjj5{pointer-events:none;}"
+        ".f1aehjj5{pointer-events:none;}",
+        ".f19n0e5{color:var(--colorNeutralForeground1);}"
     ],
     m: [
         [

package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\n/**\n * @internal\n */ export const cartesianchartClassNames = {\n    root: 'fui-cart__root',\n    chartWrapper: 'fui-cart__chartWrapper',\n    axisTitle: 'fui-cart__axisTitle',\n    xAxis: 'fui-cart__xAxis',\n    yAxis: 'fui-cart__yAxis',\n    opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n    legendContainer: 'fui-cart__legendContainer',\n    svgTooltip: 'fui-cart_svgTooltip',\n    shapeStyles: 'fui-cart__shapeStyles',\n    descriptionMessage: 'fui-cart__descriptionMessage',\n    hover: 'fui-cart__hover',\n    tooltip: 'fui-cart__tooltip',\n    axisAnnotation: 'fui-cart__axisAnnotation',\n    chartTitle: 'fui-cart__chartTitle',\n    chart: 'fui-cart__chart'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        width: '100%',\n        height: '100%',\n        flexDirection: 'column',\n        overflow: 'hidden'\n    },\n    chartWrapper: {\n        overflow: 'auto'\n    },\n    axisTitle: {\n        ...typographyStyles.caption2Strong,\n        fontStyle: 'normal',\n        textAlign: 'center',\n        color: tokens.colorNeutralForeground2,\n        fill: tokens.colorNeutralForeground1,\n        [HighContrastSelector]: {\n            fill: 'CanvasText'\n        }\n    },\n    xAxis: {\n        '& text': {\n            fill: tokens.colorNeutralForeground1,\n            ...typographyStyles.caption2Strong,\n            forcedColorAdjust: 'auto'\n        },\n        '& line': {\n            opacity: 0.2,\n            stroke: tokens.colorNeutralForeground1,\n            width: '1px',\n            forcedColorAdjust: 'auto'\n        },\n        '& path': {\n            display: 'none'\n        }\n    },\n    yAxis: {\n        '& text': {\n            ...typographyStyles.caption2Strong,\n            fill: tokens.colorNeutralForeground1,\n            forcedColorAdjust: 'auto'\n        },\n        '& line': {\n            opacity: 0.2,\n            stroke: tokens.colorNeutralForeground1,\n            forcedColorAdjust: 'auto'\n        },\n        '& path': {\n            display: 'none'\n        }\n    },\n    rtl: {\n        '& g': {\n            textAnchor: 'end'\n        }\n    },\n    ltr: {},\n    opacityChangeOnHover: {\n        opacity: '0.1',\n        cursor: 'default'\n    },\n    legendContainer: {\n        marginTop: tokens.spacingVerticalS,\n        marginLeft: tokens.spacingHorizontalXL\n    },\n    svgTooltip: {\n        fill: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            fill: 'Canvas'\n        }\n    },\n    tooltip: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        position: 'absolute',\n        textAlign: 'center',\n        top: tokens.spacingVerticalNone,\n        backgroundColor: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none'\n    },\n    axisAnnotation: {\n        ...typographyStyles.caption2Strong,\n        textAlign: 'center',\n        fontStyle: 'normal',\n        color: tokens.colorNeutralForeground2,\n        fill: tokens.colorNeutralForeground1,\n        [HighContrastSelector]: {\n            fill: 'CanvasText'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useCartesianChartStyles = (props)=>{\n    var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3;\n    const _useRtl = useRtl();\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n        axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/ ),\n        xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/ ),\n        yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/ ),\n        opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n        legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/ ),\n        svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.svgTooltip),\n        tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        axisAnnotation: mergeClasses(cartesianchartClassNames.axisAnnotation, baseStyles.axisAnnotation),\n        chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chart)\n    };\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","useRtl","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","B80ckks","fsow6f","sj55zd","Bkfmm31","a6j6cd","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","d","p","m","useCartesianChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","_props_styles3","_useRtl","baseStyles","styles","reflowProps","mode"],"mappings":"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"}
+{"version":3,"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n/**\n * @internal\n */ export const cartesianchartClassNames = {\n    root: 'fui-cart__root',\n    chartWrapper: 'fui-cart__chartWrapper',\n    axisTitle: 'fui-cart__axisTitle',\n    xAxis: 'fui-cart__xAxis',\n    yAxis: 'fui-cart__yAxis',\n    opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n    legendContainer: 'fui-cart__legendContainer',\n    svgTooltip: 'fui-cart_svgTooltip',\n    shapeStyles: 'fui-cart__shapeStyles',\n    descriptionMessage: 'fui-cart__descriptionMessage',\n    hover: 'fui-cart__hover',\n    tooltip: 'fui-cart__tooltip',\n    axisAnnotation: 'fui-cart__axisAnnotation',\n    chartTitle: 'fui-cart__chartTitle',\n    chart: 'fui-cart__chart'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        width: '100%',\n        height: '100%',\n        flexDirection: 'column',\n        overflow: 'hidden'\n    },\n    chartWrapper: {\n        overflow: 'auto'\n    },\n    axisTitle: getAxisTitleStyle(),\n    axisAnnotation: getAxisTitleStyle(),\n    xAxis: {\n        '& text': {\n            fill: tokens.colorNeutralForeground1,\n            ...typographyStyles.caption2Strong,\n            forcedColorAdjust: 'auto'\n        },\n        '& line': {\n            opacity: 0.2,\n            stroke: tokens.colorNeutralForeground1,\n            width: '1px',\n            forcedColorAdjust: 'auto'\n        },\n        '& path': {\n            display: 'none'\n        }\n    },\n    yAxis: {\n        '& text': {\n            ...typographyStyles.caption2Strong,\n            fill: tokens.colorNeutralForeground1,\n            forcedColorAdjust: 'auto'\n        },\n        '& line': {\n            opacity: 0.2,\n            stroke: tokens.colorNeutralForeground1,\n            forcedColorAdjust: 'auto'\n        },\n        '& path': {\n            display: 'none'\n        }\n    },\n    rtl: {\n        '& g': {\n            textAnchor: 'end'\n        }\n    },\n    ltr: {},\n    opacityChangeOnHover: {\n        opacity: '0.1',\n        cursor: 'default'\n    },\n    legendContainer: {\n        marginTop: tokens.spacingVerticalS,\n        marginLeft: tokens.spacingHorizontalXL\n    },\n    svgTooltip: {\n        fill: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            fill: 'Canvas'\n        }\n    },\n    tooltip: getTooltipStyle()\n});\n/**\n *\n * Apply styling to the Carousel slots based on the state\n */ export const useCartesianChartStyles = (props)=>{\n    var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3;\n    const _useRtl = useRtl();\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n        axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/ ),\n        xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/ ),\n        yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/ ),\n        opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n        legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/ ),\n        svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.svgTooltip),\n        tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        axisAnnotation: mergeClasses(cartesianchartClassNames.axisAnnotation, baseStyles.axisAnnotation),\n        chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chart)\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","B80ckks","fsow6f","sj55zd","Bkfmm31","a6j6cd","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","d","p","m","useCartesianChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","_props_styles3","_useRtl","baseStyles","styles","reflowProps","mode"],"mappings":"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"}

package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js

@@ -19,6 +19,7 @@ _export(exports, {
 const _react = require("@griffel/react");
 const _reacttheme = require("@fluentui/react-theme");
 const _utilities = require("../../utilities/utilities");
+const _index = require("../../utilities/index");
 const cartesianchartClassNames = {
     root: 'fui-cart__root',
     chartWrapper: 'fui-cart__chartWrapper',
@@ -50,16 +51,8 @@ const cartesianchartClassNames = {
     chartWrapper: {
         overflow: 'auto'
     },
-    axisTitle: {
-        ..._reacttheme.typographyStyles.caption2Strong,
-        fontStyle: 'normal',
-        textAlign: 'center',
-        color: _reacttheme.tokens.colorNeutralForeground2,
-        fill: _reacttheme.tokens.colorNeutralForeground1,
-        [_utilities.HighContrastSelector]: {
-            fill: 'CanvasText'
-        }
-    },
+    axisTitle: (0, _index.getAxisTitleStyle)(),
+    axisAnnotation: (0, _index.getAxisTitleStyle)(),
     xAxis: {
         '& text': {
             fill: _reacttheme.tokens.colorNeutralForeground1,
@@ -111,28 +104,7 @@ const cartesianchartClassNames = {
             fill: 'Canvas'
         }
     },
-    tooltip: {
-        ..._reacttheme.typographyStyles.body1,
-        display: 'flex',
-        flexDirection: 'column',
-        ..._react.shorthands.padding(_reacttheme.tokens.spacingHorizontalS),
-        position: 'absolute',
-        textAlign: 'center',
-        top: _reacttheme.tokens.spacingVerticalNone,
-        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
-        borderRadius: _reacttheme.tokens.borderRadiusSmall,
-        pointerEvents: 'none'
-    },
-    axisAnnotation: {
-        ..._reacttheme.typographyStyles.caption2Strong,
-        textAlign: 'center',
-        fontStyle: 'normal',
-        color: _reacttheme.tokens.colorNeutralForeground2,
-        fill: _reacttheme.tokens.colorNeutralForeground1,
-        [_utilities.HighContrastSelector]: {
-            fill: 'CanvasText'
-        }
-    }
+    tooltip: (0, _index.getTooltipStyle)()
 });
 const useCartesianChartStyles = (props)=>{
     var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3;

package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CommonComponents/useCartesianChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { CartesianChartProps, CartesianChartStyles } from './CartesianChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\n\n/**\n * @internal\n */\nexport const cartesianchartClassNames: SlotClassNames<CartesianChartStyles> = {\n  root: 'fui-cart__root',\n  chartWrapper: 'fui-cart__chartWrapper',\n  axisTitle: 'fui-cart__axisTitle',\n  xAxis: 'fui-cart__xAxis',\n  yAxis: 'fui-cart__yAxis',\n  opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n  legendContainer: 'fui-cart__legendContainer',\n  svgTooltip: 'fui-cart_svgTooltip',\n  shapeStyles: 'fui-cart__shapeStyles',\n  descriptionMessage: 'fui-cart__descriptionMessage',\n  hover: 'fui-cart__hover',\n  tooltip: 'fui-cart__tooltip',\n  axisAnnotation: 'fui-cart__axisAnnotation',\n  chartTitle: 'fui-cart__chartTitle',\n  chart: 'fui-cart__chart',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column',\n    overflow: 'hidden',\n  },\n  chartWrapper: {\n    overflow: 'auto',\n  },\n  axisTitle: {\n    ...typographyStyles.caption2Strong,\n    fontStyle: 'normal',\n    textAlign: 'center',\n    color: tokens.colorNeutralForeground2,\n    fill: tokens.colorNeutralForeground1,\n    [HighContrastSelector]: {\n      fill: 'CanvasText',\n    },\n  },\n  xAxis: {\n    '& text': {\n      fill: tokens.colorNeutralForeground1,\n      ...typographyStyles.caption2Strong,\n      forcedColorAdjust: 'auto',\n    },\n    '& line': {\n      opacity: 0.2,\n      stroke: tokens.colorNeutralForeground1,\n      width: '1px',\n      forcedColorAdjust: 'auto',\n    },\n    '& path': {\n      display: 'none',\n    },\n  },\n  yAxis: {\n    '& text': {\n      ...typographyStyles.caption2Strong,\n      fill: tokens.colorNeutralForeground1,\n      forcedColorAdjust: 'auto',\n    },\n    '& line': {\n      opacity: 0.2,\n      stroke: tokens.colorNeutralForeground1,\n      forcedColorAdjust: 'auto',\n    },\n    '& path': {\n      display: 'none',\n    },\n  },\n  rtl: {\n    '& g': {\n      textAnchor: 'end',\n    },\n  },\n  ltr: {},\n  opacityChangeOnHover: {\n    opacity: '0.1', //supports custom opacity ??\n    cursor: 'default', //supports custom cursor ??\n  },\n  legendContainer: {\n    marginTop: tokens.spacingVerticalS,\n    marginLeft: tokens.spacingHorizontalXL,\n  },\n  svgTooltip: {\n    fill: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  tooltip: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    position: 'absolute',\n    textAlign: 'center',\n    top: tokens.spacingVerticalNone,\n    backgroundColor: tokens.colorNeutralBackground1,\n    borderRadius: tokens.borderRadiusSmall,\n    pointerEvents: 'none',\n  },\n  axisAnnotation: {\n    ...typographyStyles.caption2Strong,\n    textAlign: 'center',\n    fontStyle: 'normal',\n    color: tokens.colorNeutralForeground2,\n    fill: tokens.colorNeutralForeground1,\n    [HighContrastSelector]: {\n      fill: 'CanvasText',\n    },\n  },\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useCartesianChartStyles = (props: CartesianChartProps): CartesianChartStyles => {\n  const _useRtl = useRtl();\n  const baseStyles = useStyles();\n  return {\n    root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, props.styles?.root),\n    chartWrapper: mergeClasses(\n      cartesianchartClassNames.chartWrapper,\n      props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapper : '',\n      props.styles?.chartWrapper,\n    ),\n    axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/),\n    xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/),\n    yAxis: mergeClasses(\n      cartesianchartClassNames.yAxis,\n      baseStyles.yAxis,\n      _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/,\n    ),\n    opacityChangeOnHover: mergeClasses(\n      cartesianchartClassNames.opacityChangeOnHover,\n      baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/,\n    ),\n    legendContainer: mergeClasses(\n      cartesianchartClassNames.legendContainer,\n      baseStyles.legendContainer /*props.styles?.legendContainer*/,\n    ),\n    svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, props.styles?.svgTooltip),\n    tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    axisAnnotation: mergeClasses(\n      cartesianchartClassNames.axisAnnotation,\n      baseStyles.axisAnnotation,\n      /*props.styles?.axisAnnotation,*/\n    ),\n    chart: mergeClasses(cartesianchartClassNames.chart, props.styles?.chart),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","useRtl","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","useStyles","body1","display","width","height","flexDirection","overflow","caption2Strong","fontStyle","textAlign","color","colorNeutralForeground2","fill","colorNeutralForeground1","forcedColorAdjust","opacity","stroke","rtl","textAnchor","ltr","cursor","marginTop","spacingVerticalS","marginLeft","spacingHorizontalXL","colorNeutralBackground1","padding","spacingHorizontalS","position","top","spacingVerticalNone","backgroundColor","borderRadius","borderRadiusSmall","pointerEvents","useCartesianChartStyles","props","_useRtl","baseStyles","styles","reflowProps","mode"],"mappings":"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"}
+{"version":3,"sources":["../src/components/CommonComponents/useCartesianChartStyles.styles.ts"],"sourcesContent":["import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { CartesianChartProps, CartesianChartStyles } from './CartesianChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const cartesianchartClassNames: SlotClassNames<CartesianChartStyles> = {\n  root: 'fui-cart__root',\n  chartWrapper: 'fui-cart__chartWrapper',\n  axisTitle: 'fui-cart__axisTitle',\n  xAxis: 'fui-cart__xAxis',\n  yAxis: 'fui-cart__yAxis',\n  opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n  legendContainer: 'fui-cart__legendContainer',\n  svgTooltip: 'fui-cart_svgTooltip',\n  shapeStyles: 'fui-cart__shapeStyles',\n  descriptionMessage: 'fui-cart__descriptionMessage',\n  hover: 'fui-cart__hover',\n  tooltip: 'fui-cart__tooltip',\n  axisAnnotation: 'fui-cart__axisAnnotation',\n  chartTitle: 'fui-cart__chartTitle',\n  chart: 'fui-cart__chart',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column',\n    overflow: 'hidden',\n  },\n  chartWrapper: {\n    overflow: 'auto',\n  },\n  axisTitle: getAxisTitleStyle() as GriffelStyle,\n  axisAnnotation: getAxisTitleStyle() as GriffelStyle,\n  xAxis: {\n    '& text': {\n      fill: tokens.colorNeutralForeground1,\n      ...typographyStyles.caption2Strong,\n      forcedColorAdjust: 'auto',\n    },\n    '& line': {\n      opacity: 0.2,\n      stroke: tokens.colorNeutralForeground1,\n      width: '1px',\n      forcedColorAdjust: 'auto',\n    },\n    '& path': {\n      display: 'none',\n    },\n  },\n  yAxis: {\n    '& text': {\n      ...typographyStyles.caption2Strong,\n      fill: tokens.colorNeutralForeground1,\n      forcedColorAdjust: 'auto',\n    },\n    '& line': {\n      opacity: 0.2,\n      stroke: tokens.colorNeutralForeground1,\n      forcedColorAdjust: 'auto',\n    },\n    '& path': {\n      display: 'none',\n    },\n  },\n  rtl: {\n    '& g': {\n      textAnchor: 'end',\n    },\n  },\n  ltr: {},\n  opacityChangeOnHover: {\n    opacity: '0.1', //supports custom opacity ??\n    cursor: 'default', //supports custom cursor ??\n  },\n  legendContainer: {\n    marginTop: tokens.spacingVerticalS,\n    marginLeft: tokens.spacingHorizontalXL,\n  },\n  svgTooltip: {\n    fill: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  tooltip: getTooltipStyle() as GriffelStyle,\n});\n/**\n *\n * Apply styling to the Carousel slots based on the state\n */\nexport const useCartesianChartStyles = (props: CartesianChartProps): CartesianChartStyles => {\n  const _useRtl = useRtl();\n  const baseStyles = useStyles();\n  return {\n    root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, props.styles?.root),\n    chartWrapper: mergeClasses(\n      cartesianchartClassNames.chartWrapper,\n      props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapper : '',\n      props.styles?.chartWrapper,\n    ),\n    axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/),\n    xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/),\n    yAxis: mergeClasses(\n      cartesianchartClassNames.yAxis,\n      baseStyles.yAxis,\n      _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/,\n    ),\n    opacityChangeOnHover: mergeClasses(\n      cartesianchartClassNames.opacityChangeOnHover,\n      baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/,\n    ),\n    legendContainer: mergeClasses(\n      cartesianchartClassNames.legendContainer,\n      baseStyles.legendContainer /*props.styles?.legendContainer*/,\n    ),\n    svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, props.styles?.svgTooltip),\n    tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    axisAnnotation: mergeClasses(\n      cartesianchartClassNames.axisAnnotation,\n      baseStyles.axisAnnotation,\n      /*props.styles?.axisAnnotation,*/\n    ),\n    chart: mergeClasses(cartesianchartClassNames.chart, props.styles?.chart),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","useStyles","body1","display","width","height","flexDirection","overflow","fill","colorNeutralForeground1","caption2Strong","forcedColorAdjust","opacity","stroke","rtl","textAnchor","ltr","cursor","marginTop","spacingVerticalS","marginLeft","spacingHorizontalXL","colorNeutralBackground1","useCartesianChartStyles","props","_useRtl","baseStyles","styles","reflowProps","mode"],"mappings":"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"}

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

@@ -27,9 +27,11 @@ const _index6 = require("../GaugeChart/index");
 const _index7 = require("../GroupedVerticalBarChart/index");
 const _index8 = require("../VerticalBarChart/index");
 const _index9 = require("../ScatterChart/index");
+const _FunnelChart = require("../FunnelChart/FunnelChart");
+const _index10 = require("../GanttChart/index");
 const _withResponsiveContainer = require("../ResponsiveContainer/withResponsiveContainer");
-const _index10 = require("../ChartTable/index");
-const _index11 = require("../Legends/index");
+const _index11 = require("../ChartTable/index");
+const _index12 = require("../Legends/index");
 const ResponsiveDonutChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index.DonutChart);
 const ResponsiveVerticalStackedBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index1.VerticalStackedBarChart);
 const ResponsiveLineChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index2.LineChart);
@@ -41,7 +43,10 @@ const ResponsiveGaugeChart = (0, _withResponsiveContainer.withResponsiveContaine
 const ResponsiveGroupedVerticalBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index7.GroupedVerticalBarChart);
 const ResponsiveVerticalBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index8.VerticalBarChart);
 const ResponsiveScatterChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index9.ScatterChart);
-const ResponsiveChartTable = (0, _withResponsiveContainer.withResponsiveContainer)(_index10.ChartTable);
+const ResponsiveChartTable = (0, _withResponsiveContainer.withResponsiveContainer)(_index11.ChartTable);
+const ResponsiveGanttChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index10.GanttChart);
+// Removing responsive wrapper for FunnelChart as responsive container is not working with FunnelChart
+//const ResponsiveFunnelChart = withResponsiveContainer(FunnelChart);
 // Default x-axis key for grouping traces. Also applicable for PieData and SankeyData where x-axis is not defined.
 const DEFAULT_XAXIS = 'x';
 const FALLBACK_TYPE = 'fallback';
@@ -135,6 +140,14 @@ const chartMap = {
         renderer: ResponsiveScatterChart,
         preTransformOperation: LineAreaPreTransformOp
     },
+    gantt: {
+        transformer: _PlotlySchemaAdapter.transformPlotlyJsonToGanttChartProps,
+        renderer: ResponsiveGanttChart
+    },
+    funnel: {
+        transformer: _PlotlySchemaAdapter.transformPlotlyJsonToFunnelChartProps,
+        renderer: _FunnelChart.FunnelChart
+    },
     fallback: {
         transformer: _PlotlySchemaAdapter.transformPlotlyJsonToVSBCProps,
         renderer: ResponsiveVerticalStackedBarChart
@@ -165,10 +178,10 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
         ...plotlyInput,
         data: chart.validTracesInfo.map((trace)=>plotlyInput.data[trace.index])
     };
-    const validTracesFilteredIndex = chart.validTracesInfo.map((trace, index)=>[
+    const validTracesFilteredIndex = chart.validTracesInfo.map((trace, index)=>({
             index,
-            trace.type
-        ]);
+            type: trace.type
+        }));
     let { selectedLegends } = plotlySchema;
     const colorMap = useColorMapping();
     const isDarkTheme = useIsDarkTheme();
@@ -209,7 +222,7 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
     };
     function createLegends(legendProps) {
         // eslint-disable-next-line react/jsx-no-bind
-        return /*#__PURE__*/ _react.createElement(_index11.Legends, {
+        return /*#__PURE__*/ _react.createElement(_index12.Legends, {
             ...legendProps,
             selectedLegends: activeLegends,
             onChange: onActiveLegendsChange
@@ -239,24 +252,50 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
     if (chart.type === 'scatterpolar') {
         const cartesianProjection = (0, _PlotlySchemaAdapter.projectPolarToCartesian)(plotlyInputWithValidData);
         plotlyInputWithValidData.data = cartesianProjection.data;
+        plotlyInputWithValidData.layout = cartesianProjection.layout;
         validTracesFilteredIndex.forEach((trace, index)=>{
-            if (trace[1] === 'scatterpolar') {
-                validTracesFilteredIndex[index][1] = 'line'; // Change type to line for rendering
+            if (trace.type === 'scatterpolar') {
+                var _plotlyInputWithValidData_data_index;
+                var _plotlyInputWithValidData_data_index_mode;
+                const mode = (_plotlyInputWithValidData_data_index_mode = (_plotlyInputWithValidData_data_index = plotlyInputWithValidData.data[index]) === null || _plotlyInputWithValidData_data_index === void 0 ? void 0 : _plotlyInputWithValidData_data_index.mode) !== null && _plotlyInputWithValidData_data_index_mode !== void 0 ? _plotlyInputWithValidData_data_index_mode : '';
+                if (mode.includes('line')) {
+                    validTracesFilteredIndex[index].type = 'line';
+                } else if (mode.includes('markers') || mode === 'text') {
+                    validTracesFilteredIndex[index].type = 'scatter';
+                } else {
+                    validTracesFilteredIndex[index].type = 'line';
+                }
             }
         });
     }
     const groupedTraces = {};
+    let nonCartesianTraceCount = 0;
     plotlyInputWithValidData.data.forEach((trace, index)=>{
-        var _trace_xaxis;
-        const xAxisKey = (_trace_xaxis = trace.xaxis) !== null && _trace_xaxis !== void 0 ? _trace_xaxis : DEFAULT_XAXIS;
-        if (!groupedTraces[xAxisKey]) {
-            groupedTraces[xAxisKey] = [];
+        let traceKey = '';
+        if ((0, _PlotlySchemaAdapter.isNonPlotType)(chart.validTracesInfo[index].type)) {
+            traceKey = `${_PlotlySchemaAdapter.NON_PLOT_KEY_PREFIX}${nonCartesianTraceCount + 1}`;
+            nonCartesianTraceCount++;
+        } else {
+            var _trace_xaxis;
+            traceKey = (_trace_xaxis = trace.xaxis) !== null && _trace_xaxis !== void 0 ? _trace_xaxis : DEFAULT_XAXIS;
         }
-        groupedTraces[xAxisKey].push(index);
+        if (!groupedTraces[traceKey]) {
+            groupedTraces[traceKey] = [];
+        }
+        groupedTraces[traceKey].push(index);
     });
     isMultiPlot.current = Object.keys(groupedTraces).length > 1;
-    const gridProperties = (0, _PlotlySchemaAdapter.getGridProperties)(plotlyInputWithValidData.layout, isMultiPlot.current);
-    const allupLegendsProps = (0, _PlotlySchemaAdapter.getAllupLegendsProps)(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme);
+    const gridProperties = (0, _PlotlySchemaAdapter.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.SINGLE_REPEAT && gridProperties.templateColumns === _PlotlySchemaAdapter.SINGLE_REPEAT) {
+        Object.keys(groupedTraces).forEach((key, index)=>{
+            if (index > 0) {
+                delete groupedTraces[key];
+            }
+        });
+        isMultiPlot.current = false;
+    }
+    const allupLegendsProps = (0, _PlotlySchemaAdapter.getAllupLegendsProps)(plotlyInputWithValidData, colorMap, props.colorwayType, chart.validTracesInfo, isDarkTheme);
     // map through the grouped traces and render the appropriate chart
     return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("div", {
         style: {
@@ -269,9 +308,9 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
             ...plotlyInputWithValidData,
             data: index.map((idx)=>plotlyInputWithValidData.data[idx])
         };
-        const filteredTracesInfo = validTracesFilteredIndex.filter((trace)=>index.includes(trace[0]));
-        let chartType = validTracesFilteredIndex.some((trace)=>trace[1] === FALLBACK_TYPE) || chart.type === FALLBACK_TYPE ? FALLBACK_TYPE : filteredTracesInfo[0][1];
-        if (validTracesFilteredIndex.some((trace)=>trace[1] === 'line') && validTracesFilteredIndex.some((trace)=>trace[1] === 'scatter')) {
+        const filteredTracesInfo = validTracesFilteredIndex.filter((trace)=>index.includes(trace.index));
+        let chartType = validTracesFilteredIndex.some((trace)=>trace.type === FALLBACK_TYPE) || chart.type === FALLBACK_TYPE ? FALLBACK_TYPE : filteredTracesInfo[0].type;
+        if (validTracesFilteredIndex.some((trace)=>trace.type === 'line') && validTracesFilteredIndex.some((trace)=>trace.type === 'scatter')) {
             chartType = 'line';
         }
         const chartEntry = chartMap[chartType];

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DeclarativeChart/DeclarativeChart.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport type { PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n  decodeBase64Fields,\n  isArrayOrTypedArray,\n  isMonthArray,\n  mapFluentChart,\n  sanitizeJson,\n} from '@fluentui/chart-utilities';\nimport type { GridProperties } from './PlotlySchemaAdapter';\nimport { tokens } from '@fluentui/react-theme';\nimport { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';\nimport { Theme, webLightTheme } from '@fluentui/tokens';\nimport * as d3Color from 'd3-color';\n\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 { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\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 { Chart, ImageExportOptions } from '../../types/index';\nimport { ScatterChart } from '../ScatterChart/index';\n\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ChartTable } from '../ChartTable/index';\nimport { LegendsProps, Legends } from '../Legends/index';\nimport { JSXElement } from '@fluentui/react-utilities/src/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?: React.RefObject<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?: ImageExportOptions) => 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): JSXElement {\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\nconst useIsDarkTheme = (): boolean => {\n  const parentV9Theme = React.useContext(V9ThemeContext) as Theme;\n  const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme;\n\n  // Get background and foreground colors\n  const backgroundColor = d3Color.hsl(v9Theme.colorNeutralBackground1);\n  const foregroundColor = d3Color.hsl(v9Theme.colorNeutralForeground1);\n\n  const isDarkTheme = backgroundColor.l < foregroundColor.l;\n\n  return isDarkTheme;\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: [number, string][] = chart.validTracesInfo!.map((trace, index) => [\n    index,\n    trace.type,\n  ]);\n\n  let { selectedLegends } = plotlySchema;\n  const colorMap = useColorMapping();\n  const isDarkTheme = useIsDarkTheme();\n  const chartRef = React.useRef<Chart>(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  };\n\n  function createLegends(legendProps: LegendsProps): JSXElement {\n    // eslint-disable-next-line react/jsx-no-bind\n    return <Legends {...legendProps} selectedLegends={activeLegends} onChange={onActiveLegendsChange} />;\n  }\n\n  // TODO\n  const exportAsImage = React.useCallback((opts?: ImageExportOptions): 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: tokens.colorNeutralBackground1,\n          scale: 5,\n          ...opts,\n        })\n        .then(resolve)\n        .catch(reject);\n    });\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  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"],"names":["React","decodeBase64Fields","isArrayOrTypedArray","isMonthArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","correctYearMonth","getGridProperties","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToAreaChartProps","transformPlotlyJsonToLineChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","transformPlotlyJsonToChartTableProps","transformPlotlyJsonToScatterChartProps","projectPolarToCartesian","getAllupLegendsProps","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","ScatterChart","withResponsiveContainer","ChartTable","Legends","ResponsiveDonutChart","ResponsiveVerticalStackedBarChart","ResponsiveLineChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveHeatMapChart","ResponsiveSankeyChart","ResponsiveGaugeChart","ResponsiveGroupedVerticalBarChart","ResponsiveVerticalBarChart","ResponsiveScatterChart","ResponsiveChartTable","DEFAULT_XAXIS","FALLBACK_TYPE","useColorMapping","colorMap","useRef","Map","renderChart","Renderer","transformer","transformerArgs","commonProps","cellRow","cellColumn","chartProps","div","key","style","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","LineAreaPreTransformOp","plotlyInput","xValues","data","x","isXMonth","renderData","map","dataPoint","layout","chartMap","donut","renderer","sankey","table","horizontalbar","groupedverticalbar","verticalstackedbar","heatmap","gauge","verticalbar","area","preTransformOperation","line","scatter","fallback","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","DeclarativeChart","forwardRef","props","forwardedRef","plotlySchema","chartSchema","chart","isValid","Error","errorMessage","error","plotlyInputWithValidData","validTracesInfo","trace","index","validTracesFilteredIndex","type","selectedLegends","chartRef","isMultiPlot","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","legendProps","componentRef","createLegends","exportAsImage","useCallback","opts","Promise","resolve","reject","current","toImage","background","scale","then","catch","useImperativeHandle","cartesianProjection","forEach","groupedTraces","xAxisKey","xaxis","push","Object","length","gridProperties","allupLegendsProps","colorwayType","display","gridTemplateRows","templateRows","gridTemplateColumns","templateColumns","entries","plotlyInputForGroup","idx","filteredTracesInfo","filter","includes","chartType","some","chartEntry","preTransformCondition","undefined","transformedInput","cellProperties","xAxisAnnotation","xAnnotation","yAxisAnnotation","yAnnotation","row","column","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"sources":["../src/components/DeclarativeChart/DeclarativeChart.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport type { Data, PlotData, PlotlySchema, OutputChartType, TraceInfo } from '@fluentui/chart-utilities';\nimport {\n  decodeBase64Fields,\n  isArrayOrTypedArray,\n  isMonthArray,\n  mapFluentChart,\n  sanitizeJson,\n} from '@fluentui/chart-utilities';\nimport type { GridProperties } from './PlotlySchemaAdapter';\nimport { tokens } from '@fluentui/react-theme';\nimport { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';\nimport { Theme, webLightTheme } from '@fluentui/tokens';\nimport * as d3Color from 'd3-color';\n\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  transformPlotlyJsonToFunnelChartProps,\n  transformPlotlyJsonToGanttChartProps,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\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 { Chart, ImageExportOptions } from '../../types/index';\nimport { ScatterChart } from '../ScatterChart/index';\nimport { FunnelChart } from '../FunnelChart/FunnelChart';\nimport { GanttChart } from '../GanttChart/index';\n\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ChartTable } from '../ChartTable/index';\nimport { LegendsProps, Legends } from '../Legends/index';\nimport { JSXElement } from '@fluentui/react-utilities/src/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);\nconst ResponsiveGanttChart = withResponsiveContainer(GanttChart);\n// Removing responsive wrapper for FunnelChart as responsive container is not working with FunnelChart\n//const ResponsiveFunnelChart = withResponsiveContainer(FunnelChart);\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?: React.RefObject<IDeclarativeChart | null>;\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?: ImageExportOptions) => 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): JSXElement {\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  gantt: {\n    transformer: typeof transformPlotlyJsonToGanttChartProps;\n    renderer: typeof ResponsiveGanttChart;\n  } & PreTransformHooks;\n  funnel: {\n    transformer: typeof transformPlotlyJsonToFunnelChartProps;\n    renderer: typeof FunnelChart;\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  gantt: {\n    transformer: transformPlotlyJsonToGanttChartProps,\n    renderer: ResponsiveGanttChart,\n  },\n  funnel: {\n    transformer: transformPlotlyJsonToFunnelChartProps,\n    renderer: FunnelChart,\n  },\n  fallback: {\n    transformer: transformPlotlyJsonToVSBCProps,\n    renderer: ResponsiveVerticalStackedBarChart,\n  },\n};\n\nconst useIsDarkTheme = (): boolean => {\n  const parentV9Theme = React.useContext(V9ThemeContext) as Theme;\n  const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme;\n\n  // Get background and foreground colors\n  const backgroundColor = d3Color.hsl(v9Theme.colorNeutralBackground1);\n  const foregroundColor = d3Color.hsl(v9Theme.colorNeutralForeground1);\n\n  const isDarkTheme = backgroundColor.l < foregroundColor.l;\n\n  return isDarkTheme;\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 isDarkTheme = useIsDarkTheme();\n  const chartRef = React.useRef<Chart>(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  };\n\n  function createLegends(legendProps: LegendsProps): JSXElement {\n    // eslint-disable-next-line react/jsx-no-bind\n    return <Legends {...legendProps} selectedLegends={activeLegends} onChange={onActiveLegendsChange} />;\n  }\n\n  // TODO\n  const exportAsImage = React.useCallback((opts?: ImageExportOptions): 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: tokens.colorNeutralBackground1,\n          scale: 5,\n          ...opts,\n        })\n        .then(resolve)\n        .catch(reject);\n    });\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    plotlyInputWithValidData.layout = cartesianProjection.layout;\n    validTracesFilteredIndex.forEach((trace, index) => {\n      if (trace.type === 'scatterpolar') {\n        const mode = (plotlyInputWithValidData.data[index] as PlotData)?.mode ?? '';\n        if (mode.includes('line')) {\n          validTracesFilteredIndex[index].type = 'line';\n        } else if (mode.includes('markers') || mode === 'text') {\n          validTracesFilteredIndex[index].type = 'scatter';\n        } else {\n          validTracesFilteredIndex[index].type = 'line';\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"],"names":["React","decodeBase64Fields","isArrayOrTypedArray","isMonthArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","correctYearMonth","getGridProperties","isNonPlotType","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToAreaChartProps","transformPlotlyJsonToLineChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","transformPlotlyJsonToChartTableProps","transformPlotlyJsonToScatterChartProps","projectPolarToCartesian","getAllupLegendsProps","NON_PLOT_KEY_PREFIX","SINGLE_REPEAT","transformPlotlyJsonToFunnelChartProps","transformPlotlyJsonToGanttChartProps","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","ScatterChart","FunnelChart","GanttChart","withResponsiveContainer","ChartTable","Legends","ResponsiveDonutChart","ResponsiveVerticalStackedBarChart","ResponsiveLineChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveHeatMapChart","ResponsiveSankeyChart","ResponsiveGaugeChart","ResponsiveGroupedVerticalBarChart","ResponsiveVerticalBarChart","ResponsiveScatterChart","ResponsiveChartTable","ResponsiveGanttChart","DEFAULT_XAXIS","FALLBACK_TYPE","useColorMapping","colorMap","useRef","Map","renderChart","Renderer","transformer","transformerArgs","commonProps","cellRow","cellColumn","chartProps","div","key","style","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","LineAreaPreTransformOp","plotlyInput","xValues","data","x","isXMonth","renderData","map","dataPoint","layout","chartMap","donut","renderer","sankey","table","horizontalbar","groupedverticalbar","verticalstackedbar","heatmap","gauge","verticalbar","area","preTransformOperation","line","scatter","gantt","funnel","fallback","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","DeclarativeChart","forwardRef","props","forwardedRef","plotlySchema","chartSchema","chart","isValid","Error","errorMessage","error","plotlyInputWithValidData","validTracesInfo","trace","index","validTracesFilteredIndex","type","selectedLegends","chartRef","isMultiPlot","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","legendProps","componentRef","createLegends","exportAsImage","useCallback","opts","Promise","resolve","reject","current","toImage","background","scale","then","catch","useImperativeHandle","cartesianProjection","forEach","mode","includes","groupedTraces","nonCartesianTraceCount","traceKey","xaxis","push","Object","length","gridProperties","templateRows","templateColumns","allupLegendsProps","colorwayType","display","gridTemplateRows","gridTemplateColumns","entries","xAxisKey","plotlyInputForGroup","idx","filteredTracesInfo","filter","chartType","some","chartEntry","preTransformCondition","undefined","transformedInput","cellProperties","xAxisAnnotation","xAnnotation","yAxisAnnotation","yAnnotation","row","column","displayName","defaultProps"],"mappings":"AAAA,uDAAuD,GACvD,YAAYA;;;;;;;eAwUCyH;;;;iEAxUU,QAAQ;gCAQxB,4BAA4B;4BAEZ,wBAAwB;qCACS,kCAAkC;wBACrD,mBAAmB;mEAC/B,WAAW;qCAwB7B,wBAAwB;uBAEJ,sBAAsB;wBACT,mCAAmC;wBACjD,qBAAqB;wBACJ,sCAAsC;wBACvD,qBAAqB;wBAClB,wBAAwB;6BACzB,6BAA6B;wBAC9B,sBAAsB;wBACT,mCAAmC;wBAC1C,4BAA4B;wBAEhC,wBAAwB;6BACzB,6BAA6B;yBAC9B,sBAAsB;yCAET,iDAAiD;yBAC9D,sBAAsB;yBACX,mBAAmB;AAGzD,MAAMzE,2BAAuBH,gDAAAA,EAAwBb,iBAAAA;AACrD,MAAMiB,wCAAoCJ,gDAAAA,EAAwBZ,+BAAAA;AAClE,MAAMiB,0BAAsBL,gDAAAA,EAAwBX,iBAAAA;AACpD,MAAMiB,uCAAuCN,oDAAAA,EAAwBV,kCAAAA;AACrE,MAAMiB,0BAAsBP,gDAAAA,EAAwBT,iBAAAA;AACpD,MAAMiB,6BAAyBR,gDAAAA,EAAwBR,oBAAAA;AACvD,MAAMiB,4BAAwBT,gDAAAA,EAAwBP,wBAAAA;AACtD,MAAMiB,2BAAuBV,gDAAAA,EAAwBN,kBAAAA;AACrD,MAAMiB,wCAAoCX,gDAAAA,EAAwBL,+BAAAA;AAClE,MAAMiB,iCAA6BZ,gDAAAA,EAAwBJ,wBAAAA;AAC3D,MAAMiB,6BAAyBb,gDAAAA,EAAwBH,oBAAAA;AACvD,MAAMiB,2BAAuBd,gDAAAA,EAAwBC,mBAAAA;AACrD,MAAMc,2BAAuBf,gDAAAA,EAAwBD,mBAAAA;AACrD,sGAAsG;AACtG,qEAAqE;AAErE,kHAAkH;AAClH,MAAMiB,gBAAgB;AACtB,MAAMC,gBAAgB;AAoDtB,MAAMC,kBAAkB;IACtB,MAAMC,WAAWhE,OAAMiE,MAAM,CAAC,IAAIC;IAClC,OAAOF;AACT;AAEA,SAASG,YACPC,QAAqC,EACrC,AACAC,WAAuC,EACvC,AACAC,eAAsB,EACtBC,WAA4B,EAC5BC,OAAe,EACfC,UAN8D,AAM5C,aAJ4C;IAM9D,MAAMC,aAAaL,eAAeC;IAClC,OAAA,WAAA,GACE,OAAA,aAAA,CAACK,OAAAA;QACCC,KAAK,GAAGJ,QAAQ,CAAC,EAAEC,YAAY;QAC/BI,OAAO;YACLC,cAAcN;YACdO,YAAYP,UAAU;YACtBQ,iBAAiBP;YACjBQ,eAAeR,aAAa;QAC9B;qBAEA,OAAA,aAAA,CAACL,UAAAA;QAAU,GAAGM,UAAU;QAAG,GAAGH,WAAW;;AAG/C;AAOA,MAAMW,yBAAyB,CAACC;IAC9B,MAAMC,UAAWD,YAAYE,IAAI,CAAC,EAAE,CAAcC,CAAC;IACnD,MAAMC,WAAWpF,gCAAAA,EAAaiF;IAC9B,IAAII,aAAaL,YAAYE,IAAI;IACjC,IAAIE,UAAU;QACZC,aAAaL,YAAYE,IAAI,CAACI,GAAG,CAAC,CAACC,YAAyB,CAAA;gBAC1D,GAAGA,SAAS;gBACZJ,GAAG3E,yCAAAA,EAAiB+E,UAAUJ,CAAC;aACjC,CAAA;IACF;IACA,OAAO;QAAED,MAAMG;QAAYG,QAAQR,YAAYQ,MAAM;IAAC;AACxD;AAiEA,MAAMC,WAAyB;IAC7B,0BAA0B;IAC1BC,OAAO;QACLxB,aAAavD,oDAAAA;QACbgF,UAAU9C;IACZ;IACA,6BAA6B;IAC7B+C,QAAQ;QACN1B,aAAajD,qDAAAA;QACb0E,UAAUxC;IACZ;IACA,4BAA4B;IAC5B0C,OAAO;QACL3B,aAAa7C,yDAAAA;QACbsE,UAAUnC;IACZ;IACA,2BAA2B;IAC3BsC,eAAe;QACb5B,aAAanD,oEAAAA;QACb4E,UAAU3C;IACZ;IACA+C,oBAAoB;QAClB7B,aAAa/C,mDAAAA;QACbwE,UAAUtC;IACZ;IACA2C,oBAAoB;QAClB9B,aAAatD,mDAAAA;QACb+E,UAAU7C;IACZ;IACAmD,SAAS;QACP/B,aAAalD,sDAAAA;QACb2E,UAAUzC;IACZ;IACAgD,OAAO;QACLhC,aAAahD,oDAAAA;QACbyE,UAAUvC;IACZ;IACA+C,aAAa;QACXjC,aAAa9C,kDAAAA;QACbuE,UAAUrC;IACZ;IACA8C,MAAM;QACJlC,aAAarD,wDAAAA;QACb8E,UAAU1C;QACVoD,uBAAuBtB;IACzB;IACAuB,MAAM;QACJpC,aAAapD,wDAAAA;QACb6E,UAAU5C;QACVsD,uBAAuBtB;IACzB;IACAwB,SAAS;QACPrC,aAAa5C,2DAAAA;QACbqE,UAAUpC;QACV8C,uBAAuBtB;IACzB;IACAyB,OAAO;QACLtC,aAAatC,yDAAAA;QACb+D,UAAUlC;IACZ;IACAgD,QAAQ;QACNvC,aAAavC,0DAAAA;QACbgE,UAAUnD,wBAAAA;IACZ;IACAkE,UAAU;QACRxC,aAAatD,mDAAAA;QACb+E,UAAU7C;IACZ;AACF;AAEA,MAAM6D,iBAAiB;IACrB,MAAMC,gBAAgB/G,OAAMgH,UAAU,CAACxG,0CAAAA;IACvC,MAAMyG,UAAiBF,gBAAgBA,gBAAgBtG,qBAAAA;IAEvD,uCAAuC;IACvC,MAAMyG,kBAAkBxG,SAAQyG,GAAG,CAACF,QAAQG,uBAAuB;IACnE,MAAMC,kBAAkB3G,SAAQyG,GAAG,CAACF,QAAQK,uBAAuB;IAEnE,MAAMC,cAAcL,gBAAgBM,CAAC,GAAGH,gBAAgBG,CAAC;IAEzD,OAAOD;AACT;AAMO,yBAAME,WAAAA,GAAmEzH,OAAM0H,UAAU,CAG9F,CAACC,OAAOC;IACR,MAAM,EAAEC,YAAY,EAAE,OAAGxH,4BAAAA,EAAasH,MAAMG,WAAW;IACvD,MAAMC,YAAyB3H,8BAAAA,EAAeyH;IAC9C,IAAI,CAACE,MAAMC,OAAO,EAAE;QAClB,MAAM,IAAIC,MAAM,CAAC,sBAAsB,EAAEF,MAAMG,YAAY,EAAE;IAC/D;IACA,IAAI/C,cAAc0C;IAClB,IAAI;QACF1C,kBAAclF,kCAAAA,EAAmBkF;IACnC,EAAE,OAAOgD,OAAO;QACd,MAAM,IAAIF,MAAM,CAAC,gCAAgC,EAAEE,OAAO;IAC5D;IACA,MAAMC,2BAAyC;QAC7C,GAAGjD,WAAW;QACdE,MAAM0C,MAAMM,eAAe,CAAE5C,GAAG,CAAC6C,CAAAA,QAASnD,YAAYE,IAAI,CAACiD,MAAMC,KAAK,CAAC;IACzE;IAEA,MAAMC,2BAAwCT,MAAMM,eAAe,CAAE5C,GAAG,CAAC,CAAC6C,OAAOC,QAAW,CAAA;YAC1FA;YACAE,MAAMH,MAAMG,IAAI;SAClB,CAAA;IAEA,IAAI,EAAEC,eAAe,EAAE,GAAGb;IAC1B,MAAM7D,WAAWD;IACjB,MAAMwD,cAAcT;IACpB,MAAM6B,WAAW3I,OAAMiE,MAAM,CAAQ;IACrC,MAAM2E,cAAc5I,OAAMiE,MAAM,CAAC;IAEjC,IAAI,KAAC/D,mCAAAA,EAAoBwI,kBAAkB;QACzCA,kBAAkB,EAAE;IACtB;IAEA,MAAM,CAACG,eAAeC,iBAAiB,GAAG9I,OAAM+I,QAAQ,CAAWL;IACnE,MAAMM,wBAAwB,CAACC;QAC7BH,iBAAiBG;QACjB,IAAItB,MAAMuB,cAAc,EAAE;YACxBvB,MAAMuB,cAAc,CAAC;gBAAErB,cAAc;oBAAE1C;oBAAauD,iBAAiBO;gBAAK;YAAE;QAC9E;IACF;IAEAjJ,OAAMmJ,SAAS,CAAC;QACd,wDAAwD;QACxD,MAAM,EAAEtB,YAAY,EAAE,OAAGxH,4BAAAA,EAAasH,MAAMG,WAAW;QACvD,wDAAwD;QACxD,MAAM,EAAEY,eAAe,EAAE,GAAGb;QAC5BiB,iBAAiBJ,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,kBAAmB,EAAE;IACxC,GAAG;QAACf,MAAMG,WAAW;KAAC;IAEtB,MAAMsB,yBAAyB;QAC7BC,0BAA0B;QAC1BC,UAAUN;QACVN,iBAAiBG;IACnB;IAEA,MAAMtE,cAAc;QAClBgF,aAAaH;QACbI,cAAcb;IAChB;IAEA,SAASc,cAAcF,WAAyB;QAC9C,6CAA6C;QAC7C,OAAA,WAAA,GAAO,OAAA,aAAA,CAACxG,gBAAAA,EAAAA;YAAS,GAAGwG,WAAW;YAAEb,iBAAiBG;YAAeS,UAAUN;;IAC7E;IAEA,OAAO;IACP,MAAMU,gBAAgB1J,OAAM2J,WAAW,CAAC,CAACC;QACvC,OAAO,IAAIC,QAAQ,CAACC,SAASC;YAC3B,IAAInB,YAAYoB,OAAO,EAAE;gBACvB,OAAOD,OAAO9B,MAAM;YACtB;YACA,IAAI,CAACU,SAASqB,OAAO,IAAI,OAAOrB,SAASqB,OAAO,CAACC,OAAO,KAAK,YAAY;gBACvE,OAAOF,OAAO9B,MAAM;YACtB;YAEAU,SAASqB,OAAO,CACbC,OAAO,CAAC;gBACPC,YAAY5J,kBAAAA,CAAO8G,uBAAuB;gBAC1C+C,OAAO;gBACP,GAAGP,IAAI;YACT,GACCQ,IAAI,CAACN,SACLO,KAAK,CAACN;QACX;IACF,GAAG,EAAE;IAEL/J,OAAMsK,mBAAmB,CACvB3C,MAAM6B,YAAY,EAClB,IAAO,CAAA;YACLE;SACF,CAAA,EACA;QAACA;KAAc;IAGjB,IAAI3B,MAAMU,IAAI,KAAK,gBAAgB;QACjC,MAAM8B,sBAAsB7I,gDAAAA,EAAwB0G;QACpDA,yBAAyB/C,IAAI,GAAGkF,oBAAoBlF,IAAI;QACxD+C,yBAAyBzC,MAAM,GAAG4E,oBAAoB5E,MAAM;QAC5D6C,yBAAyBgC,OAAO,CAAC,CAAClC,OAAOC;YACvC,IAAID,MAAMG,IAAI,KAAK,gBAAgB;oBACnBL;oBAAD;gBAAb,MAAMqC,OAAO,CAAA,4CAAA,CAACrC,uCAAAA,yBAAyB/C,IAAI,CAACkD,MAAAA,AAAM,MAAA,QAApCH,yCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qCAAmDqC,IAAI,AAAJA,MAAI,QAAxD,8CAAA,KAAA,IAAA,4CAA4D;gBACzE,IAAIA,KAAKC,QAAQ,CAAC,SAAS;oBACzBlC,wBAAwB,CAACD,MAAM,CAACE,IAAI,GAAG;gBACzC,OAAO,IAAIgC,KAAKC,QAAQ,CAAC,cAAcD,SAAS,QAAQ;oBACtDjC,wBAAwB,CAACD,MAAM,CAACE,IAAI,GAAG;gBACzC,OAAO;oBACLD,wBAAwB,CAACD,MAAM,CAACE,IAAI,GAAG;gBACzC;YACF;QACF;IACF;IACA,MAAMkC,gBAA0C,CAAC;IACjD,IAAIC,yBAAyB;IAC7BxC,yBAAyB/C,IAAI,CAACmF,OAAO,CAAC,CAAClC,OAAaC;QAClD,IAAIsC,WAAW;QACf,QAAIhK,kCAAAA,EAAckH,MAAMM,eAAgB,CAACE,MAAM,CAACE,IAAI,GAAG;YACrDoC,WAAW,GAAGjJ,wCAAAA,GAAsBgJ,yBAAyB,GAAG;YAChEA;QACF,OAAO;gBACM;YAAXC,WAAW,CAAA,eAACvC,MAAmBwC,KAAAA,AAAK,MAAA,QAAzB,iBAAA,KAAA,IAAA,eAA6BjH;QAC1C;QACA,IAAI,CAAC8G,aAAa,CAACE,SAAS,EAAE;YAC5BF,aAAa,CAACE,SAAS,GAAG,EAAE;QAC9B;QACAF,aAAa,CAACE,SAAS,CAACE,IAAI,CAACxC;IAC/B;IAEAK,YAAYoB,OAAO,GAAGgB,OAAO/B,IAAI,CAAC0B,eAAeM,MAAM,GAAG;IAC1D,MAAMC,qBAAiCtK,sCAAAA,EACrCwH,0BACAQ,YAAYoB,OAAO,EACnBjC,MAAMM,eAAe;IAGvB,8FAA8F;IAC9F,IACEO,YAAYoB,OAAO,IACnBkB,eAAeC,YAAY,KAAKtJ,kCAAAA,IAChCqJ,eAAeE,eAAe,KAAKvJ,kCAAAA,EACnC;QACAmJ,OAAO/B,IAAI,CAAC0B,eAAeH,OAAO,CAAC,CAAC5F,KAAK2D;YACvC,IAAIA,QAAQ,GAAG;gBACb,OAAOoC,aAAa,CAAC/F,IAAI;YAC3B;QACF;QACAgE,YAAYoB,OAAO,GAAG;IACxB;IAEA,MAAMqB,wBAAoB1J,yCAAAA,EACxByG,0BACApE,UACA2D,MAAM2D,YAAY,EAClBvD,MAAMM,eAAe,EACrBd;IAIF,kEAAkE;IAClE,OAAA,WAAA,GACE,OAAA,aAAA,CAAA,OAAA,QAAA,EAAA,MAAA,WAAA,GACE,OAAA,aAAA,CAAC5C,OAAAA;QACCE,OAAO;YACL0G,SAAS;YACTC,kBAAkBN,eAAeC,YAAY;YAC7CM,qBAAqBP,eAAeE,eAAe;QACrD;OAECJ,OAAOU,OAAO,CAACf,eAAelF,GAAG,CAAC,CAAC,CAACkG,UAAUpD,MAAM;QACnD,MAAMqD,sBAAoC;YACxC,GAAGxD,wBAAwB;YAC3B/C,MAAMkD,MAAM9C,GAAG,CAACoG,CAAAA,MAAOzD,yBAAyB/C,IAAI,CAACwG,IAAI;QAC3D;QAEA,MAAMC,qBAAqBtD,yBAAyBuD,MAAM,CAACzD,CAAAA,QAASC,MAAMmC,QAAQ,CAACpC,MAAMC,KAAK;QAC9F,IAAIyD,YACFxD,yBAAyByD,IAAI,CAAC3D,CAAAA,QAASA,MAAMG,IAAI,KAAK3E,kBAAkBiE,MAAMU,IAAI,KAAK3E,gBACnFA,gBACAgI,kBAAkB,CAAC,EAAE,CAACrD,IAAI;QAEhC,IACED,yBAAyByD,IAAI,CAAC3D,CAAAA,QAASA,MAAMG,IAAI,KAAK,WACtDD,yBAAyByD,IAAI,CAAC3D,CAAAA,QAASA,MAAMG,IAAI,KAAK,YACtD;YACAuD,YAAY;QACd;QAEA,MAAME,aAAatG,QAAQ,CAACoG,UAAuB;QACnD,IAAIE,YAAY;YACd,MAAM,EAAE7H,WAAW,EAAEyB,QAAQ,EAAEqG,qBAAqB,EAAE3F,qBAAqB,EAAE,GAAG0F;YAChF,IAAIC,0BAA0BC,aAAaD,sBAAsBP,sBAAsB;gBACrF,MAAMS,mBAAmB7F,wBACrBA,sBAAsBoF,uBACtBA;gBACJ,MAAMU,iBAAiBpB,eAAevF,MAAM,CAACgG,SAAS;oBAWpDW,qBACAA;gBAVF,OAAOnI,YACL2B,UACAzB,aACA;oBAACgI;oBAAkBzD,YAAYoB,OAAO;oBAAEhG;oBAAU2D,MAAM2D,YAAY;oBAAE/D;iBAAY,EAClF;oBACE,GAAGhD,WAAW;oBACdgI,eAAe,EAAED,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBE,WAAW;oBAC5CC,eAAe,EAAEH,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBI,WAAW;gBAC9C,GACAJ,CAAAA,sBAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBK,GAAG,AAAHA,MAAG,QAAnBL,wBAAAA,KAAAA,IAAAA,sBAAuB,GACvBA,CAAAA,yBAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBM,MAAAA,AAAM,MAAA,QAAtBN,2BAAAA,KAAAA,IAAAA,yBAA0B;YAE9B;YACA,OAAA,WAAA,GAAO,OAAA,aAAA,CAAA,OAAA,QAAA,EAAA;QACT,OAAO;gBACsCV;YAA3C,MAAM,IAAI3D,MAAM,CAAC,wBAAwB,EAAA,CAAE2D,6BAAAA,oBAAoBvG,IAAI,CAAC,EAAA,AAAE,MAAA,QAA3BuG,+BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,2BAA6BnD,IAAI,EAAE;QAChF;IACF,KAEDG,YAAYoB,OAAO,IAAIP,cAAc4B;AAG5C,GAAG;AACH5D,iBAAiBoF,WAAW,GAAG;AAC/BpF,iBAAiBqF,YAAY,GAAG;IAC9BxB,cAAc;AAChB"}