@fluentui/react-charts 9.0.1 → 9.0.3

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -1,19 +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';
-import { bin as d3Bin, extent as d3Extent, sum as d3Sum, min as d3Min, max as d3Max, merge as d3Merge } from 'd3-array';
+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 { format as d3Format, precisionFixed as d3PrecisionFixed } from 'd3-format';
-import { getNextColor } from '../../utilities/colors';
+import { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';
 import { findNumericMinMaxOfY } from '../../utilities/utilities';
+import { isArrayOfType, isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isLineData } from '@fluentui/chart-utilities';
 import { timeParse } from 'd3-time-format';
-const SUPPORTED_PLOT_TYPES = [
-    'pie',
-    'bar',
-    'scatter',
-    'heatmap',
-    'sankey',
-    'indicator',
-    'histogram'
-];
+import { curveCardinal as d3CurveCardinal } from 'd3-shape';
 const dashOptions = {
     dot: {
         strokeDasharray: '1, 5',
@@ -52,60 +44,14 @@ const dashOptions = {
         lineBorderWidth: '4'
     }
 };
-const isDate = (value)=>{
-    const parsedDate = new Date(Date.parse(value));
-    if (isNaN(parsedDate.getTime())) {
-        return false;
-    }
-    const parsedYear = parsedDate.getFullYear();
-    const yearInString = /\b\d{4}\b/.test(value);
-    if (!yearInString && (parsedYear === 2000 || parsedYear === 2001)) {
-        return false;
-    }
-    return true;
-};
-const isNumber = (value)=>!isNaN(parseFloat(value)) && isFinite(value);
 const isMonth = (possiblyMonthValue)=>{
     const parseFullMonth = timeParse('%B');
     const parseShortMonth = timeParse('%b');
     return parseFullMonth(possiblyMonthValue) !== null || parseShortMonth(possiblyMonthValue) !== null;
 };
-const isArrayOfType = (plotCoordinates, typeCheck, ...args)=>{
-    if (!isArrayOrTypedArray(plotCoordinates)) {
-        return false;
-    }
-    if (plotCoordinates.length === 0) {
-        return false;
-    }
-    if (Array.isArray(plotCoordinates[0])) {
-        // Handle 2D array
-        return plotCoordinates.every((innerArray)=>innerArray.every((datum)=>typeCheck(datum, ...args)));
-    } else {
-        // Handle 1D array
-        return plotCoordinates.every((datum)=>typeCheck(datum, ...args));
-    }
-};
-export const isDateArray = (data)=>{
-    return isArrayOfType(data, isDate);
-};
-export const isNumberArray = (data)=>{
-    return isArrayOfType(data, isNumber);
-};
 export const isMonthArray = (data)=>{
     return isArrayOfType(data, isMonth);
 };
-export const isLineData = (data)=>{
-    return !SUPPORTED_PLOT_TYPES.includes(`${data.type}`) && Array.isArray(data.x) && isArrayOfType(data.y, (value)=>typeof value === 'number') && data.x.length > 0 && data.x.length === data.y.length;
-};
-const invalidate2Dseries = (series, chartType)=>{
-    var _series_x, _series_y;
-    if (((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x.length) > 0 && Array.isArray(series.x[0])) {
-        throw new Error(`transform to ${chartType}:: 2D x array not supported`);
-    }
-    if (((_series_y = series.y) === null || _series_y === void 0 ? void 0 : _series_y.length) > 0 && Array.isArray(series.y[0])) {
-        throw new Error(`transform to ${chartType}:: 2D y array not supported`);
-    }
-};
 const getLegend = (series, index)=>{
     return series.name || `Series ${index + 1}`;
 };
@@ -119,7 +65,7 @@ function getTitles(layout) {
     };
     return titles;
 }
-export const updateXValues = (xValues)=>{
+export const correctYearMonth = (xValues)=>{
     const presentYear = new Date().getFullYear();
     if (xValues.length > 0 && Array.isArray(xValues[0])) {
         throw new Error('updateXValues:: 2D array not supported');
@@ -177,16 +123,23 @@ const getSecondaryYAxisValues = (series, layout)=>{
     return secondaryYAxisValues;
 };
 export const transformPlotlyJsonToDonutProps = (input, colorMap, isDarkTheme)=>{
-    var _firstData_labels, _input_layout, _input_layout1, _input_layout2;
+    var _firstData_labels, _input_layout, _input_layout1, _input_layout2, _input_layout3;
     const firstData = input.data[0];
-    const donutData = (_firstData_labels = firstData.labels) === null || _firstData_labels === void 0 ? void 0 : _firstData_labels.map((label, index)=>{
+    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);
-        return {
-            legend: label,
-            data: (_firstData_values = firstData.values) === null || _firstData_values === void 0 ? void 0 : _firstData_values[index],
-            color
-        };
+        //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]) {
+            mapLegendToDataPoint[label] = {
+                legend: label,
+                data: value,
+                color
+            };
+        } else {
+            mapLegendToDataPoint[label].data += value;
+        }
     });
     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;
@@ -204,10 +157,10 @@ export const transformPlotlyJsonToDonutProps = (input, colorMap, isDarkTheme)=>{
     return {
         data: {
             chartTitle,
-            chartData: donutData
+            chartData: Object.values(mapLegendToDataPoint)
         },
         hideLegend: ((_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.showlegend) === false ? true : false,
-        width,
+        width: (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.width,
         height,
         innerRadius,
         hideLabels,
@@ -217,87 +170,167 @@ export const transformPlotlyJsonToDonutProps = (input, colorMap, isDarkTheme)=>{
         ].includes(firstData.textinfo) : true
     };
 };
+export const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fallbackVSBC)=>{
+    var _input_layout, _input_layout1;
+    const mapXToDataPoints = {};
+    let yMaxValue = 0;
+    let secondaryYAxisValues = {};
+    input.data.forEach((series, index1)=>{
+        var _series_x;
+        (_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x.forEach((x, index2)=>{
+            var _series_y;
+            if (!mapXToDataPoints[x]) {
+                mapXToDataPoints[x] = {
+                    xAxisPoint: x,
+                    chartData: [],
+                    lineData: []
+                };
+            }
+            const legend = getLegend(series, index1);
+            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,
+                    color
+                });
+            } else if (series.type === 'scatter' || isLineData(series) || !!fallbackVSBC) {
+                const color = getColor(legend, colorMap, isDarkTheme);
+                const lineOptions = getLineOptions(series.line);
+                mapXToDataPoints[x].lineData.push({
+                    legend,
+                    y: yVal,
+                    color,
+                    ...lineOptions ? {
+                        lineOptions
+                    } : {}
+                });
+            }
+            yMaxValue = Math.max(yMaxValue, yVal);
+        });
+        secondaryYAxisValues = getSecondaryYAxisValues(series, input.layout);
+    });
+    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
+    var _input_layout_height;
+    return {
+        data: Object.values(mapXToDataPoints),
+        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',
+        yMaxValue,
+        chartTitle,
+        xAxisTitle,
+        yAxisTitle,
+        mode: 'plotly',
+        secondaryYAxistitle: secondaryYAxisValues.secondaryYAxistitle,
+        secondaryYScaleOptions: secondaryYAxisValues.secondaryYScaleOptions,
+        hideTickOverlap: true
+    };
+};
+export const transformPlotlyJsonToGVBCProps = (input, colorMap, isDarkTheme)=>{
+    var _input_layout, _input_layout1;
+    const mapXToDataPoints = {};
+    let secondaryYAxisValues = {};
+    input.data.forEach((series, index1)=>{
+        var _series_x;
+        (_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x.forEach((x, index2)=>{
+            if (!mapXToDataPoints[x]) {
+                mapXToDataPoints[x] = {
+                    name: x.toString(),
+                    series: []
+                };
+            }
+            if (series.type === 'bar') {
+                var _series_y;
+                const legend = getLegend(series, index1);
+                const color = getColor(legend, colorMap, isDarkTheme);
+                var _series_y_index2;
+                mapXToDataPoints[x].series.push({
+                    key: legend,
+                    data: (_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,
+                    xAxisCalloutData: x,
+                    color,
+                    legend
+                });
+            }
+        });
+        secondaryYAxisValues = getSecondaryYAxisValues(series, input.layout);
+    });
+    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
+    var _input_layout_height;
+    return {
+        data: Object.values(mapXToDataPoints),
+        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',
+        chartTitle,
+        xAxisTitle,
+        yAxisTitle,
+        mode: 'plotly',
+        secondaryYAxistitle: secondaryYAxisValues.secondaryYAxistitle,
+        secondaryYScaleOptions: secondaryYAxisValues.secondaryYScaleOptions,
+        hideTickOverlap: true
+    };
+};
 export const transformPlotlyJsonToVBCProps = (input, colorMap, isDarkTheme)=>{
+    var _input_layout, _input_layout1;
     const vbcData = [];
-    input.data.forEach((series, index)=>{
+    input.data.forEach((series, seriesIdx)=>{
         var _series_xbins, _series_xbins1, _series_xbins2;
-        invalidate2Dseries(series, 'VBC');
         if (!series.x) {
             return;
         }
-        const scale = d3ScaleLinear().domain(d3Extent(series.x)).nice();
-        let [xMin, xMax] = scale.domain();
-        xMin = typeof ((_series_xbins = series.xbins) === null || _series_xbins === void 0 ? void 0 : _series_xbins.start) === 'number' ? series.xbins.start : xMin;
-        xMax = typeof ((_series_xbins1 = series.xbins) === null || _series_xbins1 === void 0 ? void 0 : _series_xbins1.end) === 'number' ? series.xbins.end : xMax;
-        const bin = d3Bin().domain([
-            xMin,
-            xMax
-        ]);
-        if (typeof ((_series_xbins2 = series.xbins) === null || _series_xbins2 === void 0 ? void 0 : _series_xbins2.size) === 'number') {
-            const thresholds = [];
-            let th = xMin;
-            const precision = d3PrecisionFixed(series.xbins.size);
-            const format = d3Format(`.${precision}f`);
-            while(th < xMax + series.xbins.size){
-                thresholds.push(parseFloat(format(th)));
-                th += series.xbins.size;
+        const isXString = isStringArray(series.x);
+        const xBins = createBins(series.x, (_series_xbins = series.xbins) === null || _series_xbins === void 0 ? void 0 : _series_xbins.start, (_series_xbins1 = series.xbins) === null || _series_xbins1 === void 0 ? void 0 : _series_xbins1.end, (_series_xbins2 = series.xbins) === null || _series_xbins2 === void 0 ? void 0 : _series_xbins2.size);
+        const yBins = xBins.map(()=>[]);
+        let total = 0;
+        series.x.forEach((xVal, index)=>{
+            const binIdx = findBinIndex(xBins, xVal, isXString);
+            if (binIdx !== -1) {
+                var _series_y;
+                var _series_y_index;
+                yBins[binIdx].push((_series_y_index = (_series_y = series.y) === null || _series_y === void 0 ? void 0 : _series_y[index]) !== null && _series_y_index !== void 0 ? _series_y_index : 1);
             }
-            xMin = thresholds[0];
-            xMax = thresholds[thresholds.length - 1];
-            bin.domain([
-                xMin,
-                xMax
-            ]).thresholds(thresholds);
-        }
-        const buckets = bin(series.x);
-        // If the start or end of xbins is specified, then the number of datapoints may become less than x.length
-        const totalDataPoints = d3Merge(buckets).length;
-        buckets.forEach((bucket)=>{
-            const legend = getLegend(series, index);
+        });
+        const y = yBins.map((bin)=>{
+            const yVal = calculateHistFunc(series.histfunc, bin);
+            total += yVal;
+            return yVal;
+        });
+        xBins.forEach((bin, index)=>{
+            const legend = getLegend(series, seriesIdx);
             const color = getColor(legend, colorMap, isDarkTheme);
-            let y = bucket.length;
-            if (series.histnorm === 'percent') {
-                y = bucket.length / totalDataPoints * 100;
-            } else if (series.histnorm === 'probability') {
-                y = bucket.length / totalDataPoints;
-            } else if (series.histnorm === 'density') {
-                y = bucket.x0 === bucket.x1 ? 0 : bucket.length / (bucket.x1 - bucket.x0);
-            } else if (series.histnorm === 'probability density') {
-                y = bucket.x0 === bucket.x1 ? 0 : bucket.length / (totalDataPoints * (bucket.x1 - bucket.x0));
-            } else if (series.histfunc === 'sum') {
-                y = d3Sum(bucket);
-            } else if (series.histfunc === 'avg') {
-                y = bucket.length === 0 ? 0 : d3Sum(bucket) / bucket.length;
-            } else if (series.histfunc === 'min') {
-                y = d3Min(bucket);
-            } else if (series.histfunc === 'max') {
-                y = d3Max(bucket);
-            }
+            const yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
             vbcData.push({
-                x: (bucket.x1 + bucket.x0) / 2,
-                y,
+                x: isXString ? bin.join(', ') : getBinCenter(bin),
+                y: yVal,
                 legend,
                 color,
-                xAxisCalloutData: `[${bucket.x0} - ${bucket.x1})`
+                ...isXString ? {} : {
+                    xAxisCalloutData: `[${bin.x0} - ${bin.x1})`
+                }
             });
         });
     });
     const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
+    var _input_layout_height;
     return {
         data: vbcData,
-        // width: layout?.width,
-        // height: layout?.height,
+        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,
         chartTitle,
         xAxisTitle,
         yAxisTitle,
+        mode: 'plotly',
         hideTickOverlap: true
     };
 };
 export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, colorMap, isDarkTheme)=>{
     let secondaryYAxisValues = {};
+    let mode = 'tonexty';
     const chartData = input.data.map((series, index)=>{
-        var _series_line;
-        invalidate2Dseries(series, 'Scatter');
         const xValues = series.x;
         const isString = typeof xValues[0] === 'string';
         const isXDate = isDateArray(xValues);
@@ -305,18 +338,26 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, color
         const legend = getLegend(series, index);
         const lineColor = getColor(legend, colorMap, isDarkTheme);
         secondaryYAxisValues = getSecondaryYAxisValues(series, input.layout);
+        mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
+        const lineOptions = getLineOptions(series.line);
         return {
             legend,
-            ...((_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.dash) && dashOptions[series.line.dash] ? {
-                lineOptions: {
-                    ...dashOptions[series.line.dash]
-                }
-            } : {},
-            data: xValues.map((x, i)=>({
+            data: xValues.map((x, i)=>{
+                var _series_marker, _series_marker1;
+                return {
                     x: isString ? isXDate ? new Date(x) : isXNumber ? parseFloat(x) : x : x,
-                    y: series.y[i]
-                })),
-            color: lineColor
+                    y: series.y[i],
+                    ...Array.isArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.size) ? {
+                        markerSize: series.marker.size[i]
+                    } : typeof ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.size) === 'number' ? {
+                        markerSize: series.marker.size
+                    } : {}
+                };
+            }),
+            color: lineColor,
+            ...lineOptions ? {
+                lineOptions
+            } : {}
         };
     });
     const yMinMaxValues = findNumericMinMaxOfY(chartData);
@@ -325,43 +366,296 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, color
         chartTitle,
         lineChartData: chartData
     };
+    if (isAreaChart) {
+        var _input_layout, _input_layout1;
+        var _input_layout_height;
+        return {
+            data: chartProps,
+            supportNegativeData: true,
+            xAxisTitle,
+            yAxisTitle,
+            secondaryYAxistitle: secondaryYAxisValues.secondaryYAxistitle,
+            secondaryYScaleOptions: secondaryYAxisValues.secondaryYScaleOptions,
+            mode,
+            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,
+            hideTickOverlap: true
+        };
+    } else {
+        var _input_layout2, _input_layout3;
+        var _input_layout_height1;
+        return {
+            data: chartProps,
+            supportNegativeData: true,
+            xAxisTitle,
+            yAxisTitle,
+            secondaryYAxistitle: secondaryYAxisValues.secondaryYAxistitle,
+            secondaryYScaleOptions: secondaryYAxisValues.secondaryYScaleOptions,
+            roundedTicks: true,
+            yMinValue: yMinMaxValues.startValue,
+            yMaxValue: yMinMaxValues.endValue,
+            width: (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.width,
+            height: (_input_layout_height1 = (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.height) !== null && _input_layout_height1 !== void 0 ? _input_layout_height1 : 350,
+            hideTickOverlap: true,
+            enableReflow: false
+        };
+    }
+};
+export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, 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 chartData = input.data.map((series, index)=>{
+        return series.y.map((yValue, i)=>{
+            const color = getColor(yValue, colorMap, isDarkTheme);
+            return {
+                x: series.x[i],
+                y: yValue,
+                legend: yValue,
+                color
+            };
+        });
+    }).flat()//reversing the order to invert the Y bars order as required by plotly.
+    .reverse();
+    var _input_layout_height;
+    const chartHeight = (_input_layout_height = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 450;
+    var _input_layout_margin_l;
+    const margin = (_input_layout_margin_l = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_margin = _input_layout1.margin) === null || _input_layout_margin === void 0 ? void 0 : _input_layout_margin.l) !== null && _input_layout_margin_l !== void 0 ? _input_layout_margin_l : 0;
+    var _input_layout_margin_pad;
+    const padding = (_input_layout_margin_pad = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_margin1 = _input_layout2.margin) === null || _input_layout_margin1 === void 0 ? void 0 : _input_layout_margin1.pad) !== null && _input_layout_margin_pad !== void 0 ? _input_layout_margin_pad : 0;
+    const availableHeight = chartHeight - margin - padding;
+    const numberOfBars = input.data[0].y.length;
+    const scalingFactor = 0.01;
+    const gapFactor = 1 / (1 + scalingFactor * numberOfBars);
+    const barHeight = availableHeight / (numberOfBars * (1 + gapFactor));
+    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     return {
-        data: chartProps,
-        supportNegativeData: true,
+        data: chartData,
+        chartTitle,
         xAxisTitle,
         yAxisTitle,
-        secondaryYAxistitle: secondaryYAxisValues.secondaryYAxistitle,
-        secondaryYScaleOptions: secondaryYAxisValues.secondaryYScaleOptions,
-        roundedTicks: true,
-        yMinValue: yMinMaxValues.startValue,
-        yMaxValue: yMinMaxValues.endValue,
+        secondaryYAxistitle: typeof ((_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : (_input_layout_yaxis2 = _input_layout3.yaxis2) === null || _input_layout_yaxis2 === void 0 ? void 0 : _input_layout_yaxis2.title) === 'string' ? (_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : (_input_layout_yaxis21 = _input_layout4.yaxis2) === null || _input_layout_yaxis21 === void 0 ? void 0 : _input_layout_yaxis21.title : ((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : (_input_layout_yaxis22 = _input_layout5.yaxis2) === null || _input_layout_yaxis22 === void 0 ? void 0 : (_input_layout_yaxis2_title = _input_layout_yaxis22.title) === null || _input_layout_yaxis2_title === void 0 ? void 0 : _input_layout_yaxis2_title.text) || '',
+        barHeight,
+        showYAxisLables: true,
+        height: chartHeight,
+        width: (_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : _input_layout6.width,
         hideTickOverlap: true
     };
 };
-const MAX_DEPTH = 15;
-export const sanitizeJson = (jsonObject, depth = 0)=>{
-    if (depth > MAX_DEPTH) {
-        throw new Error('Maximum json depth exceeded');
-    }
-    if (typeof jsonObject === 'object' && jsonObject !== null) {
-        for(const key in jsonObject){
-            if (jsonObject.hasOwnProperty(key)) {
-                if (typeof jsonObject[key] === 'string') {
-                    jsonObject[key] = jsonObject[key].replace(/</g, '&lt;').replace(/>/g, '&gt;');
-                } else {
-                    jsonObject[key] = sanitizeJson(jsonObject[key], depth + 1);
-                }
+export const transformPlotlyJsonToHeatmapProps = (input)=>{
+    var _input_layout, _input_layout1;
+    const firstData = input.data[0];
+    const heatmapDataPoints = [];
+    let zMin = Number.POSITIVE_INFINITY;
+    let zMax = Number.NEGATIVE_INFINITY;
+    if (firstData.type === 'histogram2d') {
+        var _firstData_xbins, _firstData_xbins1, _firstData_xbins2, _firstData_ybins, _firstData_ybins1, _firstData_ybins2, _firstData_x;
+        const isXString = isStringArray(firstData.x);
+        const isYString = isStringArray(firstData.y);
+        const xBins = createBins(firstData.x, (_firstData_xbins = firstData.xbins) === null || _firstData_xbins === void 0 ? void 0 : _firstData_xbins.start, (_firstData_xbins1 = firstData.xbins) === null || _firstData_xbins1 === void 0 ? void 0 : _firstData_xbins1.end, (_firstData_xbins2 = firstData.xbins) === null || _firstData_xbins2 === void 0 ? void 0 : _firstData_xbins2.size);
+        const yBins = createBins(firstData.y, (_firstData_ybins = firstData.ybins) === null || _firstData_ybins === void 0 ? void 0 : _firstData_ybins.start, (_firstData_ybins1 = firstData.ybins) === null || _firstData_ybins1 === void 0 ? void 0 : _firstData_ybins1.end, (_firstData_ybins2 = firstData.ybins) === null || _firstData_ybins2 === void 0 ? void 0 : _firstData_ybins2.size);
+        const zBins = yBins.map(()=>xBins.map(()=>[]));
+        let total = 0;
+        (_firstData_x = firstData.x) === null || _firstData_x === void 0 ? void 0 : _firstData_x.forEach((xVal, index)=>{
+            var _firstData_y;
+            const xBinIdx = findBinIndex(xBins, xVal, isXString);
+            const yBinIdx = findBinIndex(yBins, (_firstData_y = firstData.y) === null || _firstData_y === void 0 ? void 0 : _firstData_y[index], isYString);
+            if (xBinIdx !== -1 && yBinIdx !== -1) {
+                var _firstData_z;
+                var _firstData_z_index;
+                zBins[yBinIdx][xBinIdx].push((_firstData_z_index = (_firstData_z = firstData.z) === null || _firstData_z === void 0 ? void 0 : _firstData_z[index]) !== null && _firstData_z_index !== void 0 ? _firstData_z_index : 1);
             }
+        });
+        const z = zBins.map((row)=>{
+            return row.map((bin)=>{
+                const zVal = calculateHistFunc(firstData.histfunc, bin);
+                total += zVal;
+                return zVal;
+            });
+        });
+        xBins.forEach((xBin, xIdx)=>{
+            yBins.forEach((yBin, yIdx)=>{
+                const zVal = calculateHistNorm(firstData.histnorm, z[yIdx][xIdx], total, isXString ? xBin.length : getBinSize(xBin), isYString ? yBin.length : getBinSize(yBin));
+                heatmapDataPoints.push({
+                    x: isXString ? xBin.join(', ') : getBinCenter(xBin),
+                    y: isYString ? yBin.join(', ') : getBinCenter(yBin),
+                    value: zVal,
+                    rectText: zVal
+                });
+                if (typeof zVal === 'number') {
+                    zMin = Math.min(zMin, zVal);
+                    zMax = Math.max(zMax, zVal);
+                }
+            });
+        });
+    } else {
+        var _firstData_x1;
+        (_firstData_x1 = firstData.x) === null || _firstData_x1 === void 0 ? void 0 : _firstData_x1.forEach((xVal, xIdx)=>{
+            var _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];
+                heatmapDataPoints.push({
+                    x: ((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_xaxis = _input_layout.xaxis) === null || _input_layout_xaxis === void 0 ? void 0 : _input_layout_xaxis.type) === 'date' ? xVal : xVal !== null && xVal !== void 0 ? xVal : 0,
+                    y: ((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_yaxis = _input_layout1.yaxis) === null || _input_layout_yaxis === void 0 ? void 0 : _input_layout_yaxis.type) === 'date' ? yVal : yVal,
+                    value: zVal,
+                    rectText: zVal
+                });
+                if (typeof zVal === 'number') {
+                    zMin = Math.min(zMin, zVal);
+                    zMax = Math.max(zMax, zVal);
+                }
+            });
+        });
+    }
+    var _firstData_name;
+    const heatmapData = {
+        legend: (_firstData_name = firstData.name) !== null && _firstData_name !== void 0 ? _firstData_name : '',
+        data: heatmapDataPoints,
+        value: 0
+    };
+    // Initialize domain and range to default values
+    const defaultDomain = [
+        zMin,
+        (zMax + zMin) / 2,
+        zMax
+    ];
+    const defaultRange = [
+        getColorFromToken(DataVizPalette.color1),
+        getColorFromToken(DataVizPalette.color2),
+        getColorFromToken(DataVizPalette.color3)
+    ];
+    const domainValuesForColorScale = Array.isArray(firstData.colorscale) ? firstData.colorscale.map((arr)=>arr[0] * (zMax - zMin) + zMin) : defaultDomain;
+    const rangeValuesForColorScale = Array.isArray(firstData.colorscale) ? firstData.colorscale.map((arr)=>arr[1]) : defaultRange;
+    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
+    var _input_layout_height;
+    return {
+        data: [
+            heatmapData
+        ],
+        domainValuesForColorScale,
+        rangeValuesForColorScale,
+        hideLegend: true,
+        showYAxisLables: true,
+        chartTitle,
+        xAxisTitle,
+        yAxisTitle,
+        sortOrder: 'none',
+        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,
+        hideTickOverlap: true
+    };
+};
+export const transformPlotlyJsonToSankeyProps = (input, colorMap, isDarkTheme)=>{
+    var _node_label, _input_layout, _input_layout1;
+    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((x)=>x.source >= 0 && x.target >= 0 && x.source !== x.target);
+    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);
+            return {
+                nodeId: index,
+                name: label,
+                color
+            };
+        }),
+        links: validLinks.map((validLink, index)=>{
+            return {
+                ...validLink
+            };
+        })
+    };
+    // const styles: SankeyChartProps['styles'] = {
+    //   root: {
+    //     ...(input.layout?.font?.size ? { fontSize: input.layout.font?.size } : {}),
+    //   },
+    // };
+    const { chartTitle } = getTitles(input.layout);
+    var _input_layout_height;
+    return {
+        data: {
+            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,
+        // TODO
+        // styles,
+        enableReflow: true
+    };
+};
+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, _firstData_gauge_steps1, _firstData_gauge7;
+    const firstData = input.data[0];
+    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)=>{
+        var _step_range, _step_range1;
+        const legend = step.name || `Segment ${index + 1}`;
+        const color = getColor(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]),
+            color
+        };
+    }) : [
+        {
+            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)
+        },
+        {
+            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),
+            color: DataVizPalette.disabled
+        }
+    ];
+    let sublabel;
+    // let sublabelColor: string | undefined;
+    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) {
+            sublabel = `\u25B2 ${diff}`;
+        // const color = getColorFromToken(DataVizPalette.success, isDarkTheme);
+        // sublabelColor = color;
+        } else {
+            sublabel = `\u25BC ${Math.abs(diff)}`;
+        // const color = getColorFromToken(DataVizPalette.error, isDarkTheme);
+        // sublabelColor = color;
         }
     }
-    return jsonObject;
+    // const styles: GaugeChartProps['styles'] = {
+    //   sublabel: {
+    //     fill: sublabelColor,
+    //   },
+    // };
+    const { chartTitle } = getTitles(input.layout);
+    var _firstData_value2;
+    return {
+        segments,
+        chartValue: (_firstData_value2 = firstData.value) !== null && _firstData_value2 !== void 0 ? _firstData_value2 : 0,
+        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,
+        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 : '';
+        },
+        // FIXME
+        // width: input.layout?.width,
+        // height: 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'
+    };
 };
-function isTypedArray(a) {
-    return ArrayBuffer.isView(a) && !(a instanceof DataView);
-}
-export function isArrayOrTypedArray(a) {
-    return Array.isArray(a) || isTypedArray(a);
-}
 function isPlainObject(obj) {
     return Object.prototype.toString.call(obj) === '[object Object]' && Object.getPrototypeOf(obj).hasOwnProperty('hasOwnProperty');
 }
@@ -398,3 +692,120 @@ function crawlIntoTrace(container, i, astrPartial) {
         }
     }
 }
+function getLineOptions(line) {
+    if (!line) {
+        return;
+    }
+    let lineOptions = {};
+    if (line.dash) {
+        lineOptions = {
+            ...lineOptions,
+            ...dashOptions[line.dash]
+        };
+    }
+    switch(line.shape){
+        case 'spline':
+            const smoothing = typeof line.smoothing === 'number' ? line.smoothing : 1;
+            lineOptions.curve = d3CurveCardinal.tension(1 - smoothing / 1.3);
+            break;
+        case 'hv':
+            lineOptions.curve = 'stepAfter';
+            break;
+        case 'vh':
+            lineOptions.curve = 'stepBefore';
+            break;
+        case 'hvh':
+            lineOptions.curve = 'step';
+            break;
+        default:
+            lineOptions.curve = 'linear';
+    }
+    return Object.keys(lineOptions).length > 0 ? lineOptions : undefined;
+}
+const isStringArray = (arr)=>{
+    return isArrayOfType(arr, (value)=>typeof value === 'string');
+};
+// TODO: Use binary search to find the appropriate bin for numeric value.
+const findBinIndex = (bins, value, isString)=>{
+    if (typeof value === 'undefined' || value === null) {
+        return -1;
+    }
+    return isString ? bins.findIndex((bin)=>bin.includes(value)) : bins.findIndex((bin)=>value >= bin.x0 && value < bin.x1);
+};
+const getBinSize = (bin)=>{
+    return bin.x1 - bin.x0;
+};
+const getBinCenter = (bin)=>{
+    return (bin.x1 + bin.x0) / 2;
+};
+// TODO: Add support for date axes
+const createBins = (data, binStart, binEnd, binSize)=>{
+    if (!data || data.length === 0) {
+        return [];
+    }
+    if (isStringArray(data)) {
+        const categories = Array.from(new Set(data));
+        const start = typeof binStart === 'number' ? Math.ceil(binStart) : 0;
+        const stop = typeof binEnd === 'number' ? Math.floor(binEnd) + 1 : categories.length;
+        const step = typeof binSize === 'number' ? binSize : 1;
+        return d3Range(start, stop, step).map((i)=>categories.slice(i, i + step));
+    }
+    const scale = d3ScaleLinear().domain(d3Extent(data)).nice();
+    let [minVal, maxVal] = scale.domain();
+    minVal = typeof binStart === 'number' ? binStart : minVal;
+    maxVal = typeof binEnd === 'number' ? binEnd : maxVal;
+    const binGenerator = d3Bin().domain([
+        minVal,
+        maxVal
+    ]);
+    if (typeof binSize === 'number') {
+        var _binSize_toString_split_;
+        const thresholds = [];
+        let th = minVal;
+        var _binSize_toString_split__length;
+        const tolerance = 1 / Math.pow(10, (_binSize_toString_split__length = (_binSize_toString_split_ = binSize.toString().split('.')[1]) === null || _binSize_toString_split_ === void 0 ? void 0 : _binSize_toString_split_.length) !== null && _binSize_toString_split__length !== void 0 ? _binSize_toString_split__length : 0);
+        while(maxVal + binSize - th > tolerance){
+            thresholds.push(th);
+            th += binSize;
+        }
+        minVal = thresholds[0];
+        maxVal = thresholds[thresholds.length - 1];
+        binGenerator.domain([
+            minVal,
+            maxVal
+        ]).thresholds(thresholds);
+    }
+    // NOTE: The last bin generated by d3Bin often has identical x0 and x1 values (both inclusive) and
+    // can be ignored if the highest value is already included in the previous bin.
+    return binGenerator(data);
+};
+const calculateHistFunc = (histfunc, bin)=>{
+    switch(histfunc){
+        case 'sum':
+            return d3Sum(bin);
+        case 'avg':
+            return bin.length === 0 ? 0 : d3Sum(bin) / bin.length;
+        case 'min':
+            var _d3Min;
+            return (_d3Min = d3Min(bin)) !== null && _d3Min !== void 0 ? _d3Min : 0;
+        case 'max':
+            var _d3Max;
+            return (_d3Max = d3Max(bin)) !== null && _d3Max !== void 0 ? _d3Max : 0;
+        default:
+            return bin.length;
+    }
+};
+const calculateHistNorm = (histnorm, value, total, dx, dy = 1)=>{
+    switch(histnorm){
+        case 'percent':
+            return total === 0 ? 0 : value / total * 100;
+        case 'probability':
+            return total === 0 ? 0 : value / total;
+        case 'density':
+            return dx * dy === 0 ? 0 : value / (dx * dy);
+        case 'probability density':
+            return total * dx * dy === 0 ? 0 : value / (total * dx * dy);
+        default:
+            return value;
+    }
+};