npm - @fluentui/react-charting - Versions diffs - 5.23.91 → 5.23.92 - Mend

@fluentui/react-charting 5.23.91 → 5.23.92

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 (50) hide show

package/etc/react-charting.api.md CHANGED Viewed

@@ -1029,6 +1029,7 @@ export interface ILineChartLineOptions extends React_2.SVGProps<SVGPathElement>
     curve?: 'linear' | 'natural' | 'step' | 'stepAfter' | 'stepBefore' | CurveFactory;
     lineBorderColor?: string;
     lineBorderWidth?: string | number;
+    mode?: 'lines' | 'markers' | 'text' | 'lines+markers' | 'text+markers' | 'text+lines' | 'text+lines+markers' | 'none' | 'gauge' | 'number' | 'delta' | 'number+delta' | 'gauge+number' | 'gauge+number+delta' | 'gauge+delta' | 'markers+text';
     strokeDasharray?: string | number;
     strokeDashoffset?: string | number;
     strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
@@ -1060,6 +1061,7 @@ export interface ILineChartProps extends ICartesianChartProps {
     enablePerfOptimization?: boolean;
     eventAnnotationProps?: IEventsAnnotationProps;
     getCalloutDescriptionMessage?: (calloutDataProps: ICustomizedCalloutData) => string | undefined;
+    // @deprecated
     lineMode?: 'default' | 'scatter';
     onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;
     onRenderCalloutPerStack?: IRenderFunction<ICustomizedCalloutData>;

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

@@ -85,12 +85,19 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
     };
     var renderLineArea = function (plotlyData, isAreaChart) {
         var _a;
-        var isScatterMarkers = ['markers', 'text+markers', 'markers+text'].includes((_a = plotlyData[0]) === null || _a === void 0 ? void 0 : _a.mode);
+        var isScatterMarkers = [
+            'markers',
+            'text+markers',
+            'markers+text',
+            'lines+markers',
+            'markers+line',
+            'text+lines+markers',
+        ].includes((_a = plotlyData[0]) === null || _a === void 0 ? void 0 : _a.mode);
         var chartProps = __assign(__assign({}, transformPlotlyJsonToScatterChartProps({ data: plotlyData, layout: plotlyInput.layout }, isAreaChart, isScatterMarkers, colorMap, props.colorwayType, isDarkTheme)), commonProps);
         if (isAreaChart) {
             return React.createElement(ResponsiveAreaChart, __assign({}, chartProps));
         }
-        return React.createElement(ResponsiveLineChart, __assign({}, chartProps, { lineMode: isScatterMarkers ? 'scatter' : 'default' }));
+        return React.createElement(ResponsiveLineChart, __assign({}, chartProps));
     };
     var checkAndRenderChart = function (isAreaChart) {
         if (isAreaChart === void 0) { isAreaChart = false; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/DeclarativeChart.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention /\nimport as React from 'react';\nimport { useTheme } from '@fluentui/react';\nimport { IRefObject } from '@fluentui/react/lib/Utilities';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { decodeBase64Fields } from '@fluentui/chart-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n isArrayOrTypedArray,\n isDateArray,\n isNumberArray,\n isYearArray,\n mapFluentChart,\n sanitizeJson,\n} from '@fluentui/chart-utilities';\n\nimport {\n isMonthArray,\n correctYearMonth,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n transformPlotlyJsonToChartTableProps,\n projectPolarToCartesian,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { LineChart, ILineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, IAreaChartProps } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ChartTable } from '../ChartTable/index';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveChartTable = withResponsiveContainer(ChartTable);\n\n/*\n DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n /\nexport interface Schema {\n /\n Plotly schema represented as JSON object\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n plotlySchema: any;\n}\n\n/\n DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n /\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n /\n The schema representing the chart data, layout and configuration\n /\n chartSchema: Schema;\n\n /\n Callback when an event occurs\n /\n onSchemaChange?: (eventData: Schema) => void;\n\n /\n Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: IRefObject<IDeclarativeChart>;\n\n /\n Optional prop to specify the colorway type of the chart.\n * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n * - 'builtin': Use Fluent UI colorway.\n * - 'others': Reserved for future colorways.\n * @default 'default'\n /\n colorwayType?: ColorwayType;\n}\n\n/\n {@docCategory DeclarativeChart}\n /\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: IImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\n/\n DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n const chart: OutputChartType = mapFluentChart(plotlySchema);\n if (!chart.isValid) {\n throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n }\n let plotlyInput = plotlySchema as PlotlySchema;\n try {\n plotlyInput = decodeBase64Fields(plotlyInput);\n } catch (error) {\n throw new Error(`Failed to decode plotly schema: ${error}`);\n }\n const plotlyInputWithValidData: PlotlySchema = {\n ...plotlyInput,\n data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace[0]]),\n };\n\n let { selectedLegends } = plotlySchema;\n const colorMap = useColorMapping();\n const theme = useTheme();\n const isDarkTheme = theme?.isInverted ?? false;\n const chartRef = React.useRef<IChart>(null);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const commonProps = {\n legendProps: multiSelectLegendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n\n const renderLineArea = (plotlyData: Data[], isAreaChart: boolean): JSX.Element => {\n const isScatterMarkers = ['markers', 'text+markers', 'markers+text'].includes((plotlyData[0] as PlotData)?.mode);\n const chartProps: ILineChartProps \| IAreaChartProps = {\n ...transformPlotlyJsonToScatterChartProps(\n { data: plotlyData, layout: plotlyInput.layout },\n isAreaChart,\n isScatterMarkers,\n colorMap,\n props.colorwayType,\n isDarkTheme,\n ),\n ...commonProps,\n };\n if (isAreaChart) {\n return <ResponsiveAreaChart {...chartProps} />;\n }\n return <ResponsiveLineChart {...chartProps} lineMode={isScatterMarkers ? 'scatter' : 'default'} />;\n };\n\n const checkAndRenderChart = (isAreaChart: boolean = false) => {\n let fallbackVSBC = false;\n const xValues = (plotlyInputWithValidData.data[0] as PlotData).x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\n\n // Consider year as categorical variable not numeric continuous variable\n // Also year is not considered a date variable as it is represented as a point\n // in time and brings additional complexity of handling timezone and locale\n // formatting given the current design of the charting library\n const isXYear = isYearArray(xValues);\n\n if ((isXDate \|\| isXNumber) && !isXYear) {\n return renderLineArea(plotlyInputWithValidData.data, isAreaChart);\n } else if (isXMonth) {\n const updatedData = plotlyInputWithValidData.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: correctYearMonth(dataPoint.x),\n }));\n return renderLineArea(updatedData, isAreaChart);\n }\n // Unsupported schema, render as VerticalStackedBarChart\n fallbackVSBC = true;\n if (isAreaChart) {\n throw new Error('Fallback to VerticalStackedBarChart is not allowed for Area Charts.');\n }\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(\n plotlyInputWithValidData,\n colorMap,\n props.colorwayType,\n isDarkTheme,\n fallbackVSBC,\n )}\n {...commonProps}\n />\n );\n };\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions): Promise<string> => {\n return new Promise((resolve, reject) => {\n if (!chartRef.current \|\| typeof chartRef.current.toImage !== 'function') {\n return reject(Error('Chart cannot be exported as image'));\n }\n\n chartRef.current\n .toImage({\n background: theme.semanticColors.bodyBackground,\n scale: 5,\n ...opts,\n })\n .then(resolve)\n .catch(reject);\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n switch (chart.type) {\n case 'donut':\n return (\n <ResponsiveDonutChart\n {...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'horizontalbar':\n return (\n <ResponsiveHorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(\n plotlyInputWithValidData,\n colorMap,\n props.colorwayType,\n isDarkTheme,\n )}\n {...commonProps}\n />\n );\n case 'groupedverticalbar':\n return (\n <ResponsiveGroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'verticalstackedbar':\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'heatmap':\n return (\n <ResponsiveHeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData)}\n {...commonProps}\n legendProps={{}}\n />\n );\n case 'sankey':\n return (\n <ResponsiveSankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'gauge':\n return (\n <ResponsiveGaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'verticalbar':\n return (\n <ResponsiveVerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'table':\n return (\n <ResponsiveChartTable\n {...transformPlotlyJsonToChartTableProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'area':\n case 'line':\n case 'fallback':\n case 'scatterpolar':\n if (chart.type === 'scatterpolar') {\n const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n plotlyInputWithValidData.data = cartesianProjection.data;\n }\n // Need recheck for area chart as we don't have ability to check for valid months in previous step\n const isAreaChart = plotlyInputWithValidData.data.some(\n (series: PlotData) => series.fill === 'tonexty' \|\| series.fill === 'tozeroy' \|\| !!series.stackgroup,\n );\n return checkAndRenderChart(isAreaChart);\n default:\n throw new Error(`Unsupported chart type :${plotlyInputWithValidData.data[0]?.type}`);\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\nDeclarativeChart.defaultProps = {\n colorwayType: 'default',\n};\n"]}
1	+ {"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/DeclarativeChart.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention /\nimport as React from 'react';\nimport { useTheme } from '@fluentui/react';\nimport { IRefObject } from '@fluentui/react/lib/Utilities';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { decodeBase64Fields } from '@fluentui/chart-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n isArrayOrTypedArray,\n isDateArray,\n isNumberArray,\n isYearArray,\n mapFluentChart,\n sanitizeJson,\n} from '@fluentui/chart-utilities';\n\nimport {\n isMonthArray,\n correctYearMonth,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n transformPlotlyJsonToChartTableProps,\n projectPolarToCartesian,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { LineChart, ILineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, IAreaChartProps } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ChartTable } from '../ChartTable/index';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveChartTable = withResponsiveContainer(ChartTable);\n\n/*\n DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n /\nexport interface Schema {\n /\n Plotly schema represented as JSON object\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n plotlySchema: any;\n}\n\n/\n DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n /\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n /\n The schema representing the chart data, layout and configuration\n /\n chartSchema: Schema;\n\n /\n Callback when an event occurs\n /\n onSchemaChange?: (eventData: Schema) => void;\n\n /\n Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: IRefObject<IDeclarativeChart>;\n\n /\n Optional prop to specify the colorway type of the chart.\n * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n * - 'builtin': Use Fluent UI colorway.\n * - 'others': Reserved for future colorways.\n * @default 'default'\n /\n colorwayType?: ColorwayType;\n}\n\n/\n {@docCategory DeclarativeChart}\n /\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: IImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\n/\n DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n const chart: OutputChartType = mapFluentChart(plotlySchema);\n if (!chart.isValid) {\n throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n }\n let plotlyInput = plotlySchema as PlotlySchema;\n try {\n plotlyInput = decodeBase64Fields(plotlyInput);\n } catch (error) {\n throw new Error(`Failed to decode plotly schema: ${error}`);\n }\n const plotlyInputWithValidData: PlotlySchema = {\n ...plotlyInput,\n data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace[0]]),\n };\n\n let { selectedLegends } = plotlySchema;\n const colorMap = useColorMapping();\n const theme = useTheme();\n const isDarkTheme = theme?.isInverted ?? false;\n const chartRef = React.useRef<IChart>(null);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const commonProps = {\n legendProps: multiSelectLegendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n\n const renderLineArea = (plotlyData: Data[], isAreaChart: boolean): JSX.Element => {\n const isScatterMarkers = [\n 'markers',\n 'text+markers',\n 'markers+text',\n 'lines+markers',\n 'markers+line',\n 'text+lines+markers',\n ].includes((plotlyData[0] as PlotData)?.mode);\n const chartProps: ILineChartProps \| IAreaChartProps = {\n ...transformPlotlyJsonToScatterChartProps(\n { data: plotlyData, layout: plotlyInput.layout },\n isAreaChart,\n isScatterMarkers,\n colorMap,\n props.colorwayType,\n isDarkTheme,\n ),\n ...commonProps,\n };\n if (isAreaChart) {\n return <ResponsiveAreaChart {...chartProps} />;\n }\n return <ResponsiveLineChart {...chartProps} />;\n };\n\n const checkAndRenderChart = (isAreaChart: boolean = false) => {\n let fallbackVSBC = false;\n const xValues = (plotlyInputWithValidData.data[0] as PlotData).x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\n\n // Consider year as categorical variable not numeric continuous variable\n // Also year is not considered a date variable as it is represented as a point\n // in time and brings additional complexity of handling timezone and locale\n // formatting given the current design of the charting library\n const isXYear = isYearArray(xValues);\n\n if ((isXDate \|\| isXNumber) && !isXYear) {\n return renderLineArea(plotlyInputWithValidData.data, isAreaChart);\n } else if (isXMonth) {\n const updatedData = plotlyInputWithValidData.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: correctYearMonth(dataPoint.x),\n }));\n return renderLineArea(updatedData, isAreaChart);\n }\n // Unsupported schema, render as VerticalStackedBarChart\n fallbackVSBC = true;\n if (isAreaChart) {\n throw new Error('Fallback to VerticalStackedBarChart is not allowed for Area Charts.');\n }\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(\n plotlyInputWithValidData,\n colorMap,\n props.colorwayType,\n isDarkTheme,\n fallbackVSBC,\n )}\n {...commonProps}\n />\n );\n };\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions): Promise<string> => {\n return new Promise((resolve, reject) => {\n if (!chartRef.current \|\| typeof chartRef.current.toImage !== 'function') {\n return reject(Error('Chart cannot be exported as image'));\n }\n\n chartRef.current\n .toImage({\n background: theme.semanticColors.bodyBackground,\n scale: 5,\n ...opts,\n })\n .then(resolve)\n .catch(reject);\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n switch (chart.type) {\n case 'donut':\n return (\n <ResponsiveDonutChart\n {...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'horizontalbar':\n return (\n <ResponsiveHorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(\n plotlyInputWithValidData,\n colorMap,\n props.colorwayType,\n isDarkTheme,\n )}\n {...commonProps}\n />\n );\n case 'groupedverticalbar':\n return (\n <ResponsiveGroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'verticalstackedbar':\n return (\n <ResponsiveVerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'heatmap':\n return (\n <ResponsiveHeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData)}\n {...commonProps}\n legendProps={{}}\n />\n );\n case 'sankey':\n return (\n <ResponsiveSankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'gauge':\n return (\n <ResponsiveGaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'verticalbar':\n return (\n <ResponsiveVerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'table':\n return (\n <ResponsiveChartTable\n {...transformPlotlyJsonToChartTableProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n case 'area':\n case 'line':\n case 'fallback':\n case 'scatterpolar':\n if (chart.type === 'scatterpolar') {\n const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n plotlyInputWithValidData.data = cartesianProjection.data;\n }\n // Need recheck for area chart as we don't have ability to check for valid months in previous step\n const isAreaChart = plotlyInputWithValidData.data.some(\n (series: PlotData) => series.fill === 'tonexty' \|\| series.fill === 'tozeroy' \|\| !!series.stackgroup,\n );\n return checkAndRenderChart(isAreaChart);\n default:\n throw new Error(`Unsupported chart type :${plotlyInputWithValidData.data[0]?.type}`);\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\nDeclarativeChart.defaultProps = {\n colorwayType: 'default',\n};\n"]}

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.d.ts CHANGED Viewed

@@ -10,7 +10,7 @@ import { IGaugeChartProps } from '../GaugeChart/index';
 import { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index';
 import { IVerticalBarChartProps } from '../VerticalBarChart/index';
 import { IChartTableProps } from '../ChartTable/index';
-import type { Datum, PlotlySchema, TypedArray, Color } from '@fluentui/chart-utilities';
+import type { Datum, PlotlySchema, PlotData, TypedArray, Color } from '@fluentui/chart-utilities';
 import type { ColorwayType } from './PlotlyColorAdapter';
 export declare const isMonthArray: (data: Datum[] | Datum[][] | TypedArray) => boolean;
 export declare const correctYearMonth: (xValues: Datum[] | Datum[][] | TypedArray) => any[];
@@ -32,3 +32,6 @@ export declare const projectPolarToCartesian: (input: PlotlySchema) => PlotlySch
  * @param trace
  */
 export declare function findArrayAttributes(trace: any): void;
+export declare const isInvalidValue: (value: any) => boolean;
+export declare const getNumberAtIndexOrDefault: (data: PlotData['z'] | undefined, index: number) => number | undefined;
+export declare const getValidXYRanges: (series: Partial<PlotData>) => [number, number][];

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

@@ -53,7 +53,8 @@ var isMonth = function (possiblyMonthValue) {
     return parseFullMonth(possiblyMonthValue) !== null || parseShortMonth(possiblyMonthValue) !== null;
 };
 export var isMonthArray = function (data) {
-    return isArrayOfType(data, isMonth);
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    return isArrayOfType(data, function (value) { return isMonth(value) || value === null; });
 };
 function getTitles(layout) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
@@ -74,19 +75,29 @@ export var correctYearMonth = function (xValues) {
         var parsedDate = "".concat(possiblyMonthValue, " 01, ").concat(presentYear);
         return isDate(parsedDate) ? new Date(parsedDate) : null;
     });
-    for (var i = dates.length - 1; i > 0; i--) {
-        var currentMonth = dates[i].getMonth();
-        var previousMonth = dates[i - 1].getMonth();
-        var currentYear = dates[i].getFullYear();
-        var previousYear = dates[i - 1].getFullYear();
+    var filteredDateIndexPairs = dates.map(function (date, index) { return [date, index]; }).filter(function (_a) {
+        var date = _a[0];
+        return date !== null;
+    });
+    for (var i = filteredDateIndexPairs.length - 1; i > 0; i--) {
+        var currentDate = filteredDateIndexPairs[i][0];
+        var previousDate = filteredDateIndexPairs[i - 1][0];
+        var currentMonth = currentDate.getMonth();
+        var previousMonth = previousDate.getMonth();
+        var currentYear = currentDate.getFullYear();
+        var previousYear = previousDate.getFullYear();
         if (previousMonth >= currentMonth) {
-            dates[i - 1].setFullYear(dates[i].getFullYear() - 1);
+            filteredDateIndexPairs[i - 1][0].setFullYear(currentYear - 1);
         }
         else if (previousYear > currentYear) {
-            dates[i - 1].setFullYear(currentYear);
+            filteredDateIndexPairs[i - 1][0].setFullYear(currentYear);
         }
+        dates[filteredDateIndexPairs[i - 1][1]] = filteredDateIndexPairs[i - 1][0];
     }
     xValues = xValues.map(function (month, index) {
+        if (dates[index] === null) {
+            return null;
+        }
         return "".concat(month, " 01, ").concat(dates[index].getFullYear());
     });
     return xValues;
@@ -145,20 +156,22 @@ export var transformPlotlyJsonToDonutProps = function (input, colorMap, colorway
     var colors = extractColor((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = firstData === null || firstData === void 0 ? void 0 : firstData.marker) === null || _d === void 0 ? void 0 : _d.colors, colorMap, isDarkTheme);
     var mapLegendToDataPoint = {};
     (_e = firstData.labels) === null || _e === void 0 ? void 0 : _e.forEach(function (label, index) {
-        var _a;
+        var value = getNumberAtIndexOrDefault(firstData.values, index);
+        if (isInvalidValue(value) || value < 0) {
+            return;
+        }
+        var legend = "".concat(label);
         // resolve color for each legend from the extracted colors
-        var color = resolveColor(colors, index, label, colorMap, isDarkTheme);
-        //ToDo how to handle string data?
-        var value = typeof ((_a = firstData.values) === null || _a === void 0 ? void 0 : _a[index]) === 'number' ? firstData.values[index] : 1;
-        if (!mapLegendToDataPoint[label]) {
-            mapLegendToDataPoint[label] = {
-                legend: label,
+        var color = resolveColor(colors, index, legend, colorMap, isDarkTheme);
+        if (!mapLegendToDataPoint[legend]) {
+            mapLegendToDataPoint[legend] = {
+                legend: legend,
                 data: value,
                 color: color,
             };
         }
         else {
-            mapLegendToDataPoint[label].data += value;
+            mapLegendToDataPoint[legend].data += value;
         }
     });
     var width = (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.width) !== null && _g !== void 0 ? _g : 440;
@@ -194,44 +207,61 @@ export var transformPlotlyJsonToVSBCProps = function (input, colorMap, colorwayT
     var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
     var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
     input.data.forEach(function (series, index1) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         var isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
         // extract bar colors for each series only once
         var extractedBarColors = extractColor((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
         // extract line colors for each series only once
         var extractedLineColors = extractColor((_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, colorwayType, (_h = series.line) === null || _h === void 0 ? void 0 : _h.color, colorMap, isDarkTheme);
-        (_j = series.x) === null || _j === void 0 ? void 0 : _j.forEach(function (x, index2) {
-            var _a, _b, _c;
-            if (!mapXToDataPoints[x]) {
-                mapXToDataPoints[x] = { xAxisPoint: isXYearCategory ? x.toString() : x, chartData: [], lineData: [] };
-            }
-            var legend = legends[index1];
-            // resolve color for each legend's bars from the extracted colors
-            var color = resolveColor(extractedBarColors, index1, legend, colorMap, isDarkTheme);
-            var yVal = (_b = (_a = series.y) === null || _a === void 0 ? void 0 : _a[index2]) !== null && _b !== void 0 ? _b : 0;
-            if (series.type === 'bar') {
-                mapXToDataPoints[x].chartData.push({
-                    legend: legend,
-                    data: yVal,
-                    color: color,
-                });
-                yMaxValue = Math.max(yMaxValue, yVal);
-            }
-            else if (series.type === 'scatter' || !!fallbackVSBC) {
-                var lineColor = resolveColor(extractedLineColors, index1, legend, colorMap, isDarkTheme);
-                var lineOptions = getLineOptions(series.line);
-                var dashType = ((_c = series.line) === null || _c === void 0 ? void 0 : _c.dash) || 'solid';
-                var legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
-                mapXToDataPoints[x].lineData.push(__assign(__assign({ legend: legend, legendShape: legendShape, y: yVal, color: lineColor }, (lineOptions ? { lineOptions: lineOptions } : {})), { useSecondaryYScale: usesSecondaryYScale(series) }));
-                if (!usesSecondaryYScale(series)) {
+        var validXYRanges = getValidXYRanges(series);
+        validXYRanges.forEach(function (_a, rangeIdx) {
+            var rangeStart = _a[0], rangeEnd = _a[1];
+            var rangeXValues = series.x.slice(rangeStart, rangeEnd);
+            var rangeYValues = series.y.slice(rangeStart, rangeEnd);
+            rangeXValues.forEach(function (x, index2) {
+                var _a, _b;
+                if (!mapXToDataPoints[x]) {
+                    mapXToDataPoints[x] = { xAxisPoint: isXYearCategory ? x.toString() : x, chartData: [], lineData: [] };
+                }
+                var legend = legends[index1];
+                // resolve color for each legend's bars from the extracted colors
+                var color = resolveColor(extractedBarColors, index1, legend, colorMap, isDarkTheme);
+                var yVal = rangeYValues[index2];
+                if (series.type === 'bar') {
+                    mapXToDataPoints[x].chartData.push({
+                        legend: legend,
+                        data: yVal,
+                        color: color,
+                    });
                     yMaxValue = Math.max(yMaxValue, yVal);
-                    yMinValue = Math.min(yMinValue, yVal);
                 }
-            }
+                else if (series.type === 'scatter' || !!fallbackVSBC) {
+                    var lineColor = resolveColor(extractedLineColors, index1, legend, colorMap, isDarkTheme);
+                    var lineOptions = getLineOptions(series.line);
+                    var dashType = ((_a = series.line) === null || _a === void 0 ? void 0 : _a.dash) || 'solid';
+                    var legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot'
+                        ? 'dottedLine'
+                        : ((_b = series.mode) === null || _b === void 0 ? void 0 : _b.includes('markers'))
+                            ? 'circle'
+                            : 'default';
+                    mapXToDataPoints[x].lineData.push({
+                        legend: legend + (validXYRanges.length > 1 ? ".".concat(rangeIdx + 1) : ''),
+                        legendShape: legendShape,
+                        y: yVal,
+                        color: lineColor,
+                        lineOptions: __assign(__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
+                        useSecondaryYScale: usesSecondaryYScale(series),
+                    });
+                    if (!usesSecondaryYScale(series)) {
+                        yMaxValue = Math.max(yMaxValue, yVal);
+                        yMinValue = Math.min(yMinValue, yVal);
+                    }
+                }
+            });
         });
     });
     var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
-    return __assign(__assign({ data: Object.values(mapXToDataPoints), width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true });
+    return __assign(__assign({ data: Object.values(mapXToDataPoints), width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2 });
 };
 export var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c;
@@ -243,7 +273,10 @@ export var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayT
         // extract colors for each series only once
         var extractedColors = extractColor((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
         (_e = series.x) === null || _e === void 0 ? void 0 : _e.forEach(function (x, xIndex) {
-            var _a, _b;
+            var _a;
+            if (isInvalidValue(x) || isInvalidValue((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
+                return;
+            }
             if (!mapXToDataPoints[x]) {
                 mapXToDataPoints[x] = { name: x.toString(), series: [] };
             }
@@ -253,7 +286,7 @@ export var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayT
                 var color = resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
                 mapXToDataPoints[x].series.push({
                     key: legend,
-                    data: (_b = (_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex]) !== null && _b !== void 0 ? _b : 0,
+                    data: series.y[xIndex],
                     xAxisCalloutData: x,
                     color: color,
                     legend: legend,
@@ -276,17 +309,26 @@ export var transformPlotlyJsonToVBCProps = function (input, colorMap, colorwayTy
         }
         // extract colors for each series only once
         var extractedColors = extractColor((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
-        var isXString = isStringArray(series.x);
+        var xValues = [];
+        var yValues = [];
+        series.x.forEach(function (xVal, index) {
+            var yVal = getNumberAtIndexOrDefault(series.y, index);
+            if (isInvalidValue(xVal) || isInvalidValue(yVal)) {
+                return;
+            }
+            xValues.push(xVal);
+            yValues.push(yVal);
+        });
+        var isXString = isStringArray(xValues);
         // TODO: In case of a single bin, add an empty bin of the same size to prevent the
         // default bar width from being used and ensure the bar spans the full intended range.
-        var xBins = createBins(series.x, (_e = series.xbins) === null || _e === void 0 ? void 0 : _e.start, (_f = series.xbins) === null || _f === void 0 ? void 0 : _f.end, (_g = series.xbins) === null || _g === void 0 ? void 0 : _g.size);
+        var xBins = createBins(xValues, (_e = series.xbins) === null || _e === void 0 ? void 0 : _e.start, (_f = series.xbins) === null || _f === void 0 ? void 0 : _f.end, (_g = series.xbins) === null || _g === void 0 ? void 0 : _g.size);
         var yBins = xBins.map(function () { return []; });
         var total = 0;
-        series.x.forEach(function (xVal, index) {
-            var _a, _b;
+        xValues.forEach(function (xVal, index) {
             var binIdx = findBinIndex(xBins, xVal, isXString);
             if (binIdx !== -1) {
-                yBins[binIdx].push((_b = (_a = series.y) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : 1);
+                yBins[binIdx].push(yValues[index]);
             }
         });
         var y = yBins.map(function (bin) {
@@ -325,12 +367,13 @@ export var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart
     var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, isAreaChart ? 0 : undefined, isAreaChart ? 0 : undefined);
     var mode = 'tonexty';
     var _g = getLegendProps(input.data, input.layout), legends = _g.legends, hideLegend = _g.hideLegend;
-    var chartData = input.data.map(function (series, index) {
-        var _a, _b, _c, _d, _e, _f;
+    var chartData = input.data
+        .map(function (series, index) {
+        var _a, _b, _c, _d, _e, _f, _g;
         // extract colors for each series only once
         var extractedColors = extractColor((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, isScatterMarkers ? (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color : (_e = series.line) === null || _e === void 0 ? void 0 : _e.color, colorMap, isDarkTheme);
         var xValues = series.x;
-        var isString = typeof xValues[0] === 'string';
+        var isString = isStringArray(xValues);
         var isXDate = isDateArray(xValues);
         var isXNumber = isNumberArray(xValues);
         var legend = legends[index];
@@ -339,27 +382,50 @@ export var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
         var lineOptions = getLineOptions(series.line);
         var dashType = ((_f = series.line) === null || _f === void 0 ? void 0 : _f.dash) || 'solid';
-        var legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
-        return __assign(__assign({ legend: legend, legendShape: legendShape, data: xValues.map(function (x, i) {
-                var _a, _b;
-                return (__assign({ x: isString ? (isXDate ? new Date(x) : isXNumber ? parseFloat(x) : x) : x, y: series.y[i] }, (Array.isArray((_a = series.marker) === null || _a === void 0 ? void 0 : _a.size)
-                    ? { markerSize: series.marker.size[i] }
-                    : typeof ((_b = series.marker) === null || _b === void 0 ? void 0 : _b.size) === 'number'
-                        ? { markerSize: series.marker.size }
-                        : {})));
-            }), color: seriesColor }, (lineOptions ? { lineOptions: lineOptions } : {})), { useSecondaryYScale: usesSecondaryYScale(series) });
-    });
+        var legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot'
+            ? 'dottedLine'
+            : ((_g = series.mode) === null || _g === void 0 ? void 0 : _g.includes('markers'))
+                ? 'circle'
+                : 'default';
+        var validXYRanges = getValidXYRanges(series);
+        return validXYRanges.map(function (_a, rangeIdx) {
+            var _b;
+            var rangeStart = _a[0], rangeEnd = _a[1];
+            var rangeXValues = xValues.slice(rangeStart, rangeEnd);
+            var rangeYValues = series.y.slice(rangeStart, rangeEnd);
+            var markerSizes = isArrayOrTypedArray((_b = series.marker) === null || _b === void 0 ? void 0 : _b.size)
+                ? series.marker.size.slice(rangeStart, rangeEnd)
+                : [];
+            return {
+                legend: legend,
+                legendShape: legendShape,
+                data: rangeXValues.map(function (x, i) {
+                    var _a, _b;
+                    return (__assign({ x: isString ? (isXDate ? new Date(x) : isXNumber ? parseFloat(x) : x) : x, y: rangeYValues[i] }, (Array.isArray((_a = series.marker) === null || _a === void 0 ? void 0 : _a.size)
+                        ? { markerSize: markerSizes[i] }
+                        : typeof ((_b = series.marker) === null || _b === void 0 ? void 0 : _b.size) === 'number'
+                            ? { markerSize: series.marker.size }
+                            : {})));
+                }),
+                color: seriesColor,
+                lineOptions: __assign(__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
+                useSecondaryYScale: usesSecondaryYScale(series),
+            };
+        });
+    })
+        .flat();
     var yMinMaxValues = findNumericMinMaxOfY(chartData);
     var _h = getTitles(input.layout), chartTitle = _h.chartTitle, xAxisTitle = _h.xAxisTitle, yAxisTitle = _h.yAxisTitle;
+    var numDataPoints = chartData.reduce(function (total, lineChartPoints) { return total + lineChartPoints.data.length; }, 0);
     var chartProps = {
         chartTitle: chartTitle,
         lineChartData: chartData,
     };
     if (isAreaChart) {
-        return __assign(__assign({ data: chartProps, supportNegativeData: true, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle }, secondaryYAxisValues), { mode: mode, width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false });
+        return __assign(__assign({ data: chartProps, supportNegativeData: true, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle }, secondaryYAxisValues), { mode: mode, width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 });
     }
     else {
-        return __assign(__assign({ data: chartProps, supportNegativeData: true, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle }, secondaryYAxisValues), { roundedTicks: true, yMinValue: yMinMaxValues.startValue, yMaxValue: yMinMaxValues.endValue, width: (_d = input.layout) === null || _d === void 0 ? void 0 : _d.width, height: (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 350, hideTickOverlap: true, enableReflow: false, hideLegend: hideLegend, useUTC: false });
+        return __assign(__assign({ data: chartProps, supportNegativeData: true, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle }, secondaryYAxisValues), { roundedTicks: true, yMinValue: yMinMaxValues.startValue, yMaxValue: yMinMaxValues.endValue, width: (_d = input.layout) === null || _d === void 0 ? void 0 : _d.width, height: (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 350, hideTickOverlap: true, enableReflow: false, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 });
     }
 };
 export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, colorMap, colorwayType, isDarkTheme) {
@@ -373,14 +439,20 @@ export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, co
         var legend = legends[index];
         // resolve color for each legend's bars from the extracted colors
         var color = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
-        return series.y.map(function (yValue, i) {
+        return series.y
+            .map(function (yValue, i) {
+            var _a;
+            if (isInvalidValue((_a = series.x) === null || _a === void 0 ? void 0 : _a[i]) || isInvalidValue(yValue)) {
+                return null;
+            }
             return {
                 x: series.x[i],
                 y: yValue,
                 legend: legend,
                 color: color,
             };
-        });
+        })
+            .filter(function (point) { return point !== null; });
     })
         .reverse()
         .flat()
@@ -424,18 +496,30 @@ export var transformPlotlyJsonToHeatmapProps = function (input) {
     var zMin = Number.POSITIVE_INFINITY;
     var zMax = Number.NEGATIVE_INFINITY;
     if (firstData.type === 'histogram2d') {
-        var isXString_1 = isStringArray(firstData.x);
-        var isYString_1 = isStringArray(firstData.y);
-        var xBins_1 = createBins(firstData.x, (_a = firstData.xbins) === null || _a === void 0 ? void 0 : _a.start, (_b = firstData.xbins) === null || _b === void 0 ? void 0 : _b.end, (_c = firstData.xbins) === null || _c === void 0 ? void 0 : _c.size);
-        var yBins_1 = createBins(firstData.y, (_d = firstData.ybins) === null || _d === void 0 ? void 0 : _d.start, (_e = firstData.ybins) === null || _e === void 0 ? void 0 : _e.end, (_f = firstData.ybins) === null || _f === void 0 ? void 0 : _f.size);
+        var xValues_1 = [];
+        var yValues_1 = [];
+        var zValues_1 = [];
+        (_a = firstData.x) === null || _a === void 0 ? void 0 : _a.forEach(function (xVal, index) {
+            var _a;
+            var zVal = getNumberAtIndexOrDefault(firstData.z, index);
+            if (isInvalidValue(xVal) || isInvalidValue((_a = firstData.y) === null || _a === void 0 ? void 0 : _a[index]) || isInvalidValue(zVal)) {
+                return;
+            }
+            xValues_1.push(xVal);
+            yValues_1.push(firstData.y[index]);
+            zValues_1.push(zVal);
+        });
+        var isXString_1 = isStringArray(xValues_1);
+        var isYString_1 = isStringArray(yValues_1);
+        var xBins_1 = createBins(xValues_1, (_b = firstData.xbins) === null || _b === void 0 ? void 0 : _b.start, (_c = firstData.xbins) === null || _c === void 0 ? void 0 : _c.end, (_d = firstData.xbins) === null || _d === void 0 ? void 0 : _d.size);
+        var yBins_1 = createBins(yValues_1, (_e = firstData.ybins) === null || _e === void 0 ? void 0 : _e.start, (_f = firstData.ybins) === null || _f === void 0 ? void 0 : _f.end, (_g = firstData.ybins) === null || _g === void 0 ? void 0 : _g.size);
         var zBins_1 = yBins_1.map(function () { return xBins_1.map(function () { return []; }); });
         var total_1 = 0;
-        (_g = firstData.x) === null || _g === void 0 ? void 0 : _g.forEach(function (xVal, index) {
-            var _a, _b, _c;
+        xValues_1.forEach(function (xVal, index) {
             var xBinIdx = findBinIndex(xBins_1, xVal, isXString_1);
-            var yBinIdx = findBinIndex(yBins_1, (_a = firstData.y) === null || _a === void 0 ? void 0 : _a[index], isYString_1);
+            var yBinIdx = findBinIndex(yBins_1, yValues_1[index], isYString_1);
             if (xBinIdx !== -1 && yBinIdx !== -1) {
-                zBins_1[yBinIdx][xBinIdx].push((_c = (_b = firstData.z) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : 1);
+                zBins_1[yBinIdx][xBinIdx].push(zValues_1[index]);
             }
         });
         var z_1 = zBins_1.map(function (row) {
@@ -521,13 +605,19 @@ export var transformPlotlyJsonToSankeyProps = function (input, colorMap, colorwa
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var _m = input.data[0], link = _m.link, node = _m.node;
     var validLinks = ((_a = link === null || link === void 0 ? void 0 : link.value) !== null && _a !== void 0 ? _a : [])
-        .map(function (val, index) { return ({
-        value: val,
-        source: link === null || link === void 0 ? void 0 : link.source[index],
-        target: link === null || link === void 0 ? void 0 : link.target[index],
-    }); })
+        .map(function (val, index) {
+        var _a, _b;
+        if (isInvalidValue(val) || isInvalidValue((_a = link === null || link === void 0 ? void 0 : link.source) === null || _a === void 0 ? void 0 : _a[index]) || isInvalidValue((_b = link === null || link === void 0 ? void 0 : link.target) === null || _b === void 0 ? void 0 : _b[index])) {
+            return null;
+        }
+        return {
+            value: val,
+            source: link === null || link === void 0 ? void 0 : link.source[index],
+            target: link === null || link === void 0 ? void 0 : link.target[index],
+        };
+    })
         // Filter out negative nodes, unequal nodes and self-references (circular links)
-        .filter(function (x) { return x.source >= 0 && x.target >= 0 && x.source !== x.target; });
+        .filter(function (x) { return x !== null && x.source >= 0 && x.target >= 0 && x.source !== x.target; });
     var extractedNodeColors = extractColor((_d = (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.template) === null || _c === void 0 ? void 0 : _c.layout) === null || _d === void 0 ? void 0 : _d.colorway, colorwayType, node === null || node === void 0 ? void 0 : node.color, colorMap, isDarkTheme);
     var sankeyChartData = {
         nodes: (_e = node.label) === null || _e === void 0 ? void 0 : _e.map(function (label, index) {
@@ -669,16 +759,20 @@ export var transformPlotlyJsonToChartTableProps = function (input, colorMap, isD
     };
 };
 export var projectPolarToCartesian = function (input) {
+    var _a, _b, _c, _d;
     var projection = __assign({}, input);
     for (var sindex = 0; sindex < input.data.length; sindex++) {
         var series = input.data[sindex];
         series.x = [];
         series.y = [];
-        for (var ptindex = 0; ptindex < series.r.length; ptindex++) {
+        for (var ptindex = 0; ptindex < ((_b = (_a = series.r) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0); ptindex++) {
+            if (isInvalidValue((_c = series.theta) === null || _c === void 0 ? void 0 : _c[ptindex]) || isInvalidValue((_d = series.r) === null || _d === void 0 ? void 0 : _d[ptindex])) {
+                continue;
+            }
             var thetaRad = (series.theta[ptindex] * Math.PI) / 180;
             var radius = series.r[ptindex];
-            series.x[ptindex] = radius * Math.cos(thetaRad);
-            series.y[ptindex] = radius * Math.sin(thetaRad);
+            series.x.push(radius * Math.cos(thetaRad));
+            series.y.push(radius * Math.sin(thetaRad));
         }
         projection.data[sindex] = series;
     }
@@ -764,7 +858,7 @@ function getLineOptions(line) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 var isStringArray = function (arr) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return isArrayOfType(arr, function (value) { return typeof value === 'string'; });
+    return isArrayOfType(arr, function (value) { return typeof value === 'string' || value === null; });
 };
 // TODO: Use binary search to find the appropriate bin for numeric value.
 var findBinIndex = function (bins, value, isString) {
@@ -876,4 +970,37 @@ var getLegendProps = function (data, layout) {
         hideLegend: (layout === null || layout === void 0 ? void 0 : layout.showlegend) === false || ((layout === null || layout === void 0 ? void 0 : layout.showlegend) !== true && legends.length < 2) ? true : hideLegends,
     };
 };
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export var isInvalidValue = function (value) {
+    return typeof value === 'undefined' || value === null || (typeof value === 'number' && !isFinite(value));
+};
+export var getNumberAtIndexOrDefault = function (data, index) {
+    if (isArrayOrTypedArray(data)) {
+        if (typeof data[index] !== 'number' || !isFinite(data[index])) {
+            return;
+        }
+        return data[index];
+    }
+    return 1;
+};
+export var getValidXYRanges = function (series) {
+    if (!isArrayOrTypedArray(series.x) || !isArrayOrTypedArray(series.y)) {
+        return [];
+    }
+    var ranges = [];
+    var start = 0;
+    var end = 0;
+    for (; end < series.x.length; end++) {
+        if (isInvalidValue(series.x[end]) || isInvalidValue(series.y[end])) {
+            if (end - start > 0) {
+                ranges.push([start, end]);
+            }
+            start = end + 1;
+        }
+    }
+    if (end - start > 0) {
+        ranges.push([start, end]);
+    }
+    return ranges;
+};
 //# sourceMappingURL=PlotlySchemaAdapter.js.map