@fluentui/react-charting 5.23.90 → 5.23.92

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

@@ -1,7 +1,7 @@
 define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/colors", "../GaugeChart/index", "../../utilities/utilities", "@fluentui/chart-utilities", "d3-time-format", "d3-shape", "./PlotlyColorAdapter"], function (require, exports, tslib_1, d3_array_1, d3_scale_1, colors_1, index_1, utilities_1, chart_utilities_1, d3_time_format_1, d3_shape_1, PlotlyColorAdapter_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.findArrayAttributes = exports.projectPolarToCartesian = exports.transformPlotlyJsonToChartTableProps = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports._getGaugeAxisColor = exports.correctYearMonth = exports.isMonthArray = void 0;
+    exports.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.isInvalidValue = exports.findArrayAttributes = exports.projectPolarToCartesian = exports.transformPlotlyJsonToChartTableProps = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports._getGaugeAxisColor = exports.correctYearMonth = exports.isMonthArray = void 0;
     var dashOptions = {
         dot: {
             strokeDasharray: '1, 5',
@@ -47,7 +47,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         return parseFullMonth(possiblyMonthValue) !== null || parseShortMonth(possiblyMonthValue) !== null;
     };
     var isMonthArray = function (data) {
-        return (0, chart_utilities_1.isArrayOfType)(data, isMonth);
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        return (0, chart_utilities_1.isArrayOfType)(data, function (value) { return isMonth(value) || value === null; });
     };
     exports.isMonthArray = isMonthArray;
     function getTitles(layout) {
@@ -69,19 +70,29 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             var parsedDate = "".concat(possiblyMonthValue, " 01, ").concat(presentYear);
             return (0, chart_utilities_1.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;
@@ -142,20 +153,22 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         var colors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = 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 = (0, exports.getNumberAtIndexOrDefault)(firstData.values, index);
+            if ((0, exports.isInvalidValue)(value) || value < 0) {
+                return;
+            }
+            var legend = "".concat(label);
             // resolve color for each legend from the extracted colors
-            var color = (0, PlotlyColorAdapter_1.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 = (0, PlotlyColorAdapter_1.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;
@@ -188,46 +201,65 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         var _a, _b, _c;
         var mapXToDataPoints = {};
         var yMaxValue = 0;
+        var yMinValue = 0;
         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 = (0, chart_utilities_1.isYearArray)(series.x); // Consider year as categorical not numeric continuous axis
             // extract bar colors for each series only once
             var extractedBarColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
             // extract line colors for each series only once
             var extractedLineColors = (0, PlotlyColorAdapter_1.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 = (0, PlotlyColorAdapter_1.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 = (0, PlotlyColorAdapter_1.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(tslib_1.__assign(tslib_1.__assign({ legend: legend, legendShape: legendShape, y: yVal, color: lineColor }, (lineOptions ? { lineOptions: lineOptions } : {})), { useSecondaryYScale: usesSecondaryYScale(series) }));
-                    if (!usesSecondaryYScale(series)) {
+            var validXYRanges = (0, exports.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 = (0, PlotlyColorAdapter_1.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);
                     }
-                }
+                    else if (series.type === 'scatter' || !!fallbackVSBC) {
+                        var lineColor = (0, PlotlyColorAdapter_1.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: tslib_1.__assign(tslib_1.__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 tslib_1.__assign(tslib_1.__assign({ data: Object.values(mapXToDataPoints), width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barWidth: 'auto', yMaxValue: yMaxValue, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true });
+        return tslib_1.__assign(tslib_1.__assign({ data: Object.values(mapXToDataPoints), width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2 });
     };
     exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
     var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayType, isDarkTheme) {
@@ -240,7 +272,10 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             // extract colors for each series only once
             var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_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 ((0, exports.isInvalidValue)(x) || (0, exports.isInvalidValue)((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
+                    return;
+                }
                 if (!mapXToDataPoints[x]) {
                     mapXToDataPoints[x] = { name: x.toString(), series: [] };
                 }
@@ -250,7 +285,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
                     var color = (0, PlotlyColorAdapter_1.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,
@@ -274,17 +309,26 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             }
             // extract colors for each series only once
             var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_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 = (0, exports.getNumberAtIndexOrDefault)(series.y, index);
+                if ((0, exports.isInvalidValue)(xVal) || (0, exports.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) {
@@ -324,12 +368,13 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         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 = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, isScatterMarkers ? (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color : (_e = series.line) === null || _e === void 0 ? void 0 : _e.color, colorMap, isDarkTheme);
             var xValues = series.x;
-            var isString = typeof xValues[0] === 'string';
+            var isString = isStringArray(xValues);
             var isXDate = (0, chart_utilities_1.isDateArray)(xValues);
             var isXNumber = (0, chart_utilities_1.isNumberArray)(xValues);
             var legend = legends[index];
@@ -338,27 +383,50 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             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 tslib_1.__assign(tslib_1.__assign({ legend: legend, legendShape: legendShape, data: xValues.map(function (x, i) {
-                    var _a, _b;
-                    return (tslib_1.__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 = (0, exports.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 = (0, chart_utilities_1.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 (tslib_1.__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: tslib_1.__assign(tslib_1.__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
+                    useSecondaryYScale: usesSecondaryYScale(series),
+                };
+            });
+        })
+            .flat();
         var yMinMaxValues = (0, utilities_1.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 tslib_1.__assign(tslib_1.__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 tslib_1.__assign(tslib_1.__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 tslib_1.__assign(tslib_1.__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 tslib_1.__assign(tslib_1.__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 });
         }
     };
     exports.transformPlotlyJsonToScatterChartProps = transformPlotlyJsonToScatterChartProps;
@@ -373,14 +441,20 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             var legend = legends[index];
             // resolve color for each legend's bars from the extracted colors
             var color = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
-            return series.y.map(function (yValue, i) {
+            return series.y
+                .map(function (yValue, i) {
+                var _a;
+                if ((0, exports.isInvalidValue)((_a = series.x) === null || _a === void 0 ? void 0 : _a[i]) || (0, exports.isInvalidValue)(yValue)) {
+                    return null;
+                }
                 return {
                     x: series.x[i],
                     y: yValue,
                     legend: legend,
                     color: color,
                 };
-            });
+            })
+                .filter(function (point) { return point !== null; });
         })
             .reverse()
             .flat()
@@ -425,18 +499,30 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         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 = (0, exports.getNumberAtIndexOrDefault)(firstData.z, index);
+                if ((0, exports.isInvalidValue)(xVal) || (0, exports.isInvalidValue)((_a = firstData.y) === null || _a === void 0 ? void 0 : _a[index]) || (0, exports.isInvalidValue)(zVal)) {
+                    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) {
@@ -523,13 +609,19 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         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 ((0, exports.isInvalidValue)(val) || (0, exports.isInvalidValue)((_a = link === null || link === void 0 ? void 0 : link.source) === null || _a === void 0 ? void 0 : _a[index]) || (0, exports.isInvalidValue)((_b = link === null || link === void 0 ? void 0 : link.target) === null || _b === void 0 ? void 0 : _b[index])) {
+                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 = (0, PlotlyColorAdapter_1.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) {
@@ -674,16 +766,20 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
     };
     exports.transformPlotlyJsonToChartTableProps = transformPlotlyJsonToChartTableProps;
     var projectPolarToCartesian = function (input) {
+        var _a, _b, _c, _d;
         var projection = tslib_1.__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 ((0, exports.isInvalidValue)((_c = series.theta) === null || _c === void 0 ? void 0 : _c[ptindex]) || (0, exports.isInvalidValue)((_d = series.r) === null || _d === void 0 ? void 0 : _d[ptindex])) {
+                    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;
         }
@@ -771,7 +867,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var isStringArray = function (arr) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return (0, chart_utilities_1.isArrayOfType)(arr, function (value) { return typeof value === 'string'; });
+        return (0, chart_utilities_1.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) {
@@ -883,5 +979,41 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             hideLegend: (layout === null || layout === void 0 ? void 0 : layout.showlegend) === false || ((layout === null || layout === void 0 ? void 0 : layout.showlegend) !== true && legends.length < 2) ? true : hideLegends,
         };
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var isInvalidValue = function (value) {
+        return typeof value === 'undefined' || value === null || (typeof value === 'number' && !isFinite(value));
+    };
+    exports.isInvalidValue = isInvalidValue;
+    var getNumberAtIndexOrDefault = function (data, index) {
+        if ((0, chart_utilities_1.isArrayOrTypedArray)(data)) {
+            if (typeof data[index] !== 'number' || !isFinite(data[index])) {
+                return;
+            }
+            return data[index];
+        }
+        return 1;
+    };
+    exports.getNumberAtIndexOrDefault = getNumberAtIndexOrDefault;
+    var getValidXYRanges = function (series) {
+        if (!(0, chart_utilities_1.isArrayOrTypedArray)(series.x) || !(0, chart_utilities_1.isArrayOrTypedArray)(series.y)) {
+            return [];
+        }
+        var ranges = [];
+        var start = 0;
+        var end = 0;
+        for (; end < series.x.length; end++) {
+            if ((0, exports.isInvalidValue)(series.x[end]) || (0, exports.isInvalidValue)(series.y[end])) {
+                if (end - start > 0) {
+                    ranges.push([start, end]);
+                }
+                start = end + 1;
+            }
+        }
+        if (end - start > 0) {
+            ranges.push([start, end]);
+        }
+        return ranges;
+    };
+    exports.getValidXYRanges = getValidXYRanges;
 });
 //# sourceMappingURL=PlotlySchemaAdapter.js.map