@gravity-ui/chartkit 3.1.2 → 3.2.0-beta.1

package/build/plugins/d3/renderer/components/Tooltip/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { TooltipHoveredData } from '../../../../../types/widget-data';
+import type { PointerPosition, PreparedAxis, PreparedTooltip } from '../../hooks';
+type TooltipProps = {
+    tooltip: PreparedTooltip;
+    xAxis: PreparedAxis;
+    yAxis: PreparedAxis;
+    hovered?: TooltipHoveredData;
+    pointerPosition?: PointerPosition;
+};
+export declare const Tooltip: (props: TooltipProps) => React.JSX.Element | null;
+export {};

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import { DefaultContent } from './DefaultContent';
+const b = block('chartkit-d3-tooltip');
+const POINTER_OFFSET_X = 20;
+export const Tooltip = (props) => {
+    const { hovered, pointerPosition, tooltip, xAxis, yAxis } = 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;
+    }, [hovered, pointerPosition]);
+    const position = React.useMemo(() => {
+        if (hovered && pointerPosition && size) {
+            const { clientWidth } = document.documentElement;
+            const { width, height } = size;
+            const [pointerLeft, pointetTop] = pointerPosition;
+            const outOfRightBoudary = pointerLeft + width + 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]);
+    const content = React.useMemo(() => {
+        if (tooltip.renderer && hovered) {
+            return tooltip.renderer({ hovered });
+        }
+        else if (hovered) {
+            return React.createElement(DefaultContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis });
+        }
+        return null;
+    }, [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));
+};

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

@@ -0,0 +1 @@
+export { Chart } from './Chart';

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

@@ -0,0 +1 @@
+export { Chart } from './Chart';

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

@@ -0,0 +1,61 @@
+.chartkit-d3-axis .domain {
+  stroke: var(--g-color-line-generic-active);
+}
+
+.chartkit-d3-axis .tick text {
+  color: var(--g-color-text-secondary);
+}
+
+.chartkit-d3-axis .tick line {
+  stroke: var(--g-color-line-generic);
+}
+
+.chartkit-d3-axis__title {
+  fill: var(--g-color-text-secondary);
+}
+
+.chartkit-d3-legend__item {
+  cursor: pointer;
+  user-select: none;
+}
+
+.chartkit-d3-legend__item-text {
+  fill: var(--g-color-text-secondary);
+}
+
+.chartkit-d3-legend__item-text_unselected {
+  fill: var(--g-color-text-hint);
+}
+
+.chartkit-d3-legend__item-text:hover {
+  fill: var(--g-color-text-complementary);
+}
+
+.chartkit-d3-scatter__point {
+  stroke-width: 1px;
+}
+
+.chartkit-d3_hovered .chartkit-d3-scatter__point {
+  opacity: 0.5;
+}
+
+.chartkit-d3-scatter__point:hover {
+  stroke: #fff;
+  opacity: 1;
+}
+
+.chartkit-d3-title {
+  font-size: var(--g-text-subheader-2-font-size);
+  font-weight: var(--g-text-subheader-font-weight);
+  fill: var(--g-color-text-primary);
+}
+
+.chartkit-d3-tooltip {
+  position: absolute;
+  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;
+}

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

@@ -0,0 +1 @@
+export declare const DEFAULT_PALETTE: string[];

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

@@ -0,0 +1,22 @@
+export const DEFAULT_PALETTE = [
+    '#4DA2F1',
+    '#FF3D64',
+    '#8AD554',
+    '#FFC636',
+    '#FFB9DD',
+    '#84D1EE',
+    '#FF91A1',
+    '#54A520',
+    '#DB9100',
+    '#BA74B3',
+    '#1F68A9',
+    '#ED65A9',
+    '#0FA08D',
+    '#FF7E00',
+    '#E8B0A4',
+    '#52A6C5',
+    '#BE2443',
+    '#70C1AF',
+    '#FFB46C',
+    '#DCA3D7',
+];

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

@@ -0,0 +1,10 @@
+export * from './useChartDimensions';
+export * from './useChartEvents';
+export * from './useChartOptions';
+export * from './useChartOptions/types';
+export * from './useLegend';
+export * from './useScales';
+export * from './useSeries';
+export * from './useShapes';
+export * from './useTooltip';
+export * from './useTooltip/types';

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

@@ -0,0 +1,10 @@
+export * from './useChartDimensions';
+export * from './useChartEvents';
+export * from './useChartOptions';
+export * from './useChartOptions/types';
+export * from './useLegend';
+export * from './useScales';
+export * from './useSeries';
+export * from './useShapes';
+export * from './useTooltip';
+export * from './useTooltip/types';

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

@@ -0,0 +1,17 @@
+import type { ChartMargin } from '../../../../../types/widget-data';
+import type { ChartOptions, PreparedAxis, PreparedTitle } from '../useChartOptions/types';
+type Args = {
+    width: number;
+    height: number;
+    margin: ChartMargin;
+    legend: ChartOptions['legend'];
+    title?: PreparedTitle;
+    xAxis?: PreparedAxis;
+    yAxis?: PreparedAxis[];
+};
+export declare const useChartDimensions: (args: Args) => {
+    boundsWidth: number;
+    boundsHeight: number;
+    legendHeight: number;
+};
+export {};

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

@@ -0,0 +1,13 @@
+const LEGEND_LINE_HEIGHT = 15;
+export const useChartDimensions = (args) => {
+    const { margin, legend, title, width, height, xAxis, yAxis } = args;
+    const legendHeight = legend.enabled ? LEGEND_LINE_HEIGHT : 0;
+    const titleHeight = (title === null || title === void 0 ? void 0 : title.height) || 0;
+    const xAxisTitleHeight = (xAxis === null || xAxis === void 0 ? void 0 : xAxis.title.height) || 0;
+    const yAxisTitleHeight = (yAxis === null || yAxis === void 0 ? void 0 : yAxis.reduce((acc, axis) => {
+        return acc + (axis.title.height || 0);
+    }, 0)) || 0;
+    const boundsWidth = width - margin.right - margin.left - yAxisTitleHeight;
+    const boundsHeight = height - margin.top - margin.bottom - legendHeight - titleHeight - xAxisTitleHeight;
+    return { boundsWidth, boundsHeight, legendHeight };
+};

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

@@ -0,0 +1,5 @@
+export declare const useChartEvents: () => {
+    chartHovered: boolean;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export const useChartEvents = () => {
+    const [chartHovered, setChartHovered] = React.useState(false);
+    const handleMouseEnter = React.useCallback(() => {
+        setChartHovered(true);
+    }, []);
+    const handleMouseLeave = React.useCallback(() => {
+        setChartHovered(false);
+    }, []);
+    return {
+        chartHovered,
+        handleMouseEnter,
+        handleMouseLeave,
+    };
+};

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

@@ -0,0 +1,8 @@
+import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { PreparedAxis, PreparedChart } from './types';
+export declare const getPreparedChart: (args: {
+    chart: ChartKitWidgetData['chart'];
+    series: ChartKitWidgetData['series'];
+    preparedXAxis: PreparedAxis;
+    preparedY1Axis: PreparedAxis;
+}) => PreparedChart;

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

@@ -0,0 +1,60 @@
+import { select, max } from 'd3';
+import get from 'lodash/get';
+import { formatAxisTickLabel, getDomainDataYBySeries } from '../../utils';
+import { getHorisontalSvgTextDimensions } from './utils';
+const AXIS_WIDTH = 1;
+const getAxisLabelMaxWidth = (args) => {
+    const { axis, series } = args;
+    let maxDomainValue;
+    let width = 0;
+    switch (axis.type) {
+        case 'category': {
+            const yCatigories = get(axis, 'categories', []);
+            maxDomainValue = [...yCatigories].sort((c1, c2) => c2.length - c1.length)[0];
+            break;
+        }
+        case 'datetime': {
+            const yTimestamps = get(axis, 'timestamps');
+            const domain = yTimestamps || getDomainDataYBySeries(series);
+            maxDomainValue = max(domain);
+            break;
+        }
+        case 'linear': {
+            const domain = getDomainDataYBySeries(series);
+            maxDomainValue = max(domain);
+        }
+    }
+    const formattedValue = formatAxisTickLabel({
+        axisType: axis.type,
+        value: maxDomainValue,
+        dateFormat: axis.labels.dateFormat,
+        numberFormat: axis.labels.numberFormat,
+    });
+    select(document.body)
+        .append('text')
+        .style('font-size', axis.labels.style.fontSize)
+        .text(formattedValue)
+        .each(function () {
+        width = this.getBoundingClientRect().width;
+    })
+        .remove();
+    return width;
+};
+export const getPreparedChart = (args) => {
+    const { chart, series, preparedXAxis, preparedY1Axis } = args;
+    const marginBottom = get(chart, 'margin.bottom', 0) +
+        preparedXAxis.labels.padding +
+        getHorisontalSvgTextDimensions({ text: 'Tmp', style: preparedXAxis.labels.style });
+    const marginLeft = get(chart, 'margin.left', AXIS_WIDTH) +
+        preparedY1Axis.labels.padding +
+        getAxisLabelMaxWidth({ axis: preparedY1Axis, series: series.data }) +
+        (preparedY1Axis.title.height || 0);
+    return {
+        margin: {
+            top: get(chart, 'margin.top', 0),
+            right: get(chart, 'margin.right', 0),
+            bottom: marginBottom,
+            left: marginLeft,
+        },
+    };
+};

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,3 @@
+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/index.d.ts

@@ -0,0 +1,3 @@
+import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { ChartOptions } from './types';
+export declare const useChartOptions: (args: ChartKitWidgetData) => ChartOptions;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { getPreparedChart } from './chart';
+import { getPreparedLegend } from './legend';
+import { getPreparedTitle } from './title';
+import { getPreparedTooltip } from './tooltip';
+import { getPreparedXAxis } from './x-axis';
+import { getPreparedYAxis } from './y-axis';
+export const useChartOptions = (args) => {
+    const { chart, series, legend, title, tooltip, xAxis, yAxis } = args;
+    const options = React.useMemo(() => {
+        const preparedTitle = getPreparedTitle({ title });
+        const preparedTooltip = getPreparedTooltip({ tooltip });
+        const preparedLegend = getPreparedLegend({ legend, series });
+        const preparedYAxis = getPreparedYAxis({ yAxis });
+        const preparedXAxis = getPreparedXAxis({ xAxis });
+        const preparedChart = getPreparedChart({
+            chart,
+            series,
+            preparedXAxis,
+            preparedY1Axis: preparedYAxis[0],
+        });
+        return {
+            chart: preparedChart,
+            legend: preparedLegend,
+            title: preparedTitle,
+            tooltip: preparedTooltip,
+            xAxis: preparedXAxis,
+            yAxis: preparedYAxis,
+        };
+    }, [chart, legend, title, tooltip, series, xAxis, yAxis]);
+    return options;
+};

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

@@ -0,0 +1,6 @@
+import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { PreparedLegend } from './types';
+export declare const getPreparedLegend: (args: {
+    legend: ChartKitWidgetData['legend'];
+    series: ChartKitWidgetData['series'];
+}) => PreparedLegend;

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

@@ -0,0 +1,7 @@
+export const getPreparedLegend = (args) => {
+    const { legend, series } = args;
+    const enabled = legend === null || legend === void 0 ? void 0 : legend.enabled;
+    return {
+        enabled: typeof enabled === 'boolean' ? enabled : series.data.length > 1,
+    };
+};

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

@@ -0,0 +1,5 @@
+import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { PreparedTitle } from './types';
+export declare const getPreparedTitle: ({ title, }: {
+    title: ChartKitWidgetData['title'];
+}) => PreparedTitle | undefined;

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

@@ -0,0 +1,17 @@
+import get from 'lodash/get';
+import { getHorisontalSvgTextDimensions } from './utils';
+const DEFAULT_TITLE_FONT_SIZE = '15px';
+const TITLE_PADDINGS = 8 * 2;
+export const getPreparedTitle = ({ title, }) => {
+    const titleText = get(title, 'text');
+    const titleStyle = {
+        fontSize: get(title, 'style.fontSize', DEFAULT_TITLE_FONT_SIZE),
+    };
+    const titleHeight = titleText
+        ? getHorisontalSvgTextDimensions({ text: titleText, style: titleStyle }) + TITLE_PADDINGS
+        : 0;
+    const preparedTitle = titleText
+        ? { text: titleText, style: titleStyle, height: titleHeight }
+        : undefined;
+    return preparedTitle;
+};

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

@@ -0,0 +1,5 @@
+import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { PreparedTooltip } from './types';
+export declare const getPreparedTooltip: (args: {
+    tooltip: ChartKitWidgetData['tooltip'];
+}) => PreparedTooltip;

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

@@ -0,0 +1,5 @@
+import get from 'lodash/get';
+export const getPreparedTooltip = (args) => {
+    const { tooltip } = args;
+    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true) });
+};

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

@@ -0,0 +1,33 @@
+import type { BaseTextStyle, ChartKitWidgetData, ChartKitWidgetAxis, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels, ChartKitWidgetLegend, ChartMargin } from '../../../../../types/widget-data';
+type PreparedAxisLabels = Omit<ChartKitWidgetAxisLabels, 'enabled' | 'padding' | 'style'> & Required<Pick<ChartKitWidgetAxisLabels, 'enabled' | 'padding'>> & {
+    style: BaseTextStyle;
+};
+export type PreparedChart = {
+    margin: ChartMargin;
+};
+export type PreparedLegend = Required<ChartKitWidgetLegend>;
+export type PreparedAxis = Omit<ChartKitWidgetAxis, 'type' | 'labels'> & {
+    type: ChartKitWidgetAxisType;
+    labels: PreparedAxisLabels;
+    title: {
+        height: number;
+        text: string;
+        style: BaseTextStyle;
+    };
+    min?: number;
+};
+export type PreparedTitle = ChartKitWidgetData['title'] & {
+    height: number;
+};
+export type PreparedTooltip = ChartKitWidgetData['tooltip'] & {
+    enabled: boolean;
+};
+export type ChartOptions = {
+    chart: PreparedChart;
+    legend: PreparedLegend;
+    tooltip: PreparedTooltip;
+    xAxis: PreparedAxis;
+    yAxis: PreparedAxis[];
+    title?: PreparedTitle;
+};
+export {};

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

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

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,18 @@
+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/useChartOptions/x-axis.d.ts

@@ -0,0 +1,5 @@
+import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { PreparedAxis } from './types';
+export declare const getPreparedXAxis: ({ xAxis }: {
+    xAxis: ChartKitWidgetData['xAxis'];
+}) => PreparedAxis;

package/build/plugins/d3/renderer/hooks/useChartOptions/x-axis.js

@@ -0,0 +1,29 @@
+import get from 'lodash/get';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_LABEL_PADDING, DEFAULT_AXIS_TITLE_FONT_SIZE, } from './constants';
+import { getHorisontalSvgTextDimensions } from './utils';
+export const getPreparedXAxis = ({ xAxis }) => {
+    const titleText = get(xAxis, 'title.text', '');
+    const titleStyle = {
+        fontSize: get(xAxis, 'title.style.fontSize', DEFAULT_AXIS_TITLE_FONT_SIZE),
+    };
+    const preparedXAxis = {
+        type: get(xAxis, 'type', 'linear'),
+        labels: {
+            enabled: get(xAxis, 'labels.enabled', true),
+            padding: get(xAxis, 'labels.padding', DEFAULT_AXIS_LABEL_PADDING),
+            dateFormat: get(xAxis, 'labels.dateFormat'),
+            numberFormat: get(xAxis, 'labels.numberFormat'),
+            style: { fontSize: get(xAxis, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE) },
+        },
+        categories: get(xAxis, 'categories'),
+        timestamps: get(xAxis, 'timestamps'),
+        title: {
+            text: titleText,
+            style: titleStyle,
+            height: titleText
+                ? getHorisontalSvgTextDimensions({ text: titleText, style: titleStyle })
+                : 0,
+        },
+    };
+    return preparedXAxis;
+};

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.d.ts

@@ -0,0 +1,5 @@
+import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { PreparedAxis } from './types';
+export declare const getPreparedYAxis: ({ yAxis }: {
+    yAxis: ChartKitWidgetData['yAxis'];
+}) => PreparedAxis[];

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.js

@@ -0,0 +1,35 @@
+import get from 'lodash/get';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_LABEL_PADDING, DEFAULT_AXIS_TITLE_FONT_SIZE, } from './constants';
+import { getHorisontalSvgTextDimensions } from './utils';
+export const getPreparedYAxis = ({ yAxis }) => {
+    // FIXME: add support for n axises
+    const yAxis1 = yAxis === null || yAxis === void 0 ? void 0 : yAxis[0];
+    const y1LabelsStyle = {
+        fontSize: get(yAxis1, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
+    };
+    const y1TitleText = get(yAxis1, 'title.text', '');
+    const y1TitleStyle = {
+        fontSize: get(yAxis1, 'title.style.fontSize', DEFAULT_AXIS_TITLE_FONT_SIZE),
+    };
+    const preparedY1Axis = {
+        type: get(yAxis1, 'type', 'linear'),
+        labels: {
+            enabled: get(yAxis1, 'labels.enabled', true),
+            padding: get(yAxis1, 'labels.padding', DEFAULT_AXIS_LABEL_PADDING),
+            dateFormat: get(yAxis1, 'labels.dateFormat'),
+            numberFormat: get(yAxis1, 'labels.numberFormat'),
+            style: y1LabelsStyle,
+        },
+        categories: get(yAxis1, 'categories'),
+        timestamps: get(yAxis1, 'timestamps'),
+        title: {
+            text: y1TitleText,
+            style: y1TitleStyle,
+            height: y1TitleText
+                ? getHorisontalSvgTextDimensions({ text: y1TitleText, style: y1TitleStyle })
+                : 0,
+        },
+        min: get(yAxis1, 'min'),
+    };
+    return [preparedY1Axis];
+};

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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { getVisibleSeriesNames } from '../../utils';
+export const useLegend = (args) => {
+    const { series } = args;
+    const [activeLegendItems, setActiveLegendItems] = React.useState(getVisibleSeriesNames(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 = getVisibleSeriesNames(series);
+        }
+        else {
+            nextActiveLegendItems = [name];
+        }
+        setActiveLegendItems(nextActiveLegendItems);
+    }, [series, activeLegendItems]);
+    // FIXME: remove effect. It initiates extra rerender
+    React.useEffect(() => {
+        setActiveLegendItems(getVisibleSeriesNames(series));
+    }, [series]);
+    return { activeLegendItems, handleLegendItemClick };
+};

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

@@ -0,0 +1,17 @@
+import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
+import type { ChartKitWidgetSeries } from '../../../../../types/widget-data';
+import type { ChartOptions } from '../useChartOptions/types';
+export type ChartScale = ScaleLinear<number, number> | ScaleBand<string> | ScaleTime<number, number>;
+type Args = {
+    boundsWidth: number;
+    boundsHeight: number;
+    series: ChartKitWidgetSeries[];
+    xAxis: ChartOptions['xAxis'];
+    yAxis: ChartOptions['yAxis'];
+};
+type ReturnValue = {
+    xScale: ChartScale;
+    yScale: ChartScale;
+};
+export declare const useScales: (args: Args) => ReturnValue;
+export {};