@fluentui/react-charts 0.0.0-nightly-20250822-0407.1 → 0.0.0-nightly-20250826-0412.1

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -8,6 +8,8 @@ import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray,
 import { curveCardinal as d3CurveCardinal } from 'd3-shape';
 import { getOpacity, extractColor, resolveColor } from './PlotlyColorAdapter';
 import { rgb } from 'd3-color';
+export const NON_PLOT_KEY_PREFIX = 'nonplot_';
+export const SINGLE_REPEAT = 'repeat(1, 1fr)';
 const dashOptions = {
     dot: {
         strokeDasharray: '1, 5',
@@ -241,7 +243,7 @@ export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, co
             chartTitle,
             chartData: Object.values(mapLegendToDataPoint)
         },
-        hideLegend: ((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : _input_layout5.showlegend) === false ? true : false,
+        hideLegend: isMultiPlot || ((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : _input_layout5.showlegend) === false,
         width: (_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : _input_layout6.width,
         height,
         innerRadius,
@@ -562,6 +564,7 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
         const seriesColor = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
         const seriesOpacity = getOpacity(series, index);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
+        // if mode contains 'text', we prioritize showing the text over curving the line
         const lineOptions = !((_series_mode1 = series.mode) === null || _series_mode1 === void 0 ? void 0 : _series_mode1.includes('text')) ? getLineOptions(series.line) : undefined;
         const legendShape = getLegendShape(series);
         const validXYRanges = getValidXYRanges(series);
@@ -1305,25 +1308,44 @@ const getLegendShape = (series)=>{
     }
     return 'default';
 };
-export const getAllupLegendsProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+export const getAllupLegendsProps = (input, colorMap, colorwayType, traceInfo, isDarkTheme)=>{
     const allupLegends = [];
     // reduce on showlegend boolean propperty. reduce should return true if at least one series has showlegend true
     const toShowLegend = input.data.reduce((acc, series)=>{
-        return acc || series.showlegend === true;
+        return acc || series.showlegend === true || series.showlegend === undefined;
     }, false);
     if (toShowLegend) {
         input.data.forEach((series, index)=>{
-            var _series_line, _series_marker, _input_layout_template_layout, _input_layout_template, _input_layout;
-            const name = series.legendgroup;
-            const color = ((_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color) || ((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color);
-            const legendShape = getLegendShape(series);
-            const resolvedColor = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, color, colorMap, isDarkTheme);
-            if (name !== undefined && allupLegends.some((group)=>group.title === name) === false) {
-                allupLegends.push({
-                    title: name,
-                    color: resolvedColor,
-                    shape: legendShape
+            if (traceInfo[index].type === 'donut') {
+                var _input_layout, _input_layout_template_layout, _input_layout_template, _input_layout1, _input_layout2, _pieSeries_marker, _pieSeries_labels;
+                const pieSeries = series;
+                var _input_layout_piecolorway, _input_layout_piecolorway1;
+                const colors = extractColor((_input_layout_piecolorway = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.piecolorway) !== null && _input_layout_piecolorway !== void 0 ? _input_layout_piecolorway : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_input_layout_piecolorway1 = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.piecolorway) !== null && _input_layout_piecolorway1 !== void 0 ? _input_layout_piecolorway1 : pieSeries === null || pieSeries === void 0 ? void 0 : (_pieSeries_marker = pieSeries.marker) === null || _pieSeries_marker === void 0 ? void 0 : _pieSeries_marker.colors, colorMap, isDarkTheme);
+                (_pieSeries_labels = pieSeries.labels) === null || _pieSeries_labels === void 0 ? void 0 : _pieSeries_labels.forEach((label, labelIndex)=>{
+                    const legend = `${label}`;
+                    // resolve color for each legend from the extracted colors
+                    const color = resolveColor(colors, labelIndex, legend, colorMap, isDarkTheme);
+                    if (legend !== '' && allupLegends.some((group)=>group.title === legend) === false) {
+                        allupLegends.push({
+                            title: legend,
+                            color
+                        });
+                    }
                 });
+            } else if (isNonPlotType(traceInfo[index].type) === false) {
+                var _plotSeries_line, _plotSeries_marker, _input_layout_template_layout1, _input_layout_template1, _input_layout3;
+                const plotSeries = series;
+                const name = plotSeries.legendgroup;
+                const color = ((_plotSeries_line = plotSeries.line) === null || _plotSeries_line === void 0 ? void 0 : _plotSeries_line.color) || ((_plotSeries_marker = plotSeries.marker) === null || _plotSeries_marker === void 0 ? void 0 : _plotSeries_marker.color);
+                const legendShape = getLegendShape(plotSeries);
+                const resolvedColor = extractColor((_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : (_input_layout_template1 = _input_layout3.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, colorwayType, color, colorMap, isDarkTheme);
+                if (name !== undefined && name !== '' && allupLegends.some((group)=>group.title === name) === false) {
+                    allupLegends.push({
+                        title: name,
+                        color: resolvedColor,
+                        shape: legendShape
+                    });
+                }
             }
         });
     }
@@ -1389,28 +1411,21 @@ const getIndexFromKey = (key, pattern)=>{
     const normalizedKey = key.replace(pattern, '') === '' ? '1' : key.replace(pattern, '');
     return parseInt(normalizedKey, 10) - 1;
 };
-export const getGridProperties = (layout, isMultiPlot)=>{
-    var _layout_annotations;
-    const gridX = [];
-    const gridY = [];
+export const isNonPlotType = (chartType)=>{
+    return [
+        'donut',
+        'sankey',
+        'pie'
+    ].includes(chartType);
+};
+export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
+    const domainX = [];
+    const domainY = [];
+    let cartesianDomains = 0;
     const annotations = {};
     let templateRows = '1fr';
     let templateColumns = '1fr';
     const gridLayout = {};
-    if (layout === undefined || layout === null || Object.keys(layout).length === 0) {
-        return {
-            templateRows,
-            templateColumns,
-            layout: gridLayout
-        };
-    }
-    if (!layout.xaxis || !layout.yaxis) {
-        return {
-            templateRows,
-            templateColumns,
-            layout: gridLayout
-        };
-    }
     if (!isMultiPlot) {
         return {
             templateRows,
@@ -1418,144 +1433,144 @@ export const getGridProperties = (layout, isMultiPlot)=>{
             layout: gridLayout
         };
     }
-    Object.keys(layout).forEach((key)=>{
-        if (key.startsWith('xaxis')) {
-            var _layout_key, _layout_key1;
-            const index = getIndexFromKey(key, 'xaxis');
-            var _layout_key_anchor;
-            const anchor = (_layout_key_anchor = (_layout_key = layout[key]) === null || _layout_key === void 0 ? void 0 : _layout_key.anchor) !== null && _layout_key_anchor !== void 0 ? _layout_key_anchor : 'y';
-            const anchorIndex = getIndexFromKey(anchor, 'y');
-            if (index !== anchorIndex) {
-                throw new Error(`Invalid layout: xaxis ${index + 1} anchor should be y${anchorIndex + 1}`);
-            }
-            var _layout_key_domain;
-            gridX[index] = (_layout_key_domain = (_layout_key1 = layout[key]) === null || _layout_key1 === void 0 ? void 0 : _layout_key1.domain) !== null && _layout_key_domain !== void 0 ? _layout_key_domain : [];
-        } else if (key.startsWith('yaxis')) {
-            var _layout_key2, _layout_key3;
-            const index = getIndexFromKey(key, 'yaxis');
-            var _layout_key_anchor1;
-            const anchor = (_layout_key_anchor1 = (_layout_key2 = layout[key]) === null || _layout_key2 === void 0 ? void 0 : _layout_key2.anchor) !== null && _layout_key_anchor1 !== void 0 ? _layout_key_anchor1 : 'x';
-            const anchorIndex = getIndexFromKey(anchor, 'x');
-            if (index !== anchorIndex) {
-                var _layout_yaxis2;
-                if (index === 1 && anchorIndex === 0 || ((_layout_yaxis2 = layout.yaxis2) === null || _layout_yaxis2 === void 0 ? void 0 : _layout_yaxis2.side) === 'right') {
-                    // Special case for secondary y axis where yaxis2 can anchor to x1
-                    return {
-                        templateRows,
-                        templateColumns
-                    };
+    const layout = schema === null || schema === void 0 ? void 0 : schema.layout;
+    if (layout !== undefined && layout !== null && Object.keys(layout).length > 0) {
+        Object.keys(layout !== null && layout !== void 0 ? layout : {}).forEach((key)=>{
+            if (key.startsWith('xaxis')) {
+                var _layout_key;
+                const index = getIndexFromKey(key, 'xaxis');
+                var _layout_key_anchor;
+                const anchor = (_layout_key_anchor = (_layout_key = layout[key]) === null || _layout_key === void 0 ? void 0 : _layout_key.anchor) !== null && _layout_key_anchor !== void 0 ? _layout_key_anchor : 'y';
+                const anchorIndex = getIndexFromKey(anchor, 'y');
+                if (index !== anchorIndex) {
+                    throw new Error(`Invalid layout: xaxis ${index + 1} anchor should be y${anchorIndex + 1}`);
+                }
+                const xAxisLayout = layout[key];
+                const domainXInfo = {
+                    start: (xAxisLayout === null || xAxisLayout === void 0 ? void 0 : xAxisLayout.domain) ? xAxisLayout.domain[0] : 0,
+                    end: (xAxisLayout === null || xAxisLayout === void 0 ? void 0 : xAxisLayout.domain) ? xAxisLayout.domain[1] : 1
+                };
+                domainX.push(domainXInfo);
+            } else if (key.startsWith('yaxis')) {
+                var _layout_key1;
+                const index = getIndexFromKey(key, 'yaxis');
+                var _layout_key_anchor1;
+                const anchor = (_layout_key_anchor1 = (_layout_key1 = layout[key]) === null || _layout_key1 === void 0 ? void 0 : _layout_key1.anchor) !== null && _layout_key_anchor1 !== void 0 ? _layout_key_anchor1 : 'x';
+                const anchorIndex = getIndexFromKey(anchor, 'x');
+                if (index !== anchorIndex) {
+                    var _layout_yaxis2;
+                    if (index === 1 && anchorIndex === 0 || ((_layout_yaxis2 = layout.yaxis2) === null || _layout_yaxis2 === void 0 ? void 0 : _layout_yaxis2.side) === 'right') {
+                        // Special case for secondary y axis where yaxis2 can anchor to x1
+                        return {
+                            templateRows,
+                            templateColumns
+                        };
+                    }
+                    throw new Error(`Invalid layout: yaxis ${index + 1} anchor should be x${anchorIndex + 1}`);
                 }
-                throw new Error(`Invalid layout: yaxis ${index + 1} anchor should be x${anchorIndex + 1}`);
+                const yAxisLayout = layout[key];
+                const domainYInfo = {
+                    start: (yAxisLayout === null || yAxisLayout === void 0 ? void 0 : yAxisLayout.domain) ? yAxisLayout.domain[0] : 0,
+                    end: (yAxisLayout === null || yAxisLayout === void 0 ? void 0 : yAxisLayout.domain) ? yAxisLayout.domain[1] : 1
+                };
+                domainY.push(domainYInfo);
             }
-            var _layout_key_domain1;
-            gridY[index] = (_layout_key_domain1 = (_layout_key3 = layout[key]) === null || _layout_key3 === void 0 ? void 0 : _layout_key3.domain) !== null && _layout_key_domain1 !== void 0 ? _layout_key_domain1 : [];
+        });
+    }
+    cartesianDomains = domainX.length; // Assuming that the number of x and y axes is the same
+    validTracesInfo.forEach((trace, index)=>{
+        if (isNonPlotType(trace.type)) {
+            var _schema_data, _series_domain, _series_domain1, _series_domain2, _series_domain3;
+            const series = schema === null || schema === void 0 ? void 0 : (_schema_data = schema.data) === null || _schema_data === void 0 ? void 0 : _schema_data[index];
+            const domainXInfo = {
+                start: ((_series_domain = series.domain) === null || _series_domain === void 0 ? void 0 : _series_domain.x) ? series.domain.x[0] : 0,
+                end: ((_series_domain1 = series.domain) === null || _series_domain1 === void 0 ? void 0 : _series_domain1.x) ? series.domain.x[1] : 1
+            };
+            const domainYInfo = {
+                start: ((_series_domain2 = series.domain) === null || _series_domain2 === void 0 ? void 0 : _series_domain2.y) ? series.domain.y[0] : 0,
+                end: ((_series_domain3 = series.domain) === null || _series_domain3 === void 0 ? void 0 : _series_domain3.y) ? series.domain.y[1] : 1
+            };
+            domainX.push(domainXInfo);
+            domainY.push(domainYInfo);
         }
     });
-    (_layout_annotations = layout.annotations) === null || _layout_annotations === void 0 ? void 0 : _layout_annotations.forEach((annotation)=>{
-        const xMatches = gridX.flatMap((interval, idx)=>(annotation === null || annotation === void 0 ? void 0 : annotation.x) >= interval[0] && (annotation === null || annotation === void 0 ? void 0 : annotation.x) <= interval[1] ? [
-                idx
-            ] : []);
-        const yMatch = gridY.findIndex((interval, yIndex)=>xMatches.includes(yIndex) && (annotation === null || annotation === void 0 ? void 0 : annotation.y) >= interval[0] && (annotation === null || annotation === void 0 ? void 0 : annotation.y) <= interval[1]);
-        if (yMatch !== -1) {
-            if (annotations[yMatch] === undefined) {
-                annotations[yMatch] = {};
-            }
-            if ((annotation === null || annotation === void 0 ? void 0 : annotation.textangle) === 90) {
-                annotations[yMatch].yAnnotation = annotation.text;
-            } else {
-                annotations[yMatch].xAnnotation = annotation.text;
+    if (layout !== undefined && layout !== null && Object.keys(layout).length > 0) {
+        var _layout_annotations;
+        (_layout_annotations = layout.annotations) === null || _layout_annotations === void 0 ? void 0 : _layout_annotations.forEach((annotation)=>{
+            const xMatches = domainX.flatMap((interval, idx)=>(annotation === null || annotation === void 0 ? void 0 : annotation.x) >= interval.start && (annotation === null || annotation === void 0 ? void 0 : annotation.x) <= interval.end ? [
+                    idx
+                ] : []);
+            const yMatch = domainY.findIndex((interval, yIndex)=>xMatches.includes(yIndex) && (annotation === null || annotation === void 0 ? void 0 : annotation.y) >= interval.start && (annotation === null || annotation === void 0 ? void 0 : annotation.y) <= interval.end);
+            if (yMatch !== -1) {
+                if (annotations[yMatch] === undefined) {
+                    annotations[yMatch] = {};
+                }
+                if ((annotation === null || annotation === void 0 ? void 0 : annotation.textangle) === 90) {
+                    annotations[yMatch].yAnnotation = annotation.text;
+                } else {
+                    annotations[yMatch].xAnnotation = annotation.text;
+                }
             }
-        }
-    });
-    if (gridX.length > 0) {
+        });
+    }
+    if (domainX.length > 0) {
         const uniqueXIntervals = new Map();
-        gridX.forEach((interval)=>{
-            const key = `${interval[0]}-${interval[1]}`;
+        domainX.forEach((interval)=>{
+            const key = `${interval.start}-${interval.end}`;
             if (!uniqueXIntervals.has(key)) {
                 uniqueXIntervals.set(key, interval);
             }
         });
-        const minXInterval = Math.min(...Array.from(uniqueXIntervals.values()).map((interval)=>interval[1] - interval[0]));
-        templateColumns = Array.from(uniqueXIntervals.values()).map((interval)=>`${(interval[1] - interval[0]) / minXInterval}fr`).join(' ');
-        let columnNumber = 1;
-        let lastIntervalEnd = 0;
-        gridX.forEach((interval, index)=>{
-            if (interval.length === 0) {
-                return;
-            }
-            const cellName = `x${index === 0 ? '' : index + 1}`;
+        const sortedXStart = Array.from(uniqueXIntervals.values()).map((interval)=>interval.start).sort();
+        templateColumns = `repeat(${sortedXStart.length}, 1fr)`;
+        domainX.forEach((interval, index)=>{
+            const cellName = index >= cartesianDomains ? `${NON_PLOT_KEY_PREFIX}${index - cartesianDomains + 1}` : `x${index === 0 ? '' : index + 1}`;
+            const columnIndex = sortedXStart.findIndex((start)=>start === interval.start);
+            const columnNumber = columnIndex + 1; // Column numbers are 1-based
             const annotationProps = annotations[index];
             const xAnnotation = annotationProps === null || annotationProps === void 0 ? void 0 : annotationProps.xAnnotation;
-            if (interval[0] < lastIntervalEnd) {
-                columnNumber = 1;
-            }
-            lastIntervalEnd = interval[1];
             const row = {
                 row: -1,
                 column: columnNumber,
-                xAnnotation
+                xAnnotation,
+                xDomain: interval,
+                yDomain: {
+                    start: 0,
+                    end: 1
+                }
             };
             gridLayout[cellName] = row;
-            columnNumber += 1;
         });
     }
-    const numColumns = Math.max(...Object.values(gridLayout).map((cell)=>{
-        var _cell_column;
-        return (_cell_column = cell.column) !== null && _cell_column !== void 0 ? _cell_column : 0;
-    }));
-    const columnFill = {};
-    for(let i = 1; i <= numColumns; i++){
-        columnFill[i] = {
-            row: 1,
-            fillDomain: 0
-        };
-    }
-    if (gridY.length > 0) {
+    if (domainY.length > 0) {
         const uniqueYIntervals = new Map();
-        gridY.forEach((interval)=>{
-            const key = `${interval[0]}-${interval[1]}`;
+        domainY.forEach((interval)=>{
+            const key = `${interval.start}-${interval.end}`;
             if (!uniqueYIntervals.has(key)) {
                 uniqueYIntervals.set(key, interval);
             }
         });
-        const minYInterval = Math.min(...Array.from(uniqueYIntervals.values()).map((interval)=>interval[1] - interval[0]));
-        templateRows = Array.from(uniqueYIntervals.values()).map((interval)=>`${(interval[1] - interval[0]) / minYInterval}fr`).join(' ');
-        gridY.forEach((interval, index)=>{
-            if (interval.length === 0) {
-                return;
-            }
-            const cellName = `x${index === 0 ? '' : index + 1}`;
+        const sortedYStart = Array.from(uniqueYIntervals.values()).map((interval)=>interval.start).sort();
+        const numberOfRows = sortedYStart.length;
+        templateRows = `repeat(${numberOfRows}, 1fr)`;
+        domainY.forEach((interval, index)=>{
+            const cellName = index >= cartesianDomains ? `${NON_PLOT_KEY_PREFIX}${index - cartesianDomains + 1}` : `x${index === 0 ? '' : index + 1}`;
+            const rowIndex = sortedYStart.findIndex((start)=>start === interval.start);
+            const rowNumber = numberOfRows - rowIndex; // Rows are 1-based and we need to reverse the order for CSS grid
             const annotationProps = annotations[index];
             const yAnnotation = annotationProps === null || annotationProps === void 0 ? void 0 : annotationProps.yAnnotation;
             const cell = gridLayout[cellName];
             if (cell !== undefined) {
-                cell.row = columnFill[cell.column].row;
+                cell.row = rowNumber;
                 cell.yAnnotation = yAnnotation;
+                cell.yDomain = interval;
             }
-            columnFill[cell.column].fillDomain = interval[1];
-            columnFill[cell.column].row += 1;
         });
     }
-    // reverse the order of rows in grid layout from bottom-top to top-bottom as required by CSS grid
-    const reversedGridLayout = {};
-    // find the maximum row number
-    const maxRowNumber = Math.max(...Object.values(gridLayout).map((cell)=>{
-        var _cell_row;
-        return (_cell_row = cell.row) !== null && _cell_row !== void 0 ? _cell_row : 0;
-    }));
-    // iterate over the gridLayout and reverse the row numbers
-    Object.keys(gridLayout).forEach((key)=>{
-        const cell = gridLayout[key];
-        if (cell.row !== undefined) {
-            // reverse the row number
-            cell.row = maxRowNumber - cell.row + 1;
-        }
-        reversedGridLayout[key] = cell;
-    });
     return {
         templateRows,
         templateColumns,
-        layout: reversedGridLayout
+        layout: gridLayout
     };
 };
 /**