npm - @fluentui/react-charts - Versions diffs - 0.0.0-nightly-20250814-0406.1 → 0.0.0-nightly-20250818-0407.1 - Mend

@fluentui/react-charts 0.0.0-nightly-20250814-0406.1 → 0.0.0-nightly-20250818-0407.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/lib/components/DeclarativeChart/DeclarativeChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DeclarativeChart/DeclarativeChart.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention /\nimport as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n decodeBase64Fields,\n isArrayOrTypedArray,\n isDateArray,\n isMonthArray,\n isNumberArray,\n isYearArray,\n mapFluentChart,\n sanitizeJson,\n} from '@fluentui/chart-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';\nimport { Theme, webLightTheme } from '@fluentui/tokens';\nimport * as d3Color from 'd3-color';\n\nimport {\n correctYearMonth,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n transformPlotlyJsonToChartTableProps,\n projectPolarToCartesian,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { LineChart, LineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, AreaChartProps } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { Chart, ImageExportOptions } from '../../types/index';\nimport { ScatterChart } from '../ScatterChart/index';\n\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 ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\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?: React.RefObject<IDeclarativeChart>;\n\n /\n Optional prop to specify the colorway type of the chart.\n * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n * - 'builtin': Use Fluent UI colorway.\n * - 'others': Reserved for future colorways.\n * @default 'default'\n /\n colorwayType?: ColorwayType;\n}\n\n/\n {@docCategory DeclarativeChart}\n /\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: ImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\nconst useIsDarkTheme = (): boolean => {\n const parentV9Theme = React.useContext(V9ThemeContext) as Theme;\n const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme;\n\n // Get background and foreground colors\n const backgroundColor = d3Color.hsl(v9Theme.colorNeutralBackground1);\n const foregroundColor = d3Color.hsl(v9Theme.colorNeutralForeground1);\n\n const isDarkTheme = backgroundColor.l < foregroundColor.l;\n\n return isDarkTheme;\n};\n\n/\n DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n const chart: OutputChartType = mapFluentChart(plotlySchema);\n if (!chart.isValid) {\n throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n }\n let plotlyInput = plotlySchema as PlotlySchema;\n try {\n plotlyInput = decodeBase64Fields(plotlyInput);\n } catch (error) {\n throw new Error(`Failed to decode plotly schema: ${error}`);\n }\n const plotlyInputWithValidData: PlotlySchema = {\n ...plotlyInput,\n data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace.index]),\n };\n\n let { selectedLegends } = plotlySchema;\n const colorMap = useColorMapping();\n const isDarkTheme = useIsDarkTheme();\n const chartRef = React.useRef<Chart>(null);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const commonProps = {\n legendProps: multiSelectLegendProps,\n componentRef: chartRef,\n };\n\n const renderLineAreaScatter = (plotlyData: Data[], isAreaChart: boolean): JSXElement => {\n const isScatterMarkers = ['markers', 'text+markers', 'markers+text'].includes((plotlyData[0] as PlotData)?.mode);\n const chartProps: LineChartProps \| AreaChartProps = {\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 if (isScatterMarkers) {\n return <ResponsiveScatterChart {...chartProps} />;\n }\n return <ResponsiveLineChart {...chartProps} />;\n };\n\n const checkAndRenderChart = (isAreaChart: boolean = false) => {\n let fallbackVSBC = false;\n const xValues = (plotlyInputWithValidData.data[0] as PlotData).x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\n\n // Consider year as categorical variable not numeric continuous variable\n // Also year is not considered a date variable as it is represented as a point\n // in time and brings additional complexity of handling timezone and locale\n // formatting given the current design of the charting library\n const isXYear = isYearArray(xValues);\n\n if ((isXDate \|\| isXNumber) && !isXYear) {\n return renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart);\n } else if (isXMonth) {\n const updatedData = plotlyInputWithValidData.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: correctYearMonth(dataPoint.x),\n }));\n return renderLineAreaScatter(updatedData, isAreaChart);\n }\n // Unsupported schema, render as VerticalStackedBarChart\n fallbackVSBC = true;\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(\n plotlyInputWithValidData,\n colorMap,\n props.colorwayType,\n isDarkTheme,\n fallbackVSBC,\n )}\n {...commonProps}\n />\n );\n };\n\n // TODO\n const exportAsImage = React.useCallback((opts?: ImageExportOptions): 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: tokens.colorNeutralBackground1,\n scale: 5,\n ...opts,\n })\n .then(resolve)\n .catch(reject);\n });\n }, []);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n 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 // TODO: Add 'scatter' as a separate chart type\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"],"names":["React","decodeBase64Fields","isArrayOrTypedArray","isDateArray","isMonthArray","isNumberArray","isYearArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","correctYearMonth","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToScatterChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","transformPlotlyJsonToChartTableProps","projectPolarToCartesian","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","ScatterChart","withResponsiveContainer","ChartTable","ResponsiveDonutChart","ResponsiveVerticalStackedBarChart","ResponsiveLineChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveHeatMapChart","ResponsiveSankeyChart","ResponsiveGaugeChart","ResponsiveGroupedVerticalBarChart","ResponsiveVerticalBarChart","ResponsiveScatterChart","ResponsiveChartTable","useColorMapping","colorMap","useRef","Map","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","DeclarativeChart","forwardRef","props","forwardedRef","plotlySchema","chartSchema","chart","isValid","Error","errorMessage","plotlyInput","error","plotlyInputWithValidData","data","validTracesInfo","map","trace","index","selectedLegends","chartRef","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","commonProps","legendProps","componentRef","renderLineAreaScatter","plotlyData","isAreaChart","isScatterMarkers","includes","mode","chartProps","layout","colorwayType","checkAndRenderChart","fallbackVSBC","xValues","x","isXDate","isXNumber","isXMonth","isXYear","updatedData","dataPoint","exportAsImage","useCallback","opts","Promise","resolve","reject","current","toImage","background","scale","then","catch","useImperativeHandle","type","cartesianProjection","some","series","fill","stackgroup","displayName","defaultProps"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/DeclarativeChart/DeclarativeChart.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention /\nimport as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n decodeBase64Fields,\n isArrayOrTypedArray,\n isDateArray,\n isMonthArray,\n isNumberArray,\n isYearArray,\n mapFluentChart,\n sanitizeJson,\n} from '@fluentui/chart-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';\nimport { Theme, webLightTheme } from '@fluentui/tokens';\nimport * as d3Color from 'd3-color';\n\nimport {\n correctYearMonth,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n transformPlotlyJsonToChartTableProps,\n projectPolarToCartesian,\n isStringArray,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { LineChart, LineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, AreaChartProps } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { Chart, ImageExportOptions } from '../../types/index';\nimport { ScatterChart } from '../ScatterChart/index';\n\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 ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\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?: React.RefObject<IDeclarativeChart>;\n\n /\n Optional prop to specify the colorway type of the chart.\n * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n * - 'builtin': Use Fluent UI colorway.\n * - 'others': Reserved for future colorways.\n * @default 'default'\n /\n colorwayType?: ColorwayType;\n}\n\n/\n {@docCategory DeclarativeChart}\n /\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: ImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\nconst useIsDarkTheme = (): boolean => {\n const parentV9Theme = React.useContext(V9ThemeContext) as Theme;\n const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme;\n\n // Get background and foreground colors\n const backgroundColor = d3Color.hsl(v9Theme.colorNeutralBackground1);\n const foregroundColor = d3Color.hsl(v9Theme.colorNeutralForeground1);\n\n const isDarkTheme = backgroundColor.l < foregroundColor.l;\n\n return isDarkTheme;\n};\n\n/\n DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n const chart: OutputChartType = mapFluentChart(plotlySchema);\n if (!chart.isValid) {\n throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n }\n let plotlyInput = plotlySchema as PlotlySchema;\n try {\n plotlyInput = decodeBase64Fields(plotlyInput);\n } catch (error) {\n throw new Error(`Failed to decode plotly schema: ${error}`);\n }\n const plotlyInputWithValidData: PlotlySchema = {\n ...plotlyInput,\n data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace.index]),\n };\n\n let { selectedLegends } = plotlySchema;\n const colorMap = useColorMapping();\n const isDarkTheme = useIsDarkTheme();\n const chartRef = React.useRef<Chart>(null);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const commonProps = {\n legendProps: multiSelectLegendProps,\n componentRef: chartRef,\n };\n\n const renderLineAreaScatter = (plotlyData: Data[], isAreaChart: boolean): JSXElement => {\n const isScatterMarkers = ['markers', 'text+markers', 'markers+text'].includes((plotlyData[0] as PlotData)?.mode);\n const chartProps: LineChartProps \| AreaChartProps = {\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 if (isScatterMarkers) {\n return <ResponsiveScatterChart {...chartProps} />;\n }\n return <ResponsiveLineChart {...chartProps} />;\n };\n\n const checkAndRenderChart = (isAreaChart: boolean = false) => {\n let fallbackVSBC = false;\n const xValues = (plotlyInputWithValidData.data[0] as PlotData).x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\n 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 renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart);\n } else if (isXMonth) {\n const updatedData = plotlyInputWithValidData.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: correctYearMonth(dataPoint.x),\n }));\n return renderLineAreaScatter(updatedData, isAreaChart);\n }\n // Unsupported schema, render as VerticalStackedBarChart\n fallbackVSBC = true;\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(\n plotlyInputWithValidData,\n colorMap,\n props.colorwayType,\n isDarkTheme,\n fallbackVSBC,\n )}\n {...commonProps}\n />\n );\n };\n\n // TODO\n const exportAsImage = React.useCallback((opts?: ImageExportOptions): 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: tokens.colorNeutralBackground1,\n scale: 5,\n ...opts,\n })\n .then(resolve)\n .catch(reject);\n });\n }, []);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n 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 // TODO: Add 'scatter' as a separate chart type\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"],"names":["React","decodeBase64Fields","isArrayOrTypedArray","isDateArray","isMonthArray","isNumberArray","isYearArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","correctYearMonth","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToScatterChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","transformPlotlyJsonToChartTableProps","projectPolarToCartesian","isStringArray","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","ScatterChart","withResponsiveContainer","ChartTable","ResponsiveDonutChart","ResponsiveVerticalStackedBarChart","ResponsiveLineChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveHeatMapChart","ResponsiveSankeyChart","ResponsiveGaugeChart","ResponsiveGroupedVerticalBarChart","ResponsiveVerticalBarChart","ResponsiveScatterChart","ResponsiveChartTable","useColorMapping","colorMap","useRef","Map","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","DeclarativeChart","forwardRef","props","forwardedRef","plotlySchema","chartSchema","chart","isValid","Error","errorMessage","plotlyInput","error","plotlyInputWithValidData","data","validTracesInfo","map","trace","index","selectedLegends","chartRef","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","commonProps","legendProps","componentRef","renderLineAreaScatter","plotlyData","isAreaChart","isScatterMarkers","includes","mode","chartProps","layout","colorwayType","checkAndRenderChart","fallbackVSBC","xValues","x","isXDate","isXNumber","isXMonth","isYString","y","isXYear","updatedData","dataPoint","exportAsImage","useCallback","opts","Promise","resolve","reject","current","toImage","background","scale","then","catch","useImperativeHandle","type","cartesianProjection","some","series","fill","stackgroup","displayName","defaultProps"],"mappings":"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"}

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js CHANGED Viewed

@@ -216,14 +216,18 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
     let yMaxValue = 0;
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
     const { legends, hideLegend } = getLegendProps(input.data, input.layout);
+    let colorScale = undefined;
     let yMinValue = 0;
     input.data.forEach((series, index1)=>{
-        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_line;
+        var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _input_layout_template_layout1, _input_layout_template1, _input_layout2, _series_line;
+        if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[0]) === 'number') {
+            colorScale = createColorScale(input.layout, series);
+        }
         const isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
         // extract bar colors for each series only once
-        const extractedBarColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
+        const extractedBarColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
         // extract line colors for each series only once
-        const extractedLineColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template1 = _input_layout1.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, colorwayType, (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
+        const extractedLineColors = extractColor((_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_template1 = _input_layout2.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, colorwayType, (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
         const xValues = series.x;
         const isXDate = isDateArray(xValues);
         const isXString = isStringArray(xValues);
@@ -233,6 +237,7 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
             const rangeXValues = series.x.slice(rangeStart, rangeEnd);
             const rangeYValues = series.y.slice(rangeStart, rangeEnd);
             rangeXValues.forEach((x, index2)=>{
+                var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
                 if (!mapXToDataPoints[x]) {
                     mapXToDataPoints[x] = {
                         xAxisPoint: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
@@ -241,8 +246,8 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
                     };
                 }
                 const legend = legends[index1];
-                // resolve color for each legend's bars from the extracted colors
-                const color = resolveColor(extractedBarColors, index1, legend, colorMap, isDarkTheme);
+                // resolve color for each legend's bars from the colorscale or extracted colors
+                const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedBarColors, index2, legend, colorMap, isDarkTheme);
                 const yVal = rangeYValues[index2];
                 if (series.type === 'bar') {
                     mapXToDataPoints[x].chartData.push({
@@ -250,6 +255,9 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
                         data: yVal,
                         color
                     });
+                    if (typeof yVal === 'number') {
+                        yMaxValue = Math.max(yMaxValue, yVal);
+                    }
                 } else if (series.type === 'scatter' || !!fallbackVSBC) {
                     var _series_line;
                     const lineColor = resolveColor(extractedLineColors, index1, legend, colorMap, isDarkTheme);
@@ -266,7 +274,7 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
                         } : {},
                         useSecondaryYScale: usesSecondaryYScale(series)
                     });
-                    if (!usesSecondaryYScale(series)) {
+                    if (!usesSecondaryYScale(series) && typeof yVal === 'number') {
                         yMaxValue = Math.max(yMaxValue, yVal);
                         yMinValue = Math.min(yMinValue, yVal);
                     }
@@ -294,14 +302,24 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
         hideTickOverlap: true,
         barGapMax: 2,
         hideLegend,
-        roundCorners: true
+        roundCorners: true,
+        showYAxisLables: true,
+        noOfCharsToTruncate: 20,
+        showYAxisLablesTooltip: true
     };
 };
-const createColorScale = (colorscale, domain)=>{
-    const [dMin, dMax] = domain;
+const createColorScale = (layout, series)=>{
+    var _layout_coloraxis, _series_marker, _layout_coloraxis1, _layout_coloraxis2;
+    const scale = layout === null || layout === void 0 ? void 0 : (_layout_coloraxis = layout.coloraxis) === null || _layout_coloraxis === void 0 ? void 0 : _layout_coloraxis.colorscale;
+    const colorValues = (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color;
+    var _layout_coloraxis_cmin, _layout_coloraxis_cmax;
+    const [dMin, dMax] = [
+        (_layout_coloraxis_cmin = layout === null || layout === void 0 ? void 0 : (_layout_coloraxis1 = layout.coloraxis) === null || _layout_coloraxis1 === void 0 ? void 0 : _layout_coloraxis1.cmin) !== null && _layout_coloraxis_cmin !== void 0 ? _layout_coloraxis_cmin : Math.min(...colorValues),
+        (_layout_coloraxis_cmax = layout === null || layout === void 0 ? void 0 : (_layout_coloraxis2 = layout.coloraxis) === null || _layout_coloraxis2 === void 0 ? void 0 : _layout_coloraxis2.cmax) !== null && _layout_coloraxis_cmax !== void 0 ? _layout_coloraxis_cmax : Math.max(...colorValues)
+    ];
     // Normalize colorscale domain to actual data domain
-    const scaleDomain = colorscale.map(([pos])=>dMin + pos * (dMax - dMin));
-    const scaleColors = colorscale.map((item)=>item[1]);
+    const scaleDomain = scale.map(([pos])=>dMin + pos * (dMax - dMin));
+    const scaleColors = scale.map((item)=>item[1]);
     return d3ScaleLinear().domain(scaleDomain).range(scaleColors);
 };
 export const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, isDarkTheme)=>{
@@ -313,18 +331,7 @@ export const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, is
     input.data.forEach((series, index1)=>{
         var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _series_x;
         if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[0]) === 'number') {
-            var _series_marker4, _input_layout_coloraxis1, _input_layout_coloraxis2;
-            const scale = input.layout.coloraxis.colorscale;
-            const colorValues = (_series_marker4 = series.marker) === null || _series_marker4 === void 0 ? void 0 : _series_marker4.color;
-            var _input_layout_coloraxis_cmin, _input_layout_coloraxis_cmax;
-            const [dMin, dMax] = [
-                (_input_layout_coloraxis_cmin = (_input_layout_coloraxis1 = input.layout.coloraxis) === null || _input_layout_coloraxis1 === void 0 ? void 0 : _input_layout_coloraxis1.cmin) !== null && _input_layout_coloraxis_cmin !== void 0 ? _input_layout_coloraxis_cmin : Math.min(...colorValues),
-                (_input_layout_coloraxis_cmax = (_input_layout_coloraxis2 = input.layout.coloraxis) === null || _input_layout_coloraxis2 === void 0 ? void 0 : _input_layout_coloraxis2.cmax) !== null && _input_layout_coloraxis_cmax !== void 0 ? _input_layout_coloraxis_cmax : Math.max(...colorValues)
-            ];
-            colorScale = createColorScale(scale, [
-                dMin,
-                dMax
-            ]);
+            colorScale = createColorScale(input.layout, series);
         }
         // extract colors for each series only once
         const extractedColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
@@ -340,10 +347,10 @@ export const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, is
                 };
             }
             if (series.type === 'bar') {
-                var _series_marker, _series_marker_color, _series_marker1;
+                var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
                 const legend = legends[index1];
                 // resolve color for each legend's bars from the colorscale or extracted colors
-                const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : (_series_marker_color = _series_marker1.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2] : 0) : resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
+                const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
                 mapXToDataPoints[x].series.push({
                     key: legend,
                     data: series.y[index2],
@@ -378,13 +385,17 @@ export const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isD
     var _input_layout, _input_layout1, _vbcData_;
     const vbcData = [];
     const { legends, hideLegend } = getLegendProps(input.data, input.layout);
+    let colorScale = undefined;
     input.data.forEach((series, seriesIdx)=>{
-        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_xbins, _series_xbins1, _series_xbins2;
+        var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _series_xbins, _series_xbins1, _series_xbins2;
         if (!series.x) {
             return;
         }
+        if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[0]) === 'number') {
+            colorScale = createColorScale(input.layout, series);
+        }
         // extract colors for each series only once
-        const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
+        const extractedColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
         const xValues = [];
         const yValues = [];
         series.x.forEach((xVal, index)=>{
@@ -413,9 +424,10 @@ export const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isD
             return yVal;
         });
         xBins.forEach((bin, index)=>{
+            var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
             const legend = legends[seriesIdx];
-            // resolve color for each legend's bars from the extracted colors
-            const color = resolveColor(extractedColors, seriesIdx, legend, colorMap, isDarkTheme);
+            // resolve color for each legend's bars from the colorscale or extracted colors
+            const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
             const yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
             vbcData.push({
                 x: isXString ? bin.join(', ') : getBinCenter(bin),
@@ -450,9 +462,10 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isSca
     let mode = 'tonexty';
     const { legends, hideLegend } = getLegendProps(input.data, input.layout);
     const chartData = input.data.map((series, index)=>{
-        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_line, _series_line1;
+        var _series_mode, _series_line, _series_marker, _series_line1, _input_layout_template_layout, _input_layout_template, _input_layout, _series_line2;
+        const colors = isScatterMarkers ? (series === null || series === void 0 ? void 0 : (_series_mode = series.mode) === null || _series_mode === void 0 ? void 0 : _series_mode.includes('line')) ? (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color : (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color : (_series_line1 = series.line) === null || _series_line1 === void 0 ? void 0 : _series_line1.color;
         // extract colors for each series only once
-        const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, isScatterMarkers ? (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color : (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
+        const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, colors, colorMap, isDarkTheme);
         const xValues = series.x;
         const isXString = isStringArray(xValues);
         const isXDate = isDateArray(xValues);
@@ -464,7 +477,7 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isSca
         const seriesColor = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
         const lineOptions = getLineOptions(series.line);
-        const dashType = ((_series_line1 = series.line) === null || _series_line1 === void 0 ? void 0 : _series_line1.dash) || 'solid';
+        const dashType = ((_series_line2 = series.line) === null || _series_line2 === void 0 ? void 0 : _series_line2.dash) || 'solid';
         const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
         const validXYRanges = getValidXYRanges(series);
         return validXYRanges.map(([rangeStart, rangeEnd], rangeIdx)=>{
@@ -543,18 +556,22 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isSca
 export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout, _input_layout_margin, _input_layout1, _input_layout_margin1, _input_layout2, _input_layout_yaxis2, _input_layout3, _input_layout_yaxis21, _input_layout4, _input_layout_yaxis2_title, _input_layout_yaxis22, _input_layout5, _input_layout6;
     const { legends, hideLegend } = getLegendProps(input.data, input.layout);
+    let colorScale = undefined;
     const chartData = input.data.map((series, index)=>{
-        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker;
+        var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3;
+        if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[0]) === 'number') {
+            colorScale = createColorScale(input.layout, series);
+        }
         // extract colors for each series only once
-        const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
+        const extractedColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
         const legend = legends[index];
-        // resolve color for each legend's bars from the extracted colors
-        const color = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
         return series.y.map((yValue, i)=>{
-            var _series_x;
+            var _series_x, _series_marker, _series_marker1, _series_marker_color, _series_marker2;
             if (isInvalidValue((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]) || isInvalidValue(yValue)) {
                 return null;
             }
+            // resolve color for each legend's bars from the colorscale or extracted colors
+            const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[i % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, i, legend, colorMap, isDarkTheme);
             return {
                 x: series.x[i],
                 y: yValue,
@@ -1093,7 +1110,7 @@ function getLineOptions(line) {
     return Object.keys(lineOptions).length > 0 ? lineOptions : undefined;
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const isStringArray = (arr)=>{
+export const isStringArray = (arr)=>{
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return isArrayOfType(arr, (value)=>typeof value === 'string' || value === null);
 };