@fluentui/react-charting 5.23.87 → 5.23.89

package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.d.ts

@@ -9,20 +9,22 @@ import { IHeatMapChartProps } from '../HeatMapChart/index';
 import { IGaugeChartProps } from '../GaugeChart/index';
 import { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index';
 import { IVerticalBarChartProps } from '../VerticalBarChart/index';
-import type { Datum, PlotlySchema, TypedArray, PieColors, Color } from '@fluentui/chart-utilities';
+import { IChartTableProps } from '../ChartTable/index';
+import type { Datum, PlotlySchema, TypedArray, Color } from '@fluentui/chart-utilities';
+import type { ColorwayType } from './PlotlyColorAdapter';
 export declare const isMonthArray: (data: Datum[] | Datum[][] | TypedArray) => boolean;
 export declare const correctYearMonth: (xValues: Datum[] | Datum[][] | TypedArray) => any[];
-export declare const getColor: (legendLabel: string, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string;
-export declare const getSchemaColors: (colors: PieColors | Color | null | undefined, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string[] | string | undefined;
-export declare const transformPlotlyJsonToDonutProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, useFluentVizColorPalette: boolean, isDarkTheme?: boolean) => IDonutChartProps;
-export declare const transformPlotlyJsonToVSBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean, fallbackVSBC?: boolean) => IVerticalStackedBarChartProps;
-export declare const transformPlotlyJsonToGVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IGroupedVerticalBarChartProps;
-export declare const transformPlotlyJsonToVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IVerticalBarChartProps;
-export declare const transformPlotlyJsonToScatterChartProps: (input: PlotlySchema, isAreaChart: boolean, colorMap: React.MutableRefObject<Map<string, string>>, useFluentVizColorPalette: boolean, isDarkTheme?: boolean) => ILineChartProps | IAreaChartProps;
-export declare const transformPlotlyJsonToHorizontalBarWithAxisProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IHorizontalBarChartWithAxisProps;
+export declare const _getGaugeAxisColor: (colorway: string[] | undefined, colorwayType: ColorwayType, color: Color | undefined, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string;
+export declare const transformPlotlyJsonToDonutProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IDonutChartProps;
+export declare const transformPlotlyJsonToVSBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean, fallbackVSBC?: boolean) => IVerticalStackedBarChartProps;
+export declare const transformPlotlyJsonToGVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IGroupedVerticalBarChartProps;
+export declare const transformPlotlyJsonToVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IVerticalBarChartProps;
+export declare const transformPlotlyJsonToScatterChartProps: (input: PlotlySchema, isAreaChart: boolean, isScatterMarkers: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ILineChartProps | IAreaChartProps;
+export declare const transformPlotlyJsonToHorizontalBarWithAxisProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IHorizontalBarChartWithAxisProps;
 export declare const transformPlotlyJsonToHeatmapProps: (input: PlotlySchema) => IHeatMapChartProps;
-export declare const transformPlotlyJsonToSankeyProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => ISankeyChartProps;
-export declare const transformPlotlyJsonToGaugeProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IGaugeChartProps;
+export declare const transformPlotlyJsonToSankeyProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ISankeyChartProps;
+export declare const transformPlotlyJsonToGaugeProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IGaugeChartProps;
+export declare const transformPlotlyJsonToChartTableProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IChartTableProps;
 export declare const projectPolarToCartesian: (input: PlotlySchema) => PlotlySchema;
 /**
  * Interate iteratively through the trace object and find all the array attributes.

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

@@ -1,7 +1,7 @@
-define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/colors", "../GaugeChart/index", "../../utilities/utilities", "@fluentui/chart-utilities", "d3-time-format", "d3-shape", "d3-color"], function (require, exports, tslib_1, d3_array_1, d3_scale_1, colors_1, index_1, utilities_1, chart_utilities_1, d3_time_format_1, d3_shape_1, d3_color_1) {
+define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/colors", "../GaugeChart/index", "../../utilities/utilities", "@fluentui/chart-utilities", "d3-time-format", "d3-shape", "./PlotlyColorAdapter"], function (require, exports, tslib_1, d3_array_1, d3_scale_1, colors_1, index_1, utilities_1, chart_utilities_1, d3_time_format_1, d3_shape_1, PlotlyColorAdapter_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.findArrayAttributes = exports.projectPolarToCartesian = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports.getSchemaColors = exports.getColor = exports.correctYearMonth = exports.isMonthArray = void 0;
+    exports.findArrayAttributes = exports.projectPolarToCartesian = exports.transformPlotlyJsonToChartTableProps = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports._getGaugeAxisColor = exports.correctYearMonth = exports.isMonthArray = void 0;
     var dashOptions = {
         dot: {
             strokeDasharray: '1, 5',
@@ -40,6 +40,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             lineBorderWidth: '4',
         },
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var isMonth = function (possiblyMonthValue) {
         var parseFullMonth = (0, d3_time_format_1.timeParse)('%B');
         var parseShortMonth = (0, d3_time_format_1.timeParse)('%b');
@@ -58,6 +59,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         };
         return titles;
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var correctYearMonth = function (xValues) {
         var presentYear = new Date().getFullYear();
         if (xValues.length > 0 && Array.isArray(xValues[0])) {
@@ -85,15 +87,6 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         return xValues;
     };
     exports.correctYearMonth = correctYearMonth;
-    var getColor = function (legendLabel, colorMap, isDarkTheme) {
-        if (!colorMap.current.has(legendLabel)) {
-            var nextColor = (0, colors_1.getNextColor)(colorMap.current.size + 1, 0, isDarkTheme);
-            colorMap.current.set(legendLabel, nextColor);
-            return nextColor;
-        }
-        return colorMap.current.get(legendLabel);
-    };
-    exports.getColor = getColor;
     var usesSecondaryYScale = function (series) {
         return series.yaxis === 'y2';
     };
@@ -137,51 +130,21 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             },
         };
     };
-    var getSchemaColors = function (colors, colorMap, isDarkTheme) {
-        var hexColors = [];
-        if (!colors) {
-            return undefined;
-        }
-        if ((0, chart_utilities_1.isArrayOrTypedArray)(colors)) {
-            colors.forEach(function (element, index) {
-                var colorString = element === null || element === void 0 ? void 0 : element.toString().trim();
-                var nextFluentColor = (0, exports.getColor)("Label_".concat(index), colorMap, isDarkTheme);
-                if (colorString) {
-                    var parsedColor = (0, d3_color_1.color)(colorString);
-                    hexColors.push(parsedColor ? parsedColor.formatHex() : nextFluentColor);
-                }
-                else {
-                    hexColors.push(nextFluentColor);
-                }
-            });
-        }
-        else if (typeof colors === 'string') {
-            var parsedColor = (0, d3_color_1.color)(colors);
-            return parsedColor ? parsedColor.formatHex() : (0, exports.getColor)('Label_0', colorMap, isDarkTheme);
-        }
-        return hexColors;
+    var _getGaugeAxisColor = function (colorway, colorwayType, color, colorMap, isDarkTheme) {
+        var extractedColors = (0, PlotlyColorAdapter_1.extractColor)(colorway, colorwayType, color, colorMap, isDarkTheme);
+        return (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, 0, '', colorMap, isDarkTheme);
     };
-    exports.getSchemaColors = getSchemaColors;
-    var transformPlotlyJsonToDonutProps = function (input, colorMap, useFluentVizColorPalette, isDarkTheme) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    exports._getGaugeAxisColor = _getGaugeAxisColor;
+    var transformPlotlyJsonToDonutProps = function (input, colorMap, colorwayType, isDarkTheme) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         var firstData = input.data[0];
-        var colors = undefined;
-        if (!useFluentVizColorPalette) {
-            colors = ((_a = firstData.marker) === null || _a === void 0 ? void 0 : _a.colors) ? (0, exports.getSchemaColors)((_b = firstData === null || firstData === void 0 ? void 0 : firstData.marker) === null || _b === void 0 ? void 0 : _b.colors, colorMap, isDarkTheme) : undefined;
-        }
+        // extract colors for each series only once
+        var colors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = firstData === null || firstData === void 0 ? void 0 : firstData.marker) === null || _d === void 0 ? void 0 : _d.colors, colorMap, isDarkTheme);
         var mapLegendToDataPoint = {};
-        (_c = firstData.labels) === null || _c === void 0 ? void 0 : _c.forEach(function (label, index) {
+        (_e = firstData.labels) === null || _e === void 0 ? void 0 : _e.forEach(function (label, index) {
             var _a;
-            var color = '';
-            if (colors && isStringArray(colors)) {
-                color = colors[index % colors.length];
-            }
-            else if (typeof colors === 'string') {
-                color = colors;
-            }
-            else {
-                color = (0, exports.getColor)(label, colorMap, isDarkTheme);
-            }
+            // resolve color for each legend from the extracted colors
+            var color = (0, PlotlyColorAdapter_1.resolveColor)(colors, index, label, colorMap, isDarkTheme);
             //ToDo how to handle string data?
             var value = typeof ((_a = firstData.values) === null || _a === void 0 ? void 0 : _a[index]) === 'number' ? firstData.values[index] : 1;
             if (!mapLegendToDataPoint[label]) {
@@ -195,8 +158,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
                 mapLegendToDataPoint[label].data += value;
             }
         });
-        var width = (_e = (_d = input.layout) === null || _d === void 0 ? void 0 : _d.width) !== null && _e !== void 0 ? _e : 440;
-        var height = (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : 220;
+        var width = (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.width) !== null && _g !== void 0 ? _g : 440;
+        var height = (_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.height) !== null && _j !== void 0 ? _j : 220;
         var hideLabels = firstData.textinfo
             ? !['value', 'percent', 'label+percent'].includes(firstData.textinfo)
             : false;
@@ -211,33 +174,39 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
                 chartTitle: chartTitle,
                 chartData: Object.values(mapLegendToDataPoint),
             },
-            hideLegend: ((_h = input.layout) === null || _h === void 0 ? void 0 : _h.showlegend) === false ? true : false,
-            width: (_j = input.layout) === null || _j === void 0 ? void 0 : _j.width,
+            hideLegend: ((_k = input.layout) === null || _k === void 0 ? void 0 : _k.showlegend) === false ? true : false,
+            width: (_l = input.layout) === null || _l === void 0 ? void 0 : _l.width,
             height: height,
             innerRadius: innerRadius,
             hideLabels: hideLabels,
             showLabelsInPercent: firstData.textinfo ? ['percent', 'label+percent'].includes(firstData.textinfo) : true,
+            roundCorners: true,
         };
     };
     exports.transformPlotlyJsonToDonutProps = transformPlotlyJsonToDonutProps;
-    var transformPlotlyJsonToVSBCProps = function (input, colorMap, isDarkTheme, fallbackVSBC) {
+    var transformPlotlyJsonToVSBCProps = function (input, colorMap, colorwayType, isDarkTheme, fallbackVSBC) {
         var _a, _b, _c;
         var mapXToDataPoints = {};
         var yMaxValue = 0;
         var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
         var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
         input.data.forEach(function (series, index1) {
-            var _a;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             var isXYearCategory = (0, chart_utilities_1.isYearArray)(series.x); // Consider year as categorical not numeric continuous axis
-            (_a = series.x) === null || _a === void 0 ? void 0 : _a.forEach(function (x, index2) {
+            // extract bar colors for each series only once
+            var extractedBarColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
+            // extract line colors for each series only once
+            var extractedLineColors = (0, PlotlyColorAdapter_1.extractColor)((_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, colorwayType, (_h = series.line) === null || _h === void 0 ? void 0 : _h.color, colorMap, isDarkTheme);
+            (_j = series.x) === null || _j === void 0 ? void 0 : _j.forEach(function (x, index2) {
                 var _a, _b, _c;
                 if (!mapXToDataPoints[x]) {
                     mapXToDataPoints[x] = { xAxisPoint: isXYearCategory ? x.toString() : x, chartData: [], lineData: [] };
                 }
                 var legend = legends[index1];
+                // resolve color for each legend's bars from the extracted colors
+                var color = (0, PlotlyColorAdapter_1.resolveColor)(extractedBarColors, index1, legend, colorMap, isDarkTheme);
                 var yVal = (_b = (_a = series.y) === null || _a === void 0 ? void 0 : _a[index2]) !== null && _b !== void 0 ? _b : 0;
                 if (series.type === 'bar') {
-                    var color = (0, exports.getColor)(legend, colorMap, isDarkTheme);
                     mapXToDataPoints[x].chartData.push({
                         legend: legend,
                         data: yVal,
@@ -246,11 +215,11 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
                     yMaxValue = Math.max(yMaxValue, yVal);
                 }
                 else if (series.type === 'scatter' || !!fallbackVSBC) {
-                    var color = (0, exports.getColor)(legend, colorMap, isDarkTheme);
+                    var lineColor = (0, PlotlyColorAdapter_1.resolveColor)(extractedLineColors, index1, legend, colorMap, isDarkTheme);
                     var lineOptions = getLineOptions(series.line);
                     var dashType = ((_c = series.line) === null || _c === void 0 ? void 0 : _c.dash) || 'solid';
                     var legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
-                    mapXToDataPoints[x].lineData.push(tslib_1.__assign(tslib_1.__assign({ legend: legend, legendShape: legendShape, y: yVal, color: color }, (lineOptions ? { lineOptions: lineOptions } : {})), { useSecondaryYScale: usesSecondaryYScale(series) }));
+                    mapXToDataPoints[x].lineData.push(tslib_1.__assign(tslib_1.__assign({ legend: legend, legendShape: legendShape, y: yVal, color: lineColor }, (lineOptions ? { lineOptions: lineOptions } : {})), { useSecondaryYScale: usesSecondaryYScale(series) }));
                     if (!usesSecondaryYScale(series)) {
                         yMaxValue = Math.max(yMaxValue, yVal);
                     }
@@ -258,24 +227,27 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             });
         });
         var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
-        return tslib_1.__assign(tslib_1.__assign({ data: Object.values(mapXToDataPoints), width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barWidth: 'auto', yMaxValue: yMaxValue, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend });
+        return tslib_1.__assign(tslib_1.__assign({ data: Object.values(mapXToDataPoints), width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barWidth: 'auto', yMaxValue: yMaxValue, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true });
     };
     exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
-    var transformPlotlyJsonToGVBCProps = function (input, colorMap, isDarkTheme) {
+    var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c;
         var mapXToDataPoints = {};
         var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
         var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
         input.data.forEach(function (series, index1) {
-            var _a;
-            (_a = series.x) === null || _a === void 0 ? void 0 : _a.forEach(function (x, xIndex) {
+            var _a, _b, _c, _d, _e;
+            // extract colors for each series only once
+            var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
+            (_e = series.x) === null || _e === void 0 ? void 0 : _e.forEach(function (x, xIndex) {
                 var _a, _b;
                 if (!mapXToDataPoints[x]) {
                     mapXToDataPoints[x] = { name: x.toString(), series: [] };
                 }
                 if (series.type === 'bar') {
                     var legend = legends[index1];
-                    var color = (0, exports.getColor)(legend, colorMap, isDarkTheme);
+                    // resolve color for each legend's bars from the extracted colors
+                    var color = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index1, legend, colorMap, isDarkTheme);
                     mapXToDataPoints[x].series.push({
                         key: legend,
                         data: (_b = (_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex]) !== null && _b !== void 0 ? _b : 0,
@@ -288,22 +260,24 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             });
         });
         var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
-        return tslib_1.__assign(tslib_1.__assign({ data: Object.values(mapXToDataPoints), width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barwidth: 'auto', chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend });
+        return tslib_1.__assign(tslib_1.__assign({ data: Object.values(mapXToDataPoints), width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barwidth: 'auto', chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true });
     };
     exports.transformPlotlyJsonToGVBCProps = transformPlotlyJsonToGVBCProps;
-    var transformPlotlyJsonToVBCProps = function (input, colorMap, isDarkTheme) {
+    var transformPlotlyJsonToVBCProps = function (input, colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c;
         var vbcData = [];
         var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
         input.data.forEach(function (series, seriesIdx) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e, _f, _g;
             if (!series.x) {
                 return;
             }
+            // extract colors for each series only once
+            var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
             var isXString = isStringArray(series.x);
             // TODO: In case of a single bin, add an empty bin of the same size to prevent the
             // default bar width from being used and ensure the bar spans the full intended range.
-            var xBins = createBins(series.x, (_a = series.xbins) === null || _a === void 0 ? void 0 : _a.start, (_b = series.xbins) === null || _b === void 0 ? void 0 : _b.end, (_c = series.xbins) === null || _c === void 0 ? void 0 : _c.size);
+            var xBins = createBins(series.x, (_e = series.xbins) === null || _e === void 0 ? void 0 : _e.start, (_f = series.xbins) === null || _f === void 0 ? void 0 : _f.end, (_g = series.xbins) === null || _g === void 0 ? void 0 : _g.size);
             var yBins = xBins.map(function () { return []; });
             var total = 0;
             series.x.forEach(function (xVal, index) {
@@ -320,7 +294,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             });
             xBins.forEach(function (bin, index) {
                 var legend = legends[seriesIdx];
-                var color = (0, exports.getColor)(legend, colorMap, isDarkTheme);
+                // resolve color for each legend's bars from the extracted colors
+                var color = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, seriesIdx, legend, colorMap, isDarkTheme);
                 var yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
                 vbcData.push(tslib_1.__assign({ x: isXString ? bin.join(', ') : getBinCenter(bin), y: yVal, legend: legend, color: color }, (isXString
                     ? {}
@@ -340,27 +315,29 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             hideTickOverlap: true,
             maxBarWidth: 50,
             hideLegend: hideLegend,
+            roundCorners: true,
         };
     };
     exports.transformPlotlyJsonToVBCProps = transformPlotlyJsonToVBCProps;
-    var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart, colorMap, useFluentVizColorPalette, isDarkTheme) {
+    var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart, isScatterMarkers, colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c, _d, _e, _f;
         var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, isAreaChart ? 0 : undefined, isAreaChart ? 0 : undefined);
         var mode = 'tonexty';
         var _g = getLegendProps(input.data, input.layout), legends = _g.legends, hideLegend = _g.hideLegend;
         var chartData = input.data.map(function (series, index) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e, _f;
+            // extract colors for each series only once
+            var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, isScatterMarkers ? (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color : (_e = series.line) === null || _e === void 0 ? void 0 : _e.color, colorMap, isDarkTheme);
             var xValues = series.x;
             var isString = typeof xValues[0] === 'string';
             var isXDate = (0, chart_utilities_1.isDateArray)(xValues);
             var isXNumber = (0, chart_utilities_1.isNumberArray)(xValues);
             var legend = legends[index];
-            var lineColor = !useFluentVizColorPalette && ((_a = series.line) === null || _a === void 0 ? void 0 : _a.color)
-                ? (0, exports.getSchemaColors)((_b = series.line) === null || _b === void 0 ? void 0 : _b.color, colorMap, isDarkTheme)
-                : (0, exports.getColor)(legend, colorMap, isDarkTheme);
+            // resolve color for each legend's lines from the extracted colors
+            var seriesColor = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
             mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
             var lineOptions = getLineOptions(series.line);
-            var dashType = ((_c = series.line) === null || _c === void 0 ? void 0 : _c.dash) || 'solid';
+            var dashType = ((_f = series.line) === null || _f === void 0 ? void 0 : _f.dash) || 'solid';
             var legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
             return tslib_1.__assign(tslib_1.__assign({ legend: legend, legendShape: legendShape, data: xValues.map(function (x, i) {
                     var _a, _b;
@@ -369,7 +346,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
                         : typeof ((_b = series.marker) === null || _b === void 0 ? void 0 : _b.size) === 'number'
                             ? { markerSize: series.marker.size }
                             : {})));
-                }), color: lineColor }, (lineOptions ? { lineOptions: lineOptions } : {})), { useSecondaryYScale: usesSecondaryYScale(series) });
+                }), color: seriesColor }, (lineOptions ? { lineOptions: lineOptions } : {})), { useSecondaryYScale: usesSecondaryYScale(series) });
         });
         var yMinMaxValues = (0, utilities_1.findNumericMinMaxOfY)(chartData);
         var _h = getTitles(input.layout), chartTitle = _h.chartTitle, xAxisTitle = _h.xAxisTitle, yAxisTitle = _h.yAxisTitle;
@@ -385,13 +362,17 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         }
     };
     exports.transformPlotlyJsonToScatterChartProps = transformPlotlyJsonToScatterChartProps;
-    var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, colorMap, isDarkTheme) {
+    var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         var _s = getLegendProps(input.data, input.layout), legends = _s.legends, hideLegend = _s.hideLegend;
         var chartData = input.data
             .map(function (series, index) {
+            var _a, _b, _c, _d;
+            // extract colors for each series only once
+            var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
             var legend = legends[index];
-            var color = (0, exports.getColor)(legend, colorMap, isDarkTheme);
+            // resolve color for each legend's bars from the extracted colors
+            var color = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
             return series.y.map(function (yValue, i) {
                 return {
                     x: series.x[i],
@@ -433,6 +414,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             hideLegend: hideLegend,
             noOfCharsToTruncate: 20,
             showYAxisLablesTooltip: true,
+            roundCorners: true,
         };
     };
     exports.transformPlotlyJsonToHorizontalBarWithAxisProps = transformPlotlyJsonToHorizontalBarWithAxisProps;
@@ -483,6 +465,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         else {
             (_h = firstData.x) === null || _h === void 0 ? void 0 : _h.forEach(function (xVal, xIdx) {
                 var _a;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 (_a = firstData.y) === null || _a === void 0 ? void 0 : _a.forEach(function (yVal, yIdx) {
                     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];
@@ -536,33 +519,34 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         };
     };
     exports.transformPlotlyJsonToHeatmapProps = transformPlotlyJsonToHeatmapProps;
-    var transformPlotlyJsonToSankeyProps = function (input, colorMap, isDarkTheme) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        var _j = input.data[0], link = _j.link, node = _j.node;
+    var transformPlotlyJsonToSankeyProps = function (input, colorMap, colorwayType, isDarkTheme) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var _m = input.data[0], link = _m.link, node = _m.node;
         var validLinks = ((_a = link === null || link === void 0 ? void 0 : link.value) !== null && _a !== void 0 ? _a : [])
             .map(function (val, index) { return ({
             value: val,
             source: link === null || link === void 0 ? void 0 : link.source[index],
             target: link === null || link === void 0 ? void 0 : link.target[index],
         }); })
-            // eslint-disable-next-line @typescript-eslint/no-shadow
             // 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 extractedNodeColors = (0, PlotlyColorAdapter_1.extractColor)((_d = (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.template) === null || _c === void 0 ? void 0 : _c.layout) === null || _d === void 0 ? void 0 : _d.colorway, colorwayType, node === null || node === void 0 ? void 0 : node.color, colorMap, isDarkTheme);
         var sankeyChartData = {
-            nodes: (_b = node.label) === null || _b === void 0 ? void 0 : _b.map(function (label, index) {
-                var color = (0, exports.getColor)(label, colorMap, isDarkTheme);
+            nodes: (_e = node.label) === null || _e === void 0 ? void 0 : _e.map(function (label, index) {
+                var color = (0, PlotlyColorAdapter_1.resolveColor)(extractedNodeColors, index, label, colorMap, isDarkTheme);
                 return {
                     nodeId: index,
                     name: label,
                     color: color,
                 };
             }),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             links: validLinks.map(function (validLink, index) {
                 return tslib_1.__assign({}, validLink);
             }),
         };
         var styles = {
-            root: tslib_1.__assign({}, (((_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.font) === null || _d === void 0 ? void 0 : _d.size) ? { fontSize: (_e = input.layout.font) === null || _e === void 0 ? void 0 : _e.size } : {})),
+            root: tslib_1.__assign({}, (((_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.font) === null || _g === void 0 ? void 0 : _g.size) ? { fontSize: (_h = input.layout.font) === null || _h === void 0 ? void 0 : _h.size } : {})),
         };
         var chartTitle = getTitles(input.layout).chartTitle;
         return {
@@ -570,51 +554,56 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
                 chartTitle: chartTitle,
                 SankeyChartData: sankeyChartData,
             },
-            width: (_f = input.layout) === null || _f === void 0 ? void 0 : _f.width,
-            height: (_h = (_g = input.layout) === null || _g === void 0 ? void 0 : _g.height) !== null && _h !== void 0 ? _h : 468,
+            width: (_j = input.layout) === null || _j === void 0 ? void 0 : _j.width,
+            height: (_l = (_k = input.layout) === null || _k === void 0 ? void 0 : _k.height) !== null && _l !== void 0 ? _l : 468,
             styles: styles,
             enableReflow: true,
         };
     };
     exports.transformPlotlyJsonToSankeyProps = transformPlotlyJsonToSankeyProps;
-    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;
+    var transformPlotlyJsonToGaugeProps = function (input, colorMap, colorwayType, 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, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25;
         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;
-                var legend = step.name || "Segment ".concat(index + 1);
-                var color = (0, exports.getColor)(legend, colorMap, isDarkTheme);
-                return {
-                    legend: legend,
-                    size: ((_a = step.range) === null || _a === void 0 ? void 0 : _a[1]) - ((_b = step.range) === null || _b === void 0 ? void 0 : _b[0]),
-                    color: color,
-                };
-            })
+        var stepsColors = ((_a = firstData.gauge) === null || _a === void 0 ? void 0 : _a.steps) ? firstData.gauge.steps.map(function (step) { return step.color; }) : undefined;
+        var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_d = (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.template) === null || _c === void 0 ? void 0 : _c.layout) === null || _d === void 0 ? void 0 : _d.colorway, colorwayType, stepsColors, colorMap, isDarkTheme);
+        var segments = ((_f = (_e = firstData.gauge) === null || _e === void 0 ? void 0 : _e.steps) === null || _f === void 0 ? void 0 : _f.length)
+            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                firstData.gauge.steps.map(function (step, index) {
+                    var _a, _b;
+                    var legend = step.name || "Segment ".concat(index + 1);
+                    var color = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
+                    return {
+                        legend: legend,
+                        size: ((_a = step.range) === null || _a === void 0 ? void 0 : _a[1]) - ((_b = step.range) === null || _b === void 0 ? void 0 : _b[0]),
+                        color: color,
+                    };
+                })
             : [
                 {
                     legend: 'Current',
-                    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),
+                    size: (_g = firstData.value) !== null && _g !== void 0 ? _g : 0 - ((_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[0]) !== null && _l !== void 0 ? _l : 0),
+                    color: (0, exports._getGaugeAxisColor)((_p = (_o = (_m = input.layout) === null || _m === void 0 ? void 0 : _m.template) === null || _o === void 0 ? void 0 : _o.layout) === null || _p === void 0 ? void 0 : _p.colorway, colorwayType, (_r = (_q = firstData.gauge) === null || _q === void 0 ? void 0 : _q.axis) === null || _r === void 0 ? void 0 : _r.color, colorMap, isDarkTheme),
                 },
                 {
                     legend: 'Target',
-                    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),
+                    size: ((_v = (_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[1]) !== null && _v !== void 0 ? _v : 100) - ((_w = firstData.value) !== null && _w !== void 0 ? _w : 0),
                     color: colors_1.DataVizPalette.disabled,
                 },
             ];
         var sublabel;
         var sublabelColor;
-        if ((_o = firstData.delta) === null || _o === void 0 ? void 0 : _o.reference) {
+        if ((_x = firstData.delta) === null || _x === void 0 ? void 0 : _x.reference) {
             var diff = firstData.value - firstData.delta.reference;
             if (diff >= 0) {
                 sublabel = "\u25B2 ".concat(diff);
-                var color = (0, colors_1.getColorFromToken)(colors_1.DataVizPalette.success, isDarkTheme);
+                var extractedIncreasingDeltaColors = (0, PlotlyColorAdapter_1.extractColor)((_0 = (_z = (_y = input.layout) === null || _y === void 0 ? void 0 : _y.template) === null || _z === void 0 ? void 0 : _z.layout) === null || _0 === void 0 ? void 0 : _0.colorway, colorwayType, (_2 = (_1 = firstData.delta) === null || _1 === void 0 ? void 0 : _1.increasing) === null || _2 === void 0 ? void 0 : _2.color, colorMap, isDarkTheme);
+                var color = (0, PlotlyColorAdapter_1.resolveColor)(extractedIncreasingDeltaColors, 0, '', colorMap, isDarkTheme);
                 sublabelColor = color;
             }
             else {
                 sublabel = "\u25BC ".concat(Math.abs(diff));
-                var color = (0, colors_1.getColorFromToken)(colors_1.DataVizPalette.error, isDarkTheme);
+                var extractedDecreasingDeltaColors = (0, PlotlyColorAdapter_1.extractColor)((_5 = (_4 = (_3 = input.layout) === null || _3 === void 0 ? void 0 : _3.template) === null || _4 === void 0 ? void 0 : _4.layout) === null || _5 === void 0 ? void 0 : _5.colorway, colorwayType, (_7 = (_6 = firstData.delta) === null || _6 === void 0 ? void 0 : _6.decreasing) === null || _7 === void 0 ? void 0 : _7.color, colorMap, isDarkTheme);
+                var color = (0, PlotlyColorAdapter_1.resolveColor)(extractedDecreasingDeltaColors, 0, '', colorMap, isDarkTheme);
                 sublabelColor = color;
             }
         }
@@ -626,20 +615,64 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         var chartTitle = getTitles(input.layout).chartTitle;
         return {
             segments: segments,
-            chartValue: (_p = firstData.value) !== null && _p !== void 0 ? _p : 0,
+            chartValue: (_8 = firstData.value) !== null && _8 !== void 0 ? _8 : 0,
             chartTitle: chartTitle,
             sublabel: sublabel,
             // range values can be null
-            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,
+            minValue: typeof ((_11 = (_10 = (_9 = firstData.gauge) === null || _9 === void 0 ? void 0 : _9.axis) === null || _10 === void 0 ? void 0 : _10.range) === null || _11 === void 0 ? void 0 : _11[0]) === 'number' ? (_14 = (_13 = (_12 = firstData.gauge) === null || _12 === void 0 ? void 0 : _12.axis) === null || _13 === void 0 ? void 0 : _13.range) === null || _14 === void 0 ? void 0 : _14[0] : undefined,
+            maxValue: typeof ((_17 = (_16 = (_15 = firstData.gauge) === null || _15 === void 0 ? void 0 : _15.axis) === null || _16 === void 0 ? void 0 : _16.range) === null || _17 === void 0 ? void 0 : _17[1]) === 'number' ? (_20 = (_19 = (_18 = firstData.gauge) === null || _18 === void 0 ? void 0 : _18.axis) === null || _19 === void 0 ? void 0 : _19.range) === null || _20 === void 0 ? void 0 : _20[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: (_2 = input.layout) === null || _2 === void 0 ? void 0 : _2.width,
-            height: (_4 = (_3 = input.layout) === null || _3 === void 0 ? void 0 : _3.height) !== null && _4 !== void 0 ? _4 : 220,
+            width: (_21 = input.layout) === null || _21 === void 0 ? void 0 : _21.width,
+            height: (_23 = (_22 = input.layout) === null || _22 === void 0 ? void 0 : _22.height) !== null && _23 !== void 0 ? _23 : 220,
             styles: styles,
-            variant: ((_6 = (_5 = firstData.gauge) === null || _5 === void 0 ? void 0 : _5.steps) === null || _6 === void 0 ? void 0 : _6.length) ? index_1.GaugeChartVariant.MultipleSegments : index_1.GaugeChartVariant.SingleSegment,
+            variant: ((_25 = (_24 = firstData.gauge) === null || _24 === void 0 ? void 0 : _24.steps) === null || _25 === void 0 ? void 0 : _25.length) ? index_1.GaugeChartVariant.MultipleSegments : index_1.GaugeChartVariant.SingleSegment,
+            roundCorners: true,
         };
     };
     exports.transformPlotlyJsonToGaugeProps = transformPlotlyJsonToGaugeProps;
+    var cleanText = function (text) {
+        return text
+            .replace(/<[^&]*?>/g, '')
+            .replace(/<[^>]*>/g, '')
+            .replace(/&lt;br&gt;|\\u003cbr\\u003e|<br>/gi, '')
+            .replace(/\$[^$]*\$/g, '$')
+            .trim();
+    };
+    var transformPlotlyJsonToChartTableProps = function (input, colorMap, isDarkTheme) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var tableData = input.data[0];
+        var normalizeHeaders = function (values) {
+            // Case: values is array of arrays
+            if (Array.isArray(values[0])) {
+                return values.map(function (row) {
+                    return row
+                        .map(function (cell) { return cleanText(cell); })
+                        .filter(Boolean)
+                        .join(' ');
+                });
+            }
+            // Case: values is 1d array
+            return values.map(function (cell) { return cleanText(cell); });
+        };
+        var columns = (_b = (_a = tableData.cells) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : [];
+        var rows = columns[0].map(function (_, rowIndex) {
+            return columns.map(function (col) {
+                var cell = col[rowIndex];
+                return typeof cell === 'string' ? cleanText(cell) : cell;
+            });
+        });
+        var styles = {
+            root: tslib_1.__assign({}, (((_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.font) === null || _d === void 0 ? void 0 : _d.size) ? { fontSize: input.layout.font.size } : {})),
+        };
+        return {
+            headers: normalizeHeaders((_f = (_e = tableData.header) === null || _e === void 0 ? void 0 : _e.values) !== null && _f !== void 0 ? _f : []),
+            rows: rows,
+            width: (_g = input.layout) === null || _g === void 0 ? void 0 : _g.width,
+            height: (_h = input.layout) === null || _h === void 0 ? void 0 : _h.height,
+            styles: styles,
+        };
+    };
+    exports.transformPlotlyJsonToChartTableProps = transformPlotlyJsonToChartTableProps;
     var projectPolarToCartesian = function (input) {
         var projection = tslib_1.__assign({}, input);
         for (var sindex = 0; sindex < input.data.length; sindex++) {
@@ -657,6 +690,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         return projection;
     };
     exports.projectPolarToCartesian = projectPolarToCartesian;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function isPlainObject(obj) {
         if (window && window.process && window.process.versions) {
             return Object.prototype.toString.call(obj) === '[object Object]';
@@ -664,20 +698,26 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         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
      */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function findArrayAttributes(trace) {
         // Init basecontainer and baseAttrName
         crawlIntoTrace(baseContainer, 0, '');
     }
     exports.findArrayAttributes = findArrayAttributes;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function crawlIntoTrace(container, i, astrPartial) {
         var item = container[stack[i]];
         var newAstrPartial = astrPartial + stack[i];
@@ -728,7 +768,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         }
         return Object.keys(lineOptions).length > 0 ? lineOptions : undefined;
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var isStringArray = function (arr) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return (0, chart_utilities_1.isArrayOfType)(arr, function (value) { return typeof value === 'string'; });
     };
     // TODO: Use binary search to find the appropriate bin for numeric value.