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

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

@@ -132,6 +132,47 @@ function getTitles(layout) {
     };
     return titles;
 }
+const getXAxisTickFormat = (series, layout)=>{
+    const xAxis = getXAxisProperties(series, layout);
+    if (xAxis === null || xAxis === void 0 ? void 0 : xAxis.tickformat) {
+        return {
+            tickFormat: xAxis === null || xAxis === void 0 ? void 0 : xAxis.tickformat
+        };
+    }
+    return {};
+};
+const getYAxisTickFormat = (series, layout)=>{
+    const yAxis = getYAxisProperties(series, layout);
+    if (yAxis === null || yAxis === void 0 ? void 0 : yAxis.tickformat) {
+        return {
+            yAxisTickFormat: (0, _d3format.format)(yAxis === null || yAxis === void 0 ? void 0 : yAxis.tickformat)
+        };
+    }
+    return {};
+};
+const getYMinMaxValues = (series, layout)=>{
+    var _getYAxisProperties;
+    const range = (_getYAxisProperties = getYAxisProperties(series, layout)) === null || _getYAxisProperties === void 0 ? void 0 : _getYAxisProperties.range;
+    if (range && range.length === 2) {
+        return {
+            yMinValue: range[0],
+            yMaxValue: range[1]
+        };
+    }
+    return {};
+};
+const getYAxisProperties = (series, layout)=>{
+    return layout === null || layout === void 0 ? void 0 : layout.yaxis;
+};
+const getXAxisProperties = (series, layout)=>{
+    return layout === null || layout === void 0 ? void 0 : layout.xaxis;
+};
+const getFormattedCalloutYData = (yVal, yAxisFormat)=>{
+    if (typeof (yAxisFormat === null || yAxisFormat === void 0 ? void 0 : yAxisFormat.yAxisTickFormat) === 'function' && typeof yVal === 'number') {
+        return yAxisFormat.yAxisTickFormat(yVal);
+    }
+    return (0, _chartutilities.formatToLocaleString)(yVal);
+};
 const correctYearMonth = (xValues)=>{
     const presentYear = new Date().getFullYear();
     if (xValues.length > 0 && Array.isArray(xValues[0])) {
@@ -294,6 +335,7 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     let colorScale = undefined;
+    const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
     let yMinValue = 0;
     input.data.forEach((series, index1)=>{
         var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _input_layout_template_layout1, _input_layout_template1, _input_layout2, _series_line;
@@ -327,6 +369,7 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
                 const color = colorScale ? colorScale((0, _chartutilities.isArrayOrTypedArray)((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedBarColors, index2, legend, colorMap, isDarkTheme);
                 const opacity = (0, _PlotlyColorAdapter.getOpacity)(series, index2);
                 const yVal = rangeYValues[index2];
+                const yAxisCalloutData = getFormattedCalloutYData(yVal, yAxisTickFormat);
                 if (series.type === 'bar') {
                     var _rgb_copy_formatHex8;
                     mapXToDataPoints[x].chartData.push({
@@ -334,7 +377,8 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
                         data: yVal,
                         color: (_rgb_copy_formatHex8 = (0, _d3color.rgb)(color).copy({
                             opacity
-                        }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
+                        }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
+                        yAxisCalloutData
                     });
                     if (typeof yVal === 'number') {
                         yMaxValue = Math.max(yMaxValue, yVal);
@@ -356,7 +400,8 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
                             ...lineOptions !== null && lineOptions !== void 0 ? lineOptions : {},
                             mode: series.mode
                         },
-                        useSecondaryYScale: usesSecondaryYScale(series, input.layout)
+                        useSecondaryYScale: usesSecondaryYScale(series, input.layout),
+                        yAxisCalloutData
                     });
                     if (!usesSecondaryYScale(series, input.layout) && typeof yVal === 'number') {
                         yMaxValue = Math.max(yMaxValue, yVal);
@@ -367,7 +412,6 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
             });
         });
     });
-    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     const vsbcData = Object.values(mapXToDataPoints);
     var _input_layout_height;
     return {
@@ -377,9 +421,6 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
         barWidth: 'auto',
         yMaxValue,
         yMinValue,
-        chartTitle,
-        xAxisTitle,
-        yAxisTitle,
         mode: 'plotly',
         ...secondaryYAxisValues,
         wrapXAxisLables: typeof ((_vsbcData_ = vsbcData[0]) === null || _vsbcData_ === void 0 ? void 0 : _vsbcData_.xAxisPoint) === 'string',
@@ -390,6 +431,9 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
         showYAxisLables: true,
         noOfCharsToTruncate: 20,
         showYAxisLablesTooltip: true,
+        ...getTitles(input.layout),
+        ...getXAxisTickFormat(input.data[0], input.layout),
+        ...yAxisTickFormat,
         ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
@@ -413,6 +457,7 @@ const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, colorwayTy
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     let colorScale = undefined;
+    const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
     input.data.forEach((series, index1)=>{
         var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _series_x;
         if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && (0, _chartutilities.isArrayOrTypedArray)((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[0]) === 'number') {
@@ -437,21 +482,22 @@ const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, colorwayTy
                 // resolve color for each legend's bars from the colorscale or extracted colors
                 const color = colorScale ? colorScale((0, _chartutilities.isArrayOrTypedArray)((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index2, legend, colorMap, isDarkTheme);
                 const opacity = (0, _PlotlyColorAdapter.getOpacity)(series, index2);
+                const yVal = series.y[index2];
                 var _rgb_copy_formatHex8;
                 mapXToDataPoints[x].series.push({
                     key: legend,
-                    data: series.y[index2],
+                    data: yVal,
                     xAxisCalloutData: x,
                     color: (_rgb_copy_formatHex8 = (0, _d3color.rgb)(color).copy({
                         opacity
                     }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
                     legend,
-                    useSecondaryYScale: usesSecondaryYScale(series, input.layout)
+                    useSecondaryYScale: usesSecondaryYScale(series, input.layout),
+                    yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat)
                 });
             }
         });
     });
-    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     const gvbcData = Object.values(mapXToDataPoints);
     var _input_layout_height;
     return {
@@ -459,15 +505,16 @@ const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, colorwayTy
         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,
         barWidth: 'auto',
-        chartTitle,
-        xAxisTitle,
-        yAxisTitle,
         mode: 'plotly',
         ...secondaryYAxisValues,
         hideTickOverlap: true,
         wrapXAxisLables: typeof ((_gvbcData_ = gvbcData[0]) === null || _gvbcData_ === void 0 ? void 0 : _gvbcData_.name) === 'string',
         hideLegend,
         roundCorners: true,
+        ...getTitles(input.layout),
+        ...getYMinMaxValues(input.data[0], input.layout),
+        ...getXAxisTickFormat(input.data[0], input.layout),
+        ...yAxisTickFormat,
         ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
@@ -534,21 +581,19 @@ const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayTyp
             });
         });
     });
-    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     var _input_layout_height;
     return {
         data: vbcData,
         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,
-        chartTitle,
-        xAxisTitle,
-        yAxisTitle,
         mode: 'histogram',
         hideTickOverlap: true,
         wrapXAxisLables: typeof ((_vbcData_ = vbcData[0]) === null || _vbcData_ === void 0 ? void 0 : _vbcData_.x) === 'string',
         maxBarWidth: 50,
         hideLegend,
         roundCorners: true,
+        ...getTitles(input.layout),
+        ...getYMinMaxValues(input.data[0], input.layout),
         ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
@@ -562,7 +607,7 @@ const transformPlotlyJsonToScatterChartProps = (input, isMultiPlot, colorMap, co
     return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'scatter', colorMap, colorwayType, isDarkTheme);
 };
 const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme)=>{
-    var _input_data_;
+    var _input_data_, _input_layout, _input_layout1;
     const isScatterMarkers = [
         'markers',
         'text+markers',
@@ -576,6 +621,7 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, isAreaChart ? 0 : undefined, isAreaChart ? 0 : undefined);
     let mode = 'tonexty';
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
+    const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
     const chartData = input.data.map((series, index)=>{
         var _series_mode, _series_line, _series_marker, _series_line1, _input_layout_template_layout, _input_layout_template, _input_layout, _series_mode1;
         const colors = isScatterMarkers ? (series === null || series === void 0 ? void 0 : (_series_mode = series.mode) === null || _series_mode === void 0 ? void 0 : _series_mode.includes('line')) ? (_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 : (_series_line1 = series.line) === null || _series_line1 === void 0 ? void 0 : _series_line1.color;
@@ -616,7 +662,8 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
                         } : {},
                         ...textValues ? {
                             text: textValues[i]
-                        } : {}
+                        } : {},
+                        yAxisCalloutData: getFormattedCalloutYData(rangeYValues[i], yAxisTickFormat)
                     };
                 }),
                 color: (_rgb_copy_formatHex8 = (0, _d3color.rgb)(seriesColor).copy({
@@ -630,52 +677,45 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
             };
         });
     }).flat();
-    const yMinMaxValues = (0, _utilities.findNumericMinMaxOfY)(chartData);
-    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
+    const yMinMax = getYMinMaxValues(input.data[0], input.layout);
+    if (yMinMax.yMinValue === undefined && yMinMax.yMaxValue === undefined) {
+        const yMinMaxValues = (0, _utilities.findNumericMinMaxOfY)(chartData);
+        yMinMax.yMinValue = yMinMaxValues.startValue;
+        yMinMax.yMaxValue = yMinMaxValues.endValue;
+    }
     const numDataPoints = chartData.reduce((total, lineChartPoints)=>total + lineChartPoints.data.length, 0);
     const chartProps = {
-        chartTitle,
         lineChartData: chartData
     };
     const scatterChartProps = {
-        chartTitle,
         scatterChartData: chartData
     };
+    var _input_layout_height;
+    const commonProps = {
+        supportNegativeData: true,
+        ...secondaryYAxisValues,
+        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,
+        hideLegend,
+        useUTC: false,
+        optimizeLargeData: numDataPoints > 1000,
+        ...getTitles(input.layout),
+        ...getXAxisTickFormat(input.data[0], input.layout),
+        ...yAxisTickFormat
+    };
     if (isAreaChart) {
-        var _input_layout, _input_layout1;
-        var _input_layout_height;
         return {
             data: chartProps,
-            supportNegativeData: true,
-            xAxisTitle,
-            yAxisTitle,
-            ...secondaryYAxisValues,
             mode,
-            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,
-            hideLegend,
-            optimizeLargeData: numDataPoints > 1000
+            ...commonProps
         };
     } else {
-        var _input_layout2, _input_layout3;
-        var _input_layout_height1;
         return {
             data: isScatterChart ? scatterChartProps : chartProps,
-            supportNegativeData: true,
-            xAxisTitle,
-            yAxisTitle,
-            ...secondaryYAxisValues,
             roundedTicks: true,
-            yMinValue: yMinMaxValues.startValue,
-            yMaxValue: yMinMaxValues.endValue,
-            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,
-            hideLegend,
-            optimizeLargeData: numDataPoints > 1000
+            ...commonProps,
+            ...yMinMax
         };
     }
 };
@@ -721,12 +761,8 @@ const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPlot, col
     const scalingFactor = 0.01;
     const gapFactor = 1 / (1 + scalingFactor * numberOfRows);
     const barHeight = availableHeight / (numberOfRows * (1 + gapFactor));
-    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     return {
         data: chartData,
-        chartTitle,
-        xAxisTitle,
-        yAxisTitle,
         secondaryYAxistitle: typeof ((_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : (_input_layout_yaxis2 = _input_layout3.yaxis2) === null || _input_layout_yaxis2 === void 0 ? void 0 : _input_layout_yaxis2.title) === 'string' ? (_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : (_input_layout_yaxis21 = _input_layout4.yaxis2) === null || _input_layout_yaxis21 === void 0 ? void 0 : _input_layout_yaxis21.title : ((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : (_input_layout_yaxis22 = _input_layout5.yaxis2) === null || _input_layout_yaxis22 === void 0 ? void 0 : (_input_layout_yaxis2_title = _input_layout_yaxis22.title) === null || _input_layout_yaxis2_title === void 0 ? void 0 : _input_layout_yaxis2_title.text) || '',
         barHeight,
         showYAxisLables: true,
@@ -737,6 +773,7 @@ const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPlot, col
         showYAxisLablesTooltip: true,
         hideLegend,
         roundCorners: true,
+        ...getTitles(input.layout),
         ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
@@ -850,7 +887,6 @@ const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwa
     }
     const domainValuesForColorScale = Array.isArray(colorscale) ? colorscale.map((arr)=>arr[0] * (zMax - zMin) + zMin) : defaultDomain;
     const rangeValuesForColorScale = Array.isArray(colorscale) ? colorscale.map((arr)=>arr[1]) : defaultRange;
-    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     var _input_layout_height;
     return {
         data: [
@@ -860,9 +896,6 @@ const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwa
         rangeValuesForColorScale,
         hideLegend: true,
         showYAxisLables: true,
-        chartTitle,
-        xAxisTitle,
-        yAxisTitle,
         sortOrder: 'none',
         width: (_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : _input_layout5.width,
         height: (_input_layout_height = (_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : _input_layout6.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
@@ -870,6 +903,7 @@ const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwa
         noOfCharsToTruncate: 20,
         showYAxisLablesTooltip: true,
         wrapXAxisLables: true,
+        ...getTitles(input.layout),
         ...getAxisCategoryOrderProps([
             firstData
         ], input.layout)