@fluentui/react-charting 5.23.18 → 5.23.19

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,67 @@
+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, } 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';
+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");
+        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} 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';\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    default:\n      return <div>Unsupported Schema</div>;\n  }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"]}

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

@@ -0,0 +1,27 @@
+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';
+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 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,387 @@
+import { __assign } from "tslib";
+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,
+        };
+    });
+    // TODO: innerRadius as a fraction needs to be supported internally. The pixel value depends on
+    // chart dimensions, arc label dimensions and the legend container height, all of which are subject to change.
+    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,
+        // TODO: Render custom hover card based on textinfo
+        // onRenderCalloutPerDataPoint: undefined,
+    };
+};
+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,
+    };
+};
+// TODO: Add support for continuous x-axis in grouped vertical bar chart
+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 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,
+            },
+        },
+    };
+};
+// FIXME: Order of string axis ticks does not match the order in plotly json
+// TODO: Add support for custom hover card
+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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlotlySchemaAdapter.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/PlotlySchemaAdapter.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable one-var */\n/* eslint-disable vars-on-top */\n/* eslint-disable no-var */\n/* eslint-disable no-console */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from 'react';\nimport { IDonutChartProps } from '../DonutChart/index';\nimport {\n  IChartDataPoint,\n  IChartProps,\n  IHorizontalBarChartWithAxisDataPoint,\n  ILineChartPoints,\n  IVerticalStackedChartProps,\n  IHeatMapChartData,\n  IHeatMapChartDataPoint,\n  IGroupedVerticalBarChartData,\n} from '../../types/IDataPoint';\nimport { ISankeyChartProps } from '../SankeyChart/index';\nimport { IVerticalStackedBarChartProps } from '../VerticalStackedBarChart/index';\nimport { IHorizontalBarChartWithAxisProps } from '../HorizontalBarChartWithAxis/index';\nimport { ILineChartProps } from '../LineChart/index';\nimport { IAreaChartProps } from '../AreaChart/index';\nimport { IHeatMapChartProps } from '../HeatMapChart/index';\nimport { getNextColor } from '../../utilities/colors';\nimport { IGaugeChartProps, IGaugeChartSegment } from '../GaugeChart/index';\nimport { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index';\n\nconst isDate = (value: any): boolean => !isNaN(Date.parse(value));\nconst isNumber = (value: any): boolean => !isNaN(parseFloat(value)) && isFinite(value);\nexport const isDateArray = (array: any[]): boolean => isArrayOrTypedArray(array) && array.every(isDate);\nexport const isNumberArray = (array: any[]): boolean => isArrayOrTypedArray(array) && array.every(isNumber);\n\nexport const getColor = (legendLabel: string, colorMap: React.MutableRefObject<Map<string, string>>): string => {\n  if (!colorMap.current.has(legendLabel)) {\n    const nextColor = getNextColor(colorMap.current.size + 1);\n    colorMap.current.set(legendLabel, nextColor);\n    return nextColor;\n  }\n\n  return colorMap.current.get(legendLabel) as string;\n};\n\nexport const transformPlotlyJsonToDonutProps = (\n  jsonObj: any,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n): IDonutChartProps => {\n  const { data, layout } = jsonObj;\n  const firstData = data[0];\n\n  const donutData = firstData.labels?.map((label: string, index: number): IChartDataPoint => {\n    const color = getColor(label, colorMap);\n    return {\n      legend: label,\n      data: firstData.values?.[index],\n      color,\n    };\n  });\n\n  // TODO: innerRadius as a fraction needs to be supported internally. The pixel value depends on\n  // chart dimensions, arc label dimensions and the legend container height, all of which are subject to change.\n  const width: number = layout?.width || 440;\n  const height: number = layout?.height || 220;\n  const hideLabels = firstData.textinfo ? !['value', 'percent'].includes(firstData.textinfo) : false;\n  const donutMarginHorizontal = hideLabels ? 0 : 80;\n  const donutMarginVertical = 40 + (hideLabels ? 0 : 40);\n  const innerRadius: number = firstData.hole\n    ? firstData.hole * (Math.min(width - donutMarginHorizontal, height - donutMarginVertical) / 2)\n    : 0;\n\n  const styles: IDonutChartProps['styles'] = {\n    root: {\n      '[class^=\"arcLabel\"]': {\n        fontSize: firstData.textfont?.size,\n      },\n    },\n  };\n\n  return {\n    data: {\n      chartTitle: layout?.title,\n      chartData: donutData,\n    },\n    hideLegend: layout?.showlegend === false ? true : false,\n    width,\n    height,\n    innerRadius,\n    hideLabels,\n    showLabelsInPercent: firstData.textinfo ? firstData.textinfo === 'percent' : true,\n    styles,\n    // TODO: Render custom hover card based on textinfo\n    // onRenderCalloutPerDataPoint: undefined,\n  };\n};\n\nexport const transformPlotlyJsonToVSBCProps = (\n  jsonObj: any,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n): IVerticalStackedBarChartProps => {\n  const { data, layout } = jsonObj;\n  const mapXToDataPoints: { [key: string]: IVerticalStackedChartProps } = {};\n  let yMaxValue = 0;\n\n  data.forEach((series: any, index1: number) => {\n    series.x?.forEach((x: string | number, index2: number) => {\n      if (!mapXToDataPoints[x]) {\n        mapXToDataPoints[x] = { xAxisPoint: x, chartData: [], lineData: [] };\n      }\n      const legend: string = series.name || `Series ${index1 + 1}`;\n      if (series.type === 'bar') {\n        const color = getColor(legend, colorMap);\n        mapXToDataPoints[x].chartData.push({\n          legend,\n          data: series.y?.[index2],\n          color,\n        });\n      } else if (series.type === 'line') {\n        const color = getColor(legend, colorMap);\n        mapXToDataPoints[x].lineData!.push({\n          legend,\n          y: series.y?.[index2],\n          color,\n        });\n      }\n\n      yMaxValue = Math.max(yMaxValue, series.y?.[index2]);\n    });\n  });\n\n  return {\n    data: Object.values(mapXToDataPoints),\n    chartTitle: layout?.title,\n    // width: layout?.width,\n    // height: layout?.height,\n    barWidth: 'auto',\n    yMaxValue,\n  };\n};\n\n// TODO: Add support for continuous x-axis in grouped vertical bar chart\nexport const transformPlotlyJsonToGVBCProps = (\n  jsonObj: any,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n): IGroupedVerticalBarChartProps => {\n  const { data, layout } = jsonObj;\n  const mapXToDataPoints: Record<string, IGroupedVerticalBarChartData> = {};\n\n  data.forEach((series: any, index1: number) => {\n    series.x?.forEach((x: string | number, index2: number) => {\n      if (!mapXToDataPoints[x]) {\n        mapXToDataPoints[x] = { name: x.toString(), series: [] };\n      }\n      if (series.type === 'bar') {\n        const legend: string = series.name || `Series ${index1 + 1}`;\n        const color = getColor(legend, colorMap);\n\n        mapXToDataPoints[x].series.push({\n          key: legend,\n          data: series.y?.[index2],\n          color,\n          legend,\n        });\n      }\n    });\n  });\n\n  return {\n    data: Object.values(mapXToDataPoints),\n    chartTitle: layout?.title,\n    // width: layout?.width,\n    // height: layout?.height,\n    barwidth: 'auto',\n  };\n};\n\nexport const transformPlotlyJsonToScatterChartProps = (\n  jsonObj: any,\n  isAreaChart: boolean,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n): ILineChartProps | IAreaChartProps => {\n  const { data, layout } = jsonObj;\n\n  const chartData: ILineChartPoints[] = data.map((series: any, index: number) => {\n    const xValues = series.x;\n    const isString = typeof xValues[0] === 'string';\n    const isXDate = isDateArray(xValues);\n    const isXNumber = isNumberArray(xValues);\n    const legend = series.name || `Series ${index + 1}`;\n    const lineColor = getColor(legend, colorMap);\n\n    return {\n      legend,\n      data: xValues.map((x: string | number, i: number) => ({\n        x: isString ? (isXDate ? new Date(x) : isXNumber ? parseFloat(x as string) : x) : x,\n        y: series.y[i],\n      })),\n      color: lineColor,\n    };\n  });\n\n  const chartProps: IChartProps = {\n    chartTitle: layout.title || '',\n    lineChartData: chartData,\n  };\n\n  if (isAreaChart) {\n    return {\n      data: chartProps,\n    } as IAreaChartProps;\n  } else {\n    return {\n      data: chartProps,\n    } as ILineChartProps;\n  }\n};\n\nexport const transformPlotlyJsonToHorizontalBarWithAxisProps = (\n  jsonObj: any,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n): IHorizontalBarChartWithAxisProps => {\n  const { data, layout } = jsonObj;\n\n  const chartData: IHorizontalBarChartWithAxisDataPoint[] = data\n    .map((series: any, index: number) => {\n      return series.y.map((yValue: string, i: number) => {\n        const color = getColor(yValue, colorMap);\n        return {\n          x: series.x[i],\n          y: yValue,\n          legend: yValue,\n          color,\n        };\n      });\n    })\n    .flat();\n\n  const chartHeight = layout.height || 350;\n  const margin = layout.margin?.l || 0;\n  const padding = layout.margin?.pad || 0;\n  const availableHeight = chartHeight - margin - padding;\n  const numberOfBars = data[0].y.length;\n  const gapFactor = 0.5;\n  const barHeight = availableHeight / (numberOfBars * (1 + gapFactor));\n\n  return {\n    data: chartData,\n    chartTitle: layout.title || '',\n    barHeight,\n    showYAxisLables: true,\n    styles: {\n      root: {\n        height: chartHeight,\n        width: layout.width || 600,\n      },\n    },\n  };\n};\n\n// FIXME: Order of string axis ticks does not match the order in plotly json\n// TODO: Add support for custom hover card\nexport const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartProps => {\n  const { data, layout } = jsonObj;\n  const firstData = data[0];\n  const heatmapDataPoints: IHeatMapChartDataPoint[] = [];\n  let zMin = Number.POSITIVE_INFINITY;\n  let zMax = Number.NEGATIVE_INFINITY;\n\n  firstData.x?.forEach((xVal: any, xIdx: number) => {\n    firstData.y?.forEach((yVal: any, yIdx: number) => {\n      const zVal = firstData.z?.[yIdx]?.[xIdx];\n\n      heatmapDataPoints.push({\n        x: layout.xaxis?.type === 'date' ? new Date(xVal) : xVal,\n        y: layout.yaxis?.type === 'date' ? new Date(yVal) : yVal,\n        value: zVal,\n      });\n\n      zMin = Math.min(zMin, zVal);\n      zMax = Math.max(zMax, zVal);\n    });\n  });\n  const heatmapData: IHeatMapChartData = {\n    legend: firstData.name || '',\n    data: heatmapDataPoints,\n    value: 0,\n  };\n\n  // Convert normalized values to actual values\n  const domainValuesForColorScale: number[] = firstData.colorscale?.map((arr: any) => arr[0] * (zMax - zMin) + zMin);\n  const rangeValuesForColorScale: string[] = firstData.colorscale?.map((arr: any) => arr[1]);\n\n  return {\n    data: [heatmapData],\n    domainValuesForColorScale,\n    rangeValuesForColorScale,\n    hideLegend: true,\n  };\n};\n\nexport const transformPlotlyJsonToSankeyProps = (\n  jsonObj: any,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n): ISankeyChartProps => {\n  const { data, layout } = jsonObj;\n  const { link, node } = data[0];\n  const validLinks = link.value\n    .map((val: number, index: number) => ({\n      value: val,\n      source: link.source[index],\n      target: link.target[index],\n    }))\n    // eslint-disable-next-line @typescript-eslint/no-shadow\n    //@ts-expect-error Dynamic link object. Ignore for now.\n    .filter(x => x.source !== x.target); // Filter out self-references (circular links)\n\n  const sankeyChartData = {\n    nodes: node.label.map((label: string, index: number) => {\n      const color = getColor(label, colorMap);\n\n      return {\n        nodeId: index,\n        name: label,\n        color,\n      };\n    }),\n    links: validLinks.map((validLink: any, index: number) => {\n      return {\n        ...validLink,\n      };\n    }),\n  };\n\n  const width: number = layout?.width || 440;\n  const height: number = layout?.height || 220;\n  const styles: ISankeyChartProps['styles'] = {\n    root: {\n      fontSize: layout.font?.size,\n    },\n  };\n  const shouldResize: number = width + height;\n  return {\n    data: {\n      chartTitle: layout?.title,\n      SankeyChartData: sankeyChartData,\n    },\n    width,\n    height,\n    styles,\n    shouldResize,\n    enableReflow: true,\n  };\n};\n\nexport const transformPlotlyJsonToGaugeProps = (\n  jsonObj: any,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n): IGaugeChartProps => {\n  const { data, layout } = jsonObj;\n  const firstData = data[0];\n\n  const segments = firstData.gauge?.steps?.map((step: any, index: number): IGaugeChartSegment => {\n    const legend = step.name || `Segment ${index + 1}`;\n    const color = getColor(legend, colorMap);\n    return {\n      legend,\n      size: step.range?.[1] - step.range?.[0],\n      color,\n    };\n  });\n\n  let sublabel: string | undefined;\n  let sublabelColor: string | undefined;\n  if (typeof firstData.delta?.reference === 'number') {\n    const diff = firstData.value - firstData.delta.reference;\n    if (diff >= 0) {\n      sublabel = `\\u25B2 ${diff}`;\n      const color = getColor(firstData.delta.increasing?.color || '', colorMap);\n      sublabelColor = color;\n    } else {\n      sublabel = `\\u25BC ${Math.abs(diff)}`;\n      const color = getColor(firstData.delta.decreasing?.color || '', colorMap);\n      sublabelColor = color;\n    }\n  }\n\n  const styles: IGaugeChartProps['styles'] = {\n    sublabel: {\n      fill: sublabelColor,\n    },\n  };\n\n  return {\n    segments,\n    chartValue: firstData.value,\n    chartTitle: firstData.title?.text,\n    sublabel,\n    // range values can be null\n    minValue: firstData.gauge?.axis?.range?.[0] ?? undefined,\n    maxValue: firstData.gauge?.axis?.range?.[1] ?? undefined,\n    chartValueFormat: () => firstData.value,\n    width: layout?.width,\n    height: layout?.height,\n    hideLegend: true,\n    styles,\n  };\n};\n\nfunction isTypedArray(a: any) {\n  return ArrayBuffer.isView(a) && !(a instanceof DataView);\n}\n\nfunction isArrayOrTypedArray(a: any) {\n  return Array.isArray(a) || isTypedArray(a);\n}\n\nfunction isPlainObject(obj: any) {\n  if (window && window.process && window.process.versions) {\n    return Object.prototype.toString.call(obj) === '[object Object]';\n  }\n\n  return (\n    Object.prototype.toString.call(obj) === '[object Object]' &&\n    Object.getPrototypeOf(obj).hasOwnProperty('hasOwnProperty')\n  );\n}\n\nvar arrayAttributes: any[] = [];\nvar stack: any[] = [];\nvar isArrayStack: any[] = [];\nvar baseContainer: any, baseAttrName: any;\n/**\n * Interate iteratively through the trace object and find all the array attributes.\n * 1 trace record = 1 series of data\n * @param trace\n */\nexport function findArrayAttributes(trace: any) {\n  // Init basecontainer and baseAttrName\n  crawlIntoTrace(baseContainer, 0, '');\n  for (const attribute of arrayAttributes) {\n    console.log(attribute);\n  }\n}\n\nfunction crawlIntoTrace(container: any, i: number, astrPartial: any) {\n  var item = container[stack[i]];\n  var newAstrPartial = astrPartial + stack[i];\n  if (i === stack.length - 1) {\n    if (isArrayOrTypedArray(item)) {\n      arrayAttributes.push(baseAttrName + newAstrPartial);\n    }\n  } else {\n    if (isArrayStack[i]) {\n      if (Array.isArray(item)) {\n        for (var j = 0; j < item.length; j++) {\n          if (isPlainObject(item[j])) {\n            crawlIntoTrace(item[j], i + 1, newAstrPartial + '[' + j + '].');\n          }\n        }\n      }\n    } else if (isPlainObject(item)) {\n      crawlIntoTrace(item, i + 1, newAstrPartial + '.');\n    }\n  }\n}\n"]}

package/lib/index.d.ts

@@ -37,4 +37,6 @@ export { DataVizPalette, getColorFromToken, getNextColor } from './utilities/col
 export { DataVizGradientPalette, getGradientFromToken, getNextGradient } from './utilities/gradients';
 export type { IGaugeChartProps, IGaugeChartSegment, IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart';
 export { GaugeChart, GaugeChartVariant, GaugeValueFormat } from './GaugeChart';
+export type { DeclarativeChartProps, Schema } from './DeclarativeChart';
+export { DeclarativeChart } from './DeclarativeChart';
 import './version';