npm - @fluentui/react-charting - Versions diffs - 5.23.42 → 5.23.43 - Mend

@fluentui/react-charting 5.23.42 → 5.23.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

package/lib/components/DeclarativeChart/DeclarativeChart.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { __assign } from "tslib";
 /* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import * as React from 'react';
 import { useTheme } from '@fluentui/react';
 import { DonutChart } from '../DonutChart/index';
 import { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';
-import { isArrayOrTypedArray, isDateArray, isNumberArray, isMonthArray, sanitizeJson, updateXValues, transformPlotlyJsonToDonutProps, transformPlotlyJsonToVSBCProps, transformPlotlyJsonToScatterChartProps, transformPlotlyJsonToHorizontalBarWithAxisProps, transformPlotlyJsonToHeatmapProps, transformPlotlyJsonToSankeyProps, transformPlotlyJsonToGaugeProps, transformPlotlyJsonToGVBCProps, transformPlotlyJsonToVBCProps, } from './PlotlySchemaAdapter';
+//import type { Data, Layout } from './PlotlySchema';
+import { isArrayOrTypedArray, isDateArray, isNumberArray, isMonthArray, sanitizeJson, updateXValues, transformPlotlyJsonToDonutProps, transformPlotlyJsonToVSBCProps, transformPlotlyJsonToScatterChartProps, transformPlotlyJsonToHorizontalBarWithAxisProps, transformPlotlyJsonToHeatmapProps, transformPlotlyJsonToSankeyProps, transformPlotlyJsonToGaugeProps, transformPlotlyJsonToGVBCProps, transformPlotlyJsonToVBCProps, isLineData, } from './PlotlySchemaAdapter';
 import { LineChart } from '../LineChart/index';
 import { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';
 import { AreaChart } from '../AreaChart/index';
@@ -24,14 +24,10 @@ var useColorMapping = function () {
  * {@docCategory DeclarativeChart}
  */
 export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var plotlySchema = sanitizeJson(props.chartSchema).plotlySchema;
-    var data = plotlySchema.data, layout = plotlySchema.layout;
+    var plotlyInput = plotlySchema;
     var selectedLegends = plotlySchema.selectedLegends;
-    var xValues = data[0].x;
-    var isXDate = isDateArray(xValues);
-    var isXNumber = isNumberArray(xValues);
-    var isXMonth = isMonthArray(xValues);
     var colorMap = useColorMapping();
     var theme = useTheme();
     var isDarkTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.isInverted) !== null && _a !== void 0 ? _a : false;
@@ -39,11 +35,11 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
     if (!isArrayOrTypedArray(selectedLegends)) {
         selectedLegends = [];
     }
-    var _e = React.useState(selectedLegends), activeLegends = _e[0], setActiveLegends = _e[1];
+    var _l = React.useState(selectedLegends), activeLegends = _l[0], setActiveLegends = _l[1];
     var onActiveLegendsChange = function (keys) {
         setActiveLegends(keys);
         if (props.onSchemaChange) {
-            props.onSchemaChange({ plotlySchema: { data: data, layout: layout, selectedLegends: keys } });
+            props.onSchemaChange({ plotlySchema: { plotlyInput: plotlyInput, selectedLegends: keys } });
         }
     };
     React.useEffect(function () {
@@ -53,70 +49,91 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
         var selectedLegends = plotlySchema.selectedLegends;
         setActiveLegends(selectedLegends !== null && selectedLegends !== void 0 ? selectedLegends : []);
     }, [props.chartSchema]);
-    var legendProps = {
-        canSelectMultipleLegends: false,
+    var multiSelectLegendProps = {
+        canSelectMultipleLegends: true,
         onChange: onActiveLegendsChange,
-        selectedLegend: activeLegends.slice(0, 1)[0],
+        selectedLegends: activeLegends,
+    };
+    var commonProps = {
+        legendProps: multiSelectLegendProps,
+        componentRef: chartRef,
+        calloutProps: { layerProps: { eventBubblingEnabled: true } },
+    };
+    var checkAndRenderChart = function (renderChartJsx, isAreaChart) {
+        if (isAreaChart === void 0) { isAreaChart = false; }
+        var fallbackVSBC = false;
+        var xValues = plotlyInput.data[0].x;
+        var isXDate = isDateArray(xValues);
+        var isXNumber = isNumberArray(xValues);
+        var isXMonth = isMonthArray(xValues);
+        if (isXDate || isXNumber) {
+            var chartProps = __assign(__assign({}, transformPlotlyJsonToScatterChartProps({ data: plotlyInput.data, layout: plotlyInput.layout }, isAreaChart, colorMap, isDarkTheme)), commonProps);
+            return renderChartJsx(chartProps);
+        }
+        else if (isXMonth) {
+            var updatedData = plotlyInput.data.map(function (dataPoint) { return (__assign(__assign({}, dataPoint), { x: updateXValues(dataPoint.x) })); });
+            var chartProps = __assign(__assign({}, transformPlotlyJsonToScatterChartProps({ data: updatedData, layout: plotlyInput.layout }, isAreaChart, colorMap, isDarkTheme)), commonProps);
+            return renderChartJsx(chartProps);
+        }
+        // Unsupported schema, render as VerticalStackedBarChart
+        fallbackVSBC = true;
+        return (React.createElement(VerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme, fallbackVSBC), commonProps)));
     };
     var exportAsImage = React.useCallback(function (opts) {
         var _a;
-        return toImage((_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, __assign({ background: theme.semanticColors.bodyBackground }, opts));
+        return toImage((_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, __assign({ background: theme.semanticColors.bodyBackground, scale: 5 }, opts));
     }, [theme]);
     React.useImperativeHandle(props.componentRef, function () { return ({
         exportAsImage: exportAsImage,
     }); }, [exportAsImage]);
-    var multiSelectLegendProps = __assign(__assign({}, legendProps), { canSelectMultipleLegends: true, selectedLegends: activeLegends });
-    switch (data[0].type) {
+    switch (plotlyInput.data[0].type) {
         case 'pie':
-            return (React.createElement(DonutChart, __assign({}, transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme), { legendProps: multiSelectLegendProps, componentRef: chartRef,
-                // Bubble event to prevent right click to open menu on the callout
-                calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+            return React.createElement(DonutChart, __assign({}, transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme), commonProps));
         case 'bar':
-            var orientation_1 = data[0].orientation;
+            var orientation_1 = plotlyInput.data[0].orientation;
             if (orientation_1 === 'h') {
-                return (React.createElement(HorizontalBarChartWithAxis, __assign({}, transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme), { legendProps: multiSelectLegendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+                return (React.createElement(HorizontalBarChartWithAxis, __assign({}, transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
             }
             else {
-                if (['group', 'overlay'].includes((_b = plotlySchema === null || plotlySchema === void 0 ? void 0 : plotlySchema.layout) === null || _b === void 0 ? void 0 : _b.barmode)) {
-                    return (React.createElement(GroupedVerticalBarChart, __assign({}, transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme), { legendProps: multiSelectLegendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+                var containsLines = plotlyInput.data.some(function (series) { return series.type === 'scatter' || isLineData(series); });
+                if (['group', 'overlay'].includes((_b = plotlySchema === null || plotlySchema === void 0 ? void 0 : plotlySchema.layout) === null || _b === void 0 ? void 0 : _b.barmode) && !containsLines) {
+                    return (React.createElement(GroupedVerticalBarChart, __assign({}, transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
                 }
-                return (React.createElement(VerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme), { legendProps: multiSelectLegendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+                return (React.createElement(VerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
             }
         case 'scatter':
-            var isAreaChart_1 = data.some(function (series) { return series.fill === 'tonexty' || series.fill === 'tozeroy'; });
-            var renderChart = function (chartProps) {
+            if (plotlyInput.data[0].mode === 'markers') {
+                throw new Error("Unsupported chart - type :".concat((_c = plotlyInput.data[0]) === null || _c === void 0 ? void 0 : _c.type, ", mode: ").concat((_d = plotlyInput.data[0]) === null || _d === void 0 ? void 0 : _d.mode));
+            }
+            var isAreaChart_1 = plotlyInput.data.some(function (series) { return series.fill === 'tonexty' || series.fill === 'tozeroy'; });
+            var renderChartJsx = function (chartProps) {
                 if (isAreaChart_1) {
-                    return (React.createElement(AreaChart, __assign({}, chartProps, { legendProps: __assign(__assign({}, legendProps), { canSelectMultipleLegends: true, selectedLegends: activeLegends }) })));
+                    return React.createElement(AreaChart, __assign({}, chartProps));
                 }
-                return (React.createElement(LineChart, __assign({}, chartProps, { legendProps: {
-                        onChange: onActiveLegendsChange,
-                        canSelectMultipleLegends: true,
-                        selectedLegends: activeLegends,
-                    } })));
+                return React.createElement(LineChart, __assign({}, chartProps));
             };
-            if (isXDate || isXNumber) {
-                var chartProps = __assign(__assign({}, transformPlotlyJsonToScatterChartProps({ data: data, layout: layout }, isAreaChart_1, colorMap, isDarkTheme)), { legendProps: legendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } });
-                return renderChart(chartProps);
-            }
-            else if (isXMonth) {
-                var updatedData = data.map(function (dataPoint) { return (__assign(__assign({}, dataPoint), { x: updateXValues(dataPoint.x) })); });
-                var chartProps = __assign(__assign({}, transformPlotlyJsonToScatterChartProps({ data: updatedData, layout: layout }, isAreaChart_1, colorMap, isDarkTheme)), { legendProps: legendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } });
-                return renderChart(chartProps);
-            }
-            return (React.createElement(VerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme), { legendProps: multiSelectLegendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+            return checkAndRenderChart(renderChartJsx, isAreaChart_1);
         case 'heatmap':
-            return (React.createElement(HeatMapChart, __assign({}, transformPlotlyJsonToHeatmapProps(plotlySchema), { componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+            return React.createElement(HeatMapChart, __assign({}, transformPlotlyJsonToHeatmapProps(plotlySchema), commonProps, { legendProps: {} }));
         case 'sankey':
-            return (React.createElement(SankeyChart, __assign({}, transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme), { componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+            return (React.createElement(SankeyChart, __assign({}, transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
         case 'indicator':
-            if ((_d = (_c = data === null || data === void 0 ? void 0 : data[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, isDarkTheme), { legendProps: multiSelectLegendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+            if ((_g = (_f = (_e = plotlyInput.data) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.mode) === null || _g === void 0 ? void 0 : _g.includes('gauge')) {
+                return (React.createElement(GaugeChart, __assign({}, transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
             }
-            return React.createElement("div", null, "Unsupported Schema");
+            throw new Error("Unsupported chart - type: ".concat((_h = plotlyInput.data[0]) === null || _h === void 0 ? void 0 : _h.type, ", mode: ").concat((_j = plotlyInput.data[0]) === null || _j === void 0 ? void 0 : _j.mode));
         case 'histogram':
-            return (React.createElement(VerticalBarChart, __assign({}, transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme), { legendProps: multiSelectLegendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+            return (React.createElement(VerticalBarChart, __assign({}, transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme), commonProps)));
         default:
-            throw new Error('Unsupported chart schema');
+            var xValues = plotlyInput.data[0].x;
+            var yValues = plotlyInput.data[0].y;
+            if (xValues && yValues && xValues.length > 0 && yValues.length > 0) {
+                var renderLineChartJsx = function (chartProps) {
+                    return React.createElement(LineChart, __assign({}, chartProps));
+                };
+                return checkAndRenderChart(renderLineChartJsx);
+            }
+            throw new Error("Unsupported chart type :".concat((_k = plotlyInput.data[0]) === null || _k === void 0 ? void 0 : _k.type));
     }
 });
 DeclarativeChart.displayName = 'DeclarativeChart';

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

	@@ -1 +1 @@
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 { useTheme } from '@fluentui/react';\nimport { IRefObject } from '@fluentui/react/lib/Utilities';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport {\n isArrayOrTypedArray,\n isDateArray,\n isNumberArray,\n isMonthArray,\n sanitizeJson,\n updateXValues,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n} from './PlotlySchemaAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { IImageExportOptions, toImage } from './imageExporter';\nimport { IChart } from '../../types/index';\n\n/*\n DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n /\nexport interface Schema {\n /\n Plotly schema represented as JSON object\n /\n plotlySchema: any;\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 /\n Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: IRefObject<IDeclarativeChart>;\n}\n\n/\n {@docCategory DeclarativeChart}\n /\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: IImageExportOptions) => Promise<string>;\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 } = sanitizeJson(props.chartSchema);\n const { data, layout } = plotlySchema;\n let { selectedLegends } = plotlySchema;\n const xValues = data[0].x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\n const colorMap = useColorMapping();\n const theme = useTheme();\n const isDarkTheme = theme?.isInverted ?? false;\n const chartRef = React.useRef<IChart>(null);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { data, layout, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const legendProps = {\n canSelectMultipleLegends: false,\n onChange: onActiveLegendsChange,\n selectedLegend: activeLegends.slice(0, 1)[0],\n };\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions) => {\n return toImage(chartRef.current?.chartContainer, {\n background: theme.semanticColors.bodyBackground,\n ...opts,\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n const multiSelectLegendProps = {\n ...legendProps,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n };\n\n switch (data[0].type) {\n case 'pie':\n return (\n <DonutChart\n {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n // Bubble event to prevent right click to open menu on the callout\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'bar':\n const orientation = data[0].orientation;\n if (orientation === 'h') {\n return (\n <HorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n } else {\n if (['group', 'overlay'].includes(plotlySchema?.layout?.barmode)) {\n return (\n <GroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n case 'scatter':\n const isAreaChart = data.some((series: any) => series.fill === 'tonexty' \|\| series.fill === 'tozeroy');\n const renderChart = (chartProps: any) => {\n if (isAreaChart) {\n return (\n <AreaChart\n {...chartProps}\n legendProps={{ ...legendProps, canSelectMultipleLegends: true, selectedLegends: activeLegends }}\n />\n );\n }\n return (\n <LineChart\n {...{\n ...chartProps,\n legendProps: {\n onChange: onActiveLegendsChange,\n canSelectMultipleLegends: true,\n selectedLegends: activeLegends,\n },\n }}\n />\n );\n };\n if (isXDate \|\| isXNumber) {\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n } else if (isXMonth) {\n const updatedData = data.map((dataPoint: any) => ({\n ...dataPoint,\n x: updateXValues(dataPoint.x),\n }));\n const chartProps = {\n ...transformPlotlyJsonToScatterChartProps({ data: updatedData, layout }, isAreaChart, colorMap, isDarkTheme),\n legendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n return renderChart(chartProps);\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'heatmap':\n return (\n <HeatMapChart\n {...transformPlotlyJsonToHeatmapProps(plotlySchema)}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'sankey':\n return (\n <SankeyChart\n {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme)}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n case 'indicator':\n if (data?.[0]?.mode?.includes('gauge')) {\n return (\n <GaugeChart\n {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n }\n return <div>Unsupported Schema</div>;\n case 'histogram':\n return (\n <VerticalBarChart\n {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme)}\n legendProps={multiSelectLegendProps}\n componentRef={chartRef}\n calloutProps={{ layerProps: { eventBubblingEnabled: true } }}\n />\n );\n default:\n throw new Error('Unsupported chart schema');\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"]}
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 /\nimport as React from 'react';\nimport { useTheme } from '@fluentui/react';\nimport { IRefObject } from '@fluentui/react/lib/Utilities';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { PlotData, PlotlySchema } from './PlotlySchema';\n//import type { Data, Layout } from './PlotlySchema';\nimport {\n isArrayOrTypedArray,\n isDateArray,\n isNumberArray,\n isMonthArray,\n sanitizeJson,\n updateXValues,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n isLineData,\n} from './PlotlySchemaAdapter';\nimport { LineChart, ILineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, IAreaChartProps } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { IImageExportOptions, toImage } from './imageExporter';\nimport { IChart } from '../../types/index';\n\n/*\n DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n /\nexport interface Schema {\n /\n Plotly schema represented as JSON object\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n plotlySchema: any;\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 /\n Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: IRefObject<IDeclarativeChart>;\n}\n\n/\n {@docCategory DeclarativeChart}\n /\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: IImageExportOptions) => Promise<string>;\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 } = sanitizeJson(props.chartSchema);\n const plotlyInput = plotlySchema as PlotlySchema;\n let { selectedLegends } = plotlySchema;\n const colorMap = useColorMapping();\n const theme = useTheme();\n const isDarkTheme = theme?.isInverted ?? false;\n const chartRef = React.useRef<IChart>(null);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const commonProps = {\n legendProps: multiSelectLegendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n\n const checkAndRenderChart = (\n renderChartJsx: (chartProps: ILineChartProps \| IAreaChartProps) => JSX.Element,\n isAreaChart: boolean = false,\n ) => {\n let fallbackVSBC = false;\n const xValues = (plotlyInput.data[0] as PlotData).x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const isXMonth = isMonthArray(xValues);\n if (isXDate \|\| isXNumber) {\n const chartProps: ILineChartProps \| IAreaChartProps = {\n ...transformPlotlyJsonToScatterChartProps(\n { data: plotlyInput.data, layout: plotlyInput.layout },\n isAreaChart,\n colorMap,\n isDarkTheme,\n ),\n ...commonProps,\n };\n return renderChartJsx(chartProps);\n } else if (isXMonth) {\n const updatedData = plotlyInput.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: updateXValues(dataPoint.x),\n }));\n const chartProps: ILineChartProps \| IAreaChartProps = {\n ...transformPlotlyJsonToScatterChartProps(\n { data: updatedData, layout: plotlyInput.layout },\n isAreaChart,\n colorMap,\n isDarkTheme,\n ),\n ...commonProps,\n };\n return renderChartJsx(chartProps);\n }\n // Unsupported schema, render as VerticalStackedBarChart\n fallbackVSBC = true;\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme, fallbackVSBC)}\n {...commonProps}\n />\n );\n };\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions) => {\n return toImage(chartRef.current?.chartContainer, {\n background: theme.semanticColors.bodyBackground,\n scale: 5,\n ...opts,\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n switch (plotlyInput.data[0].type) {\n case 'pie':\n return <DonutChart {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme)} {...commonProps} />;\n case 'bar':\n const orientation = plotlyInput.data[0].orientation;\n if (orientation === 'h') {\n return (\n <HorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n } else {\n const containsLines = plotlyInput.data.some(\n series => series.type === 'scatter' \|\| isLineData(series as Partial<PlotData>),\n );\n if (['group', 'overlay'].includes(plotlySchema?.layout?.barmode) && !containsLines) {\n return (\n <GroupedVerticalBarChart\n {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n }\n return (\n <VerticalStackedBarChart\n {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)}\n {...commonProps}\n />\n );\n }\n case 'scatter':\n if (plotlyInput.data[0].mode === 'markers') {\n throw new Error(`Unsupported chart - type :${plotlyInput.data[0]?.type}, mode: ${plotlyInput.data[0]?.mode}`);\n }\n const isAreaChart = plotlyInput.data.some(\n (series: PlotData) => series.fill === 'tonexty' \|\| series.fill === 'tozeroy',\n );\n const renderChartJsx = (chartProps: ILineChartProps \| IAreaChartProps) => {\n if (isAreaChart) {\n return <AreaChart {...chartProps} />;\n }\n return <LineChart {...chartProps} />;\n };\n return checkAndRenderChart(renderChartJsx, isAreaChart);\n case 'heatmap':\n return <HeatMapChart {...transformPlotlyJsonToHeatmapProps(plotlySchema)} {...commonProps} legendProps={{}} />;\n case 'sankey':\n return (\n <SankeyChart {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme)} {...commonProps} />\n );\n case 'indicator':\n if (plotlyInput.data?.[0]?.mode?.includes('gauge')) {\n return (\n <GaugeChart {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme)} {...commonProps} />\n );\n }\n throw new Error(`Unsupported chart - type: ${plotlyInput.data[0]?.type}, mode: ${plotlyInput.data[0]?.mode}`);\n case 'histogram':\n return (\n <VerticalBarChart {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme)} {...commonProps} />\n );\n default:\n const xValues = (plotlyInput.data[0] as PlotData).x;\n const yValues = (plotlyInput.data[0] as PlotData).y;\n if (xValues && yValues && xValues.length > 0 && yValues.length > 0) {\n const renderLineChartJsx = (chartProps: ILineChartProps) => {\n return <LineChart {...chartProps} />;\n };\n return checkAndRenderChart(renderLineChartJsx);\n }\n throw new Error(`Unsupported chart type :${plotlyInput.data[0]?.type}`);\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"]}