npm - @fluentui/react-charts - Versions diffs - 0.0.0-nightly-20250813-0406.1 → 0.0.0-nightly-20250815-0407.1 - Mend

@fluentui/react-charts 0.0.0-nightly-20250813-0406.1 → 0.0.0-nightly-20250815-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":"AAAA,uDAAuD,GACvD,YAAYA,WAAW,QAAQ;AAG/B,SACEC,kBAAkB,EAClBC,mBAAmB,EACnBC,WAAW,EACXC,YAAY,EACZC,aAAa,EACbC,WAAW,EACXC,cAAc,EACdC,YAAY,QACP,4BAA4B;AACnC,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,yBAAyBC,cAAc,QAAQ,kCAAkC;AAC1F,SAAgBC,aAAa,QAAQ,mBAAmB;AACxD,YAAYC,aAAa,WAAW;AAEpC,SACEC,gBAAgB,EAChBC,+BAA+B,EAC/BC,8BAA8B,EAC9BC,sCAAsC,EACtCC,+CAA+C,EAC/CC,iCAAiC,EACjCC,gCAAgC,EAChCC,+BAA+B,EAC/BC,8BAA8B,EAC9BC,6BAA6B,EAC7BC,oCAAoC,EACpCC,uBAAuB,EACvBC,aAAa,QACR,wBAAwB;AAE/B,SAASC,UAAU,QAAQ,sBAAsB;AACjD,SAASC,uBAAuB,QAAQ,mCAAmC;AAC3E,SAASC,SAAS,QAAwB,qBAAqB;AAC/D,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,SAASC,SAAS,QAAwB,qBAAqB;AAC/D,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,UAAU,QAAQ,sBAAsB;AACjD,SAASC,uBAAuB,QAAQ,mCAAmC;AAC3E,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,YAAY,QAAQ,wBAAwB;AAErD,SAASC,uBAAuB,QAAQ,iDAAiD;AACzF,SAASC,UAAU,QAAQ,sBAAsB;AAEjD,MAAMC,uBAAuBF,wBAAwBX;AACrD,MAAMc,oCAAoCH,wBAAwBV;AAClE,MAAMc,sBAAsBJ,wBAAwBT;AACpD,MAAMc,uCAAuCL,wBAAwBR;AACrE,MAAMc,sBAAsBN,wBAAwBP;AACpD,MAAMc,yBAAyBP,wBAAwBN;AACvD,MAAMc,wBAAwBR,wBAAwBL;AACtD,MAAMc,uBAAuBT,wBAAwBJ;AACrD,MAAMc,oCAAoCV,wBAAwBH;AAClE,MAAMc,6BAA6BX,wBAAwBF;AAC3D,MAAMc,yBAAyBZ,wBAAwBD;AACvD,MAAMc,uBAAuBb,wBAAwBC;AAoDrD,MAAMa,kBAAkB;IACtB,MAAMC,WAAWrD,MAAMsD,MAAM,CAAC,IAAIC;IAClC,OAAOF;AACT;AAEA,MAAMG,iBAAiB;IACrB,MAAMC,gBAAgBzD,MAAM0D,UAAU,CAAC/C;IACvC,MAAMgD,UAAiBF,gBAAgBA,gBAAgB7C;IAEvD,uCAAuC;IACvC,MAAMgD,kBAAkB/C,QAAQgD,GAAG,CAACF,QAAQG,uBAAuB;IACnE,MAAMC,kBAAkBlD,QAAQgD,GAAG,CAACF,QAAQK,uBAAuB;IAEnE,MAAMC,cAAcL,gBAAgBM,CAAC,GAAGH,gBAAgBG,CAAC;IAEzD,OAAOD;AACT;AAEA;;;CAGC,GACD,OAAO,MAAME,iCAAmEnE,MAAMoE,UAAU,CAG9F,CAACC,OAAOC;IACR,MAAM,EAAEC,YAAY,EAAE,GAAG/D,aAAa6D,MAAMG,WAAW;IACvD,MAAMC,QAAyBlE,eAAegE;IAC9C,IAAI,CAACE,MAAMC,OAAO,EAAE;QAClB,MAAM,IAAIC,MAAM,CAAC,sBAAsB,EAAEF,MAAMG,YAAY,EAAE;IAC/D;IACA,IAAIC,cAAcN;IAClB,IAAI;QACFM,cAAc5E,mBAAmB4E;IACnC,EAAE,OAAOC,OAAO;QACd,MAAM,IAAIH,MAAM,CAAC,gCAAgC,EAAEG,OAAO;IAC5D;IACA,MAAMC,2BAAyC;QAC7C,GAAGF,WAAW;QACdG,MAAMP,MAAMQ,eAAe,CAAEC,GAAG,CAACC,CAAAA,QAASN,YAAYG,IAAI,CAACG,MAAMC,KAAK,CAAC;IACzE;IAEA,IAAI,EAAEC,eAAe,EAAE,GAAGd;IAC1B,MAAMlB,WAAWD;IACjB,MAAMa,cAAcT;IACpB,MAAM8B,WAAWtF,MAAMsD,MAAM,CAAQ;IAErC,IAAI,CAACpD,oBAAoBmF,kBAAkB;QACzCA,kBAAkB,EAAE;IACtB;IAEA,MAAM,CAACE,eAAeC,iBAAiB,GAAGxF,MAAMyF,QAAQ,CAAWJ;IACnE,MAAMK,wBAAwB,CAACC;QAC7BH,iBAAiBG;QACjB,IAAItB,MAAMuB,cAAc,EAAE;YACxBvB,MAAMuB,cAAc,CAAC;gBAAErB,cAAc;oBAAEM;oBAAaQ,iBAAiBM;gBAAK;YAAE;QAC9E;IACF;IAEA3F,MAAM6F,SAAS,CAAC;QACd,wDAAwD;QACxD,MAAM,EAAEtB,YAAY,EAAE,GAAG/D,aAAa6D,MAAMG,WAAW;QACvD,wDAAwD;QACxD,MAAM,EAAEa,eAAe,EAAE,GAAGd;QAC5BiB,iBAAiBH,4BAAAA,6BAAAA,kBAAmB,EAAE;IACxC,GAAG;QAAChB,MAAMG,WAAW;KAAC;IAEtB,MAAMsB,yBAAyB;QAC7BC,0BAA0B;QAC1BC,UAAUN;QACVL,iBAAiBE;IACnB;IAEA,MAAMU,cAAc;QAClBC,aAAaJ;QACbK,cAAcb;IAChB;IAEA,MAAMc,wBAAwB,CAACC,YAAoBC;YAC8BD;QAA/E,MAAME,mBAAmB;YAAC;YAAW;YAAgB;SAAe,CAACC,QAAQ,EAAEH,eAAAA,UAAU,CAAC,EAAE,cAAbA,mCAAD,AAACA,aAA4BI,IAAI;QAC/G,MAAMC,aAA8C;YAClD,GAAGzF,uCACD;gBAAE+D,MAAMqB;gBAAYM,QAAQ9B,YAAY8B,MAAM;YAAC,GAC/CL,aACAC,kBACAlD,UACAgB,MAAMuC,YAAY,EAClB3C,YACD;YACD,GAAGgC,WAAW;QAChB;QACA,IAAIK,aAAa;YACf,qBAAO,oBAAC1D,qBAAwB8D;QAClC;QACA,IAAIH,kBAAkB;YACpB,qBAAO,oBAACrD,wBAA2BwD;QACrC;QACA,qBAAO,oBAAChE,qBAAwBgE;IAClC;IAEA,MAAMG,sBAAsB,CAACP,cAAuB,KAAK;QACvD,IAAIQ,eAAe;QACnB,MAAMC,UAAU,AAAChC,yBAAyBC,IAAI,CAAC,EAAE,CAAcgC,CAAC;QAChE,MAAMC,UAAU9G,YAAY4G;QAC5B,MAAMG,YAAY7G,cAAc0G;QAChC,MAAMI,WAAW/G,aAAa2G;QAC9B,MAAMK,YAAY1F,cAAc,AAACqD,yBAAyBC,IAAI,CAAC,EAAE,CAAuBqC,CAAC;QAEzF,wEAAwE;QACxE,8EAA8E;QAC9E,2EAA2E;QAC3E,8DAA8D;QAC9D,MAAMC,UAAUhH,YAAYyG;QAE5B,IAAI,AAACE,CAAAA,WAAWC,SAAQ,KAAM,CAACI,WAAW,CAACF,WAAW;YACpD,OAAOhB,sBAAsBrB,yBAAyBC,IAAI,EAAEsB;QAC9D,OAAO,IAAIa,UAAU;YACnB,MAAMI,cAAcxC,yBAAyBC,IAAI,CAACE,GAAG,CAAC,CAACsC,YAAyB,CAAA;oBAC9E,GAAGA,SAAS;oBACZR,GAAGlG,iBAAiB0G,UAAUR,CAAC;gBACjC,CAAA;YACA,OAAOZ,sBAAsBmB,aAAajB;QAC5C;QACA,wDAAwD;QACxDQ,eAAe;QACf,qBACE,oBAACrE;YACE,GAAGzB,+BACF+D,0BACA1B,UACAgB,MAAMuC,YAAY,EAClB3C,aACA6C,aACD;YACA,GAAGb,WAAW;;IAGrB;IAEA,OAAO;IACP,MAAMwB,gBAAgBzH,MAAM0H,WAAW,CAAC,CAACC;QACvC,OAAO,IAAIC,QAAQ,CAACC,SAASC;YAC3B,IAAI,CAACxC,SAASyC,OAAO,IAAI,OAAOzC,SAASyC,OAAO,CAACC,OAAO,KAAK,YAAY;gBACvE,OAAOF,OAAOnD,MAAM;YACtB;YAEAW,SAASyC,OAAO,CACbC,OAAO,CAAC;gBACPC,YAAYxH,OAAOqD,uBAAuB;gBAC1CoE,OAAO;gBACP,GAAGP,IAAI;YACT,GACCQ,IAAI,CAACN,SACLO,KAAK,CAACN;QACX;IACF,GAAG,EAAE;IAEL9H,MAAMqI,mBAAmB,CACvBhE,MAAM8B,YAAY,EAClB,IAAO,CAAA;YACLsB;QACF,CAAA,GACA;QAACA;KAAc;IAGjB,OAAQhD,MAAM6D,IAAI;QAChB,KAAK;YACH,qBACE,oBAAC9F;gBACE,GAAGzB,gCAAgCgE,0BAA0B1B,UAAUgB,MAAMuC,YAAY,EAAE3C,YAAY;gBACvG,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAACtD;gBACE,GAAGzB,gDACF6D,0BACA1B,UACAgB,MAAMuC,YAAY,EAClB3C,YACD;gBACA,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAACjD;gBACE,GAAG1B,+BAA+ByD,0BAA0B1B,UAAUgB,MAAMuC,YAAY,EAAE3C,YAAY;gBACtG,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAACxD;gBACE,GAAGzB,+BAA+B+D,0BAA0B1B,UAAUgB,MAAMuC,YAAY,EAAE3C,YAAY;gBACtG,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAACpD;gBACE,GAAG1B,kCAAkC4D,yBAAyB;gBAC9D,GAAGkB,WAAW;gBACfC,aAAa,CAAC;;QAGpB,KAAK;YACH,qBACE,oBAACpD;gBACE,GAAG1B,iCAAiC2D,0BAA0B1B,UAAUgB,MAAMuC,YAAY,EAAE3C,YAAY;gBACxG,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAAClD;gBACE,GAAG1B,gCAAgC0D,0BAA0B1B,UAAUgB,MAAMuC,YAAY,EAAE3C,YAAY;gBACvG,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAAChD;gBACE,GAAG1B,8BAA8BwD,0BAA0B1B,UAAUgB,MAAMuC,YAAY,EAAE3C,YAAY;gBACrG,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAAC9C;gBACE,GAAG3B,qCAAqCuD,0BAA0B1B,UAAUY,YAAY;gBACxF,GAAGgC,WAAW;;QAGrB,+CAA+C;QAC/C,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;YACH,IAAIxB,MAAM6D,IAAI,KAAK,gBAAgB;gBACjC,MAAMC,sBAAsB9G,wBAAwBsD;gBACpDA,yBAAyBC,IAAI,GAAGuD,oBAAoBvD,IAAI;YAC1D;YACA,kGAAkG;YAClG,MAAMsB,cAAcvB,yBAAyBC,IAAI,CAACwD,IAAI,CACpD,CAACC,SAAqBA,OAAOC,IAAI,KAAK,aAAaD,OAAOC,IAAI,KAAK,aAAa,CAAC,CAACD,OAAOE,UAAU;YAErG,OAAO9B,oBAAoBP;QAC7B;gBAC6CvB;YAA3C,MAAM,IAAIJ,MAAM,CAAC,wBAAwB,GAAEI,kCAAAA,yBAAyBC,IAAI,CAAC,EAAE,cAAhCD,sDAAAA,gCAAkCuD,IAAI,EAAE;IACvF;AACF,GAAG;AACHnE,iBAAiByE,WAAW,GAAG;AAC/BzE,iBAAiB0E,YAAY,GAAG;IAC9BjC,cAAc;AAChB"}

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

@@ -134,6 +134,25 @@ export const _getGaugeAxisColor = (colorway, colorwayType, color, colorMap, isDa
     const extractedColors = extractColor(colorway, colorwayType, color, colorMap, isDarkTheme);
     return resolveColor(extractedColors, 0, '', colorMap, isDarkTheme);
 };
+export const resolveXAxisPoint = (x, isXYearCategory, isXString, isXDate, isXNumber)=>{
+    if (x === null || x === undefined) {
+        return '';
+    }
+    if (isXYearCategory) {
+        return x.toString();
+    }
+    if (isXString) {
+        if (isXDate) {
+            const date = new Date(x);
+            return date;
+        }
+        if (isXNumber) {
+            return parseFloat(x);
+        }
+        return x;
+    }
+    return x;
+};
 export const transformPlotlyJsonToDonutProps = (input, colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout, _input_layout_template_layout, _input_layout_template, _input_layout1, _input_layout2, _firstData_marker, _firstData_labels, _input_layout3, _input_layout4, _input_layout5, _input_layout6;
     const firstData = input.data[0];
@@ -205,6 +224,10 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
         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);
         // 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 xValues = series.x;
+        const isXDate = isDateArray(xValues);
+        const isXString = isStringArray(xValues);
+        const isXNumber = isNumberArray(xValues);
         const validXYRanges = getValidXYRanges(series);
         validXYRanges.forEach(([rangeStart, rangeEnd], rangeIdx)=>{
             const rangeXValues = series.x.slice(rangeStart, rangeEnd);
@@ -212,7 +235,7 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
             rangeXValues.forEach((x, index2)=>{
                 if (!mapXToDataPoints[x]) {
                     mapXToDataPoints[x] = {
-                        xAxisPoint: isXYearCategory ? x.toString() : x,
+                        xAxisPoint: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
                         chartData: [],
                         lineData: []
                     };
@@ -227,6 +250,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);
@@ -243,7 +269,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);
                     }
@@ -271,7 +297,10 @@ 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)=>{
@@ -427,19 +456,22 @@ 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 isString = isStringArray(xValues);
+        const isXString = isStringArray(xValues);
         const isXDate = isDateArray(xValues);
         const isXNumber = isNumberArray(xValues);
+        // string case is not possible for scatter chart as it is already filtered out in declarative chart
+        const isXYearCategory = false;
         const legend = legends[index];
         // resolve color for each legend's lines from the extracted colors
         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)=>{
@@ -453,7 +485,7 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isSca
                 data: rangeXValues.map((x, i)=>{
                     var _series_marker, _series_marker1;
                     return {
-                        x: isString ? isXDate ? new Date(x) : isXNumber ? parseFloat(x) : x : x,
+                        x: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
                         y: rangeYValues[i],
                         ...Array.isArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.size) ? {
                             markerSize: markerSizes[i]
@@ -1068,7 +1100,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);
 };