@gravity-ui/chartkit 4.5.0 → 4.6.1

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

@@ -4,9 +4,19 @@ import debounce from 'lodash/debounce';
 import { getRandomCKId } from '../../../utils';
 import { Chart } from './components';
 const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
+    const { data, onLoad, onRender } = props;
     const ref = React.useRef(null);
     const debounced = React.useRef();
     const [dimensions, setDimensions] = React.useState();
+    //FIXME: add chartPerfomance data to callbacks;
+    React.useLayoutEffect(() => {
+        if (onLoad) {
+            onLoad({});
+        }
+        if (onRender) {
+            onRender({});
+        }
+    }, []);
     const handleResize = React.useCallback(() => {
         var _a;
         const parentElement = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
@@ -44,6 +54,6 @@ const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
             width: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || '100%',
             height: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.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 }))));
+        } }, (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: data }))));
 });
 export default D3Widget;

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

@@ -5,7 +5,6 @@ type Props = {
     width: number;
     height: number;
     scale: ChartScale;
-    chartWidth: number;
 };
-export declare const AxisX: ({ axis, width, height, scale, chartWidth }: Props) => React.JSX.Element;
+export declare const AxisX: React.MemoExoticComponent<({ axis, width, height, scale }: Props) => React.JSX.Element>;
 export {};

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

@@ -1,74 +1,52 @@
 import React from 'react';
-import { axisBottom, select } from 'd3';
+import { select } from 'd3';
 import { block } from '../../../../utils/cn';
-import { formatAxisTickLabel, parseTransformStyle, setEllipsisForOverflowText } from '../utils';
+import { formatAxisTickLabel, getClosestPointsRange, setEllipsisForOverflowText, getTicksCount, getScaleTicks, getMaxTickCount, } from '../utils';
+import { axisBottom } from '../utils/axis-generators';
 const b = block('d3-axis');
-const EMPTY_SPACE_BETWEEN_LABELS = 10;
-// FIXME: add overflow ellipsis for the labels that out of boundaries
-export const AxisX = ({ axis, width, height, scale, chartWidth }) => {
+function getLabelFormatter({ axis, scale }) {
+    const ticks = getScaleTicks(scale);
+    const tickStep = getClosestPointsRange(axis, ticks);
+    return (value) => {
+        if (!axis.labels.enabled) {
+            return '';
+        }
+        return formatAxisTickLabel({
+            axis,
+            value,
+            step: tickStep,
+        });
+    };
+}
+export const AxisX = React.memo(({ axis, width, height, scale }) => {
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
             return;
         }
+        const xAxisGenerator = axisBottom({
+            scale: scale,
+            ticks: {
+                size: axis.grid.enabled ? height * -1 : 0,
+                labelFormat: getLabelFormatter({ axis, scale }),
+                labelsPaddings: axis.labels.padding,
+                labelsMargin: axis.labels.margin,
+                labelsStyle: axis.labels.style,
+                count: getTicksCount({ axis, range: width }),
+                maxTickCount: getMaxTickCount({ axis, width }),
+                autoRotation: axis.labels.autoRotation,
+            },
+            domain: {
+                size: width,
+                color: axis.lineColor,
+            },
+        });
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
-        const tickSize = axis.grid.enabled ? height * -1 : 0;
-        let xAxisGenerator = axisBottom(scale)
-            .tickSize(tickSize)
-            .tickPadding(axis.labels.padding)
-            .tickFormat((value) => {
-            if (!axis.labels.enabled) {
-                return '';
-            }
-            return formatAxisTickLabel({
-                axisType: axis.type,
-                value,
-                dateFormat: axis.labels['dateFormat'],
-                numberFormat: axis.labels['numberFormat'],
-            });
-        });
-        if (axis.ticks.pixelInterval) {
-            const ticksCount = width / axis.ticks.pixelInterval;
-            xAxisGenerator = xAxisGenerator.ticks(ticksCount);
-        }
-        svgElement.call(xAxisGenerator).attr('class', b());
         svgElement
-            .select('.domain')
-            .attr('d', `M0,0V0H${width}`)
-            .style('stroke', axis.lineColor || '');
-        if (axis.labels.enabled) {
-            svgElement.selectAll('.tick text').style('font-size', axis.labels.style.fontSize);
-        }
-        const transformStyle = svgElement.select('.tick').attr('transform');
-        const { x } = parseTransformStyle(transformStyle);
-        if (x === 0) {
-            // Remove tick that has the same x coordinate like domain
-            svgElement.select('.tick').remove();
-        }
-        // remove overlapping labels
-        let elementX = 0;
-        svgElement
-            .selectAll('.tick')
-            .filter(function () {
-            const node = this;
-            const r = node.getBoundingClientRect();
-            if (r.left < elementX) {
-                return true;
-            }
-            elementX = r.right + EMPTY_SPACE_BETWEEN_LABELS;
-            return false;
-        })
-            .remove();
-        // add an ellipsis to the labels on the right that go beyond the boundaries of the chart
-        svgElement.selectAll('.tick text').each(function () {
-            const node = this;
-            const textRect = node.getBoundingClientRect();
-            if (textRect.right > chartWidth) {
-                const maxWidth = textRect.width - (textRect.right - chartWidth) * 2;
-                select(node).call(setEllipsisForOverflowText, maxWidth);
-            }
-        });
+            .call(xAxisGenerator)
+            .attr('class', b())
+            .style('font-size', axis.labels.style.fontSize);
         // add an axis header if necessary
         if (axis.title.text) {
             const textY = axis.title.height + parseInt(axis.labels.style.fontSize) + axis.labels.padding;
@@ -84,4 +62,4 @@ export const AxisX = ({ axis, width, height, scale, chartWidth }) => {
         }
     }, [axis, width, height, scale]);
     return React.createElement("g", { ref: ref });
-};
+});

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

@@ -1,28 +1,9 @@
 import React from 'react';
 import { axisLeft, select } from 'd3';
 import { block } from '../../../../utils/cn';
-import { formatAxisTickLabel, parseTransformStyle } from '../utils';
+import { formatAxisTickLabel, getClosestPointsRange, parseTransformStyle, setEllipsisForOverflowText, setEllipsisForOverflowTexts, getTicksCount, getScaleTicks, } from '../utils';
 const b = block('d3-axis');
-const EMPTY_SPACE_BETWEEN_LABELS = 10;
-// Note: this method do not prepared for rotated labels
-const removeOverlappingYTicks = (axis) => {
-    var _a;
-    const a = axis.selectAll('g.tick').nodes();
-    if (a.length <= 1) {
-        return;
-    }
-    for (let i = 0, x = 0; i < a.length; i++) {
-        const node = a[i];
-        const r = node.getBoundingClientRect();
-        if (r.bottom > x && i !== 0) {
-            (_a = node === null || node === void 0 ? void 0 : node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
-        }
-        else {
-            x = r.top - EMPTY_SPACE_BETWEEN_LABELS;
-        }
-    }
-};
-// FIXME: add overflow ellipsis for the labels that out of boundaries
+const MAX_WIDTH = 80;
 export const AxisY = ({ axises, width, height, scale }) => {
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -33,22 +14,22 @@ export const AxisY = ({ axises, width, height, scale }) => {
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
         const tickSize = axis.grid.enabled ? width * -1 : 0;
+        const step = getClosestPointsRange(axis, getScaleTicks(scale));
         let yAxisGenerator = axisLeft(scale)
             .tickSize(tickSize)
-            .tickPadding(axis.labels.padding)
+            .tickPadding(axis.labels.margin)
             .tickFormat((value) => {
             if (!axis.labels.enabled) {
                 return '';
             }
             return formatAxisTickLabel({
-                axisType: axis.type,
+                axis,
                 value,
-                dateFormat: axis.labels['dateFormat'],
-                numberFormat: axis.labels['numberFormat'],
+                step,
             });
         });
-        if (axis.ticks.pixelInterval) {
-            const ticksCount = height / axis.ticks.pixelInterval;
+        const ticksCount = getTicksCount({ axis, range: height });
+        if (ticksCount) {
             yAxisGenerator = yAxisGenerator.ticks(ticksCount);
         }
         svgElement.call(yAxisGenerator).attr('class', b());
@@ -57,10 +38,11 @@ export const AxisY = ({ axises, width, height, scale }) => {
             .attr('d', `M0,${height}H0V0`)
             .style('stroke', axis.lineColor || '');
         if (axis.labels.enabled) {
-            svgElement
+            const tickTexts = svgElement
                 .selectAll('.tick text')
                 .style('font-size', axis.labels.style.fontSize)
                 .style('transform', 'translateY(-1px)');
+            tickTexts.call(setEllipsisForOverflowTexts, MAX_WIDTH);
         }
         const transformStyle = svgElement.select('.tick').attr('transform');
         const { y } = parseTransformStyle(transformStyle);
@@ -68,8 +50,23 @@ export const AxisY = ({ axises, width, height, scale }) => {
             // Remove stroke from tick that has the same y coordinate like domain
             svgElement.select('.tick line').style('stroke', 'none');
         }
+        // remove overlapping ticks
+        // Note: this method do not prepared for rotated labels
+        let elementY = 0;
+        svgElement
+            .selectAll('.tick')
+            .filter(function (_d, index) {
+            const node = this;
+            const r = node.getBoundingClientRect();
+            if (r.bottom > elementY && index !== 0) {
+                return true;
+            }
+            elementY = r.top - axis.labels.padding;
+            return false;
+        })
+            .remove();
         if (axis.title.text) {
-            const textY = axis.title.height + axis.labels.padding;
+            const textY = axis.title.height + axis.labels.margin;
             svgElement
                 .append('text')
                 .attr('class', b('title'))
@@ -78,9 +75,9 @@ export const AxisY = ({ axises, width, height, scale }) => {
                 .attr('dx', -height / 2)
                 .attr('font-size', axis.title.style.fontSize)
                 .attr('transform', 'rotate(-90)')
-                .text(axis.title.text);
+                .text(axis.title.text)
+                .call(setEllipsisForOverflowText, height);
         }
-        removeOverlappingYTicks(svgElement);
     }, [axises, width, height, scale]);
     return React.createElement("g", { ref: ref });
 };

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

@@ -1,26 +1,38 @@
 import React from 'react';
 import { block } from '../../../../utils/cn';
+import { useAxisScales, useChartDimensions, useChartEvents, useChartOptions, useSeries, useShapes, useTooltip, } from '../hooks';
 import { AxisY } from './AxisY';
 import { AxisX } from './AxisX';
 import { Legend } from './Legend';
 import { Title } from './Title';
 import { Tooltip } from './Tooltip';
-import { useChartDimensions, useChartEvents, useChartOptions, useAxisScales, useSeries, useShapes, useTooltip, } from '../hooks';
 import './styles.css';
 const b = block('d3');
 export const Chart = (props) => {
-    const { top, left, width, height, data } = props;
     // FIXME: add data validation
+    const { top, left, width, height, data } = props;
     const svgRef = React.createRef();
     const { chartHovered, handleMouseEnter, handleMouseLeave } = useChartEvents();
-    const { chart, legend, title, tooltip, xAxis, yAxis } = useChartOptions(data);
+    const { chart, title, tooltip, xAxis, yAxis } = useChartOptions({
+        data,
+    });
+    const { legendItems, legendConfig, preparedSeries, preparedLegend, handleLegendItemClick } = useSeries({
+        chartWidth: width,
+        chartHeight: height,
+        chartMargin: chart.margin,
+        series: data.series,
+        legend: data.legend,
+        preparedYAxis: yAxis,
+    });
     const { boundsWidth, boundsHeight } = useChartDimensions({
         width,
         height,
         margin: chart.margin,
-        yAxis,
+        preparedLegend,
+        preparedXAxis: xAxis,
+        preparedYAxis: yAxis,
+        preparedSeries: preparedSeries,
     });
-    const { preparedSeries, handleLegendItemClick } = useSeries({ series: data.series, legend });
     const { xScale, yScale } = useAxisScales({
         boundsWidth,
         boundsHeight,
@@ -53,8 +65,8 @@ export const Chart = (props) => {
                 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, chartWidth: width })))),
+                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale })))),
                 shapes),
-            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 }))),
+            preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, 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,12 +1,11 @@
 import React from 'react';
-import type { OnLegendItemClick, PreparedLegend, PreparedSeries } from '../hooks';
+import type { OnLegendItemClick, PreparedLegend, PreparedSeries, LegendItem, LegendConfig } from '../hooks';
 type Props = {
-    width: number;
-    height: number;
-    legend: PreparedLegend;
-    offsetWidth: number;
-    offsetHeight: number;
+    boundsWidth: number;
     chartSeries: PreparedSeries[];
+    legend: PreparedLegend;
+    items: LegendItem[][];
+    config: LegendConfig;
     onItemClick: OnLegendItemClick;
 };
 export declare const Legend: (props: Props) => React.JSX.Element;

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

@@ -1,18 +1,8 @@
 import React from 'react';
-import { select, sum } from 'd3';
-import get from 'lodash/get';
+import { select } from 'd3';
 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 getLegendPosition = (args) => {
     const { align, offsetWidth, width, contentWidth } = args;
     const top = 0;
     if (align === 'left') {
@@ -22,85 +12,150 @@ function getLegendPosition(args) {
         return { top, left: offsetWidth + width - contentWidth };
     }
     return { top, left: offsetWidth + width / 2 - contentWidth / 2 };
-}
+};
+const appendPaginator = (args) => {
+    const { container, offset, maxPage, legend, transform, onArrowClick } = args;
+    const paginationLine = container.append('g').attr('class', b('pagination'));
+    let computedWidth = 0;
+    paginationLine
+        .append('text')
+        .text('▲')
+        .attr('class', function () {
+        return b('pagination-arrow', { inactive: offset === 0 });
+    })
+        .style('font-size', legend.itemStyle.fontSize)
+        .each(function () {
+        computedWidth += this.getComputedTextLength();
+    })
+        .on('click', function () {
+        if (offset - 1 >= 0) {
+            onArrowClick(offset - 1);
+        }
+    });
+    paginationLine
+        .append('text')
+        .text(`${offset + 1}/${maxPage}`)
+        .attr('class', b('pagination-counter'))
+        .attr('x', computedWidth)
+        .style('font-size', legend.itemStyle.fontSize)
+        .each(function () {
+        computedWidth += this.getComputedTextLength();
+    });
+    paginationLine
+        .append('text')
+        .text('▼')
+        .attr('class', function () {
+        return b('pagination-arrow', { inactive: offset === maxPage - 1 });
+    })
+        .attr('x', computedWidth)
+        .style('font-size', legend.itemStyle.fontSize)
+        .on('click', function () {
+        if (offset + 1 < maxPage) {
+            onArrowClick(offset + 1);
+        }
+    });
+    paginationLine.attr('transform', transform);
+};
 export const Legend = (props) => {
-    const { width, offsetWidth, height, offsetHeight, chartSeries, legend, onItemClick } = props;
+    const { boundsWidth, chartSeries, legend, items, config, onItemClick } = props;
     const ref = React.useRef(null);
+    const [paginationOffset, setPaginationOffset] = React.useState(0);
+    React.useEffect(() => {
+        setPaginationOffset(0);
+    }, [boundsWidth]);
     React.useEffect(() => {
+        var _a;
         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;
+        const limit = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.limit;
+        const pageItems = typeof limit === 'number'
+            ? items.slice(paginationOffset * limit, paginationOffset * limit + limit)
+            : items;
+        pageItems.forEach((line, lineIndex) => {
+            var _a;
+            const textWidths = [];
+            const legendLine = svgElement.append('g').attr('class', b('line'));
+            const legendItemTemplate = legendLine
+                .selectAll('legend-history')
+                .data(line)
+                .enter()
+                .append('g')
+                .attr('class', b('item'))
+                .on('click', function (e, d) {
+                onItemClick({ name: d.name, metaKey: e.metaKey });
+            })
+                .each(function (d) {
+                textWidths.push(d.textWidth);
+            });
+            legendItemTemplate
+                .append('rect')
+                .attr('x', function (legendItem, i) {
+                return (i * legendItem.symbol.width +
+                    i * legend.itemDistance +
+                    i * legendItem.symbol.padding +
+                    textWidths.slice(0, i).reduce((acc, tw) => acc + tw, 0));
+            })
+                .attr('y', (legendItem) => {
+                const lineOffset = legend.lineHeight * lineIndex;
+                return config.offset.top + lineOffset - 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', function (d) {
+                return b('item-shape', { unselected: !d.visible });
+            })
+                .style('fill', function (d) {
+                return d.visible ? 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).reduce((acc, tw) => acc + tw, 0));
+            })
+                .attr('y', config.offset.top + legend.lineHeight * lineIndex)
+                .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('font-size', legend.itemStyle.fontSize)
+                .style('alignment-baseline', 'middle');
+            const contentWidth = ((_a = legendLine.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+            const { left } = getLegendPosition({
+                align: legend.align,
+                width: boundsWidth,
+                offsetWidth: config.offset.left,
+                contentWidth,
+            });
+            legendLine.attr('transform', `translate(${[left, 0].join(',')})`);
         });
-        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 });
+        if (config.pagination) {
+            const transform = `translate(${[
+                config.offset.left,
+                config.offset.top + legend.lineHeight * config.pagination.limit,
+            ].join(',')})`;
+            appendPaginator({
+                container: svgElement,
+                offset: paginationOffset,
+                maxPage: config.pagination.maxPage,
+                legend,
+                transform,
+                onArrowClick: setPaginationOffset,
+            });
+        }
+    }, [boundsWidth, chartSeries, onItemClick, legend, items, config, paginationOffset]);
+    return React.createElement("g", { ref: ref, width: boundsWidth, height: legend.height });
 };

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

@@ -23,6 +23,10 @@
   fill: var(--g-color-base-misc-medium);
 }
 
+.chartkit-d3-legend__item-shape_unselected {
+  fill: var(--g-color-text-hint);
+}
+
 .chartkit-d3-legend__item-text {
   fill: var(--g-color-text-secondary);
 }
@@ -35,6 +39,29 @@
   fill: var(--g-color-text-complementary);
 }
 
+.chartkit-d3-legend__pagination {
+  fill: var(--g-color-text-primary);
+  user-select: none;
+}
+
+.chartkit-d3-legend__pagination-counter, .chartkit-d3-legend__pagination-arrow {
+  alignment-baseline: middle;
+}
+
+.chartkit-d3-legend__pagination-arrow {
+  fill: var(--g-color-text-brand);
+  cursor: pointer;
+}
+
+.chartkit-d3-legend__pagination-arrow_inactive {
+  fill: var(--g-color-base-generic-accent-disabled);
+  cursor: inherit;
+}
+
+.chartkit-d3-legend__pagination-arrow:hover:not(.chartkit-d3-legend__pagination-arrow_inactive) {
+  fill: var(--g-color-base-brand-hover);
+}
+
 .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/defaults/axis.d.ts

@@ -0,0 +1,5 @@
+export declare const axisLabelsDefaults: {
+    margin: number;
+    padding: number;
+    fontSize: number;
+};

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

@@ -0,0 +1,5 @@
+export const axisLabelsDefaults = {
+    margin: 10,
+    padding: 10,
+    fontSize: 11,
+};

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

@@ -0,0 +1,2 @@
+export * from './axis';
+export * from './legend';

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

@@ -0,0 +1,2 @@
+export * from './axis';
+export * from './legend';

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

@@ -0,0 +1,4 @@
+import type { ChartKitWidgetLegend } from '../../../../../types';
+type LegendDefaults = Required<Omit<ChartKitWidgetLegend, 'enabled'>> & Pick<ChartKitWidgetLegend, 'enabled'>;
+export declare const legendDefaults: LegendDefaults;
+export {};