@fluentui/react-charting 5.23.18 → 5.23.20

package/etc/react-charting.api.md

@@ -119,6 +119,15 @@ export const DataVizPalette: {
     highSuccess: string;
 };
 
+// @public
+export const DeclarativeChart: React_2.FunctionComponent<DeclarativeChartProps>;
+
+// @public
+export interface DeclarativeChartProps extends React_2.RefAttributes<HTMLDivElement> {
+    chartSchema: Schema;
+    onSchemaChange?: (eventData: Schema) => void;
+}
+
 // @public
 export const DonutChart: React_2.FunctionComponent<IDonutChartProps>;
 
@@ -1591,6 +1600,15 @@ export const PieChart: React_2.FunctionComponent<IPieChartProps>;
 // @public
 export const SankeyChart: React_2.FunctionComponent<ISankeyChartProps>;
 
+// @public (undocumented)
+export interface Schema {
+    accesibilityLabels?: {
+        [key: string]: string;
+    };
+    plotlySchema: any;
+    selectedLegends?: string[];
+}
+
 // @public (undocumented)
 export const Shape: React_2.FC<IShapeProps>;
 

package/lib/DeclarativeChart.d.ts

@@ -0,0 +1 @@
+export * from './components/DeclarativeChart/DeclarativeChart';

package/lib/DeclarativeChart.js

@@ -0,0 +1,2 @@
+export * from './components/DeclarativeChart/DeclarativeChart';
+//# sourceMappingURL=DeclarativeChart.js.map

package/lib/DeclarativeChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["DeclarativeChart.ts"],"names":[],"mappings":"AAAA,cAAc,gDAAgD,CAAC","sourcesContent":["export * from './components/DeclarativeChart/DeclarativeChart';\n"]}

package/lib/components/DeclarativeChart/DeclarativeChart.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+export interface Schema {
+    /**
+     * Plotly schema represented as JSON object
+     */
+    plotlySchema: any;
+    /**
+     * The legends selected by the user to persist in the chart
+     */
+    selectedLegends?: string[];
+    /**
+     * Dictionary for localizing the accessibility labels
+     */
+    accesibilityLabels?: {
+        [key: string]: string;
+    };
+}
+/**
+ * DeclarativeChart props.
+ * {@docCategory DeclarativeChart}
+ */
+export interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {
+    /**
+     * The schema representing the chart data, layout and configuration
+     */
+    chartSchema: Schema;
+    /**
+     * Callback when an event occurs
+     */
+    onSchemaChange?: (eventData: Schema) => void;
+}
+/**
+ * DeclarativeChart component.
+ * {@docCategory DeclarativeChart}
+ */
+export declare const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps>;

package/lib/components/DeclarativeChart/DeclarativeChart.js

@@ -0,0 +1,70 @@
+import { __assign } from "tslib";
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react';
+import { DonutChart } from '../DonutChart/index';
+import { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';
+import { transformPlotlyJsonToDonutProps, transformPlotlyJsonToVSBCProps, transformPlotlyJsonToScatterChartProps, transformPlotlyJsonToHorizontalBarWithAxisProps, isDateArray, isNumberArray, transformPlotlyJsonToHeatmapProps, transformPlotlyJsonToSankeyProps, transformPlotlyJsonToGaugeProps, transformPlotlyJsonToGVBCProps, transformPlotlyJsonToVBCProps, } from './PlotlySchemaAdapter';
+import { LineChart } from '../LineChart/index';
+import { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';
+import { AreaChart } from '../AreaChart/index';
+import { HeatMapChart } from '../HeatMapChart/index';
+import { SankeyChart } from '../SankeyChart/SankeyChart';
+import { GaugeChart } from '../GaugeChart/index';
+import { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';
+import { VerticalBarChart } from '../VerticalBarChart/index';
+var useColorMapping = function () {
+    var colorMap = React.useRef(new Map());
+    return colorMap;
+};
+/**
+ * DeclarativeChart component.
+ * {@docCategory DeclarativeChart}
+ */
+export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
+    var _a, _b, _c, _d;
+    var plotlySchema = props.chartSchema.plotlySchema;
+    var xValues = plotlySchema.data[0].x;
+    var isXDate = isDateArray(xValues);
+    var isXNumber = isNumberArray(xValues);
+    var colorMap = useColorMapping();
+    switch (plotlySchema.data[0].type) {
+        case 'pie':
+            return React.createElement(DonutChart, __assign({}, transformPlotlyJsonToDonutProps(plotlySchema, colorMap)));
+        case 'bar':
+            var orientation_1 = plotlySchema.data[0].orientation;
+            if (orientation_1 === 'h') {
+                return (React.createElement(HorizontalBarChartWithAxis, __assign({}, transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap))));
+            }
+            else {
+                if (['group', 'overlay'].includes((_a = plotlySchema === null || plotlySchema === void 0 ? void 0 : plotlySchema.layout) === null || _a === void 0 ? void 0 : _a.barmode)) {
+                    return React.createElement(GroupedVerticalBarChart, __assign({}, transformPlotlyJsonToGVBCProps(plotlySchema, colorMap)));
+                }
+                return React.createElement(VerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlySchema, colorMap)));
+            }
+        case 'scatter':
+            var isAreaChart = plotlySchema.data.some(function (series) { return series.fill === 'tonexty'; });
+            if (isXDate || isXNumber) {
+                if (isAreaChart) {
+                    return React.createElement(AreaChart, __assign({}, transformPlotlyJsonToScatterChartProps(plotlySchema, true, colorMap)));
+                }
+                return React.createElement(LineChart, __assign({}, transformPlotlyJsonToScatterChartProps(plotlySchema, false, colorMap)));
+            }
+            return React.createElement(VerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlySchema, colorMap)));
+        case 'heatmap':
+            return React.createElement(HeatMapChart, __assign({}, transformPlotlyJsonToHeatmapProps(plotlySchema)));
+        case 'sankey':
+            return React.createElement(SankeyChart, __assign({}, transformPlotlyJsonToSankeyProps(plotlySchema, colorMap)));
+        case 'indicator':
+            if ((_d = (_c = (_b = plotlySchema === null || plotlySchema === void 0 ? void 0 : plotlySchema.data) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.mode) === null || _d === void 0 ? void 0 : _d.includes('gauge')) {
+                return React.createElement(GaugeChart, __assign({}, transformPlotlyJsonToGaugeProps(plotlySchema, colorMap)));
+            }
+            return React.createElement("div", null, "Unsupported Schema");
+        case 'histogram':
+            return React.createElement(VerticalBarChart, __assign({}, transformPlotlyJsonToVBCProps(plotlySchema, colorMap)));
+        default:
+            return React.createElement("div", null, "Unsupported Schema");
+    }
+});
+DeclarativeChart.displayName = 'DeclarativeChart';
+//# sourceMappingURL=DeclarativeChart.js.map

package/lib/components/DeclarativeChart/DeclarativeChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/DeclarativeChart.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from 'react';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport {\n  transformPlotlyJsonToDonutProps,\n  transformPlotlyJsonToVSBCProps,\n  transformPlotlyJsonToScatterChartProps,\n  transformPlotlyJsonToHorizontalBarWithAxisProps,\n  isDateArray,\n  isNumberArray,\n  transformPlotlyJsonToHeatmapProps,\n  transformPlotlyJsonToSankeyProps,\n  transformPlotlyJsonToGaugeProps,\n  transformPlotlyJsonToGVBCProps,\n  transformPlotlyJsonToVBCProps,\n} from './PlotlySchemaAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\n\nexport interface Schema {\n  /**\n   * Plotly schema represented as JSON object\n   */\n  plotlySchema: any;\n\n  /**\n   * The legends selected by the user to persist in the chart\n   */\n  selectedLegends?: string[];\n\n  /**\n   * Dictionary for localizing the accessibility labels\n   */\n  accesibilityLabels?: { [key: string]: string };\n}\n\n/**\n * DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n */\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n  /**\n   * The schema representing the chart data, layout and configuration\n   */\n  chartSchema: Schema;\n\n  /**\n   * Callback when an event occurs\n   */\n  onSchemaChange?: (eventData: Schema) => void;\n}\n\nconst useColorMapping = () => {\n  const colorMap = React.useRef(new Map<string, string>());\n  return colorMap;\n};\n\n/**\n * DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n  HTMLDivElement,\n  DeclarativeChartProps\n>((props, forwardedRef) => {\n  const { plotlySchema } = props.chartSchema;\n  const xValues = plotlySchema.data[0].x;\n  const isXDate = isDateArray(xValues);\n  const isXNumber = isNumberArray(xValues);\n  const colorMap = useColorMapping();\n\n  switch (plotlySchema.data[0].type) {\n    case 'pie':\n      return <DonutChart {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap)} />;\n    case 'bar':\n      const orientation = plotlySchema.data[0].orientation;\n      if (orientation === 'h') {\n        return (\n          <HorizontalBarChartWithAxis {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap)} />\n        );\n      } else {\n        if (['group', 'overlay'].includes(plotlySchema?.layout?.barmode)) {\n          return <GroupedVerticalBarChart {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap)} />;\n        }\n        return <VerticalStackedBarChart {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap)} />;\n      }\n    case 'scatter':\n      const isAreaChart = plotlySchema.data.some((series: any) => series.fill === 'tonexty');\n      if (isXDate || isXNumber) {\n        if (isAreaChart) {\n          return <AreaChart {...transformPlotlyJsonToScatterChartProps(plotlySchema, true, colorMap)} />;\n        }\n        return <LineChart {...transformPlotlyJsonToScatterChartProps(plotlySchema, false, colorMap)} />;\n      }\n      return <VerticalStackedBarChart {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap)} />;\n    case 'heatmap':\n      return <HeatMapChart {...transformPlotlyJsonToHeatmapProps(plotlySchema)} />;\n    case 'sankey':\n      return <SankeyChart {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap)} />;\n    case 'indicator':\n      if (plotlySchema?.data?.[0]?.mode?.includes('gauge')) {\n        return <GaugeChart {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap)} />;\n      }\n      return <div>Unsupported Schema</div>;\n    case 'histogram':\n      return <VerticalBarChart {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap)} />;\n    default:\n      return <div>Unsupported Schema</div>;\n  }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"]}

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { IDonutChartProps } from '../DonutChart/index';
+import { ISankeyChartProps } from '../SankeyChart/index';
+import { IVerticalStackedBarChartProps } from '../VerticalStackedBarChart/index';
+import { IHorizontalBarChartWithAxisProps } from '../HorizontalBarChartWithAxis/index';
+import { ILineChartProps } from '../LineChart/index';
+import { IAreaChartProps } from '../AreaChart/index';
+import { IHeatMapChartProps } from '../HeatMapChart/index';
+import { IGaugeChartProps } from '../GaugeChart/index';
+import { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index';
+import { IVerticalBarChartProps } from '../VerticalBarChart/index';
+export declare const isDateArray: (array: any[]) => boolean;
+export declare const isNumberArray: (array: any[]) => boolean;
+export declare const getColor: (legendLabel: string, colorMap: React.MutableRefObject<Map<string, string>>) => string;
+export declare const transformPlotlyJsonToDonutProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>) => IDonutChartProps;
+export declare const transformPlotlyJsonToVSBCProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>) => IVerticalStackedBarChartProps;
+export declare const transformPlotlyJsonToGVBCProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>) => IGroupedVerticalBarChartProps;
+export declare const transformPlotlyJsonToVBCProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>) => IVerticalBarChartProps;
+export declare const transformPlotlyJsonToScatterChartProps: (jsonObj: any, isAreaChart: boolean, colorMap: React.MutableRefObject<Map<string, string>>) => ILineChartProps | IAreaChartProps;
+export declare const transformPlotlyJsonToHorizontalBarWithAxisProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>) => IHorizontalBarChartWithAxisProps;
+export declare const transformPlotlyJsonToHeatmapProps: (jsonObj: any) => IHeatMapChartProps;
+export declare const transformPlotlyJsonToSankeyProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>) => ISankeyChartProps;
+export declare const transformPlotlyJsonToGaugeProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>) => IGaugeChartProps;
+/**
+ * Interate iteratively through the trace object and find all the array attributes.
+ * 1 trace record = 1 series of data
+ * @param trace
+ */
+export declare function findArrayAttributes(trace: any): void;

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -0,0 +1,460 @@
+import { __assign } from "tslib";
+import { bin as d3Bin, extent as d3Extent, sum as d3Sum, min as d3Min, max as d3Max, merge as d3Merge } 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';
+var isDate = function (value) { return !isNaN(Date.parse(value)); };
+var isNumber = function (value) { return !isNaN(parseFloat(value)) && isFinite(value); };
+export var isDateArray = function (array) { return isArrayOrTypedArray(array) && array.every(isDate); };
+export var isNumberArray = function (array) { return isArrayOrTypedArray(array) && array.every(isNumber); };
+export var getColor = function (legendLabel, colorMap) {
+    if (!colorMap.current.has(legendLabel)) {
+        var nextColor = getNextColor(colorMap.current.size + 1);
+        colorMap.current.set(legendLabel, nextColor);
+        return nextColor;
+    }
+    return colorMap.current.get(legendLabel);
+};
+export var transformPlotlyJsonToDonutProps = function (jsonObj, colorMap) {
+    var _a, _b;
+    var data = jsonObj.data, layout = jsonObj.layout;
+    var firstData = data[0];
+    var donutData = (_a = firstData.labels) === null || _a === void 0 ? void 0 : _a.map(function (label, index) {
+        var _a;
+        var color = getColor(label, colorMap);
+        return {
+            legend: label,
+            data: (_a = firstData.values) === null || _a === void 0 ? void 0 : _a[index],
+            color: color,
+        };
+    });
+    var width = (layout === null || layout === void 0 ? void 0 : layout.width) || 440;
+    var height = (layout === null || layout === void 0 ? void 0 : layout.height) || 220;
+    var hideLabels = firstData.textinfo ? !['value', 'percent'].includes(firstData.textinfo) : false;
+    var donutMarginHorizontal = hideLabels ? 0 : 80;
+    var donutMarginVertical = 40 + (hideLabels ? 0 : 40);
+    var innerRadius = firstData.hole
+        ? firstData.hole * (Math.min(width - donutMarginHorizontal, height - donutMarginVertical) / 2)
+        : 0;
+    var styles = {
+        root: {
+            '[class^="arcLabel"]': {
+                fontSize: (_b = firstData.textfont) === null || _b === void 0 ? void 0 : _b.size,
+            },
+        },
+    };
+    return {
+        data: {
+            chartTitle: layout === null || layout === void 0 ? void 0 : layout.title,
+            chartData: donutData,
+        },
+        hideLegend: (layout === null || layout === void 0 ? void 0 : layout.showlegend) === false ? true : false,
+        width: width,
+        height: height,
+        innerRadius: innerRadius,
+        hideLabels: hideLabels,
+        showLabelsInPercent: firstData.textinfo ? firstData.textinfo === 'percent' : true,
+        styles: styles,
+    };
+};
+export var transformPlotlyJsonToVSBCProps = function (jsonObj, colorMap) {
+    var data = jsonObj.data, layout = jsonObj.layout;
+    var mapXToDataPoints = {};
+    var yMaxValue = 0;
+    data.forEach(function (series, index1) {
+        var _a;
+        (_a = series.x) === null || _a === void 0 ? void 0 : _a.forEach(function (x, index2) {
+            var _a, _b, _c;
+            if (!mapXToDataPoints[x]) {
+                mapXToDataPoints[x] = { xAxisPoint: x, chartData: [], lineData: [] };
+            }
+            var legend = series.name || "Series ".concat(index1 + 1);
+            if (series.type === 'bar') {
+                var color = getColor(legend, colorMap);
+                mapXToDataPoints[x].chartData.push({
+                    legend: legend,
+                    data: (_a = series.y) === null || _a === void 0 ? void 0 : _a[index2],
+                    color: color,
+                });
+            }
+            else if (series.type === 'line') {
+                var color = getColor(legend, colorMap);
+                mapXToDataPoints[x].lineData.push({
+                    legend: legend,
+                    y: (_b = series.y) === null || _b === void 0 ? void 0 : _b[index2],
+                    color: color,
+                });
+            }
+            yMaxValue = Math.max(yMaxValue, (_c = series.y) === null || _c === void 0 ? void 0 : _c[index2]);
+        });
+    });
+    return {
+        data: Object.values(mapXToDataPoints),
+        chartTitle: layout === null || layout === void 0 ? void 0 : layout.title,
+        // width: layout?.width,
+        // height: layout?.height,
+        barWidth: 'auto',
+        yMaxValue: yMaxValue,
+    };
+};
+export var transformPlotlyJsonToGVBCProps = function (jsonObj, colorMap) {
+    var data = jsonObj.data, layout = jsonObj.layout;
+    var mapXToDataPoints = {};
+    data.forEach(function (series, index1) {
+        var _a;
+        (_a = series.x) === null || _a === void 0 ? void 0 : _a.forEach(function (x, index2) {
+            var _a;
+            if (!mapXToDataPoints[x]) {
+                mapXToDataPoints[x] = { name: x.toString(), series: [] };
+            }
+            if (series.type === 'bar') {
+                var legend = series.name || "Series ".concat(index1 + 1);
+                var color = getColor(legend, colorMap);
+                mapXToDataPoints[x].series.push({
+                    key: legend,
+                    data: (_a = series.y) === null || _a === void 0 ? void 0 : _a[index2],
+                    color: color,
+                    legend: legend,
+                });
+            }
+        });
+    });
+    return {
+        data: Object.values(mapXToDataPoints),
+        chartTitle: layout === null || layout === void 0 ? void 0 : layout.title,
+        // width: layout?.width,
+        // height: layout?.height,
+        barwidth: 'auto',
+    };
+};
+export var transformPlotlyJsonToVBCProps = function (jsonObj, colorMap) {
+    var data = jsonObj.data, layout = jsonObj.layout;
+    var vbcData = [];
+    data.forEach(function (series, index) {
+        var _a, _b, _c;
+        if (!series.x) {
+            return;
+        }
+        var scale = d3ScaleLinear()
+            .domain(d3Extent(series.x))
+            .nice();
+        var _d = scale.domain(), xMin = _d[0], xMax = _d[1];
+        xMin = typeof ((_a = series.xbins) === null || _a === void 0 ? void 0 : _a.start) === 'number' ? series.xbins.start : xMin;
+        xMax = typeof ((_b = series.xbins) === null || _b === void 0 ? void 0 : _b.end) === 'number' ? series.xbins.end : xMax;
+        var bin = d3Bin().domain([xMin, xMax]);
+        if (typeof ((_c = series.xbins) === null || _c === void 0 ? void 0 : _c.size) === 'number') {
+            var thresholds = [];
+            var th = xMin;
+            var precision = d3PrecisionFixed(series.xbins.size);
+            var format = d3Format(".".concat(precision, "f"));
+            while (th < xMax + series.xbins.size) {
+                thresholds.push(parseFloat(format(th)));
+                th += series.xbins.size;
+            }
+            xMin = thresholds[0];
+            xMax = thresholds[thresholds.length - 1];
+            bin.domain([xMin, xMax]).thresholds(thresholds);
+        }
+        var buckets = bin(series.x);
+        // If the start or end of xbins is specified, then the number of datapoints may become less than x.length
+        var totalDataPoints = d3Merge(buckets).length;
+        buckets.forEach(function (bucket) {
+            var legend = series.name || "Series ".concat(index + 1);
+            var color = getColor(legend, colorMap);
+            var 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);
+            }
+            vbcData.push({
+                x: (bucket.x1 + bucket.x0) / 2,
+                y: y,
+                legend: legend,
+                color: color,
+                xAxisCalloutData: "[".concat(bucket.x0, " - ").concat(bucket.x1, ")"),
+            });
+        });
+    });
+    return {
+        data: vbcData,
+        chartTitle: layout === null || layout === void 0 ? void 0 : layout.title,
+        // width: layout?.width,
+        // height: layout?.height,
+        hideLegend: true,
+        barWidth: 24,
+    };
+};
+export var transformPlotlyJsonToScatterChartProps = function (jsonObj, isAreaChart, colorMap) {
+    var data = jsonObj.data, layout = jsonObj.layout;
+    var chartData = data.map(function (series, index) {
+        var xValues = series.x;
+        var isString = typeof xValues[0] === 'string';
+        var isXDate = isDateArray(xValues);
+        var isXNumber = isNumberArray(xValues);
+        var legend = series.name || "Series ".concat(index + 1);
+        var lineColor = getColor(legend, colorMap);
+        return {
+            legend: legend,
+            data: xValues.map(function (x, i) { return ({
+                x: isString ? (isXDate ? new Date(x) : isXNumber ? parseFloat(x) : x) : x,
+                y: series.y[i],
+            }); }),
+            color: lineColor,
+        };
+    });
+    var chartProps = {
+        chartTitle: layout.title || '',
+        lineChartData: chartData,
+    };
+    if (isAreaChart) {
+        return {
+            data: chartProps,
+        };
+    }
+    else {
+        return {
+            data: chartProps,
+        };
+    }
+};
+export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (jsonObj, colorMap) {
+    var _a, _b;
+    var data = jsonObj.data, layout = jsonObj.layout;
+    var chartData = data
+        .map(function (series, index) {
+        return series.y.map(function (yValue, i) {
+            var color = getColor(yValue, colorMap);
+            return {
+                x: series.x[i],
+                y: yValue,
+                legend: yValue,
+                color: color,
+            };
+        });
+    })
+        .flat();
+    var chartHeight = layout.height || 350;
+    var margin = ((_a = layout.margin) === null || _a === void 0 ? void 0 : _a.l) || 0;
+    var padding = ((_b = layout.margin) === null || _b === void 0 ? void 0 : _b.pad) || 0;
+    var availableHeight = chartHeight - margin - padding;
+    var numberOfBars = data[0].y.length;
+    var gapFactor = 0.5;
+    var barHeight = availableHeight / (numberOfBars * (1 + gapFactor));
+    return {
+        data: chartData,
+        chartTitle: layout.title || '',
+        barHeight: barHeight,
+        showYAxisLables: true,
+        styles: {
+            root: {
+                height: chartHeight,
+                width: layout.width || 600,
+            },
+        },
+    };
+};
+export var transformPlotlyJsonToHeatmapProps = function (jsonObj) {
+    var _a, _b, _c;
+    var data = jsonObj.data, layout = jsonObj.layout;
+    var firstData = data[0];
+    var heatmapDataPoints = [];
+    var zMin = Number.POSITIVE_INFINITY;
+    var zMax = Number.NEGATIVE_INFINITY;
+    (_a = firstData.x) === null || _a === void 0 ? void 0 : _a.forEach(function (xVal, xIdx) {
+        var _a;
+        (_a = firstData.y) === null || _a === void 0 ? void 0 : _a.forEach(function (yVal, yIdx) {
+            var _a, _b, _c, _d;
+            var zVal = (_b = (_a = firstData.z) === null || _a === void 0 ? void 0 : _a[yIdx]) === null || _b === void 0 ? void 0 : _b[xIdx];
+            heatmapDataPoints.push({
+                x: ((_c = layout.xaxis) === null || _c === void 0 ? void 0 : _c.type) === 'date' ? new Date(xVal) : xVal,
+                y: ((_d = layout.yaxis) === null || _d === void 0 ? void 0 : _d.type) === 'date' ? new Date(yVal) : yVal,
+                value: zVal,
+            });
+            zMin = Math.min(zMin, zVal);
+            zMax = Math.max(zMax, zVal);
+        });
+    });
+    var heatmapData = {
+        legend: firstData.name || '',
+        data: heatmapDataPoints,
+        value: 0,
+    };
+    // Convert normalized values to actual values
+    var domainValuesForColorScale = (_b = firstData.colorscale) === null || _b === void 0 ? void 0 : _b.map(function (arr) { return arr[0] * (zMax - zMin) + zMin; });
+    var rangeValuesForColorScale = (_c = firstData.colorscale) === null || _c === void 0 ? void 0 : _c.map(function (arr) { return arr[1]; });
+    return {
+        data: [heatmapData],
+        domainValuesForColorScale: domainValuesForColorScale,
+        rangeValuesForColorScale: rangeValuesForColorScale,
+        hideLegend: true,
+    };
+};
+export var transformPlotlyJsonToSankeyProps = function (jsonObj, colorMap) {
+    var _a;
+    var data = jsonObj.data, layout = jsonObj.layout;
+    var _b = data[0], link = _b.link, node = _b.node;
+    var validLinks = link.value
+        .map(function (val, index) { return ({
+        value: val,
+        source: link.source[index],
+        target: link.target[index],
+    }); })
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        //@ts-expect-error Dynamic link object. Ignore for now.
+        .filter(function (x) { return x.source !== x.target; }); // Filter out self-references (circular links)
+    var sankeyChartData = {
+        nodes: node.label.map(function (label, index) {
+            var color = getColor(label, colorMap);
+            return {
+                nodeId: index,
+                name: label,
+                color: color,
+            };
+        }),
+        links: validLinks.map(function (validLink, index) {
+            return __assign({}, validLink);
+        }),
+    };
+    var width = (layout === null || layout === void 0 ? void 0 : layout.width) || 440;
+    var height = (layout === null || layout === void 0 ? void 0 : layout.height) || 220;
+    var styles = {
+        root: {
+            fontSize: (_a = layout.font) === null || _a === void 0 ? void 0 : _a.size,
+        },
+    };
+    var shouldResize = width + height;
+    return {
+        data: {
+            chartTitle: layout === null || layout === void 0 ? void 0 : layout.title,
+            SankeyChartData: sankeyChartData,
+        },
+        width: width,
+        height: height,
+        styles: styles,
+        shouldResize: shouldResize,
+        enableReflow: true,
+    };
+};
+export var transformPlotlyJsonToGaugeProps = function (jsonObj, colorMap) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var data = jsonObj.data, layout = jsonObj.layout;
+    var firstData = data[0];
+    var segments = (_b = (_a = firstData.gauge) === null || _a === void 0 ? void 0 : _a.steps) === null || _b === void 0 ? void 0 : _b.map(function (step, index) {
+        var _a, _b;
+        var legend = step.name || "Segment ".concat(index + 1);
+        var color = getColor(legend, colorMap);
+        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 sublabel;
+    var sublabelColor;
+    if (typeof ((_c = firstData.delta) === null || _c === void 0 ? void 0 : _c.reference) === 'number') {
+        var diff = firstData.value - firstData.delta.reference;
+        if (diff >= 0) {
+            sublabel = "\u25B2 ".concat(diff);
+            var color = getColor(((_d = firstData.delta.increasing) === null || _d === void 0 ? void 0 : _d.color) || '', colorMap);
+            sublabelColor = color;
+        }
+        else {
+            sublabel = "\u25BC ".concat(Math.abs(diff));
+            var color = getColor(((_e = firstData.delta.decreasing) === null || _e === void 0 ? void 0 : _e.color) || '', colorMap);
+            sublabelColor = color;
+        }
+    }
+    var styles = {
+        sublabel: {
+            fill: sublabelColor,
+        },
+    };
+    return {
+        segments: segments,
+        chartValue: firstData.value,
+        chartTitle: (_f = firstData.title) === null || _f === void 0 ? void 0 : _f.text,
+        sublabel: sublabel,
+        // range values can be null
+        minValue: (_k = (_j = (_h = (_g = firstData.gauge) === null || _g === void 0 ? void 0 : _g.axis) === null || _h === void 0 ? void 0 : _h.range) === null || _j === void 0 ? void 0 : _j[0]) !== null && _k !== void 0 ? _k : undefined,
+        maxValue: (_p = (_o = (_m = (_l = firstData.gauge) === null || _l === void 0 ? void 0 : _l.axis) === null || _m === void 0 ? void 0 : _m.range) === null || _o === void 0 ? void 0 : _o[1]) !== null && _p !== void 0 ? _p : undefined,
+        chartValueFormat: function () { return firstData.value; },
+        width: layout === null || layout === void 0 ? void 0 : layout.width,
+        height: layout === null || layout === void 0 ? void 0 : layout.height,
+        hideLegend: true,
+        styles: styles,
+    };
+};
+function isTypedArray(a) {
+    return ArrayBuffer.isView(a) && !(a instanceof DataView);
+}
+function isArrayOrTypedArray(a) {
+    return Array.isArray(a) || isTypedArray(a);
+}
+function isPlainObject(obj) {
+    if (window && window.process && window.process.versions) {
+        return Object.prototype.toString.call(obj) === '[object Object]';
+    }
+    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, '');
+    for (var _i = 0, arrayAttributes_1 = arrayAttributes; _i < arrayAttributes_1.length; _i++) {
+        var attribute = arrayAttributes_1[_i];
+        console.log(attribute);
+    }
+}
+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 + '.');
+        }
+    }
+}
+//# sourceMappingURL=PlotlySchemaAdapter.js.map