@gravity-ui/chartkit 4.19.1 → 4.20.1

package/build/constants/widget-data.d.ts

@@ -5,6 +5,7 @@ export declare const SeriesType: {
     readonly Line: "line";
     readonly Pie: "pie";
     readonly Scatter: "scatter";
+    readonly Treemap: "treemap";
 };
 export declare enum DashStyle {
     Dash = "Dash",
@@ -32,3 +33,10 @@ export declare enum LineCap {
     Square = "square",
     None = "none"
 }
+export declare enum LayoutAlgorithm {
+    Binary = "binary",
+    Dice = "dice",
+    Slice = "slice",
+    SliceDice = "slice-dice",
+    Squarify = "squarify"
+}

package/build/constants/widget-data.js

@@ -5,6 +5,7 @@ export const SeriesType = {
     Line: 'line',
     Pie: 'pie',
     Scatter: 'scatter',
+    Treemap: 'treemap',
 };
 export var DashStyle;
 (function (DashStyle) {
@@ -35,3 +36,11 @@ export var LineCap;
     LineCap["Square"] = "square";
     LineCap["None"] = "none";
 })(LineCap || (LineCap = {}));
+export var LayoutAlgorithm;
+(function (LayoutAlgorithm) {
+    LayoutAlgorithm["Binary"] = "binary";
+    LayoutAlgorithm["Dice"] = "dice";
+    LayoutAlgorithm["Slice"] = "slice";
+    LayoutAlgorithm["SliceDice"] = "slice-dice";
+    LayoutAlgorithm["Squarify"] = "squarify";
+})(LayoutAlgorithm || (LayoutAlgorithm = {}));

package/build/i18n/keysets/en.json

@@ -34,7 +34,9 @@
     "label_invalid-axis-linear-data-point": "It seems you are trying to use inappropriate data type for \"{{key}}\" value in series \"{{seriesName}}\" for axis with type \"linear\". Numbers and nulls are allowed.",
     "label_invalid-pie-data-value": "It seems you are trying to use inappropriate data type for \"value\" value. Only numbers are allowed.",
     "label_invalid-series-type": "It seems you haven't defined \"series.type\" property, or defined it incorrectly. Available values: [{{types}}].",
-    "label_invalid-series-property": "It seems you are trying to use inappropriate value for \"{{key}}\", or defined it incorrectly. Available values: [{{values}}]."
+    "label_invalid-series-property": "It seems you are trying to use inappropriate value for \"{{key}}\", or defined it incorrectly. Available values: [{{values}}].",
+    "label_invalid-treemap-redundant-value": "It seems you are trying to set \"value\" for container node. Check node with this properties: { id: \"{{id}}\", name: \"{{name}}\" }",
+    "label_invalid-treemap-missing-value": "It seems you are trying to use node without \"value\". Check node with this properties: { id: \"{{id}}\", name: \"{{name}}\" }"
   },
   "highcharts": {
     "reset-zoom-title": "Reset zoom",

package/build/i18n/keysets/ru.json

@@ -36,7 +36,9 @@
     "label_invalid-axis-linear-data-point": "Похоже, что вы пытаетесь использовать недопустимый тип данных для значения \"{{key}}\" в серии \"{{seriesName}}\" для оси с типом \"linear\". Допускается использование чисел и значений null.",
     "label_invalid-pie-data-value": "Похоже, что вы пытаетесь использовать недопустимый тип данных для значения \"value\". Допускается только использование чисел.",
     "label_invalid-series-type": "Похоже, что вы не указали значение \"series.type\" или указали его неверно. Доступные значения: [{{types}}].",
-    "label_invalid-series-property": "Похоже, что вы пытаетесь использовать недопустимое значение для \"{{key}}\", или указали его неверно. Доступные значения: [{{values}}]."
+    "label_invalid-series-property": "Похоже, что вы пытаетесь использовать недопустимое значение для \"{{key}}\", или указали его неверно. Доступные значения: [{{values}}].",
+    "label_invalid-treemap-redundant-value": "Похоже, что вы пытаетесь установить значение \"value\" для узла, используемого в качестве контейнера. Проверьте узел с этими свойствами: { id: \"{{id}}\", name: \"{{name}}\" }",
+    "label_invalid-treemap-missing-value": "Похоже, что вы пытаетесь использовать узел без значения \"value\". Проверьте узел с этими свойствами: { id: \"{{id}}\", name: \"{{name}}\" }"
   },
   "highcharts": {
     "reset-zoom-title": "Сбросить увеличение",

package/build/plugins/d3/renderer/components/Chart.js

@@ -13,7 +13,6 @@ import { getPreparedYAxis } from '../hooks/useChartOptions/y-axis';
 import './styles.css';
 const b = block('d3');
 export const Chart = (props) => {
-    // FIXME: add data validation
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
     const dispatcher = React.useMemo(() => {

package/build/plugins/d3/renderer/components/Tooltip/DefaultContent.js

@@ -55,7 +55,8 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                             ": ",
                             xRow))));
             }
-            case 'pie': {
+            case 'pie':
+            case 'treemap': {
                 const pieSeriesData = data;
                 return (React.createElement("div", { key: id },
                     React.createElement("span", null,

package/build/plugins/d3/renderer/components/Tooltip/index.js

@@ -1,40 +1,16 @@
 import React from 'react';
 import isNil from 'lodash/isNil';
+import { Popup, useVirtualElementRef } from '@gravity-ui/uikit';
 import { block } from '../../../../../utils/cn';
 import { DefaultContent } from './DefaultContent';
 export * from './TooltipTriggerArea';
 const b = block('d3-tooltip');
-const POINTER_OFFSET_X = 20;
 export const Tooltip = (props) => {
-    const { tooltip, svgContainer, xAxis, yAxis, hovered, pointerPosition } = props;
-    const ref = React.useRef(null);
-    const size = React.useMemo(() => {
-        if (ref.current && hovered) {
-            const { width, height } = ref.current.getBoundingClientRect();
-            return { width, height };
-        }
-        return undefined;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [hovered, pointerPosition]);
-    const position = React.useMemo(() => {
-        if (hovered && pointerPosition && size) {
-            const { clientWidth } = document.documentElement;
-            const { width, height } = size;
-            const rect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
-            const [pointerLeft, pointetTop] = pointerPosition;
-            const outOfRightBoudary = pointerLeft + width + rect.left + POINTER_OFFSET_X >= clientWidth;
-            const outOfTopBoundary = pointetTop - height / 2 <= 0;
-            const left = outOfRightBoudary
-                ? pointerLeft - width - POINTER_OFFSET_X
-                : pointerLeft + POINTER_OFFSET_X;
-            const top = outOfTopBoundary ? 0 : pointetTop - height / 2;
-            return { left, top };
-        }
-        else if (hovered && pointerPosition) {
-            return { left: -1000, top: -1000 };
-        }
-        return undefined;
-    }, [hovered, pointerPosition, size, svgContainer]);
+    const { tooltip, xAxis, yAxis, hovered, svgContainer, pointerPosition } = props;
+    const containerRect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
+    const left = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) || 0) + containerRect.left;
+    const top = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[1]) || 0) + containerRect.top;
+    const anchorRef = useVirtualElementRef({ rect: { top, left } });
     const content = React.useMemo(() => {
         var _a;
         if (!hovered) {
@@ -43,14 +19,9 @@ export const Tooltip = (props) => {
         const customTooltip = (_a = tooltip.renderer) === null || _a === void 0 ? void 0 : _a.call(tooltip, { hovered });
         return isNil(customTooltip) ? (React.createElement(DefaultContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
     }, [hovered, tooltip, xAxis, yAxis]);
-    if (!position || !hovered) {
-        return null;
-    }
-    const { left, top } = position;
-    const style = {
-        position: 'absolute',
-        top,
-        left: left,
-    };
-    return (React.createElement("div", { ref: ref, className: b(), style: style }, content));
+    React.useEffect(() => {
+        window.dispatchEvent(new CustomEvent('scroll'));
+    }, [left, top]);
+    return hovered ? (React.createElement(Popup, { className: b(), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }] },
+        React.createElement("div", { className: b('content') }, content))) : null;
 };

package/build/plugins/d3/renderer/components/styles.css

@@ -75,13 +75,22 @@
   fill: var(--g-color-text-primary);
 }
 
-.chartkit-d3-tooltip {
-  position: absolute;
+.chartkit-d3-tooltip[class] {
+  --yc-popup-border-width: 0;
+  pointer-events: none;
+}
+
+.chartkit-d3-tooltip[class] > div {
+  animation-duration: unset;
+  animation-timing-function: unset;
+  animation-fill-mode: unset;
+}
+
+.chartkit-d3-tooltip__content {
   padding: 10px 14px;
   background-color: var(--g-color-infographics-tooltip-bg);
   border: 1px solid var(--g-color-line-generic);
   border-radius: 3px;
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
-  z-index: 100001;
   text-wrap: nowrap;
 }

package/build/plugins/d3/renderer/constants/defaults/series-options.js

@@ -77,4 +77,16 @@ export const seriesOptionsDefaults = {
             },
         },
     },
+    treemap: {
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: false,
+                opacity: 0.5,
+            },
+        },
+    },
 };

package/build/plugins/d3/renderer/hooks/useSeries/index.js

@@ -29,8 +29,7 @@ export const useSeries = (args) => {
     }, [seriesOptions]);
     const [activeLegendItems, setActiveLegendItems] = React.useState(getActiveLegendItems(preparedSeries));
     const chartSeries = React.useMemo(() => {
-        return preparedSeries.map((singleSeries, i) => {
-            singleSeries.id = `Series ${i + 1}`;
+        return preparedSeries.map((singleSeries) => {
             if (singleSeries.legend.enabled) {
                 return Object.assign(Object.assign({}, singleSeries), { visible: activeLegendItems.includes(singleSeries.name) });
             }
@@ -48,6 +47,7 @@ export const useSeries = (args) => {
         });
     }, [chartWidth, chartHeight, chartMargin, chartSeries, preparedLegend, preparedYAxis]);
     const handleLegendItemClick = React.useCallback(({ name, metaKey }) => {
+        const allItems = getAllLegendItems(preparedSeries);
         const onlyItemSelected = activeLegendItems.length === 1 && activeLegendItems.includes(name);
         let nextActiveLegendItems;
         if (metaKey && activeLegendItems.includes(name)) {
@@ -56,8 +56,11 @@ export const useSeries = (args) => {
         else if (metaKey && !activeLegendItems.includes(name)) {
             nextActiveLegendItems = activeLegendItems.concat(name);
         }
+        else if (onlyItemSelected && allItems.length === 1) {
+            nextActiveLegendItems = [];
+        }
         else if (onlyItemSelected) {
-            nextActiveLegendItems = getAllLegendItems(preparedSeries);
+            nextActiveLegendItems = allItems;
         }
         else {
             nextActiveLegendItems = [name];

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

@@ -10,7 +10,7 @@ export function preparePieSeries(args) {
     const colorScale = scaleOrdinal(dataNames, DEFAULT_PALETTE);
     const stackId = getRandomCKId();
     const seriesHoverState = get(seriesOptions, 'pie.states.hover');
-    const preparedSeries = series.data.map((dataItem) => {
+    const preparedSeries = series.data.map((dataItem, i) => {
         var _a, _b, _c;
         const result = {
             type: 'pie',
@@ -29,7 +29,7 @@ export function preparePieSeries(args) {
             value: dataItem.value,
             visible: typeof dataItem.visible === 'boolean' ? dataItem.visible : true,
             name: dataItem.name,
-            id: '',
+            id: `Series ${i}`,
             color: dataItem.color || colorScale(dataItem.name),
             legend: {
                 enabled: get(series, 'legend.enabled', legend.enabled),

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

@@ -0,0 +1,11 @@
+import type { ScaleOrdinal } from 'd3';
+import type { ChartKitWidgetSeriesOptions, TreemapSeries } from '../../../../../types';
+import type { PreparedLegend, PreparedTreemapSeries } from './types';
+type PrepareTreemapSeriesArgs = {
+    colorScale: ScaleOrdinal<string, string>;
+    legend: PreparedLegend;
+    series: TreemapSeries[];
+    seriesOptions?: ChartKitWidgetSeriesOptions;
+};
+export declare function prepareTreemap(args: PrepareTreemapSeriesArgs): PreparedTreemapSeries[];
+export {};

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

@@ -0,0 +1,34 @@
+import get from 'lodash/get';
+import { LayoutAlgorithm } from '../../../../../constants';
+import { getRandomCKId } from '../../../../../utils';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
+import { prepareLegendSymbol } from './utils';
+export function prepareTreemap(args) {
+    const { colorScale, legend, series } = args;
+    return series.map((s) => {
+        var _a;
+        const id = getRandomCKId();
+        const name = s.name || '';
+        const color = s.color || colorScale(name);
+        return {
+            color,
+            data: s.data,
+            dataLabels: {
+                enabled: get(s, 'dataLabels.enabled', true),
+                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),
+            },
+            id,
+            type: s.type,
+            name,
+            visible: get(s, 'visible', true),
+            legend: {
+                enabled: get(s, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(s),
+            },
+            levels: s.levels,
+            layoutAlgorithm: get(s, 'layoutAlgorithm', LayoutAlgorithm.Binary),
+        };
+    });
+}

package/build/plugins/d3/renderer/hooks/useSeries/prepareSeries.js

@@ -1,10 +1,11 @@
+import { ChartKitError } from '../../../../../libs';
 import { prepareLineSeries } from './prepare-line';
 import { prepareBarXSeries } from './prepare-bar-x';
 import { prepareBarYSeries } from './prepare-bar-y';
-import { ChartKitError } from '../../../../../libs';
 import { preparePieSeries } from './prepare-pie';
 import { prepareArea } from './prepare-area';
 import { prepareScatterSeries } from './prepare-scatter';
+import { prepareTreemap } from './prepare-treemap';
 export function prepareSeries(args) {
     const { type, series, seriesOptions, legend, colorScale } = args;
     switch (type) {
@@ -39,6 +40,14 @@ export function prepareSeries(args) {
                 colorScale,
             });
         }
+        case 'treemap': {
+            return prepareTreemap({
+                series: series,
+                seriesOptions,
+                legend,
+                colorScale,
+            });
+        }
         default: {
             throw new ChartKitError({
                 message: `Series type "${type}" does not support data preparation for series that do not support the presence of axes`,

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

@@ -1,6 +1,6 @@
-import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, BarYSeries, BarYSeriesData, LineSeries, LineSeriesData, ConnectorShape, ConnectorCurve, PathLegendSymbolOptions, SymbolLegendSymbolOptions, AreaSeries, AreaSeriesData } from '../../../../../types';
+import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, BarYSeries, BarYSeriesData, LineSeries, LineSeriesData, ConnectorShape, ConnectorCurve, PathLegendSymbolOptions, SymbolLegendSymbolOptions, AreaSeries, AreaSeriesData, TreemapSeries, TreemapSeriesData } from '../../../../../types';
 import type { SeriesOptionsDefaults } from '../../constants';
-import { DashStyle, LineCap, SymbolType } from '../../../../../constants';
+import { DashStyle, LayoutAlgorithm, LineCap, SymbolType } from '../../../../../constants';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
@@ -194,7 +194,18 @@ export type PreparedAreaSeries = {
         };
     };
 } & BasePreparedSeries;
-export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries;
+export type PreparedTreemapSeries = {
+    type: TreemapSeries['type'];
+    data: TreemapSeriesData[];
+    dataLabels: {
+        enabled: boolean;
+        style: BaseTextStyle;
+        padding: number;
+        allowOverlap: boolean;
+    };
+    layoutAlgorithm: `${LayoutAlgorithm}`;
+} & BasePreparedSeries & TreemapSeries;
+export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries;
 export type PreparedSeriesOptions = SeriesOptionsDefaults;
 export type StackedSeries = BarXSeries | AreaSeries | BarYSeries;
 export {};

package/build/plugins/d3/renderer/hooks/useShapes/index.js

@@ -10,6 +10,8 @@ import { LineSeriesShapes } from './line';
 import { BarYSeriesShapes, prepareBarYData } from './bar-y';
 import { AreaSeriesShapes } from './area';
 import { prepareAreaData } from './area/prepare-data';
+import { TreemapSeriesShape } from './treemap';
+import { prepareTreemapData } from './treemap/prepare-data';
 import './styles.css';
 export const useShapes = (args) => {
     const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, svgContainer, } = args;
@@ -98,6 +100,17 @@ export const useShapes = (args) => {
                         boundsHeight,
                     });
                     acc.push(React.createElement(PieSeriesShapes, { key: "pie", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, svgContainer: svgContainer }));
+                    break;
+                }
+                case 'treemap': {
+                    const preparedData = prepareTreemapData({
+                        // We should have exactly one series with "treemap" type
+                        // Otherwise data validation should emit an error
+                        series: chartSeries[0],
+                        width: boundsWidth,
+                        height: boundsHeight,
+                    });
+                    acc.push(React.createElement(TreemapSeriesShape, { key: "treemap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, svgContainer: svgContainer }));
                 }
             }
             return acc;

package/build/plugins/d3/renderer/hooks/useShapes/styles.css

@@ -22,4 +22,11 @@
   fill: var(--g-color-text-complementary);
   user-select: none;
   alignment-baseline: after-edge;
+}
+
+.chartkit-d3-treemap__label {
+  fill: var(--g-color-text-complementary);
+  alignment-baseline: text-before-edge;
+  user-select: none;
+  pointer-events: none;
 }

package/build/plugins/d3/renderer/hooks/useShapes/treemap/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import { PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedTreemapData } from './types';
+type ShapeProps = {
+    dispatcher: Dispatch<object>;
+    preparedData: PreparedTreemapData;
+    seriesOptions: PreparedSeriesOptions;
+    svgContainer: SVGSVGElement | null;
+};
+export declare const TreemapSeriesShape: (props: ShapeProps) => React.JSX.Element;
+export {};

package/build/plugins/d3/renderer/hooks/useShapes/treemap/index.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import { color, pointer, select } from 'd3';
+import get from 'lodash/get';
+import { setEllipsisForOverflowTexts } from '../../../utils';
+import { block } from '../../../../../../utils/cn';
+const b = block('d3-treemap');
+export const TreemapSeriesShape = (props) => {
+    const { dispatcher, preparedData, seriesOptions, svgContainer } = props;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const { labelData, leaves, series } = preparedData;
+        const leaf = svgElement
+            .selectAll('g')
+            .data(leaves)
+            .join('g')
+            .attr('transform', (d) => `translate(${d.x0},${d.y0})`);
+        const rectSelection = leaf
+            .append('rect')
+            .attr('id', (d) => d.id || d.name)
+            .attr('fill', (d) => {
+            var _a;
+            if (d.data.color) {
+                return d.data.color;
+            }
+            const levelOptions = (_a = series.levels) === null || _a === void 0 ? void 0 : _a.find((l) => l.index === d.depth);
+            return (levelOptions === null || levelOptions === void 0 ? void 0 : levelOptions.color) || series.color;
+        })
+            .attr('width', (d) => d.x1 - d.x0)
+            .attr('height', (d) => d.y1 - d.y0);
+        const labelSelection = svgElement
+            .selectAll('tspan')
+            .data(labelData)
+            .join('text')
+            .text((d) => d.text)
+            .attr('class', b('label'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .style('font-size', () => series.dataLabels.style.fontSize)
+            .style('font-weight', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontWeight) || null; })
+            .style('fill', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontColor) || null; })
+            .call(setEllipsisForOverflowTexts, (d) => d.width);
+        const eventName = `hover-shape.pie`;
+        const hoverOptions = get(seriesOptions, 'treemap.states.hover');
+        const inactiveOptions = get(seriesOptions, 'treemap.states.inactive');
+        svgElement
+            .on('mousemove', (e) => {
+            const hoveredRect = select(e.target);
+            const datum = hoveredRect.datum();
+            dispatcher.call('hover-shape', {}, [{ data: datum.data, series }], pointer(e, svgContainer));
+        })
+            .on('mouseleave', () => {
+            dispatcher.call('hover-shape', {}, undefined);
+        });
+        dispatcher.on(eventName, (data) => {
+            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+            const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
+            const hoveredData = data === null || data === void 0 ? void 0 : data[0].data;
+            rectSelection.datum((d, index, list) => {
+                const currentRect = select(list[index]);
+                const hovered = Boolean(hoverEnabled && hoveredData === d.data);
+                const inactive = Boolean(inactiveEnabled && hoveredData && !hovered);
+                currentRect
+                    .attr('fill', (currentD) => {
+                    var _a, _b;
+                    const levelOptions = (_a = series.levels) === null || _a === void 0 ? void 0 : _a.find((l) => l.index === currentD.depth);
+                    const initialColor = (levelOptions === null || levelOptions === void 0 ? void 0 : levelOptions.color) || d.data.color || series.color;
+                    if (hovered) {
+                        return (((_b = color(initialColor)) === null || _b === void 0 ? void 0 : _b.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) || initialColor);
+                    }
+                    return initialColor;
+                })
+                    .attr('opacity', () => {
+                    if (inactive) {
+                        return (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
+                    }
+                    return null;
+                });
+                return d;
+            });
+            labelSelection.datum((d, index, list) => {
+                const currentLabel = select(list[index]);
+                const hovered = Boolean(hoverEnabled && hoveredData === d.nodeData);
+                const inactive = Boolean(inactiveEnabled && hoveredData && !hovered);
+                currentLabel.attr('opacity', () => {
+                    if (inactive) {
+                        return (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
+                    }
+                    return null;
+                });
+                return d;
+            });
+        });
+        return () => {
+            dispatcher.on(eventName, null);
+        };
+    }, [dispatcher, preparedData, seriesOptions, svgContainer]);
+    return React.createElement("g", { ref: ref, className: b() });
+};

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

@@ -0,0 +1,7 @@
+import type { PreparedTreemapSeries } from '../../useSeries/types';
+import type { PreparedTreemapData } from './types';
+export declare function prepareTreemapData(args: {
+    series: PreparedTreemapSeries;
+    width: number;
+    height: number;
+}): PreparedTreemapData;

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

@@ -0,0 +1,65 @@
+import { stratify, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3';
+import { LayoutAlgorithm } from '../../../../../../constants';
+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,
+        };
+    });
+}
+export function prepareTreemapData(args) {
+    var _a;
+    const { series, width, height } = args;
+    const dataWithRootNode = getSeriesDataWithRootNode(series);
+    const hierarchy = stratify()
+        .id((d) => d.id || d.name)
+        .parentId((d) => d.parentId)(dataWithRootNode)
+        .sum((d) => d.value || 0);
+    const treemapInstance = treemap();
+    switch (series.layoutAlgorithm) {
+        case LayoutAlgorithm.Binary: {
+            treemapInstance.tile(treemapBinary);
+            break;
+        }
+        case LayoutAlgorithm.Dice: {
+            treemapInstance.tile(treemapDice);
+            break;
+        }
+        case LayoutAlgorithm.Slice: {
+            treemapInstance.tile(treemapSlice);
+            break;
+        }
+        case LayoutAlgorithm.SliceDice: {
+            treemapInstance.tile(treemapSliceDice);
+            break;
+        }
+        case LayoutAlgorithm.Squarify: {
+            treemapInstance.tile(treemapSquarify);
+            break;
+        }
+    }
+    const root = treemapInstance.size([width, height]).paddingInner((d) => {
+        var _a, _b;
+        const levelOptions = (_a = series.levels) === null || _a === void 0 ? void 0 : _a.find((l) => l.index === d.depth + 1);
+        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 };
+}
+function getSeriesDataWithRootNode(series) {
+    return series.data.reduce((acc, d) => {
+        const dataChunk = Object.assign({}, d);
+        if (!dataChunk.parentId) {
+            dataChunk.parentId = series.id;
+        }
+        acc.push(dataChunk);
+        return acc;
+    }, [{ name: series.name, id: series.id }]);
+}

package/build/plugins/d3/renderer/hooks/useShapes/treemap/types.d.ts

@@ -0,0 +1,15 @@
+import type { HierarchyRectangularNode } from 'd3';
+import type { TreemapSeriesData } from '../../../../../../types';
+import type { PreparedTreemapSeries } from '../../useSeries/types';
+export type TreemapLabelData = {
+    text: string;
+    x: number;
+    y: number;
+    width: number;
+    nodeData: TreemapSeriesData;
+};
+export type PreparedTreemapData = {
+    labelData: TreemapLabelData[];
+    leaves: HierarchyRectangularNode<TreemapSeriesData<any>>[];
+    series: PreparedTreemapSeries;
+};

package/build/plugins/d3/renderer/hooks/useShapes/treemap/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -13,7 +13,7 @@ export * from './time';
 export * from './axis';
 export * from './labels';
 export * from './symbol';
-const CHARTS_WITHOUT_AXIS = ['pie'];
+const CHARTS_WITHOUT_AXIS = ['pie', 'treemap'];
 /**
  * Checks whether the series should be drawn with axes.
  *

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

@@ -108,6 +108,35 @@ const validateStacking = ({ series }) => {
         });
     }
 };
+const validateTreemapSeries = ({ series }) => {
+    const parentIds = {};
+    series.data.forEach((d) => {
+        if (d.parentId && !parentIds[d.parentId]) {
+            parentIds[d.parentId] = true;
+        }
+    });
+    series.data.forEach((d) => {
+        const idOrName = d.id || d.name;
+        if (parentIds[idOrName] && typeof d.value === 'number') {
+            throw new ChartKitError({
+                code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+                message: i18n('error', 'label_invalid-treemap-redundant-value', {
+                    id: d.id,
+                    name: d.name,
+                }),
+            });
+        }
+        if (!parentIds[idOrName] && typeof d.value !== 'number') {
+            throw new ChartKitError({
+                code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+                message: i18n('error', 'label_invalid-treemap-missing-value', {
+                    id: d.id,
+                    name: d.name,
+                }),
+            });
+        }
+    });
+};
 const validateSeries = (args) => {
     const { series, xAxis, yAxis } = args;
     if (!AVAILABLE_SERIES_TYPES.includes(series.type)) {
@@ -133,9 +162,23 @@ const validateSeries = (args) => {
         }
         case 'pie': {
             validatePieSeries({ series });
+            break;
+        }
+        case 'treemap': {
+            validateTreemapSeries({ series });
         }
     }
 };
+const countSeriesByType = (args) => {
+    const { series, type } = args;
+    let count = 0;
+    series.forEach((s) => {
+        if (s.type === type) {
+            count += 1;
+        }
+    });
+    return count;
+};
 export const validateData = (data) => {
     if (isEmpty(data) || isEmpty(data.series) || isEmpty(data.series.data)) {
         throw new ChartKitError({
@@ -149,6 +192,16 @@ export const validateData = (data) => {
             message: 'You should specify data for all series',
         });
     }
+    const treemapSeriesCount = countSeriesByType({
+        series: data.series.data,
+        type: SeriesType.Treemap,
+    });
+    if (treemapSeriesCount > 1) {
+        throw new ChartKitError({
+            code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+            message: 'It looks like you are trying to define more than one "treemap" series.',
+        });
+    }
     data.series.data.forEach((series) => {
         var _a;
         validateSeries({ series, yAxis: (_a = data.yAxis) === null || _a === void 0 ? void 0 : _a[0], xAxis: data.xAxis });

package/build/plugins/yagr/renderer/utils.js

@@ -94,7 +94,7 @@ export const getUplotTimezoneAligner = (chart, timeZone) => (ts) => {
     const browserTimezone = browserDate.utcOffset();
     const timestampRealTimezone = dateTime({ input: dt, timeZone }).utcOffset();
     const uPlotOffset = (browserTimezone - timestampRealTimezone) * 60 * 1000;
-    return new Date(browserDate.valueOf() + uPlotOffset);
+    return new Date(browserDate.valueOf() - uPlotOffset);
 };
 export const shapeYagrConfig = (args) => {
     var _a, _b;

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

@@ -18,6 +18,7 @@ export * from './series';
 export * from './title';
 export * from './tooltip';
 export * from './halo';
+export * from './treemap';
 export type ChartKitWidgetData<T = any> = {
     chart?: ChartKitWidgetChart;
     legend?: ChartKitWidgetLegend;

package/build/types/widget-data/index.js

@@ -12,3 +12,4 @@ export * from './series';
 export * from './title';
 export * from './tooltip';
 export * from './halo';
+export * from './treemap';

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

@@ -6,10 +6,11 @@ import type { LineSeries, LineSeriesData } from './line';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
 import type { PointMarkerOptions } from './marker';
 import type { AreaSeries, AreaSeriesData } from './area';
+import type { TreemapSeries, TreemapSeriesData } from './treemap';
 import type { Halo } from './halo';
 import { DashStyle, LineCap } from '../../constants';
-export type ChartKitWidgetSeries<T = any> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T>;
-export type ChartKitWidgetSeriesData<T = any> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T>;
+export type ChartKitWidgetSeries<T = any> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T>;
+export type ChartKitWidgetSeriesData<T = any> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T>;
 export type DataLabelRendererData<T = any> = {
     data: ChartKitWidgetSeriesData<T>;
 };
@@ -194,5 +195,12 @@ export type ChartKitWidgetSeriesOptions = {
         /** Options for the point markers of line series */
         marker?: PointMarkerOptions;
     };
+    treemap?: {
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState;
+            inactive?: BasicInactiveState;
+        };
+    };
 };
 export {};

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

@@ -5,6 +5,7 @@ import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { LineSeries, LineSeriesData } from './line';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
 import type { AreaSeries, AreaSeriesData } from './area';
+import type { TreemapSeries, TreemapSeriesData } from './treemap';
 export type TooltipDataChunkBarX<T = any> = {
     data: BarXSeriesData<T>;
     series: BarXSeries<T>;
@@ -45,7 +46,11 @@ export type TooltipDataChunkArea<T = any> = {
         name: string;
     };
 };
-export type TooltipDataChunk<T = any> = TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T>;
+export type TooltipDataChunkTreemap<T = any> = {
+    data: TreemapSeriesData<T>;
+    series: TreemapSeries<T>;
+};
+export type TooltipDataChunk<T = any> = TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T>;
 export type ChartKitWidgetTooltip<T = any> = {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */

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

@@ -0,0 +1,38 @@
+import { LayoutAlgorithm, SeriesType } from '../../constants';
+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;
+    /** 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. */
+    id?: string;
+    /**
+     * Parent id. Used to build a tree structure. The value should be the id of the node which is the parent.
+     * If no nodes has a matching id, or this option is undefined, then the parent will be set to the root.
+     */
+    parentId?: string;
+};
+export type TreemapSeries<T = any> = BaseSeries & {
+    type: typeof SeriesType.Treemap;
+    data: TreemapSeriesData<T>[];
+    /** The name of the series (used in legend, tooltip etc). */
+    name: string;
+    /** The main color of the series (hex, rgba). */
+    color?: string;
+    /** Individual series legend options. Has higher priority than legend options in widget data. */
+    legend?: ChartKitWidgetLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+    /** Set options on specific levels. Takes precedence over series options, but not point options. */
+    levels?: {
+        /** Decides which level takes effect from the options set in the levels object. */
+        index: number;
+        /** Can set the padding between all points which lies on the same level. */
+        padding?: number;
+        /** Can set a color on all points which lies on the same level. */
+        color?: string;
+    }[];
+    layoutAlgorithm?: `${LayoutAlgorithm}`;
+};

package/build/types/widget-data/treemap.js

@@ -0,0 +1 @@
+export {};

package/package.json

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