@fluentui/react-charts 9.1.10 → 9.2.1

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

@@ -18,6 +18,9 @@ _export(exports, {
     getColor: function() {
         return getColor;
     },
+    projectPolarToCartesian: function() {
+        return projectPolarToCartesian;
+    },
     transformPlotlyJsonToDonutProps: function() {
         return transformPlotlyJsonToDonutProps;
     },
@@ -92,9 +95,6 @@ const dashOptions = {
         lineBorderWidth: '4'
     }
 };
-const getLegend = (series, index)=>{
-    return series.name || `Series ${index + 1}`;
-};
 function getTitles(layout) {
     var _layout_title, _layout_xaxis, _layout_xaxis1, _layout_xaxis_title, _layout_xaxis2, _layout_yaxis, _layout_yaxis1, _layout_yaxis_title, _layout_yaxis2;
     var _layout_title_text, _layout_xaxis_title_text, _layout_yaxis_title_text;
@@ -230,6 +230,7 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fallbackVS
     const mapXToDataPoints = {};
     let yMaxValue = 0;
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
+    const { legends, hideLegend } = getLegendProps(input.data, input.layout);
     let yMinValue = 0;
     input.data.forEach((series, index1)=>{
         var _series_x;
@@ -243,7 +244,7 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fallbackVS
                     lineData: []
                 };
             }
-            const legend = getLegend(series, index1);
+            const legend = legends[index1];
             var _series_y_index2;
             const yVal = (_series_y_index2 = (_series_y = series.y) === null || _series_y === void 0 ? void 0 : _series_y[index2]) !== null && _series_y_index2 !== void 0 ? _series_y_index2 : 0;
             if (series.type === 'bar') {
@@ -255,10 +256,14 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fallbackVS
                 });
                 yMaxValue = Math.max(yMaxValue, yVal);
             } else if (series.type === 'scatter' || !!fallbackVSBC) {
+                var _series_line;
                 const color = getColor(legend, colorMap, isDarkTheme);
                 const lineOptions = getLineOptions(series.line);
+                const dashType = ((_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.dash) || 'solid';
+                const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
                 mapXToDataPoints[x].lineData.push({
                     legend,
+                    legendShape,
                     y: yVal,
                     color,
                     ...lineOptions ? {
@@ -289,13 +294,15 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fallbackVS
         mode: 'plotly',
         ...secondaryYAxisValues,
         hideTickOverlap: true,
-        barGapMax: 2
+        barGapMax: 2,
+        hideLegend
     };
 };
 const transformPlotlyJsonToGVBCProps = (input, colorMap, isDarkTheme)=>{
     var _input_layout, _input_layout1;
     const mapXToDataPoints = {};
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
+    const { legends, hideLegend } = getLegendProps(input.data, input.layout);
     input.data.forEach((series, index1)=>{
         var _series_x;
         (_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x.forEach((x, index2)=>{
@@ -307,7 +314,7 @@ const transformPlotlyJsonToGVBCProps = (input, colorMap, isDarkTheme)=>{
             }
             if (series.type === 'bar') {
                 var _series_y;
-                const legend = getLegend(series, index1);
+                const legend = legends[index1];
                 const color = getColor(legend, colorMap, isDarkTheme);
                 var _series_y_index2;
                 mapXToDataPoints[x].series.push({
@@ -333,18 +340,22 @@ const transformPlotlyJsonToGVBCProps = (input, colorMap, isDarkTheme)=>{
         yAxisTitle,
         mode: 'plotly',
         ...secondaryYAxisValues,
-        hideTickOverlap: true
+        hideTickOverlap: true,
+        hideLegend
     };
 };
 const transformPlotlyJsonToVBCProps = (input, colorMap, isDarkTheme)=>{
     var _input_layout, _input_layout1;
     const vbcData = [];
+    const { legends, hideLegend } = getLegendProps(input.data, input.layout);
     input.data.forEach((series, seriesIdx)=>{
         var _series_xbins, _series_xbins1, _series_xbins2;
         if (!series.x) {
             return;
         }
         const isXString = isStringArray(series.x);
+        // TODO: In case of a single bin, add an empty bin of the same size to prevent the
+        // default bar width from being used and ensure the bar spans the full intended range.
         const xBins = createBins(series.x, (_series_xbins = series.xbins) === null || _series_xbins === void 0 ? void 0 : _series_xbins.start, (_series_xbins1 = series.xbins) === null || _series_xbins1 === void 0 ? void 0 : _series_xbins1.end, (_series_xbins2 = series.xbins) === null || _series_xbins2 === void 0 ? void 0 : _series_xbins2.size);
         const yBins = xBins.map(()=>[]);
         let total = 0;
@@ -362,7 +373,7 @@ const transformPlotlyJsonToVBCProps = (input, colorMap, isDarkTheme)=>{
             return yVal;
         });
         xBins.forEach((bin, index)=>{
-            const legend = getLegend(series, seriesIdx);
+            const legend = legends[seriesIdx];
             const color = getColor(legend, colorMap, isDarkTheme);
             const yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
             vbcData.push({
@@ -385,24 +396,31 @@ const transformPlotlyJsonToVBCProps = (input, colorMap, isDarkTheme)=>{
         chartTitle,
         xAxisTitle,
         yAxisTitle,
-        mode: 'plotly',
-        hideTickOverlap: true
+        mode: 'histogram',
+        hideTickOverlap: true,
+        maxBarWidth: 50,
+        hideLegend
     };
 };
 const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, colorMap, isDarkTheme)=>{
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, isAreaChart ? 0 : undefined, isAreaChart ? 0 : undefined);
     let mode = 'tonexty';
+    const { legends, hideLegend } = getLegendProps(input.data, input.layout);
     const chartData = input.data.map((series, index)=>{
+        var _series_line;
         const xValues = series.x;
         const isString = typeof xValues[0] === 'string';
         const isXDate = (0, _chartutilities.isDateArray)(xValues);
         const isXNumber = (0, _chartutilities.isNumberArray)(xValues);
-        const legend = getLegend(series, index);
+        const legend = legends[index];
         const lineColor = getColor(legend, colorMap, isDarkTheme);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
         const lineOptions = getLineOptions(series.line);
+        const dashType = ((_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.dash) || 'solid';
+        const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
         return {
             legend,
+            legendShape,
             data: xValues.map((x, i)=>{
                 var _series_marker, _series_marker1;
                 return {
@@ -441,7 +459,8 @@ const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, colorMap, is
             width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
             height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
             hideTickOverlap: true,
-            useUTC: false
+            useUTC: false,
+            hideLegend
         };
     } else {
         var _input_layout2, _input_layout3;
@@ -458,25 +477,26 @@ const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, colorMap, is
             width: (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.width,
             height: (_input_layout_height1 = (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.height) !== null && _input_layout_height1 !== void 0 ? _input_layout_height1 : 350,
             hideTickOverlap: true,
-            useUTC: false
+            useUTC: false,
+            hideLegend
         };
     }
 };
 const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, isDarkTheme)=>{
     var _input_layout, _input_layout_margin, _input_layout1, _input_layout_margin1, _input_layout2, _input_layout_yaxis2, _input_layout3, _input_layout_yaxis21, _input_layout4, _input_layout_yaxis2_title, _input_layout_yaxis22, _input_layout5, _input_layout6;
+    const { legends, hideLegend } = getLegendProps(input.data, input.layout);
     const chartData = input.data.map((series, index)=>{
+        const legend = legends[index];
+        const color = getColor(legend, colorMap, isDarkTheme);
         return series.y.map((yValue, i)=>{
-            var _series_name;
-            const legendName = (_series_name = series.name) !== null && _series_name !== void 0 ? _series_name : yValue;
-            const color = getColor(legendName, colorMap, isDarkTheme);
             return {
                 x: series.x[i],
                 y: yValue,
-                legend: legendName,
+                legend,
                 color
             };
         });
-    }).flat() //reversing the order to invert the Y bars order as required by plotly.
+    }).reverse().flat() //reversing the order to invert the Y bars order as required by plotly.
     .reverse();
     var _input_layout_height;
     const chartHeight = (_input_layout_height = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 450;
@@ -502,7 +522,8 @@ const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, isDark
         width: (_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : _input_layout6.width,
         hideTickOverlap: true,
         noOfCharsToTruncate: 20,
-        showYAxisLablesTooltip: true
+        showYAxisLablesTooltip: true,
+        hideLegend
     };
 };
 const transformPlotlyJsonToHeatmapProps = (input)=>{
@@ -719,6 +740,24 @@ const transformPlotlyJsonToGaugeProps = (input, colorMap, isDarkTheme)=>{
         variant: ((_firstData_gauge7 = firstData.gauge) === null || _firstData_gauge7 === void 0 ? void 0 : (_firstData_gauge_steps1 = _firstData_gauge7.steps) === null || _firstData_gauge_steps1 === void 0 ? void 0 : _firstData_gauge_steps1.length) ? 'multiple-segments' : 'single-segment'
     };
 };
+const projectPolarToCartesian = (input)=>{
+    const projection = {
+        ...input
+    };
+    for(let sindex = 0; sindex < input.data.length; sindex++){
+        const series = input.data[sindex];
+        series.x = [];
+        series.y = [];
+        for(let ptindex = 0; ptindex < series.r.length; ptindex++){
+            const thetaRad = series.theta[ptindex] * Math.PI / 180;
+            const radius = series.r[ptindex];
+            series.x[ptindex] = radius * Math.cos(thetaRad);
+            series.y[ptindex] = radius * Math.sin(thetaRad);
+        }
+        projection.data[sindex] = series;
+    }
+    return projection;
+};
 function isPlainObject(obj) {
     return Object.prototype.toString.call(obj) === '[object Object]' && Object.getPrototypeOf(obj).hasOwnProperty('hasOwnProperty');
 }
@@ -789,7 +828,7 @@ const findBinIndex = (bins, value, isString)=>{
     if (typeof value === 'undefined' || value === null) {
         return -1;
     }
-    return isString ? bins.findIndex((bin)=>bin.includes(value)) : bins.findIndex((bin)=>value >= bin.x0 && value < bin.x1);
+    return isString ? bins.findIndex((bin)=>bin.includes(value)) : bins.findIndex((bin, index)=>value >= bin.x0 && (index === bins.length - 1 ? value <= bin.x1 : value < bin.x1));
 };
 const getBinSize = (bin)=>{
     return bin.x1 - bin.x0;
@@ -817,15 +856,13 @@ const createBins = (data, binStart, binEnd, binSize)=>{
         minVal,
         maxVal
     ]);
-    if (typeof binSize === 'number') {
-        var _binSize_toString_split_;
+    if (typeof binSize === 'number' && binSize > 0) {
         const thresholds = [];
-        let th = minVal;
-        var _binSize_toString_split__length;
-        const tolerance = 1 / Math.pow(10, (_binSize_toString_split__length = (_binSize_toString_split_ = binSize.toString().split('.')[1]) === null || _binSize_toString_split_ === void 0 ? void 0 : _binSize_toString_split_.length) !== null && _binSize_toString_split__length !== void 0 ? _binSize_toString_split__length : 0);
-        while(maxVal + binSize - th > tolerance){
+        const precision = Math.max(getPrecision(minVal), getPrecision(binSize));
+        let th = precisionRound(minVal, precision);
+        while(th < precisionRound(maxVal + binSize, precision)){
             thresholds.push(th);
-            th += binSize;
+            th = precisionRound(th + binSize, precision);
         }
         minVal = thresholds[0];
         maxVal = thresholds[thresholds.length - 1];
@@ -833,9 +870,12 @@ const createBins = (data, binStart, binEnd, binSize)=>{
             minVal,
             maxVal
         ]).thresholds(thresholds);
+        // When the domain ends at the last threshold (maxVal), d3Bin creates an extra final bin where
+        // both x0 and x1 are equal to maxVal and inclusive. The previous bin also has x1 equal to maxVal,
+        // but it is exclusive. To maintain consistent bin widths, remove the final bin,
+        // making the previous bin the last one, with both x0 and x1 inclusive.
+        return binGenerator(data).slice(0, -1);
     }
-    // NOTE: The last bin generated by d3Bin often has identical x0 and x1 values (both inclusive) and
-    // can be ignored if the highest value is already included in the previous bin.
     return binGenerator(data);
 };
 const calculateHistFunc = (histfunc, bin)=>{
@@ -868,3 +908,27 @@ const calculateHistNorm = (histnorm, value, total, dx, dy = 1)=>{
             return value;
     }
 };
+const getPrecision = (value)=>{
+    var _value_toString_split_;
+    var _value_toString_split__length;
+    return (_value_toString_split__length = (_value_toString_split_ = value.toString().split('.')[1]) === null || _value_toString_split_ === void 0 ? void 0 : _value_toString_split_.length) !== null && _value_toString_split__length !== void 0 ? _value_toString_split__length : 0;
+};
+const precisionRound = (value, precision)=>{
+    const factor = Math.pow(10, precision);
+    return Math.round(value * factor) / factor;
+};
+const getLegendProps = (data, layout)=>{
+    const legends = [];
+    if (data.length === 1) {
+        legends.push(data[0].name || '');
+    } else {
+        data.forEach((series, index)=>{
+            legends.push(series.name || `Series ${index + 1}`);
+        });
+    }
+    const hideLegends = data.every((series)=>series.showlegend === false);
+    return {
+        legends,
+        hideLegend: (layout === null || layout === void 0 ? void 0 : layout.showlegend) === false ? true : hideLegends
+    };
+};