@fluentui/react-charts 0.0.0-nightly-20250423-1342.1 → 0.0.0-nightly-20250424-0405.1

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -0,0 +1,811 @@
+/* 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, range as d3Range } from 'd3-array';
+import { scaleLinear as d3ScaleLinear } from 'd3-scale';
+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';
+import { curveCardinal as d3CurveCardinal } from 'd3-shape';
+const dashOptions = {
+    dot: {
+        strokeDasharray: '1, 5',
+        strokeLinecap: 'round',
+        strokeWidth: '2',
+        lineBorderWidth: '4'
+    },
+    dash: {
+        strokeDasharray: '5, 5',
+        strokeLinecap: 'butt',
+        strokeWidth: '2',
+        lineBorderWidth: '4'
+    },
+    longdash: {
+        strokeDasharray: '10, 5',
+        strokeLinecap: 'butt',
+        strokeWidth: '2',
+        lineBorderWidth: '4'
+    },
+    dashdot: {
+        strokeDasharray: '5, 5, 1, 5',
+        strokeLinecap: 'butt',
+        strokeWidth: '2',
+        lineBorderWidth: '4'
+    },
+    longdashdot: {
+        strokeDasharray: '10, 5, 1, 5',
+        strokeLinecap: 'butt',
+        strokeWidth: '2',
+        lineBorderWidth: '4'
+    },
+    solid: {
+        strokeDasharray: '0',
+        strokeLinecap: 'butt',
+        strokeWidth: '2',
+        lineBorderWidth: '4'
+    }
+};
+const isMonth = (possiblyMonthValue)=>{
+    const parseFullMonth = timeParse('%B');
+    const parseShortMonth = timeParse('%b');
+    return parseFullMonth(possiblyMonthValue) !== null || parseShortMonth(possiblyMonthValue) !== null;
+};
+export const isMonthArray = (data)=>{
+    return isArrayOfType(data, isMonth);
+};
+const getLegend = (series, index)=>{
+    return series.name || `Series ${index + 1}`;
+};
+function getTitles(layout) {
+    var _layout_title, _layout_xaxis, _layout_xaxis1, _layout_xaxis_title, _layout_xaxis2, _layout_yaxis, _layout_yaxis1, _layout_yaxis_title, _layout_yaxis2;
+    var _layout_title_text, _layout_xaxis_title_text, _layout_yaxis_title_text;
+    const titles = {
+        chartTitle: typeof (layout === null || layout === void 0 ? void 0 : layout.title) === 'string' ? layout.title : (_layout_title_text = layout === null || layout === void 0 ? void 0 : (_layout_title = layout.title) === null || _layout_title === void 0 ? void 0 : _layout_title.text) !== null && _layout_title_text !== void 0 ? _layout_title_text : '',
+        xAxisTitle: typeof (layout === null || layout === void 0 ? void 0 : (_layout_xaxis = layout.xaxis) === null || _layout_xaxis === void 0 ? void 0 : _layout_xaxis.title) === 'string' ? layout === null || layout === void 0 ? void 0 : (_layout_xaxis1 = layout.xaxis) === null || _layout_xaxis1 === void 0 ? void 0 : _layout_xaxis1.title : (_layout_xaxis_title_text = layout === null || layout === void 0 ? void 0 : (_layout_xaxis2 = layout.xaxis) === null || _layout_xaxis2 === void 0 ? void 0 : (_layout_xaxis_title = _layout_xaxis2.title) === null || _layout_xaxis_title === void 0 ? void 0 : _layout_xaxis_title.text) !== null && _layout_xaxis_title_text !== void 0 ? _layout_xaxis_title_text : '',
+        yAxisTitle: typeof (layout === null || layout === void 0 ? void 0 : (_layout_yaxis = layout.yaxis) === null || _layout_yaxis === void 0 ? void 0 : _layout_yaxis.title) === 'string' ? layout === null || layout === void 0 ? void 0 : (_layout_yaxis1 = layout.yaxis) === null || _layout_yaxis1 === void 0 ? void 0 : _layout_yaxis1.title : (_layout_yaxis_title_text = layout === null || layout === void 0 ? void 0 : (_layout_yaxis2 = layout.yaxis) === null || _layout_yaxis2 === void 0 ? void 0 : (_layout_yaxis_title = _layout_yaxis2.title) === null || _layout_yaxis_title === void 0 ? void 0 : _layout_yaxis_title.text) !== null && _layout_yaxis_title_text !== void 0 ? _layout_yaxis_title_text : ''
+    };
+    return titles;
+}
+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');
+    }
+    const dates = xValues.map((possiblyMonthValue)=>{
+        const parsedDate = `${possiblyMonthValue} 01, ${presentYear}`;
+        return isDate(parsedDate) ? new Date(parsedDate) : null;
+    });
+    for(let i = dates.length - 1; i > 0; i--){
+        const currentMonth = dates[i].getMonth();
+        const previousMonth = dates[i - 1].getMonth();
+        const currentYear = dates[i].getFullYear();
+        const previousYear = dates[i - 1].getFullYear();
+        if (previousMonth >= currentMonth) {
+            dates[i - 1].setFullYear(dates[i].getFullYear() - 1);
+        } else if (previousYear > currentYear) {
+            dates[i - 1].setFullYear(currentYear);
+        }
+    }
+    xValues = xValues.map((month, index)=>{
+        return `${month} 01, ${dates[index].getFullYear()}`;
+    });
+    return xValues;
+};
+export const getColor = (legendLabel, colorMap, isDarkTheme)=>{
+    if (!colorMap.current.has(legendLabel)) {
+        const nextColor = getNextColor(colorMap.current.size + 1, 0, isDarkTheme);
+        colorMap.current.set(legendLabel, nextColor);
+        return nextColor;
+    }
+    return colorMap.current.get(legendLabel);
+};
+const getSecondaryYAxisValues = (series, layout)=>{
+    const secondaryYAxisValues = {};
+    if (layout && layout.yaxis2 && series.yaxis === 'y2') {
+        var _layout_yaxis2_title;
+        secondaryYAxisValues.secondaryYAxistitle = typeof layout.yaxis2.title === 'string' ? layout.yaxis2.title : typeof ((_layout_yaxis2_title = layout.yaxis2.title) === null || _layout_yaxis2_title === void 0 ? void 0 : _layout_yaxis2_title.text) === 'string' ? layout.yaxis2.title.text : '';
+        if (layout.yaxis2.range) {
+            secondaryYAxisValues.secondaryYScaleOptions = {
+                yMinValue: layout.yaxis2.range[0],
+                yMaxValue: layout.yaxis2.range[1]
+            };
+        } else {
+            const yValues = series.y;
+            if (yValues) {
+                secondaryYAxisValues.secondaryYScaleOptions = {
+                    yMinValue: Math.min(...yValues),
+                    yMaxValue: Math.max(...yValues)
+                };
+            }
+        }
+    }
+    secondaryYAxisValues.secondaryYAxistitle = secondaryYAxisValues.secondaryYAxistitle !== '' ? secondaryYAxisValues.secondaryYAxistitle : undefined;
+    secondaryYAxisValues.secondaryYScaleOptions = secondaryYAxisValues.secondaryYScaleOptions && Object.keys(secondaryYAxisValues.secondaryYScaleOptions).length !== 0 ? secondaryYAxisValues.secondaryYScaleOptions : undefined;
+    return secondaryYAxisValues;
+};
+export const transformPlotlyJsonToDonutProps = (input, colorMap, isDarkTheme)=>{
+    var _firstData_labels, _input_layout, _input_layout1, _input_layout2, _input_layout3;
+    const firstData = input.data[0];
+    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);
+        //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;
+    var _input_layout_height;
+    const height = (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 220;
+    const hideLabels = firstData.textinfo ? ![
+        'value',
+        'percent',
+        'label+percent'
+    ].includes(firstData.textinfo) : false;
+    const donutMarginHorizontal = hideLabels ? 0 : 80;
+    const donutMarginVertical = 40 + (hideLabels ? 0 : 40);
+    const innerRadius = firstData.hole ? firstData.hole * (Math.min(width - donutMarginHorizontal, height - donutMarginVertical) / 2) : 0;
+    const { chartTitle } = getTitles(input.layout);
+    return {
+        data: {
+            chartTitle,
+            chartData: Object.values(mapLegendToDataPoint)
+        },
+        hideLegend: ((_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.showlegend) === false ? true : false,
+        width: (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.width,
+        height,
+        innerRadius,
+        hideLabels,
+        showLabelsInPercent: firstData.textinfo ? [
+            'percent',
+            'label+percent'
+        ].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, seriesIdx)=>{
+        var _series_xbins, _series_xbins1, _series_xbins2;
+        if (!series.x) {
+            return;
+        }
+        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);
+            }
+        });
+        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);
+            const yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
+            vbcData.push({
+                x: isXString ? bin.join(', ') : getBinCenter(bin),
+                y: yVal,
+                legend,
+                color,
+                ...isXString ? {} : {
+                    xAxisCalloutData: `[${bin.x0} - ${bin.x1})`
+                }
+            });
+        });
+    });
+    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
+    var _input_layout_height;
+    return {
+        data: vbcData,
+        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)=>{
+        const xValues = series.x;
+        const isString = typeof xValues[0] === 'string';
+        const isXDate = isDateArray(xValues);
+        const isXNumber = isNumberArray(xValues);
+        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,
+            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],
+                    ...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);
+    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
+    const chartProps = {
+        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: chartData,
+        chartTitle,
+        xAxisTitle,
+        yAxisTitle,
+        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
+    };
+};
+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;
+        }
+    }
+    // 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 isPlainObject(obj) {
+    return Object.prototype.toString.call(obj) === '[object Object]' && Object.getPrototypeOf(obj).hasOwnProperty('hasOwnProperty');
+}
+var arrayAttributes = [];
+var stack = [];
+var isArrayStack = [];
+var baseContainer, baseAttrName;
+/**
+ * Interate iteratively through the trace object and find all the array attributes.
+ * 1 trace record = 1 series of data
+ * @param trace
+ */ export function findArrayAttributes(trace) {
+    // Init basecontainer and baseAttrName
+    crawlIntoTrace(baseContainer, 0, '');
+}
+function crawlIntoTrace(container, i, astrPartial) {
+    var item = container[stack[i]];
+    var newAstrPartial = astrPartial + stack[i];
+    if (i === stack.length - 1) {
+        if (isArrayOrTypedArray(item)) {
+            arrayAttributes.push(baseAttrName + newAstrPartial);
+        }
+    } else {
+        if (isArrayStack[i]) {
+            if (Array.isArray(item)) {
+                for(var j = 0; j < item.length; j++){
+                    if (isPlainObject(item[j])) {
+                        crawlIntoTrace(item[j], i + 1, newAstrPartial + '[' + j + '].');
+                    }
+                }
+            }
+        } else if (isPlainObject(item)) {
+            crawlIntoTrace(item, i + 1, newAstrPartial + '.');
+        }
+    }
+}
+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;
+    }
+};