@fluentui/react-charting 5.24.1 → 5.24.3

package/lib/components/DeclarativeChart/DeclarativeChart.js

@@ -5,8 +5,8 @@ import { useTheme } from '@fluentui/react';
 import { DonutChart } from '../DonutChart/index';
 import { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';
 import { decodeBase64Fields } from '@fluentui/chart-utilities';
-import { isArrayOrTypedArray, isDateArray, isNumberArray, isYearArray, mapFluentChart, sanitizeJson, } from '@fluentui/chart-utilities';
-import { isMonthArray, correctYearMonth, transformPlotlyJsonToDonutProps, transformPlotlyJsonToVSBCProps, transformPlotlyJsonToScatterChartProps, transformPlotlyJsonToHorizontalBarWithAxisProps, transformPlotlyJsonToHeatmapProps, transformPlotlyJsonToSankeyProps, transformPlotlyJsonToGaugeProps, transformPlotlyJsonToGVBCProps, transformPlotlyJsonToVBCProps, transformPlotlyJsonToChartTableProps, projectPolarToCartesian, isStringArray, } from './PlotlySchemaAdapter';
+import { isArrayOrTypedArray, isMonthArray, mapFluentChart, sanitizeJson } from '@fluentui/chart-utilities';
+import { correctYearMonth, getGridProperties, transformPlotlyJsonToDonutProps, transformPlotlyJsonToVSBCProps, transformPlotlyJsonToAreaChartProps, transformPlotlyJsonToLineChartProps, transformPlotlyJsonToHorizontalBarWithAxisProps, transformPlotlyJsonToHeatmapProps, transformPlotlyJsonToSankeyProps, transformPlotlyJsonToGaugeProps, transformPlotlyJsonToGVBCProps, transformPlotlyJsonToVBCProps, transformPlotlyJsonToChartTableProps, transformPlotlyJsonToScatterChartProps, projectPolarToCartesian, getAllupLegendsProps, } from './PlotlySchemaAdapter';
 import { LineChart } from '../LineChart/index';
 import { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';
 import { AreaChart } from '../AreaChart/index';
@@ -16,7 +16,9 @@ import { GaugeChart } from '../GaugeChart/index';
 import { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';
 import { VerticalBarChart } from '../VerticalBarChart/index';
 import { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';
+import { ScatterChart } from '../ScatterChart/index';
 import { ChartTable } from '../ChartTable/index';
+import { Legends } from '../Legends/index';
 var ResponsiveDonutChart = withResponsiveContainer(DonutChart);
 var ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);
 var ResponsiveLineChart = withResponsiveContainer(LineChart);
@@ -27,17 +29,105 @@ var ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);
 var ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);
 var ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);
 var ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);
+var ResponsiveScatterChart = withResponsiveContainer(ScatterChart);
 var ResponsiveChartTable = withResponsiveContainer(ChartTable);
+// Default x-axis key for grouping traces. Also applicable for PieData and SankeyData where x-axis is not defined.
+var DEFAULT_XAXIS = 'x';
+var FALLBACK_TYPE = 'fallback';
 var useColorMapping = function () {
     var colorMap = React.useRef(new Map());
     return colorMap;
 };
+function renderChart(Renderer, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+transformer, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+transformerArgs, commonProps, cellRow, cellColumn) {
+    var chartProps = transformer.apply(void 0, transformerArgs);
+    return (React.createElement("div", { key: "".concat(cellRow, "_").concat(cellColumn), style: {
+            gridRowStart: cellRow,
+            gridRowEnd: cellRow + 1,
+            gridColumnStart: cellColumn,
+            gridColumnEnd: cellColumn + 1,
+        } },
+        React.createElement(Renderer, __assign({}, chartProps, commonProps))));
+}
+var LineAreaPreTransformOp = function (plotlyInput) {
+    var xValues = plotlyInput.data[0].x;
+    var isXMonth = isMonthArray(xValues);
+    var renderData = plotlyInput.data;
+    if (isXMonth) {
+        renderData = plotlyInput.data.map(function (dataPoint) { return (__assign(__assign({}, dataPoint), { x: correctYearMonth(dataPoint.x) })); });
+    }
+    return { data: renderData, layout: plotlyInput.layout };
+};
+var chartMap = {
+    // PieData category charts
+    donut: {
+        transformer: transformPlotlyJsonToDonutProps,
+        renderer: ResponsiveDonutChart,
+    },
+    // SankeyData category charts
+    sankey: {
+        transformer: transformPlotlyJsonToSankeyProps,
+        renderer: ResponsiveSankeyChart,
+    },
+    // TableData category charts
+    table: {
+        transformer: transformPlotlyJsonToChartTableProps,
+        renderer: ResponsiveChartTable,
+    },
+    // PlotData category charts
+    horizontalbar: {
+        transformer: transformPlotlyJsonToHorizontalBarWithAxisProps,
+        renderer: ResponsiveHorizontalBarChartWithAxis,
+    },
+    groupedverticalbar: {
+        transformer: transformPlotlyJsonToGVBCProps,
+        renderer: ResponsiveGroupedVerticalBarChart,
+    },
+    verticalstackedbar: {
+        transformer: transformPlotlyJsonToVSBCProps,
+        renderer: ResponsiveVerticalStackedBarChart,
+    },
+    heatmap: {
+        transformer: transformPlotlyJsonToHeatmapProps,
+        renderer: ResponsiveHeatMapChart,
+    },
+    gauge: {
+        transformer: transformPlotlyJsonToGaugeProps,
+        renderer: ResponsiveGaugeChart,
+    },
+    verticalbar: {
+        transformer: transformPlotlyJsonToVBCProps,
+        renderer: ResponsiveVerticalBarChart,
+    },
+    area: {
+        transformer: transformPlotlyJsonToAreaChartProps,
+        renderer: ResponsiveAreaChart,
+        preTransformOperation: LineAreaPreTransformOp,
+    },
+    line: {
+        transformer: transformPlotlyJsonToLineChartProps,
+        renderer: ResponsiveLineChart,
+        preTransformOperation: LineAreaPreTransformOp,
+    },
+    scatter: {
+        transformer: transformPlotlyJsonToScatterChartProps,
+        renderer: ResponsiveScatterChart,
+        preTransformOperation: LineAreaPreTransformOp,
+    },
+    fallback: {
+        transformer: transformPlotlyJsonToVSBCProps,
+        renderer: ResponsiveVerticalStackedBarChart,
+    },
+};
 /**
  * DeclarativeChart component.
  * {@docCategory DeclarativeChart}
  */
 export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
-    var _a, _b;
+    var _a;
     var plotlySchema = sanitizeJson(props.chartSchema).plotlySchema;
     var chart = mapFluentChart(plotlySchema);
     if (!chart.isValid) {
@@ -51,15 +141,17 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
         throw new Error("Failed to decode plotly schema: ".concat(error));
     }
     var plotlyInputWithValidData = __assign(__assign({}, plotlyInput), { data: chart.validTracesInfo.map(function (trace) { return plotlyInput.data[trace[0]]; }) });
+    var validTracesFilteredIndex = chart.validTracesInfo.map(function (trace, index) { return [index, trace[1]]; });
     var selectedLegends = plotlySchema.selectedLegends;
     var colorMap = useColorMapping();
     var theme = useTheme();
     var isDarkTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.isInverted) !== null && _a !== void 0 ? _a : false;
     var chartRef = React.useRef(null);
+    var isMultiPlot = React.useRef(false);
     if (!isArrayOrTypedArray(selectedLegends)) {
         selectedLegends = [];
     }
-    var _c = React.useState(selectedLegends), activeLegends = _c[0], setActiveLegends = _c[1];
+    var _b = React.useState(selectedLegends), activeLegends = _b[0], setActiveLegends = _b[1];
     var onActiveLegendsChange = function (keys) {
         setActiveLegends(keys);
         if (props.onSchemaChange) {
@@ -83,51 +175,15 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
         componentRef: chartRef,
         calloutProps: { layerProps: { eventBubblingEnabled: true } },
     };
-    var renderLineArea = function (plotlyData, isAreaChart) {
-        var _a;
-        var isScatterMarkers = [
-            'markers',
-            'text+markers',
-            'markers+text',
-            'lines+markers',
-            'markers+line',
-            'text+lines+markers',
-        ].includes((_a = plotlyData[0]) === null || _a === void 0 ? void 0 : _a.mode);
-        var chartProps = __assign(__assign({}, transformPlotlyJsonToScatterChartProps({ data: plotlyData, layout: plotlyInput.layout }, isAreaChart, isScatterMarkers, colorMap, props.colorwayType, isDarkTheme)), commonProps);
-        if (isAreaChart) {
-            return React.createElement(ResponsiveAreaChart, __assign({}, chartProps));
-        }
-        return React.createElement(ResponsiveLineChart, __assign({}, chartProps));
-    };
-    var checkAndRenderChart = function (isAreaChart) {
-        if (isAreaChart === void 0) { isAreaChart = false; }
-        var fallbackVSBC = false;
-        var xValues = plotlyInputWithValidData.data[0].x;
-        var isXDate = isDateArray(xValues);
-        var isXNumber = isNumberArray(xValues);
-        var isXMonth = isMonthArray(xValues);
-        var isYString = isStringArray(plotlyInputWithValidData.data[0].y);
-        // Consider year as categorical variable not numeric continuous variable
-        // Also year is not considered a date variable as it is represented as a point
-        // in time and brings additional complexity of handling timezone and locale
-        // formatting given the current design of the charting library
-        var isXYear = isYearArray(xValues);
-        if ((isXDate || isXNumber) && !isXYear && !isYString) {
-            return renderLineArea(plotlyInputWithValidData.data, isAreaChart);
-        }
-        else if (isXMonth) {
-            var updatedData = plotlyInputWithValidData.data.map(function (dataPoint) { return (__assign(__assign({}, dataPoint), { x: correctYearMonth(dataPoint.x) })); });
-            return renderLineArea(updatedData, isAreaChart);
-        }
-        // Unsupported schema, render as VerticalStackedBarChart
-        fallbackVSBC = true;
-        if (isAreaChart) {
-            throw new Error('Fallback to VerticalStackedBarChart is not allowed for Area Charts.');
-        }
-        return (React.createElement(ResponsiveVerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme, fallbackVSBC), commonProps)));
-    };
+    function createLegends(legendProps) {
+        // eslint-disable-next-line react/jsx-no-bind
+        return React.createElement(Legends, __assign({}, legendProps, { selectedLegends: activeLegends, onChange: onActiveLegendsChange }));
+    }
     var exportAsImage = React.useCallback(function (opts) {
         return new Promise(function (resolve, reject) {
+            if (isMultiPlot.current) {
+                return reject(Error('Exporting multi plot charts as image is not supported'));
+            }
             if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {
                 return reject(Error('Chart cannot be exported as image'));
             }
@@ -140,39 +196,62 @@ export var DeclarativeChart = React.forwardRef(function (props, forwardedRef) {
     React.useImperativeHandle(props.componentRef, function () { return ({
         exportAsImage: exportAsImage,
     }); }, [exportAsImage]);
-    switch (chart.type) {
-        case 'donut':
-            return (React.createElement(ResponsiveDonutChart, __assign({}, transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme), commonProps)));
-        case 'horizontalbar':
-            return (React.createElement(ResponsiveHorizontalBarChartWithAxis, __assign({}, transformPlotlyJsonToHorizontalBarWithAxisProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme), commonProps)));
-        case 'groupedverticalbar':
-            return (React.createElement(ResponsiveGroupedVerticalBarChart, __assign({}, transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme), commonProps)));
-        case 'verticalstackedbar':
-            return (React.createElement(ResponsiveVerticalStackedBarChart, __assign({}, transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme), commonProps)));
-        case 'heatmap':
-            return (React.createElement(ResponsiveHeatMapChart, __assign({}, transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData), commonProps, { legendProps: {} })));
-        case 'sankey':
-            return (React.createElement(ResponsiveSankeyChart, __assign({}, transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme), commonProps)));
-        case 'gauge':
-            return (React.createElement(ResponsiveGaugeChart, __assign({}, transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme), commonProps)));
-        case 'verticalbar':
-            return (React.createElement(ResponsiveVerticalBarChart, __assign({}, transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme), commonProps)));
-        case 'table':
-            return (React.createElement(ResponsiveChartTable, __assign({}, transformPlotlyJsonToChartTableProps(plotlyInputWithValidData, colorMap, isDarkTheme), commonProps)));
-        case 'area':
-        case 'line':
-        case 'fallback':
-        case 'scatterpolar':
-            if (chart.type === 'scatterpolar') {
-                var cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);
-                plotlyInputWithValidData.data = cartesianProjection.data;
+    if (chart.type === 'scatterpolar') {
+        var cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);
+        plotlyInputWithValidData.data = cartesianProjection.data;
+        validTracesFilteredIndex.forEach(function (trace, index) {
+            if (trace[1] === 'scatterpolar') {
+                validTracesFilteredIndex[index][1] = 'line'; // Change type to line for rendering
             }
-            // Need recheck for area chart as we don't have ability to check for valid months in previous step
-            var isAreaChart = plotlyInputWithValidData.data.some(function (series) { return series.fill === 'tonexty' || series.fill === 'tozeroy' || !!series.stackgroup; });
-            return checkAndRenderChart(isAreaChart);
-        default:
-            throw new Error("Unsupported chart type :".concat((_b = plotlyInputWithValidData.data[0]) === null || _b === void 0 ? void 0 : _b.type));
+        });
     }
+    var groupedTraces = {};
+    plotlyInputWithValidData.data.forEach(function (trace, index) {
+        var _a;
+        var xAxisKey = (_a = trace.xaxis) !== null && _a !== void 0 ? _a : DEFAULT_XAXIS;
+        if (!groupedTraces[xAxisKey]) {
+            groupedTraces[xAxisKey] = [];
+        }
+        groupedTraces[xAxisKey].push(index);
+    });
+    isMultiPlot.current = Object.keys(groupedTraces).length > 1;
+    var gridProperties = getGridProperties(plotlyInputWithValidData.layout, isMultiPlot.current);
+    var allupLegendsProps = getAllupLegendsProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme);
+    // map through the grouped traces and render the appropriate chart
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: {
+                display: 'grid',
+                gridTemplateRows: gridProperties.templateRows,
+                gridTemplateColumns: gridProperties.templateColumns,
+            } }, Object.entries(groupedTraces).map(function (_a) {
+            var _b, _c, _d;
+            var xAxisKey = _a[0], index = _a[1];
+            var plotlyInputForGroup = __assign(__assign({}, plotlyInputWithValidData), { data: index.map(function (idx) { return plotlyInputWithValidData.data[idx]; }) });
+            var filteredTracesInfo = validTracesFilteredIndex.filter(function (trace) { return index.includes(trace[0]); });
+            var chartType = validTracesFilteredIndex.some(function (trace) { return trace[1] === FALLBACK_TYPE; }) || chart.type === FALLBACK_TYPE
+                ? FALLBACK_TYPE
+                : filteredTracesInfo[0][1];
+            if (validTracesFilteredIndex.some(function (trace) { return trace[1] === 'line'; }) &&
+                validTracesFilteredIndex.some(function (trace) { return trace[1] === 'scatter'; })) {
+                chartType = 'line';
+            }
+            var chartEntry = chartMap[chartType];
+            if (chartEntry) {
+                var transformer = chartEntry.transformer, renderer = chartEntry.renderer, preTransformCondition = chartEntry.preTransformCondition, preTransformOperation = chartEntry.preTransformOperation;
+                if (preTransformCondition === undefined || preTransformCondition(plotlyInputForGroup)) {
+                    var transformedInput = preTransformOperation
+                        ? preTransformOperation(plotlyInputForGroup)
+                        : plotlyInputForGroup;
+                    var cellProperties = gridProperties.layout[xAxisKey];
+                    return renderChart(renderer, transformer, [transformedInput, isMultiPlot.current, colorMap, props.colorwayType, isDarkTheme], __assign(__assign({}, commonProps), { xAxisAnnotation: cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.xAnnotation, yAxisAnnotation: cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.yAnnotation }), (_b = cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.row) !== null && _b !== void 0 ? _b : 1, (_c = cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.column) !== null && _c !== void 0 ? _c : 1);
+                }
+                return React.createElement(React.Fragment, null);
+            }
+            else {
+                throw new Error("Unsupported chart type :".concat((_d = plotlyInputForGroup.data[0]) === null || _d === void 0 ? void 0 : _d.type));
+            }
+        })),
+        isMultiPlot.current && createLegends(allupLegendsProps)));
 });
 DeclarativeChart.displayName = 'DeclarativeChart';
 DeclarativeChart.defaultProps = {

package/lib/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 */\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 { decodeBase64Fields } from '@fluentui/chart-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n  isArrayOrTypedArray,\n  isDateArray,\n  isNumberArray,\n  isYearArray,\n  mapFluentChart,\n  sanitizeJson,\n} from '@fluentui/chart-utilities';\n\nimport {\n  isMonthArray,\n  correctYearMonth,\n  transformPlotlyJsonToDonutProps,\n  transformPlotlyJsonToVSBCProps,\n  transformPlotlyJsonToScatterChartProps,\n  transformPlotlyJsonToHorizontalBarWithAxisProps,\n  transformPlotlyJsonToHeatmapProps,\n  transformPlotlyJsonToSankeyProps,\n  transformPlotlyJsonToGaugeProps,\n  transformPlotlyJsonToGVBCProps,\n  transformPlotlyJsonToVBCProps,\n  transformPlotlyJsonToChartTableProps,\n  projectPolarToCartesian,\n  isStringArray,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\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 { IChart, IImageExportOptions } from '../../types/index';\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ChartTable } from '../ChartTable/index';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveChartTable = withResponsiveContainer(ChartTable);\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   * Optional prop to specify the colorway type of the chart.\n   * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n   * - 'builtin': Use Fluent UI colorway.\n   * - 'others': Reserved for future colorways.\n   * @default 'default'\n   */\n  colorwayType?: ColorwayType;\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 chart: OutputChartType = mapFluentChart(plotlySchema);\n  if (!chart.isValid) {\n    throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n  }\n  let plotlyInput = plotlySchema as PlotlySchema;\n  try {\n    plotlyInput = decodeBase64Fields(plotlyInput);\n  } catch (error) {\n    throw new Error(`Failed to decode plotly schema: ${error}`);\n  }\n  const plotlyInputWithValidData: PlotlySchema = {\n    ...plotlyInput,\n    data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace[0]]),\n  };\n\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 renderLineArea = (plotlyData: Data[], isAreaChart: boolean): JSX.Element => {\n    const isScatterMarkers = [\n      'markers',\n      'text+markers',\n      'markers+text',\n      'lines+markers',\n      'markers+line',\n      'text+lines+markers',\n    ].includes((plotlyData[0] as PlotData)?.mode);\n    const chartProps: ILineChartProps | IAreaChartProps = {\n      ...transformPlotlyJsonToScatterChartProps(\n        { data: plotlyData, layout: plotlyInput.layout },\n        isAreaChart,\n        isScatterMarkers,\n        colorMap,\n        props.colorwayType,\n        isDarkTheme,\n      ),\n      ...commonProps,\n    };\n    if (isAreaChart) {\n      return <ResponsiveAreaChart {...chartProps} />;\n    }\n    return <ResponsiveLineChart {...chartProps} />;\n  };\n\n  const checkAndRenderChart = (isAreaChart: boolean = false) => {\n    let fallbackVSBC = false;\n    const xValues = (plotlyInputWithValidData.data[0] as PlotData).x;\n    const isXDate = isDateArray(xValues);\n    const isXNumber = isNumberArray(xValues);\n    const isXMonth = isMonthArray(xValues);\n    const isYString = isStringArray((plotlyInputWithValidData.data[0] as Partial<PlotData>).y);\n\n    // Consider year as categorical variable not numeric continuous variable\n    // Also year is not considered a date variable as it is represented as a point\n    // in time and brings additional complexity of handling timezone and locale\n    // formatting given the current design of the charting library\n    const isXYear = isYearArray(xValues);\n\n    if ((isXDate || isXNumber) && !isXYear && !isYString) {\n      return renderLineArea(plotlyInputWithValidData.data, isAreaChart);\n    } else if (isXMonth) {\n      const updatedData = plotlyInputWithValidData.data.map((dataPoint: PlotData) => ({\n        ...dataPoint,\n        x: correctYearMonth(dataPoint.x),\n      }));\n      return renderLineArea(updatedData, isAreaChart);\n    }\n    // Unsupported schema, render as VerticalStackedBarChart\n    fallbackVSBC = true;\n    if (isAreaChart) {\n      throw new Error('Fallback to VerticalStackedBarChart is not allowed for Area Charts.');\n    }\n    return (\n      <ResponsiveVerticalStackedBarChart\n        {...transformPlotlyJsonToVSBCProps(\n          plotlyInputWithValidData,\n          colorMap,\n          props.colorwayType,\n          isDarkTheme,\n          fallbackVSBC,\n        )}\n        {...commonProps}\n      />\n    );\n  };\n\n  const exportAsImage = React.useCallback(\n    (opts?: IImageExportOptions): Promise<string> => {\n      return new Promise((resolve, reject) => {\n        if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {\n          return reject(Error('Chart cannot be exported as image'));\n        }\n\n        chartRef.current\n          .toImage({\n            background: theme.semanticColors.bodyBackground,\n            scale: 5,\n            ...opts,\n          })\n          .then(resolve)\n          .catch(reject);\n      });\n    },\n    [theme],\n  );\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      exportAsImage,\n    }),\n    [exportAsImage],\n  );\n\n  switch (chart.type) {\n    case 'donut':\n      return (\n        <ResponsiveDonutChart\n          {...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'horizontalbar':\n      return (\n        <ResponsiveHorizontalBarChartWithAxis\n          {...transformPlotlyJsonToHorizontalBarWithAxisProps(\n            plotlyInputWithValidData,\n            colorMap,\n            props.colorwayType,\n            isDarkTheme,\n          )}\n          {...commonProps}\n        />\n      );\n    case 'groupedverticalbar':\n      return (\n        <ResponsiveGroupedVerticalBarChart\n          {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalstackedbar':\n      return (\n        <ResponsiveVerticalStackedBarChart\n          {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'heatmap':\n      return (\n        <ResponsiveHeatMapChart\n          {...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData)}\n          {...commonProps}\n          legendProps={{}}\n        />\n      );\n    case 'sankey':\n      return (\n        <ResponsiveSankeyChart\n          {...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'gauge':\n      return (\n        <ResponsiveGaugeChart\n          {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalbar':\n      return (\n        <ResponsiveVerticalBarChart\n          {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'table':\n      return (\n        <ResponsiveChartTable\n          {...transformPlotlyJsonToChartTableProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'area':\n    case 'line':\n    case 'fallback':\n    case 'scatterpolar':\n      if (chart.type === 'scatterpolar') {\n        const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n        plotlyInputWithValidData.data = cartesianProjection.data;\n      }\n      // Need recheck for area chart as we don't have ability to check for valid months in previous step\n      const isAreaChart = plotlyInputWithValidData.data.some(\n        (series: PlotData) => series.fill === 'tonexty' || series.fill === 'tozeroy' || !!series.stackgroup,\n      );\n      return checkAndRenderChart(isAreaChart);\n    default:\n      throw new Error(`Unsupported chart type :${plotlyInputWithValidData.data[0]?.type}`);\n  }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\nDeclarativeChart.defaultProps = {\n  colorwayType: 'default',\n};\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 { decodeBase64Fields } from '@fluentui/chart-utilities';\nimport type { PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray, isMonthArray, mapFluentChart, sanitizeJson } from '@fluentui/chart-utilities';\n\nimport type { GridProperties } from './PlotlySchemaAdapter';\nimport {\n  correctYearMonth,\n  getGridProperties,\n  transformPlotlyJsonToDonutProps,\n  transformPlotlyJsonToVSBCProps,\n  transformPlotlyJsonToAreaChartProps,\n  transformPlotlyJsonToLineChartProps,\n  transformPlotlyJsonToHorizontalBarWithAxisProps,\n  transformPlotlyJsonToHeatmapProps,\n  transformPlotlyJsonToSankeyProps,\n  transformPlotlyJsonToGaugeProps,\n  transformPlotlyJsonToGVBCProps,\n  transformPlotlyJsonToVBCProps,\n  transformPlotlyJsonToChartTableProps,\n  transformPlotlyJsonToScatterChartProps,\n  projectPolarToCartesian,\n  getAllupLegendsProps,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\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 { IChart, IImageExportOptions } from '../../types/index';\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ScatterChart } from '../ScatterChart/index';\nimport { ChartTable } from '../ChartTable/index';\nimport { ILegendsProps, Legends } from '../Legends/index';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\nconst ResponsiveChartTable = withResponsiveContainer(ChartTable);\n\n// Default x-axis key for grouping traces. Also applicable for PieData and SankeyData where x-axis is not defined.\nconst DEFAULT_XAXIS = 'x';\nconst FALLBACK_TYPE = 'fallback';\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   * Optional prop to specify the colorway type of the chart.\n   * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n   * - 'builtin': Use Fluent UI colorway.\n   * - 'others': Reserved for future colorways.\n   * @default 'default'\n   */\n  colorwayType?: ColorwayType;\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\nfunction renderChart<TProps>(\n  Renderer: React.ComponentType<TProps>,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  transformer: (...args: any[]) => TProps,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  transformerArgs: any[],\n  commonProps: Partial<TProps>,\n  cellRow: number,\n  cellColumn: number,\n): JSX.Element {\n  const chartProps = transformer(...transformerArgs);\n  return (\n    <div\n      key={`${cellRow}_${cellColumn}`}\n      style={{\n        gridRowStart: cellRow,\n        gridRowEnd: cellRow + 1,\n        gridColumnStart: cellColumn,\n        gridColumnEnd: cellColumn + 1,\n      }}\n    >\n      <Renderer {...chartProps} {...commonProps} />\n    </div>\n  );\n}\n\ntype PreTransformHooks = {\n  preTransformCondition?: (plotlySchema: PlotlySchema) => boolean;\n  preTransformOperation?: (plotlySchema: PlotlySchema) => PlotlySchema;\n};\n\nconst LineAreaPreTransformOp = (plotlyInput: PlotlySchema) => {\n  const xValues = (plotlyInput.data[0] as PlotData).x;\n  const isXMonth = isMonthArray(xValues);\n  let renderData = plotlyInput.data;\n  if (isXMonth) {\n    renderData = plotlyInput.data.map((dataPoint: PlotData) => ({\n      ...dataPoint,\n      x: correctYearMonth(dataPoint.x),\n    }));\n  }\n  return { data: renderData, layout: plotlyInput.layout };\n};\n\ntype ChartTypeMap = {\n  donut: {\n    transformer: typeof transformPlotlyJsonToDonutProps;\n    renderer: typeof ResponsiveDonutChart;\n  } & PreTransformHooks;\n  sankey: {\n    transformer: typeof transformPlotlyJsonToSankeyProps;\n    renderer: typeof ResponsiveSankeyChart;\n  } & PreTransformHooks;\n  table: {\n    transformer: typeof transformPlotlyJsonToChartTableProps;\n    renderer: typeof ResponsiveChartTable;\n  } & PreTransformHooks;\n  horizontalbar: {\n    transformer: typeof transformPlotlyJsonToHorizontalBarWithAxisProps;\n    renderer: typeof ResponsiveHorizontalBarChartWithAxis;\n  } & PreTransformHooks;\n  groupedverticalbar: {\n    transformer: typeof transformPlotlyJsonToGVBCProps;\n    renderer: typeof ResponsiveGroupedVerticalBarChart;\n  } & PreTransformHooks;\n  verticalstackedbar: {\n    transformer: typeof transformPlotlyJsonToVSBCProps;\n    renderer: typeof ResponsiveVerticalStackedBarChart;\n  } & PreTransformHooks;\n  heatmap: {\n    transformer: typeof transformPlotlyJsonToHeatmapProps;\n    renderer: typeof ResponsiveHeatMapChart;\n  } & PreTransformHooks;\n  gauge: {\n    transformer: typeof transformPlotlyJsonToGaugeProps;\n    renderer: typeof ResponsiveGaugeChart;\n  } & PreTransformHooks;\n  verticalbar: {\n    transformer: typeof transformPlotlyJsonToVBCProps;\n    renderer: typeof ResponsiveVerticalBarChart;\n  } & PreTransformHooks;\n  area: {\n    transformer: typeof transformPlotlyJsonToAreaChartProps;\n    renderer: typeof ResponsiveAreaChart;\n  } & PreTransformHooks;\n  line: {\n    transformer: typeof transformPlotlyJsonToLineChartProps;\n    renderer: typeof ResponsiveLineChart;\n  } & PreTransformHooks;\n  scatter: {\n    transformer: typeof transformPlotlyJsonToScatterChartProps;\n    renderer: typeof ResponsiveScatterChart;\n  } & PreTransformHooks;\n  fallback: {\n    transformer: typeof transformPlotlyJsonToVSBCProps;\n    renderer: typeof ResponsiveVerticalStackedBarChart;\n  } & PreTransformHooks;\n};\n\nconst chartMap: ChartTypeMap = {\n  // PieData category charts\n  donut: {\n    transformer: transformPlotlyJsonToDonutProps,\n    renderer: ResponsiveDonutChart,\n  },\n  // SankeyData category charts\n  sankey: {\n    transformer: transformPlotlyJsonToSankeyProps,\n    renderer: ResponsiveSankeyChart,\n  },\n  // TableData category charts\n  table: {\n    transformer: transformPlotlyJsonToChartTableProps,\n    renderer: ResponsiveChartTable,\n  },\n  // PlotData category charts\n  horizontalbar: {\n    transformer: transformPlotlyJsonToHorizontalBarWithAxisProps,\n    renderer: ResponsiveHorizontalBarChartWithAxis,\n  },\n  groupedverticalbar: {\n    transformer: transformPlotlyJsonToGVBCProps,\n    renderer: ResponsiveGroupedVerticalBarChart,\n  },\n  verticalstackedbar: {\n    transformer: transformPlotlyJsonToVSBCProps,\n    renderer: ResponsiveVerticalStackedBarChart,\n  },\n  heatmap: {\n    transformer: transformPlotlyJsonToHeatmapProps,\n    renderer: ResponsiveHeatMapChart,\n  },\n  gauge: {\n    transformer: transformPlotlyJsonToGaugeProps,\n    renderer: ResponsiveGaugeChart,\n  },\n  verticalbar: {\n    transformer: transformPlotlyJsonToVBCProps,\n    renderer: ResponsiveVerticalBarChart,\n  },\n  area: {\n    transformer: transformPlotlyJsonToAreaChartProps,\n    renderer: ResponsiveAreaChart,\n    preTransformOperation: LineAreaPreTransformOp,\n  },\n  line: {\n    transformer: transformPlotlyJsonToLineChartProps,\n    renderer: ResponsiveLineChart,\n    preTransformOperation: LineAreaPreTransformOp,\n  },\n  scatter: {\n    transformer: transformPlotlyJsonToScatterChartProps,\n    renderer: ResponsiveScatterChart,\n    preTransformOperation: LineAreaPreTransformOp,\n  },\n  fallback: {\n    transformer: transformPlotlyJsonToVSBCProps,\n    renderer: ResponsiveVerticalStackedBarChart,\n  },\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 chart: OutputChartType = mapFluentChart(plotlySchema);\n  if (!chart.isValid) {\n    throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n  }\n  let plotlyInput = plotlySchema as PlotlySchema;\n  try {\n    plotlyInput = decodeBase64Fields(plotlyInput);\n  } catch (error) {\n    throw new Error(`Failed to decode plotly schema: ${error}`);\n  }\n  const plotlyInputWithValidData: PlotlySchema = {\n    ...plotlyInput,\n    data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace[0]]),\n  };\n\n  const validTracesFilteredIndex: [number, string][] = chart.validTracesInfo!.map((trace, index) => [index, trace[1]]);\n\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  const isMultiPlot = React.useRef(false);\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  function createLegends(legendProps: ILegendsProps): JSX.Element {\n    // eslint-disable-next-line react/jsx-no-bind\n    return <Legends {...legendProps} selectedLegends={activeLegends} onChange={onActiveLegendsChange} />;\n  }\n\n  const exportAsImage = React.useCallback(\n    (opts?: IImageExportOptions): Promise<string> => {\n      return new Promise((resolve, reject) => {\n        if (isMultiPlot.current) {\n          return reject(Error('Exporting multi plot charts as image is not supported'));\n        }\n        if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {\n          return reject(Error('Chart cannot be exported as image'));\n        }\n\n        chartRef.current\n          .toImage({\n            background: theme.semanticColors.bodyBackground,\n            scale: 5,\n            ...opts,\n          })\n          .then(resolve)\n          .catch(reject);\n      });\n    },\n    [theme],\n  );\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      exportAsImage,\n    }),\n    [exportAsImage],\n  );\n\n  if (chart.type === 'scatterpolar') {\n    const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n    plotlyInputWithValidData.data = cartesianProjection.data;\n    validTracesFilteredIndex.forEach((trace, index) => {\n      if (trace[1] === 'scatterpolar') {\n        validTracesFilteredIndex[index][1] = 'line'; // Change type to line for rendering\n      }\n    });\n  }\n\n  const groupedTraces: Record<string, number[]> = {};\n  plotlyInputWithValidData.data.forEach((trace: Partial<PlotData>, index) => {\n    const xAxisKey = trace.xaxis ?? DEFAULT_XAXIS;\n    if (!groupedTraces[xAxisKey]) {\n      groupedTraces[xAxisKey] = [];\n    }\n    groupedTraces[xAxisKey].push(index);\n  });\n\n  isMultiPlot.current = Object.keys(groupedTraces).length > 1;\n  const gridProperties: GridProperties = getGridProperties(plotlyInputWithValidData.layout, isMultiPlot.current);\n\n  const allupLegendsProps = getAllupLegendsProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme);\n\n  type ChartType = keyof ChartTypeMap;\n  // map through the grouped traces and render the appropriate chart\n  return (\n    <>\n      <div\n        style={{\n          display: 'grid',\n          gridTemplateRows: gridProperties.templateRows,\n          gridTemplateColumns: gridProperties.templateColumns,\n        }}\n      >\n        {Object.entries(groupedTraces).map(([xAxisKey, index]) => {\n          const plotlyInputForGroup: PlotlySchema = {\n            ...plotlyInputWithValidData,\n            data: index.map(idx => plotlyInputWithValidData.data[idx]),\n          };\n\n          const filteredTracesInfo = validTracesFilteredIndex.filter(trace => index.includes(trace[0]));\n          let chartType =\n            validTracesFilteredIndex.some(trace => trace[1] === FALLBACK_TYPE) || chart.type === FALLBACK_TYPE\n              ? FALLBACK_TYPE\n              : filteredTracesInfo[0][1];\n\n          if (\n            validTracesFilteredIndex.some(trace => trace[1] === 'line') &&\n            validTracesFilteredIndex.some(trace => trace[1] === 'scatter')\n          ) {\n            chartType = 'line';\n          }\n\n          const chartEntry = chartMap[chartType as ChartType];\n          if (chartEntry) {\n            const { transformer, renderer, preTransformCondition, preTransformOperation } = chartEntry;\n            if (preTransformCondition === undefined || preTransformCondition(plotlyInputForGroup)) {\n              const transformedInput = preTransformOperation\n                ? preTransformOperation(plotlyInputForGroup)\n                : plotlyInputForGroup;\n              const cellProperties = gridProperties.layout[xAxisKey];\n\n              return renderChart<ReturnType<typeof transformer>>(\n                renderer,\n                transformer,\n                [transformedInput, isMultiPlot.current, colorMap, props.colorwayType, isDarkTheme],\n                {\n                  ...commonProps,\n                  xAxisAnnotation: cellProperties?.xAnnotation,\n                  yAxisAnnotation: cellProperties?.yAnnotation,\n                },\n                cellProperties?.row ?? 1,\n                cellProperties?.column ?? 1,\n              );\n            }\n            return <></>;\n          } else {\n            throw new Error(`Unsupported chart type :${plotlyInputForGroup.data[0]?.type}`);\n          }\n        })}\n      </div>\n      {isMultiPlot.current && createLegends(allupLegendsProps)}\n    </>\n  );\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\nDeclarativeChart.defaultProps = {\n  colorwayType: 'default',\n};\n"]}

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

@@ -10,21 +10,36 @@ import { IGaugeChartProps } from '../GaugeChart/index';
 import { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index';
 import { IVerticalBarChartProps } from '../VerticalBarChart/index';
 import { IChartTableProps } from '../ChartTable/index';
-import type { Datum, PlotlySchema, PlotData, TypedArray, Color } from '@fluentui/chart-utilities';
+import type { Datum, Layout, PlotlySchema, PlotData, TypedArray, Color } from '@fluentui/chart-utilities';
 import type { ColorwayType } from './PlotlyColorAdapter';
-export declare const isMonthArray: (data: Datum[] | Datum[][] | TypedArray) => boolean;
+import { ILegendsProps } from '../Legends/index';
+export type AxisProperties = {
+    xAnnotation?: string;
+    yAnnotation?: string;
+    row: number;
+    column: number;
+};
+export type GridAxisProperties = Record<string, AxisProperties>;
+export type GridProperties = {
+    templateRows: string;
+    templateColumns: string;
+    layout: GridAxisProperties;
+};
 export declare const correctYearMonth: (xValues: Datum[] | Datum[][] | TypedArray) => any[];
 export declare const _getGaugeAxisColor: (colorway: string[] | undefined, colorwayType: ColorwayType, color: Color | undefined, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string;
-export declare const transformPlotlyJsonToDonutProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IDonutChartProps;
-export declare const transformPlotlyJsonToVSBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean, fallbackVSBC?: boolean) => IVerticalStackedBarChartProps;
-export declare const transformPlotlyJsonToGVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IGroupedVerticalBarChartProps;
-export declare const transformPlotlyJsonToVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IVerticalBarChartProps;
-export declare const transformPlotlyJsonToScatterChartProps: (input: PlotlySchema, isAreaChart: boolean, isScatterMarkers: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ILineChartProps | IAreaChartProps;
-export declare const transformPlotlyJsonToHorizontalBarWithAxisProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IHorizontalBarChartWithAxisProps;
-export declare const transformPlotlyJsonToHeatmapProps: (input: PlotlySchema) => IHeatMapChartProps;
-export declare const transformPlotlyJsonToSankeyProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ISankeyChartProps;
-export declare const transformPlotlyJsonToGaugeProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IGaugeChartProps;
-export declare const transformPlotlyJsonToChartTableProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IChartTableProps;
+export declare const resolveXAxisPoint: (x: Datum, isXYearCategory: boolean, isXString: boolean, isXDate: boolean, isXNumber: boolean) => string | Date | number;
+export declare const transformPlotlyJsonToDonutProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IDonutChartProps;
+export declare const transformPlotlyJsonToVSBCProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean, fallbackVSBC?: boolean) => IVerticalStackedBarChartProps;
+export declare const transformPlotlyJsonToGVBCProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IGroupedVerticalBarChartProps;
+export declare const transformPlotlyJsonToVBCProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IVerticalBarChartProps;
+export declare const transformPlotlyJsonToAreaChartProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IAreaChartProps;
+export declare const transformPlotlyJsonToLineChartProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ILineChartProps;
+export declare const transformPlotlyJsonToScatterChartProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ILineChartProps;
+export declare const transformPlotlyJsonToHorizontalBarWithAxisProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IHorizontalBarChartWithAxisProps;
+export declare const transformPlotlyJsonToHeatmapProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IHeatMapChartProps;
+export declare const transformPlotlyJsonToSankeyProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ISankeyChartProps;
+export declare const transformPlotlyJsonToGaugeProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IGaugeChartProps;
+export declare const transformPlotlyJsonToChartTableProps: (input: PlotlySchema, isMultiPlot: boolean, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IChartTableProps;
 export declare const projectPolarToCartesian: (input: PlotlySchema) => PlotlySchema;
 /**
  * Interate iteratively through the trace object and find all the array attributes.
@@ -32,6 +47,7 @@ export declare const projectPolarToCartesian: (input: PlotlySchema) => PlotlySch
  * @param trace
  */
 export declare function findArrayAttributes(trace: any): void;
-export declare const isStringArray: (arr: any) => boolean;
+export declare const getAllupLegendsProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ILegendsProps;
 export declare const getNumberAtIndexOrDefault: (data: PlotData['z'] | undefined, index: number) => number | undefined;
 export declare const getValidXYRanges: (series: Partial<PlotData>) => [number, number][];
+export declare const getGridProperties: (layout: Partial<Layout> | undefined, isMultiPlot: boolean) => GridProperties;