@gravity-ui/chartkit 3.4.3 → 3.6.0

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

@@ -8,8 +8,8 @@ const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
     const [dimensions, setDimensions] = React.useState();
     const handleResize = React.useCallback(() => {
         if (ref.current) {
-            const { width, height } = ref.current.getBoundingClientRect();
-            setDimensions({ width, height });
+            const { top, left, width, height } = ref.current.getBoundingClientRect();
+            setDimensions({ top, left, width, height });
         }
     }, []);
     const debuncedHandleResize = React.useMemo(() => {
@@ -35,6 +35,6 @@ const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
         // dimensions initialize
         handleResize();
     }, [handleResize]);
-    return (React.createElement("div", { ref: ref, style: { width: '100%', height: '100%' } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { width: dimensions.width, height: dimensions.height, data: props.data }))));
+    return (React.createElement("div", { ref: ref, style: { width: '100%', height: '100%', position: 'relative' } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { top: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.top) || 0, left: dimensions.left || 0, width: dimensions.width, height: dimensions.height, data: props.data }))));
 });
 export default D3Widget;

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

@@ -2,9 +2,11 @@ import React from 'react';
 import type { ChartKitWidgetData } from '../../../../types/widget-data';
 import './styles.css';
 type Props = {
+    top: number;
+    left: number;
     width: number;
     height: number;
     data: ChartKitWidgetData;
 };
-export declare const Chart: ({ width, height, data }: Props) => React.JSX.Element;
+export declare const Chart: (props: Props) => React.JSX.Element;
 export {};

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

@@ -5,18 +5,16 @@ import { AxisX } from './AxisX';
 import { Legend } from './Legend';
 import { Title } from './Title';
 import { Tooltip } from './Tooltip';
-import { useChartDimensions, useChartEvents, useChartOptions, useLegend, useAxisScales, useSeries, useShapes, useTooltip, } from '../hooks';
-import { isAxisRelatedSeries } from '../utils';
+import { useChartDimensions, useChartEvents, useChartOptions, useAxisScales, useSeries, useShapes, useTooltip, } from '../hooks';
 import './styles.css';
 const b = block('d3');
-export const Chart = ({ width, height, data }) => {
+export const Chart = (props) => {
+    const { top, left, width, height, data } = props;
     // FIXME: add data validation
-    const { series } = data;
     const svgRef = React.createRef();
-    const hasAxisRelatedSeries = series.data.some(isAxisRelatedSeries);
     const { chartHovered, handleMouseEnter, handleMouseLeave } = useChartEvents();
     const { chart, legend, title, tooltip, xAxis, yAxis } = useChartOptions(data);
-    const { boundsWidth, boundsHeight, legendHeight } = useChartDimensions({
+    const { boundsWidth, boundsHeight } = useChartDimensions({
         width,
         height,
         margin: chart.margin,
@@ -25,12 +23,11 @@ export const Chart = ({ width, height, data }) => {
         xAxis,
         yAxis,
     });
-    const { activeLegendItems, handleLegendItemClick } = useLegend({ series: series.data });
-    const { chartSeries } = useSeries({ activeLegendItems, series: series.data });
+    const { preparedSeries, handleLegendItemClick } = useSeries({ series: data.series, legend });
     const { xScale, yScale } = useAxisScales({
         boundsWidth,
         boundsHeight,
-        series: chartSeries,
+        series: preparedSeries,
         xAxis,
         yAxis,
     });
@@ -38,7 +35,11 @@ export const Chart = ({ width, height, data }) => {
         tooltip,
     });
     const { shapes } = useShapes({
-        series: chartSeries,
+        top,
+        left,
+        boundsWidth,
+        boundsHeight,
+        series: preparedSeries,
         xAxis,
         xScale,
         yAxis,
@@ -54,11 +55,11 @@ export const Chart = ({ width, height, data }) => {
                     chart.margin.left,
                     chart.margin.top + ((title === null || title === void 0 ? void 0 : title.height) || 0),
                 ].join(',')})` },
-                hasAxisRelatedSeries && xScale && yScale && (React.createElement(React.Fragment, null,
+                xScale && yScale && (React.createElement(React.Fragment, null,
                     React.createElement(AxisY, { axises: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale })))),
                 shapes),
-            legend.enabled && (React.createElement(Legend, { width: boundsWidth, offsetWidth: chart.margin.left, height: legendHeight, offsetHeight: height - legendHeight / 2, chartSeries: chartSeries, onItemClick: handleLegendItemClick }))),
+            legend.enabled && (React.createElement(Legend, { width: boundsWidth, offsetWidth: chart.margin.left, height: legend.height, legend: legend, offsetHeight: height - legend.height / 2, chartSeries: preparedSeries, onItemClick: handleLegendItemClick }))),
         React.createElement(Tooltip, { hovered: hovered, pointerPosition: pointerPosition, tooltip: tooltip, xAxis: xAxis, yAxis: yAxis[0] })));
 };

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

@@ -1,11 +1,12 @@
 import React from 'react';
-import type { ChartSeries, OnLegendItemClick } from '../hooks';
+import type { OnLegendItemClick, PreparedLegend, PreparedSeries } from '../hooks';
 type Props = {
     width: number;
     height: number;
+    legend: PreparedLegend;
     offsetWidth: number;
     offsetHeight: number;
-    chartSeries: ChartSeries[];
+    chartSeries: PreparedSeries[];
     onItemClick: OnLegendItemClick;
 };
 export declare const Legend: (props: Props) => React.JSX.Element;

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

@@ -1,66 +1,106 @@
 import React from 'react';
-import { select } from 'd3';
+import { select, sum } from 'd3';
+import get from 'lodash/get';
 import { block } from '../../../../utils/cn';
 const b = block('d3-legend');
+const getLegendItems = (series) => {
+    return series.reduce((acc, s) => {
+        const legendEnabled = get(s, 'legend.enabled', true);
+        if (legendEnabled) {
+            acc.push(Object.assign(Object.assign({}, s), { symbol: s.legend.symbol }));
+        }
+        return acc;
+    }, []);
+};
+function getLegendPosition(args) {
+    const { align, offsetWidth, width, contentWidth } = args;
+    const top = 0;
+    if (align === 'left') {
+        return { top, left: offsetWidth };
+    }
+    if (align === 'right') {
+        return { top, left: offsetWidth + width - contentWidth };
+    }
+    return { top, left: offsetWidth + width / 2 - contentWidth / 2 };
+}
 export const Legend = (props) => {
-    const { width, offsetWidth, height, offsetHeight, chartSeries, onItemClick } = props;
-    return (React.createElement("g", { width: width, height: height, ref: (node) => {
-            if (!node) {
-                return;
-            }
-            const size = 10;
-            const textWidths = [0];
-            const svgElement = select(node);
-            svgElement.selectAll('*').remove();
-            const legendItemTemplate = svgElement
-                .selectAll('legend-history')
-                .data(chartSeries)
-                .enter()
-                .append('g')
-                .attr('class', b('item'))
-                .on('click', function (e, d) {
-                onItemClick({ name: d.name, metaKey: e.metaKey });
-            });
-            svgElement
-                .selectAll('*')
-                .data(chartSeries)
-                .append('text')
-                .text(function (d) {
-                return d.name;
-            })
-                .each(function () {
-                textWidths.push(this.getComputedTextLength());
-            })
-                .remove();
-            legendItemTemplate
-                .append('rect')
-                .attr('x', function (_d, i) {
-                return (offsetWidth +
-                    i * size +
-                    textWidths.slice(0, i + 1).reduce((acc, tw) => acc + tw, 0));
-            })
-                .attr('y', offsetHeight - size / 2)
-                .attr('width', size)
-                .attr('height', size)
-                .style('fill', function (d) {
-                return d.color;
-            });
-            legendItemTemplate
-                .append('text')
-                .attr('x', function (_d, i) {
-                return (offsetWidth +
-                    i * size +
-                    size +
-                    textWidths.slice(0, i + 1).reduce((acc, tw) => acc + tw, 0));
-            })
-                .attr('y', offsetHeight)
-                .attr('class', function (d) {
-                const mods = { selected: d.visible, unselected: !d.visible };
-                return b('item-text', mods);
-            })
-                .text(function (d) {
-                return ('name' in d && d.name);
-            })
-                .style('alignment-baseline', 'middle');
-        } }));
+    const { width, offsetWidth, height, offsetHeight, chartSeries, legend, onItemClick } = props;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const legendItems = getLegendItems(chartSeries);
+        const textWidths = [0];
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const legendItemTemplate = svgElement
+            .selectAll('legend-history')
+            .data(legendItems)
+            .enter()
+            .append('g')
+            .attr('class', b('item'))
+            .on('click', function (e, d) {
+            onItemClick({ name: d.name, metaKey: e.metaKey });
+        });
+        svgElement
+            .selectAll('*')
+            .data(legendItems)
+            .append('text')
+            .text(function (d) {
+            return d.name;
+        })
+            .each(function () {
+            textWidths.push(this.getComputedTextLength());
+        })
+            .remove();
+        legendItemTemplate
+            .append('rect')
+            .attr('x', function (legendItem, i) {
+            return (i * legendItem.symbol.width +
+                i * legend.itemDistance +
+                i * legendItem.symbol.padding +
+                textWidths.slice(0, i + 1).reduce((acc, tw) => acc + tw, 0));
+        })
+            .attr('y', (legendItem) => offsetHeight - legendItem.symbol.height / 2)
+            .attr('width', (legendItem) => {
+            return legendItem.symbol.width;
+        })
+            .attr('height', (legendItem) => legendItem.symbol.height)
+            .attr('rx', (legendItem) => legendItem.symbol.radius)
+            .attr('class', b('item-shape'))
+            .style('fill', function (d) {
+            return d.color;
+        });
+        legendItemTemplate
+            .append('text')
+            .attr('x', function (legendItem, i) {
+            return (i * legendItem.symbol.width +
+                i * legend.itemDistance +
+                i * legendItem.symbol.padding +
+                legendItem.symbol.width +
+                legendItem.symbol.padding +
+                textWidths.slice(0, i + 1).reduce((acc, tw) => acc + tw, 0));
+        })
+            .attr('y', offsetHeight)
+            .attr('class', function (d) {
+            const mods = { selected: d.visible, unselected: !d.visible };
+            return b('item-text', mods);
+        })
+            .text(function (d) {
+            return ('name' in d && d.name);
+        })
+            .style('alignment-baseline', 'middle');
+        const contentWidth = sum(textWidths) +
+            sum(legendItems, (item) => item.symbol.width + item.symbol.padding) +
+            legend.itemDistance * (legendItems.length - 1);
+        const { left } = getLegendPosition({
+            align: legend.align,
+            width,
+            offsetWidth,
+            contentWidth,
+        });
+        svgElement.attr('transform', `translate(${[left, 0].join(',')})`);
+    }, [width, offsetWidth, height, offsetHeight, chartSeries, onItemClick, legend]);
+    return React.createElement("g", { ref: ref, width: width, height: height });
 };

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

@@ -14,6 +14,18 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                     React.createElement("span", null, "Y:\u00A0"),
                     React.createElement("b", null, yRow))));
         }
+        case 'bar-x': {
+            const barXData = data;
+            const xRow = xAxis.type === 'category' ? barXData.category : barXData.x;
+            const yRow = yAxis.type === 'category' ? barXData.category : barXData.y;
+            return (React.createElement("div", null,
+                React.createElement("div", null, xRow),
+                React.createElement("div", null,
+                    React.createElement("span", null,
+                        React.createElement("b", null, series.name),
+                        ": ",
+                        yRow))));
+        }
         default: {
             return null;
         }

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

@@ -19,6 +19,10 @@
   user-select: none;
 }
 
+.chartkit-d3-legend__item-shape {
+  fill: var(--g-color-base-misc-medium);
+}
+
 .chartkit-d3-legend__item-text {
   fill: var(--g-color-text-secondary);
 }
@@ -31,19 +35,6 @@
   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);

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

@@ -1 +1,4 @@
 export declare const DEFAULT_PALETTE: string[];
+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/constants.js

@@ -20,3 +20,6 @@ export const DEFAULT_PALETTE = [
     '#FFB46C',
     '#DCA3D7',
 ];
+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/index.d.ts

@@ -2,9 +2,9 @@ export * from './useChartDimensions';
 export * from './useChartEvents';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
-export * from './useLegend';
 export * from './useAxisScales';
 export * from './useSeries';
+export * from './useSeries/types';
 export * from './useShapes';
 export * from './useTooltip';
 export * from './useTooltip/types';

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

@@ -2,9 +2,9 @@ export * from './useChartDimensions';
 export * from './useChartEvents';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
-export * from './useLegend';
 export * from './useAxisScales';
 export * from './useSeries';
+export * from './useSeries/types';
 export * from './useShapes';
 export * from './useTooltip';
 export * from './useTooltip/types';

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

@@ -1,11 +1,11 @@
 import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
-import type { ChartKitWidgetSeries } from '../../../../../types/widget-data';
 import type { ChartOptions } from '../useChartOptions/types';
+import { PreparedSeries } from '../useSeries/types';
 export type ChartScale = ScaleLinear<number, number> | ScaleBand<string> | ScaleTime<number, number>;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;
-    series: ChartKitWidgetSeries[];
+    series: PreparedSeries[];
     xAxis: ChartOptions['xAxis'];
     yAxis: ChartOptions['yAxis'];
 };

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

@@ -1,14 +1,14 @@
 import React from 'react';
 import { scaleBand, scaleLinear, scaleUtc, extent } from 'd3';
 import get from 'lodash/get';
-import { getOnlyVisibleSeries, getDomainDataXBySeries, getDomainDataYBySeries, isAxisRelatedSeries, } from '../../utils';
+import { getOnlyVisibleSeries, getDomainDataYBySeries, isAxisRelatedSeries, getDomainDataXBySeries, isSeriesWithCategoryValues, } from '../../utils';
 const isNumericalArrayData = (data) => {
     return data.every((d) => typeof d === 'number' || d === null);
 };
 const filterCategoriesByVisibleSeries = (categories, series) => {
     return categories.filter((category) => {
         return series.some((s) => {
-            return s.data.some((d) => 'category' in d && d.category === category);
+            return isSeriesWithCategoryValues(s) && s.data.some((d) => d.category === category);
         });
     });
 };

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

@@ -1,10 +1,10 @@
 import type { ChartMargin } from '../../../../../types/widget-data';
-import type { ChartOptions, PreparedAxis, PreparedTitle } from '../useChartOptions/types';
+import type { PreparedAxis, PreparedLegend, PreparedTitle } from '../useChartOptions/types';
 type Args = {
     width: number;
     height: number;
     margin: ChartMargin;
-    legend: ChartOptions['legend'];
+    legend: PreparedLegend;
     title?: PreparedTitle;
     xAxis?: PreparedAxis;
     yAxis?: PreparedAxis[];

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

@@ -1,13 +1,11 @@
-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 };
+    const boundsHeight = height - margin.top - margin.bottom - legend.height - titleHeight - xAxisTitleHeight;
+    return { boundsWidth, boundsHeight, legendHeight: legend.height };
 };

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

@@ -1,7 +1,6 @@
 import { select, max } from 'd3';
 import get from 'lodash/get';
-import { formatAxisTickLabel, getDomainDataYBySeries } from '../../utils';
-import { getHorisontalSvgTextDimensions } from './utils';
+import { formatAxisTickLabel, getDomainDataYBySeries, getHorisontalSvgTextHeight, isAxisRelatedSeries, } from '../../utils';
 const AXIS_WIDTH = 1;
 const getAxisLabelMaxWidth = (args) => {
     const { axis, series } = args;
@@ -9,8 +8,8 @@ const getAxisLabelMaxWidth = (args) => {
     let width = 0;
     switch (axis.type) {
         case 'category': {
-            const yCatigories = get(axis, 'categories', []);
-            maxDomainValue = [...yCatigories].sort((c1, c2) => c2.length - c1.length)[0];
+            const yCategories = get(axis, 'categories', []);
+            maxDomainValue = [...yCategories].sort((c1, c2) => c2.length - c1.length)[0];
             break;
         }
         case 'datetime': {
@@ -45,17 +44,24 @@ const getAxisLabelMaxWidth = (args) => {
 };
 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);
-    const marginTop = get(chart, 'margin.top', 0) +
-        getHorisontalSvgTextDimensions({ text: 'Tmp', style: preparedY1Axis.labels.style }) / 2;
-    const marginRight = get(chart, 'margin.right', 0) +
-        getAxisLabelMaxWidth({ axis: preparedXAxis, series: series.data }) / 2;
+    const hasAxisRelatedSeries = series.data.some(isAxisRelatedSeries);
+    let marginBottom = get(chart, 'margin.bottom', 0);
+    let marginLeft = get(chart, 'margin.left', 0);
+    let marginTop = get(chart, 'margin.top', 0);
+    let marginRight = get(chart, 'margin.right', 0);
+    if (hasAxisRelatedSeries) {
+        marginBottom +=
+            preparedXAxis.labels.padding +
+                getHorisontalSvgTextHeight({ text: 'Tmp', style: preparedXAxis.labels.style });
+        marginLeft +=
+            AXIS_WIDTH +
+                preparedY1Axis.labels.padding +
+                getAxisLabelMaxWidth({ axis: preparedY1Axis, series: series.data }) +
+                (preparedY1Axis.title.height || 0);
+        marginTop +=
+            getHorisontalSvgTextHeight({ text: 'Tmp', style: preparedY1Axis.labels.style }) / 2;
+        marginRight += getAxisLabelMaxWidth({ axis: preparedXAxis, series: series.data }) / 2;
+    }
     return {
         margin: {
             top: marginTop,

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

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

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

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

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

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

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

@@ -5,7 +5,9 @@ type PreparedAxisLabels = Omit<ChartKitWidgetAxisLabels, 'enabled' | 'padding' |
 export type PreparedChart = {
     margin: ChartMargin;
 };
-export type PreparedLegend = Required<ChartKitWidgetLegend>;
+export type PreparedLegend = Required<ChartKitWidgetLegend> & {
+    height: number;
+};
 export type PreparedAxis = Omit<ChartKitWidgetAxis, 'type' | 'labels'> & {
     type: ChartKitWidgetAxisType;
     labels: PreparedAxisLabels;

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

@@ -1,6 +1,6 @@
 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';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_LABEL_PADDING, DEFAULT_AXIS_TITLE_FONT_SIZE, } from '../../constants';
+import { getHorisontalSvgTextHeight } from '../../utils';
 export const getPreparedXAxis = ({ xAxis }) => {
     const titleText = get(xAxis, 'title.text', '');
     const titleStyle = {
@@ -21,7 +21,7 @@ export const getPreparedXAxis = ({ xAxis }) => {
             text: titleText,
             style: titleStyle,
             height: titleText
-                ? getHorisontalSvgTextDimensions({ text: titleText, style: titleStyle })
+                ? getHorisontalSvgTextHeight({ text: titleText, style: titleStyle })
                 : 0,
         },
         min: get(xAxis, 'min'),

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

@@ -1,6 +1,6 @@
 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';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_LABEL_PADDING, DEFAULT_AXIS_TITLE_FONT_SIZE, } from '../../constants';
+import { getHorisontalSvgTextHeight } from '../../utils';
 export const getPreparedYAxis = ({ yAxis }) => {
     // FIXME: add support for n axises
     const yAxis1 = yAxis === null || yAxis === void 0 ? void 0 : yAxis[0];
@@ -26,7 +26,7 @@ export const getPreparedYAxis = ({ yAxis }) => {
             text: y1TitleText,
             style: y1TitleStyle,
             height: y1TitleText
-                ? getHorisontalSvgTextDimensions({ text: y1TitleText, style: y1TitleStyle })
+                ? getHorisontalSvgTextHeight({ text: y1TitleText, style: y1TitleStyle })
                 : 0,
         },
         min: get(yAxis1, 'min'),

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

@@ -0,0 +1 @@
+export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 10;

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

@@ -0,0 +1 @@
+export const DEFAULT_LEGEND_SYMBOL_SIZE = 10;

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

@@ -1,14 +1,16 @@
-import type { ChartKitWidgetSeries } from '../../../../../types/widget-data';
-export type ChartSeries = ChartKitWidgetSeries & {
-    color: string;
+import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import { PreparedLegend } from '../useChartOptions/types';
+import { PreparedSeries } from './types';
+export type OnLegendItemClick = (data: {
     name: string;
-    visible: boolean;
-};
+    metaKey: boolean;
+}) => void;
 type Args = {
-    activeLegendItems: string[];
-    series: ChartKitWidgetSeries[];
+    legend: PreparedLegend;
+    series: ChartKitWidgetData['series'];
 };
 export declare const useSeries: (args: Args) => {
-    chartSeries: ChartSeries[];
+    preparedSeries: PreparedSeries[];
+    handleLegendItemClick: OnLegendItemClick;
 };
 export {};