@gravity-ui/chartkit 3.5.0 → 3.7.0

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

@@ -1,17 +1,41 @@
-import type { AxisDomain } from 'd3';
-import type { ChartKitWidgetSeries, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels } from '../../../../types/widget-data';
+import { AxisDomain } from 'd3';
+import type { BaseTextStyle, ChartKitWidgetSeries, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels } from '../../../../types/widget-data';
 export * from './math';
+type UnknownSeries = {
+    type: ChartKitWidgetSeries['type'];
+    data: unknown;
+};
 /**
  * Checks whether the series should be drawn with axes.
  *
  * @param series - The series object to check.
  * @returns `true` if the series should be drawn with axes, `false` otherwise.
  */
-export declare const isAxisRelatedSeries: (series: ChartKitWidgetSeries) => boolean;
-export declare const getDomainDataXBySeries: (series: ChartKitWidgetSeries[]) => unknown[];
-export declare const getDomainDataYBySeries: (series: ChartKitWidgetSeries[]) => unknown[];
+export declare function isAxisRelatedSeries(series: UnknownSeries): boolean;
+export declare function isSeriesWithNumericalXValues(series: UnknownSeries): series is {
+    type: ChartKitWidgetSeries['type'];
+    data: {
+        x: number;
+    }[];
+};
+export declare function isSeriesWithNumericalYValues(series: UnknownSeries): series is {
+    type: ChartKitWidgetSeries['type'];
+    data: {
+        y: number;
+    }[];
+};
+export declare function isSeriesWithCategoryValues(series: UnknownSeries): series is {
+    type: ChartKitWidgetSeries['type'];
+    data: {
+        category: string;
+    }[];
+};
+export declare const getDomainDataXBySeries: (series: UnknownSeries[]) => number[];
+export declare const getDomainDataYBySeries: (series: UnknownSeries[]) => unknown[];
 export declare const getSeriesNames: (series: ChartKitWidgetSeries[]) => string[];
-export declare const getOnlyVisibleSeries: <T extends ChartKitWidgetSeries<any>>(series: T[]) => T[];
+export declare const getOnlyVisibleSeries: <T extends {
+    visible: boolean;
+}>(series: T[]) => T[];
 export declare const parseTransformStyle: (style: string | null) => {
     x?: number | undefined;
     y?: number | undefined;
@@ -22,3 +46,15 @@ export declare const formatAxisTickLabel: (args: {
     dateFormat?: ChartKitWidgetAxisLabels['dateFormat'];
     numberFormat?: ChartKitWidgetAxisLabels['numberFormat'];
 }) => string;
+/**
+ * Calculates the height of a text element in a horizontal SVG layout.
+ *
+ * @param {Object} args - The arguments for the function.
+ * @param {string} args.text - The text to be measured.
+ * @param {Partial<BaseTextStyle>} args.style - Optional style properties for the text element.
+ * @return {number} The height of the text element.
+ */
+export declare const getHorisontalSvgTextHeight: (args: {
+    text: string;
+    style?: Partial<BaseTextStyle>;
+}) => number;

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

@@ -1,5 +1,8 @@
+import { group, select } from 'd3';
+import get from 'lodash/get';
 import { dateTime } from '@gravity-ui/date-utils';
 import { formatNumber } from '../../../shared';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../constants';
 export * from './math';
 const CHARTS_WITHOUT_AXIS = ['pie'];
 /**
@@ -8,18 +11,56 @@ const CHARTS_WITHOUT_AXIS = ['pie'];
  * @param series - The series object to check.
  * @returns `true` if the series should be drawn with axes, `false` otherwise.
  */
-export const isAxisRelatedSeries = (series) => {
+export function isAxisRelatedSeries(series) {
     return !CHARTS_WITHOUT_AXIS.includes(series.type);
-};
+}
+export function isSeriesWithNumericalXValues(series) {
+    return isAxisRelatedSeries(series);
+}
+export function isSeriesWithNumericalYValues(series) {
+    return isAxisRelatedSeries(series);
+}
+export function isSeriesWithCategoryValues(series) {
+    return isAxisRelatedSeries(series);
+}
 export const getDomainDataXBySeries = (series) => {
-    return series.filter(isAxisRelatedSeries).reduce((acc, s) => {
-        acc.push(...s.data.map((d) => 'x' in d && d.x));
+    return series.reduce((acc, s) => {
+        if (isSeriesWithNumericalXValues(s)) {
+            acc.push(...s.data.map((d) => d.x));
+        }
         return acc;
     }, []);
 };
 export const getDomainDataYBySeries = (series) => {
-    return series.filter(isAxisRelatedSeries).reduce((acc, s) => {
-        acc.push(...s.data.map((d) => 'y' in d && d.y));
+    const groupedSeries = group(series, (item) => item.type);
+    return Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {
+        switch (type) {
+            case 'bar-x': {
+                const barXSeries = seriesList;
+                const stackedSeries = group(barXSeries, (item) => item.stackId);
+                Array.from(stackedSeries).forEach(([, stack]) => {
+                    const values = {};
+                    stack.forEach((singleSeries) => {
+                        singleSeries.data.forEach((point) => {
+                            const key = String(point.x || point.category);
+                            if (typeof values[key] === 'undefined') {
+                                values[key] = 0;
+                            }
+                            if (point.y) {
+                                values[key] += point.y;
+                            }
+                        });
+                    });
+                    acc.push(...Object.values(values));
+                });
+                break;
+            }
+            default: {
+                seriesList.filter(isSeriesWithNumericalYValues).forEach((s) => {
+                    acc.push(...s.data.map((d) => d.y));
+                });
+            }
+        }
         return acc;
     }, []);
 };
@@ -64,3 +105,26 @@ export const formatAxisTickLabel = (args) => {
         }
     }
 };
+/**
+ * Calculates the height of a text element in a horizontal SVG layout.
+ *
+ * @param {Object} args - The arguments for the function.
+ * @param {string} args.text - The text to be measured.
+ * @param {Partial<BaseTextStyle>} args.style - Optional style properties for the text element.
+ * @return {number} The height of the text element.
+ */
+export const getHorisontalSvgTextHeight = (args) => {
+    const { text, style } = args;
+    const textSelection = select(document.body).append('text').text(text);
+    const fontSize = get(style, 'fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE);
+    let height = 0;
+    if (fontSize) {
+        textSelection.style('font-size', fontSize);
+    }
+    textSelection
+        .each(function () {
+        height = this.getBoundingClientRect().height;
+    })
+        .remove();
+    return height;
+};

package/build/types/widget-data/bar-x.d.ts

@@ -1,5 +1,6 @@
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartKitWidgetSeriesOptions } from './series';
+import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
 export type BarXSeriesData<T = any> = BaseSeriesData<T> & {
     /** The x value of the point */
     x?: number;
@@ -7,6 +8,8 @@ export type BarXSeriesData<T = any> = BaseSeriesData<T> & {
     y?: number;
     /** Corresponding value of axis category */
     category?: string;
+    /** Data label value of the bar-x column. If not specified, the y value is used. */
+    label?: string | number;
 };
 export type BarXSeries<T = any> = BaseSeries & {
     type: 'bar-x';
@@ -15,6 +18,11 @@ export type BarXSeries<T = any> = BaseSeries & {
     name: string;
     /** The main color of the series (hex, rgba) */
     color?: string;
+    /** Whether to stack the values of each series on top of each other.
+     * Possible values are undefined to disable, "normal" to stack by value or "percent"
+     *
+     * @default undefined
+     * */
     stacking?: 'normal' | 'percent';
     /** This option allows grouping series in a stacked chart */
     stackId?: string;
@@ -25,7 +33,15 @@ export type BarXSeries<T = any> = BaseSeries & {
      * */
     grouping?: boolean;
     dataLabels?: ChartKitWidgetSeriesOptions['dataLabels'] & {
-        /** Whether to align the data label inside the box or to the actual value point */
+        /**
+         * Whether to align the data label inside or outside the box
+         *
+         * @default false
+         * */
         inside?: boolean;
     };
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartKitWidgetLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
 };

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

@@ -1,9 +1,19 @@
-import type { ChartKitWidgetLegend } from './legend';
 export type BaseSeries = {
-    /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartKitWidgetLegend;
     /** Initial visibility of the series */
     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?: {
+        /**
+         * Enable or disable the data labels
+         * @default true
+         */
+        enabled?: boolean;
+        style?: Partial<BaseTextStyle>;
+    };
 };
 export type BaseSeriesData<T = any> = {
     /**
@@ -15,4 +25,6 @@ export type BaseSeriesData<T = any> = {
 };
 export type BaseTextStyle = {
     fontSize: string;
+    fontWeight?: string;
+    fontColor?: string;
 };

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

@@ -1,3 +1,35 @@
 export type ChartKitWidgetLegend = {
     enabled?: boolean;
+    /** The horizontal alignment of the legend box within the chart area.
+     *
+     * @default center
+     * */
+    align?: 'left' | 'center' | 'right';
+    /** Defines the pixel distance between each legend item
+     *
+     * @default 20
+     * */
+    itemDistance?: number;
+};
+export type BaseLegendSymbol = {
+    /** The pixel padding between the legend item symbol and the legend item text.
+     *
+     * @default 5
+     * */
+    padding?: number;
+};
+export type RectLegendSymbolOptions = BaseLegendSymbol & {
+    /** The pixel width of the symbol for series types that use a rectangle in the legend
+     *
+     * @default 10
+     * */
+    width?: number;
+    /** The pixel width of the symbol for series types that use a rectangle in the legend
+     *
+     * @default 10
+     * */
+    height?: number;
+    /** The border radius of the symbol for series types that use a rectangle in the legend.
+     * Defaults to half the symbolHeight, effectively creating a circle. */
+    radius?: number;
 };

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

@@ -1,4 +1,5 @@
 import type { BaseSeries, BaseSeriesData } from './base';
+import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
 export type PieSeriesData<T = any> = BaseSeriesData<T> & {
     /** The value of the pie segment. */
     value: number;
@@ -8,20 +9,38 @@ export type PieSeriesData<T = any> = BaseSeriesData<T> & {
     color?: string;
     /** Initial visibility of the pie segment. */
     visible?: boolean;
+    /** Initial data label of the pie segment. If not specified, the value is used. */
+    label?: string;
 };
 export type PieSeries<T = any> = BaseSeries & {
     type: 'pie';
     data: PieSeriesData<T>[];
-    /** The color of the border surrounding each segment. Default `--g-color-base-background` from @gravity-ui/uikit. */
+    /**
+     * The color of the border surrounding each segment.
+     * @default `--g-color-base-background` from @gravity-ui/uikit.
+     */
     borderColor?: string;
-    /** The width of the border surrounding each segment. Default 1px. */
+    /**
+     * The width of the border surrounding each segment.
+     * @default '1px'
+     */
     borderWidth?: number;
-    /** The corner radius of the border surrounding each segment. Default 0. */
+    /**
+     * The corner radius of the border surrounding each segment.
+     * @default 0
+     */
     borderRadius?: number;
     /** The center of the pie chart relative to the chart area. */
     center?: [string | number | null, string | number | null];
-    /** The inner radius of the pie. Default 0. */
+    /**
+     * The inner radius of the pie.
+     * @default 0
+     */
     innerRadius?: string | number;
     /** The radius of the pie relative to the chart area. The default behaviour is to scale to the chart area. */
     radius?: string | number;
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartKitWidgetLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
 };

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

@@ -1,4 +1,5 @@
 import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
 export type ScatterSeriesData<T = any> = BaseSeriesData<T> & {
     /** The x value of the point */
     x?: number;
@@ -17,4 +18,8 @@ export type ScatterSeries<T = any> = BaseSeries & {
     color?: string;
     /** A predefined shape or symbol for the dot */
     symbol?: string;
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartKitWidgetLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
 };

package/package.json

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

package/build/plugins/d3/renderer/hooks/useChartOptions/constants.d.ts

@@ -1,3 +0,0 @@
-export declare const DEFAULT_AXIS_LABEL_FONT_SIZE = "11px";
-export declare const DEFAULT_AXIS_LABEL_PADDING = 10;
-export declare const DEFAULT_AXIS_TITLE_FONT_SIZE = "14px";

package/build/plugins/d3/renderer/hooks/useChartOptions/constants.js

@@ -1,3 +0,0 @@
-export const DEFAULT_AXIS_LABEL_FONT_SIZE = '11px';
-export const DEFAULT_AXIS_LABEL_PADDING = 10;
-export const DEFAULT_AXIS_TITLE_FONT_SIZE = '14px';

package/build/plugins/d3/renderer/hooks/useChartOptions/utils.d.ts

@@ -1,5 +0,0 @@
-import type { BaseTextStyle } from '../../../../../types/widget-data';
-export declare const getHorisontalSvgTextDimensions: (args: {
-    text: string;
-    style?: Partial<BaseTextStyle>;
-}) => number;

package/build/plugins/d3/renderer/hooks/useChartOptions/utils.js

@@ -1,18 +0,0 @@
-import { select } from 'd3';
-import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE } from './constants';
-export const getHorisontalSvgTextDimensions = (args) => {
-    const { text, style } = args;
-    const textSelection = select(document.body).append('text').text(text);
-    const fontSize = get(style, 'fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE);
-    let height = 0;
-    if (fontSize) {
-        textSelection.style('font-size', fontSize);
-    }
-    textSelection
-        .each(function () {
-        height = this.getBoundingClientRect().height;
-    })
-        .remove();
-    return height;
-};

package/build/plugins/d3/renderer/hooks/useLegend/index.d.ts

@@ -1,13 +0,0 @@
-import type { ChartKitWidgetSeries } from '../../../../../types/widget-data';
-export type OnLegendItemClick = (data: {
-    name: string;
-    metaKey: boolean;
-}) => void;
-type Args = {
-    series: ChartKitWidgetSeries[];
-};
-export declare const useLegend: (args: Args) => {
-    activeLegendItems: string[];
-    handleLegendItemClick: OnLegendItemClick;
-};
-export {};

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

@@ -1,59 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { isAxisRelatedSeries } from '../../utils';
-const getActiveLegendItems = (series) => {
-    return series.reduce((acc, s) => {
-        const isAxisRelated = isAxisRelatedSeries(s);
-        const isLegendEnabled = get(s, 'legend.enabled', true);
-        const isSeriesVisible = get(s, 'visible', true);
-        if (isLegendEnabled && isAxisRelated && isSeriesVisible && 'name' in s) {
-            acc.push(s.name);
-        }
-        else if (isLegendEnabled && !isAxisRelated) {
-            s.data.forEach((d) => {
-                const isDataVisible = get(d, 'visible', true);
-                if (isDataVisible && 'name' in d) {
-                    acc.push(d.name);
-                }
-            });
-        }
-        return acc;
-    }, []);
-};
-const getAllLegendItems = (series) => {
-    return series.reduce((acc, s) => {
-        if (isAxisRelatedSeries(s) && 'name' in s) {
-            acc.push(s.name);
-        }
-        else {
-            acc.push(...s.data.map((d) => ('name' in d && d.name) || ''));
-        }
-        return acc;
-    }, []);
-};
-export const useLegend = (args) => {
-    const { series } = args;
-    const [activeLegendItems, setActiveLegendItems] = React.useState(getActiveLegendItems(series));
-    const handleLegendItemClick = React.useCallback(({ name, metaKey }) => {
-        const onlyItemSelected = activeLegendItems.length === 1 && activeLegendItems.includes(name);
-        let nextActiveLegendItems;
-        if (metaKey && activeLegendItems.includes(name)) {
-            nextActiveLegendItems = activeLegendItems.filter((item) => item !== name);
-        }
-        else if (metaKey && !activeLegendItems.includes(name)) {
-            nextActiveLegendItems = activeLegendItems.concat(name);
-        }
-        else if (onlyItemSelected) {
-            nextActiveLegendItems = getAllLegendItems(series);
-        }
-        else {
-            nextActiveLegendItems = [name];
-        }
-        setActiveLegendItems(nextActiveLegendItems);
-    }, [series, activeLegendItems]);
-    // FIXME: remove effect. It initiates extra rerender
-    React.useEffect(() => {
-        setActiveLegendItems(getActiveLegendItems(series));
-    }, [series]);
-    return { activeLegendItems, handleLegendItemClick };
-};