@fluentui/react-charting 5.24.24 → 5.24.25

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

@@ -13,6 +13,7 @@ var chart_utilities_1 = require("@fluentui/chart-utilities");
 var d3_shape_1 = require("d3-shape");
 var PlotlyColorAdapter_1 = require("./PlotlyColorAdapter");
 var d3_color_1 = require("d3-color");
+var react_1 = require("@fluentui/react");
 exports.NON_PLOT_KEY_PREFIX = 'nonplot_';
 exports.SINGLE_REPEAT = 'repeat(1, 1fr)';
 var dashOptions = {
@@ -460,7 +461,7 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
         });
     });
     var vsbcData = Object.values(mapXToDataPoints);
-    return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vsbcData, width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: typeof ((_d = vsbcData[0]) === null || _d === void 0 ? void 0 : _d.xAxisPoint) === 'string' }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getBarProps(input.data, input.layout));
+    return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vsbcData, width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: typeof ((_d = vsbcData[0]) === null || _d === void 0 ? void 0 : _d.xAxisPoint) === 'string' }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getBarProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout));
 };
 exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
 var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -527,7 +528,7 @@ var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, col
         });
     });
     var gvbcData = Object.values(mapXToDataPoints);
-    return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: gvbcData, width: (_a = processedInput.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = processedInput.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barwidth: 'auto', mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: typeof ((_d = gvbcData[0]) === null || _d === void 0 ? void 0 : _d.name) === 'string' }), getTitles(processedInput.layout)), getAxisCategoryOrderProps(processedInput.data, processedInput.layout)), getYMinMaxValues(processedInput.data[0], processedInput.layout)), getXAxisTickFormat(processedInput.data[0], processedInput.layout)), yAxisTickFormat), getBarProps(processedInput.data, processedInput.layout));
+    return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: gvbcData, width: (_a = processedInput.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = processedInput.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barwidth: 'auto', mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: typeof ((_d = gvbcData[0]) === null || _d === void 0 ? void 0 : _d.name) === 'string' }), getTitles(processedInput.layout)), getAxisCategoryOrderProps(processedInput.data, processedInput.layout)), getYMinMaxValues(processedInput.data[0], processedInput.layout)), getXAxisTickFormat(processedInput.data[0], processedInput.layout)), yAxisTickFormat), getBarProps(processedInput.data, processedInput.layout)), getAxisTickProps(processedInput.data, processedInput.layout));
 };
 exports.transformPlotlyJsonToGVBCProps = transformPlotlyJsonToGVBCProps;
 var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -692,7 +693,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
     var scatterChartProps = {
         scatterChartData: chartData,
     };
-    var commonProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_b = input.layout) === null || _b === void 0 ? void 0 : _b.width, height: (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 }), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getAxisScaleTypeProps(input.data, input.layout));
+    var commonProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_b = input.layout) === null || _b === void 0 ? void 0 : _b.width, height: (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 }), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getAxisScaleTypeProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout));
     if (isAreaChart) {
         return tslib_1.__assign({ data: chartProps, mode: mode }, commonProps);
     }
@@ -743,9 +744,9 @@ var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, isMultiPl
     var scalingFactor = 0.01;
     var gapFactor = 1 / (1 + scalingFactor * numberOfRows);
     var barHeight = availableHeight / (numberOfRows * (1 + gapFactor));
-    return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: chartData, secondaryYAxistitle: typeof ((_k = (_j = input.layout) === null || _j === void 0 ? void 0 : _j.yaxis2) === null || _k === void 0 ? void 0 : _k.title) === 'string'
+    return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: chartData, secondaryYAxistitle: typeof ((_k = (_j = input.layout) === null || _j === void 0 ? void 0 : _j.yaxis2) === null || _k === void 0 ? void 0 : _k.title) === 'string'
             ? (_m = (_l = input.layout) === null || _l === void 0 ? void 0 : _l.yaxis2) === null || _m === void 0 ? void 0 : _m.title
-            : ((_q = (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.yaxis2) === null || _p === void 0 ? void 0 : _p.title) === null || _q === void 0 ? void 0 : _q.text) || '', barHeight: barHeight, showYAxisLables: true, height: chartHeight, width: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getBarProps(input.data, input.layout, true));
+            : ((_q = (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.yaxis2) === null || _p === void 0 ? void 0 : _p.title) === null || _q === void 0 ? void 0 : _q.text) || '', barHeight: barHeight, showYAxisLables: true, height: chartHeight, width: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getBarProps(input.data, input.layout, true)), getAxisTickProps(input.data, input.layout));
 };
 exports.transformPlotlyJsonToHorizontalBarWithAxisProps = transformPlotlyJsonToHorizontalBarWithAxisProps;
 var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -792,7 +793,7 @@ var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot, colorMa
             .filter(function (point) { return point !== null; });
     })
         .flat();
-    return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: chartData, showYAxisLables: true, height: (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 350, width: (_c = input.layout) === null || _c === void 0 ? void 0 : _c.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true, useUTC: false }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getBarProps(input.data, input.layout, true));
+    return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: chartData, showYAxisLables: true, height: (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 350, width: (_c = input.layout) === null || _c === void 0 ? void 0 : _c.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true, useUTC: false }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getBarProps(input.data, input.layout, true)), getAxisTickProps(input.data, input.layout));
 };
 exports.transformPlotlyJsonToGanttChartProps = transformPlotlyJsonToGanttChartProps;
 var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -907,7 +908,7 @@ var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, colorMap,
     var rangeValuesForColorScale = Array.isArray(colorscale)
         ? colorscale.map(function (arr) { return arr[1]; })
         : defaultRange;
-    return tslib_1.__assign(tslib_1.__assign({ data: [heatmapData], domainValuesForColorScale: domainValuesForColorScale, rangeValuesForColorScale: rangeValuesForColorScale, hideLegend: true, showYAxisLables: true, sortOrder: 'none', width: (_6 = input.layout) === null || _6 === void 0 ? void 0 : _6.width, height: (_8 = (_7 = input.layout) === null || _7 === void 0 ? void 0 : _7.height) !== null && _8 !== void 0 ? _8 : 350, hideTickOverlap: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: true }, getTitles(input.layout)), getAxisCategoryOrderProps([firstData], input.layout));
+    return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: [heatmapData], domainValuesForColorScale: domainValuesForColorScale, rangeValuesForColorScale: rangeValuesForColorScale, hideLegend: true, showYAxisLables: true, sortOrder: 'none', width: (_6 = input.layout) === null || _6 === void 0 ? void 0 : _6.width, height: (_8 = (_7 = input.layout) === null || _7 === void 0 ? void 0 : _7.height) !== null && _8 !== void 0 ? _8 : 350, hideTickOverlap: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: true }, getTitles(input.layout)), getAxisCategoryOrderProps([firstData], input.layout)), getAxisTickProps(input.data, input.layout));
 };
 exports.transformPlotlyJsonToHeatmapProps = transformPlotlyJsonToHeatmapProps;
 var transformPlotlyJsonToSankeyProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -1542,11 +1543,11 @@ var createBins = function (data, binStart, binEnd, binSize) {
     var binGenerator = (0, d3_array_1.bin)().domain([minVal, maxVal]);
     if (typeof binSize === 'number' && binSize > 0) {
         var thresholds = [];
-        var precision = Math.max(getPrecision(minVal), getPrecision(binSize));
-        var th = precisionRound(minVal, precision);
-        while (th < precisionRound(maxVal + binSize, precision)) {
+        var precision = Math.max((0, react_1.calculatePrecision)(minVal), (0, react_1.calculatePrecision)(binSize));
+        var th = (0, react_1.precisionRound)(minVal, precision);
+        while (th < (0, react_1.precisionRound)(maxVal + binSize, precision)) {
             thresholds.push(th);
-            th = precisionRound(th + binSize, precision);
+            th = (0, react_1.precisionRound)(th + binSize, precision);
         }
         minVal = thresholds[0];
         maxVal = thresholds[thresholds.length - 1];
@@ -1589,14 +1590,6 @@ var calculateHistNorm = function (histnorm, value, total, dx, dy) {
             return value;
     }
 };
-var getPrecision = function (value) {
-    var _a, _b;
-    return (_b = (_a = value.toString().split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-};
-var precisionRound = function (value, precision) {
-    var factor = Math.pow(10, precision);
-    return Math.round(value * factor) / factor;
-};
 var getLegendShape = function (series) {
     var _a, _b;
     var dashType = ((_a = series.line) === null || _a === void 0 ? void 0 : _a.dash) || 'solid';
@@ -1979,7 +1972,128 @@ var getBarProps = function (data, layout, isHorizontal) {
     };
 };
 var getAxisScaleTypeProps = function (data, layout) {
+    var _a, _b, _c;
     var result = {};
+    var axisObjects = getAxisObjects(data, layout);
+    if (((_a = axisObjects.x) === null || _a === void 0 ? void 0 : _a.type) === 'log') {
+        result.xScaleType = 'log';
+    }
+    if (((_b = axisObjects.y) === null || _b === void 0 ? void 0 : _b.type) === 'log') {
+        result.yScaleType = 'log';
+    }
+    if (((_c = axisObjects.y2) === null || _c === void 0 ? void 0 : _c.type) === 'log') {
+        result.secondaryYScaleType = 'log';
+    }
+    return result;
+};
+/**
+ * @see {@link https://github.com/plotly/plotly.js/blob/master/src/plots/cartesian/tick_value_defaults.js#L8}
+ */
+var getAxisTickProps = function (data, layout) {
+    var props = {};
+    var axisObjects = getAxisObjects(data, layout);
+    Object.keys(axisObjects).forEach(function (axId) {
+        var ax = axisObjects[axId];
+        if (!ax) {
+            return;
+        }
+        var axType = getAxisType(data, axId[0], ax);
+        if ((!ax.tickmode || ax.tickmode === 'array') && (0, chart_utilities_1.isArrayOrTypedArray)(ax.tickvals)) {
+            var tickValues = axType === 'date' ? ax.tickvals.map(function (v) { return new Date(v); }) : ax.tickvals;
+            if (axId === 'x') {
+                props.tickValues = tickValues;
+            }
+            else if (axId === 'y') {
+                props.yAxisTickValues = tickValues;
+            }
+            return;
+        }
+        if ((!ax.tickmode || ax.tickmode === 'linear') && ax.dtick) {
+            var dtick = plotlyDtick(ax.dtick, axType);
+            var tick0 = plotlyTick0(ax.tick0, axType, dtick);
+            if (axId === 'x') {
+                props.xAxis = {
+                    tickStep: dtick,
+                    tick0: tick0,
+                };
+            }
+            else if (axId === 'y') {
+                props.yAxis = {
+                    tickStep: dtick,
+                    tick0: tick0,
+                };
+            }
+            return;
+        }
+        if ((!ax.tickmode || ax.tickmode === 'auto') && typeof ax.nticks === 'number' && ax.nticks >= 0) {
+            if (axId === 'x') {
+                props.xAxisTickCount = ax.nticks;
+            }
+            else if (axId === 'y') {
+                props.yAxisTickCount = ax.nticks;
+            }
+        }
+    });
+    return props;
+};
+/**
+ * @see {@link https://github.com/plotly/plotly.js/blob/master/src/plots/cartesian/clean_ticks.js#L16}
+ */
+var plotlyDtick = function (dtick, axType) {
+    var isLogAx = axType === 'log';
+    var isDateAx = axType === 'date';
+    var isCatAx = axType === 'category';
+    var dtickDflt = isDateAx ? 86400000 : 1;
+    if (!dtick) {
+        return dtickDflt;
+    }
+    if ((0, chart_utilities_1.isNumber)(dtick)) {
+        dtick = Number(dtick);
+        if (dtick <= 0) {
+            return dtickDflt;
+        }
+        if (isCatAx) {
+            // category dtick must be positive integers
+            return Math.max(1, Math.round(dtick));
+        }
+        if (isDateAx) {
+            // date dtick must be at least 0.1ms (our current precision)
+            return Math.max(0.1, dtick);
+        }
+        return dtick;
+    }
+    if (typeof dtick !== 'string' || !(isDateAx || isLogAx)) {
+        return dtickDflt;
+    }
+    var prefix = dtick.charAt(0);
+    var dtickNum = (0, chart_utilities_1.isNumber)(dtick.slice(1)) ? Number(dtick.slice(1)) : 0;
+    if (dtickNum <= 0 ||
+        !(
+        // "M<n>" gives ticks every (integer) n months
+        ((isDateAx && prefix === 'M' && dtickNum === Math.round(dtickNum)) ||
+            // "L<f>" gives ticks linearly spaced in data (not in position) every (float) f
+            (isLogAx && prefix === 'L') ||
+            // "D1" gives powers of 10 with all small digits between, "D2" gives only 2 and 5
+            (isLogAx && prefix === 'D' && (dtickNum === 1 || dtickNum === 2))))) {
+        return dtickDflt;
+    }
+    return dtick;
+};
+/**
+ * @see {@link https://github.com/plotly/plotly.js/blob/master/src/plots/cartesian/clean_ticks.js#L70}
+ */
+var plotlyTick0 = function (tick0, axType, dtick) {
+    if (axType === 'date') {
+        return (0, chart_utilities_1.isDate)(tick0) ? new Date(tick0) : new Date(utilities_1.DEFAULT_DATE_STRING);
+    }
+    if (dtick === 'D1' || dtick === 'D2') {
+        // D1 and D2 modes ignore tick0 entirely
+        return undefined;
+    }
+    // Aside from date axes, tick0 must be numeric
+    return (0, chart_utilities_1.isNumber)(tick0) ? Number(tick0) : 0;
+};
+var getAxisObjects = function (data, layout) {
     // Traces are grouped by their xaxis property, and for each group/subplot, the adapter functions
     // are called with the corresponding filtered data. As a result, all traces passed to an adapter
     // function share the same xaxis.
@@ -1990,21 +2104,43 @@ var getAxisScaleTypeProps = function (data, layout) {
         xAxisId = axisIds.x;
         yAxisIds.add(axisIds.y);
     });
-    var isLogAxis = function (axLetter, axId) {
-        var _a;
-        var axisKey = (0, chart_utilities_1.getAxisKey)(axLetter, axId);
-        return ((_a = layout === null || layout === void 0 ? void 0 : layout[axisKey]) === null || _a === void 0 ? void 0 : _a.type) === 'log';
-    };
-    if (typeof xAxisId === 'number' && isLogAxis('x', xAxisId)) {
-        result.xScaleType = 'log';
+    var axisObjects = {};
+    if (typeof xAxisId === 'number') {
+        axisObjects.x = layout === null || layout === void 0 ? void 0 : layout[(0, chart_utilities_1.getAxisKey)('x', xAxisId)];
     }
     var sortedYAxisIds = Array.from(yAxisIds).sort();
-    if (sortedYAxisIds.length > 0 && isLogAxis('y', sortedYAxisIds[0])) {
-        result.yScaleType = 'log';
+    if (sortedYAxisIds.length > 0) {
+        axisObjects.y = layout === null || layout === void 0 ? void 0 : layout[(0, chart_utilities_1.getAxisKey)('y', sortedYAxisIds[0])];
     }
-    if (sortedYAxisIds.length > 1 && isLogAxis('y', sortedYAxisIds[1])) {
-        result.secondaryYScaleType = 'log';
+    if (sortedYAxisIds.length > 1) {
+        axisObjects.y2 = layout === null || layout === void 0 ? void 0 : layout[(0, chart_utilities_1.getAxisKey)('y', sortedYAxisIds[1])];
+    }
+    return axisObjects;
+};
+var getAxisType = function (data, axLetter, ax) {
+    var values = [];
+    data.forEach(function (series) {
+        var _a;
+        (_a = series[axLetter]) === null || _a === void 0 ? void 0 : _a.forEach(function (val) {
+            if (!(0, chart_utilities_1.isInvalidValue)(val)) {
+                values.push(val);
+            }
+        });
+    });
+    // Note: When ax.type is explicitly specified, Plotly casts the values to match that type.
+    // Therefore, simply checking the type of the values may not be sufficient. At the moment,
+    // we don’t always perform this casting ourselves and instead use the values as provided.
+    if ((0, chart_utilities_1.isNumberArray)(values)) {
+        if ((ax === null || ax === void 0 ? void 0 : ax.type) === 'log') {
+            return 'log';
+        }
+        return 'linear';
+    }
+    if ((0, chart_utilities_1.isDateArray)(values)) {
+        return 'date';
+    }
+    if ((0, chart_utilities_1.isStringArray)(values)) {
+        return 'category';
     }
-    return result;
 };
 //# sourceMappingURL=PlotlySchemaAdapter.js.map