@fluentui/react-charting 5.23.41 → 5.23.43

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

@@ -1,42 +1,92 @@
-define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../../utilities/colors", "../GaugeChart/index"], function (require, exports, tslib_1, d3_array_1, d3_scale_1, d3_format_1, colors_1, index_1) {
+define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../../utilities/colors", "../GaugeChart/index", "d3-time-format"], function (require, exports, tslib_1, d3_array_1, d3_scale_1, d3_format_1, colors_1, index_1, d3_time_format_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.findArrayAttributes = exports.isArrayOrTypedArray = exports.sanitizeJson = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports.getColor = exports.updateXValues = exports.isMonthArray = exports.isNumberArray = exports.isDateArray = void 0;
-    var isDate = function (value) { return !isNaN(Date.parse(value)); };
+    exports.findArrayAttributes = exports.isArrayOrTypedArray = exports.sanitizeJson = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports.getColor = exports.updateXValues = exports.isLineData = exports.isMonthArray = exports.isNumberArray = exports.isDateArray = void 0;
+    var SUPPORTED_PLOT_TYPES = ['pie', 'bar', 'scatter', 'heatmap', 'sankey', 'indicator', 'histogram'];
+    var isDate = function (value) {
+        var parsedDate = new Date(Date.parse(value));
+        if (isNaN(parsedDate.getTime())) {
+            return false;
+        }
+        var parsedYear = parsedDate.getFullYear();
+        var yearInString = /\b\d{4}\b/.test(value);
+        if (!yearInString && (parsedYear === 2000 || parsedYear === 2001)) {
+            return false;
+        }
+        return true;
+    };
     var isNumber = function (value) { return !isNaN(parseFloat(value)) && isFinite(value); };
-    var isDateArray = function (array) { return isArrayOrTypedArray(array) && array.every(isDate); };
+    var isMonth = function (possiblyMonthValue) {
+        var parseFullMonth = (0, d3_time_format_1.timeParse)('%B');
+        var parseShortMonth = (0, d3_time_format_1.timeParse)('%b');
+        return parseFullMonth(possiblyMonthValue) !== null || parseShortMonth(possiblyMonthValue) !== null;
+    };
+    var isArrayOfType = function (plotCoordinates, typeCheck) {
+        var args = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            args[_i - 2] = arguments[_i];
+        }
+        if (!isArrayOrTypedArray(plotCoordinates)) {
+            return false;
+        }
+        if (plotCoordinates.length === 0) {
+            return false;
+        }
+        if (Array.isArray(plotCoordinates[0])) {
+            // Handle 2D array
+            return plotCoordinates.every(function (innerArray) { return innerArray.every(function (datum) { return typeCheck.apply(void 0, tslib_1.__spreadArray([datum], args, false)); }); });
+        }
+        else {
+            // Handle 1D array
+            return plotCoordinates.every(function (datum) { return typeCheck.apply(void 0, tslib_1.__spreadArray([datum], args, false)); });
+        }
+    };
+    var isDateArray = function (data) {
+        return isArrayOfType(data, isDate);
+    };
     exports.isDateArray = isDateArray;
-    var isNumberArray = function (array) { return isArrayOrTypedArray(array) && array.every(isNumber); };
+    var isNumberArray = function (data) {
+        return isArrayOfType(data, isNumber);
+    };
     exports.isNumberArray = isNumberArray;
-    var isMonthArray = function (array) {
-        if (array && array.length > 0) {
-            var presentYear_1 = new Date().getFullYear();
-            return array.every(function (possiblyMonthValue) {
-                return isDate("".concat(possiblyMonthValue, " 01, ").concat(presentYear_1));
-            });
-        }
-        return false;
+    var isMonthArray = function (data) {
+        return isArrayOfType(data, isMonth);
     };
     exports.isMonthArray = isMonthArray;
+    var isLineData = function (data) {
+        return (!SUPPORTED_PLOT_TYPES.includes("".concat(data.type)) &&
+            Array.isArray(data.x) &&
+            isArrayOfType(data.y, function (value) { return typeof value === 'number'; }) &&
+            data.x.length > 0 &&
+            data.x.length === data.y.length);
+    };
+    exports.isLineData = isLineData;
+    var invalidate2Dseries = function (series, chartType) {
+        var _a, _b;
+        if (((_a = series.x) === null || _a === void 0 ? void 0 : _a.length) > 0 && Array.isArray(series.x[0])) {
+            throw new Error("transform to ".concat(chartType, ":: 2D x array not supported"));
+        }
+        if (((_b = series.y) === null || _b === void 0 ? void 0 : _b.length) > 0 && Array.isArray(series.y[0])) {
+            throw new Error("transform to ".concat(chartType, ":: 2D y array not supported"));
+        }
+    };
+    var getLegend = function (series, index) {
+        return series.name || "Series ".concat(index + 1);
+    };
     function getTitles(layout) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         var titles = {
-            chartTitle: typeof layout.title === 'string' ? layout.title : typeof ((_a = layout.title) === null || _a === void 0 ? void 0 : _a.text) === 'string' ? layout.title.text : '',
-            xAxisTitle: typeof ((_b = layout === null || layout === void 0 ? void 0 : layout.xaxis) === null || _b === void 0 ? void 0 : _b.title) === 'string'
-                ? (_c = layout === null || layout === void 0 ? void 0 : layout.xaxis) === null || _c === void 0 ? void 0 : _c.title
-                : typeof ((_e = (_d = layout === null || layout === void 0 ? void 0 : layout.xaxis) === null || _d === void 0 ? void 0 : _d.title) === null || _e === void 0 ? void 0 : _e.text) === 'string'
-                    ? (_g = (_f = layout === null || layout === void 0 ? void 0 : layout.xaxis) === null || _f === void 0 ? void 0 : _f.title) === null || _g === void 0 ? void 0 : _g.text
-                    : '',
-            yAxisTitle: typeof ((_h = layout === null || layout === void 0 ? void 0 : layout.yaxis) === null || _h === void 0 ? void 0 : _h.title) === 'string'
-                ? (_j = layout === null || layout === void 0 ? void 0 : layout.yaxis) === null || _j === void 0 ? void 0 : _j.title
-                : typeof ((_l = (_k = layout === null || layout === void 0 ? void 0 : layout.yaxis) === null || _k === void 0 ? void 0 : _k.title) === null || _l === void 0 ? void 0 : _l.text) === 'string'
-                    ? (_o = (_m = layout === null || layout === void 0 ? void 0 : layout.yaxis) === null || _m === void 0 ? void 0 : _m.title) === null || _o === void 0 ? void 0 : _o.text
-                    : '',
+            chartTitle: typeof (layout === null || layout === void 0 ? void 0 : layout.title) === 'string' ? layout.title : (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.title) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : '',
+            xAxisTitle: typeof ((_c = layout === null || layout === void 0 ? void 0 : layout.xaxis) === null || _c === void 0 ? void 0 : _c.title) === 'string' ? (_d = layout === null || layout === void 0 ? void 0 : layout.xaxis) === null || _d === void 0 ? void 0 : _d.title : (_g = (_f = (_e = layout === null || layout === void 0 ? void 0 : layout.xaxis) === null || _e === void 0 ? void 0 : _e.title) === null || _f === void 0 ? void 0 : _f.text) !== null && _g !== void 0 ? _g : '',
+            yAxisTitle: typeof ((_h = layout === null || layout === void 0 ? void 0 : layout.yaxis) === null || _h === void 0 ? void 0 : _h.title) === 'string' ? (_j = layout === null || layout === void 0 ? void 0 : layout.yaxis) === null || _j === void 0 ? void 0 : _j.title : (_m = (_l = (_k = layout === null || layout === void 0 ? void 0 : layout.yaxis) === null || _k === void 0 ? void 0 : _k.title) === null || _l === void 0 ? void 0 : _l.text) !== null && _m !== void 0 ? _m : '',
         };
         return titles;
     }
     var updateXValues = function (xValues) {
         var presentYear = new Date().getFullYear();
+        if (xValues.length > 0 && Array.isArray(xValues[0])) {
+            throw new Error('updateXValues:: 2D array not supported');
+        }
         var dates = xValues.map(function (possiblyMonthValue) {
             var parsedDate = "".concat(possiblyMonthValue, " 01, ").concat(presentYear);
             return isDate(parsedDate) ? new Date(parsedDate) : null;
@@ -68,21 +118,54 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         return colorMap.current.get(legendLabel);
     };
     exports.getColor = getColor;
-    var transformPlotlyJsonToDonutProps = function (jsonObj, colorMap, isDarkTheme) {
-        var _a, _b;
-        var data = jsonObj.data, layout = jsonObj.layout;
-        var firstData = data[0];
+    var getSecondaryYAxisValues = function (series, layout) {
+        var _a;
+        var secondaryYAxisValues = {};
+        if (layout && layout.yaxis2 && series.yaxis === 'y2') {
+            secondaryYAxisValues.secondaryYAxistitle =
+                typeof layout.yaxis2.title === 'string'
+                    ? layout.yaxis2.title
+                    : typeof ((_a = layout.yaxis2.title) === null || _a === void 0 ? void 0 : _a.text) === 'string'
+                        ? layout.yaxis2.title.text
+                        : '';
+            if (layout.yaxis2.range) {
+                secondaryYAxisValues.secondaryYScaleOptions = {
+                    yMinValue: layout.yaxis2.range[0],
+                    yMaxValue: layout.yaxis2.range[1],
+                };
+            }
+            else {
+                var yValues = series.y;
+                if (yValues) {
+                    secondaryYAxisValues.secondaryYScaleOptions = {
+                        yMinValue: Math.min.apply(Math, yValues),
+                        yMaxValue: Math.max.apply(Math, yValues),
+                    };
+                }
+            }
+        }
+        secondaryYAxisValues.secondaryYAxistitle =
+            secondaryYAxisValues.secondaryYAxistitle !== '' ? secondaryYAxisValues.secondaryYAxistitle : undefined;
+        secondaryYAxisValues.secondaryYScaleOptions =
+            secondaryYAxisValues.secondaryYScaleOptions && Object.keys(secondaryYAxisValues.secondaryYScaleOptions).length !== 0
+                ? secondaryYAxisValues.secondaryYScaleOptions
+                : undefined;
+        return secondaryYAxisValues;
+    };
+    var transformPlotlyJsonToDonutProps = function (input, colorMap, isDarkTheme) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        var firstData = input.data[0];
         var donutData = (_a = firstData.labels) === null || _a === void 0 ? void 0 : _a.map(function (label, index) {
             var _a;
             var color = (0, exports.getColor)(label, colorMap, isDarkTheme);
             return {
                 legend: label,
-                data: (_a = firstData.values) === null || _a === void 0 ? void 0 : _a[index],
+                data: (_a = firstData.values) === null || _a === void 0 ? void 0 : _a[index], //ToDo how to handle string data?
                 color: color,
             };
         });
-        var width = typeof (layout === null || layout === void 0 ? void 0 : layout.width) === 'number' ? layout === null || layout === void 0 ? void 0 : layout.width : 440;
-        var height = typeof (layout === null || layout === void 0 ? void 0 : layout.height) === 'number' ? layout === null || layout === void 0 ? void 0 : layout.height : 220;
+        var width = (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 440;
+        var height = (_e = (_d = input.layout) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : 220;
         var hideLabels = firstData.textinfo
             ? !['value', 'percent', 'label+percent'].includes(firstData.textinfo)
             : false;
@@ -93,57 +176,63 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             : 0;
         var styles = {
             root: {
-                '[class^="arcLabel"]': tslib_1.__assign({}, (typeof ((_b = firstData.textfont) === null || _b === void 0 ? void 0 : _b.size) === 'number' ? { fontSize: firstData.textfont.size } : {})),
+                '[class^="arcLabel"]': tslib_1.__assign({}, (typeof ((_f = firstData.textfont) === null || _f === void 0 ? void 0 : _f.size) === 'number' ? { fontSize: firstData.textfont.size } : {})),
             },
         };
-        var chartTitle = getTitles(layout).chartTitle;
+        var chartTitle = getTitles(input.layout).chartTitle;
         return {
             data: {
                 chartTitle: chartTitle,
                 chartData: donutData,
             },
-            hideLegend: (layout === null || layout === void 0 ? void 0 : layout.showlegend) === false ? true : false,
+            hideLegend: ((_g = input.layout) === null || _g === void 0 ? void 0 : _g.showlegend) === false ? true : false,
             width: width,
             height: height,
             innerRadius: innerRadius,
             hideLabels: hideLabels,
-            showLabelsInPercent: firstData.textinfo ? firstData.textinfo === 'percent' : true,
+            showLabelsInPercent: firstData.textinfo ? ['percent', 'label+percent'].includes(firstData.textinfo) : true,
             styles: styles,
         };
     };
     exports.transformPlotlyJsonToDonutProps = transformPlotlyJsonToDonutProps;
-    var transformPlotlyJsonToVSBCProps = function (jsonObj, colorMap, isDarkTheme) {
-        var data = jsonObj.data, layout = jsonObj.layout;
+    var transformPlotlyJsonToVSBCProps = function (input, colorMap, isDarkTheme, fallbackVSBC) {
         var mapXToDataPoints = {};
         var yMaxValue = 0;
-        data.forEach(function (series, index1) {
+        var secondaryYAxisValues = {};
+        input.data.forEach(function (series, index1) {
             var _a;
+            invalidate2Dseries(series, 'VSBC');
+            if (!(0, exports.isNumberArray)(series.y)) {
+                throw new Error('transform to VSBC:: y values should be numeric');
+            }
             (_a = series.x) === null || _a === void 0 ? void 0 : _a.forEach(function (x, index2) {
-                var _a, _b, _c;
+                var _a, _b;
                 if (!mapXToDataPoints[x]) {
                     mapXToDataPoints[x] = { xAxisPoint: x, chartData: [], lineData: [] };
                 }
-                var legend = series.name || "Series ".concat(index1 + 1);
-                if (series.type === 'bar' || series.type === 'scatter') {
+                var legend = getLegend(series, index1);
+                var yVal = (_b = (_a = series.y) === null || _a === void 0 ? void 0 : _a[index2]) !== null && _b !== void 0 ? _b : 0;
+                if (series.type === 'bar') {
                     var color = (0, exports.getColor)(legend, colorMap, isDarkTheme);
                     mapXToDataPoints[x].chartData.push({
                         legend: legend,
-                        data: (_a = series.y) === null || _a === void 0 ? void 0 : _a[index2],
+                        data: yVal,
                         color: color,
                     });
                 }
-                else if (series.type === 'line') {
+                else if (series.type === 'scatter' || (0, exports.isLineData)(series) || !!fallbackVSBC) {
                     var color = (0, exports.getColor)(legend, colorMap, isDarkTheme);
                     mapXToDataPoints[x].lineData.push({
                         legend: legend,
-                        y: (_b = series.y) === null || _b === void 0 ? void 0 : _b[index2],
+                        y: yVal,
                         color: color,
                     });
                 }
-                yMaxValue = Math.max(yMaxValue, (_c = series.y) === null || _c === void 0 ? void 0 : _c[index2]);
+                yMaxValue = Math.max(yMaxValue, yVal);
             });
+            secondaryYAxisValues = getSecondaryYAxisValues(series, input.layout);
         });
-        var _a = getTitles(layout), chartTitle = _a.chartTitle, xAxisTitle = _a.xAxisTitle, yAxisTitle = _a.yAxisTitle;
+        var _a = getTitles(input.layout), chartTitle = _a.chartTitle, xAxisTitle = _a.xAxisTitle, yAxisTitle = _a.yAxisTitle;
         return {
             data: Object.values(mapXToDataPoints),
             // width: layout?.width,
@@ -154,33 +243,40 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             xAxisTitle: xAxisTitle,
             yAxisTitle: yAxisTitle,
             mode: 'plotly',
+            secondaryYAxistitle: secondaryYAxisValues.secondaryYAxistitle,
+            secondaryYScaleOptions: secondaryYAxisValues.secondaryYScaleOptions,
         };
     };
     exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
-    var transformPlotlyJsonToGVBCProps = function (jsonObj, colorMap, isDarkTheme) {
-        var data = jsonObj.data, layout = jsonObj.layout;
+    var transformPlotlyJsonToGVBCProps = function (input, colorMap, isDarkTheme) {
         var mapXToDataPoints = {};
-        data.forEach(function (series, index1) {
+        var secondaryYAxisValues = {};
+        input.data.forEach(function (series, index1) {
             var _a;
+            invalidate2Dseries(series, 'GVBC');
+            if (!(0, exports.isNumberArray)(series.y)) {
+                throw new Error('transform to GVBC:: y values should be numeric');
+            }
             (_a = series.x) === null || _a === void 0 ? void 0 : _a.forEach(function (x, index2) {
-                var _a;
+                var _a, _b;
                 if (!mapXToDataPoints[x]) {
                     mapXToDataPoints[x] = { name: x.toString(), series: [] };
                 }
                 if (series.type === 'bar') {
-                    var legend = series.name || "Series ".concat(index1 + 1);
+                    var legend = getLegend(series, index1);
                     var color = (0, exports.getColor)(legend, colorMap, isDarkTheme);
                     mapXToDataPoints[x].series.push({
                         key: legend,
-                        data: (_a = series.y) === null || _a === void 0 ? void 0 : _a[index2],
+                        data: (_b = (_a = series.y) === null || _a === void 0 ? void 0 : _a[index2]) !== null && _b !== void 0 ? _b : 0,
                         xAxisCalloutData: x,
                         color: color,
                         legend: legend,
                     });
                 }
             });
+            secondaryYAxisValues = getSecondaryYAxisValues(series, input.layout);
         });
-        var _a = getTitles(layout), chartTitle = _a.chartTitle, xAxisTitle = _a.xAxisTitle, yAxisTitle = _a.yAxisTitle;
+        var _a = getTitles(input.layout), chartTitle = _a.chartTitle, xAxisTitle = _a.xAxisTitle, yAxisTitle = _a.yAxisTitle;
         return {
             data: Object.values(mapXToDataPoints),
             // width: layout?.width,
@@ -190,14 +286,16 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             xAxisTitle: xAxisTitle,
             yAxisTitle: yAxisTitle,
             mode: 'plotly',
+            secondaryYAxistitle: secondaryYAxisValues.secondaryYAxistitle,
+            secondaryYScaleOptions: secondaryYAxisValues.secondaryYScaleOptions,
         };
     };
     exports.transformPlotlyJsonToGVBCProps = transformPlotlyJsonToGVBCProps;
-    var transformPlotlyJsonToVBCProps = function (jsonObj, colorMap, isDarkTheme) {
-        var data = jsonObj.data, layout = jsonObj.layout;
+    var transformPlotlyJsonToVBCProps = function (input, colorMap, isDarkTheme) {
         var vbcData = [];
-        data.forEach(function (series, index) {
+        input.data.forEach(function (series, index) {
             var _a, _b, _c;
+            invalidate2Dseries(series, 'VBC');
             if (!series.x) {
                 return;
             }
@@ -225,7 +323,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             // If the start or end of xbins is specified, then the number of datapoints may become less than x.length
             var totalDataPoints = (0, d3_array_1.merge)(buckets).length;
             buckets.forEach(function (bucket) {
-                var legend = series.name || "Series ".concat(index + 1);
+                var legend = getLegend(series, index);
                 var color = (0, exports.getColor)(legend, colorMap, isDarkTheme);
                 var y = bucket.length;
                 if (series.histnorm === 'percent') {
@@ -261,12 +359,11 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 });
             });
         });
-        var _a = getTitles(layout), chartTitle = _a.chartTitle, xAxisTitle = _a.xAxisTitle, yAxisTitle = _a.yAxisTitle;
+        var _a = getTitles(input.layout), chartTitle = _a.chartTitle, xAxisTitle = _a.xAxisTitle, yAxisTitle = _a.yAxisTitle;
         return {
             data: vbcData,
             // width: layout?.width,
             // height: layout?.height,
-            barWidth: 24,
             supportNegativeData: true,
             chartTitle: chartTitle,
             xAxisTitle: xAxisTitle,
@@ -275,15 +372,19 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         };
     };
     exports.transformPlotlyJsonToVBCProps = transformPlotlyJsonToVBCProps;
-    var transformPlotlyJsonToScatterChartProps = function (jsonObj, isAreaChart, colorMap, isDarkTheme) {
-        var data = jsonObj.data, layout = jsonObj.layout;
-        var chartData = data.map(function (series, index) {
+    var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart, colorMap, isDarkTheme) {
+        var secondaryYAxisValues = {};
+        var mode = 'tonexty';
+        var chartData = input.data.map(function (series, index) {
+            invalidate2Dseries(series, 'Scatter');
             var xValues = series.x;
             var isString = typeof xValues[0] === 'string';
             var isXDate = (0, exports.isDateArray)(xValues);
             var isXNumber = (0, exports.isNumberArray)(xValues);
-            var legend = series.name || "Series ".concat(index + 1);
+            var legend = getLegend(series, index);
             var lineColor = (0, exports.getColor)(legend, colorMap, isDarkTheme);
+            secondaryYAxisValues = getSecondaryYAxisValues(series, input.layout);
+            mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
             return {
                 legend: legend,
                 data: xValues.map(function (x, i) { return ({
@@ -293,7 +394,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 color: lineColor,
             };
         });
-        var _a = getTitles(layout), chartTitle = _a.chartTitle, xAxisTitle = _a.xAxisTitle, yAxisTitle = _a.yAxisTitle;
+        var _a = getTitles(input.layout), chartTitle = _a.chartTitle, xAxisTitle = _a.xAxisTitle, yAxisTitle = _a.yAxisTitle;
         var chartProps = {
             chartTitle: chartTitle,
             lineChartData: chartData,
@@ -304,6 +405,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 supportNegativeData: true,
                 xAxisTitle: xAxisTitle,
                 yAxisTitle: yAxisTitle,
+                secondaryYAxistitle: secondaryYAxisValues.secondaryYAxistitle,
+                secondaryYScaleOptions: secondaryYAxisValues.secondaryYScaleOptions,
+                mode: mode,
             };
         }
         else {
@@ -312,15 +416,17 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 supportNegativeData: true,
                 xAxisTitle: xAxisTitle,
                 yAxisTitle: yAxisTitle,
+                secondaryYAxistitle: secondaryYAxisValues.secondaryYAxistitle,
+                secondaryYScaleOptions: secondaryYAxisValues.secondaryYScaleOptions,
             };
         }
     };
     exports.transformPlotlyJsonToScatterChartProps = transformPlotlyJsonToScatterChartProps;
-    var transformPlotlyJsonToHorizontalBarWithAxisProps = function (jsonObj, colorMap, isDarkTheme) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        var data = jsonObj.data, layout = jsonObj.layout;
-        var chartData = data
+    var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, colorMap, isDarkTheme) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var chartData = input.data
             .map(function (series, index) {
+            invalidate2Dseries(series, 'HBC');
             return series.y.map(function (yValue, i) {
                 var color = (0, exports.getColor)(yValue, colorMap, isDarkTheme);
                 return {
@@ -331,48 +437,51 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 };
             });
         })
-            .flat();
-        var chartHeight = typeof layout.height === 'number' ? layout.height : 450;
-        var margin = typeof ((_a = layout.margin) === null || _a === void 0 ? void 0 : _a.l) === 'number' ? (_b = layout.margin) === null || _b === void 0 ? void 0 : _b.l : 0;
-        var padding = typeof ((_c = layout.margin) === null || _c === void 0 ? void 0 : _c.pad) === 'number' ? (_d = layout.margin) === null || _d === void 0 ? void 0 : _d.pad : 0;
+            .flat()
+            //reversing the order to invert the Y bars order as required by plotly.
+            .reverse();
+        var chartHeight = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 450;
+        var margin = (_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.margin) === null || _d === void 0 ? void 0 : _d.l) !== null && _e !== void 0 ? _e : 0;
+        var padding = (_h = (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.margin) === null || _g === void 0 ? void 0 : _g.pad) !== null && _h !== void 0 ? _h : 0;
         var availableHeight = chartHeight - margin - padding;
-        var numberOfBars = data[0].y.length;
+        var numberOfBars = input.data[0].y.length;
         var scalingFactor = 0.01;
         var gapFactor = 1 / (1 + scalingFactor * numberOfBars);
         var barHeight = availableHeight / (numberOfBars * (1 + gapFactor));
-        var _j = getTitles(layout), chartTitle = _j.chartTitle, xAxisTitle = _j.xAxisTitle, yAxisTitle = _j.yAxisTitle;
+        var _t = getTitles(input.layout), chartTitle = _t.chartTitle, xAxisTitle = _t.xAxisTitle, yAxisTitle = _t.yAxisTitle;
         return {
             data: chartData,
             chartTitle: chartTitle,
             xAxisTitle: xAxisTitle,
             yAxisTitle: yAxisTitle,
-            secondaryYAxistitle: typeof ((_e = layout === null || layout === void 0 ? void 0 : layout.yaxis2) === null || _e === void 0 ? void 0 : _e.title) === 'string' ? (_f = layout === null || layout === void 0 ? void 0 : layout.yaxis2) === null || _f === void 0 ? void 0 : _f.title : ((_h = (_g = layout === null || layout === void 0 ? void 0 : layout.yaxis2) === null || _g === void 0 ? void 0 : _g.title) === null || _h === void 0 ? void 0 : _h.text) || '',
+            secondaryYAxistitle: typeof ((_k = (_j = input.layout) === null || _j === void 0 ? void 0 : _j.yaxis2) === null || _k === void 0 ? void 0 : _k.title) === 'string'
+                ? (_m = (_l = input.layout) === null || _l === void 0 ? void 0 : _l.yaxis2) === null || _m === void 0 ? void 0 : _m.title
+                : ((_q = (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.yaxis2) === null || _p === void 0 ? void 0 : _p.title) === null || _q === void 0 ? void 0 : _q.text) || '',
             barHeight: barHeight,
             showYAxisLables: true,
             styles: {
                 root: {
                     height: chartHeight,
-                    width: typeof layout.width === 'number' ? layout.width : 600,
+                    width: (_s = (_r = input.layout) === null || _r === void 0 ? void 0 : _r.width) !== null && _s !== void 0 ? _s : 600,
                 },
             },
         };
     };
     exports.transformPlotlyJsonToHorizontalBarWithAxisProps = transformPlotlyJsonToHorizontalBarWithAxisProps;
-    var transformPlotlyJsonToHeatmapProps = function (jsonObj) {
+    var transformPlotlyJsonToHeatmapProps = function (input) {
         var _a;
-        var data = jsonObj.data, layout = jsonObj.layout;
-        var firstData = data[0];
+        var firstData = input.data[0];
         var heatmapDataPoints = [];
         var zMin = Number.POSITIVE_INFINITY;
         var zMax = Number.NEGATIVE_INFINITY;
         (_a = firstData.x) === null || _a === void 0 ? void 0 : _a.forEach(function (xVal, xIdx) {
             var _a;
             (_a = firstData.y) === null || _a === void 0 ? void 0 : _a.forEach(function (yVal, yIdx) {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e, _f;
                 var zVal = (_b = (_a = firstData.z) === null || _a === void 0 ? void 0 : _a[yIdx]) === null || _b === void 0 ? void 0 : _b[xIdx];
                 heatmapDataPoints.push({
-                    x: ((_c = layout.xaxis) === null || _c === void 0 ? void 0 : _c.type) === 'date' ? new Date(xVal) : xVal,
-                    y: ((_d = layout.yaxis) === null || _d === void 0 ? void 0 : _d.type) === 'date' ? new Date(yVal) : yVal,
+                    x: ((_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.xaxis) === null || _d === void 0 ? void 0 : _d.type) === 'date' ? xVal : xVal !== null && xVal !== void 0 ? xVal : 0,
+                    y: ((_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.yaxis) === null || _f === void 0 ? void 0 : _f.type) === 'date' ? yVal : yVal,
                     value: zVal,
                     rectText: zVal,
                 });
@@ -381,16 +490,24 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             });
         });
         var heatmapData = {
-            legend: typeof firstData.name === 'string' ? firstData.name : '',
+            legend: firstData.name,
             data: heatmapDataPoints,
             value: 0,
         };
-        // Convert normalized values to actual values
-        var domainValuesForColorScale = firstData.colorscale
+        // Initialize domain and range to default values
+        var defaultDomain = [zMin, zMax];
+        var defaultRange = [
+            (0, colors_1.getColorFromToken)(colors_1.DataVizPalette.color1),
+            (0, colors_1.getColorFromToken)(colors_1.DataVizPalette.color2),
+            (0, colors_1.getColorFromToken)(colors_1.DataVizPalette.color3),
+        ];
+        var domainValuesForColorScale = Array.isArray(firstData.colorscale)
             ? firstData.colorscale.map(function (arr) { return arr[0] * (zMax - zMin) + zMin; })
-            : [];
-        var rangeValuesForColorScale = firstData.colorscale ? firstData.colorscale.map(function (arr) { return arr[1]; }) : [];
-        var _b = getTitles(layout), chartTitle = _b.chartTitle, xAxisTitle = _b.xAxisTitle, yAxisTitle = _b.yAxisTitle;
+            : defaultDomain;
+        var rangeValuesForColorScale = Array.isArray(firstData.colorscale)
+            ? firstData.colorscale.map(function (arr) { return arr[1]; })
+            : defaultRange;
+        var _b = getTitles(input.layout), chartTitle = _b.chartTitle, xAxisTitle = _b.xAxisTitle, yAxisTitle = _b.yAxisTitle;
         return {
             data: [heatmapData],
             domainValuesForColorScale: domainValuesForColorScale,
@@ -404,22 +521,20 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         };
     };
     exports.transformPlotlyJsonToHeatmapProps = transformPlotlyJsonToHeatmapProps;
-    var transformPlotlyJsonToSankeyProps = function (jsonObj, colorMap, isDarkTheme) {
-        var _a, _b;
-        var data = jsonObj.data, layout = jsonObj.layout;
-        var _c = data[0], link = _c.link, node = _c.node;
-        var validLinks = link.value
+    var transformPlotlyJsonToSankeyProps = function (input, colorMap, isDarkTheme) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _k = input.data[0], link = _k.link, node = _k.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.source[index],
-            target: link.target[index],
+            source: link === null || link === void 0 ? void 0 : link.source[index],
+            target: link === null || link === void 0 ? void 0 : link.target[index],
         }); })
             // eslint-disable-next-line @typescript-eslint/no-shadow
-            //@ts-expect-error Dynamic link object. Ignore for now.
             // 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; });
         var sankeyChartData = {
-            nodes: node.label.map(function (label, index) {
+            nodes: (_b = node.label) === null || _b === void 0 ? void 0 : _b.map(function (label, index) {
                 var color = (0, exports.getColor)(label, colorMap, isDarkTheme);
                 return {
                     nodeId: index,
@@ -431,13 +546,13 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 return tslib_1.__assign({}, validLink);
             }),
         };
-        var width = typeof (layout === null || layout === void 0 ? void 0 : layout.width) === 'number' ? layout === null || layout === void 0 ? void 0 : layout.width : 440;
-        var height = typeof (layout === null || layout === void 0 ? void 0 : layout.height) === 'number' ? layout === null || layout === void 0 ? void 0 : layout.height : 220;
+        var width = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : 440;
+        var height = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 220;
         var styles = {
-            root: tslib_1.__assign({}, (typeof ((_a = layout.font) === null || _a === void 0 ? void 0 : _a.size) === 'number' ? { fontSize: (_b = layout.font) === null || _b === void 0 ? void 0 : _b.size } : {})),
+            root: tslib_1.__assign({}, (((_h = (_g = input.layout) === null || _g === void 0 ? void 0 : _g.font) === null || _h === void 0 ? void 0 : _h.size) ? { fontSize: (_j = input.layout.font) === null || _j === void 0 ? void 0 : _j.size } : {})),
         };
         var shouldResize = width + height;
-        var chartTitle = getTitles(layout).chartTitle;
+        var chartTitle = getTitles(input.layout).chartTitle;
         return {
             data: {
                 chartTitle: chartTitle,
@@ -451,10 +566,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         };
     };
     exports.transformPlotlyJsonToSankeyProps = transformPlotlyJsonToSankeyProps;
-    var transformPlotlyJsonToGaugeProps = function (jsonObj, colorMap, isDarkTheme) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
-        var data = jsonObj.data, layout = jsonObj.layout;
-        var firstData = data[0];
+    var transformPlotlyJsonToGaugeProps = function (input, colorMap, isDarkTheme) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
+        var firstData = input.data[0];
         var segments = ((_b = (_a = firstData.gauge) === null || _a === void 0 ? void 0 : _a.steps) === null || _b === void 0 ? void 0 : _b.length)
             ? firstData.gauge.steps.map(function (step, index) {
                 var _a, _b;
@@ -469,27 +583,27 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             : [
                 {
                     legend: 'Current',
-                    size: (_c = firstData.value) !== null && _c !== void 0 ? _c : 0 - ((_f = (_e = (_d = firstData.gauge) === null || _d === void 0 ? void 0 : _d.range) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : 0),
+                    size: (_c = firstData.value) !== null && _c !== void 0 ? _c : 0 - ((_g = (_f = (_e = (_d = firstData.gauge) === null || _d === void 0 ? void 0 : _d.axis) === null || _e === void 0 ? void 0 : _e.range) === null || _f === void 0 ? void 0 : _f[0]) !== null && _g !== void 0 ? _g : 0),
                     color: (0, exports.getColor)('Current', colorMap, isDarkTheme),
                 },
                 {
                     legend: 'Target',
-                    size: ((_j = (_h = (_g = firstData.gauge) === null || _g === void 0 ? void 0 : _g.range) === null || _h === void 0 ? void 0 : _h[1]) !== null && _j !== void 0 ? _j : 100) - ((_k = firstData.value) !== null && _k !== void 0 ? _k : 0),
+                    size: ((_l = (_k = (_j = (_h = firstData.gauge) === null || _h === void 0 ? void 0 : _h.axis) === null || _j === void 0 ? void 0 : _j.range) === null || _k === void 0 ? void 0 : _k[1]) !== null && _l !== void 0 ? _l : 100) - ((_m = firstData.value) !== null && _m !== void 0 ? _m : 0),
                     color: colors_1.DataVizPalette.disabled,
                 },
             ];
         var sublabel;
         var sublabelColor;
-        if (typeof ((_l = firstData.delta) === null || _l === void 0 ? void 0 : _l.reference) === 'number') {
+        if ((_o = firstData.delta) === null || _o === void 0 ? void 0 : _o.reference) {
             var diff = firstData.value - firstData.delta.reference;
             if (diff >= 0) {
                 sublabel = "\u25B2 ".concat(diff);
-                var color = (0, exports.getColor)(((_m = firstData.delta.increasing) === null || _m === void 0 ? void 0 : _m.color) || '', colorMap, isDarkTheme);
+                var color = (0, colors_1.getColorFromToken)(colors_1.DataVizPalette.success, isDarkTheme);
                 sublabelColor = color;
             }
             else {
                 sublabel = "\u25BC ".concat(Math.abs(diff));
-                var color = (0, exports.getColor)(((_o = firstData.delta.decreasing) === null || _o === void 0 ? void 0 : _o.color) || '', colorMap, isDarkTheme);
+                var color = (0, colors_1.getColorFromToken)(colors_1.DataVizPalette.error, isDarkTheme);
                 sublabelColor = color;
             }
         }
@@ -498,20 +612,20 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 fill: sublabelColor,
             },
         };
-        var chartTitle = getTitles(layout).chartTitle;
+        var chartTitle = getTitles(input.layout).chartTitle;
         return {
             segments: segments,
-            chartValue: typeof firstData.value === 'number' ? firstData.value : 0,
+            chartValue: (_p = firstData.value) !== null && _p !== void 0 ? _p : 0,
             chartTitle: chartTitle,
             sublabel: sublabel,
             // range values can be null
-            minValue: typeof ((_r = (_q = (_p = firstData.gauge) === null || _p === void 0 ? void 0 : _p.axis) === null || _q === void 0 ? void 0 : _q.range) === null || _r === void 0 ? void 0 : _r[0]) === 'number' ? (_u = (_t = (_s = firstData.gauge) === null || _s === void 0 ? void 0 : _s.axis) === null || _t === void 0 ? void 0 : _t.range) === null || _u === void 0 ? void 0 : _u[0] : undefined,
-            maxValue: typeof ((_x = (_w = (_v = firstData.gauge) === null || _v === void 0 ? void 0 : _v.axis) === null || _w === void 0 ? void 0 : _w.range) === null || _x === void 0 ? void 0 : _x[1]) === 'number' ? (_0 = (_z = (_y = firstData.gauge) === null || _y === void 0 ? void 0 : _y.axis) === null || _z === void 0 ? void 0 : _z.range) === null || _0 === void 0 ? void 0 : _0[1] : undefined,
-            chartValueFormat: function () { return firstData.value; },
-            width: typeof (layout === null || layout === void 0 ? void 0 : layout.width) === 'number' ? layout === null || layout === void 0 ? void 0 : layout.width : 440,
-            height: typeof (layout === null || layout === void 0 ? void 0 : layout.height) === 'number' ? layout === null || layout === void 0 ? void 0 : layout.height : 220,
+            minValue: typeof ((_s = (_r = (_q = firstData.gauge) === null || _q === void 0 ? void 0 : _q.axis) === null || _r === void 0 ? void 0 : _r.range) === null || _s === void 0 ? void 0 : _s[0]) === 'number' ? (_v = (_u = (_t = firstData.gauge) === null || _t === void 0 ? void 0 : _t.axis) === null || _u === void 0 ? void 0 : _u.range) === null || _v === void 0 ? void 0 : _v[0] : undefined,
+            maxValue: typeof ((_y = (_x = (_w = firstData.gauge) === null || _w === void 0 ? void 0 : _w.axis) === null || _x === void 0 ? void 0 : _x.range) === null || _y === void 0 ? void 0 : _y[1]) === 'number' ? (_1 = (_0 = (_z = firstData.gauge) === null || _z === void 0 ? void 0 : _z.axis) === null || _0 === void 0 ? void 0 : _0.range) === null || _1 === void 0 ? void 0 : _1[1] : undefined,
+            chartValueFormat: function () { var _a, _b; return (_b = (_a = firstData.value) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : ''; },
+            width: (_3 = (_2 = input.layout) === null || _2 === void 0 ? void 0 : _2.width) !== null && _3 !== void 0 ? _3 : 440,
+            height: (_5 = (_4 = input.layout) === null || _4 === void 0 ? void 0 : _4.height) !== null && _5 !== void 0 ? _5 : 220,
             styles: styles,
-            variant: ((_2 = (_1 = firstData.gauge) === null || _1 === void 0 ? void 0 : _1.steps) === null || _2 === void 0 ? void 0 : _2.length) ? index_1.GaugeChartVariant.MultipleSegments : index_1.GaugeChartVariant.SingleSegment,
+            variant: ((_7 = (_6 = firstData.gauge) === null || _6 === void 0 ? void 0 : _6.steps) === null || _7 === void 0 ? void 0 : _7.length) ? index_1.GaugeChartVariant.MultipleSegments : index_1.GaugeChartVariant.SingleSegment,
         };
     };
     exports.transformPlotlyJsonToGaugeProps = transformPlotlyJsonToGaugeProps;