@fluentui/react-charting 5.23.41 → 5.23.43

package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DeclarativeChart = void 0;
 var tslib_1 = require("tslib");
 /* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 var React = require("react");
 var react_1 = require("@fluentui/react");
 var index_1 = require("../DonutChart/index");
 var index_2 = require("../VerticalStackedBarChart/index");
+//import type { Data, Layout } from './PlotlySchema';
 var PlotlySchemaAdapter_1 = require("./PlotlySchemaAdapter");
 var index_3 = require("../LineChart/index");
 var index_4 = require("../HorizontalBarChartWithAxis/index");
@@ -27,14 +27,10 @@ var useColorMapping = function () {
  * {@docCategory DeclarativeChart}
  */
 exports.DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var plotlySchema = (0, PlotlySchemaAdapter_1.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 = (0, PlotlySchemaAdapter_1.isDateArray)(xValues);
-    var isXNumber = (0, PlotlySchemaAdapter_1.isNumberArray)(xValues);
-    var isXMonth = (0, PlotlySchemaAdapter_1.isMonthArray)(xValues);
     var colorMap = useColorMapping();
     var theme = (0, react_1.useTheme)();
     var isDarkTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.isInverted) !== null && _a !== void 0 ? _a : false;
@@ -42,11 +38,11 @@ exports.DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
     if (!(0, PlotlySchemaAdapter_1.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 () {
@@ -56,70 +52,91 @@ exports.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 = (0, PlotlySchemaAdapter_1.isDateArray)(xValues);
+        var isXNumber = (0, PlotlySchemaAdapter_1.isNumberArray)(xValues);
+        var isXMonth = (0, PlotlySchemaAdapter_1.isMonthArray)(xValues);
+        if (isXDate || isXNumber) {
+            var chartProps = tslib_1.__assign(tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.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 (tslib_1.__assign(tslib_1.__assign({}, dataPoint), { x: (0, PlotlySchemaAdapter_1.updateXValues)(dataPoint.x) })); });
+            var chartProps = tslib_1.__assign(tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToScatterChartProps)({ data: updatedData, layout: plotlyInput.layout }, isAreaChart, colorMap, isDarkTheme)), commonProps);
+            return renderChartJsx(chartProps);
+        }
+        // Unsupported schema, render as VerticalStackedBarChart
+        fallbackVSBC = true;
+        return (React.createElement(index_2.VerticalStackedBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVSBCProps)(plotlySchema, colorMap, isDarkTheme, fallbackVSBC), commonProps)));
     };
     var exportAsImage = React.useCallback(function (opts) {
         var _a;
-        return (0, imageExporter_1.toImage)((_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, tslib_1.__assign({ background: theme.semanticColors.bodyBackground }, opts));
+        return (0, imageExporter_1.toImage)((_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, tslib_1.__assign({ background: theme.semanticColors.bodyBackground, scale: 5 }, opts));
     }, [theme]);
     React.useImperativeHandle(props.componentRef, function () { return ({
         exportAsImage: exportAsImage,
     }); }, [exportAsImage]);
-    var multiSelectLegendProps = tslib_1.__assign(tslib_1.__assign({}, legendProps), { canSelectMultipleLegends: true, selectedLegends: activeLegends });
-    switch (data[0].type) {
+    switch (plotlyInput.data[0].type) {
         case 'pie':
-            return (React.createElement(index_1.DonutChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.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(index_1.DonutChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.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(index_4.HorizontalBarChartWithAxis, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToHorizontalBarWithAxisProps)(plotlySchema, colorMap, isDarkTheme), { legendProps: multiSelectLegendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+                return (React.createElement(index_4.HorizontalBarChartWithAxis, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.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(index_8.GroupedVerticalBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToGVBCProps)(plotlySchema, colorMap, isDarkTheme), { legendProps: multiSelectLegendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+                var containsLines = plotlyInput.data.some(function (series) { return series.type === 'scatter' || (0, PlotlySchemaAdapter_1.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(index_8.GroupedVerticalBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToGVBCProps)(plotlySchema, colorMap, isDarkTheme), commonProps)));
                 }
-                return (React.createElement(index_2.VerticalStackedBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVSBCProps)(plotlySchema, colorMap, isDarkTheme), { legendProps: multiSelectLegendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+                return (React.createElement(index_2.VerticalStackedBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.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(index_5.AreaChart, tslib_1.__assign({}, chartProps, { legendProps: tslib_1.__assign(tslib_1.__assign({}, legendProps), { canSelectMultipleLegends: true, selectedLegends: activeLegends }) })));
+                    return React.createElement(index_5.AreaChart, tslib_1.__assign({}, chartProps));
                 }
-                return (React.createElement(index_3.LineChart, tslib_1.__assign({}, chartProps, { legendProps: {
-                        onChange: onActiveLegendsChange,
-                        canSelectMultipleLegends: true,
-                        selectedLegends: activeLegends,
-                    } })));
+                return React.createElement(index_3.LineChart, tslib_1.__assign({}, chartProps));
             };
-            if (isXDate || isXNumber) {
-                var chartProps = tslib_1.__assign(tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.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 (tslib_1.__assign(tslib_1.__assign({}, dataPoint), { x: (0, PlotlySchemaAdapter_1.updateXValues)(dataPoint.x) })); });
-                var chartProps = tslib_1.__assign(tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToScatterChartProps)({ data: updatedData, layout: layout }, isAreaChart_1, colorMap, isDarkTheme)), { legendProps: legendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } });
-                return renderChart(chartProps);
-            }
-            return (React.createElement(index_2.VerticalStackedBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVSBCProps)(plotlySchema, colorMap, isDarkTheme), { legendProps: multiSelectLegendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+            return checkAndRenderChart(renderChartJsx, isAreaChart_1);
         case 'heatmap':
-            return (React.createElement(index_6.HeatMapChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToHeatmapProps)(plotlySchema), { componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+            return React.createElement(index_6.HeatMapChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToHeatmapProps)(plotlySchema), commonProps, { legendProps: {} }));
         case 'sankey':
-            return (React.createElement(SankeyChart_1.SankeyChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToSankeyProps)(plotlySchema, colorMap, isDarkTheme), { componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+            return (React.createElement(SankeyChart_1.SankeyChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.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(index_7.GaugeChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.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(index_7.GaugeChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.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(index_9.VerticalBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVBCProps)(plotlySchema, colorMap, isDarkTheme), { legendProps: multiSelectLegendProps, componentRef: chartRef, calloutProps: { layerProps: { eventBubblingEnabled: true } } })));
+            return (React.createElement(index_9.VerticalBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.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(index_3.LineChart, tslib_1.__assign({}, chartProps));
+                };
+                return checkAndRenderChart(renderLineChartJsx);
+            }
+            throw new Error("Unsupported chart type :".concat((_k = plotlyInput.data[0]) === null || _k === void 0 ? void 0 : _k.type));
     }
 });
 exports.DeclarativeChart.displayName = 'DeclarativeChart';

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

@@ -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"]}
+{"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"]}