@fluentui/react-charts 9.2.1 → 9.2.2

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -1,10 +1,11 @@
-/* eslint-disable one-var */ /* eslint-disable vars-on-top */ /* eslint-disable no-var */ /* eslint-disable @typescript-eslint/no-explicit-any */ import * as React from 'react';
+/* eslint-disable one-var */ /* eslint-disable vars-on-top */ /* eslint-disable no-var */ import * as React from 'react';
 import { bin as d3Bin, extent as d3Extent, sum as d3Sum, min as d3Min, max as d3Max, range as d3Range } from 'd3-array';
 import { scaleLinear as d3ScaleLinear } from 'd3-scale';
-import { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';
+import { DataVizPalette, getColorFromToken } from '../../utilities/colors';
 import { findNumericMinMaxOfY } from '../../utilities/utilities';
 import { isArrayOfType, isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isYearArray } from '@fluentui/chart-utilities';
 import { curveCardinal as d3CurveCardinal } from 'd3-shape';
+import { extractColor, resolveColor } from './PlotlyColorAdapter';
 const dashOptions = {
     dot: {
         strokeDasharray: '1, 5',
@@ -53,6 +54,7 @@ function getTitles(layout) {
     };
     return titles;
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const correctYearMonth = (xValues)=>{
     const presentYear = new Date().getFullYear();
     if (xValues.length > 0 && Array.isArray(xValues[0])) {
@@ -78,14 +80,6 @@ export const correctYearMonth = (xValues)=>{
     });
     return xValues;
 };
-export const getColor = (legendLabel, colorMap, isDarkTheme)=>{
-    if (!colorMap.current.has(legendLabel)) {
-        const nextColor = 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';
 };
@@ -125,13 +119,20 @@ const getSecondaryYAxisValues = (data, layout, maxAllowedMinY, minAllowedMaxY)=>
         }
     };
 };
-export const transformPlotlyJsonToDonutProps = (input, colorMap, isDarkTheme)=>{
-    var _firstData_labels, _input_layout, _input_layout1, _input_layout2, _input_layout3;
+export const _getGaugeAxisColor = (colorway, colorwayType, color, colorMap, isDarkTheme)=>{
+    const extractedColors = extractColor(colorway, colorwayType, color, colorMap, isDarkTheme);
+    return resolveColor(extractedColors, 0, '', colorMap, isDarkTheme);
+};
+export 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 = 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 = 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]) {
@@ -145,9 +146,9 @@ export 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',
@@ -162,27 +163,32 @@ export 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
     };
 };
-export const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fallbackVSBC)=>{
-    var _input_layout, _input_layout1;
+export 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 = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
+        // extract bar colors for each series only once
+        const extractedBarColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
+        // extract line colors for each series only once
+        const extractedLineColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template1 = _input_layout1.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, colorwayType, (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
         (_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x.forEach((x, index2)=>{
             var _series_y;
             if (!mapXToDataPoints[x]) {
@@ -193,10 +199,11 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fal
                 };
             }
             const legend = legends[index1];
+            // resolve color for each legend's bars from the extracted colors
+            const color = 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,
@@ -205,7 +212,7 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fal
                 yMaxValue = Math.max(yMaxValue, yVal);
             } else if (series.type === 'scatter' || !!fallbackVSBC) {
                 var _series_line;
-                const color = getColor(legend, colorMap, isDarkTheme);
+                const lineColor = 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';
@@ -213,7 +220,7 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fal
                     legend,
                     legendShape,
                     y: yVal,
-                    color,
+                    color: lineColor,
                     ...lineOptions ? {
                         lineOptions
                     } : {},
@@ -228,9 +235,10 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fal
         });
     });
     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',
@@ -241,18 +249,22 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fal
         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
     };
 };
-export const transformPlotlyJsonToGVBCProps = (input, colorMap, isDarkTheme)=>{
-    var _input_layout, _input_layout1;
+export 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 = 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] = {
@@ -263,7 +275,8 @@ export 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 = resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
                 var _series_y_index2;
                 mapXToDataPoints[x].series.push({
                     key: legend,
@@ -277,9 +290,10 @@ export 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',
@@ -289,18 +303,22 @@ export 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
     };
 };
-export const transformPlotlyJsonToVBCProps = (input, colorMap, isDarkTheme)=>{
-    var _input_layout, _input_layout1;
+export 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 = 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.
@@ -322,7 +340,8 @@ export 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 = 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),
@@ -346,25 +365,30 @@ export 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
     };
 };
-export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, colorMap, isDarkTheme)=>{
+export 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 = 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 = isDateArray(xValues);
         const isXNumber = 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 = 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,
@@ -381,7 +405,7 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, color
                     } : {}
                 };
             }),
-            color: lineColor,
+            color: seriesColor,
             ...lineOptions ? {
                 lineOptions
             } : {},
@@ -430,12 +454,16 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, color
         };
     }
 };
-export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, isDarkTheme)=>{
+export 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 = 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 = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
         return series.y.map((yValue, i)=>{
             return {
                 x: series.x[i],
@@ -471,7 +499,8 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap,
         hideTickOverlap: true,
         noOfCharsToTruncate: 20,
         showYAxisLablesTooltip: true,
-        hideLegend
+        hideLegend,
+        roundCorners: true
     };
 };
 export const transformPlotlyJsonToHeatmapProps = (input)=>{
@@ -523,7 +552,8 @@ export const transformPlotlyJsonToHeatmapProps = (input)=>{
     } else {
         var _firstData_x1;
         (_firstData_x1 = firstData.x) === null || _firstData_x1 === void 0 ? void 0 : _firstData_x1.forEach((xVal, xIdx)=>{
-            var _firstData_y;
+            var // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            _firstData_y;
             (_firstData_y = firstData.y) === null || _firstData_y === void 0 ? void 0 : _firstData_y.forEach((yVal, yIdx)=>{
                 var _firstData_z_yIdx, _firstData_z, _input_layout_xaxis, _input_layout, _input_layout_yaxis, _input_layout1;
                 const zVal = (_firstData_z = firstData.z) === null || _firstData_z === void 0 ? void 0 : (_firstData_z_yIdx = _firstData_z[yIdx]) === null || _firstData_z_yIdx === void 0 ? void 0 : _firstData_z_yIdx[xIdx];
@@ -577,29 +607,31 @@ export 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
     };
 };
-export const transformPlotlyJsonToSankeyProps = (input, colorMap, isDarkTheme)=>{
-    var _node_label, _input_layout, _input_layout1;
+export 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 = 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 = 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
@@ -618,18 +650,20 @@ export 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
     };
 };
-export 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;
+export 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 = 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 = 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]),
@@ -638,34 +672,36 @@ export 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: 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 = 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 = 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 = 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 = 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 {
@@ -674,18 +710,60 @@ export 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();
+};
+export 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
     };
 };
 export const projectPolarToCartesian = (input)=>{
@@ -706,21 +784,28 @@ export 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;
 /**
  * Interate iteratively through the trace object and find all the array attributes.
  * 1 trace record = 1 series of data
  * @param trace
- */ export function findArrayAttributes(trace) {
+ */ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+export 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];
@@ -772,7 +857,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 isArrayOfType(arr, (value)=>typeof value === 'string');
 };
 // TODO: Use binary search to find the appropriate bin for numeric value.