@fluentui/react-charting 5.23.96 → 5.24.0

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

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

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

@@ -91,12 +91,13 @@ define(["require", "exports", "tslib", "react", "@fluentui/react", "../DonutChar
             var isXDate = (0, chart_utilities_2.isDateArray)(xValues);
             var isXNumber = (0, chart_utilities_2.isNumberArray)(xValues);
             var isXMonth = (0, PlotlySchemaAdapter_1.isMonthArray)(xValues);
+            var isYString = (0, PlotlySchemaAdapter_1.isStringArray)(plotlyInputWithValidData.data[0].y);
             // Consider year as categorical variable not numeric continuous variable
             // Also year is not considered a date variable as it is represented as a point
             // in time and brings additional complexity of handling timezone and locale
             // formatting given the current design of the charting library
             var isXYear = (0, chart_utilities_2.isYearArray)(xValues);
-            if ((isXDate || isXNumber) && !isXYear) {
+            if ((isXDate || isXNumber) && !isXYear && !isYString) {
                 return renderLineArea(plotlyInputWithValidData.data, isAreaChart);
             }
             else if (isXMonth) {

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

@@ -1 +1 @@
-{"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/DeclarativeChart.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport { useTheme } from '@fluentui/react';\nimport { IRefObject } from '@fluentui/react/lib/Utilities';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { decodeBase64Fields } from '@fluentui/chart-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n  isArrayOrTypedArray,\n  isDateArray,\n  isNumberArray,\n  isYearArray,\n  mapFluentChart,\n  sanitizeJson,\n} from '@fluentui/chart-utilities';\n\nimport {\n  isMonthArray,\n  correctYearMonth,\n  transformPlotlyJsonToDonutProps,\n  transformPlotlyJsonToVSBCProps,\n  transformPlotlyJsonToScatterChartProps,\n  transformPlotlyJsonToHorizontalBarWithAxisProps,\n  transformPlotlyJsonToHeatmapProps,\n  transformPlotlyJsonToSankeyProps,\n  transformPlotlyJsonToGaugeProps,\n  transformPlotlyJsonToGVBCProps,\n  transformPlotlyJsonToVBCProps,\n  transformPlotlyJsonToChartTableProps,\n  projectPolarToCartesian,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { LineChart, ILineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, IAreaChartProps } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ChartTable } from '../ChartTable/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 ResponsiveChartTable = withResponsiveContainer(ChartTable);\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n  /**\n   * Plotly schema represented as JSON object\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  plotlySchema: any;\n}\n\n/**\n * DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n */\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n  /**\n   * The schema representing the chart data, layout and configuration\n   */\n  chartSchema: Schema;\n\n  /**\n   * Callback when an event occurs\n   */\n  onSchemaChange?: (eventData: Schema) => void;\n\n  /**\n   * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: IRefObject<IDeclarativeChart>;\n\n  /**\n   * Optional prop to specify the colorway type of the chart.\n   * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n   * - 'builtin': Use Fluent UI colorway.\n   * - 'others': Reserved for future colorways.\n   * @default 'default'\n   */\n  colorwayType?: ColorwayType;\n}\n\n/**\n * {@docCategory DeclarativeChart}\n */\nexport interface IDeclarativeChart {\n  exportAsImage: (opts?: IImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n  const colorMap = React.useRef(new Map<string, string>());\n  return colorMap;\n};\n\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 theme = useTheme();\n  const isDarkTheme = theme?.isInverted ?? false;\n  const chartRef = React.useRef<IChart>(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    calloutProps: { layerProps: { eventBubblingEnabled: true } },\n  };\n\n  const renderLineArea = (plotlyData: Data[], isAreaChart: boolean): JSX.Element => {\n    const isScatterMarkers = [\n      'markers',\n      'text+markers',\n      'markers+text',\n      'lines+markers',\n      'markers+line',\n      'text+lines+markers',\n    ].includes((plotlyData[0] as PlotData)?.mode);\n    const chartProps: ILineChartProps | IAreaChartProps = {\n      ...transformPlotlyJsonToScatterChartProps(\n        { data: plotlyData, layout: plotlyInput.layout },\n        isAreaChart,\n        isScatterMarkers,\n        colorMap,\n        props.colorwayType,\n        isDarkTheme,\n      ),\n      ...commonProps,\n    };\n    if (isAreaChart) {\n      return <ResponsiveAreaChart {...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 renderLineArea(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 renderLineArea(updatedData, isAreaChart);\n    }\n    // Unsupported schema, render as VerticalStackedBarChart\n    fallbackVSBC = true;\n    if (isAreaChart) {\n      throw new Error('Fallback to VerticalStackedBarChart is not allowed for Area Charts.');\n    }\n    return (\n      <ResponsiveVerticalStackedBarChart\n        {...transformPlotlyJsonToVSBCProps(\n          plotlyInputWithValidData,\n          colorMap,\n          props.colorwayType,\n          isDarkTheme,\n          fallbackVSBC,\n        )}\n        {...commonProps}\n      />\n    );\n  };\n\n  const exportAsImage = React.useCallback(\n    (opts?: IImageExportOptions): Promise<string> => {\n      return new Promise((resolve, reject) => {\n        if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {\n          return reject(Error('Chart cannot be exported as image'));\n        }\n\n        chartRef.current\n          .toImage({\n            background: theme.semanticColors.bodyBackground,\n            scale: 5,\n            ...opts,\n          })\n          .then(resolve)\n          .catch(reject);\n      });\n    },\n    [theme],\n  );\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      exportAsImage,\n    }),\n    [exportAsImage],\n  );\n\n  switch (chart.type) {\n    case 'donut':\n      return (\n        <ResponsiveDonutChart\n          {...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'horizontalbar':\n      return (\n        <ResponsiveHorizontalBarChartWithAxis\n          {...transformPlotlyJsonToHorizontalBarWithAxisProps(\n            plotlyInputWithValidData,\n            colorMap,\n            props.colorwayType,\n            isDarkTheme,\n          )}\n          {...commonProps}\n        />\n      );\n    case 'groupedverticalbar':\n      return (\n        <ResponsiveGroupedVerticalBarChart\n          {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalstackedbar':\n      return (\n        <ResponsiveVerticalStackedBarChart\n          {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, 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, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'gauge':\n      return (\n        <ResponsiveGaugeChart\n          {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalbar':\n      return (\n        <ResponsiveVerticalBarChart\n          {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'table':\n      return (\n        <ResponsiveChartTable\n          {...transformPlotlyJsonToChartTableProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'area':\n    case 'line':\n    case 'fallback':\n    case 'scatterpolar':\n      if (chart.type === 'scatterpolar') {\n        const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n        plotlyInputWithValidData.data = cartesianProjection.data;\n      }\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';\nDeclarativeChart.defaultProps = {\n  colorwayType: 'default',\n};\n"]}
+{"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/DeclarativeChart.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport { useTheme } from '@fluentui/react';\nimport { IRefObject } from '@fluentui/react/lib/Utilities';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { decodeBase64Fields } from '@fluentui/chart-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n  isArrayOrTypedArray,\n  isDateArray,\n  isNumberArray,\n  isYearArray,\n  mapFluentChart,\n  sanitizeJson,\n} from '@fluentui/chart-utilities';\n\nimport {\n  isMonthArray,\n  correctYearMonth,\n  transformPlotlyJsonToDonutProps,\n  transformPlotlyJsonToVSBCProps,\n  transformPlotlyJsonToScatterChartProps,\n  transformPlotlyJsonToHorizontalBarWithAxisProps,\n  transformPlotlyJsonToHeatmapProps,\n  transformPlotlyJsonToSankeyProps,\n  transformPlotlyJsonToGaugeProps,\n  transformPlotlyJsonToGVBCProps,\n  transformPlotlyJsonToVBCProps,\n  transformPlotlyJsonToChartTableProps,\n  projectPolarToCartesian,\n  isStringArray,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { LineChart, ILineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, IAreaChartProps } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ChartTable } from '../ChartTable/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 ResponsiveChartTable = withResponsiveContainer(ChartTable);\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n  /**\n   * Plotly schema represented as JSON object\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  plotlySchema: any;\n}\n\n/**\n * DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n */\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n  /**\n   * The schema representing the chart data, layout and configuration\n   */\n  chartSchema: Schema;\n\n  /**\n   * Callback when an event occurs\n   */\n  onSchemaChange?: (eventData: Schema) => void;\n\n  /**\n   * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: IRefObject<IDeclarativeChart>;\n\n  /**\n   * Optional prop to specify the colorway type of the chart.\n   * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n   * - 'builtin': Use Fluent UI colorway.\n   * - 'others': Reserved for future colorways.\n   * @default 'default'\n   */\n  colorwayType?: ColorwayType;\n}\n\n/**\n * {@docCategory DeclarativeChart}\n */\nexport interface IDeclarativeChart {\n  exportAsImage: (opts?: IImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n  const colorMap = React.useRef(new Map<string, string>());\n  return colorMap;\n};\n\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 theme = useTheme();\n  const isDarkTheme = theme?.isInverted ?? false;\n  const chartRef = React.useRef<IChart>(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    calloutProps: { layerProps: { eventBubblingEnabled: true } },\n  };\n\n  const renderLineArea = (plotlyData: Data[], isAreaChart: boolean): JSX.Element => {\n    const isScatterMarkers = [\n      'markers',\n      'text+markers',\n      'markers+text',\n      'lines+markers',\n      'markers+line',\n      'text+lines+markers',\n    ].includes((plotlyData[0] as PlotData)?.mode);\n    const chartProps: ILineChartProps | IAreaChartProps = {\n      ...transformPlotlyJsonToScatterChartProps(\n        { data: plotlyData, layout: plotlyInput.layout },\n        isAreaChart,\n        isScatterMarkers,\n        colorMap,\n        props.colorwayType,\n        isDarkTheme,\n      ),\n      ...commonProps,\n    };\n    if (isAreaChart) {\n      return <ResponsiveAreaChart {...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    const isYString = isStringArray((plotlyInputWithValidData.data[0] as Partial<PlotData>).y);\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 && !isYString) {\n      return renderLineArea(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 renderLineArea(updatedData, isAreaChart);\n    }\n    // Unsupported schema, render as VerticalStackedBarChart\n    fallbackVSBC = true;\n    if (isAreaChart) {\n      throw new Error('Fallback to VerticalStackedBarChart is not allowed for Area Charts.');\n    }\n    return (\n      <ResponsiveVerticalStackedBarChart\n        {...transformPlotlyJsonToVSBCProps(\n          plotlyInputWithValidData,\n          colorMap,\n          props.colorwayType,\n          isDarkTheme,\n          fallbackVSBC,\n        )}\n        {...commonProps}\n      />\n    );\n  };\n\n  const exportAsImage = React.useCallback(\n    (opts?: IImageExportOptions): Promise<string> => {\n      return new Promise((resolve, reject) => {\n        if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {\n          return reject(Error('Chart cannot be exported as image'));\n        }\n\n        chartRef.current\n          .toImage({\n            background: theme.semanticColors.bodyBackground,\n            scale: 5,\n            ...opts,\n          })\n          .then(resolve)\n          .catch(reject);\n      });\n    },\n    [theme],\n  );\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      exportAsImage,\n    }),\n    [exportAsImage],\n  );\n\n  switch (chart.type) {\n    case 'donut':\n      return (\n        <ResponsiveDonutChart\n          {...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'horizontalbar':\n      return (\n        <ResponsiveHorizontalBarChartWithAxis\n          {...transformPlotlyJsonToHorizontalBarWithAxisProps(\n            plotlyInputWithValidData,\n            colorMap,\n            props.colorwayType,\n            isDarkTheme,\n          )}\n          {...commonProps}\n        />\n      );\n    case 'groupedverticalbar':\n      return (\n        <ResponsiveGroupedVerticalBarChart\n          {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalstackedbar':\n      return (\n        <ResponsiveVerticalStackedBarChart\n          {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, 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, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'gauge':\n      return (\n        <ResponsiveGaugeChart\n          {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalbar':\n      return (\n        <ResponsiveVerticalBarChart\n          {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'table':\n      return (\n        <ResponsiveChartTable\n          {...transformPlotlyJsonToChartTableProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'area':\n    case 'line':\n    case 'fallback':\n    case 'scatterpolar':\n      if (chart.type === 'scatterpolar') {\n        const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n        plotlyInputWithValidData.data = cartesianProjection.data;\n      }\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';\nDeclarativeChart.defaultProps = {\n  colorwayType: 'default',\n};\n"]}

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

@@ -32,6 +32,6 @@ export declare const projectPolarToCartesian: (input: PlotlySchema) => PlotlySch
  * @param trace
  */
 export declare function findArrayAttributes(trace: any): void;
-export declare const isInvalidValue: (value: any) => boolean;
+export declare const isStringArray: (arr: any) => boolean;
 export declare const getNumberAtIndexOrDefault: (data: PlotData['z'] | undefined, index: number) => number | undefined;
 export declare const getValidXYRanges: (series: Partial<PlotData>) => [number, number][];

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

@@ -1,7 +1,7 @@
-define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/colors", "../GaugeChart/index", "../../utilities/utilities", "@fluentui/chart-utilities", "d3-time-format", "d3-shape", "./PlotlyColorAdapter"], function (require, exports, tslib_1, d3_array_1, d3_scale_1, colors_1, index_1, utilities_1, chart_utilities_1, d3_time_format_1, d3_shape_1, PlotlyColorAdapter_1) {
+define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../../utilities/colors", "../GaugeChart/index", "../../utilities/utilities", "@fluentui/chart-utilities", "d3-time-format", "d3-shape", "./PlotlyColorAdapter"], function (require, exports, tslib_1, d3_array_1, d3_scale_1, d3_format_1, colors_1, index_1, utilities_1, chart_utilities_1, d3_time_format_1, d3_shape_1, PlotlyColorAdapter_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.isInvalidValue = exports.findArrayAttributes = exports.projectPolarToCartesian = exports.transformPlotlyJsonToChartTableProps = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports._getGaugeAxisColor = exports.correctYearMonth = exports.isMonthArray = void 0;
+    exports.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.isStringArray = exports.findArrayAttributes = exports.projectPolarToCartesian = exports.transformPlotlyJsonToChartTableProps = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports._getGaugeAxisColor = exports.correctYearMonth = exports.isMonthArray = void 0;
     var dashOptions = {
         dot: {
             strokeDasharray: '1, 5',
@@ -156,7 +156,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         var mapLegendToDataPoint = {};
         (_j = firstData.labels) === null || _j === void 0 ? void 0 : _j.forEach(function (label, index) {
             var value = (0, exports.getNumberAtIndexOrDefault)(firstData.values, index);
-            if ((0, exports.isInvalidValue)(value) || value < 0) {
+            if ((0, chart_utilities_1.isInvalidValue)(value) || value < 0) {
                 return;
             }
             var legend = "".concat(label);
@@ -182,7 +182,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         var donutMarginVertical = 40 + (hideLabels ? 0 : 40);
         var innerRadius = firstData.hole
             ? firstData.hole * (Math.min(width - donutMarginHorizontal, height - donutMarginVertical) / 2)
-            : 0;
+            : utilities_1.MIN_DONUT_RADIUS;
         var chartTitle = getTitles(input.layout).chartTitle;
         return {
             data: {
@@ -233,7 +233,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
                             data: yVal,
                             color: color,
                         });
-                        yMaxValue = Math.max(yMaxValue, yVal);
+                        if (typeof yVal === 'number') {
+                            yMaxValue = Math.max(yMaxValue, yVal);
+                        }
                     }
                     else if (series.type === 'scatter' || !!fallbackVSBC) {
                         var lineColor = (0, PlotlyColorAdapter_1.resolveColor)(extractedLineColors, index1, legend, colorMap, isDarkTheme);
@@ -252,7 +254,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
                             lineOptions: tslib_1.__assign(tslib_1.__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
                             useSecondaryYScale: usesSecondaryYScale(series),
                         });
-                        if (!usesSecondaryYScale(series)) {
+                        if (!usesSecondaryYScale(series) && typeof yVal === 'number') {
                             yMaxValue = Math.max(yMaxValue, yVal);
                             yMinValue = Math.min(yMinValue, yVal);
                         }
@@ -261,21 +263,44 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             });
         });
         var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
-        return tslib_1.__assign(tslib_1.__assign({ data: Object.values(mapXToDataPoints), width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2 });
+        return tslib_1.__assign(tslib_1.__assign({ data: Object.values(mapXToDataPoints), width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true });
     };
     exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
+    var createColorScale = function (colorscale, domain) {
+        var dMin = domain[0], dMax = domain[1];
+        // Normalize colorscale domain to actual data domain
+        var scaleDomain = colorscale.map(function (_a) {
+            var pos = _a[0];
+            return dMin + pos * (dMax - dMin);
+        });
+        var scaleColors = colorscale.map(function (item) { return item[1]; });
+        return (0, d3_scale_1.scaleLinear)().domain(scaleDomain).range(scaleColors);
+    };
     var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c;
         var mapXToDataPoints = {};
         var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
         var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
+        var colorScale = undefined;
         input.data.forEach(function (series, index1) {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+            if (((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.coloraxis) === null || _b === void 0 ? void 0 : _b.colorscale) === null || _c === void 0 ? void 0 : _c.length) &&
+                (0, chart_utilities_1.isArrayOrTypedArray)((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color) &&
+                ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length > 0 &&
+                typeof ((_g = (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g[0]) === 'number') {
+                var scale = input.layout.coloraxis.colorscale;
+                var colorValues = (_h = series.marker) === null || _h === void 0 ? void 0 : _h.color;
+                var _t = [
+                    (_k = (_j = input.layout.coloraxis) === null || _j === void 0 ? void 0 : _j.cmin) !== null && _k !== void 0 ? _k : Math.min.apply(Math, colorValues),
+                    (_m = (_l = input.layout.coloraxis) === null || _l === void 0 ? void 0 : _l.cmax) !== null && _m !== void 0 ? _m : Math.max.apply(Math, colorValues),
+                ], dMin = _t[0], dMax = _t[1];
+                colorScale = createColorScale(scale, [dMin, dMax]);
+            }
             // extract colors for each series only once
-            var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
-            (_e = series.x) === null || _e === void 0 ? void 0 : _e.forEach(function (x, xIndex) {
-                var _a;
-                if ((0, exports.isInvalidValue)(x) || (0, exports.isInvalidValue)((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
+            var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_q = (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.template) === null || _p === void 0 ? void 0 : _p.layout) === null || _q === void 0 ? void 0 : _q.colorway, colorwayType, (_r = series.marker) === null || _r === void 0 ? void 0 : _r.color, colorMap, isDarkTheme);
+            (_s = series.x) === null || _s === void 0 ? void 0 : _s.forEach(function (x, xIndex) {
+                var _a, _b, _c, _d;
+                if ((0, chart_utilities_1.isInvalidValue)(x) || (0, chart_utilities_1.isInvalidValue)((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
                     return;
                 }
                 if (!mapXToDataPoints[x]) {
@@ -283,8 +308,10 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
                 }
                 if (series.type === 'bar') {
                     var legend = legends[index1];
-                    // resolve color for each legend's bars from the extracted colors
-                    var color = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index1, legend, colorMap, isDarkTheme);
+                    // resolve color for each legend's bars from the colorscale or extracted colors
+                    var color = colorScale
+                        ? colorScale((0, chart_utilities_1.isArrayOrTypedArray)((_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) ? (_d = (_c = series.marker) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d[xIndex] : 0)
+                        : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index1, legend, colorMap, isDarkTheme);
                     mapXToDataPoints[x].series.push({
                         key: legend,
                         data: series.y[xIndex],
@@ -315,13 +342,13 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             var yValues = [];
             series.x.forEach(function (xVal, index) {
                 var yVal = (0, exports.getNumberAtIndexOrDefault)(series.y, index);
-                if ((0, exports.isInvalidValue)(xVal) || (0, exports.isInvalidValue)(yVal)) {
+                if ((0, chart_utilities_1.isInvalidValue)(xVal) || (0, chart_utilities_1.isInvalidValue)(yVal)) {
                     return;
                 }
                 xValues.push(xVal);
                 yValues.push(yVal);
             });
-            var isXString = isStringArray(xValues);
+            var isXString = (0, exports.isStringArray)(xValues);
             // TODO: In case of a single bin, add an empty bin of the same size to prevent the
             // default bar width from being used and ensure the bar spans the full intended range.
             var xBins = createBins(xValues, (_e = series.xbins) === null || _e === void 0 ? void 0 : _e.start, (_f = series.xbins) === null || _f === void 0 ? void 0 : _f.end, (_g = series.xbins) === null || _g === void 0 ? void 0 : _g.size);
@@ -376,7 +403,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             // extract colors for each series only once
             var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, isScatterMarkers ? (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color : (_e = series.line) === null || _e === void 0 ? void 0 : _e.color, colorMap, isDarkTheme);
             var xValues = series.x;
-            var isString = isStringArray(xValues);
+            var isString = (0, exports.isStringArray)(xValues);
             var isXDate = (0, chart_utilities_1.isDateArray)(xValues);
             var isXNumber = (0, chart_utilities_1.isNumberArray)(xValues);
             var legend = legends[index];
@@ -446,7 +473,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             return series.y
                 .map(function (yValue, i) {
                 var _a;
-                if ((0, exports.isInvalidValue)((_a = series.x) === null || _a === void 0 ? void 0 : _a[i]) || (0, exports.isInvalidValue)(yValue)) {
+                if ((0, chart_utilities_1.isInvalidValue)((_a = series.x) === null || _a === void 0 ? void 0 : _a[i]) || (0, chart_utilities_1.isInvalidValue)(yValue)) {
                     return null;
                 }
                 return {
@@ -504,15 +531,15 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             (_a = firstData.x) === null || _a === void 0 ? void 0 : _a.forEach(function (xVal, index) {
                 var _a;
                 var zVal = (0, exports.getNumberAtIndexOrDefault)(firstData.z, index);
-                if ((0, exports.isInvalidValue)(xVal) || (0, exports.isInvalidValue)((_a = firstData.y) === null || _a === void 0 ? void 0 : _a[index]) || (0, exports.isInvalidValue)(zVal)) {
+                if ((0, chart_utilities_1.isInvalidValue)(xVal) || (0, chart_utilities_1.isInvalidValue)((_a = firstData.y) === null || _a === void 0 ? void 0 : _a[index]) || (0, chart_utilities_1.isInvalidValue)(zVal)) {
                     return;
                 }
                 xValues_1.push(xVal);
                 yValues_1.push(firstData.y[index]);
                 zValues_1.push(zVal);
             });
-            var isXString_1 = isStringArray(xValues_1);
-            var isYString_1 = isStringArray(yValues_1);
+            var isXString_1 = (0, exports.isStringArray)(xValues_1);
+            var isYString_1 = (0, exports.isStringArray)(yValues_1);
             var xBins_1 = createBins(xValues_1, (_b = firstData.xbins) === null || _b === void 0 ? void 0 : _b.start, (_c = firstData.xbins) === null || _c === void 0 ? void 0 : _c.end, (_d = firstData.xbins) === null || _d === void 0 ? void 0 : _d.size);
             var yBins_1 = createBins(yValues_1, (_e = firstData.ybins) === null || _e === void 0 ? void 0 : _e.start, (_f = firstData.ybins) === null || _f === void 0 ? void 0 : _f.end, (_g = firstData.ybins) === null || _g === void 0 ? void 0 : _g.size);
             var zBins_1 = yBins_1.map(function () { return xBins_1.map(function () { return []; }); });
@@ -628,7 +655,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         var validLinks = ((_a = link === null || link === void 0 ? void 0 : link.value) !== null && _a !== void 0 ? _a : [])
             .map(function (val, index) {
             var _a, _b;
-            if ((0, exports.isInvalidValue)(val) || (0, exports.isInvalidValue)((_a = link === null || link === void 0 ? void 0 : link.source) === null || _a === void 0 ? void 0 : _a[index]) || (0, exports.isInvalidValue)((_b = link === null || link === void 0 ? void 0 : link.target) === null || _b === void 0 ? void 0 : _b[index])) {
+            if ((0, chart_utilities_1.isInvalidValue)(val) || (0, chart_utilities_1.isInvalidValue)((_a = link === null || link === void 0 ? void 0 : link.source) === null || _a === void 0 ? void 0 : _a[index]) || (0, chart_utilities_1.isInvalidValue)((_b = link === null || link === void 0 ? void 0 : link.target) === null || _b === void 0 ? void 0 : _b[index])) {
                 return null;
             }
             return {
@@ -747,37 +774,132 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             .replace(/\$[^$]*\$/g, '$')
             .trim();
     };
+    var formatValue = function (value, colIndex, cells) {
+        if (value === null || typeof value === 'boolean') {
+            return value;
+        }
+        var formatStr = Array.isArray(cells.format) ? cells.format[colIndex] : cells.format;
+        var prefix = Array.isArray(cells.prefix) ? cells.prefix[colIndex] : cells.prefix;
+        var suffix = Array.isArray(cells.suffix) ? cells.suffix[colIndex] : cells.suffix;
+        var formatted = value;
+        if (typeof value === 'number') {
+            if (typeof formatStr === 'string') {
+                try {
+                    formatted = (0, d3_format_1.format)(formatStr)(value);
+                }
+                catch (_a) {
+                    formatted = (0, utilities_1.formatScientificLimitWidth)(value);
+                }
+            }
+            else {
+                formatted = (0, utilities_1.formatScientificLimitWidth)(value);
+            }
+        }
+        return "".concat(prefix !== null && prefix !== void 0 ? prefix : '').concat(formatted).concat(suffix !== null && suffix !== void 0 ? suffix : '');
+    };
     var transformPlotlyJsonToChartTableProps = function (input, colorMap, isDarkTheme) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         var tableData = input.data[0];
-        var normalizeHeaders = function (values) {
-            // Case: values is array of arrays
-            if (Array.isArray(values[0])) {
-                return values.map(function (row) {
+        var normalizeHeaders = function (values, header) {
+            var cleanedValues = Array.isArray(values[0])
+                ? values.map(function (row) {
                     return row
                         .map(function (cell) { return cleanText(cell); })
                         .filter(Boolean)
                         .join(' ');
-                });
-            }
-            // Case: values is 1d array
-            return values.map(function (cell) { return cleanText(cell); });
+                })
+                : values.map(function (cell) { return cleanText(cell); });
+            return cleanedValues.map(function (value, colIndex) {
+                var _a, _b, _c;
+                var fontColorRaw = (_a = header === null || header === void 0 ? void 0 : header.font) === null || _a === void 0 ? void 0 : _a.color;
+                var fontColor;
+                if (Array.isArray(fontColorRaw)) {
+                    var colorEntry = fontColorRaw[colIndex];
+                    if (Array.isArray(colorEntry)) {
+                        fontColor = typeof colorEntry[0] === 'string' ? colorEntry[0] : undefined;
+                    }
+                    else if (typeof colorEntry === 'string') {
+                        fontColor = colorEntry;
+                    }
+                }
+                else if (typeof fontColorRaw === 'string') {
+                    fontColor = fontColorRaw;
+                }
+                var fontSizeRaw = (_b = header === null || header === void 0 ? void 0 : header.font) === null || _b === void 0 ? void 0 : _b.size;
+                var fontSize;
+                if (Array.isArray(fontSizeRaw)) {
+                    fontSize = Array.isArray(fontSizeRaw[0]) ? fontSizeRaw[0][colIndex] : fontSizeRaw[colIndex];
+                }
+                else if (typeof fontSizeRaw === 'number') {
+                    fontSize = fontSizeRaw;
+                }
+                var updatedColIndex = colIndex >= 1 ? 1 : 0;
+                var fillColorRaw = (_c = header === null || header === void 0 ? void 0 : header.fill) === null || _c === void 0 ? void 0 : _c.color;
+                var backgroundColor = Array.isArray(fillColorRaw) ? fillColorRaw[updatedColIndex] : fillColorRaw;
+                var textAlignRaw = header === null || header === void 0 ? void 0 : header.align;
+                var textAlign = Array.isArray(textAlignRaw) ? textAlignRaw[colIndex] : textAlignRaw;
+                var style = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, (typeof fontColor === 'string' ? { color: fontColor } : {})), (typeof fontSize === 'number' ? { fontSize: fontSize } : {})), (typeof backgroundColor === 'string' ? { backgroundColor: backgroundColor } : {})), (textAlign ? { textAlign: textAlign } : {}));
+                return { value: value, style: style };
+            });
         };
         var columns = (_b = (_a = tableData.cells) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : [];
+        var cells = tableData.cells.font ? tableData.cells : (_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.template) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.table[0].cells;
         var rows = columns[0].map(function (_, rowIndex) {
-            return columns.map(function (col) {
-                var cell = col[rowIndex];
-                return typeof cell === 'string' ? cleanText(cell) : cell;
+            return columns.map(function (col, colIndex) {
+                var _a, _b, _c;
+                var cellValue = col[rowIndex];
+                var cleanValue = typeof cellValue === 'string' ? cleanText(cellValue) : cellValue;
+                var formattedValue = typeof cleanValue === 'string' || typeof cleanValue === 'number'
+                    ? formatValue(cleanValue, colIndex, cells)
+                    : cleanValue;
+                var rawFontColor = (_a = cells === null || cells === void 0 ? void 0 : cells.font) === null || _a === void 0 ? void 0 : _a.color;
+                var fontColor;
+                if (Array.isArray(rawFontColor)) {
+                    var entry = rawFontColor[colIndex];
+                    var colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
+                    fontColor = typeof colorValue === 'string' ? colorValue : undefined;
+                }
+                else if (typeof rawFontColor === 'string') {
+                    fontColor = rawFontColor;
+                }
+                var rawFontSize = (_b = cells === null || cells === void 0 ? void 0 : cells.font) === null || _b === void 0 ? void 0 : _b.size;
+                var fontSize;
+                if (Array.isArray(rawFontSize)) {
+                    var entry = rawFontSize[colIndex];
+                    var fontSizeValue = Array.isArray(entry) ? entry[rowIndex] : entry;
+                    fontSize = typeof fontSizeValue === 'number' ? fontSizeValue : undefined;
+                }
+                else if (typeof rawFontSize === 'number') {
+                    fontSize = rawFontSize;
+                }
+                var updatedColIndex = colIndex >= 1 ? 1 : 0;
+                var rawBackgroundColor = (_c = cells === null || cells === void 0 ? void 0 : cells.fill) === null || _c === void 0 ? void 0 : _c.color;
+                var backgroundColor;
+                if (Array.isArray(rawBackgroundColor)) {
+                    var entry = rawBackgroundColor[updatedColIndex];
+                    var colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
+                    backgroundColor = typeof colorValue === 'string' ? colorValue : undefined;
+                }
+                else if (typeof rawBackgroundColor === 'string') {
+                    backgroundColor = rawBackgroundColor;
+                }
+                var rawTextAlign = Array.isArray(cells === null || cells === void 0 ? void 0 : cells.align) ? cells.align[colIndex] : cells === null || cells === void 0 ? void 0 : cells.align;
+                var textAlign = rawTextAlign;
+                var style = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, (fontColor ? { color: fontColor } : {})), (typeof fontSize === 'number' ? { fontSize: fontSize } : {})), (backgroundColor ? { backgroundColor: backgroundColor } : {})), (textAlign ? { textAlign: textAlign } : {}));
+                return {
+                    value: formattedValue,
+                    style: style,
+                };
             });
         });
         var styles = {
-            root: tslib_1.__assign({}, (((_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.font) === null || _d === void 0 ? void 0 : _d.size) ? { fontSize: input.layout.font.size } : {})),
+            root: tslib_1.__assign({}, (((_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.font) === null || _g === void 0 ? void 0 : _g.size) ? { fontSize: input.layout.font.size } : {})),
         };
         return {
-            headers: normalizeHeaders((_f = (_e = tableData.header) === null || _e === void 0 ? void 0 : _e.values) !== null && _f !== void 0 ? _f : []),
+            headers: normalizeHeaders((_j = (_h = tableData.header) === null || _h === void 0 ? void 0 : _h.values) !== null && _j !== void 0 ? _j : [], ((_k = tableData.header) === null || _k === void 0 ? void 0 : _k.font) ? tableData.header : (_o = (_m = (_l = input.layout) === null || _l === void 0 ? void 0 : _l.template) === null || _m === void 0 ? void 0 : _m.data) === null || _o === void 0 ? void 0 : _o.table[0].header),
             rows: rows,
-            width: (_g = input.layout) === null || _g === void 0 ? void 0 : _g.width,
-            height: (_h = input.layout) === null || _h === void 0 ? void 0 : _h.height,
+            width: (_p = input.layout) === null || _p === void 0 ? void 0 : _p.width,
+            height: (_q = input.layout) === null || _q === void 0 ? void 0 : _q.height,
             styles: styles,
         };
     };
@@ -790,7 +912,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             series.x = [];
             series.y = [];
             for (var ptindex = 0; ptindex < ((_b = (_a = series.r) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0); ptindex++) {
-                if ((0, exports.isInvalidValue)((_c = series.theta) === null || _c === void 0 ? void 0 : _c[ptindex]) || (0, exports.isInvalidValue)((_d = series.r) === null || _d === void 0 ? void 0 : _d[ptindex])) {
+                if ((0, chart_utilities_1.isInvalidValue)((_c = series.theta) === null || _c === void 0 ? void 0 : _c[ptindex]) || (0, chart_utilities_1.isInvalidValue)((_d = series.r) === null || _d === void 0 ? void 0 : _d[ptindex])) {
                     continue;
                 }
                 var thetaRad = (series.theta[ptindex] * Math.PI) / 180;
@@ -886,6 +1008,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return (0, chart_utilities_1.isArrayOfType)(arr, function (value) { return typeof value === 'string' || value === null; });
     };
+    exports.isStringArray = isStringArray;
     // TODO: Use binary search to find the appropriate bin for numeric value.
     var findBinIndex = function (bins, value, isString) {
         if (typeof value === 'undefined' || value === null) {
@@ -909,7 +1032,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         if (!data || data.length === 0) {
             return [];
         }
-        if (isStringArray(data)) {
+        if ((0, exports.isStringArray)(data)) {
             var categories_1 = Array.from(new Set(data));
             var start = typeof binStart === 'number' ? Math.ceil(binStart) : 0;
             var stop_1 = typeof binEnd === 'number' ? Math.floor(binEnd) + 1 : categories_1.length;
@@ -996,11 +1119,6 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             hideLegend: (layout === null || layout === void 0 ? void 0 : layout.showlegend) === false || ((layout === null || layout === void 0 ? void 0 : layout.showlegend) !== true && legends.length < 2) ? true : hideLegends,
         };
     };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var isInvalidValue = function (value) {
-        return typeof value === 'undefined' || value === null || (typeof value === 'number' && !isFinite(value));
-    };
-    exports.isInvalidValue = isInvalidValue;
     var getNumberAtIndexOrDefault = function (data, index) {
         if ((0, chart_utilities_1.isArrayOrTypedArray)(data)) {
             if (typeof data[index] !== 'number' || !isFinite(data[index])) {
@@ -1019,7 +1137,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         var start = 0;
         var end = 0;
         for (; end < series.x.length; end++) {
-            if ((0, exports.isInvalidValue)(series.x[end]) || (0, exports.isInvalidValue)(series.y[end])) {
+            if ((0, chart_utilities_1.isInvalidValue)(series.x[end]) || (0, chart_utilities_1.isInvalidValue)(series.y[end])) {
                 if (end - start > 0) {
                     ranges.push([start, end]);
                 }