@fluentui/react-charting 5.24.10 → 5.24.12

package/lib/utilities/scatterpolar-utils.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+/**
+ * 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.
+ */
+export 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;
+}
+//# sourceMappingURL=scatterpolar-utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scatterpolar-utils.js","sourceRoot":"../src/","sources":["utilities/scatterpolar-utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;GAGG;AACH,MAAM,UAAU,gCAAgC,CAAC,EAchD;QAbC,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,UAAU,gBAAA,EACV,SAAS,eAAA,EACT,gBAAgB,sBAAA,EAChB,mBAAgB,EAAhB,WAAW,mBAAG,EAAE,KAAA;IAShB,+CAA+C;IAC/C,IAAM,SAAS,GAA6C,EAAE,CAAC;IAC/D,aAAa,CAAC,OAAO,CAAC,UAAA,MAAM;QAC1B,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,UAAA,EAAE;YACpB,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;gBACZ,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;YACtD,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,uCAAuC;IACvC,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;IAEpE,kCAAkC;IAClC,IAAM,cAAc,GAAwB,EAAE,CAAC;IAC/C,IAAM,eAAe,GAA+B,EAAE,CAAC;IACvD,IAAM,WAAW,GAAG,GAAG,CAAC,CAAC,iDAAiD;IAC1E,IAAM,SAAS,GAAG,WAAW,CAAC,MAAM,CAAC;IAErC,WAAW,CAAC,OAAO,CAAC,UAAC,IAAI,EAAE,CAAC;QAC1B,IAAM,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;QAC9C,IAAM,aAAa,GAAG,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,aAAa,KAAI,CAAC,CAAC;QAC3D,IAAM,CAAC,GAAG,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,aAAa,GAAG,CAAC,CAAC,CAAC;QACxE,IAAM,CAAC,GAAG,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;QAEpD,mDAAmD;QACnD,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;QAEhH,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,IAAI,WAAW,EAAE,CAAC;YAC/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;YACF,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,GAAA,EAAE,CAAC,GAAA,EAAE,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,cAAc,CAAC;AACxB,CAAC","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/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/utilities/utilities.js

@@ -801,6 +801,7 @@ export function getXAxisType(points) {
  * @returns {IDomainNRange}
  */
 export function domainRangeOfNumericForAreaChart(points, margins, width, isRTL) {
+    var isScatterPolar = isScatterPolarSeries(points);
     var xMin = d3Min(points, function (point) {
         return d3Min(point.data, function (item) { return item.x; });
     });
@@ -812,8 +813,8 @@ export function domainRangeOfNumericForAreaChart(points, margins, width, isRTL)
     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 };
 }
 /**
  * Groups HorizontalBarChart With Axis data based on YValue
@@ -1383,6 +1384,7 @@ export function domainRangeOfDateForScatterChart(points, margins, width, isRTL,
  * @returns {IDomainNRange}
  */
 export function domainRangeOfNumericForScatterChart(points, margins, width, isRTL) {
+    var isScatterPolar = isScatterPolarSeries(points);
     var xMin = d3Min(points, function (point) {
         return d3Min(point.data, function (item) { return item.x; });
     });
@@ -1397,8 +1399,8 @@ export function domainRangeOfNumericForScatterChart(points, margins, width, isRT
     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 };
 }
 export var truncateString = function (str, maxLength, ellipsis) {
     if (ellipsis === void 0) { ellipsis = '...'; }
@@ -1477,4 +1479,14 @@ export function getContrastTextColor(backgroundColor, theme) {
     }
     return textColor;
 }
+/**
+ * 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 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'; });
+}
 //# sourceMappingURL=utilities.js.map