@gravity-ui/charts 1.2.0 → 1.3.1

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

@@ -114,6 +114,7 @@ function renderLegendSymbol(args) {
             }
             case 'symbol': {
                 const y = legend.lineHeight / 2;
+                const translateX = x + d.symbol.width / 2;
                 element
                     .append('svg:path')
                     .attr('d', () => {
@@ -123,7 +124,7 @@ function renderLegendSymbol(args) {
                     return symbol(scatterSymbol, d.symbol.width * d.symbol.width)();
                 })
                     .attr('transform', () => {
-                    return 'translate(' + x + ',' + y + ')';
+                    return 'translate(' + translateX + ',' + y + ')';
                 })
                     .attr('class', className)
                     .style('fill', color);
@@ -190,16 +191,27 @@ export const Legend = (props) => {
                 })
                     .style('font-size', legend.itemStyle.fontSize);
                 const contentWidth = ((_a = legendLine.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
-                const { left } = getLegendPosition({
-                    align: legend.align,
-                    width: boundsWidth,
-                    offsetWidth: 0,
-                    contentWidth,
-                });
+                let left = 0;
+                switch (legend.justifyContent) {
+                    case 'center': {
+                        const legendLinePostion = getLegendPosition({
+                            align: legend.align,
+                            width: boundsWidth,
+                            offsetWidth: 0,
+                            contentWidth,
+                        });
+                        left = legendLinePostion.left;
+                        legendWidth = boundsWidth;
+                        break;
+                    }
+                    case 'start': {
+                        legendWidth = Math.max(legendWidth, contentWidth);
+                        break;
+                    }
+                }
                 const top = legend.lineHeight * lineIndex;
                 legendLine.attr('transform', `translate(${[left, top].join(',')})`);
             });
-            legendWidth = boundsWidth;
             if (config.pagination) {
                 const transform = `translate(${[
                     0,

package/dist/cjs/constants/defaults/legend.d.ts

@@ -1,6 +1,7 @@
 import type { ChartLegend } from '../../types';
 export declare const legendDefaults: {
     align: Required<ChartLegend>["align"];
+    justifyContent: Required<ChartLegend>["justifyContent"];
     itemDistance: number;
     margin: number;
     itemStyle: {

package/dist/cjs/constants/defaults/legend.js

@@ -1,5 +1,6 @@
 export const legendDefaults = {
     align: 'center',
+    justifyContent: 'center',
     itemDistance: 20,
     margin: 15,
     itemStyle: {

package/dist/cjs/hooks/useChartOptions/y-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, DashStyle, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, wrapText, } from '../../utils';
+import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 const getAxisLabelMaxWidth = (args) => {
     const { axis, series } = args;
@@ -45,6 +45,10 @@ function getAxisMin(axis, series) {
 export const getPreparedYAxis = ({ series, yAxis, height, }) => {
     const axisByPlot = [];
     const axisItems = yAxis || [{}];
+    const hasAxisRelatedSeries = series.some(isAxisRelatedSeries);
+    if (!hasAxisRelatedSeries) {
+        return [];
+    }
     return axisItems.map((axisItem) => {
         const plotIndex = get(axisItem, 'plotIndex', 0);
         const firstPlotAxis = !axisByPlot[plotIndex];

package/dist/cjs/hooks/useSeries/prepare-legend.js

@@ -50,6 +50,7 @@ export const getPreparedLegend = (args) => {
     const legendWidth = get(legend, 'width', CONTINUOUS_LEGEND_SIZE.width);
     return {
         align: get(legend, 'align', legendDefaults.align),
+        justifyContent: get(legend, 'justifyContent', legendDefaults.justifyContent),
         enabled,
         height,
         itemDistance: get(legend, 'itemDistance', legendDefaults.itemDistance),

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

@@ -17,8 +17,13 @@ const getCenter = (boundsWidth, boundsHeight, center) => {
 };
 export function preparePieData(args) {
     const { series: preparedSeries, boundsWidth, boundsHeight } = args;
-    const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;
+    const haloSize = preparedSeries[0].states.hover.halo.enabled
+        ? preparedSeries[0].states.hover.halo.size
+        : 0;
+    const maxRadius = Math.min(boundsWidth, boundsHeight) / 2 - haloSize;
+    const minRadius = maxRadius * 0.3;
     const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
+    let maxMissingWidth = 0;
     const prepareItem = (stackId, items) => {
         var _a;
         const series = items[0];
@@ -170,12 +175,16 @@ export function preparePieData(args) {
             if (dataLabels.allowOverlap || !overlap) {
                 const left = getLeftPosition(label);
                 if (Math.abs(left) > boundsWidth / 2) {
-                    label.maxWidth = label.size.width - (Math.abs(left) - boundsWidth / 2);
+                    const overflow = Math.abs(left) - boundsWidth / 2;
+                    label.maxWidth = label.size.width - overflow;
+                    maxMissingWidth = Math.max(maxMissingWidth, overflow);
                 }
                 else {
                     const right = left + label.size.width;
                     if (right > boundsWidth / 2) {
-                        label.maxWidth = label.size.width - (right - boundsWidth / 2);
+                        const overflow = right - boundsWidth / 2;
+                        label.maxWidth = label.size.width - overflow;
+                        maxMissingWidth = Math.max(maxMissingWidth, overflow);
                     }
                 }
                 if (shouldUseHtml) {
@@ -210,19 +219,20 @@ export function preparePieData(args) {
             series: items,
         });
         const segmentMaxRadius = Math.max(...data.segments.map((s) => s.data.radius));
-        const top = Math.min(data.center[1] - segmentMaxRadius, ...preparedLabels.labels.map((l) => l.y + data.center[1]), ...preparedLabels.htmlLabels.map((l) => l.y));
+        const topAdjustment = Math.min(data.center[1] - segmentMaxRadius, ...preparedLabels.labels.map((l) => l.y + data.center[1]), ...preparedLabels.htmlLabels.map((l) => l.y));
         const bottom = Math.max(data.center[1] + segmentMaxRadius, ...preparedLabels.labels.map((l) => l.y + data.center[1] + l.size.height), ...preparedLabels.htmlLabels.map((l) => l.y + l.size.height));
-        const topAdjustment = Math.floor(top - data.halo.size);
         if (topAdjustment > 0) {
             data.segments.forEach((s) => {
-                s.data.radius += topAdjustment / 2;
+                const nextPossibleRadius = s.data.radius + topAdjustment / 2;
+                s.data.radius = Math.min(nextPossibleRadius, maxRadius);
             });
             data.center[1] -= topAdjustment / 2;
         }
-        const bottomAdjustment = Math.floor(boundsHeight - bottom - data.halo.size);
+        const bottomAdjustment = Math.floor(boundsHeight - bottom);
         if (bottomAdjustment > 0) {
             data.segments.forEach((s) => {
-                s.data.radius += bottomAdjustment / 2;
+                const nextPossibleRadius = s.data.radius + bottomAdjustment / 2;
+                s.data.radius = Math.min(nextPossibleRadius, maxRadius);
             });
             data.center[1] += bottomAdjustment / 2;
         }
@@ -233,6 +243,18 @@ export function preparePieData(args) {
         data.labels = labels;
         data.htmlLabels = htmlLabels;
         data.connectors = connectors;
+        if (maxMissingWidth > 0) {
+            const { dataLabels } = items[0];
+            if (dataLabels.enabled) {
+                data.segments.forEach((s) => {
+                    s.data.radius = Math.max(minRadius, s.data.radius - maxMissingWidth);
+                });
+                const finalLabels = prepareLabels({ data, series: items });
+                data.labels = finalLabels.labels;
+                data.htmlLabels = finalLabels.htmlLabels;
+                data.connectors = finalLabels.connectors;
+            }
+        }
         return data;
     });
 }

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

@@ -10,23 +10,28 @@ function getLabels(args) {
         texts.forEach((text, index) => {
             var _a;
             const label = getFormattedValue(Object.assign({ value: text }, args.options));
-            const { maxHeight: lineHeight, maxWidth: labelWidth } = (_a = getLabelsSize({ labels: [label], html })) !== null && _a !== void 0 ? _a : {};
+            const { maxHeight: lineHeight, maxWidth: labelMaxWidth } = (_a = getLabelsSize({ labels: [label], html })) !== null && _a !== void 0 ? _a : {};
             const left = d.x0 + padding;
             const right = d.x1 - padding;
-            const width = Math.max(0, right - left);
+            const spaceWidth = Math.max(0, right - left);
+            const spaceHeight = Math.max(0, d.y1 - d.y0 - padding);
             let x = left;
             const y = index * lineHeight + d.y0 + padding;
+            const labelWidth = Math.min(labelMaxWidth, spaceWidth);
+            if (!labelWidth || lineHeight > spaceHeight) {
+                return;
+            }
             switch (align) {
                 case 'left': {
                     x = left;
                     break;
                 }
                 case 'center': {
-                    x = Math.max(left, left + (width - labelWidth) / 2);
+                    x = Math.max(left, left + (spaceWidth - labelMaxWidth) / 2);
                     break;
                 }
                 case 'right': {
-                    x = Math.max(left, right - labelWidth);
+                    x = Math.max(left, right - labelMaxWidth);
                     break;
                 }
             }
@@ -35,13 +40,13 @@ function getLabels(args) {
                     content: label,
                     x,
                     y,
-                    size: { width, height: lineHeight },
+                    size: { width: labelWidth, height: lineHeight },
                 }
                 : {
                     text: label,
                     x,
                     y,
-                    width,
+                    width: labelWidth,
                     nodeData: d.data,
                 };
             acc.push(item);

package/dist/cjs/types/chart/legend.d.ts

@@ -15,6 +15,12 @@ export interface ChartLegend {
      * @default center
      * */
     align?: 'left' | 'center' | 'right';
+    /**
+     * Defines how items should be positioned in the legend when overflowing (moving to the next line).
+     *
+     * @default center
+     * */
+    justifyContent?: 'start' | 'center';
     /**
      * Defines the pixel distance between each legend item
      *

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

@@ -60,7 +60,7 @@ function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
         .append('tspan')
         .attr('x', 0)
         .attr('dy', 0)
-        .text((d) => d);
+        .html((d) => d);
     return text;
 }
 export function getLabelsSize({ labels, style, rotation, html, }) {

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

@@ -114,6 +114,7 @@ function renderLegendSymbol(args) {
             }
             case 'symbol': {
                 const y = legend.lineHeight / 2;
+                const translateX = x + d.symbol.width / 2;
                 element
                     .append('svg:path')
                     .attr('d', () => {
@@ -123,7 +124,7 @@ function renderLegendSymbol(args) {
                     return symbol(scatterSymbol, d.symbol.width * d.symbol.width)();
                 })
                     .attr('transform', () => {
-                    return 'translate(' + x + ',' + y + ')';
+                    return 'translate(' + translateX + ',' + y + ')';
                 })
                     .attr('class', className)
                     .style('fill', color);
@@ -190,16 +191,27 @@ export const Legend = (props) => {
                 })
                     .style('font-size', legend.itemStyle.fontSize);
                 const contentWidth = ((_a = legendLine.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
-                const { left } = getLegendPosition({
-                    align: legend.align,
-                    width: boundsWidth,
-                    offsetWidth: 0,
-                    contentWidth,
-                });
+                let left = 0;
+                switch (legend.justifyContent) {
+                    case 'center': {
+                        const legendLinePostion = getLegendPosition({
+                            align: legend.align,
+                            width: boundsWidth,
+                            offsetWidth: 0,
+                            contentWidth,
+                        });
+                        left = legendLinePostion.left;
+                        legendWidth = boundsWidth;
+                        break;
+                    }
+                    case 'start': {
+                        legendWidth = Math.max(legendWidth, contentWidth);
+                        break;
+                    }
+                }
                 const top = legend.lineHeight * lineIndex;
                 legendLine.attr('transform', `translate(${[left, top].join(',')})`);
             });
-            legendWidth = boundsWidth;
             if (config.pagination) {
                 const transform = `translate(${[
                     0,

package/dist/esm/constants/defaults/legend.d.ts

@@ -1,6 +1,7 @@
 import type { ChartLegend } from '../../types';
 export declare const legendDefaults: {
     align: Required<ChartLegend>["align"];
+    justifyContent: Required<ChartLegend>["justifyContent"];
     itemDistance: number;
     margin: number;
     itemStyle: {

package/dist/esm/constants/defaults/legend.js

@@ -1,5 +1,6 @@
 export const legendDefaults = {
     align: 'center',
+    justifyContent: 'center',
     itemDistance: 20,
     margin: 15,
     itemStyle: {

package/dist/esm/hooks/useChartOptions/y-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, DashStyle, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, wrapText, } from '../../utils';
+import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 const getAxisLabelMaxWidth = (args) => {
     const { axis, series } = args;
@@ -45,6 +45,10 @@ function getAxisMin(axis, series) {
 export const getPreparedYAxis = ({ series, yAxis, height, }) => {
     const axisByPlot = [];
     const axisItems = yAxis || [{}];
+    const hasAxisRelatedSeries = series.some(isAxisRelatedSeries);
+    if (!hasAxisRelatedSeries) {
+        return [];
+    }
     return axisItems.map((axisItem) => {
         const plotIndex = get(axisItem, 'plotIndex', 0);
         const firstPlotAxis = !axisByPlot[plotIndex];

package/dist/esm/hooks/useSeries/prepare-legend.js

@@ -50,6 +50,7 @@ export const getPreparedLegend = (args) => {
     const legendWidth = get(legend, 'width', CONTINUOUS_LEGEND_SIZE.width);
     return {
         align: get(legend, 'align', legendDefaults.align),
+        justifyContent: get(legend, 'justifyContent', legendDefaults.justifyContent),
         enabled,
         height,
         itemDistance: get(legend, 'itemDistance', legendDefaults.itemDistance),

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

@@ -17,8 +17,13 @@ const getCenter = (boundsWidth, boundsHeight, center) => {
 };
 export function preparePieData(args) {
     const { series: preparedSeries, boundsWidth, boundsHeight } = args;
-    const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;
+    const haloSize = preparedSeries[0].states.hover.halo.enabled
+        ? preparedSeries[0].states.hover.halo.size
+        : 0;
+    const maxRadius = Math.min(boundsWidth, boundsHeight) / 2 - haloSize;
+    const minRadius = maxRadius * 0.3;
     const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
+    let maxMissingWidth = 0;
     const prepareItem = (stackId, items) => {
         var _a;
         const series = items[0];
@@ -170,12 +175,16 @@ export function preparePieData(args) {
             if (dataLabels.allowOverlap || !overlap) {
                 const left = getLeftPosition(label);
                 if (Math.abs(left) > boundsWidth / 2) {
-                    label.maxWidth = label.size.width - (Math.abs(left) - boundsWidth / 2);
+                    const overflow = Math.abs(left) - boundsWidth / 2;
+                    label.maxWidth = label.size.width - overflow;
+                    maxMissingWidth = Math.max(maxMissingWidth, overflow);
                 }
                 else {
                     const right = left + label.size.width;
                     if (right > boundsWidth / 2) {
-                        label.maxWidth = label.size.width - (right - boundsWidth / 2);
+                        const overflow = right - boundsWidth / 2;
+                        label.maxWidth = label.size.width - overflow;
+                        maxMissingWidth = Math.max(maxMissingWidth, overflow);
                     }
                 }
                 if (shouldUseHtml) {
@@ -210,19 +219,20 @@ export function preparePieData(args) {
             series: items,
         });
         const segmentMaxRadius = Math.max(...data.segments.map((s) => s.data.radius));
-        const top = Math.min(data.center[1] - segmentMaxRadius, ...preparedLabels.labels.map((l) => l.y + data.center[1]), ...preparedLabels.htmlLabels.map((l) => l.y));
+        const topAdjustment = Math.min(data.center[1] - segmentMaxRadius, ...preparedLabels.labels.map((l) => l.y + data.center[1]), ...preparedLabels.htmlLabels.map((l) => l.y));
         const bottom = Math.max(data.center[1] + segmentMaxRadius, ...preparedLabels.labels.map((l) => l.y + data.center[1] + l.size.height), ...preparedLabels.htmlLabels.map((l) => l.y + l.size.height));
-        const topAdjustment = Math.floor(top - data.halo.size);
         if (topAdjustment > 0) {
             data.segments.forEach((s) => {
-                s.data.radius += topAdjustment / 2;
+                const nextPossibleRadius = s.data.radius + topAdjustment / 2;
+                s.data.radius = Math.min(nextPossibleRadius, maxRadius);
             });
             data.center[1] -= topAdjustment / 2;
         }
-        const bottomAdjustment = Math.floor(boundsHeight - bottom - data.halo.size);
+        const bottomAdjustment = Math.floor(boundsHeight - bottom);
         if (bottomAdjustment > 0) {
             data.segments.forEach((s) => {
-                s.data.radius += bottomAdjustment / 2;
+                const nextPossibleRadius = s.data.radius + bottomAdjustment / 2;
+                s.data.radius = Math.min(nextPossibleRadius, maxRadius);
             });
             data.center[1] += bottomAdjustment / 2;
         }
@@ -233,6 +243,18 @@ export function preparePieData(args) {
         data.labels = labels;
         data.htmlLabels = htmlLabels;
         data.connectors = connectors;
+        if (maxMissingWidth > 0) {
+            const { dataLabels } = items[0];
+            if (dataLabels.enabled) {
+                data.segments.forEach((s) => {
+                    s.data.radius = Math.max(minRadius, s.data.radius - maxMissingWidth);
+                });
+                const finalLabels = prepareLabels({ data, series: items });
+                data.labels = finalLabels.labels;
+                data.htmlLabels = finalLabels.htmlLabels;
+                data.connectors = finalLabels.connectors;
+            }
+        }
         return data;
     });
 }

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

@@ -10,23 +10,28 @@ function getLabels(args) {
         texts.forEach((text, index) => {
             var _a;
             const label = getFormattedValue(Object.assign({ value: text }, args.options));
-            const { maxHeight: lineHeight, maxWidth: labelWidth } = (_a = getLabelsSize({ labels: [label], html })) !== null && _a !== void 0 ? _a : {};
+            const { maxHeight: lineHeight, maxWidth: labelMaxWidth } = (_a = getLabelsSize({ labels: [label], html })) !== null && _a !== void 0 ? _a : {};
             const left = d.x0 + padding;
             const right = d.x1 - padding;
-            const width = Math.max(0, right - left);
+            const spaceWidth = Math.max(0, right - left);
+            const spaceHeight = Math.max(0, d.y1 - d.y0 - padding);
             let x = left;
             const y = index * lineHeight + d.y0 + padding;
+            const labelWidth = Math.min(labelMaxWidth, spaceWidth);
+            if (!labelWidth || lineHeight > spaceHeight) {
+                return;
+            }
             switch (align) {
                 case 'left': {
                     x = left;
                     break;
                 }
                 case 'center': {
-                    x = Math.max(left, left + (width - labelWidth) / 2);
+                    x = Math.max(left, left + (spaceWidth - labelMaxWidth) / 2);
                     break;
                 }
                 case 'right': {
-                    x = Math.max(left, right - labelWidth);
+                    x = Math.max(left, right - labelMaxWidth);
                     break;
                 }
             }
@@ -35,13 +40,13 @@ function getLabels(args) {
                     content: label,
                     x,
                     y,
-                    size: { width, height: lineHeight },
+                    size: { width: labelWidth, height: lineHeight },
                 }
                 : {
                     text: label,
                     x,
                     y,
-                    width,
+                    width: labelWidth,
                     nodeData: d.data,
                 };
             acc.push(item);

package/dist/esm/types/chart/legend.d.ts

@@ -15,6 +15,12 @@ export interface ChartLegend {
      * @default center
      * */
     align?: 'left' | 'center' | 'right';
+    /**
+     * Defines how items should be positioned in the legend when overflowing (moving to the next line).
+     *
+     * @default center
+     * */
+    justifyContent?: 'start' | 'center';
     /**
      * Defines the pixel distance between each legend item
      *

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

@@ -60,7 +60,7 @@ function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
         .append('tspan')
         .attr('x', 0)
         .attr('dy', 0)
-        .text((d) => d);
+        .html((d) => d);
     return text;
 }
 export function getLabelsSize({ labels, style, rotation, html, }) {

package/package.json

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