@gravity-ui/chartkit 5.15.0 → 5.17.0

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

@@ -4,12 +4,13 @@ import get from 'lodash/get';
 import { DashStyle } from '../../../../../../constants';
 import { block } from '../../../../../../utils/cn';
 import { filterOverlappingLabels, getWaterfallPointColor } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
 import { getLineDashArray } from '../utils';
 export { prepareWaterfallData } from './prepare-data';
 export * from './types';
 const b = block('d3-waterfall');
 export const WaterfallSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions } = args;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const ref = React.useRef(null);
     const connectorSelector = `.${b('connector')}`;
     React.useEffect(() => {
@@ -121,5 +122,7 @@ export const WaterfallSeriesShapes = (args) => {
             dispatcher.on('hover-shape.waterfall', null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
-    return React.createElement("g", { ref: ref, className: b() });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 };

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

@@ -124,6 +124,7 @@ export const prepareWaterfallData = (args) => {
             data: item.data,
             series: item.series,
             subTotal: totalValue,
+            htmlElements: [],
         };
         preparedData.label = getLabelData(preparedData, plotHeight);
         result.push(preparedData);

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

@@ -1,5 +1,5 @@
 import { WaterfallSeriesData } from '../../../../../../types';
-import { LabelData } from '../../../types';
+import { HtmlItem, LabelData } from '../../../types';
 import { PreparedWaterfallSeries } from '../../useSeries/types';
 export type PreparedWaterfallData = {
     x: number;
@@ -11,4 +11,5 @@ export type PreparedWaterfallData = {
     data: WaterfallSeriesData;
     label?: LabelData;
     subTotal: number;
+    htmlElements: HtmlItem[];
 };

package/build/plugins/d3/renderer/types/index.d.ts

@@ -13,10 +13,12 @@ export type LabelData = {
         id: string;
     };
     active?: boolean;
-    html?: boolean;
 };
 export type HtmlItem = {
     x: number;
     y: number;
     content: string;
 };
+export type ShapeDataWithHtmlItems = {
+    htmlElements: HtmlItem[];
+};

package/build/plugins/d3/renderer/utils/axis-generators/bottom.d.ts

@@ -4,15 +4,16 @@ type AxisBottomArgs = {
     scale: AxisScale<AxisDomain>;
     ticks: {
         count?: number;
-        maxTickCount: number;
-        labelFormat: (value: any) => string;
+        maxTickCount?: number;
+        labelFormat?: (value: any) => string;
         labelsPaddings?: number;
         labelsMargin?: number;
         labelsStyle?: BaseTextStyle;
         labelsMaxWidth?: number;
         labelsLineHeight: number;
-        items: [number, number][];
-        rotation: number;
+        items?: [number, number][];
+        rotation?: number;
+        tickColor?: string;
     };
     domain: {
         size: number;

package/build/plugins/d3/renderer/utils/axis-generators/bottom.js

@@ -16,7 +16,7 @@ function addDomain(selection, options) {
     }
 }
 export function axisBottom(args) {
-    const { scale, ticks: { labelFormat, labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, items: tickItems, count: ticksCount, maxTickCount, rotation, }, domain: { size: domainSize, color: domainColor }, } = args;
+    const { scale, ticks: { labelFormat = (value) => String(value), labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, items: tickItems, count: ticksCount, maxTickCount, rotation = 0, tickColor, }, domain, } = args;
     const offset = getXAxisOffset();
     const position = getXTickPosition({ scale, offset });
     const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
@@ -25,10 +25,11 @@ export function axisBottom(args) {
         style: labelsStyle,
     }).maxHeight;
     return function (selection) {
-        var _a, _b;
-        const x = ((_b = (_a = selection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.x) || 0;
-        const right = x + domainSize;
-        const top = -tickItems[0][0] || 0;
+        var _a, _b, _c;
+        const rect = (_a = selection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const x = (rect === null || rect === void 0 ? void 0 : rect.x) || 0;
+        const right = x + domain.size;
+        const top = -((_c = (_b = tickItems === null || tickItems === void 0 ? void 0 : tickItems[0]) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : 0);
         let transform = `translate(0, ${labelHeight + labelsMargin - top}px)`;
         if (rotation) {
             const labelsOffsetTop = labelHeight * calculateCos(rotation) + labelsMargin - top;
@@ -39,7 +40,7 @@ export function axisBottom(args) {
             transform = `translate(${-labelsOffsetLeft}px, ${labelsOffsetTop}px) rotate(${rotation}deg)`;
         }
         const tickPath = path();
-        tickItems.forEach(([start, end]) => {
+        tickItems === null || tickItems === void 0 ? void 0 : tickItems.forEach(([start, end]) => {
             tickPath.moveTo(0, start);
             tickPath.lineTo(0, end);
         });
@@ -49,7 +50,9 @@ export function axisBottom(args) {
             .order()
             .join((el) => {
             const tick = el.append('g').attr('class', 'tick');
-            tick.append('path').attr('d', tickPath.toString()).attr('stroke', 'currentColor');
+            tick.append('path')
+                .attr('d', tickPath.toString())
+                .attr('stroke', tickColor !== null && tickColor !== void 0 ? tickColor : 'currentColor');
             tick.append('text')
                 .text(labelFormat)
                 .attr('fill', 'currentColor')
@@ -115,6 +118,7 @@ export function axisBottom(args) {
                 }
             });
         }
+        const { size: domainSize, color: domainColor } = domain;
         selection
             .call(addDomain, { size: domainSize, color: domainColor })
             .style('font-size', (labelsStyle === null || labelsStyle === void 0 ? void 0 : labelsStyle.fontSize) || '');

package/build/plugins/d3/renderer/utils/axis.d.ts

@@ -15,7 +15,7 @@ export declare function getXTickPosition({ scale, offset }: {
 export declare function getXAxisItems({ scale, count, maxCount, }: {
     scale: AxisScale<AxisDomain>;
     count?: number;
-    maxCount: number;
+    maxCount?: number;
 }): any;
 export declare function getMaxTickCount({ axis, width }: {
     axis: PreparedAxis;

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

@@ -32,7 +32,7 @@ export function getXTickPosition({ scale, offset }) {
 }
 export function getXAxisItems({ scale, count, maxCount, }) {
     let values = getScaleTicks(scale, count);
-    if (values.length > maxCount) {
+    if (maxCount && values.length > maxCount) {
         const step = Math.ceil(values.length / maxCount);
         values = values.filter((_, i) => i % step === 0);
     }

package/build/plugins/d3/renderer/utils/color.d.ts

@@ -0,0 +1,10 @@
+import { ChartKitWidgetData } from '../../../../types';
+export declare function getDomainForContinuousColorScale(args: {
+    series: ChartKitWidgetData['series']['data'];
+}): number[];
+export declare function getDefaultColorStops(size: number): number[];
+export declare function getContinuesColorFn(args: {
+    values: number[];
+    colors: string[];
+    stops?: number[];
+}): (value: number) => string;

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

@@ -0,0 +1,43 @@
+import { range, scaleLinear } from 'd3';
+export function getDomainForContinuousColorScale(args) {
+    const { series } = args;
+    const values = series.reduce((acc, s) => {
+        switch (s.type) {
+            case 'pie': {
+                acc.push(...s.data.map((d) => d.value));
+                break;
+            }
+            case 'bar-y': {
+                acc.push(...s.data.map((d) => Number(d.x)));
+                break;
+            }
+            case 'scatter':
+            case 'bar-x':
+            case 'waterfall':
+            case 'line':
+            case 'area': {
+                acc.push(...s.data.map((d) => Number(d.y)));
+                break;
+            }
+            default: {
+                throw Error(`The method for calculation a domain for a continuous color scale for the "${s.type}" series is not defined`);
+            }
+        }
+        return acc;
+    }, []);
+    return [Math.min(...values), Math.max(...values)];
+}
+export function getDefaultColorStops(size) {
+    return range(size).map((d) => d / size);
+}
+export function getContinuesColorFn(args) {
+    const { values, colors, stops: customStops } = args;
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const stops = customStops !== null && customStops !== void 0 ? customStops : getDefaultColorStops(colors.length);
+    const color = scaleLinear(stops, colors);
+    return (value) => {
+        const colorValue = (value - min) / (max - min);
+        return color(colorValue);
+    };
+}

package/build/plugins/d3/renderer/utils/index.d.ts

@@ -6,8 +6,10 @@ export * from './text';
 export * from './time';
 export * from './axis';
 export * from './labels';
+export * from './legend';
 export * from './symbol';
 export * from './series';
+export * from './color';
 export declare const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS: ChartKitWidgetSeries['type'][];
 export declare const CHART_SERIES_WITH_VOLUME_ON_X_AXIS: ChartKitWidgetSeries['type'][];
 export type AxisDirection = 'x' | 'y';

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

@@ -12,8 +12,10 @@ export * from './text';
 export * from './time';
 export * from './axis';
 export * from './labels';
+export * from './legend';
 export * from './symbol';
 export * from './series';
+export * from './color';
 const CHARTS_WITHOUT_AXIS = ['pie', 'treemap'];
 export const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS = [
     'bar-x',

package/build/plugins/d3/renderer/utils/legend.d.ts

@@ -0,0 +1,8 @@
+import { Selection } from 'd3';
+export declare function createGradientRect(container: Selection<SVGGElement, unknown, null, undefined>, args: {
+    x?: number;
+    y?: number;
+    width: number;
+    height: number;
+    interpolator: (value: number) => string;
+}): Selection<SVGImageElement, unknown, null, undefined>;

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

@@ -0,0 +1,23 @@
+export function createGradientRect(container, args) {
+    const { x = 0, y = 0, width, height, interpolator } = args;
+    const n = 256;
+    const canvas = document.createElement('canvas');
+    canvas.width = n;
+    canvas.height = 1;
+    const context = canvas.getContext('2d');
+    if (!context) {
+        throw Error("Couldn't get canvas context");
+    }
+    for (let i = 0, j = n - 1; i < n; ++i) {
+        context.fillStyle = interpolator(i / j);
+        context.fillRect(i, 0, 1, height);
+    }
+    return container
+        .append('image')
+        .attr('preserveAspectRatio', 'none')
+        .attr('height', height)
+        .attr('width', width)
+        .attr('x', x)
+        .attr('y', y)
+        .attr('xlink:href', canvas.toDataURL());
+}

package/build/plugins/d3/renderer/utils/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, _d, _e;
+    var _a, _b, _c;
     if (!labels.filter(Boolean).length) {
         return { maxHeight: 0, maxWidth: 0 };
     }
@@ -75,12 +75,19 @@ export function getLabelsSize({ labels, style, rotation, html, }) {
     let labelWrapper;
     if (html) {
         labelWrapper = container.append('div').style('position', 'absolute').node();
-        labels.forEach((l) => {
-            labelWrapper === null || labelWrapper === void 0 ? void 0 : labelWrapper.insertAdjacentHTML('beforeend', l);
-        });
-        const rect = labelWrapper === null || labelWrapper === void 0 ? void 0 : labelWrapper.getBoundingClientRect();
-        result.maxWidth = (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0;
-        result.maxHeight = (_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0;
+        const { height, width } = labels.reduce((acc, l) => {
+            var _a, _b;
+            if (labelWrapper) {
+                labelWrapper.innerHTML = l;
+            }
+            const rect = labelWrapper === null || labelWrapper === void 0 ? void 0 : labelWrapper.getBoundingClientRect();
+            return {
+                width: Math.max(acc.width, (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0),
+                height: Math.max(acc.height, (_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0),
+            };
+        }, { height: 0, width: 0 });
+        result.maxWidth = width;
+        result.maxHeight = height;
     }
     else {
         const svg = container.append('svg');
@@ -90,9 +97,9 @@ export function getLabelsSize({ labels, style, rotation, html, }) {
                 .attr('text-anchor', rotation > 0 ? 'start' : 'end')
                 .style('transform', `rotate(${rotation}deg)`);
         }
-        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;
+        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;
     }
     container.remove();
     return result;

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/bar-x.d.ts

@@ -49,7 +49,7 @@ export type BarXSeries<T = any> = BaseSeries & {
      * @default true
      * */
     grouping?: boolean;
-    dataLabels?: ChartKitWidgetSeriesOptions['dataLabels'] & {
+    dataLabels?: BaseSeries['dataLabels'] & ChartKitWidgetSeriesOptions['dataLabels'] & {
         /**
          * Whether to align the data label inside or outside the box
          *

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/legend.d.ts

@@ -1,6 +1,14 @@
 import type { BaseTextStyle } from './base';
 export type ChartKitWidgetLegend = {
     enabled?: boolean;
+    /**
+     * Different types for different color schemes.
+     * If the color scheme is continuous, a gradient legend will be drawn.
+     * Otherwise, samples for different point values
+     *
+     * @default 'discrete'
+     */
+    type?: 'discrete' | 'continuous';
     /**
      * The horizontal alignment of the legend box within the chart area.
      *
@@ -21,6 +29,22 @@ export type ChartKitWidgetLegend = {
      * @default 15
      */
     margin?: number;
+    title?: {
+        text?: string;
+        /** CSS styles for the title */
+        style?: Partial<BaseTextStyle>;
+        /** The distance(in pixels) between the main content of the legend and its title
+         *
+         * Defaults to 4 for horizontal axes, 8 for vertical.
+         * */
+        margin?: number;
+    };
+    colorScale?: {
+        stops?: number[];
+        colors: string[];
+        domain?: number[];
+    };
+    width?: number;
 };
 export type BaseLegendSymbol = {
     /**

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.15.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",