@fluentui/react-charts 9.1.1 → 9.1.2

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

@@ -1 +1 @@
-{"version":3,"sources":["CartesianChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { LegendsProps } from '../Legends/index';\nimport { AccessibilityProps, Chart, Margins } from '../../types/index';\nimport { ChartTypes, XAxisTypes, YAxisType } from '../../utilities/index';\nimport { TimeLocaleDefinition } from 'd3-time-format';\nimport { ChartPopoverProps } from './ChartPopover.types';\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/**\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 tooltip\n   */\n  axisTitle?: 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/**\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   * 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\nexport interface YValueHover {\n  legend?: string;\n  y?: number;\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  yScale?: 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: JSX.Element | 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  /** 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"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
+{"version":3,"sources":["CartesianChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { LegendsProps } from '../Legends/index';\nimport { AccessibilityProps, Chart, Margins } from '../../types/index';\nimport { ChartTypes, XAxisTypes, YAxisType } from '../../utilities/index';\nimport { TimeLocaleDefinition } from 'd3-time-format';\nimport { ChartPopoverProps } from './ChartPopover.types';\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   */\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 tooltip\n   */\n  axisTitle?: 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/**\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   * @default True for LineChart but False for other charts\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\nexport interface YValueHover {\n  legend?: string;\n  y?: number;\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  yScale?: 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: JSX.Element | 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  /** 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"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}

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

@@ -42,8 +42,8 @@ const cartesianchartClassNames = {
         Bhrd7zp: "figsok6",
         Bg96gwp: "f1i3iumi",
         mc9l5x: "f22iagw",
-        a9b677: "fly5x3f",
-        Bqenvij: "f1l02sjl",
+        a9b677: "fsr8r2d",
+        Bqenvij: "f50j5g9",
         Beiy3e4: "f1vx9l62",
         B68tc82: 0,
         Bmxbyg5: 0,
@@ -116,8 +116,8 @@ const cartesianchartClassNames = {
         ".figsok6{font-weight:var(--fontWeightRegular);}",
         ".f1i3iumi{line-height:var(--lineHeightBase300);}",
         ".f22iagw{display:flex;}",
-        ".fly5x3f{width:100%;}",
-        ".f1l02sjl{height:100%;}",
+        ".fsr8r2d{width:var(--root-width, 100%);}",
+        ".f50j5g9{height:var(--root-height, 100%);}",
         ".f1vx9l62{flex-direction:column;}",
         [
             ".f1a3p1vp{overflow:hidden;}",
@@ -177,7 +177,7 @@ const useCartesianChartStyles = (props)=>{
     const baseStyles = useStyles();
     return {
         root: (0, _react.mergeClasses)(cartesianchartClassNames.root, baseStyles.root /*props.styles?.root*/ ),
-        chartWrapper: (0, _react.mergeClasses)(cartesianchartClassNames.chartWrapper, baseStyles.chartWrapper /*props.styles?.chartWrapper*/ ),
+        chartWrapper: (0, _react.mergeClasses)(cartesianchartClassNames.chartWrapper, props.enableReflow ? baseStyles.chartWrapper : ''),
         axisTitle: (0, _react.mergeClasses)(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/ ),
         xAxis: (0, _react.mergeClasses)(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/ ),
         yAxis: (0, _react.mergeClasses)(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/ ),

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

@@ -1 +1 @@
-{"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';\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    chartTitle: 'fui-cart__chartTitle'\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});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useCartesianChartStyles = (props)=>{\n    const _useRtl = useRtl();\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(cartesianchartClassNames.root, baseStyles.root /*props.styles?.root*/ ),\n        chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, baseStyles.chartWrapper /*props.styles?.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.styles?.svgTooltip*/ )\n    };\n};\n"],"names":["cartesianchartClassNames","useCartesianChartStyles","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","chartTitle","useStyles","__styles","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","d","p","m","props","_useRtl","useRtl","baseStyles","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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';\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    chartTitle: 'fui-cart__chartTitle'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        width: 'var(--root-width, 100%)',\n        height: 'var(--root-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});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useCartesianChartStyles = (props)=>{\n    const _useRtl = useRtl();\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(cartesianchartClassNames.root, baseStyles.root /*props.styles?.root*/ ),\n        chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, props.enableReflow ? baseStyles.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.styles?.svgTooltip*/ )\n    };\n};\n"],"names":["cartesianchartClassNames","useCartesianChartStyles","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","chartTitle","useStyles","__styles","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","d","p","m","props","_useRtl","useRtl","baseStyles","mergeClasses","enableReflow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -28,6 +28,18 @@ const _index7 = require("../GroupedVerticalBarChart/index");
 const _index8 = require("../VerticalBarChart/index");
 const _imageExporter = require("./imageExporter");
 const _index9 = require("../ScatterChart/index");
+const _withResponsiveContainer = require("../ResponsiveContainer/withResponsiveContainer");
+const ResponsiveDonutChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index.DonutChart);
+const ResponsiveVerticalStackedBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index1.VerticalStackedBarChart);
+const ResponsiveLineChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index2.LineChart);
+const ResponsiveHorizontalBarChartWithAxis = (0, _withResponsiveContainer.withResponsiveContainer)(_index3.HorizontalBarChartWithAxis);
+const ResponsiveAreaChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index4.AreaChart);
+const ResponsiveHeatMapChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index5.HeatMapChart);
+const ResponsiveSankeyChart = (0, _withResponsiveContainer.withResponsiveContainer)(_SankeyChart.SankeyChart);
+const ResponsiveGaugeChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index6.GaugeChart);
+const ResponsiveGroupedVerticalBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index7.GroupedVerticalBarChart);
+const ResponsiveVerticalBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index8.VerticalBarChart);
+const ResponsiveScatterChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index9.ScatterChart);
 const useColorMapping = ()=>{
     const colorMap = _react.useRef(new Map());
     return colorMap;
@@ -55,7 +67,7 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
     }
     const plotlyInputWithValidData = {
         ...plotlyInput,
-        data: chart.validTracesInfo.map((trace)=>plotlyInput.data[trace[0]])
+        data: chart.validTracesInfo.map((trace)=>plotlyInput.data[trace.index])
     };
     let { selectedLegends } = plotlySchema;
     const colorMap = useColorMapping();
@@ -105,12 +117,12 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
             ...commonProps
         };
         if (isAreaChart) {
-            return /*#__PURE__*/ _react.createElement(_index4.AreaChart, chartProps);
+            return /*#__PURE__*/ _react.createElement(ResponsiveAreaChart, chartProps);
         }
         if (isScatterMarkers) {
-            return /*#__PURE__*/ _react.createElement(_index9.ScatterChart, chartProps);
+            return /*#__PURE__*/ _react.createElement(ResponsiveScatterChart, chartProps);
         }
-        return /*#__PURE__*/ _react.createElement(_index2.LineChart, chartProps);
+        return /*#__PURE__*/ _react.createElement(ResponsiveLineChart, chartProps);
     };
     const checkAndRenderChart = (isAreaChart = false)=>{
         let fallbackVSBC = false;
@@ -134,7 +146,7 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
         }
         // Unsupported schema, render as VerticalStackedBarChart
         fallbackVSBC = true;
-        return /*#__PURE__*/ _react.createElement(_index1.VerticalStackedBarChart, {
+        return /*#__PURE__*/ _react.createElement(ResponsiveVerticalStackedBarChart, {
             ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToVSBCProps)(plotlyInputWithValidData, colorMap, isDarkTheme, fallbackVSBC),
             ...commonProps
         });
@@ -155,43 +167,43 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
     ]);
     switch(chart.type){
         case 'donut':
-            return /*#__PURE__*/ _react.createElement(_index.DonutChart, {
+            return /*#__PURE__*/ _react.createElement(ResponsiveDonutChart, {
                 ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToDonutProps)(plotlyInputWithValidData, colorMap, isDarkTheme),
                 ...commonProps
             });
         case 'horizontalbar':
-            return /*#__PURE__*/ _react.createElement(_index3.HorizontalBarChartWithAxis, {
+            return /*#__PURE__*/ _react.createElement(ResponsiveHorizontalBarChartWithAxis, {
                 ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToHorizontalBarWithAxisProps)(plotlyInputWithValidData, colorMap, isDarkTheme),
                 ...commonProps
             });
         case 'groupedverticalbar':
-            return /*#__PURE__*/ _react.createElement(_index7.GroupedVerticalBarChart, {
+            return /*#__PURE__*/ _react.createElement(ResponsiveGroupedVerticalBarChart, {
                 ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToGVBCProps)(plotlyInputWithValidData, colorMap, isDarkTheme),
                 ...commonProps
             });
         case 'verticalstackedbar':
-            return /*#__PURE__*/ _react.createElement(_index1.VerticalStackedBarChart, {
+            return /*#__PURE__*/ _react.createElement(ResponsiveVerticalStackedBarChart, {
                 ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToVSBCProps)(plotlyInputWithValidData, colorMap, isDarkTheme),
                 ...commonProps
             });
         case 'heatmap':
-            return /*#__PURE__*/ _react.createElement(_index5.HeatMapChart, {
+            return /*#__PURE__*/ _react.createElement(ResponsiveHeatMapChart, {
                 ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToHeatmapProps)(plotlyInputWithValidData),
                 ...commonProps,
                 legendProps: {}
             });
         case 'sankey':
-            return /*#__PURE__*/ _react.createElement(_SankeyChart.SankeyChart, {
+            return /*#__PURE__*/ _react.createElement(ResponsiveSankeyChart, {
                 ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToSankeyProps)(plotlyInputWithValidData, colorMap, isDarkTheme),
                 ...commonProps
             });
         case 'gauge':
-            return /*#__PURE__*/ _react.createElement(_index6.GaugeChart, {
+            return /*#__PURE__*/ _react.createElement(ResponsiveGaugeChart, {
                 ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToGaugeProps)(plotlyInputWithValidData, colorMap, isDarkTheme),
                 ...commonProps
             });
         case 'verticalbar':
-            return /*#__PURE__*/ _react.createElement(_index8.VerticalBarChart, {
+            return /*#__PURE__*/ _react.createElement(ResponsiveVerticalBarChart, {
                 ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToVBCProps)(plotlyInputWithValidData, colorMap, isDarkTheme),
                 ...commonProps
             });

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

@@ -1 +1 @@
-{"version":3,"sources":["DeclarativeChart.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n  decodeBase64Fields,\n  isArrayOrTypedArray,\n  isDateArray,\n  isMonthArray,\n  isNumberArray,\n  isYearArray,\n  mapFluentChart,\n  sanitizeJson,\n} from '@fluentui/chart-utilities';\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  transformPlotlyJsonToDonutProps,\n  transformPlotlyJsonToVSBCProps,\n  transformPlotlyJsonToScatterChartProps,\n  transformPlotlyJsonToHorizontalBarWithAxisProps,\n  transformPlotlyJsonToHeatmapProps,\n  transformPlotlyJsonToSankeyProps,\n  transformPlotlyJsonToGaugeProps,\n  transformPlotlyJsonToGVBCProps,\n  transformPlotlyJsonToVBCProps,\n} from './PlotlySchemaAdapter';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { LineChart, LineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, AreaChartProps } 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 { ImageExportOptions, toImage } from './imageExporter';\nimport { Chart } from '../../types/index';\nimport { ScatterChart } from '../ScatterChart/index';\n// TODO\n// import { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\n\n// const ResponsiveDonutChart = withResponsiveContainer(DonutChart);\n// const ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\n// const ResponsiveLineChart = withResponsiveContainer(LineChart);\n// const ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\n// const ResponsiveAreaChart = withResponsiveContainer(AreaChart);\n// const ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\n// const ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\n// const ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\n// const ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\n// const ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\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/**\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\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[0]]),\n  };\n\n  let { selectedLegends } = plotlySchema;\n  const colorMap = useColorMapping();\n  const isDarkTheme = useIsDarkTheme();\n  const chartRef = React.useRef<Chart>(null);\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  const renderLineAreaScatter = (plotlyData: Data[], isAreaChart: boolean): JSX.Element => {\n    const isScatterMarkers = (plotlyData[0] as PlotData)?.mode === 'markers';\n    const chartProps: LineChartProps | AreaChartProps = {\n      ...transformPlotlyJsonToScatterChartProps(\n        { data: plotlyData, layout: plotlyInput.layout },\n        isAreaChart,\n        colorMap,\n        isDarkTheme,\n      ),\n      ...commonProps,\n    };\n    if (isAreaChart) {\n      return <AreaChart {...chartProps} />;\n    }\n    if (isScatterMarkers) {\n      return <ScatterChart {...chartProps} />;\n    }\n    return <LineChart {...chartProps} />;\n  };\n\n  const checkAndRenderChart = (isAreaChart: boolean = false) => {\n    let fallbackVSBC = false;\n    const xValues = (plotlyInputWithValidData.data[0] as PlotData).x;\n    const isXDate = isDateArray(xValues);\n    const isXNumber = isNumberArray(xValues);\n    const isXMonth = isMonthArray(xValues);\n\n    // Consider year as categorical variable not numeric continuous variable\n    // Also year is not considered a date variable as it is represented as a point\n    // in time and brings additional complexity of handling timezone and locale\n    // formatting given the current design of the charting library\n    const isXYear = isYearArray(xValues);\n\n    if ((isXDate || isXNumber) && !isXYear) {\n      return renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart);\n    } else if (isXMonth) {\n      const updatedData = plotlyInputWithValidData.data.map((dataPoint: PlotData) => ({\n        ...dataPoint,\n        x: correctYearMonth(dataPoint.x),\n      }));\n      return renderLineAreaScatter(updatedData, isAreaChart);\n    }\n    // Unsupported schema, render as VerticalStackedBarChart\n    fallbackVSBC = true;\n    return (\n      <VerticalStackedBarChart\n        {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme, fallbackVSBC)}\n        {...commonProps}\n      />\n    );\n  };\n\n  // TODO\n  const exportAsImage = React.useCallback((opts?: ImageExportOptions) => {\n    return toImage(chartRef.current?.chartContainer, {\n      background: tokens.colorNeutralBackground1,\n      scale: 5,\n      ...opts,\n    });\n  }, []);\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      exportAsImage,\n    }),\n    [exportAsImage],\n  );\n\n  switch (chart.type) {\n    case 'donut':\n      return (\n        <DonutChart\n          {...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'horizontalbar':\n      return (\n        <HorizontalBarChartWithAxis\n          {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'groupedverticalbar':\n      return (\n        <GroupedVerticalBarChart\n          {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalstackedbar':\n      return (\n        <VerticalStackedBarChart\n          {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'heatmap':\n      return (\n        <HeatMapChart\n          {...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData)}\n          {...commonProps}\n          legendProps={{}}\n        />\n      );\n    case 'sankey':\n      return (\n        <SankeyChart\n          {...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'gauge':\n      return (\n        <GaugeChart\n          {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalbar':\n      return (\n        <VerticalBarChart\n          {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    // TODO: Add 'scatter' as a separate chart type\n    case 'area':\n    case 'line':\n    case 'fallback':\n      // Need recheck for area chart as we don't have ability to check for valid months in previous step\n      const isAreaChart = plotlyInputWithValidData.data.some(\n        (series: PlotData) => series.fill === 'tonexty' || series.fill === 'tozeroy' || !!series.stackgroup,\n      );\n      return checkAndRenderChart(isAreaChart);\n    default:\n      throw new Error(`Unsupported chart type :${plotlyInputWithValidData.data[0]?.type}`);\n  }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"],"names":["DeclarativeChart","useColorMapping","colorMap","React","useRef","Map","useIsDarkTheme","parentV9Theme","useContext","V9ThemeContext","v9Theme","webLightTheme","backgroundColor","d3Color","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","forwardRef","props","forwardedRef","plotlySchema","sanitizeJson","chartSchema","chart","mapFluentChart","isValid","Error","errorMessage","plotlyInput","decodeBase64Fields","error","plotlyInputWithValidData","data","validTracesInfo","map","trace","selectedLegends","chartRef","isArrayOrTypedArray","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","commonProps","legendProps","componentRef","renderLineAreaScatter","plotlyData","isAreaChart","isScatterMarkers","_plotlyData_","mode","chartProps","transformPlotlyJsonToScatterChartProps","layout","createElement","AreaChart","ScatterChart","LineChart","checkAndRenderChart","fallbackVSBC","xValues","x","isXDate","isDateArray","isXNumber","isNumberArray","isXMonth","isMonthArray","isXYear","isYearArray","updatedData","dataPoint","correctYearMonth","VerticalStackedBarChart","transformPlotlyJsonToVSBCProps","exportAsImage","useCallback","opts","toImage","current","chartContainer","background","tokens","scale","useImperativeHandle","type","DonutChart","transformPlotlyJsonToDonutProps","HorizontalBarChartWithAxis","transformPlotlyJsonToHorizontalBarWithAxisProps","GroupedVerticalBarChart","transformPlotlyJsonToGVBCProps","HeatMapChart","transformPlotlyJsonToHeatmapProps","SankeyChart","transformPlotlyJsonToSankeyProps","GaugeChart","transformPlotlyJsonToGaugeProps","VerticalBarChart","transformPlotlyJsonToVBCProps","some","series","fill","stackgroup","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["DeclarativeChart.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n  decodeBase64Fields,\n  isArrayOrTypedArray,\n  isDateArray,\n  isMonthArray,\n  isNumberArray,\n  isYearArray,\n  mapFluentChart,\n  sanitizeJson,\n} from '@fluentui/chart-utilities';\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  transformPlotlyJsonToDonutProps,\n  transformPlotlyJsonToVSBCProps,\n  transformPlotlyJsonToScatterChartProps,\n  transformPlotlyJsonToHorizontalBarWithAxisProps,\n  transformPlotlyJsonToHeatmapProps,\n  transformPlotlyJsonToSankeyProps,\n  transformPlotlyJsonToGaugeProps,\n  transformPlotlyJsonToGVBCProps,\n  transformPlotlyJsonToVBCProps,\n} from './PlotlySchemaAdapter';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { LineChart, LineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, AreaChartProps } 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 { ImageExportOptions, toImage } from './imageExporter';\nimport { Chart } from '../../types/index';\nimport { ScatterChart } from '../ScatterChart/index';\n\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\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);\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/**\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\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  let { selectedLegends } = plotlySchema;\n  const colorMap = useColorMapping();\n  const isDarkTheme = useIsDarkTheme();\n  const chartRef = React.useRef<Chart>(null);\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  const renderLineAreaScatter = (plotlyData: Data[], isAreaChart: boolean): JSX.Element => {\n    const isScatterMarkers = (plotlyData[0] as PlotData)?.mode === 'markers';\n    const chartProps: LineChartProps | AreaChartProps = {\n      ...transformPlotlyJsonToScatterChartProps(\n        { data: plotlyData, layout: plotlyInput.layout },\n        isAreaChart,\n        colorMap,\n        isDarkTheme,\n      ),\n      ...commonProps,\n    };\n    if (isAreaChart) {\n      return <ResponsiveAreaChart {...chartProps} />;\n    }\n    if (isScatterMarkers) {\n      return <ResponsiveScatterChart {...chartProps} />;\n    }\n    return <ResponsiveLineChart {...chartProps} />;\n  };\n\n  const checkAndRenderChart = (isAreaChart: boolean = false) => {\n    let fallbackVSBC = false;\n    const xValues = (plotlyInputWithValidData.data[0] as PlotData).x;\n    const isXDate = isDateArray(xValues);\n    const isXNumber = isNumberArray(xValues);\n    const isXMonth = isMonthArray(xValues);\n\n    // Consider year as categorical variable not numeric continuous variable\n    // Also year is not considered a date variable as it is represented as a point\n    // in time and brings additional complexity of handling timezone and locale\n    // formatting given the current design of the charting library\n    const isXYear = isYearArray(xValues);\n\n    if ((isXDate || isXNumber) && !isXYear) {\n      return renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart);\n    } else if (isXMonth) {\n      const updatedData = plotlyInputWithValidData.data.map((dataPoint: PlotData) => ({\n        ...dataPoint,\n        x: correctYearMonth(dataPoint.x),\n      }));\n      return renderLineAreaScatter(updatedData, isAreaChart);\n    }\n    // Unsupported schema, render as VerticalStackedBarChart\n    fallbackVSBC = true;\n    return (\n      <ResponsiveVerticalStackedBarChart\n        {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme, fallbackVSBC)}\n        {...commonProps}\n      />\n    );\n  };\n\n  // TODO\n  const exportAsImage = React.useCallback((opts?: ImageExportOptions) => {\n    return toImage(chartRef.current?.chartContainer, {\n      background: tokens.colorNeutralBackground1,\n      scale: 5,\n      ...opts,\n    });\n  }, []);\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      exportAsImage,\n    }),\n    [exportAsImage],\n  );\n\n  switch (chart.type) {\n    case 'donut':\n      return (\n        <ResponsiveDonutChart\n          {...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'horizontalbar':\n      return (\n        <ResponsiveHorizontalBarChartWithAxis\n          {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'groupedverticalbar':\n      return (\n        <ResponsiveGroupedVerticalBarChart\n          {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalstackedbar':\n      return (\n        <ResponsiveVerticalStackedBarChart\n          {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'heatmap':\n      return (\n        <ResponsiveHeatMapChart\n          {...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData)}\n          {...commonProps}\n          legendProps={{}}\n        />\n      );\n    case 'sankey':\n      return (\n        <ResponsiveSankeyChart\n          {...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'gauge':\n      return (\n        <ResponsiveGaugeChart\n          {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalbar':\n      return (\n        <ResponsiveVerticalBarChart\n          {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    // TODO: Add 'scatter' as a separate chart type\n    case 'area':\n    case 'line':\n    case 'fallback':\n      // Need recheck for area chart as we don't have ability to check for valid months in previous step\n      const isAreaChart = plotlyInputWithValidData.data.some(\n        (series: PlotData) => series.fill === 'tonexty' || series.fill === 'tozeroy' || !!series.stackgroup,\n      );\n      return checkAndRenderChart(isAreaChart);\n    default:\n      throw new Error(`Unsupported chart type :${plotlyInputWithValidData.data[0]?.type}`);\n  }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"],"names":["DeclarativeChart","ResponsiveDonutChart","withResponsiveContainer","DonutChart","ResponsiveVerticalStackedBarChart","VerticalStackedBarChart","ResponsiveLineChart","LineChart","ResponsiveHorizontalBarChartWithAxis","HorizontalBarChartWithAxis","ResponsiveAreaChart","AreaChart","ResponsiveHeatMapChart","HeatMapChart","ResponsiveSankeyChart","SankeyChart","ResponsiveGaugeChart","GaugeChart","ResponsiveGroupedVerticalBarChart","GroupedVerticalBarChart","ResponsiveVerticalBarChart","VerticalBarChart","ResponsiveScatterChart","ScatterChart","useColorMapping","colorMap","React","useRef","Map","useIsDarkTheme","parentV9Theme","useContext","V9ThemeContext","v9Theme","webLightTheme","backgroundColor","d3Color","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","forwardRef","props","forwardedRef","plotlySchema","sanitizeJson","chartSchema","chart","mapFluentChart","isValid","Error","errorMessage","plotlyInput","decodeBase64Fields","error","plotlyInputWithValidData","data","validTracesInfo","map","trace","index","selectedLegends","chartRef","isArrayOrTypedArray","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","commonProps","legendProps","componentRef","renderLineAreaScatter","plotlyData","isAreaChart","isScatterMarkers","_plotlyData_","mode","chartProps","transformPlotlyJsonToScatterChartProps","layout","createElement","checkAndRenderChart","fallbackVSBC","xValues","x","isXDate","isDateArray","isXNumber","isNumberArray","isXMonth","isMonthArray","isXYear","isYearArray","updatedData","dataPoint","correctYearMonth","transformPlotlyJsonToVSBCProps","exportAsImage","useCallback","opts","toImage","current","chartContainer","background","tokens","scale","useImperativeHandle","type","transformPlotlyJsonToDonutProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToVBCProps","some","series","fill","stackgroup","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -214,6 +214,7 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fallbackVS
     var _input_layout, _input_layout1;
     const mapXToDataPoints = {};
     let yMaxValue = 0;
+    let yMinValue = 0;
     let secondaryYAxisValues = {};
     input.data.forEach((series, index1)=>{
         var _series_x;
@@ -250,6 +251,7 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fallbackVS
                 });
             }
             yMaxValue = Math.max(yMaxValue, yVal);
+            yMinValue = Math.min(yMinValue, yVal);
         });
         secondaryYAxisValues = getSecondaryYAxisValues(series, input.layout);
     });
@@ -261,6 +263,7 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fallbackVS
         height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         barWidth: 'auto',
         yMaxValue,
+        yMinValue,
         chartTitle,
         xAxisTitle,
         yAxisTitle,
@@ -465,7 +468,10 @@ const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, isDark
     var _input_layout_margin_pad;
     const padding = (_input_layout_margin_pad = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_margin1 = _input_layout2.margin) === null || _input_layout_margin1 === void 0 ? void 0 : _input_layout_margin1.pad) !== null && _input_layout_margin_pad !== void 0 ? _input_layout_margin_pad : 0;
     const availableHeight = chartHeight - margin - padding;
-    const numberOfBars = input.data[0].y.length;
+    const numberOfBars = input.data.reduce((total, item)=>{
+        var _item_y;
+        return total + (((_item_y = item.y) === null || _item_y === void 0 ? void 0 : _item_y.length) || 0);
+    }, 0);
     const scalingFactor = 0.01;
     const gapFactor = 1 / (1 + scalingFactor * numberOfBars);
     const barHeight = availableHeight / (numberOfBars * (1 + gapFactor));