@gravity-ui/chartkit 5.16.0 → 5.17.0

package/build/plugins/d3/renderer/hooks/useSeries/prepare-treemap.js

@@ -18,7 +18,8 @@ export function prepareTreemap(args) {
                 style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_a = s.dataLabels) === null || _a === void 0 ? void 0 : _a.style),
                 padding: get(s, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
                 allowOverlap: get(s, 'dataLabels.allowOverlap', false),
-                html: get(series, 'dataLabels.html', false),
+                html: get(s, 'dataLabels.html', false),
+                align: get(s, 'dataLabels.align', 'left'),
             },
             id,
             type: s.type,

package/build/plugins/d3/renderer/hooks/useSeries/types.d.ts

@@ -231,6 +231,7 @@ export type PreparedTreemapSeries = {
         padding: number;
         allowOverlap: boolean;
         html: boolean;
+        align: Required<Required<TreemapSeries>['dataLabels']>['align'];
     };
     layoutAlgorithm: `${LayoutAlgorithm}`;
 } & BasePreparedSeries & Omit<TreemapSeries, keyof BasePreparedSeries>;

package/build/plugins/d3/renderer/hooks/useShapes/treemap/prepare-data.js

@@ -1,24 +1,62 @@
 import { stratify, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3';
 import { LayoutAlgorithm } from '../../../../../../constants';
+import { getLabelsSize } from '../../../utils';
 const DEFAULT_PADDING = 1;
-function getLabelData(data) {
-    return data.map((d) => {
-        const text = d.data.name;
-        return {
-            text,
-            x: d.x0,
-            y: d.y0,
-            width: d.x1 - d.x0,
-            nodeData: d.data,
-        };
-    });
+function getLabels(args) {
+    const { data, html, padding, align } = 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 { maxHeight: lineHeight, maxWidth: labelWidth } = (_a = getLabelsSize({ labels: [text], html })) !== null && _a !== void 0 ? _a : {};
+            const left = d.x0 + padding;
+            const right = d.x1 - padding;
+            const width = Math.max(0, right - left);
+            let x = left;
+            const y = index * lineHeight + d.y0 + padding;
+            switch (align) {
+                case 'left': {
+                    x = left;
+                    break;
+                }
+                case 'center': {
+                    x = Math.max(left, left + (width - labelWidth) / 2);
+                    break;
+                }
+                case 'right': {
+                    x = Math.max(left, right - labelWidth);
+                    break;
+                }
+            }
+            const item = html
+                ? {
+                    content: text,
+                    x,
+                    y,
+                }
+                : {
+                    text,
+                    x,
+                    y,
+                    width,
+                    nodeData: d.data,
+                };
+            acc.push(item);
+        });
+        return acc;
+    }, []);
 }
 export function prepareTreemapData(args) {
     var _a;
     const { series, width, height } = args;
     const dataWithRootNode = getSeriesDataWithRootNode(series);
     const hierarchy = stratify()
-        .id((d) => d.id || d.name)
+        .id((d) => {
+        if (d.id) {
+            return d.id;
+        }
+        return Array.isArray(d.name) ? d.name.join() : d.name;
+    })
         .parentId((d) => d.parentId)(dataWithRootNode)
         .sum((d) => d.value || 0);
     const treemapInstance = treemap();
@@ -50,8 +88,19 @@ export function prepareTreemapData(args) {
         return (_b = levelOptions === null || levelOptions === void 0 ? void 0 : levelOptions.padding) !== null && _b !== void 0 ? _b : DEFAULT_PADDING;
     })(hierarchy);
     const leaves = root.leaves();
-    const labelData = ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) ? getLabelData(leaves) : [];
-    return { labelData, leaves, series, htmlElements: [] };
+    let labelData = [];
+    const htmlElements = [];
+    if ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) {
+        const { html, padding, align } = series.dataLabels;
+        const labels = getLabels({ html, padding, align, data: leaves });
+        if (html) {
+            htmlElements.push(...labels);
+        }
+        else {
+            labelData = labels;
+        }
+    }
+    return { labelData, leaves, series, htmlElements };
 }
 function getSeriesDataWithRootNode(series) {
     return series.data.reduce((acc, d) => {

package/build/plugins/d3/renderer/validation/index.js

@@ -126,7 +126,10 @@ const validateTreemapSeries = ({ series }) => {
         }
     });
     series.data.forEach((d) => {
-        const idOrName = d.id || d.name;
+        let idOrName = d.id;
+        if (!idOrName) {
+            idOrName = Array.isArray(d.name) ? d.name.join() : d.name;
+        }
         if (parentIds[idOrName] && typeof d.value === 'number') {
             throw new ChartKitError({
                 code: CHARTKIT_ERROR_CODE.INVALID_DATA,

package/build/types/widget-data/base.d.ts

@@ -3,8 +3,6 @@ export type BaseSeries = {
     visible?: boolean;
     /**
      * Options for the series data labels, appearing next to each data point.
-     *
-     * Note: now this option is supported only for `pie` charts.
      * */
     dataLabels?: {
         /**

package/build/types/widget-data/treemap.d.ts

@@ -3,7 +3,7 @@ import type { BaseSeries, BaseSeriesData } from './base';
 import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
 export type TreemapSeriesData<T = any> = BaseSeriesData<T> & {
     /** The name of the node (used in legend, tooltip etc). */
-    name: string;
+    name: string | string[];
     /** The value of the node. All nodes should have this property except nodes that have children. */
     value?: number;
     /** An id for the node. Used to group children. */
@@ -35,4 +35,11 @@ export type TreemapSeries<T = any> = BaseSeries & {
         color?: string;
     }[];
     layoutAlgorithm?: `${LayoutAlgorithm}`;
+    /**
+     * Options for the series data labels, appearing next to each data point.
+     * */
+    dataLabels?: BaseSeries['dataLabels'] & {
+        /** Horizontal alignment of the data label inside the tile. */
+        align?: 'left' | 'center' | 'right';
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "5.16.0",
+  "version": "5.17.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",