@fluentui/react-charting 5.23.18 → 5.23.19

package/lib/index.js

@@ -18,5 +18,6 @@ export { HorizontalBarChartWithAxis } from './HorizontalBarChartWithAxis';
 export { DataVizPalette, getColorFromToken, getNextColor } from './utilities/colors';
 export { DataVizGradientPalette, getGradientFromToken, getNextGradient } from './utilities/gradients';
 export { GaugeChart, GaugeChartVariant, GaugeValueFormat } from './GaugeChart';
+export { DeclarativeChart } from './DeclarativeChart';
 import './version';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAErF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAW1C,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAS3C,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAUtC,OAAO,EAAE,oBAAoB,EAAE,2BAA2B,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEvG,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAMtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAMpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AASpE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAwClD,OAAO,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAE3F,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAS5C,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAExE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAMxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACrF,OAAO,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEtG,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAE/E,OAAO,WAAW,CAAC","sourcesContent":["export type {\n  ChartDataMode,\n  IHorizontalBarChartProps,\n  IHorizontalBarChartStyleProps,\n  IHorizontalBarChartStyles,\n} from './HorizontalBarChart';\nexport { HorizontalBarChart, HorizontalBarChartVariant } from './HorizontalBarChart';\nexport type { IDonutChart, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './DonutChart';\nexport { DonutChart } from './DonutChart';\nexport type {\n  ILegend,\n  ILegendOverflowData,\n  ILegendStyleProps,\n  ILegendSubComponentStyles,\n  ILegendsProps,\n  ILegendsStyles,\n  IShapeProps,\n  LegendShape,\n} from './Legends';\nexport { Legends, Shape } from './Legends';\nexport type {\n  IColorFillBarData,\n  IColorFillBarsProps,\n  IEventsAnnotationProps,\n  ILineChartProps,\n  ILineChartStyleProps,\n  ILineChartStyles,\n} from './LineChart';\nexport { LineChart, Textbox } from './LineChart';\nexport type { IAreaChartProps, IAreaChartStyleProps, IAreaChartStyles } from './AreaChart';\nexport { AreaChart } from './AreaChart';\nexport type { IPieChart, IPieChartProps, IPieChartStyleProps, IPieChartStyles } from './PieChart';\nexport { PieChart } from './PieChart';\nexport type {\n  IMultiStackedBarChartProps,\n  IMultiStackedBarChartStyleProps,\n  IMultiStackedBarChartStyles,\n  IStackedBarChart,\n  IStackedBarChartProps,\n  IStackedBarChartStyleProps,\n  IStackedBarChartStyles,\n} from './StackedBarChart';\nexport { MultiStackedBarChart, MultiStackedBarChartVariant, StackedBarChart } from './StackedBarChart';\nexport type { IVerticalBarChartProps, IVerticalBarChartStyleProps, IVerticalBarChartStyles } from './VerticalBarChart';\nexport { VerticalBarChart } from './VerticalBarChart';\nexport type {\n  IVerticalStackedBarChartProps,\n  IVerticalStackedBarChartStyleProps,\n  IVerticalStackedBarChartStyles,\n} from './VerticalStackedBarChart';\nexport { VerticalStackedBarChart } from './VerticalStackedBarChart';\nexport type {\n  IGroupedVerticalBarChartProps,\n  IGroupedVerticalBarChartStyleProps,\n  IGroupedVerticalBarChartStyles,\n} from './GroupedVerticalBarChart';\nexport { GroupedVerticalBarChart } from './GroupedVerticalBarChart';\nexport type {\n  ICartesianChartProps,\n  ICartesianChartStyleProps,\n  ICartesianChartStyles,\n  IChildProps,\n  IModifiedCartesianChartProps,\n  IYValueHover,\n} from './CartesianChart';\nexport { CartesianChart } from './CartesianChart';\nexport type {\n  IAccessibilityProps,\n  IBasestate,\n  IChartDataPoint,\n  IChartProps,\n  ICustomizedCalloutData,\n  ICustomizedCalloutDataPoint,\n  IDataPoint,\n  IGVBarChartSeriesPoint,\n  IGVDataPoint,\n  IGVForBarChart,\n  IGVSingleDataPoint,\n  IGroupedVerticalBarChartData,\n  IHeatMapChartData,\n  IHeatMapChartDataPoint,\n  IHorizontalBarChartWithAxisDataPoint,\n  IHorizontalDataPoint,\n  ILegendDataItem,\n  ILineChartDataPoint,\n  ILineChartGap,\n  ILineChartLineOptions,\n  ILineChartPoints,\n  ILineDataInVerticalBarChart,\n  ILineDataInVerticalStackedBarChart,\n  IMargins,\n  IRefArrayData,\n  ISankeyChartData,\n  IVSChartDataPoint,\n  IVerticalBarChartDataPoint,\n  IVerticalStackedBarDataPoint,\n  IVerticalStackedChartProps,\n  SLink,\n  SNode,\n} from './types/index';\nexport type {\n  IChartHoverCardProps,\n  IChartHoverCardStyleProps,\n  IChartHoverCardStyles,\n} from './utilities/ChartHoverCard/index';\nexport { ChartHoverCard, getChartHoverCardStyles } from './utilities/ChartHoverCard/index';\nexport type { IHeatMapChartProps, IHeatMapChartStyleProps, IHeatMapChartStyles } from './HeatMapChart';\nexport { HeatMapChart } from './HeatMapChart';\nexport type {\n  ISankeyChartAccessibilityProps,\n  ISankeyChartProps,\n  ISankeyChartStrings,\n  ISankeyChartStyleProps,\n  ISankeyChartStyles,\n} from './SankeyChart';\nexport { SankeyChart } from './SankeyChart';\nexport type {\n  ITreeChartDataPoint,\n  ITreeDataStructure,\n  ITreeProps,\n  ITreeState,\n  ITreeStyleProps,\n  ITreeStyles,\n} from './TreeChart';\nexport { NodesComposition, TreeChart, TreeTraverse } from './TreeChart';\nexport type { ISparklineProps, ISparklineStyleProps, ISparklineStyles } from './Sparkline';\nexport { Sparkline } from './Sparkline';\nexport type {\n  IHorizontalBarChartWithAxisProps,\n  IHorizontalBarChartWithAxisStyleProps,\n  IHorizontalBarChartWithAxisStyles,\n} from './HorizontalBarChartWithAxis';\nexport { HorizontalBarChartWithAxis } from './HorizontalBarChartWithAxis';\nexport { DataVizPalette, getColorFromToken, getNextColor } from './utilities/colors';\nexport { DataVizGradientPalette, getGradientFromToken, getNextGradient } from './utilities/gradients';\nexport type { IGaugeChartProps, IGaugeChartSegment, IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart';\nexport { GaugeChart, GaugeChartVariant, GaugeValueFormat } from './GaugeChart';\n\nimport './version';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAErF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAW1C,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAS3C,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAUtC,OAAO,EAAE,oBAAoB,EAAE,2BAA2B,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEvG,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAMtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAMpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AASpE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAwClD,OAAO,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAE3F,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAS5C,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAExE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAMxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACrF,OAAO,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEtG,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAE/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,WAAW,CAAC","sourcesContent":["export type {\n  ChartDataMode,\n  IHorizontalBarChartProps,\n  IHorizontalBarChartStyleProps,\n  IHorizontalBarChartStyles,\n} from './HorizontalBarChart';\nexport { HorizontalBarChart, HorizontalBarChartVariant } from './HorizontalBarChart';\nexport type { IDonutChart, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './DonutChart';\nexport { DonutChart } from './DonutChart';\nexport type {\n  ILegend,\n  ILegendOverflowData,\n  ILegendStyleProps,\n  ILegendSubComponentStyles,\n  ILegendsProps,\n  ILegendsStyles,\n  IShapeProps,\n  LegendShape,\n} from './Legends';\nexport { Legends, Shape } from './Legends';\nexport type {\n  IColorFillBarData,\n  IColorFillBarsProps,\n  IEventsAnnotationProps,\n  ILineChartProps,\n  ILineChartStyleProps,\n  ILineChartStyles,\n} from './LineChart';\nexport { LineChart, Textbox } from './LineChart';\nexport type { IAreaChartProps, IAreaChartStyleProps, IAreaChartStyles } from './AreaChart';\nexport { AreaChart } from './AreaChart';\nexport type { IPieChart, IPieChartProps, IPieChartStyleProps, IPieChartStyles } from './PieChart';\nexport { PieChart } from './PieChart';\nexport type {\n  IMultiStackedBarChartProps,\n  IMultiStackedBarChartStyleProps,\n  IMultiStackedBarChartStyles,\n  IStackedBarChart,\n  IStackedBarChartProps,\n  IStackedBarChartStyleProps,\n  IStackedBarChartStyles,\n} from './StackedBarChart';\nexport { MultiStackedBarChart, MultiStackedBarChartVariant, StackedBarChart } from './StackedBarChart';\nexport type { IVerticalBarChartProps, IVerticalBarChartStyleProps, IVerticalBarChartStyles } from './VerticalBarChart';\nexport { VerticalBarChart } from './VerticalBarChart';\nexport type {\n  IVerticalStackedBarChartProps,\n  IVerticalStackedBarChartStyleProps,\n  IVerticalStackedBarChartStyles,\n} from './VerticalStackedBarChart';\nexport { VerticalStackedBarChart } from './VerticalStackedBarChart';\nexport type {\n  IGroupedVerticalBarChartProps,\n  IGroupedVerticalBarChartStyleProps,\n  IGroupedVerticalBarChartStyles,\n} from './GroupedVerticalBarChart';\nexport { GroupedVerticalBarChart } from './GroupedVerticalBarChart';\nexport type {\n  ICartesianChartProps,\n  ICartesianChartStyleProps,\n  ICartesianChartStyles,\n  IChildProps,\n  IModifiedCartesianChartProps,\n  IYValueHover,\n} from './CartesianChart';\nexport { CartesianChart } from './CartesianChart';\nexport type {\n  IAccessibilityProps,\n  IBasestate,\n  IChartDataPoint,\n  IChartProps,\n  ICustomizedCalloutData,\n  ICustomizedCalloutDataPoint,\n  IDataPoint,\n  IGVBarChartSeriesPoint,\n  IGVDataPoint,\n  IGVForBarChart,\n  IGVSingleDataPoint,\n  IGroupedVerticalBarChartData,\n  IHeatMapChartData,\n  IHeatMapChartDataPoint,\n  IHorizontalBarChartWithAxisDataPoint,\n  IHorizontalDataPoint,\n  ILegendDataItem,\n  ILineChartDataPoint,\n  ILineChartGap,\n  ILineChartLineOptions,\n  ILineChartPoints,\n  ILineDataInVerticalBarChart,\n  ILineDataInVerticalStackedBarChart,\n  IMargins,\n  IRefArrayData,\n  ISankeyChartData,\n  IVSChartDataPoint,\n  IVerticalBarChartDataPoint,\n  IVerticalStackedBarDataPoint,\n  IVerticalStackedChartProps,\n  SLink,\n  SNode,\n} from './types/index';\nexport type {\n  IChartHoverCardProps,\n  IChartHoverCardStyleProps,\n  IChartHoverCardStyles,\n} from './utilities/ChartHoverCard/index';\nexport { ChartHoverCard, getChartHoverCardStyles } from './utilities/ChartHoverCard/index';\nexport type { IHeatMapChartProps, IHeatMapChartStyleProps, IHeatMapChartStyles } from './HeatMapChart';\nexport { HeatMapChart } from './HeatMapChart';\nexport type {\n  ISankeyChartAccessibilityProps,\n  ISankeyChartProps,\n  ISankeyChartStrings,\n  ISankeyChartStyleProps,\n  ISankeyChartStyles,\n} from './SankeyChart';\nexport { SankeyChart } from './SankeyChart';\nexport type {\n  ITreeChartDataPoint,\n  ITreeDataStructure,\n  ITreeProps,\n  ITreeState,\n  ITreeStyleProps,\n  ITreeStyles,\n} from './TreeChart';\nexport { NodesComposition, TreeChart, TreeTraverse } from './TreeChart';\nexport type { ISparklineProps, ISparklineStyleProps, ISparklineStyles } from './Sparkline';\nexport { Sparkline } from './Sparkline';\nexport type {\n  IHorizontalBarChartWithAxisProps,\n  IHorizontalBarChartWithAxisStyleProps,\n  IHorizontalBarChartWithAxisStyles,\n} from './HorizontalBarChartWithAxis';\nexport { HorizontalBarChartWithAxis } from './HorizontalBarChartWithAxis';\nexport { DataVizPalette, getColorFromToken, getNextColor } from './utilities/colors';\nexport { DataVizGradientPalette, getGradientFromToken, getNextGradient } from './utilities/gradients';\nexport type { IGaugeChartProps, IGaugeChartSegment, IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart';\nexport { GaugeChart, GaugeChartVariant, GaugeValueFormat } from './GaugeChart';\nexport type { DeclarativeChartProps, Schema } from './DeclarativeChart';\nexport { DeclarativeChart } from './DeclarativeChart';\n\nimport './version';\n"]}

package/lib-amd/DeclarativeChart.d.ts

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

package/lib-amd/DeclarativeChart.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/DeclarativeChart/DeclarativeChart"], function (require, exports, tslib_1, DeclarativeChart_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(DeclarativeChart_1, exports);
+});
+//# sourceMappingURL=DeclarativeChart.js.map

package/lib-amd/DeclarativeChart.js.map

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

package/lib-amd/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-amd/components/DeclarativeChart/DeclarativeChart.js

@@ -0,0 +1,58 @@
+define(["require", "exports", "tslib", "react", "../DonutChart/index", "../VerticalStackedBarChart/index", "./PlotlySchemaAdapter", "../LineChart/index", "../HorizontalBarChartWithAxis/index", "../AreaChart/index", "../HeatMapChart/index", "../SankeyChart/SankeyChart", "../GaugeChart/index", "../GroupedVerticalBarChart/index"], function (require, exports, tslib_1, React, index_1, index_2, PlotlySchemaAdapter_1, index_3, index_4, index_5, index_6, SankeyChart_1, index_7, index_8) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.DeclarativeChart = void 0;
+    var useColorMapping = function () {
+        var colorMap = React.useRef(new Map());
+        return colorMap;
+    };
+    /**
+     * DeclarativeChart component.
+     * {@docCategory DeclarativeChart}
+     */
+    exports.DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
+        var _a, _b, _c, _d;
+        var plotlySchema = props.chartSchema.plotlySchema;
+        var xValues = plotlySchema.data[0].x;
+        var isXDate = (0, PlotlySchemaAdapter_1.isDateArray)(xValues);
+        var isXNumber = (0, PlotlySchemaAdapter_1.isNumberArray)(xValues);
+        var colorMap = useColorMapping();
+        switch (plotlySchema.data[0].type) {
+            case 'pie':
+                return React.createElement(index_1.DonutChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToDonutProps)(plotlySchema, colorMap)));
+            case 'bar':
+                var orientation_1 = plotlySchema.data[0].orientation;
+                if (orientation_1 === 'h') {
+                    return (React.createElement(index_4.HorizontalBarChartWithAxis, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.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(index_8.GroupedVerticalBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToGVBCProps)(plotlySchema, colorMap)));
+                    }
+                    return React.createElement(index_2.VerticalStackedBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVSBCProps)(plotlySchema, colorMap)));
+                }
+            case 'scatter':
+                var isAreaChart = plotlySchema.data.some(function (series) { return series.fill === 'tonexty'; });
+                if (isXDate || isXNumber) {
+                    if (isAreaChart) {
+                        return React.createElement(index_5.AreaChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToScatterChartProps)(plotlySchema, true, colorMap)));
+                    }
+                    return React.createElement(index_3.LineChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToScatterChartProps)(plotlySchema, false, colorMap)));
+                }
+                return React.createElement(index_2.VerticalStackedBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVSBCProps)(plotlySchema, colorMap)));
+            case 'heatmap':
+                return React.createElement(index_6.HeatMapChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToHeatmapProps)(plotlySchema)));
+            case 'sankey':
+                return React.createElement(SankeyChart_1.SankeyChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.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(index_7.GaugeChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToGaugeProps)(plotlySchema, colorMap)));
+                }
+                return React.createElement("div", null, "Unsupported Schema");
+            default:
+                return React.createElement("div", null, "Unsupported Schema");
+        }
+    });
+    exports.DeclarativeChart.displayName = 'DeclarativeChart';
+});
+//# sourceMappingURL=DeclarativeChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/DeclarativeChart.tsx"],"names":[],"mappings":";;;;IA0DA,IAAM,eAAe,GAAG;QACtB,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,EAAkB,CAAC,CAAC;QACzD,OAAO,QAAQ,CAAC;IAClB,CAAC,CAAC;IAEF;;;OAGG;IACU,QAAA,gBAAgB,GAAmD,KAAK,CAAC,UAAU,CAG9F,UAAC,KAAK,EAAE,YAAY;;QACZ,IAAA,YAAY,GAAK,KAAK,CAAC,WAAW,aAAtB,CAAuB;QAC3C,IAAM,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACvC,IAAM,OAAO,GAAG,IAAA,iCAAW,EAAC,OAAO,CAAC,CAAC;QACrC,IAAM,SAAS,GAAG,IAAA,mCAAa,EAAC,OAAO,CAAC,CAAC;QACzC,IAAM,QAAQ,GAAG,eAAe,EAAE,CAAC;QAEnC,QAAQ,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE;YACjC,KAAK,KAAK;gBACR,OAAO,oBAAC,kBAAU,uBAAK,IAAA,qDAA+B,EAAC,YAAY,EAAE,QAAQ,CAAC,EAAI,CAAC;YACrF,KAAK,KAAK;gBACR,IAAM,aAAW,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;gBACrD,IAAI,aAAW,KAAK,GAAG,EAAE;oBACvB,OAAO,CACL,oBAAC,kCAA0B,uBAAK,IAAA,qEAA+C,EAAC,YAAY,EAAE,QAAQ,CAAC,EAAI,CAC5G,CAAC;iBACH;qBAAM;oBACL,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,0CAAE,OAAO,CAAC,EAAE;wBAChE,OAAO,oBAAC,+BAAuB,uBAAK,IAAA,oDAA8B,EAAC,YAAY,EAAE,QAAQ,CAAC,EAAI,CAAC;qBAChG;oBACD,OAAO,oBAAC,+BAAuB,uBAAK,IAAA,oDAA8B,EAAC,YAAY,EAAE,QAAQ,CAAC,EAAI,CAAC;iBAChG;YACH,KAAK,SAAS;gBACZ,IAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,UAAC,MAAW,IAAK,OAAA,MAAM,CAAC,IAAI,KAAK,SAAS,EAAzB,CAAyB,CAAC,CAAC;gBACvF,IAAI,OAAO,IAAI,SAAS,EAAE;oBACxB,IAAI,WAAW,EAAE;wBACf,OAAO,oBAAC,iBAAS,uBAAK,IAAA,4DAAsC,EAAC,YAAY,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAI,CAAC;qBAChG;oBACD,OAAO,oBAAC,iBAAS,uBAAK,IAAA,4DAAsC,EAAC,YAAY,EAAE,KAAK,EAAE,QAAQ,CAAC,EAAI,CAAC;iBACjG;gBACD,OAAO,oBAAC,+BAAuB,uBAAK,IAAA,oDAA8B,EAAC,YAAY,EAAE,QAAQ,CAAC,EAAI,CAAC;YACjG,KAAK,SAAS;gBACZ,OAAO,oBAAC,oBAAY,uBAAK,IAAA,uDAAiC,EAAC,YAAY,CAAC,EAAI,CAAC;YAC/E,KAAK,QAAQ;gBACX,OAAO,oBAAC,yBAAW,uBAAK,IAAA,sDAAgC,EAAC,YAAY,EAAE,QAAQ,CAAC,EAAI,CAAC;YACvF,KAAK,WAAW;gBACd,IAAI,MAAA,MAAA,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,0CAAG,CAAC,CAAC,0CAAE,IAAI,0CAAE,QAAQ,CAAC,OAAO,CAAC,EAAE;oBACpD,OAAO,oBAAC,kBAAU,uBAAK,IAAA,qDAA+B,EAAC,YAAY,EAAE,QAAQ,CAAC,EAAI,CAAC;iBACpF;gBACD,OAAO,sDAA6B,CAAC;YACvC;gBACE,OAAO,sDAA6B,CAAC;SACxC;IACH,CAAC,CAAC,CAAC;IACH,wBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC","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-amd/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-amd/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -0,0 +1,402 @@
+define(["require", "exports", "tslib", "../../utilities/colors"], function (require, exports, tslib_1, colors_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.findArrayAttributes = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports.getColor = exports.isNumberArray = exports.isDateArray = void 0;
+    var isDate = function (value) { return !isNaN(Date.parse(value)); };
+    var isNumber = function (value) { return !isNaN(parseFloat(value)) && isFinite(value); };
+    var isDateArray = function (array) { return isArrayOrTypedArray(array) && array.every(isDate); };
+    exports.isDateArray = isDateArray;
+    var isNumberArray = function (array) { return isArrayOrTypedArray(array) && array.every(isNumber); };
+    exports.isNumberArray = isNumberArray;
+    var getColor = function (legendLabel, colorMap) {
+        if (!colorMap.current.has(legendLabel)) {
+            var nextColor = (0, colors_1.getNextColor)(colorMap.current.size + 1);
+            colorMap.current.set(legendLabel, nextColor);
+            return nextColor;
+        }
+        return colorMap.current.get(legendLabel);
+    };
+    exports.getColor = getColor;
+    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 = (0, exports.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,
+        };
+    };
+    exports.transformPlotlyJsonToDonutProps = transformPlotlyJsonToDonutProps;
+    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 = (0, exports.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 = (0, exports.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,
+        };
+    };
+    exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
+    // TODO: Add support for continuous x-axis in grouped vertical bar chart
+    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 = (0, exports.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',
+        };
+    };
+    exports.transformPlotlyJsonToGVBCProps = transformPlotlyJsonToGVBCProps;
+    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 = (0, exports.isDateArray)(xValues);
+            var isXNumber = (0, exports.isNumberArray)(xValues);
+            var legend = series.name || "Series ".concat(index + 1);
+            var lineColor = (0, exports.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,
+            };
+        }
+    };
+    exports.transformPlotlyJsonToScatterChartProps = transformPlotlyJsonToScatterChartProps;
+    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 = (0, exports.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,
+                },
+            },
+        };
+    };
+    exports.transformPlotlyJsonToHorizontalBarWithAxisProps = transformPlotlyJsonToHorizontalBarWithAxisProps;
+    // FIXME: Order of string axis ticks does not match the order in plotly json
+    // TODO: Add support for custom hover card
+    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,
+        };
+    };
+    exports.transformPlotlyJsonToHeatmapProps = transformPlotlyJsonToHeatmapProps;
+    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 = (0, exports.getColor)(label, colorMap);
+                return {
+                    nodeId: index,
+                    name: label,
+                    color: color,
+                };
+            }),
+            links: validLinks.map(function (validLink, index) {
+                return tslib_1.__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,
+        };
+    };
+    exports.transformPlotlyJsonToSankeyProps = transformPlotlyJsonToSankeyProps;
+    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 = (0, exports.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 = (0, exports.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 = (0, exports.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,
+        };
+    };
+    exports.transformPlotlyJsonToGaugeProps = transformPlotlyJsonToGaugeProps;
+    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
+     */
+    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);
+        }
+    }
+    exports.findArrayAttributes = findArrayAttributes;
+    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