@gravity-ui/charts 1.5.0 → 1.5.1

package/dist/cjs/hooks/useShapes/pie/prepare-data.js

@@ -1,7 +1,7 @@
 import { arc, group, line as lineGenerator } from 'd3';
 import { calculateNumericProperty, getLabelsSize, getLeftPosition, isLabelsOverlapping, } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
-import { getCurveFactory, pieGenerator } from './utils';
+import { getCurveFactory, getInscribedAngle, pieGenerator } from './utils';
 const FULL_CIRCLE = Math.PI * 2;
 const getCenter = (boundsWidth, boundsHeight, center) => {
     var _a, _b;
@@ -103,6 +103,7 @@ export function preparePieData(args) {
         const labelArcGenerator = arc()
             .innerRadius((d) => d.data.radius + distance + connectorPadding)
             .outerRadius((d) => d.data.radius + distance + connectorPadding);
+        let shouldStopLabelPlacement = false;
         series.forEach((d, index) => {
             const prevLabel = labels[labels.length - 1];
             const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.value }, d.dataLabels));
@@ -158,8 +159,13 @@ export function preparePieData(args) {
             let overlap = false;
             if (prevLabel) {
                 overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
+                const startAngle = relatedSegment.startAngle +
+                    (relatedSegment.endAngle - relatedSegment.startAngle) / 2;
                 if (overlap) {
-                    let shouldAdjustAngle = true;
+                    let shouldAdjustAngle = !shouldStopLabelPlacement;
+                    const connectorPoints = getConnectorPoints(startAngle);
+                    const pointA = connectorPoints[0];
+                    const pointB = connectorPoints[connectorPoints.length - 1];
                     const step = Math.PI / 180;
                     while (shouldAdjustAngle) {
                         const newAngle = label.angle + step;
@@ -171,6 +177,11 @@ export function preparePieData(args) {
                             const [newX, newY] = getLabelPosition(newAngle);
                             label.x = newX;
                             label.y = newY;
+                            const inscribedAngle = getInscribedAngle(pointA, pointB, [newX, newY]);
+                            if (inscribedAngle > 90) {
+                                shouldAdjustAngle = false;
+                                shouldStopLabelPlacement = true;
+                            }
                             if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
                                 shouldAdjustAngle = false;
                                 overlap = false;
@@ -180,7 +191,7 @@ export function preparePieData(args) {
                 }
             }
             const isLabelOverlapped = !dataLabels.allowOverlap && overlap;
-            if (!isLabelOverlapped && label.maxWidth > 0) {
+            if (!isLabelOverlapped && label.maxWidth > 0 && !shouldStopLabelPlacement) {
                 if (shouldUseHtml) {
                     htmlLabels.push({
                         x: data.center[0] + label.x,
@@ -194,7 +205,7 @@ export function preparePieData(args) {
                     labels.push(label);
                 }
                 const connector = {
-                    path: line(getConnectorPoints(midAngle)),
+                    path: line(getConnectorPoints(label.angle)),
                     color: relatedSegment.data.color,
                 };
                 connectors.push(connector);

package/dist/cjs/hooks/useShapes/pie/utils.d.ts

@@ -1,4 +1,14 @@
 import type { CurveFactory } from 'd3';
+import type { PointPosition } from '../../../types';
 import type { PreparedPieData, SegmentData } from './types';
 export declare const pieGenerator: import("d3-shape").Pie<any, SegmentData>;
 export declare function getCurveFactory(data: PreparedPieData): CurveFactory | undefined;
+/**
+ * Inscribed angle at vertex A (opposite side/chord BC): the angle between rays AB and AC.
+ *
+ * The order of B and C does not affect the result.
+ *
+ * @see: https://en.wikipedia.org/wiki/Inscribed_angle
+ * @returns The angle in degrees, in the range [0, 180].
+ */
+export declare function getInscribedAngle(a: PointPosition, b: PointPosition, c: PointPosition): number;

package/dist/cjs/hooks/useShapes/pie/utils.js

@@ -13,3 +13,21 @@ export function getCurveFactory(data) {
     }
     return undefined;
 }
+/**
+ * Inscribed angle at vertex A (opposite side/chord BC): the angle between rays AB and AC.
+ *
+ * The order of B and C does not affect the result.
+ *
+ * @see: https://en.wikipedia.org/wiki/Inscribed_angle
+ * @returns The angle in degrees, in the range [0, 180].
+ */
+export function getInscribedAngle(a, b, c) {
+    const ux = b[0] - a[0];
+    const uy = b[1] - a[1];
+    const vx = c[0] - a[0];
+    const vy = c[1] - a[1];
+    const dot = ux * vx + uy * vy;
+    const cross = ux * vy - uy * vx;
+    const radians = Math.atan2(Math.abs(cross), dot);
+    return (radians * 180) / Math.PI;
+}

package/dist/cjs/hooks/useShapes/treemap/prepare-data.js

@@ -4,13 +4,13 @@ import { getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 const DEFAULT_PADDING = 1;
 function getLabels(args) {
-    const { data, options: { html, padding, align }, } = args;
+    const { data, options: { html, padding, align, style }, } = args;
     return data.reduce((acc, d) => {
         const texts = Array.isArray(d.data.name) ? d.data.name : [d.data.name];
         texts.forEach((text, index) => {
             var _a;
             const label = getFormattedValue(Object.assign({ value: text }, args.options));
-            const { maxHeight: lineHeight, maxWidth: labelMaxWidth } = (_a = getLabelsSize({ labels: [label], html })) !== null && _a !== void 0 ? _a : {};
+            const { maxHeight: lineHeight, maxWidth: labelMaxWidth } = (_a = getLabelsSize({ labels: [label], style, html })) !== null && _a !== void 0 ? _a : {};
             const left = d.x0 + padding;
             const right = d.x1 - padding;
             const spaceWidth = Math.max(0, right - left);
@@ -35,6 +35,10 @@ function getLabels(args) {
                     break;
                 }
             }
+            const bottom = y + lineHeight;
+            if (bottom > d.y1) {
+                return;
+            }
             const item = html
                 ? {
                     content: label,
@@ -120,7 +124,7 @@ export function prepareTreemapData(args) {
         const { html, style: dataLabelsStyle } = series.dataLabels;
         const labels = getLabels({ data: leaves, options: series.dataLabels });
         if (html) {
-            const htmlItems = labels.map((l) => (Object.assign({ style: dataLabelsStyle }, l)));
+            const htmlItems = labels.map((l) => (Object.assign({ style: Object.assign(Object.assign({}, dataLabelsStyle), { maxWidth: l.size.width, maxHeight: l.size.height, overflow: 'hidden' }) }, l)));
             htmlElements.push(...htmlItems);
         }
         else {

package/dist/cjs/utils/chart/text.js

@@ -64,7 +64,7 @@ function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
     return text;
 }
 export function getLabelsSize({ labels, style, rotation, html, }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (!labels.filter(Boolean).length) {
         return { maxHeight: 0, maxWidth: 0 };
     }
@@ -74,7 +74,12 @@ export function getLabelsSize({ labels, style, rotation, html, }) {
     const result = { maxHeight: 0, maxWidth: 0 };
     let labelWrapper;
     if (html) {
-        labelWrapper = container.append('div').style('position', 'absolute').node();
+        labelWrapper = container
+            .append('div')
+            .style('position', 'absolute')
+            .style('font-size', (_a = style === null || style === void 0 ? void 0 : style.fontSize) !== null && _a !== void 0 ? _a : '')
+            .style('font-weight', (_b = style === null || style === void 0 ? void 0 : style.fontWeight) !== null && _b !== void 0 ? _b : '')
+            .node();
         const { height, width } = labels.reduce((acc, l) => {
             var _a, _b;
             if (labelWrapper) {
@@ -97,9 +102,9 @@ export function getLabelsSize({ labels, style, rotation, html, }) {
                 .attr('text-anchor', rotation > 0 ? 'start' : 'end')
                 .style('transform', `rotate(${rotation}deg)`);
         }
-        const rect = (_a = svg.select('g').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        result.maxWidth = (_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0;
-        result.maxHeight = (_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0;
+        const rect = (_c = svg.select('g').node()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+        result.maxWidth = (_d = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _d !== void 0 ? _d : 0;
+        result.maxHeight = (_e = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _e !== void 0 ? _e : 0;
     }
     container.remove();
     return result;

package/dist/esm/hooks/useShapes/pie/prepare-data.js

@@ -1,7 +1,7 @@
 import { arc, group, line as lineGenerator } from 'd3';
 import { calculateNumericProperty, getLabelsSize, getLeftPosition, isLabelsOverlapping, } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
-import { getCurveFactory, pieGenerator } from './utils';
+import { getCurveFactory, getInscribedAngle, pieGenerator } from './utils';
 const FULL_CIRCLE = Math.PI * 2;
 const getCenter = (boundsWidth, boundsHeight, center) => {
     var _a, _b;
@@ -103,6 +103,7 @@ export function preparePieData(args) {
         const labelArcGenerator = arc()
             .innerRadius((d) => d.data.radius + distance + connectorPadding)
             .outerRadius((d) => d.data.radius + distance + connectorPadding);
+        let shouldStopLabelPlacement = false;
         series.forEach((d, index) => {
             const prevLabel = labels[labels.length - 1];
             const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.value }, d.dataLabels));
@@ -158,8 +159,13 @@ export function preparePieData(args) {
             let overlap = false;
             if (prevLabel) {
                 overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
+                const startAngle = relatedSegment.startAngle +
+                    (relatedSegment.endAngle - relatedSegment.startAngle) / 2;
                 if (overlap) {
-                    let shouldAdjustAngle = true;
+                    let shouldAdjustAngle = !shouldStopLabelPlacement;
+                    const connectorPoints = getConnectorPoints(startAngle);
+                    const pointA = connectorPoints[0];
+                    const pointB = connectorPoints[connectorPoints.length - 1];
                     const step = Math.PI / 180;
                     while (shouldAdjustAngle) {
                         const newAngle = label.angle + step;
@@ -171,6 +177,11 @@ export function preparePieData(args) {
                             const [newX, newY] = getLabelPosition(newAngle);
                             label.x = newX;
                             label.y = newY;
+                            const inscribedAngle = getInscribedAngle(pointA, pointB, [newX, newY]);
+                            if (inscribedAngle > 90) {
+                                shouldAdjustAngle = false;
+                                shouldStopLabelPlacement = true;
+                            }
                             if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
                                 shouldAdjustAngle = false;
                                 overlap = false;
@@ -180,7 +191,7 @@ export function preparePieData(args) {
                 }
             }
             const isLabelOverlapped = !dataLabels.allowOverlap && overlap;
-            if (!isLabelOverlapped && label.maxWidth > 0) {
+            if (!isLabelOverlapped && label.maxWidth > 0 && !shouldStopLabelPlacement) {
                 if (shouldUseHtml) {
                     htmlLabels.push({
                         x: data.center[0] + label.x,
@@ -194,7 +205,7 @@ export function preparePieData(args) {
                     labels.push(label);
                 }
                 const connector = {
-                    path: line(getConnectorPoints(midAngle)),
+                    path: line(getConnectorPoints(label.angle)),
                     color: relatedSegment.data.color,
                 };
                 connectors.push(connector);

package/dist/esm/hooks/useShapes/pie/utils.d.ts

@@ -1,4 +1,14 @@
 import type { CurveFactory } from 'd3';
+import type { PointPosition } from '../../../types';
 import type { PreparedPieData, SegmentData } from './types';
 export declare const pieGenerator: import("d3-shape").Pie<any, SegmentData>;
 export declare function getCurveFactory(data: PreparedPieData): CurveFactory | undefined;
+/**
+ * Inscribed angle at vertex A (opposite side/chord BC): the angle between rays AB and AC.
+ *
+ * The order of B and C does not affect the result.
+ *
+ * @see: https://en.wikipedia.org/wiki/Inscribed_angle
+ * @returns The angle in degrees, in the range [0, 180].
+ */
+export declare function getInscribedAngle(a: PointPosition, b: PointPosition, c: PointPosition): number;

package/dist/esm/hooks/useShapes/pie/utils.js

@@ -13,3 +13,21 @@ export function getCurveFactory(data) {
     }
     return undefined;
 }
+/**
+ * Inscribed angle at vertex A (opposite side/chord BC): the angle between rays AB and AC.
+ *
+ * The order of B and C does not affect the result.
+ *
+ * @see: https://en.wikipedia.org/wiki/Inscribed_angle
+ * @returns The angle in degrees, in the range [0, 180].
+ */
+export function getInscribedAngle(a, b, c) {
+    const ux = b[0] - a[0];
+    const uy = b[1] - a[1];
+    const vx = c[0] - a[0];
+    const vy = c[1] - a[1];
+    const dot = ux * vx + uy * vy;
+    const cross = ux * vy - uy * vx;
+    const radians = Math.atan2(Math.abs(cross), dot);
+    return (radians * 180) / Math.PI;
+}

package/dist/esm/hooks/useShapes/treemap/prepare-data.js

@@ -4,13 +4,13 @@ import { getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 const DEFAULT_PADDING = 1;
 function getLabels(args) {
-    const { data, options: { html, padding, align }, } = args;
+    const { data, options: { html, padding, align, style }, } = args;
     return data.reduce((acc, d) => {
         const texts = Array.isArray(d.data.name) ? d.data.name : [d.data.name];
         texts.forEach((text, index) => {
             var _a;
             const label = getFormattedValue(Object.assign({ value: text }, args.options));
-            const { maxHeight: lineHeight, maxWidth: labelMaxWidth } = (_a = getLabelsSize({ labels: [label], html })) !== null && _a !== void 0 ? _a : {};
+            const { maxHeight: lineHeight, maxWidth: labelMaxWidth } = (_a = getLabelsSize({ labels: [label], style, html })) !== null && _a !== void 0 ? _a : {};
             const left = d.x0 + padding;
             const right = d.x1 - padding;
             const spaceWidth = Math.max(0, right - left);
@@ -35,6 +35,10 @@ function getLabels(args) {
                     break;
                 }
             }
+            const bottom = y + lineHeight;
+            if (bottom > d.y1) {
+                return;
+            }
             const item = html
                 ? {
                     content: label,
@@ -120,7 +124,7 @@ export function prepareTreemapData(args) {
         const { html, style: dataLabelsStyle } = series.dataLabels;
         const labels = getLabels({ data: leaves, options: series.dataLabels });
         if (html) {
-            const htmlItems = labels.map((l) => (Object.assign({ style: dataLabelsStyle }, l)));
+            const htmlItems = labels.map((l) => (Object.assign({ style: Object.assign(Object.assign({}, dataLabelsStyle), { maxWidth: l.size.width, maxHeight: l.size.height, overflow: 'hidden' }) }, l)));
             htmlElements.push(...htmlItems);
         }
         else {

package/dist/esm/utils/chart/text.js

@@ -64,7 +64,7 @@ function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
     return text;
 }
 export function getLabelsSize({ labels, style, rotation, html, }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (!labels.filter(Boolean).length) {
         return { maxHeight: 0, maxWidth: 0 };
     }
@@ -74,7 +74,12 @@ export function getLabelsSize({ labels, style, rotation, html, }) {
     const result = { maxHeight: 0, maxWidth: 0 };
     let labelWrapper;
     if (html) {
-        labelWrapper = container.append('div').style('position', 'absolute').node();
+        labelWrapper = container
+            .append('div')
+            .style('position', 'absolute')
+            .style('font-size', (_a = style === null || style === void 0 ? void 0 : style.fontSize) !== null && _a !== void 0 ? _a : '')
+            .style('font-weight', (_b = style === null || style === void 0 ? void 0 : style.fontWeight) !== null && _b !== void 0 ? _b : '')
+            .node();
         const { height, width } = labels.reduce((acc, l) => {
             var _a, _b;
             if (labelWrapper) {
@@ -97,9 +102,9 @@ export function getLabelsSize({ labels, style, rotation, html, }) {
                 .attr('text-anchor', rotation > 0 ? 'start' : 'end')
                 .style('transform', `rotate(${rotation}deg)`);
         }
-        const rect = (_a = svg.select('g').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        result.maxWidth = (_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0;
-        result.maxHeight = (_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0;
+        const rect = (_c = svg.select('g').node()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+        result.maxWidth = (_d = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _d !== void 0 ? _d : 0;
+        result.maxHeight = (_e = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _e !== void 0 ? _e : 0;
     }
     container.remove();
     return result;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",