@fluentui/react-charts 0.0.0-nightly-20250819-0407.1 → 0.0.0-nightly-20250821-0406.1

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

@@ -29,6 +29,7 @@ const _index8 = require("../VerticalBarChart/index");
 const _index9 = require("../ScatterChart/index");
 const _withResponsiveContainer = require("../ResponsiveContainer/withResponsiveContainer");
 const _index10 = require("../ChartTable/index");
+const _index11 = require("../Legends/index");
 const ResponsiveDonutChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index.DonutChart);
 const ResponsiveVerticalStackedBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index1.VerticalStackedBarChart);
 const ResponsiveLineChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index2.LineChart);
@@ -41,10 +42,104 @@ const ResponsiveGroupedVerticalBarChart = (0, _withResponsiveContainer.withRespo
 const ResponsiveVerticalBarChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index8.VerticalBarChart);
 const ResponsiveScatterChart = (0, _withResponsiveContainer.withResponsiveContainer)(_index9.ScatterChart);
 const ResponsiveChartTable = (0, _withResponsiveContainer.withResponsiveContainer)(_index10.ChartTable);
+// Default x-axis key for grouping traces. Also applicable for PieData and SankeyData where x-axis is not defined.
+const DEFAULT_XAXIS = 'x';
+const FALLBACK_TYPE = 'fallback';
 const useColorMapping = ()=>{
     const colorMap = _react.useRef(new Map());
     return colorMap;
 };
+function renderChart(Renderer, transformer, transformerArgs, commonProps, cellRow, cellColumn) {
+    const chartProps = transformer(...transformerArgs);
+    return /*#__PURE__*/ _react.createElement("div", {
+        key: `${cellRow}_${cellColumn}`,
+        style: {
+            gridRowStart: cellRow,
+            gridRowEnd: cellRow + 1,
+            gridColumnStart: cellColumn,
+            gridColumnEnd: cellColumn + 1
+        }
+    }, /*#__PURE__*/ _react.createElement(Renderer, {
+        ...chartProps,
+        ...commonProps
+    }));
+}
+const LineAreaPreTransformOp = (plotlyInput)=>{
+    const xValues = plotlyInput.data[0].x;
+    const isXMonth = (0, _chartutilities.isMonthArray)(xValues);
+    let renderData = plotlyInput.data;
+    if (isXMonth) {
+        renderData = plotlyInput.data.map((dataPoint)=>({
+                ...dataPoint,
+                x: (0, _PlotlySchemaAdapter.correctYearMonth)(dataPoint.x)
+            }));
+    }
+    return {
+        data: renderData,
+        layout: plotlyInput.layout
+    };
+};
+const chartMap = {
+    // PieData category charts
+    donut: {
+        transformer: _PlotlySchemaAdapter.transformPlotlyJsonToDonutProps,
+        renderer: ResponsiveDonutChart
+    },
+    // SankeyData category charts
+    sankey: {
+        transformer: _PlotlySchemaAdapter.transformPlotlyJsonToSankeyProps,
+        renderer: ResponsiveSankeyChart
+    },
+    // TableData category charts
+    table: {
+        transformer: _PlotlySchemaAdapter.transformPlotlyJsonToChartTableProps,
+        renderer: ResponsiveChartTable
+    },
+    // PlotData category charts
+    horizontalbar: {
+        transformer: _PlotlySchemaAdapter.transformPlotlyJsonToHorizontalBarWithAxisProps,
+        renderer: ResponsiveHorizontalBarChartWithAxis
+    },
+    groupedverticalbar: {
+        transformer: _PlotlySchemaAdapter.transformPlotlyJsonToGVBCProps,
+        renderer: ResponsiveGroupedVerticalBarChart
+    },
+    verticalstackedbar: {
+        transformer: _PlotlySchemaAdapter.transformPlotlyJsonToVSBCProps,
+        renderer: ResponsiveVerticalStackedBarChart
+    },
+    heatmap: {
+        transformer: _PlotlySchemaAdapter.transformPlotlyJsonToHeatmapProps,
+        renderer: ResponsiveHeatMapChart
+    },
+    gauge: {
+        transformer: _PlotlySchemaAdapter.transformPlotlyJsonToGaugeProps,
+        renderer: ResponsiveGaugeChart
+    },
+    verticalbar: {
+        transformer: _PlotlySchemaAdapter.transformPlotlyJsonToVBCProps,
+        renderer: ResponsiveVerticalBarChart
+    },
+    area: {
+        transformer: _PlotlySchemaAdapter.transformPlotlyJsonToAreaChartProps,
+        renderer: ResponsiveAreaChart,
+        preTransformOperation: LineAreaPreTransformOp
+    },
+    line: {
+        transformer: _PlotlySchemaAdapter.transformPlotlyJsonToLineChartProps,
+        renderer: ResponsiveLineChart,
+        preTransformOperation: LineAreaPreTransformOp
+    },
+    scatter: {
+        transformer: _PlotlySchemaAdapter.transformPlotlyJsonToScatterChartProps,
+        renderer: ResponsiveScatterChart,
+        preTransformOperation: LineAreaPreTransformOp
+    },
+    fallback: {
+        transformer: _PlotlySchemaAdapter.transformPlotlyJsonToVSBCProps,
+        renderer: ResponsiveVerticalStackedBarChart
+    }
+};
 const useIsDarkTheme = ()=>{
     const parentV9Theme = _react.useContext(_reactsharedcontexts.ThemeContext_unstable);
     const v9Theme = parentV9Theme ? parentV9Theme : _tokens.webLightTheme;
@@ -70,10 +165,15 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
         ...plotlyInput,
         data: chart.validTracesInfo.map((trace)=>plotlyInput.data[trace.index])
     };
+    const validTracesFilteredIndex = chart.validTracesInfo.map((trace, index)=>[
+            index,
+            trace.type
+        ]);
     let { selectedLegends } = plotlySchema;
     const colorMap = useColorMapping();
     const isDarkTheme = useIsDarkTheme();
     const chartRef = _react.useRef(null);
+    const isMultiPlot = _react.useRef(false);
     if (!(0, _chartutilities.isArrayOrTypedArray)(selectedLegends)) {
         selectedLegends = [];
     }
@@ -107,66 +207,20 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
         legendProps: multiSelectLegendProps,
         componentRef: chartRef
     };
-    const renderLineAreaScatter = (plotlyData, isAreaChart, isScatterChart)=>{
-        var _plotlyData_;
-        const isScatterMarkers = [
-            'text+markers',
-            'markers+text',
-            'lines+markers',
-            'markers+line',
-            'text+lines+markers'
-        ].includes((_plotlyData_ = plotlyData[0]) === null || _plotlyData_ === void 0 ? void 0 : _plotlyData_.mode);
-        const chartType = isAreaChart ? 'area' : isScatterChart ? 'scatter' : 'line';
-        const chartProps = {
-            ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToScatterChartProps)({
-                data: plotlyData,
-                layout: plotlyInput.layout
-            }, chartType, isScatterMarkers, colorMap, props.colorwayType, isDarkTheme),
-            ...commonProps
-        };
-        if (isAreaChart) {
-            return /*#__PURE__*/ _react.createElement(ResponsiveAreaChart, chartProps);
-        }
-        if (isScatterChart) {
-            return /*#__PURE__*/ _react.createElement(ResponsiveScatterChart, chartProps);
-        }
-        return /*#__PURE__*/ _react.createElement(ResponsiveLineChart, chartProps);
-    };
-    const checkAndRenderChart = (isAreaChart = false)=>{
-        let fallbackVSBC = false;
-        const xValues = plotlyInputWithValidData.data[0].x;
-        const isXDate = (0, _chartutilities.isDateArray)(xValues);
-        const isXNumber = (0, _chartutilities.isNumberArray)(xValues);
-        const isXMonth = (0, _chartutilities.isMonthArray)(xValues);
-        const isYString = (0, _PlotlySchemaAdapter.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
-        const isXYear = (0, _chartutilities.isYearArray)(xValues);
-        const allModes = plotlyInputWithValidData.data.map((data)=>data.mode);
-        const isScatterChart = allModes.every((mode)=>mode === 'markers');
-        // If x is date or number and y is not string, render as Line/Area Chart
-        // If x is month, correct the year and render as Line/Area Chart
-        if ((isXDate || isXNumber) && !isXYear && !isYString || isScatterChart && !isYString) {
-            return renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart, isScatterChart);
-        } else if (isXMonth) {
-            const updatedData = plotlyInputWithValidData.data.map((dataPoint)=>({
-                    ...dataPoint,
-                    x: (0, _PlotlySchemaAdapter.correctYearMonth)(dataPoint.x)
-                }));
-            return renderLineAreaScatter(updatedData, isAreaChart, isScatterChart);
-        }
-        // Unsupported schema, render as VerticalStackedBarChart
-        fallbackVSBC = true;
-        return /*#__PURE__*/ _react.createElement(ResponsiveVerticalStackedBarChart, {
-            ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToVSBCProps)(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme, fallbackVSBC),
-            ...commonProps
+    function createLegends(legendProps) {
+        // eslint-disable-next-line react/jsx-no-bind
+        return /*#__PURE__*/ _react.createElement(_index11.Legends, {
+            ...legendProps,
+            selectedLegends: activeLegends,
+            onChange: onActiveLegendsChange
         });
-    };
+    }
     // TODO
     const exportAsImage = _react.useCallback((opts)=>{
         return new Promise((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'));
             }
@@ -182,70 +236,69 @@ const DeclarativeChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
         }), [
         exportAsImage
     ]);
-    switch(chart.type){
-        case 'donut':
-            return /*#__PURE__*/ _react.createElement(ResponsiveDonutChart, {
-                ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToDonutProps)(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme),
-                ...commonProps
-            });
-        case 'horizontalbar':
-            return /*#__PURE__*/ _react.createElement(ResponsiveHorizontalBarChartWithAxis, {
-                ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToHorizontalBarWithAxisProps)(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme),
-                ...commonProps
-            });
-        case 'groupedverticalbar':
-            return /*#__PURE__*/ _react.createElement(ResponsiveGroupedVerticalBarChart, {
-                ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToGVBCProps)(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme),
-                ...commonProps
-            });
-        case 'verticalstackedbar':
-            return /*#__PURE__*/ _react.createElement(ResponsiveVerticalStackedBarChart, {
-                ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToVSBCProps)(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme),
-                ...commonProps
-            });
-        case 'heatmap':
-            return /*#__PURE__*/ _react.createElement(ResponsiveHeatMapChart, {
-                ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToHeatmapProps)(plotlyInputWithValidData),
-                ...commonProps,
-                legendProps: {}
-            });
-        case 'sankey':
-            return /*#__PURE__*/ _react.createElement(ResponsiveSankeyChart, {
-                ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToSankeyProps)(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme),
-                ...commonProps
-            });
-        case 'gauge':
-            return /*#__PURE__*/ _react.createElement(ResponsiveGaugeChart, {
-                ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToGaugeProps)(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme),
-                ...commonProps
-            });
-        case 'verticalbar':
-            return /*#__PURE__*/ _react.createElement(ResponsiveVerticalBarChart, {
-                ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToVBCProps)(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme),
-                ...commonProps
-            });
-        case 'table':
-            return /*#__PURE__*/ _react.createElement(ResponsiveChartTable, {
-                ...(0, _PlotlySchemaAdapter.transformPlotlyJsonToChartTableProps)(plotlyInputWithValidData, colorMap, isDarkTheme),
-                ...commonProps
-            });
-        // TODO: Add 'scatter' as a separate chart type
-        case 'area':
-        case 'line':
-        case 'fallback':
-        case 'scatterpolar':
-        case 'scatter':
-            if (chart.type === 'scatterpolar') {
-                const cartesianProjection = (0, _PlotlySchemaAdapter.projectPolarToCartesian)(plotlyInputWithValidData);
-                plotlyInputWithValidData.data = cartesianProjection.data;
+    if (chart.type === 'scatterpolar') {
+        const cartesianProjection = (0, _PlotlySchemaAdapter.projectPolarToCartesian)(plotlyInputWithValidData);
+        plotlyInputWithValidData.data = cartesianProjection.data;
+        validTracesFilteredIndex.forEach((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
-            const isAreaChart = plotlyInputWithValidData.data.some((series)=>series.fill === 'tonexty' || series.fill === 'tozeroy' || !!series.stackgroup);
-            return checkAndRenderChart(isAreaChart);
-        default:
-            var _plotlyInputWithValidData_data_;
-            throw new Error(`Unsupported chart type :${(_plotlyInputWithValidData_data_ = plotlyInputWithValidData.data[0]) === null || _plotlyInputWithValidData_data_ === void 0 ? void 0 : _plotlyInputWithValidData_data_.type}`);
+        });
     }
+    const groupedTraces = {};
+    plotlyInputWithValidData.data.forEach((trace, index)=>{
+        var _trace_xaxis;
+        const xAxisKey = (_trace_xaxis = trace.xaxis) !== null && _trace_xaxis !== void 0 ? _trace_xaxis : DEFAULT_XAXIS;
+        if (!groupedTraces[xAxisKey]) {
+            groupedTraces[xAxisKey] = [];
+        }
+        groupedTraces[xAxisKey].push(index);
+    });
+    isMultiPlot.current = Object.keys(groupedTraces).length > 1;
+    const gridProperties = (0, _PlotlySchemaAdapter.getGridProperties)(plotlyInputWithValidData.layout, isMultiPlot.current);
+    const allupLegendsProps = (0, _PlotlySchemaAdapter.getAllupLegendsProps)(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme);
+    // map through the grouped traces and render the appropriate chart
+    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("div", {
+        style: {
+            display: 'grid',
+            gridTemplateRows: gridProperties.templateRows,
+            gridTemplateColumns: gridProperties.templateColumns
+        }
+    }, Object.entries(groupedTraces).map(([xAxisKey, index])=>{
+        const plotlyInputForGroup = {
+            ...plotlyInputWithValidData,
+            data: index.map((idx)=>plotlyInputWithValidData.data[idx])
+        };
+        const filteredTracesInfo = validTracesFilteredIndex.filter((trace)=>index.includes(trace[0]));
+        let chartType = validTracesFilteredIndex.some((trace)=>trace[1] === FALLBACK_TYPE) || chart.type === FALLBACK_TYPE ? FALLBACK_TYPE : filteredTracesInfo[0][1];
+        if (validTracesFilteredIndex.some((trace)=>trace[1] === 'line') && validTracesFilteredIndex.some((trace)=>trace[1] === 'scatter')) {
+            chartType = 'line';
+        }
+        const chartEntry = chartMap[chartType];
+        if (chartEntry) {
+            const { transformer, renderer, preTransformCondition, preTransformOperation } = chartEntry;
+            if (preTransformCondition === undefined || preTransformCondition(plotlyInputForGroup)) {
+                const transformedInput = preTransformOperation ? preTransformOperation(plotlyInputForGroup) : plotlyInputForGroup;
+                const cellProperties = gridProperties.layout[xAxisKey];
+                var _cellProperties_row, _cellProperties_column;
+                return renderChart(renderer, transformer, [
+                    transformedInput,
+                    isMultiPlot.current,
+                    colorMap,
+                    props.colorwayType,
+                    isDarkTheme
+                ], {
+                    ...commonProps,
+                    xAxisAnnotation: cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.xAnnotation,
+                    yAxisAnnotation: cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.yAnnotation
+                }, (_cellProperties_row = cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.row) !== null && _cellProperties_row !== void 0 ? _cellProperties_row : 1, (_cellProperties_column = cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.column) !== null && _cellProperties_column !== void 0 ? _cellProperties_column : 1);
+            }
+            return /*#__PURE__*/ _react.createElement(_react.Fragment, null);
+        } else {
+            var _plotlyInputForGroup_data_;
+            throw new Error(`Unsupported chart type :${(_plotlyInputForGroup_data_ = plotlyInputForGroup.data[0]) === null || _plotlyInputForGroup_data_ === void 0 ? void 0 : _plotlyInputForGroup_data_.type}`);
+        }
+    })), isMultiPlot.current && createLegends(allupLegendsProps));
 });
 DeclarativeChart.displayName = 'DeclarativeChart';
 DeclarativeChart.defaultProps = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DeclarativeChart/DeclarativeChart.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n  decodeBase64Fields,\n  isArrayOrTypedArray,\n  isDateArray,\n  isMonthArray,\n  isNumberArray,\n  isYearArray,\n  mapFluentChart,\n  sanitizeJson,\n} from '@fluentui/chart-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';\nimport { Theme, webLightTheme } from '@fluentui/tokens';\nimport * as d3Color from 'd3-color';\n\nimport {\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 { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { LineChart, LineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, AreaChartProps } 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 { Chart, ImageExportOptions } from '../../types/index';\nimport { ScatterChart, ScatterChartProps } from '../ScatterChart/index';\n\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 ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\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?: React.RefObject<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?: ImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n  const colorMap = React.useRef(new Map<string, string>());\n  return colorMap;\n};\n\nconst useIsDarkTheme = (): boolean => {\n  const parentV9Theme = React.useContext(V9ThemeContext) as Theme;\n  const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme;\n\n  // Get background and foreground colors\n  const backgroundColor = d3Color.hsl(v9Theme.colorNeutralBackground1);\n  const foregroundColor = d3Color.hsl(v9Theme.colorNeutralForeground1);\n\n  const isDarkTheme = backgroundColor.l < foregroundColor.l;\n\n  return isDarkTheme;\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.index]),\n  };\n\n  let { selectedLegends } = plotlySchema;\n  const colorMap = useColorMapping();\n  const isDarkTheme = useIsDarkTheme();\n  const chartRef = React.useRef<Chart>(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  };\n\n  const renderLineAreaScatter = (plotlyData: Data[], isAreaChart: boolean, isScatterChart: boolean): JSXElement => {\n    const isScatterMarkers = [\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 chartType = isAreaChart ? 'area' : isScatterChart ? 'scatter' : 'line';\n    const chartProps: LineChartProps | AreaChartProps | ScatterChartProps = {\n      ...transformPlotlyJsonToScatterChartProps(\n        { data: plotlyData, layout: plotlyInput.layout },\n        chartType,\n        isScatterMarkers,\n        colorMap,\n        props.colorwayType,\n        isDarkTheme,\n      ),\n      ...commonProps,\n    };\n    if (isAreaChart) {\n      return <ResponsiveAreaChart {...chartProps} />;\n    }\n    if (isScatterChart) {\n      return <ResponsiveScatterChart {...(chartProps as ScatterChartProps)} />;\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    const allModes = plotlyInputWithValidData.data.map((data: PlotData) => data.mode);\n    const isScatterChart = allModes.every((mode: string) => mode === 'markers');\n    // If x is date or number and y is not string, render as Line/Area Chart\n    // If x is month, correct the year and render as Line/Area Chart\n    if (((isXDate || isXNumber) && !isXYear && !isYString) || (isScatterChart && !isYString)) {\n      return renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart, isScatterChart);\n    } else if (isXMonth) {\n      const updatedData = plotlyInputWithValidData.data.map((dataPoint: PlotData) => ({\n        ...dataPoint,\n        x: correctYearMonth(dataPoint.x),\n      }));\n      return renderLineAreaScatter(updatedData, isAreaChart, isScatterChart);\n    }\n    // Unsupported schema, render as VerticalStackedBarChart\n    fallbackVSBC = true;\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  // TODO\n  const exportAsImage = React.useCallback((opts?: ImageExportOptions): 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: tokens.colorNeutralBackground1,\n          scale: 5,\n          ...opts,\n        })\n        .then(resolve)\n        .catch(reject);\n    });\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    // TODO: Add 'scatter' as a separate chart type\n    case 'area':\n    case 'line':\n    case 'fallback':\n    case 'scatterpolar':\n    case 'scatter':\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"],"names":["React","decodeBase64Fields","isArrayOrTypedArray","isDateArray","isMonthArray","isNumberArray","isYearArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","correctYearMonth","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToScatterChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","transformPlotlyJsonToChartTableProps","projectPolarToCartesian","isStringArray","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","ScatterChart","withResponsiveContainer","ChartTable","ResponsiveDonutChart","ResponsiveVerticalStackedBarChart","ResponsiveLineChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveHeatMapChart","ResponsiveSankeyChart","ResponsiveGaugeChart","ResponsiveGroupedVerticalBarChart","ResponsiveVerticalBarChart","ResponsiveScatterChart","ResponsiveChartTable","useColorMapping","colorMap","useRef","Map","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","DeclarativeChart","forwardRef","props","forwardedRef","plotlySchema","chartSchema","chart","isValid","Error","errorMessage","plotlyInput","error","plotlyInputWithValidData","data","validTracesInfo","map","trace","index","selectedLegends","chartRef","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","commonProps","legendProps","componentRef","renderLineAreaScatter","plotlyData","isAreaChart","isScatterChart","isScatterMarkers","includes","mode","chartType","chartProps","layout","colorwayType","checkAndRenderChart","fallbackVSBC","xValues","x","isXDate","isXNumber","isXMonth","isYString","y","isXYear","allModes","every","updatedData","dataPoint","exportAsImage","useCallback","opts","Promise","resolve","reject","current","toImage","background","scale","then","catch","useImperativeHandle","type","cartesianProjection","some","series","fill","stackgroup","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"sources":["../src/components/DeclarativeChart/DeclarativeChart.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport type { PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n  decodeBase64Fields,\n  isArrayOrTypedArray,\n  isMonthArray,\n  mapFluentChart,\n  sanitizeJson,\n} from '@fluentui/chart-utilities';\nimport type { GridProperties } from './PlotlySchemaAdapter';\nimport { tokens } from '@fluentui/react-theme';\nimport { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';\nimport { Theme, webLightTheme } from '@fluentui/tokens';\nimport * as d3Color from 'd3-color';\n\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 { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\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 { Chart, ImageExportOptions } from '../../types/index';\nimport { ScatterChart } from '../ScatterChart/index';\n\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ChartTable } from '../ChartTable/index';\nimport { LegendsProps, Legends } from '../Legends/index';\nimport { JSXElement } from '@fluentui/react-utilities/src/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?: React.RefObject<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?: ImageExportOptions) => 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): JSXElement {\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\nconst useIsDarkTheme = (): boolean => {\n  const parentV9Theme = React.useContext(V9ThemeContext) as Theme;\n  const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme;\n\n  // Get background and foreground colors\n  const backgroundColor = d3Color.hsl(v9Theme.colorNeutralBackground1);\n  const foregroundColor = d3Color.hsl(v9Theme.colorNeutralForeground1);\n\n  const isDarkTheme = backgroundColor.l < foregroundColor.l;\n\n  return isDarkTheme;\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.index]),\n  };\n\n  const validTracesFilteredIndex: [number, string][] = chart.validTracesInfo!.map((trace, index) => [\n    index,\n    trace.type,\n  ]);\n\n  let { selectedLegends } = plotlySchema;\n  const colorMap = useColorMapping();\n  const isDarkTheme = useIsDarkTheme();\n  const chartRef = React.useRef<Chart>(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  };\n\n  function createLegends(legendProps: LegendsProps): JSXElement {\n    // eslint-disable-next-line react/jsx-no-bind\n    return <Legends {...legendProps} selectedLegends={activeLegends} onChange={onActiveLegendsChange} />;\n  }\n\n  // TODO\n  const exportAsImage = React.useCallback((opts?: ImageExportOptions): 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: tokens.colorNeutralBackground1,\n          scale: 5,\n          ...opts,\n        })\n        .then(resolve)\n        .catch(reject);\n    });\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  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"],"names":["React","decodeBase64Fields","isArrayOrTypedArray","isMonthArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","correctYearMonth","getGridProperties","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToAreaChartProps","transformPlotlyJsonToLineChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","transformPlotlyJsonToChartTableProps","transformPlotlyJsonToScatterChartProps","projectPolarToCartesian","getAllupLegendsProps","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","ScatterChart","withResponsiveContainer","ChartTable","Legends","ResponsiveDonutChart","ResponsiveVerticalStackedBarChart","ResponsiveLineChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveHeatMapChart","ResponsiveSankeyChart","ResponsiveGaugeChart","ResponsiveGroupedVerticalBarChart","ResponsiveVerticalBarChart","ResponsiveScatterChart","ResponsiveChartTable","DEFAULT_XAXIS","FALLBACK_TYPE","useColorMapping","colorMap","useRef","Map","renderChart","Renderer","transformer","transformerArgs","commonProps","cellRow","cellColumn","chartProps","div","key","style","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","LineAreaPreTransformOp","plotlyInput","xValues","data","x","isXMonth","renderData","map","dataPoint","layout","chartMap","donut","renderer","sankey","table","horizontalbar","groupedverticalbar","verticalstackedbar","heatmap","gauge","verticalbar","area","preTransformOperation","line","scatter","fallback","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","DeclarativeChart","forwardRef","props","forwardedRef","plotlySchema","chartSchema","chart","isValid","Error","errorMessage","error","plotlyInputWithValidData","validTracesInfo","trace","index","validTracesFilteredIndex","type","selectedLegends","chartRef","isMultiPlot","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","legendProps","componentRef","createLegends","exportAsImage","useCallback","opts","Promise","resolve","reject","current","toImage","background","scale","then","catch","useImperativeHandle","cartesianProjection","forEach","groupedTraces","xAxisKey","xaxis","push","Object","length","gridProperties","allupLegendsProps","colorwayType","display","gridTemplateRows","templateRows","gridTemplateColumns","templateColumns","entries","plotlyInputForGroup","idx","filteredTracesInfo","filter","includes","chartType","some","chartEntry","preTransformCondition","undefined","transformedInput","cellProperties","xAxisAnnotation","xAnnotation","yAxisAnnotation","yAnnotation","row","column","displayName","defaultProps"],"mappings":"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"}

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

@@ -15,6 +15,9 @@ _export(exports, {
     getColor: function() {
         return getColor;
     },
+    getOpacity: function() {
+        return getOpacity;
+    },
     getSchemaColors: function() {
         return getSchemaColors;
     },
@@ -109,7 +112,7 @@ const extractColor = (colorway, colorwayType, colors, colorMap, isDarkTheme)=>{
 };
 const resolveColor = (extractedColors, index, legend, colorMap, isDarkTheme)=>{
     let color = '';
-    if (extractedColors && (0, _chartutilities.isArrayOrTypedArray)(extractedColors) && extractedColors[index]) {
+    if (extractedColors && (0, _chartutilities.isArrayOrTypedArray)(extractedColors) && extractedColors.length > 0) {
         color = extractedColors[index % extractedColors.length];
     } else if (typeof extractedColors === 'string') {
         color = extractedColors;
@@ -118,3 +121,8 @@ const resolveColor = (extractedColors, index, legend, colorMap, isDarkTheme)=>{
     }
     return color;
 };
+const getOpacity = (series, index)=>{
+    var _series_marker, _series_marker1, _series_marker2, _series_marker3, _series_marker4;
+    var _series_opacity;
+    return ((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.opacity) ? (0, _chartutilities.isArrayOrTypedArray)((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.opacity) ? ((_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : _series_marker2.opacity)[index % ((_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.opacity).length] : (_series_marker4 = series.marker) === null || _series_marker4 === void 0 ? void 0 : _series_marker4.opacity : (_series_opacity = series.opacity) !== null && _series_opacity !== void 0 ? _series_opacity : 1;
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DeclarativeChart/PlotlyColorAdapter.ts"],"sourcesContent":["import * as React from 'react';\nimport { color as d3Color } from 'd3-color';\nimport type { PieColors, Color } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray } from '@fluentui/chart-utilities';\nimport { areArraysEqual } from '../../utilities/utilities';\nimport { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';\n\ntype PlotlyColorway = 'plotly' | 'others';\n\n// The color sequences in plotly express are defined here:\n// https://plotly.com/python/discrete-color/#:~:text=Join%20now.-,Color%20Sequences%20in%20Plotly%20Express,-By%20default%2C%20Plotly\nexport type ColorwayType = 'default' | 'builtin' | 'others' | undefined;\n\nconst DEFAULT_PLOTLY_COLORWAY = [\n  '#636efa', //1\n  '#ef553b', //2\n  '#00cc96', //3\n  '#ab63fa', //4\n  '#ffa15a', //5\n  '#19d3f3', //6\n  '#ff6692', //7\n  '#b6e880', //8\n  '#ff97ff', //9\n  '#fecb52', //10\n];\n\nconst PLOTLY_FLUENTVIZ_COLORWAY_MAPPING = [\n  DataVizPalette.color1, //1\n  DataVizPalette.warning, //2\n  DataVizPalette.color8, //3\n  DataVizPalette.color4, //4\n  DataVizPalette.color7, //5\n  DataVizPalette.color6, //6\n  DataVizPalette.color2, //7\n  DataVizPalette.color5, //8\n  DataVizPalette.color9, //9\n  DataVizPalette.color10, //10\n];\n\nfunction getPlotlyColorway(colorway: string[] | undefined): PlotlyColorway {\n  const isPlotlyColorway =\n    isArrayOrTypedArray(colorway) &&\n    areArraysEqual(\n      colorway?.map(c => c.toLowerCase()),\n      DEFAULT_PLOTLY_COLORWAY,\n    );\n\n  return isPlotlyColorway ? 'plotly' : 'others';\n}\n\nfunction tryMapFluentDataViz(hexColor: string, templateColorway: PlotlyColorway, isDarkTheme?: boolean): string {\n  if (templateColorway !== 'plotly') {\n    return hexColor;\n  }\n  const index = DEFAULT_PLOTLY_COLORWAY.indexOf(hexColor.toLowerCase());\n  if (index !== -1) {\n    return getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[index], isDarkTheme);\n  }\n  return hexColor;\n}\n\nexport const getColor = (\n  legendLabel: string,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string => {\n  if (!colorMap.current.has(legendLabel)) {\n    let nextColor: string;\n    if (colorMap.current.size < PLOTLY_FLUENTVIZ_COLORWAY_MAPPING.length) {\n      // Get first 10 colors from plotly-fluentviz colorway mapping\n      nextColor = getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[colorMap.current.size], isDarkTheme);\n    } else {\n      nextColor = getNextColor(colorMap.current.size, 0, isDarkTheme);\n    }\n    colorMap.current.set(legendLabel, nextColor);\n    return nextColor;\n  }\n\n  return colorMap.current.get(legendLabel) as string;\n};\n\nexport const getSchemaColors = (\n  colorway: string[] | undefined,\n  colors: PieColors | Color | Color[] | string | null | undefined,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string[] | string | undefined => {\n  const hexColors: string[] = [];\n  if (!colors) {\n    return undefined;\n  }\n  const templateColorway = getPlotlyColorway(colorway);\n  if (isArrayOrTypedArray(colors)) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (colors as any[]).forEach((element, index) => {\n      const colorString = element?.toString().trim();\n      const nextFluentColor = getColor(`Label_${index}`, colorMap, isDarkTheme);\n      if (colorString) {\n        const parsedColor = d3Color(colorString);\n        hexColors.push(\n          parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor,\n        );\n      } else {\n        hexColors.push(nextFluentColor);\n      }\n    });\n  } else if (typeof colors === 'string') {\n    const parsedColor = d3Color(colors);\n    return parsedColor\n      ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)\n      : getColor('Label_0', colorMap, isDarkTheme);\n  }\n  return hexColors;\n};\n\nexport const extractColor = (\n  colorway: string[] | undefined,\n  colorwayType: ColorwayType,\n  colors: PieColors | Color | Color[] | string | null | undefined,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string | string[] | undefined => {\n  return colorwayType === 'default' && colors ? getSchemaColors(colorway, colors, colorMap, isDarkTheme) : undefined;\n};\n\nexport const resolveColor = (\n  extractedColors: string[] | string | null | undefined,\n  index: number,\n  legend: string,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string => {\n  let color = '';\n  if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors[index]) {\n    color = extractedColors[index % extractedColors.length];\n  } else if (typeof extractedColors === 'string') {\n    color = extractedColors;\n  } else {\n    color = getColor(legend, colorMap, isDarkTheme);\n  }\n  return color;\n};\n"],"names":["React","color","d3Color","isArrayOrTypedArray","areArraysEqual","DataVizPalette","getColorFromToken","getNextColor","DEFAULT_PLOTLY_COLORWAY","PLOTLY_FLUENTVIZ_COLORWAY_MAPPING","color1","warning","color8","color4","color7","color6","color2","color5","color9","color10","getPlotlyColorway","colorway","isPlotlyColorway","map","c","toLowerCase","tryMapFluentDataViz","hexColor","templateColorway","isDarkTheme","index","indexOf","getColor","legendLabel","colorMap","current","has","nextColor","size","length","set","get","getSchemaColors","colors","hexColors","undefined","forEach","element","colorString","toString","trim","nextFluentColor","parsedColor","push","formatHex","extractColor","colorwayType","resolveColor","extractedColors","legend"],"mappings":"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"}
+{"version":3,"sources":["../src/components/DeclarativeChart/PlotlyColorAdapter.ts"],"sourcesContent":["import * as React from 'react';\nimport { color as d3Color } from 'd3-color';\nimport type { PieColors, Color, PlotData } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray } from '@fluentui/chart-utilities';\nimport { areArraysEqual } from '../../utilities/utilities';\nimport { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';\n\ntype PlotlyColorway = 'plotly' | 'others';\n\n// The color sequences in plotly express are defined here:\n// https://plotly.com/python/discrete-color/#:~:text=Join%20now.-,Color%20Sequences%20in%20Plotly%20Express,-By%20default%2C%20Plotly\nexport type ColorwayType = 'default' | 'builtin' | 'others' | undefined;\n\nconst DEFAULT_PLOTLY_COLORWAY = [\n  '#636efa', //1\n  '#ef553b', //2\n  '#00cc96', //3\n  '#ab63fa', //4\n  '#ffa15a', //5\n  '#19d3f3', //6\n  '#ff6692', //7\n  '#b6e880', //8\n  '#ff97ff', //9\n  '#fecb52', //10\n];\n\nconst PLOTLY_FLUENTVIZ_COLORWAY_MAPPING = [\n  DataVizPalette.color1, //1\n  DataVizPalette.warning, //2\n  DataVizPalette.color8, //3\n  DataVizPalette.color4, //4\n  DataVizPalette.color7, //5\n  DataVizPalette.color6, //6\n  DataVizPalette.color2, //7\n  DataVizPalette.color5, //8\n  DataVizPalette.color9, //9\n  DataVizPalette.color10, //10\n];\n\nfunction getPlotlyColorway(colorway: string[] | undefined): PlotlyColorway {\n  const isPlotlyColorway =\n    isArrayOrTypedArray(colorway) &&\n    areArraysEqual(\n      colorway?.map(c => c.toLowerCase()),\n      DEFAULT_PLOTLY_COLORWAY,\n    );\n\n  return isPlotlyColorway ? 'plotly' : 'others';\n}\n\nfunction tryMapFluentDataViz(hexColor: string, templateColorway: PlotlyColorway, isDarkTheme?: boolean): string {\n  if (templateColorway !== 'plotly') {\n    return hexColor;\n  }\n  const index = DEFAULT_PLOTLY_COLORWAY.indexOf(hexColor.toLowerCase());\n  if (index !== -1) {\n    return getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[index], isDarkTheme);\n  }\n  return hexColor;\n}\n\nexport const getColor = (\n  legendLabel: string,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string => {\n  if (!colorMap.current.has(legendLabel)) {\n    let nextColor: string;\n    if (colorMap.current.size < PLOTLY_FLUENTVIZ_COLORWAY_MAPPING.length) {\n      // Get first 10 colors from plotly-fluentviz colorway mapping\n      nextColor = getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[colorMap.current.size], isDarkTheme);\n    } else {\n      nextColor = getNextColor(colorMap.current.size, 0, isDarkTheme);\n    }\n    colorMap.current.set(legendLabel, nextColor);\n    return nextColor;\n  }\n\n  return colorMap.current.get(legendLabel) as string;\n};\n\nexport const getSchemaColors = (\n  colorway: string[] | undefined,\n  colors: PieColors | Color | Color[] | string | null | undefined,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string[] | string | undefined => {\n  const hexColors: string[] = [];\n  if (!colors) {\n    return undefined;\n  }\n  const templateColorway = getPlotlyColorway(colorway);\n  if (isArrayOrTypedArray(colors)) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (colors as any[]).forEach((element, index) => {\n      const colorString = element?.toString().trim();\n      const nextFluentColor = getColor(`Label_${index}`, colorMap, isDarkTheme);\n      if (colorString) {\n        const parsedColor = d3Color(colorString);\n        hexColors.push(\n          parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor,\n        );\n      } else {\n        hexColors.push(nextFluentColor);\n      }\n    });\n  } else if (typeof colors === 'string') {\n    const parsedColor = d3Color(colors);\n    return parsedColor\n      ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)\n      : getColor('Label_0', colorMap, isDarkTheme);\n  }\n  return hexColors;\n};\n\nexport const extractColor = (\n  colorway: string[] | undefined,\n  colorwayType: ColorwayType,\n  colors: PieColors | Color | Color[] | string | null | undefined,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string | string[] | undefined => {\n  return colorwayType === 'default' && colors ? getSchemaColors(colorway, colors, colorMap, isDarkTheme) : undefined;\n};\n\nexport const resolveColor = (\n  extractedColors: string[] | string | null | undefined,\n  index: number,\n  legend: string,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string => {\n  let color = '';\n  if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors.length > 0) {\n    color = extractedColors[index % extractedColors.length];\n  } else if (typeof extractedColors === 'string') {\n    color = extractedColors;\n  } else {\n    color = getColor(legend, colorMap, isDarkTheme);\n  }\n  return color;\n};\n\nexport const getOpacity = (series: Partial<PlotData>, index: number): number => {\n  return series.marker?.opacity\n    ? isArrayOrTypedArray(series.marker?.opacity)\n      ? (series.marker?.opacity as number[])[index % (series.marker?.opacity as number[]).length]\n      : (series.marker?.opacity as number)\n    : series.opacity ?? 1;\n};\n"],"names":["React","color","d3Color","isArrayOrTypedArray","areArraysEqual","DataVizPalette","getColorFromToken","getNextColor","DEFAULT_PLOTLY_COLORWAY","PLOTLY_FLUENTVIZ_COLORWAY_MAPPING","color1","warning","color8","color4","color7","color6","color2","color5","color9","color10","getPlotlyColorway","colorway","isPlotlyColorway","map","c","toLowerCase","tryMapFluentDataViz","hexColor","templateColorway","isDarkTheme","index","indexOf","getColor","legendLabel","colorMap","current","has","nextColor","size","length","set","get","getSchemaColors","colors","hexColors","undefined","forEach","element","colorString","toString","trim","nextFluentColor","parsedColor","push","formatHex","extractColor","colorwayType","resolveColor","extractedColors","legend","getOpacity","series","marker","opacity"],"mappings":"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"}