@fluentui/react-charting 5.24.10 → 5.24.12

package/lib-amd/utilities/scatterpolar-utils.js

@@ -0,0 +1,43 @@
+define(["require", "exports", "react"], function (require, exports, React) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderScatterPolarCategoryLabels = void 0;
+    /**
+     * Helper to render categorical labels for scatterpolar charts with improved overlap logic across all series
+     * Now places labels at equal angles for all unique texts, regardless of data positions.
+     */
+    function renderScatterPolarCategoryLabels(_a) {
+        var allSeriesData = _a.allSeriesData, xAxisScale = _a.xAxisScale, yAxisScale = _a.yAxisScale, className = _a.className, maybeLineOptions = _a.maybeLineOptions, _b = _a.minPixelGap, minPixelGap = _b === void 0 ? 40 : _b;
+        // 1. Aggregate all data points from all series
+        var allLabels = [];
+        allSeriesData.forEach(function (series) {
+            series.data.forEach(function (pt) {
+                if (pt.text) {
+                    allLabels.push({ x: pt.x, y: pt.y, text: pt.text });
+                }
+            });
+        });
+        // 2. Deduplicate by text (angle label)
+        var uniqueTexts = Array.from(new Set(allLabels.map(function (l) { return l.text; })));
+        // 3. Place labels at equal angles
+        var renderedLabels = [];
+        var placedPositions = [];
+        var labelRadius = 0.7; // You can adjust this value for more/less offset
+        var numLabels = uniqueTexts.length;
+        uniqueTexts.forEach(function (text, i) {
+            var angle = ((2 * Math.PI) / numLabels) * i;
+            var originXOffset = (maybeLineOptions === null || maybeLineOptions === void 0 ? void 0 : maybeLineOptions.originXOffset) || 0;
+            var x = xAxisScale(labelRadius * Math.cos(angle) - originXOffset / 2);
+            var y = yAxisScale(labelRadius * Math.sin(angle));
+            // Check distance from all previously placed labels
+            var isFarEnough = placedPositions.every(function (pos) { return Math.sqrt(Math.pow((x - pos.x), 2) + Math.pow((y - pos.y), 2)) >= minPixelGap; });
+            if (renderedLabels.length === 0 || isFarEnough) {
+                renderedLabels.push(React.createElement("text", { key: "scatterpolar-label-".concat(text), x: x, y: y, className: className, textAnchor: "middle", alignmentBaseline: "middle", opacity: 1 }, text));
+                placedPositions.push({ x: x, y: y });
+            }
+        });
+        return renderedLabels;
+    }
+    exports.renderScatterPolarCategoryLabels = renderScatterPolarCategoryLabels;
+});
+//# sourceMappingURL=scatterpolar-utils.js.map

package/lib-amd/utilities/scatterpolar-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scatterpolar-utils.js","sourceRoot":"../src/","sources":["utilities/scatterpolar-utils.tsx"],"names":[],"mappings":";;;;IAGA;;;OAGG;IACH,SAAgB,gCAAgC,CAAC,EAchD;YAbC,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,UAAU,gBAAA,EACV,SAAS,eAAA,EACT,gBAAgB,sBAAA,EAChB,mBAAgB,EAAhB,WAAW,mBAAG,EAAE,KAAA;QAShB,+CAA+C;QAC/C,IAAM,SAAS,GAA6C,EAAE,CAAC;QAC/D,aAAa,CAAC,OAAO,CAAC,UAAA,MAAM;YAC1B,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,UAAA,EAAE;gBACpB,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;oBACZ,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;gBACtD,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,uCAAuC;QACvC,IAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,IAAI,EAAN,CAAM,CAAC,CAAC,CAAC,CAAC;QAEpE,kCAAkC;QAClC,IAAM,cAAc,GAAwB,EAAE,CAAC;QAC/C,IAAM,eAAe,GAA+B,EAAE,CAAC;QACvD,IAAM,WAAW,GAAG,GAAG,CAAC,CAAC,iDAAiD;QAC1E,IAAM,SAAS,GAAG,WAAW,CAAC,MAAM,CAAC;QAErC,WAAW,CAAC,OAAO,CAAC,UAAC,IAAI,EAAE,CAAC;YAC1B,IAAM,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;YAC9C,IAAM,aAAa,GAAG,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,aAAa,KAAI,CAAC,CAAC;YAC3D,IAAM,CAAC,GAAG,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,aAAa,GAAG,CAAC,CAAC,CAAC;YACxE,IAAM,CAAC,GAAG,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;YAEpD,mDAAmD;YACnD,IAAM,WAAW,GAAG,eAAe,CAAC,KAAK,CAAC,UAAA,GAAG,IAAI,OAAA,IAAI,CAAC,IAAI,CAAC,SAAA,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,EAAI,CAAC,CAAA,GAAG,SAAA,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,EAAI,CAAC,CAAA,CAAC,IAAI,WAAW,EAA7D,CAA6D,CAAC,CAAC;YAEhH,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,IAAI,WAAW,EAAE,CAAC;gBAC/C,cAAc,CAAC,IAAI,CACjB,8BACE,GAAG,EAAE,6BAAsB,IAAI,CAAE,EACjC,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,SAAS,EAAE,SAAS,EACpB,UAAU,EAAC,QAAQ,EACnB,iBAAiB,EAAC,QAAQ,EAC1B,OAAO,EAAE,CAAC,IAET,IAAI,CACA,CACR,CAAC;gBACF,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,GAAA,EAAE,CAAC,GAAA,EAAE,CAAC,CAAC;YACjC,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,cAAc,CAAC;IACxB,CAAC;IA9DD,4EA8DC","sourcesContent":["import * as React from 'react';\nimport { ScaleLinear } from 'd3-scale';\n\n/**\n * Helper to render categorical labels for scatterpolar charts with improved overlap logic across all series\n * Now places labels at equal angles for all unique texts, regardless of data positions.\n */\nexport function renderScatterPolarCategoryLabels({\n  allSeriesData,\n  xAxisScale,\n  yAxisScale,\n  className,\n  maybeLineOptions,\n  minPixelGap = 40,\n}: {\n  allSeriesData: { data: { x: number; y: number; text?: string }[] }[];\n  xAxisScale: ScaleLinear<number, number>;\n  yAxisScale: ScaleLinear<number, number>;\n  className: string;\n  maybeLineOptions?: { originXOffset?: number };\n  minPixelGap?: number;\n}): React.JSX.Element[] {\n  // 1. Aggregate all data points from all series\n  const allLabels: { x: number; y: number; text: string }[] = [];\n  allSeriesData.forEach(series => {\n    series.data.forEach(pt => {\n      if (pt.text) {\n        allLabels.push({ x: pt.x, y: pt.y, text: pt.text });\n      }\n    });\n  });\n\n  // 2. Deduplicate by text (angle label)\n  const uniqueTexts = Array.from(new Set(allLabels.map(l => l.text)));\n\n  // 3. Place labels at equal angles\n  const renderedLabels: React.JSX.Element[] = [];\n  const placedPositions: { x: number; y: number }[] = [];\n  const labelRadius = 0.7; // You can adjust this value for more/less offset\n  const numLabels = uniqueTexts.length;\n\n  uniqueTexts.forEach((text, i) => {\n    const angle = ((2 * Math.PI) / numLabels) * i;\n    const originXOffset = maybeLineOptions?.originXOffset || 0;\n    const x = xAxisScale(labelRadius * Math.cos(angle) - originXOffset / 2);\n    const y = yAxisScale(labelRadius * Math.sin(angle));\n\n    // Check distance from all previously placed labels\n    const isFarEnough = placedPositions.every(pos => Math.sqrt((x - pos.x) ** 2 + (y - pos.y) ** 2) >= minPixelGap);\n\n    if (renderedLabels.length === 0 || isFarEnough) {\n      renderedLabels.push(\n        <text\n          key={`scatterpolar-label-${text}`}\n          x={x}\n          y={y}\n          className={className}\n          textAnchor=\"middle\"\n          alignmentBaseline=\"middle\"\n          opacity={1}\n        >\n          {text}\n        </text>,\n      );\n      placedPositions.push({ x, y });\n    }\n  });\n\n  return renderedLabels;\n}\n"]}

package/lib-amd/utilities/utilities.d.ts

@@ -473,3 +473,9 @@ export declare const truncateString: (str: string, maxLength: number, ellipsis?:
 export declare const sortAxisCategories: (categoryToValues: Record<string, number[]>, categoryOrder: AxisCategoryOrder | undefined) => string[];
 export declare const getInvertedTextColor: (color: string, theme: ITheme | undefined) => string;
 export declare function getContrastTextColor(backgroundColor: string, theme: ITheme): string;
+/**
+ * Utility function to check if an array of points is scatterpolar
+ * @param points - Array of chart points
+ * @returns true if any point has lineOptions.mode as 'scatterpolar'
+ */
+export declare function isScatterPolarSeries(points: (ILineChartPoints | IScatterChartPoints)[]): boolean;

package/lib-amd/utilities/utilities.js

@@ -2,7 +2,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
     "use strict";
     var _a;
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.getContrastTextColor = exports.getInvertedTextColor = exports.sortAxisCategories = exports.truncateString = exports.domainRangeOfNumericForScatterChart = exports.domainRangeOfDateForScatterChart = exports.getCurveFactory = exports.createMeasurementSpan = exports.copyStyle = exports.resolveCSSVariables = exports.areArraysEqual = exports.getSecureProps = exports.isScalePaddingDefined = exports.getScalePadding = exports.getBarWidth = exports.formatScientificLimitWidth = exports.wrapTextInsideDonut = exports.rotateXAxisLabels = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.findHBCWANumericMinMaxOfY = exports.findVerticalNumericMinMaxOfY = exports.findVSBCNumericMinMaxOfY = exports.findNumericMinMaxOfY = exports.domainRageOfVerticalNumeric = exports.domainRangeOfDateForAreaLineVerticalBarChart = exports.domainRangeOfVSBCNumeric = exports.domainRangeOfXStringAxis = exports.domainRangeOfNumericForHorizontalBarChartWithAxis = exports.computeLongestBars = exports.groupChartDataByYValue = exports.domainRangeOfNumericForAreaChart = exports.getXAxisType = exports.tooltipOfAxislabels = exports.calculateLongestLabelWidth = exports.wrapContent = exports.createYAxisLabels = exports.createWrapOfXLabels = exports.DEFAULT_WRAP_WIDTH = exports.silceOrAppendToArray = exports.getUnique = exports.calloutData = exports.createStringYAxis = exports.createStringYAxisForHorizontalBarChartWithAxis = exports.createNumericYAxis = exports.createYAxisForHorizontalBarChartWithAxis = exports.prepareDatapoints = exports.createStringXAxis = exports.createDateXAxis = exports.createNumericXAxis = exports.defaultYAxisTickFormatter = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = exports.MIN_DONUT_RADIUS = exports.MIN_DOMAIN_MARGIN = void 0;
+    exports.isScatterPolarSeries = exports.getContrastTextColor = exports.getInvertedTextColor = exports.sortAxisCategories = exports.truncateString = exports.domainRangeOfNumericForScatterChart = exports.domainRangeOfDateForScatterChart = exports.getCurveFactory = exports.createMeasurementSpan = exports.copyStyle = exports.resolveCSSVariables = exports.areArraysEqual = exports.getSecureProps = exports.isScalePaddingDefined = exports.getScalePadding = exports.getBarWidth = exports.formatScientificLimitWidth = exports.wrapTextInsideDonut = exports.rotateXAxisLabels = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.findHBCWANumericMinMaxOfY = exports.findVerticalNumericMinMaxOfY = exports.findVSBCNumericMinMaxOfY = exports.findNumericMinMaxOfY = exports.domainRageOfVerticalNumeric = exports.domainRangeOfDateForAreaLineVerticalBarChart = exports.domainRangeOfVSBCNumeric = exports.domainRangeOfXStringAxis = exports.domainRangeOfNumericForHorizontalBarChartWithAxis = exports.computeLongestBars = exports.groupChartDataByYValue = exports.domainRangeOfNumericForAreaChart = exports.getXAxisType = exports.tooltipOfAxislabels = exports.calculateLongestLabelWidth = exports.wrapContent = exports.createYAxisLabels = exports.createWrapOfXLabels = exports.DEFAULT_WRAP_WIDTH = exports.silceOrAppendToArray = exports.getUnique = exports.calloutData = exports.createStringYAxis = exports.createStringYAxisForHorizontalBarChartWithAxis = exports.createNumericYAxis = exports.createYAxisForHorizontalBarChartWithAxis = exports.prepareDatapoints = exports.createStringXAxis = exports.createDateXAxis = exports.createNumericXAxis = exports.defaultYAxisTickFormatter = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = exports.MIN_DONUT_RADIUS = exports.MIN_DOMAIN_MARGIN = void 0;
     exports.MIN_DOMAIN_MARGIN = 8;
     exports.MIN_DONUT_RADIUS = 1;
     var ChartTypes;
@@ -810,6 +810,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      * @returns {IDomainNRange}
      */
     function domainRangeOfNumericForAreaChart(points, margins, width, isRTL) {
+        var isScatterPolar = isScatterPolarSeries(points);
         var xMin = (0, d3_array_1.min)(points, function (point) {
             return (0, d3_array_1.min)(point.data, function (item) { return item.x; });
         });
@@ -821,8 +822,8 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         var rStartValue = margins.left;
         var rEndValue = width - margins.right;
         return isRTL
-            ? { dStartValue: xMax, dEndValue: xMin, rStartValue: rStartValue, rEndValue: rEndValue }
-            : { dStartValue: xMin, dEndValue: xMax, rStartValue: rStartValue, rEndValue: rEndValue };
+            ? { dStartValue: isScatterPolar ? 1 : xMax, dEndValue: isScatterPolar ? -1 : xMin, rStartValue: rStartValue, rEndValue: rEndValue }
+            : { dStartValue: isScatterPolar ? -1 : xMin, dEndValue: isScatterPolar ? 1 : xMax, rStartValue: rStartValue, rEndValue: rEndValue };
     }
     exports.domainRangeOfNumericForAreaChart = domainRangeOfNumericForAreaChart;
     /**
@@ -1419,6 +1420,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      * @returns {IDomainNRange}
      */
     function domainRangeOfNumericForScatterChart(points, margins, width, isRTL) {
+        var isScatterPolar = isScatterPolarSeries(points);
         var xMin = (0, d3_array_1.min)(points, function (point) {
             return (0, d3_array_1.min)(point.data, function (item) { return item.x; });
         });
@@ -1433,8 +1435,8 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         var rStartValue = margins.left;
         var rEndValue = width - margins.right;
         return isRTL
-            ? { dStartValue: xMax, dEndValue: xMin, rStartValue: rStartValue, rEndValue: rEndValue }
-            : { dStartValue: xMin, dEndValue: xMax, rStartValue: rStartValue, rEndValue: rEndValue };
+            ? { dStartValue: isScatterPolar ? 1 : xMax, dEndValue: isScatterPolar ? -1 : xMin, rStartValue: rStartValue, rEndValue: rEndValue }
+            : { dStartValue: isScatterPolar ? -1 : xMin, dEndValue: isScatterPolar ? 1 : xMax, rStartValue: rStartValue, rEndValue: rEndValue };
     }
     exports.domainRangeOfNumericForScatterChart = domainRangeOfNumericForScatterChart;
     var truncateString = function (str, maxLength, ellipsis) {
@@ -1518,5 +1520,16 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         return textColor;
     }
     exports.getContrastTextColor = getContrastTextColor;
+    /**
+     * Utility function to check if an array of points is scatterpolar
+     * @param points - Array of chart points
+     * @returns true if any point has lineOptions.mode as 'scatterpolar'
+     */
+    function isScatterPolarSeries(points) {
+        return points.some(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        function (item) { var _a; return typeof ((_a = item.lineOptions) === null || _a === void 0 ? void 0 : _a.mode) === 'string' && item.lineOptions.mode === 'scatterpolar'; });
+    }
+    exports.isScatterPolarSeries = isScatterPolarSeries;
 });
 //# sourceMappingURL=utilities.js.map