@gravity-ui/charts 1.6.3 → 1.6.5

package/dist/cjs/components/Axis/styles.css

@@ -3,15 +3,15 @@
 }
 .gcharts-axis .tick text {
   color: var(--g-color-text-secondary);
-  alignment-baseline: after-edge;
+  dominant-baseline: text-after-edge;
 }
 .gcharts-axis .tick line, .gcharts-axis .tick path {
   stroke: var(--g-color-line-generic);
 }
 .gcharts-axis__title {
-  alignment-baseline: after-edge;
+  dominant-baseline: text-after-edge;
   fill: var(--g-color-text-secondary);
 }
 .gcharts-axis__title tspan {
-  alignment-baseline: after-edge;
+  dominant-baseline: text-after-edge;
 }

package/dist/cjs/components/ChartInner/styles.css

@@ -3,6 +3,7 @@
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
+  display: flex;
 }
 .gcharts-chart__html-layer {
   display: contents;

package/dist/cjs/components/Legend/index.js

@@ -294,7 +294,7 @@ export const Legend = (props) => {
                 .attr('font-weight', (_c = legend.title.style.fontWeight) !== null && _c !== void 0 ? _c : null)
                 .attr('font-size', (_d = legend.title.style.fontSize) !== null && _d !== void 0 ? _d : null)
                 .attr('fill', (_e = legend.title.style.fontColor) !== null && _e !== void 0 ? _e : null)
-                .style('alignment-baseline', 'before-edge')
+                .style('dominant-baseline', 'text-before-edge')
                 .html(legend.title.text);
         }
         const { left } = getLegendPosition({

package/dist/cjs/components/Legend/styles.css

@@ -19,7 +19,7 @@
 }
 .gcharts-legend__item-text {
   fill: var(--g-color-text-secondary);
-  alignment-baseline: before-edge;
+  dominant-baseline: text-before-edge;
 }
 .gcharts-legend__item-text_unselected {
   fill: var(--g-color-text-hint);
@@ -32,7 +32,7 @@
   fill: var(--g-color-text-primary);
 }
 .gcharts-legend__pagination-counter, .gcharts-legend__pagination-arrow {
-  alignment-baseline: middle;
+  dominant-baseline: middle;
 }
 .gcharts-legend__pagination-arrow {
   cursor: pointer;

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

@@ -147,7 +147,7 @@ export function PieSeriesShapes(args) {
                     });
                     return d;
                 });
-                const labelSelection = pieSelection.selectAll('tspan');
+                const labelSelection = pieSelection.selectAll(`.${b('label')} tspan`);
                 const connectorSelection = pieSelection.selectAll(connectorSelector);
                 labelSelection.merge(connectorSelection).datum((d, i, elements) => {
                     return setActiveState({

package/dist/cjs/hooks/useShapes/styles.css

@@ -9,11 +9,11 @@
   font-size: 11px;
   font-weight: bold;
   fill: var(--g-color-text-complementary);
-  alignment-baseline: before-edge;
+  dominant-baseline: text-before-edge;
 }
 
 .gcharts-radar__label {
-  alignment-baseline: before-edge;
+  dominant-baseline: text-before-edge;
 }
 
 .gcharts-bar-x__label {
@@ -24,14 +24,14 @@
 .gcharts-bar-y__label {
   user-select: none;
   fill: var(--g-color-text-complementary);
-  alignment-baseline: after-edge;
+  dominant-baseline: text-after-edge;
 }
 
 .gcharts-treemap__label {
   user-select: none;
   pointer-events: none;
   fill: var(--g-color-text-complementary);
-  alignment-baseline: text-before-edge;
+  dominant-baseline: text-before-edge;
 }
 
 .gcharts-waterfall__connector {

package/dist/cjs/utils/chart/axis-generators/bottom.js

@@ -63,7 +63,7 @@ export function axisBottom(args) {
                 return 'middle';
             })
                 .style('transform', transform)
-                .style('alignment-baseline', 'after-edge');
+                .style('dominant-baseline', 'text-after-edge');
             return tick;
         })
             .attr('transform', function (d) {

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

@@ -173,7 +173,7 @@ export const getHorisontalSvgTextHeight = (args) => {
     const textSelection = container.append('text').text(text);
     const fontSize = get(style, 'fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE);
     if (fontSize) {
-        textSelection.style('font-size', fontSize).style('alignment-baseline', 'after-edge');
+        textSelection.style('font-size', fontSize).style('dominant-baseline', 'text-after-edge');
     }
     const height = ((_a = textSelection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
     container.remove();

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

@@ -30,7 +30,7 @@ export function handleOverflowingText(tSpan, maxWidth) {
 export function setEllipsisForOverflowText(selection, maxWidth) {
     const text = selection.text();
     selection.text(null).append('title').text(text);
-    const tSpan = selection.append('tspan').text(text).style('alignment-baseline', 'inherit');
+    const tSpan = selection.append('tspan').text(text).style('dominant-baseline', 'inherit');
     handleOverflowingText(tSpan.node(), maxWidth);
 }
 export function setEllipsisForOverflowTexts(selection, maxWidth) {

package/dist/cjs/utils/chart-ui/pie-center-text.d.ts

@@ -1,8 +1,9 @@
 export declare function pieCenterText(text: string, options?: {
-    padding?: number;
+    padding?: string | number;
     color?: string;
+    minFontSize?: number;
 }): ((args: {
     series: {
         innerRadius: number;
     };
-}) => Element | null) | undefined;
+}) => SVGGElement | null) | undefined;

package/dist/cjs/utils/chart-ui/pie-center-text.js

@@ -1,29 +1,42 @@
-import { create } from 'd3-selection';
+import { select } from 'd3-selection';
 import get from 'lodash/get';
-import { getLabelsSize } from '../chart/text';
+import { calculateNumericProperty } from '../chart/math';
+import { getLabelsSize, handleOverflowingText } from '../chart/text';
 const MAX_FONT_SIZE = 64;
+const MIN_FONT_SIZE = 8;
 export function pieCenterText(text, options) {
     if (!text) {
         return undefined;
     }
-    const padding = get(options, 'padding', 12);
     const color = get(options, 'color', 'currentColor');
     return function (args) {
+        var _a, _b;
         let fontSize = MAX_FONT_SIZE;
         const textSize = getLabelsSize({ labels: [text], style: { fontSize: `${fontSize}px` } });
         let availableSpace = args.series.innerRadius * 2;
+        const padding = (_a = calculateNumericProperty({
+            base: availableSpace,
+            value: options === null || options === void 0 ? void 0 : options.padding,
+        })) !== null && _a !== void 0 ? _a : 12;
         if (padding < args.series.innerRadius) {
             availableSpace -= padding * 2;
         }
-        fontSize = (fontSize * availableSpace) / textSize.maxWidth;
-        const container = create('svg:g');
-        container
+        fontSize = Math.max((_b = options === null || options === void 0 ? void 0 : options.minFontSize) !== null && _b !== void 0 ? _b : MIN_FONT_SIZE, (fontSize * availableSpace) / Math.max(textSize.maxWidth, textSize.maxHeight));
+        const tempWrapper = select(document.body).append('svg');
+        const container = tempWrapper.append('g');
+        const textSelection = container
             .append('text')
-            .text(text)
-            .attr('text-anchor', 'middle')
-            .attr('alignment-baseline', 'middle')
             .style('font-size', `${fontSize}px`)
             .style('fill', color);
-        return container.node();
+        textSelection.append('title').text(text);
+        const tspan = textSelection
+            .append('tspan')
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .text(text);
+        handleOverflowingText(tspan.node(), availableSpace);
+        const result = container.node();
+        tempWrapper.remove();
+        return result;
     };
 }

package/dist/esm/components/Axis/styles.css

@@ -3,15 +3,15 @@
 }
 .gcharts-axis .tick text {
   color: var(--g-color-text-secondary);
-  alignment-baseline: after-edge;
+  dominant-baseline: text-after-edge;
 }
 .gcharts-axis .tick line, .gcharts-axis .tick path {
   stroke: var(--g-color-line-generic);
 }
 .gcharts-axis__title {
-  alignment-baseline: after-edge;
+  dominant-baseline: text-after-edge;
   fill: var(--g-color-text-secondary);
 }
 .gcharts-axis__title tspan {
-  alignment-baseline: after-edge;
+  dominant-baseline: text-after-edge;
 }

package/dist/esm/components/ChartInner/styles.css

@@ -3,6 +3,7 @@
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
+  display: flex;
 }
 .gcharts-chart__html-layer {
   display: contents;

package/dist/esm/components/Legend/index.js

@@ -294,7 +294,7 @@ export const Legend = (props) => {
                 .attr('font-weight', (_c = legend.title.style.fontWeight) !== null && _c !== void 0 ? _c : null)
                 .attr('font-size', (_d = legend.title.style.fontSize) !== null && _d !== void 0 ? _d : null)
                 .attr('fill', (_e = legend.title.style.fontColor) !== null && _e !== void 0 ? _e : null)
-                .style('alignment-baseline', 'before-edge')
+                .style('dominant-baseline', 'text-before-edge')
                 .html(legend.title.text);
         }
         const { left } = getLegendPosition({

package/dist/esm/components/Legend/styles.css

@@ -19,7 +19,7 @@
 }
 .gcharts-legend__item-text {
   fill: var(--g-color-text-secondary);
-  alignment-baseline: before-edge;
+  dominant-baseline: text-before-edge;
 }
 .gcharts-legend__item-text_unselected {
   fill: var(--g-color-text-hint);
@@ -32,7 +32,7 @@
   fill: var(--g-color-text-primary);
 }
 .gcharts-legend__pagination-counter, .gcharts-legend__pagination-arrow {
-  alignment-baseline: middle;
+  dominant-baseline: middle;
 }
 .gcharts-legend__pagination-arrow {
   cursor: pointer;

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

@@ -147,7 +147,7 @@ export function PieSeriesShapes(args) {
                     });
                     return d;
                 });
-                const labelSelection = pieSelection.selectAll('tspan');
+                const labelSelection = pieSelection.selectAll(`.${b('label')} tspan`);
                 const connectorSelection = pieSelection.selectAll(connectorSelector);
                 labelSelection.merge(connectorSelection).datum((d, i, elements) => {
                     return setActiveState({

package/dist/esm/hooks/useShapes/styles.css

@@ -9,11 +9,11 @@
   font-size: 11px;
   font-weight: bold;
   fill: var(--g-color-text-complementary);
-  alignment-baseline: before-edge;
+  dominant-baseline: text-before-edge;
 }
 
 .gcharts-radar__label {
-  alignment-baseline: before-edge;
+  dominant-baseline: text-before-edge;
 }
 
 .gcharts-bar-x__label {
@@ -24,14 +24,14 @@
 .gcharts-bar-y__label {
   user-select: none;
   fill: var(--g-color-text-complementary);
-  alignment-baseline: after-edge;
+  dominant-baseline: text-after-edge;
 }
 
 .gcharts-treemap__label {
   user-select: none;
   pointer-events: none;
   fill: var(--g-color-text-complementary);
-  alignment-baseline: text-before-edge;
+  dominant-baseline: text-before-edge;
 }
 
 .gcharts-waterfall__connector {

package/dist/esm/utils/chart/axis-generators/bottom.js

@@ -63,7 +63,7 @@ export function axisBottom(args) {
                 return 'middle';
             })
                 .style('transform', transform)
-                .style('alignment-baseline', 'after-edge');
+                .style('dominant-baseline', 'text-after-edge');
             return tick;
         })
             .attr('transform', function (d) {

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

@@ -173,7 +173,7 @@ export const getHorisontalSvgTextHeight = (args) => {
     const textSelection = container.append('text').text(text);
     const fontSize = get(style, 'fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE);
     if (fontSize) {
-        textSelection.style('font-size', fontSize).style('alignment-baseline', 'after-edge');
+        textSelection.style('font-size', fontSize).style('dominant-baseline', 'text-after-edge');
     }
     const height = ((_a = textSelection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
     container.remove();

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

@@ -30,7 +30,7 @@ export function handleOverflowingText(tSpan, maxWidth) {
 export function setEllipsisForOverflowText(selection, maxWidth) {
     const text = selection.text();
     selection.text(null).append('title').text(text);
-    const tSpan = selection.append('tspan').text(text).style('alignment-baseline', 'inherit');
+    const tSpan = selection.append('tspan').text(text).style('dominant-baseline', 'inherit');
     handleOverflowingText(tSpan.node(), maxWidth);
 }
 export function setEllipsisForOverflowTexts(selection, maxWidth) {

package/dist/esm/utils/chart-ui/pie-center-text.d.ts

@@ -1,8 +1,9 @@
 export declare function pieCenterText(text: string, options?: {
-    padding?: number;
+    padding?: string | number;
     color?: string;
+    minFontSize?: number;
 }): ((args: {
     series: {
         innerRadius: number;
     };
-}) => Element | null) | undefined;
+}) => SVGGElement | null) | undefined;

package/dist/esm/utils/chart-ui/pie-center-text.js

@@ -1,29 +1,42 @@
-import { create } from 'd3-selection';
+import { select } from 'd3-selection';
 import get from 'lodash/get';
-import { getLabelsSize } from '../chart/text';
+import { calculateNumericProperty } from '../chart/math';
+import { getLabelsSize, handleOverflowingText } from '../chart/text';
 const MAX_FONT_SIZE = 64;
+const MIN_FONT_SIZE = 8;
 export function pieCenterText(text, options) {
     if (!text) {
         return undefined;
     }
-    const padding = get(options, 'padding', 12);
     const color = get(options, 'color', 'currentColor');
     return function (args) {
+        var _a, _b;
         let fontSize = MAX_FONT_SIZE;
         const textSize = getLabelsSize({ labels: [text], style: { fontSize: `${fontSize}px` } });
         let availableSpace = args.series.innerRadius * 2;
+        const padding = (_a = calculateNumericProperty({
+            base: availableSpace,
+            value: options === null || options === void 0 ? void 0 : options.padding,
+        })) !== null && _a !== void 0 ? _a : 12;
         if (padding < args.series.innerRadius) {
             availableSpace -= padding * 2;
         }
-        fontSize = (fontSize * availableSpace) / textSize.maxWidth;
-        const container = create('svg:g');
-        container
+        fontSize = Math.max((_b = options === null || options === void 0 ? void 0 : options.minFontSize) !== null && _b !== void 0 ? _b : MIN_FONT_SIZE, (fontSize * availableSpace) / Math.max(textSize.maxWidth, textSize.maxHeight));
+        const tempWrapper = select(document.body).append('svg');
+        const container = tempWrapper.append('g');
+        const textSelection = container
             .append('text')
-            .text(text)
-            .attr('text-anchor', 'middle')
-            .attr('alignment-baseline', 'middle')
             .style('font-size', `${fontSize}px`)
             .style('fill', color);
-        return container.node();
+        textSelection.append('title').text(text);
+        const tspan = textSelection
+            .append('tspan')
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .text(text);
+        handleOverflowingText(tspan.node(), availableSpace);
+        const result = container.node();
+        tempWrapper.remove();
+        return result;
     };
 }

package/package.json

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