@fluentui/react-charting 5.24.24 → 5.24.25

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -4,11 +4,12 @@ import { scaleLinear as d3ScaleLinear } from 'd3-scale';
 import { format as d3Format } from 'd3-format';
 import { DataVizPalette, getColorFromToken } from '../../utilities/colors';
 import { GaugeChartVariant } from '../GaugeChart/index';
-import { findNumericMinMaxOfY, formatScientificLimitWidth, MIN_DONUT_RADIUS } from '../../utilities/utilities';
+import { DEFAULT_DATE_STRING, findNumericMinMaxOfY, formatScientificLimitWidth, MIN_DONUT_RADIUS, } from '../../utilities/utilities';
 import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue, formatToLocaleString, isNumber, isObjectArray, getAxisIds, getAxisKey, } from '@fluentui/chart-utilities';
 import { curveCardinal as d3CurveCardinal } from 'd3-shape';
 import { getOpacity, extractColor, resolveColor, createColorScale } from './PlotlyColorAdapter';
 import { rgb } from 'd3-color';
+import { calculatePrecision, precisionRound } from '@fluentui/react';
 export var NON_PLOT_KEY_PREFIX = 'nonplot_';
 export var SINGLE_REPEAT = 'repeat(1, 1fr)';
 var dashOptions = {
@@ -451,7 +452,7 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
         });
     });
     var vsbcData = Object.values(mapXToDataPoints);
-    return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__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 __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__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));
 };
 export var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d;
@@ -517,7 +518,7 @@ export var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorM
         });
     });
     var gvbcData = Object.values(mapXToDataPoints);
-    return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__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 __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__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));
 };
 export var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d;
@@ -677,7 +678,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
     var scatterChartProps = {
         scatterChartData: chartData,
     };
-    var commonProps = __assign(__assign(__assign(__assign(__assign(__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 = __assign(__assign(__assign(__assign(__assign(__assign(__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 __assign({ data: chartProps, mode: mode }, commonProps);
     }
@@ -728,9 +729,9 @@ export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, is
     var scalingFactor = 0.01;
     var gapFactor = 1 / (1 + scalingFactor * numberOfRows);
     var barHeight = availableHeight / (numberOfRows * (1 + gapFactor));
-    return __assign(__assign(__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 __assign(__assign(__assign(__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));
 };
 export var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c;
@@ -776,7 +777,7 @@ export var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot,
             .filter(function (point) { return point !== null; });
     })
         .flat();
-    return __assign(__assign(__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 __assign(__assign(__assign(__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));
 };
 export var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
@@ -890,7 +891,7 @@ export var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, col
     var rangeValuesForColorScale = Array.isArray(colorscale)
         ? colorscale.map(function (arr) { return arr[1]; })
         : defaultRange;
-    return __assign(__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 __assign(__assign(__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));
 };
 export var transformPlotlyJsonToSankeyProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -1519,7 +1520,7 @@ var createBins = function (data, binStart, binEnd, binSize) {
     var binGenerator = d3Bin().domain([minVal, maxVal]);
     if (typeof binSize === 'number' && binSize > 0) {
         var thresholds = [];
-        var precision = Math.max(getPrecision(minVal), getPrecision(binSize));
+        var precision = Math.max(calculatePrecision(minVal), calculatePrecision(binSize));
         var th = precisionRound(minVal, precision);
         while (th < precisionRound(maxVal + binSize, precision)) {
             thresholds.push(th);
@@ -1566,14 +1567,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';
@@ -1951,7 +1944,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') && 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 (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 = 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 isDate(tick0) ? new Date(tick0) : new Date(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 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.
@@ -1962,21 +2076,43 @@ var getAxisScaleTypeProps = function (data, layout) {
         xAxisId = axisIds.x;
         yAxisIds.add(axisIds.y);
     });
-    var isLogAxis = function (axLetter, axId) {
-        var _a;
-        var axisKey = 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[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[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[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 (!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 (isNumberArray(values)) {
+        if ((ax === null || ax === void 0 ? void 0 : ax.type) === 'log') {
+            return 'log';
+        }
+        return 'linear';
+    }
+    if (isDateArray(values)) {
+        return 'date';
+    }
+    if (isStringArray(values)) {
+        return 'category';
     }
-    return result;
 };
 //# sourceMappingURL=PlotlySchemaAdapter.js.map