@fluentui/react-charts 9.2.1 → 9.2.2

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

@@ -1,4 +1,4 @@
-/* eslint-disable one-var */ /* eslint-disable vars-on-top */ /* eslint-disable no-var */ /* eslint-disable @typescript-eslint/no-explicit-any */ "use strict";
+/* eslint-disable one-var */ /* eslint-disable vars-on-top */ /* eslint-disable no-var */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -9,18 +9,21 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    _getGaugeAxisColor: function() {
+        return _getGaugeAxisColor;
+    },
     correctYearMonth: function() {
         return correctYearMonth;
     },
     findArrayAttributes: function() {
         return findArrayAttributes;
     },
-    getColor: function() {
-        return getColor;
-    },
     projectPolarToCartesian: function() {
         return projectPolarToCartesian;
     },
+    transformPlotlyJsonToChartTableProps: function() {
+        return transformPlotlyJsonToChartTableProps;
+    },
     transformPlotlyJsonToDonutProps: function() {
         return transformPlotlyJsonToDonutProps;
     },
@@ -57,6 +60,7 @@ const _colors = require("../../utilities/colors");
 const _utilities = require("../../utilities/utilities");
 const _chartutilities = require("@fluentui/chart-utilities");
 const _d3shape = require("d3-shape");
+const _PlotlyColorAdapter = require("./PlotlyColorAdapter");
 const dashOptions = {
     dot: {
         strokeDasharray: '1, 5',
@@ -130,14 +134,6 @@ const correctYearMonth = (xValues)=>{
     });
     return xValues;
 };
-const getColor = (legendLabel, colorMap, isDarkTheme)=>{
-    if (!colorMap.current.has(legendLabel)) {
-        const nextColor = (0, _colors.getNextColor)(colorMap.current.size + 1, 0, isDarkTheme);
-        colorMap.current.set(legendLabel, nextColor);
-        return nextColor;
-    }
-    return colorMap.current.get(legendLabel);
-};
 const usesSecondaryYScale = (series)=>{
     return series.yaxis === 'y2';
 };
@@ -177,13 +173,20 @@ const getSecondaryYAxisValues = (data, layout, maxAllowedMinY, minAllowedMaxY)=>
         }
     };
 };
-const transformPlotlyJsonToDonutProps = (input, colorMap, isDarkTheme)=>{
-    var _firstData_labels, _input_layout, _input_layout1, _input_layout2, _input_layout3;
+const _getGaugeAxisColor = (colorway, colorwayType, color, colorMap, isDarkTheme)=>{
+    const extractedColors = (0, _PlotlyColorAdapter.extractColor)(colorway, colorwayType, color, colorMap, isDarkTheme);
+    return (0, _PlotlyColorAdapter.resolveColor)(extractedColors, 0, '', colorMap, isDarkTheme);
+};
+const transformPlotlyJsonToDonutProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+    var _input_layout_template_layout, _input_layout_template, _input_layout, _firstData_marker, _firstData_labels, _input_layout1, _input_layout2, _input_layout3, _input_layout4;
     const firstData = input.data[0];
+    // extract colors for each series only once
+    const colors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, firstData === null || firstData === void 0 ? void 0 : (_firstData_marker = firstData.marker) === null || _firstData_marker === void 0 ? void 0 : _firstData_marker.colors, colorMap, isDarkTheme);
     const mapLegendToDataPoint = {};
     (_firstData_labels = firstData.labels) === null || _firstData_labels === void 0 ? void 0 : _firstData_labels.forEach((label, index)=>{
         var _firstData_values;
-        const color = getColor(label, colorMap, isDarkTheme);
+        // resolve color for each legend from the extracted colors
+        const color = (0, _PlotlyColorAdapter.resolveColor)(colors, index, label, colorMap, isDarkTheme);
         //ToDo how to handle string data?
         const value = typeof ((_firstData_values = firstData.values) === null || _firstData_values === void 0 ? void 0 : _firstData_values[index]) === 'number' ? firstData.values[index] : 1;
         if (!mapLegendToDataPoint[label]) {
@@ -197,9 +200,9 @@ const transformPlotlyJsonToDonutProps = (input, colorMap, isDarkTheme)=>{
         }
     });
     var _input_layout_width;
-    const width = (_input_layout_width = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width) !== null && _input_layout_width !== void 0 ? _input_layout_width : 440;
+    const width = (_input_layout_width = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.width) !== null && _input_layout_width !== void 0 ? _input_layout_width : 440;
     var _input_layout_height;
-    const height = (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 220;
+    const height = (_input_layout_height = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 220;
     const hideLabels = firstData.textinfo ? ![
         'value',
         'percent',
@@ -214,27 +217,32 @@ const transformPlotlyJsonToDonutProps = (input, colorMap, isDarkTheme)=>{
             chartTitle,
             chartData: Object.values(mapLegendToDataPoint)
         },
-        hideLegend: ((_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.showlegend) === false ? true : false,
-        width: (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.width,
+        hideLegend: ((_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.showlegend) === false ? true : false,
+        width: (_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : _input_layout4.width,
         height,
         innerRadius,
         hideLabels,
         showLabelsInPercent: firstData.textinfo ? [
             'percent',
             'label+percent'
-        ].includes(firstData.textinfo) : true
+        ].includes(firstData.textinfo) : true,
+        roundCorners: true
     };
 };
-const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fallbackVSBC)=>{
-    var _input_layout, _input_layout1;
+const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, isDarkTheme, fallbackVSBC)=>{
+    var _input_layout, _input_layout1, _vsbcData_;
     const mapXToDataPoints = {};
     let yMaxValue = 0;
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
     const { legends, hideLegend } = getLegendProps(input.data, input.layout);
     let yMinValue = 0;
     input.data.forEach((series, index1)=>{
-        var _series_x;
+        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_line, _series_x;
         const isXYearCategory = (0, _chartutilities.isYearArray)(series.x); // Consider year as categorical not numeric continuous axis
+        // extract bar colors for each series only once
+        const extractedBarColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
+        // extract line colors for each series only once
+        const extractedLineColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template1 = _input_layout1.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, colorwayType, (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
         (_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x.forEach((x, index2)=>{
             var _series_y;
             if (!mapXToDataPoints[x]) {
@@ -245,10 +253,11 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fallbackVS
                 };
             }
             const legend = legends[index1];
+            // resolve color for each legend's bars from the extracted colors
+            const color = (0, _PlotlyColorAdapter.resolveColor)(extractedBarColors, index1, legend, colorMap, isDarkTheme);
             var _series_y_index2;
             const yVal = (_series_y_index2 = (_series_y = series.y) === null || _series_y === void 0 ? void 0 : _series_y[index2]) !== null && _series_y_index2 !== void 0 ? _series_y_index2 : 0;
             if (series.type === 'bar') {
-                const color = getColor(legend, colorMap, isDarkTheme);
                 mapXToDataPoints[x].chartData.push({
                     legend,
                     data: yVal,
@@ -257,7 +266,7 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fallbackVS
                 yMaxValue = Math.max(yMaxValue, yVal);
             } else if (series.type === 'scatter' || !!fallbackVSBC) {
                 var _series_line;
-                const color = getColor(legend, colorMap, isDarkTheme);
+                const lineColor = (0, _PlotlyColorAdapter.resolveColor)(extractedLineColors, index1, legend, colorMap, isDarkTheme);
                 const lineOptions = getLineOptions(series.line);
                 const dashType = ((_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.dash) || 'solid';
                 const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
@@ -265,7 +274,7 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fallbackVS
                     legend,
                     legendShape,
                     y: yVal,
-                    color,
+                    color: lineColor,
                     ...lineOptions ? {
                         lineOptions
                     } : {},
@@ -280,9 +289,10 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fallbackVS
         });
     });
     const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
+    const vsbcData = Object.values(mapXToDataPoints);
     var _input_layout_height;
     return {
-        data: Object.values(mapXToDataPoints),
+        data: vsbcData,
         width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
         height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         barWidth: 'auto',
@@ -293,18 +303,22 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fallbackVS
         yAxisTitle,
         mode: 'plotly',
         ...secondaryYAxisValues,
+        wrapXAxisLables: typeof ((_vsbcData_ = vsbcData[0]) === null || _vsbcData_ === void 0 ? void 0 : _vsbcData_.xAxisPoint) === 'string',
         hideTickOverlap: true,
         barGapMax: 2,
-        hideLegend
+        hideLegend,
+        roundCorners: true
     };
 };
-const transformPlotlyJsonToGVBCProps = (input, colorMap, isDarkTheme)=>{
-    var _input_layout, _input_layout1;
+const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+    var _input_layout, _input_layout1, _gvbcData_;
     const mapXToDataPoints = {};
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
     const { legends, hideLegend } = getLegendProps(input.data, input.layout);
     input.data.forEach((series, index1)=>{
-        var _series_x;
+        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_x;
+        // extract colors for each series only once
+        const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
         (_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x.forEach((x, index2)=>{
             if (!mapXToDataPoints[x]) {
                 mapXToDataPoints[x] = {
@@ -315,7 +329,8 @@ const transformPlotlyJsonToGVBCProps = (input, colorMap, isDarkTheme)=>{
             if (series.type === 'bar') {
                 var _series_y;
                 const legend = legends[index1];
-                const color = getColor(legend, colorMap, isDarkTheme);
+                // resolve color for each legend's bars from the extracted colors
+                const color = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index1, legend, colorMap, isDarkTheme);
                 var _series_y_index2;
                 mapXToDataPoints[x].series.push({
                     key: legend,
@@ -329,9 +344,10 @@ const transformPlotlyJsonToGVBCProps = (input, colorMap, isDarkTheme)=>{
         });
     });
     const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
+    const gvbcData = Object.values(mapXToDataPoints);
     var _input_layout_height;
     return {
-        data: Object.values(mapXToDataPoints),
+        data: gvbcData,
         width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
         height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         barWidth: 'auto',
@@ -341,18 +357,22 @@ const transformPlotlyJsonToGVBCProps = (input, colorMap, isDarkTheme)=>{
         mode: 'plotly',
         ...secondaryYAxisValues,
         hideTickOverlap: true,
-        hideLegend
+        wrapXAxisLables: typeof ((_gvbcData_ = gvbcData[0]) === null || _gvbcData_ === void 0 ? void 0 : _gvbcData_.name) === 'string',
+        hideLegend,
+        roundCorners: true
     };
 };
-const transformPlotlyJsonToVBCProps = (input, colorMap, isDarkTheme)=>{
-    var _input_layout, _input_layout1;
+const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+    var _input_layout, _input_layout1, _vbcData_;
     const vbcData = [];
     const { legends, hideLegend } = getLegendProps(input.data, input.layout);
     input.data.forEach((series, seriesIdx)=>{
-        var _series_xbins, _series_xbins1, _series_xbins2;
+        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_xbins, _series_xbins1, _series_xbins2;
         if (!series.x) {
             return;
         }
+        // extract colors for each series only once
+        const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
         const isXString = isStringArray(series.x);
         // 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.
@@ -374,7 +394,8 @@ const transformPlotlyJsonToVBCProps = (input, colorMap, isDarkTheme)=>{
         });
         xBins.forEach((bin, index)=>{
             const legend = legends[seriesIdx];
-            const color = getColor(legend, colorMap, isDarkTheme);
+            // resolve color for each legend's bars from the extracted colors
+            const color = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, seriesIdx, legend, colorMap, isDarkTheme);
             const yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
             vbcData.push({
                 x: isXString ? bin.join(', ') : getBinCenter(bin),
@@ -398,25 +419,30 @@ const transformPlotlyJsonToVBCProps = (input, colorMap, isDarkTheme)=>{
         yAxisTitle,
         mode: 'histogram',
         hideTickOverlap: true,
+        wrapXAxisLables: typeof ((_vbcData_ = vbcData[0]) === null || _vbcData_ === void 0 ? void 0 : _vbcData_.x) === 'string',
         maxBarWidth: 50,
-        hideLegend
+        hideLegend,
+        roundCorners: true
     };
 };
-const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, colorMap, isDarkTheme)=>{
+const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isScatterMarkers, colorMap, colorwayType, isDarkTheme)=>{
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, isAreaChart ? 0 : undefined, isAreaChart ? 0 : undefined);
     let mode = 'tonexty';
     const { legends, hideLegend } = getLegendProps(input.data, input.layout);
     const chartData = input.data.map((series, index)=>{
-        var _series_line;
+        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_line, _series_line1;
+        // extract colors for each series only once
+        const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, isScatterMarkers ? (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color : (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
         const xValues = series.x;
         const isString = typeof xValues[0] === 'string';
         const isXDate = (0, _chartutilities.isDateArray)(xValues);
         const isXNumber = (0, _chartutilities.isNumberArray)(xValues);
         const legend = legends[index];
-        const lineColor = getColor(legend, colorMap, isDarkTheme);
+        // resolve color for each legend's lines from the extracted colors
+        const seriesColor = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
         const lineOptions = getLineOptions(series.line);
-        const dashType = ((_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.dash) || 'solid';
+        const dashType = ((_series_line1 = series.line) === null || _series_line1 === void 0 ? void 0 : _series_line1.dash) || 'solid';
         const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
         return {
             legend,
@@ -433,7 +459,7 @@ const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, colorMap, is
                     } : {}
                 };
             }),
-            color: lineColor,
+            color: seriesColor,
             ...lineOptions ? {
                 lineOptions
             } : {},
@@ -482,12 +508,16 @@ const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, colorMap, is
         };
     }
 };
-const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, isDarkTheme)=>{
+const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout, _input_layout_margin, _input_layout1, _input_layout_margin1, _input_layout2, _input_layout_yaxis2, _input_layout3, _input_layout_yaxis21, _input_layout4, _input_layout_yaxis2_title, _input_layout_yaxis22, _input_layout5, _input_layout6;
     const { legends, hideLegend } = getLegendProps(input.data, input.layout);
     const chartData = input.data.map((series, index)=>{
+        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker;
+        // extract colors for each series only once
+        const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
         const legend = legends[index];
-        const color = getColor(legend, colorMap, isDarkTheme);
+        // resolve color for each legend's bars from the extracted colors
+        const color = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
         return series.y.map((yValue, i)=>{
             return {
                 x: series.x[i],
@@ -523,7 +553,8 @@ const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, isDark
         hideTickOverlap: true,
         noOfCharsToTruncate: 20,
         showYAxisLablesTooltip: true,
-        hideLegend
+        hideLegend,
+        roundCorners: true
     };
 };
 const transformPlotlyJsonToHeatmapProps = (input)=>{
@@ -629,29 +660,31 @@ const transformPlotlyJsonToHeatmapProps = (input)=>{
         height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         hideTickOverlap: true,
         noOfCharsToTruncate: 20,
-        showYAxisLablesTooltip: true
+        showYAxisLablesTooltip: true,
+        wrapXAxisLables: true
     };
 };
-const transformPlotlyJsonToSankeyProps = (input, colorMap, isDarkTheme)=>{
-    var _node_label, _input_layout, _input_layout1;
+const transformPlotlyJsonToSankeyProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+    var _input_layout_template_layout, _input_layout_template, _input_layout, _node_label, _input_layout1, _input_layout2;
     const { link, node } = input.data[0];
     var _link_value;
     const validLinks = ((_link_value = link === null || link === void 0 ? void 0 : link.value) !== null && _link_value !== void 0 ? _link_value : []).map((val, index)=>({
             value: val,
             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
-    // Filter out negative nodes, unequal nodes and self-references (circular links)
+        })) // Filter out negative nodes, unequal nodes and self-references (circular links)
     .filter((x)=>x.source >= 0 && x.target >= 0 && x.source !== x.target);
+    const extractedNodeColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, node === null || node === void 0 ? void 0 : node.color, colorMap, isDarkTheme);
     const sankeyChartData = {
         nodes: (_node_label = node.label) === null || _node_label === void 0 ? void 0 : _node_label.map((label, index)=>{
-            const color = getColor(label, colorMap, isDarkTheme);
+            const color = (0, _PlotlyColorAdapter.resolveColor)(extractedNodeColors, index, label, colorMap, isDarkTheme);
             return {
                 nodeId: index,
                 name: label,
                 color
             };
         }),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         links: validLinks.map((validLink, index)=>{
             return {
                 ...validLink
@@ -670,18 +703,20 @@ const transformPlotlyJsonToSankeyProps = (input, colorMap, isDarkTheme)=>{
             chartTitle,
             SankeyChartData: sankeyChartData
         },
-        width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
-        height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 468
+        width: (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.width,
+        height: (_input_layout_height = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 468
     };
 };
-const transformPlotlyJsonToGaugeProps = (input, colorMap, isDarkTheme)=>{
-    var _firstData_gauge_steps, _firstData_gauge, _firstData_gauge_axis_range, _firstData_gauge_axis, _firstData_gauge1, _firstData_gauge_axis_range1, _firstData_gauge_axis1, _firstData_gauge2, _firstData_delta, _firstData_gauge_axis_range2, _firstData_gauge_axis2, _firstData_gauge3, _firstData_gauge_axis_range3, _firstData_gauge_axis3, _firstData_gauge4, _firstData_gauge_axis_range4, _firstData_gauge_axis4, _firstData_gauge5, _firstData_gauge_axis_range5, _firstData_gauge_axis5, _firstData_gauge6, _input_layout, _input_layout1, _firstData_gauge_steps1, _firstData_gauge7;
+const transformPlotlyJsonToGaugeProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+    var _firstData_gauge, _input_layout_template_layout, _input_layout_template, _input_layout, _firstData_gauge_steps, _firstData_gauge1, _firstData_gauge_axis_range, _firstData_gauge_axis, _firstData_gauge2, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _firstData_gauge_axis1, _firstData_gauge3, _firstData_gauge_axis_range1, _firstData_gauge_axis2, _firstData_gauge4, _firstData_delta, _firstData_gauge_axis_range2, _firstData_gauge_axis3, _firstData_gauge5, _firstData_gauge_axis_range3, _firstData_gauge_axis4, _firstData_gauge6, _firstData_gauge_axis_range4, _firstData_gauge_axis5, _firstData_gauge7, _firstData_gauge_axis_range5, _firstData_gauge_axis6, _firstData_gauge8, _input_layout2, _input_layout3, _firstData_gauge_steps1, _firstData_gauge9;
     const firstData = input.data[0];
+    const stepsColors = ((_firstData_gauge = firstData.gauge) === null || _firstData_gauge === void 0 ? void 0 : _firstData_gauge.steps) ? firstData.gauge.steps.map((step)=>step.color) : undefined;
+    const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, stepsColors, colorMap, isDarkTheme);
     var _firstData_gauge_axis_range_, _firstData_value, _firstData_gauge_axis_range_1, _firstData_value1;
-    const segments = ((_firstData_gauge = firstData.gauge) === null || _firstData_gauge === void 0 ? void 0 : (_firstData_gauge_steps = _firstData_gauge.steps) === null || _firstData_gauge_steps === void 0 ? void 0 : _firstData_gauge_steps.length) ? firstData.gauge.steps.map((step, index)=>{
+    const segments = ((_firstData_gauge1 = firstData.gauge) === null || _firstData_gauge1 === void 0 ? void 0 : (_firstData_gauge_steps = _firstData_gauge1.steps) === null || _firstData_gauge_steps === void 0 ? void 0 : _firstData_gauge_steps.length) ? firstData.gauge.steps.map((step, index)=>{
         var _step_range, _step_range1;
         const legend = step.name || `Segment ${index + 1}`;
-        const color = getColor(legend, colorMap, isDarkTheme);
+        const color = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
         return {
             legend,
             size: ((_step_range = step.range) === null || _step_range === void 0 ? void 0 : _step_range[1]) - ((_step_range1 = step.range) === null || _step_range1 === void 0 ? void 0 : _step_range1[0]),
@@ -690,34 +725,36 @@ const transformPlotlyJsonToGaugeProps = (input, colorMap, isDarkTheme)=>{
     }) : [
         {
             legend: 'Current',
-            size: (_firstData_value = firstData.value) !== null && _firstData_value !== void 0 ? _firstData_value : 0 - ((_firstData_gauge_axis_range_ = (_firstData_gauge1 = firstData.gauge) === null || _firstData_gauge1 === void 0 ? void 0 : (_firstData_gauge_axis = _firstData_gauge1.axis) === null || _firstData_gauge_axis === void 0 ? void 0 : (_firstData_gauge_axis_range = _firstData_gauge_axis.range) === null || _firstData_gauge_axis_range === void 0 ? void 0 : _firstData_gauge_axis_range[0]) !== null && _firstData_gauge_axis_range_ !== void 0 ? _firstData_gauge_axis_range_ : 0),
-            color: getColor('Current', colorMap, isDarkTheme)
+            size: (_firstData_value = firstData.value) !== null && _firstData_value !== void 0 ? _firstData_value : 0 - ((_firstData_gauge_axis_range_ = (_firstData_gauge2 = firstData.gauge) === null || _firstData_gauge2 === void 0 ? void 0 : (_firstData_gauge_axis = _firstData_gauge2.axis) === null || _firstData_gauge_axis === void 0 ? void 0 : (_firstData_gauge_axis_range = _firstData_gauge_axis.range) === null || _firstData_gauge_axis_range === void 0 ? void 0 : _firstData_gauge_axis_range[0]) !== null && _firstData_gauge_axis_range_ !== void 0 ? _firstData_gauge_axis_range_ : 0),
+            color: _getGaugeAxisColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template1 = _input_layout1.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, colorwayType, (_firstData_gauge3 = firstData.gauge) === null || _firstData_gauge3 === void 0 ? void 0 : (_firstData_gauge_axis1 = _firstData_gauge3.axis) === null || _firstData_gauge_axis1 === void 0 ? void 0 : _firstData_gauge_axis1.color, colorMap, isDarkTheme)
         },
         {
             legend: 'Target',
-            size: ((_firstData_gauge_axis_range_1 = (_firstData_gauge2 = firstData.gauge) === null || _firstData_gauge2 === void 0 ? void 0 : (_firstData_gauge_axis1 = _firstData_gauge2.axis) === null || _firstData_gauge_axis1 === void 0 ? void 0 : (_firstData_gauge_axis_range1 = _firstData_gauge_axis1.range) === null || _firstData_gauge_axis_range1 === void 0 ? void 0 : _firstData_gauge_axis_range1[1]) !== null && _firstData_gauge_axis_range_1 !== void 0 ? _firstData_gauge_axis_range_1 : 100) - ((_firstData_value1 = firstData.value) !== null && _firstData_value1 !== void 0 ? _firstData_value1 : 0),
+            size: ((_firstData_gauge_axis_range_1 = (_firstData_gauge4 = firstData.gauge) === null || _firstData_gauge4 === void 0 ? void 0 : (_firstData_gauge_axis2 = _firstData_gauge4.axis) === null || _firstData_gauge_axis2 === void 0 ? void 0 : (_firstData_gauge_axis_range1 = _firstData_gauge_axis2.range) === null || _firstData_gauge_axis_range1 === void 0 ? void 0 : _firstData_gauge_axis_range1[1]) !== null && _firstData_gauge_axis_range_1 !== void 0 ? _firstData_gauge_axis_range_1 : 100) - ((_firstData_value1 = firstData.value) !== null && _firstData_value1 !== void 0 ? _firstData_value1 : 0),
             color: _colors.DataVizPalette.disabled
         }
     ];
     let sublabel;
-    // let sublabelColor: string | undefined;
+    let sublabelColor;
     if ((_firstData_delta = firstData.delta) === null || _firstData_delta === void 0 ? void 0 : _firstData_delta.reference) {
         const diff = firstData.value - firstData.delta.reference;
         if (diff >= 0) {
+            var _input_layout_template_layout2, _input_layout_template2, _input_layout4, _firstData_delta_increasing, _firstData_delta1;
             sublabel = `\u25B2 ${diff}`;
-        // const color = getColorFromToken(DataVizPalette.success, isDarkTheme);
-        // sublabelColor = color;
+            const extractedIncreasingDeltaColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : (_input_layout_template2 = _input_layout4.template) === null || _input_layout_template2 === void 0 ? void 0 : (_input_layout_template_layout2 = _input_layout_template2.layout) === null || _input_layout_template_layout2 === void 0 ? void 0 : _input_layout_template_layout2.colorway, colorwayType, (_firstData_delta1 = firstData.delta) === null || _firstData_delta1 === void 0 ? void 0 : (_firstData_delta_increasing = _firstData_delta1.increasing) === null || _firstData_delta_increasing === void 0 ? void 0 : _firstData_delta_increasing.color, colorMap, isDarkTheme);
+            const color = (0, _PlotlyColorAdapter.resolveColor)(extractedIncreasingDeltaColors, 0, '', colorMap, isDarkTheme);
+            sublabelColor = color;
         } else {
+            var _input_layout_template_layout3, _input_layout_template3, _input_layout5, _firstData_delta_decreasing, _firstData_delta2;
             sublabel = `\u25BC ${Math.abs(diff)}`;
-        // const color = getColorFromToken(DataVizPalette.error, isDarkTheme);
-        // sublabelColor = color;
+            const extractedDecreasingDeltaColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : (_input_layout_template3 = _input_layout5.template) === null || _input_layout_template3 === void 0 ? void 0 : (_input_layout_template_layout3 = _input_layout_template3.layout) === null || _input_layout_template_layout3 === void 0 ? void 0 : _input_layout_template_layout3.colorway, colorwayType, (_firstData_delta2 = firstData.delta) === null || _firstData_delta2 === void 0 ? void 0 : (_firstData_delta_decreasing = _firstData_delta2.decreasing) === null || _firstData_delta_decreasing === void 0 ? void 0 : _firstData_delta_decreasing.color, colorMap, isDarkTheme);
+            const color = (0, _PlotlyColorAdapter.resolveColor)(extractedDecreasingDeltaColors, 0, '', colorMap, isDarkTheme);
+            sublabelColor = color;
         }
     }
-    // const styles: GaugeChartProps['styles'] = {
-    //   sublabel: {
-    //     fill: sublabelColor,
-    //   },
-    // };
+    const styles = {
+        sublabel: sublabelColor
+    };
     const { chartTitle } = getTitles(input.layout);
     var _firstData_value2, _input_layout_height;
     return {
@@ -726,18 +763,60 @@ const transformPlotlyJsonToGaugeProps = (input, colorMap, isDarkTheme)=>{
         chartTitle,
         sublabel,
         // range values can be null
-        minValue: typeof ((_firstData_gauge3 = firstData.gauge) === null || _firstData_gauge3 === void 0 ? void 0 : (_firstData_gauge_axis2 = _firstData_gauge3.axis) === null || _firstData_gauge_axis2 === void 0 ? void 0 : (_firstData_gauge_axis_range2 = _firstData_gauge_axis2.range) === null || _firstData_gauge_axis_range2 === void 0 ? void 0 : _firstData_gauge_axis_range2[0]) === 'number' ? (_firstData_gauge4 = firstData.gauge) === null || _firstData_gauge4 === void 0 ? void 0 : (_firstData_gauge_axis3 = _firstData_gauge4.axis) === null || _firstData_gauge_axis3 === void 0 ? void 0 : (_firstData_gauge_axis_range3 = _firstData_gauge_axis3.range) === null || _firstData_gauge_axis_range3 === void 0 ? void 0 : _firstData_gauge_axis_range3[0] : undefined,
-        maxValue: typeof ((_firstData_gauge5 = firstData.gauge) === null || _firstData_gauge5 === void 0 ? void 0 : (_firstData_gauge_axis4 = _firstData_gauge5.axis) === null || _firstData_gauge_axis4 === void 0 ? void 0 : (_firstData_gauge_axis_range4 = _firstData_gauge_axis4.range) === null || _firstData_gauge_axis_range4 === void 0 ? void 0 : _firstData_gauge_axis_range4[1]) === 'number' ? (_firstData_gauge6 = firstData.gauge) === null || _firstData_gauge6 === void 0 ? void 0 : (_firstData_gauge_axis5 = _firstData_gauge6.axis) === null || _firstData_gauge_axis5 === void 0 ? void 0 : (_firstData_gauge_axis_range5 = _firstData_gauge_axis5.range) === null || _firstData_gauge_axis_range5 === void 0 ? void 0 : _firstData_gauge_axis_range5[1] : undefined,
+        minValue: typeof ((_firstData_gauge5 = firstData.gauge) === null || _firstData_gauge5 === void 0 ? void 0 : (_firstData_gauge_axis3 = _firstData_gauge5.axis) === null || _firstData_gauge_axis3 === void 0 ? void 0 : (_firstData_gauge_axis_range2 = _firstData_gauge_axis3.range) === null || _firstData_gauge_axis_range2 === void 0 ? void 0 : _firstData_gauge_axis_range2[0]) === 'number' ? (_firstData_gauge6 = firstData.gauge) === null || _firstData_gauge6 === void 0 ? void 0 : (_firstData_gauge_axis4 = _firstData_gauge6.axis) === null || _firstData_gauge_axis4 === void 0 ? void 0 : (_firstData_gauge_axis_range3 = _firstData_gauge_axis4.range) === null || _firstData_gauge_axis_range3 === void 0 ? void 0 : _firstData_gauge_axis_range3[0] : undefined,
+        maxValue: typeof ((_firstData_gauge7 = firstData.gauge) === null || _firstData_gauge7 === void 0 ? void 0 : (_firstData_gauge_axis5 = _firstData_gauge7.axis) === null || _firstData_gauge_axis5 === void 0 ? void 0 : (_firstData_gauge_axis_range4 = _firstData_gauge_axis5.range) === null || _firstData_gauge_axis_range4 === void 0 ? void 0 : _firstData_gauge_axis_range4[1]) === 'number' ? (_firstData_gauge8 = firstData.gauge) === null || _firstData_gauge8 === void 0 ? void 0 : (_firstData_gauge_axis6 = _firstData_gauge8.axis) === null || _firstData_gauge_axis6 === void 0 ? void 0 : (_firstData_gauge_axis_range5 = _firstData_gauge_axis6.range) === null || _firstData_gauge_axis_range5 === void 0 ? void 0 : _firstData_gauge_axis_range5[1] : undefined,
         chartValueFormat: ()=>{
             var _firstData_value;
             var _firstData_value_toString;
             return (_firstData_value_toString = (_firstData_value = firstData.value) === null || _firstData_value === void 0 ? void 0 : _firstData_value.toString()) !== null && _firstData_value_toString !== void 0 ? _firstData_value_toString : '';
         },
-        width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
-        height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 220,
+        width: (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.width,
+        height: (_input_layout_height = (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 220,
         // TODO
         // styles,
-        variant: ((_firstData_gauge7 = firstData.gauge) === null || _firstData_gauge7 === void 0 ? void 0 : (_firstData_gauge_steps1 = _firstData_gauge7.steps) === null || _firstData_gauge_steps1 === void 0 ? void 0 : _firstData_gauge_steps1.length) ? 'multiple-segments' : 'single-segment'
+        variant: ((_firstData_gauge9 = firstData.gauge) === null || _firstData_gauge9 === void 0 ? void 0 : (_firstData_gauge_steps1 = _firstData_gauge9.steps) === null || _firstData_gauge_steps1 === void 0 ? void 0 : _firstData_gauge_steps1.length) ? 'multiple-segments' : 'single-segment',
+        styles,
+        roundCorners: true
+    };
+};
+const cleanText = (text)=>{
+    return text.replace(/&lt;[^&]*?&gt;/g, '').replace(/<[^>]*>/g, '').replace(/&lt;br&gt;|\\u003cbr\\u003e|<br>/gi, '').replace(/\$[^$]*\$/g, '$').trim();
+};
+const transformPlotlyJsonToChartTableProps = (input, colorMap, isDarkTheme)=>{
+    var _tableData_cells, _input_layout_font, _input_layout, _tableData_header, _input_layout1, _input_layout2;
+    const tableData = input.data[0];
+    const normalizeHeaders = (values)=>{
+        // Case: values is array of arrays
+        if (Array.isArray(values[0])) {
+            return values.map((row)=>row.map((cell)=>cleanText(cell)).filter(Boolean).join(' '));
+        }
+        // Case: values is 1d array
+        return values.map((cell)=>cleanText(cell));
+    };
+    var _tableData_cells_values;
+    const columns = (_tableData_cells_values = (_tableData_cells = tableData.cells) === null || _tableData_cells === void 0 ? void 0 : _tableData_cells.values) !== null && _tableData_cells_values !== void 0 ? _tableData_cells_values : [];
+    const rows = columns[0].map((_, rowIndex)=>columns.map((col)=>{
+            const cell = col[rowIndex];
+            return {
+                value: typeof cell === 'string' ? cleanText(cell) : cell
+            };
+        }));
+    const styles = {
+        root: {
+            ...((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_font = _input_layout.font) === null || _input_layout_font === void 0 ? void 0 : _input_layout_font.size) ? {
+                fontSize: input.layout.font.size
+            } : {}
+        }
+    };
+    var _tableData_header_values;
+    return {
+        headers: normalizeHeaders((_tableData_header_values = (_tableData_header = tableData.header) === null || _tableData_header === void 0 ? void 0 : _tableData_header.values) !== null && _tableData_header_values !== void 0 ? _tableData_header_values : []).map((value)=>({
+                value
+            })),
+        rows,
+        width: (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.width,
+        height: (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.height,
+        styles
     };
 };
 const projectPolarToCartesian = (input)=>{
@@ -758,17 +837,23 @@ const projectPolarToCartesian = (input)=>{
     }
     return projection;
 };
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function isPlainObject(obj) {
     return Object.prototype.toString.call(obj) === '[object Object]' && Object.getPrototypeOf(obj).hasOwnProperty('hasOwnProperty');
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var arrayAttributes = [];
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var stack = [];
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var isArrayStack = [];
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var baseContainer, baseAttrName;
 function findArrayAttributes(trace) {
     // Init basecontainer and baseAttrName
     crawlIntoTrace(baseContainer, 0, '');
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function crawlIntoTrace(container, i, astrPartial) {
     var item = container[stack[i]];
     var newAstrPartial = astrPartial + stack[i];
@@ -820,7 +905,9 @@ function getLineOptions(line) {
     }
     return Object.keys(lineOptions).length > 0 ? lineOptions : undefined;
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const isStringArray = (arr)=>{
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return (0, _chartutilities.isArrayOfType)(arr, (value)=>typeof value === 'string');
 };
 // TODO: Use binary search to find the appropriate bin for numeric value.