@gravity-ui/charts 0.1.0

package/dist/cjs/components/Legend/index.js

@@ -0,0 +1,278 @@
+import React from 'react';
+import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
+import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
+import { getLineDashArray } from '../../hooks/useShapes/utils';
+import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, } from '../../utils';
+import { axisBottom } from '../../utils/chart/axis-generators';
+import './styles.css';
+const b = block('d3-legend');
+const 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 };
+};
+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);
+};
+const legendSymbolGenerator = lineGenerator()
+    .x((d) => d.x)
+    .y((d) => d.y);
+function renderLegendSymbol(args) {
+    const { selection, legend } = args;
+    const line = selection.data();
+    const getXPosition = (i) => {
+        return line.slice(0, i).reduce((acc, legendItem) => {
+            return (acc +
+                legendItem.symbol.width +
+                legendItem.symbol.padding +
+                legendItem.textWidth +
+                legend.itemDistance);
+        }, 0);
+    };
+    selection.each(function (d, i) {
+        const element = select(this);
+        const x = getXPosition(i);
+        const className = b('item-symbol', { shape: d.symbol.shape, unselected: !d.visible });
+        const color = d.visible ? d.color : '';
+        switch (d.symbol.shape) {
+            case 'path': {
+                const y = legend.lineHeight / 2;
+                const points = [
+                    { x: x, y },
+                    { x: x + d.symbol.width, y },
+                ];
+                element
+                    .append('path')
+                    .attr('d', legendSymbolGenerator(points))
+                    .attr('fill', 'none')
+                    .attr('stroke-width', d.symbol.strokeWidth)
+                    .attr('class', className)
+                    .style('stroke', color);
+                if (d.dashStyle) {
+                    element.attr('stroke-dasharray', getLineDashArray(d.dashStyle, d.symbol.strokeWidth));
+                }
+                break;
+            }
+            case 'rect': {
+                const y = (legend.lineHeight - d.symbol.height) / 2;
+                element
+                    .append('rect')
+                    .attr('x', x)
+                    .attr('y', y)
+                    .attr('width', d.symbol.width)
+                    .attr('height', d.symbol.height)
+                    .attr('rx', d.symbol.radius)
+                    .attr('class', className)
+                    .style('fill', color);
+                break;
+            }
+            case 'symbol': {
+                const y = legend.lineHeight / 2;
+                element
+                    .append('svg:path')
+                    .attr('d', () => {
+                    const scatterSymbol = getSymbol(d.symbol.symbolType);
+                    // D3 takes size as square pixels, so we need to make square pixels size by multiplying
+                    // https://d3js.org/d3-shape/symbol#symbol
+                    return symbol(scatterSymbol, d.symbol.width * d.symbol.width)();
+                })
+                    .attr('transform', () => {
+                    return 'translate(' + x + ',' + y + ')';
+                })
+                    .attr('class', className)
+                    .style('fill', color);
+                break;
+            }
+        }
+    });
+}
+export const Legend = (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, _b, _c, _d, _e;
+        if (!ref.current) {
+            return;
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        let legendWidth = 0;
+        if (legend.type === 'discrete') {
+            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 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 });
+                });
+                const getXPosition = (i) => {
+                    return line.slice(0, i).reduce((acc, legendItem) => {
+                        return (acc +
+                            legendItem.symbol.width +
+                            legendItem.symbol.padding +
+                            legendItem.textWidth +
+                            legend.itemDistance);
+                    }, 0);
+                };
+                renderLegendSymbol({ selection: legendItemTemplate, legend });
+                legendItemTemplate
+                    .append('text')
+                    .attr('x', function (legendItem, i) {
+                    return (getXPosition(i) + legendItem.symbol.width + legendItem.symbol.padding);
+                })
+                    .attr('height', legend.lineHeight)
+                    .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);
+                const contentWidth = ((_a = legendLine.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+                const { left } = getLegendPosition({
+                    align: legend.align,
+                    width: boundsWidth,
+                    offsetWidth: 0,
+                    contentWidth,
+                });
+                const top = legend.lineHeight * lineIndex;
+                legendLine.attr('transform', `translate(${[left, top].join(',')})`);
+            });
+            legendWidth = boundsWidth;
+            if (config.pagination) {
+                const transform = `translate(${[
+                    0,
+                    legend.lineHeight * config.pagination.limit + legend.lineHeight / 2,
+                ].join(',')})`;
+                appendPaginator({
+                    container: svgElement,
+                    offset: paginationOffset,
+                    maxPage: config.pagination.maxPage,
+                    legend,
+                    transform,
+                    onArrowClick: setPaginationOffset,
+                });
+            }
+        }
+        else {
+            // gradient rect
+            const domain = (_b = legend.colorScale.domain) !== null && _b !== void 0 ? _b : [];
+            const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
+            svgElement.call(createGradientRect, {
+                y: legend.title.height + legend.title.margin,
+                height: rectHeight,
+                width: legend.width,
+                interpolator: getContinuesColorFn({
+                    values: [0, 1],
+                    colors: legend.colorScale.colors,
+                    stops: legend.colorScale.stops,
+                }),
+            });
+            // ticks
+            const xAxisGenerator = axisBottom({
+                scale: scaleLinear(domain, [0, legend.width]),
+                ticks: {
+                    items: [[0, -rectHeight]],
+                    labelsMargin: legend.ticks.labelsMargin,
+                    labelsLineHeight: legend.ticks.labelsLineHeight,
+                    maxTickCount: 4,
+                    tickColor: '#fff',
+                },
+                domain: {
+                    size: legend.width,
+                    color: 'transparent',
+                },
+            });
+            const tickTop = legend.title.height + legend.title.margin + rectHeight;
+            svgElement
+                .append('g')
+                .attr('transform', `translate(0, ${tickTop})`)
+                .call(xAxisGenerator);
+            legendWidth = legend.width;
+        }
+        if (legend.title.enable) {
+            const { maxWidth: labelWidth } = getLabelsSize({
+                labels: [legend.title.text],
+                style: legend.title.style,
+            });
+            svgElement
+                .append('g')
+                .attr('class', b('title'))
+                .append('text')
+                .attr('dx', legend.width / 2 - labelWidth / 2)
+                .attr('font-weight', (_c = legend.title.style.fontWeight) !== null && _c !== void 0 ? _c : null)
+                .attr('font-size', (_d = legend.title.style.fontSize) !== null && _d !== void 0 ? _d : null)
+                .attr('fill', (_e = legend.title.style.fontColor) !== null && _e !== void 0 ? _e : null)
+                .style('alignment-baseline', 'before-edge')
+                .text(legend.title.text);
+        }
+        const { left } = getLegendPosition({
+            align: legend.align,
+            width: boundsWidth,
+            offsetWidth: config.offset.left,
+            contentWidth: legendWidth,
+        });
+        svgElement.attr('transform', `translate(${[left, config.offset.top].join(',')})`);
+    }, [boundsWidth, chartSeries, onItemClick, legend, items, config, paginationOffset]);
+    return React.createElement("g", { className: b(), ref: ref, width: boundsWidth, height: legend.height });
+};

package/dist/cjs/components/Legend/styles.css

@@ -0,0 +1,47 @@
+.gcharts-d3-legend {
+  color: var(--g-color-text-secondary);
+}
+.gcharts-d3-legend__title {
+  fill: var(--g-color-text-secondary);
+}
+.gcharts-d3-legend__item {
+  cursor: pointer;
+  user-select: none;
+}
+.gcharts-d3-legend__item-symbol_shape_rect.gcharts-d3-legend__item-symbol_unselected {
+  fill: var(--g-color-text-hint);
+}
+.gcharts-d3-legend__item-symbol_shape_path.gcharts-d3-legend__item-symbol_unselected {
+  stroke: var(--g-color-text-hint);
+}
+.gcharts-d3-legend__item-symbol_shape_symbol.gcharts-d3-legend__item-symbol_unselected {
+  fill: var(--g-color-text-hint);
+}
+.gcharts-d3-legend__item-text {
+  fill: var(--g-color-text-secondary);
+  alignment-baseline: before-edge;
+}
+.gcharts-d3-legend__item-text_unselected {
+  fill: var(--g-color-text-hint);
+}
+.gcharts-d3-legend__item-text:hover {
+  fill: var(--g-color-text-complementary);
+}
+.gcharts-d3-legend__pagination {
+  user-select: none;
+  fill: var(--g-color-text-primary);
+}
+.gcharts-d3-legend__pagination-counter, .gcharts-d3-legend__pagination-arrow {
+  alignment-baseline: middle;
+}
+.gcharts-d3-legend__pagination-arrow {
+  cursor: pointer;
+  fill: var(--g-color-text-brand);
+}
+.gcharts-d3-legend__pagination-arrow_inactive {
+  cursor: inherit;
+  fill: var(--g-color-base-generic-accent-disabled);
+}
+.gcharts-d3-legend__pagination-arrow:hover:not(.gcharts-d3-legend__pagination-arrow_inactive) {
+  fill: var(--g-color-base-brand-hover);
+}

package/dist/cjs/components/PlotTitle/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { PreparedPlotTitle } from '../../hooks/useSplit/types';
+import './styles.css';
+type Props = {
+    title?: PreparedPlotTitle;
+};
+export declare const PlotTitle: (props: Props) => React.JSX.Element | null;
+export {};

package/dist/cjs/components/PlotTitle/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { block } from '../../utils';
+import './styles.css';
+const b = block('d3-plot-title');
+export const PlotTitle = (props) => {
+    const { title } = props;
+    if (!title) {
+        return null;
+    }
+    const { x, y, text, style, height } = title;
+    return (React.createElement("text", { className: b(), dx: x, dy: y, dominantBaseline: "middle", textAnchor: "middle", style: Object.assign({ lineHeight: `${height}px` }, style) },
+        React.createElement("tspan", null, text)));
+};

package/dist/cjs/components/PlotTitle/styles.css

@@ -0,0 +1,5 @@
+.chartkit-d3-plot-title {
+  font-size: var(--g-text-subheader-3-font-size);
+  font-weight: var(--g-text-subheader-font-weight);
+  fill: var(--g-color-text-secondary);
+}

package/dist/cjs/components/Title/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { PreparedTitle } from '../../hooks';
+import './styles.css';
+type Props = PreparedTitle & {
+    chartWidth: number;
+};
+export declare const Title: (props: Props) => React.JSX.Element;
+export {};

package/dist/cjs/components/Title/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { block } from '../../utils';
+import './styles.css';
+const b = block('d3-title');
+export const Title = (props) => {
+    const { chartWidth, text, height, style } = props;
+    return (React.createElement("text", { className: b(), dx: chartWidth / 2, dy: height / 2, dominantBaseline: "middle", textAnchor: "middle", style: Object.assign({ lineHeight: `${height}px` }, style) },
+        React.createElement("tspan", null, text)));
+};

package/dist/cjs/components/Title/styles.css

@@ -0,0 +1,5 @@
+.gcharts-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);
+}

package/dist/cjs/components/Tooltip/DefaultContent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { PreparedAxis } from '../../hooks';
+import type { TooltipDataChunk } from '../../types';
+type Props = {
+    hovered: TooltipDataChunk[];
+    xAxis: PreparedAxis;
+    yAxis: PreparedAxis;
+};
+export declare const DefaultContent: ({ hovered, xAxis, yAxis }: Props) => React.JSX.Element;
+export {};

package/dist/cjs/components/Tooltip/DefaultContent.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { dateTime } from '@gravity-ui/date-utils';
+import get from 'lodash/get';
+import { formatNumber } from '../../libs';
+import { block, getDataCategoryValue, getWaterfallPointSubtotal } from '../../utils';
+const b = block('d3-tooltip');
+const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
+const getRowData = (fieldName, axis, data) => {
+    switch (axis.type) {
+        case 'category': {
+            const categories = get(axis, 'categories', []);
+            return getDataCategoryValue({ axisDirection: fieldName, categories, data });
+        }
+        case 'datetime': {
+            const value = get(data, fieldName);
+            if (!value) {
+                return undefined;
+            }
+            return dateTime({ input: value }).format(DEFAULT_DATE_FORMAT);
+        }
+        case 'linear':
+        default: {
+            const value = get(data, fieldName);
+            return formatNumber(value);
+        }
+    }
+};
+const getXRowData = (xAxis, data) => getRowData('x', xAxis, data);
+const getYRowData = (yAxis, data) => getRowData('y', yAxis, data);
+const getMeasureValue = (data, xAxis, yAxis) => {
+    var _a, _b;
+    if (data.every((item) => ['pie', 'treemap', 'waterfall'].includes(item.series.type))) {
+        return null;
+    }
+    if (data.some((item) => item.series.type === 'bar-y')) {
+        return getYRowData(yAxis, (_a = data[0]) === null || _a === void 0 ? void 0 : _a.data);
+    }
+    return getXRowData(xAxis, (_b = data[0]) === null || _b === void 0 ? void 0 : _b.data);
+};
+export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
+    const measureValue = getMeasureValue(hovered, xAxis, yAxis);
+    return (React.createElement(React.Fragment, null,
+        measureValue && React.createElement("div", null, measureValue),
+        hovered.map(({ data, series, closest }, i) => {
+            const id = `${get(series, 'id')}_${i}`;
+            const color = get(series, 'color');
+            switch (series.type) {
+                case 'scatter':
+                case 'line':
+                case 'area':
+                case 'bar-x': {
+                    const value = (React.createElement(React.Fragment, null,
+                        series.name,
+                        ": ",
+                        getYRowData(yAxis, data)));
+                    return (React.createElement("div", { key: id, className: b('content-row') },
+                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
+                        React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
+                }
+                case 'waterfall': {
+                    const isTotal = get(data, 'total', false);
+                    const subTotal = getWaterfallPointSubtotal(data, series);
+                    return (React.createElement("div", { key: `${id}_${get(data, 'x')}` },
+                        !isTotal && (React.createElement(React.Fragment, null,
+                            React.createElement("div", { key: id, className: b('content-row') },
+                                React.createElement("b", null, getXRowData(xAxis, data))),
+                            React.createElement("div", { className: b('content-row') },
+                                React.createElement("span", null,
+                                    series.name,
+                                    "\u00A0"),
+                                React.createElement("span", null, getYRowData(yAxis, data))))),
+                        React.createElement("div", { key: id, className: b('content-row') },
+                            isTotal ? 'Total' : 'Subtotal',
+                            ": ",
+                            subTotal)));
+                }
+                case 'bar-y': {
+                    const value = (React.createElement(React.Fragment, null,
+                        series.name,
+                        ": ",
+                        getXRowData(xAxis, data)));
+                    return (React.createElement("div", { key: id, className: b('content-row') },
+                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
+                        React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
+                }
+                case 'pie':
+                case 'treemap': {
+                    const seriesData = data;
+                    return (React.createElement("div", { key: id, className: b('content-row') },
+                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
+                        React.createElement("span", null,
+                            seriesData.name || seriesData.id,
+                            "\u00A0"),
+                        React.createElement("span", null, seriesData.value)));
+                }
+                default: {
+                    return null;
+                }
+            }
+        })));
+};

package/dist/cjs/components/Tooltip/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedAxis, PreparedTooltip } from '../../hooks';
+import './styles.css';
+type TooltipProps = {
+    dispatcher: Dispatch<object>;
+    tooltip: PreparedTooltip;
+    svgContainer: SVGSVGElement | null;
+    xAxis: PreparedAxis;
+    yAxis: PreparedAxis;
+};
+export declare const Tooltip: (props: TooltipProps) => React.JSX.Element | null;
+export {};

package/dist/cjs/components/Tooltip/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Popup, useVirtualElementRef } from '@gravity-ui/uikit';
+import isNil from 'lodash/isNil';
+import { useTooltip } from '../../hooks';
+import { block } from '../../utils';
+import { DefaultContent } from './DefaultContent';
+import './styles.css';
+const b = block('d3-tooltip');
+export const Tooltip = (props) => {
+    const { tooltip, xAxis, yAxis, svgContainer, dispatcher } = props;
+    const { hovered, pointerPosition } = useTooltip({ dispatcher, tooltip });
+    const containerRect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
+    const left = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) || 0) + containerRect.left;
+    const top = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[1]) || 0) + containerRect.top;
+    const anchorRef = useVirtualElementRef({ rect: { top, left } });
+    const content = React.useMemo(() => {
+        var _a;
+        if (!hovered) {
+            return null;
+        }
+        const customTooltip = (_a = tooltip.renderer) === null || _a === void 0 ? void 0 : _a.call(tooltip, { hovered });
+        return isNil(customTooltip) ? (React.createElement(DefaultContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
+    }, [hovered, tooltip, xAxis, yAxis]);
+    React.useEffect(() => {
+        window.dispatchEvent(new CustomEvent('scroll'));
+    }, [left, top]);
+    return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { className: b(), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }] },
+        React.createElement("div", { className: b('content') }, content))) : null;
+};

package/dist/cjs/components/Tooltip/styles.css

@@ -0,0 +1,29 @@
+.gcharts-d3-tooltip[class] {
+  --g-popup-border-width: 0;
+  pointer-events: none;
+}
+.gcharts-d3-tooltip[class] > div {
+  animation-duration: unset;
+  animation-timing-function: unset;
+  animation-fill-mode: unset;
+}
+.gcharts-d3-tooltip__content {
+  padding: 10px 14px;
+  text-wrap: nowrap;
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: 3px;
+  background-color: var(--g-color-infographics-tooltip-bg);
+  box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
+}
+.gcharts-d3-tooltip__content-row {
+  display: flex;
+  align-items: center;
+}
+.gcharts-d3-tooltip__color {
+  display: inline-block;
+  width: 16px;
+  height: 8px;
+  margin-inline-end: 8px;
+  border-radius: 2px;
+  background-color: #dddddd;
+}

package/dist/cjs/components/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ChartData } from '../types';
+export type ChartRef = {
+    reflow: () => void;
+};
+type ChartDimentions = {
+    height: number;
+    width: number;
+};
+export type ChartProps = {
+    data: ChartData;
+    lang?: string;
+    onResize?: (args: {
+        dimensions?: ChartDimentions;
+    }) => void;
+};
+export declare const Chart: React.ForwardRefExoticComponent<ChartProps & React.RefAttributes<ChartRef>>;
+export {};

package/dist/cjs/components/index.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { select } from 'd3';
+import debounce from 'lodash/debounce';
+import { i18nFactory } from '../i18n';
+import { getUniqId } from '../utils';
+import { validateData } from '../validation';
+import { ChartInner } from './ChartInner';
+export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
+    const { data, lang, onResize } = props;
+    const validatedData = React.useRef();
+    const ref = React.useRef(null);
+    const debounced = React.useRef();
+    const [dimensions, setDimensions] = React.useState();
+    if (validatedData.current !== data) {
+        validateData(data);
+        validatedData.current = data;
+    }
+    const handleResize = React.useCallback(() => {
+        var _a;
+        const parentElement = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (parentElement) {
+            const { width, height } = parentElement.getBoundingClientRect();
+            setDimensions({ width, height });
+        }
+    }, []);
+    const debuncedHandleResize = React.useMemo(() => {
+        var _a;
+        (_a = debounced.current) === null || _a === void 0 ? void 0 : _a.cancel();
+        debounced.current = debounce(handleResize, 200);
+        return debounced.current;
+    }, [handleResize]);
+    React.useImperativeHandle(forwardedRef, () => ({
+        reflow() {
+            debuncedHandleResize();
+        },
+    }), [debuncedHandleResize]);
+    React.useEffect(() => {
+        // dimensions initialize
+        debuncedHandleResize();
+    }, [debuncedHandleResize]);
+    React.useEffect(() => {
+        const selection = select(window);
+        // https://github.com/d3/d3-selection/blob/main/README.md#handling-events
+        const eventName = `resize.${getUniqId()}`;
+        selection.on(eventName, debuncedHandleResize);
+        return () => {
+            // https://d3js.org/d3-selection/events#selection_on
+            selection.on(eventName, null);
+        };
+    }, [debuncedHandleResize]);
+    React.useEffect(() => {
+        if (typeof onResize === 'function') {
+            onResize({ dimensions });
+        }
+    }, [dimensions, onResize]);
+    React.useEffect(() => {
+        if (lang && i18nFactory.lang !== lang) {
+            i18nFactory.setLang(lang);
+        }
+    }, [lang]);
+    return (React.createElement("div", { ref: ref, style: {
+            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.height) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (React.createElement(ChartInner, { height: dimensions === null || dimensions === void 0 ? void 0 : dimensions.height, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, data: data }))));
+});

package/dist/cjs/constants/defaults/axis.d.ts

@@ -0,0 +1,14 @@
+import type { BaseTextStyle, ChartAxis, ChartAxisType } from '../../types';
+export declare const axisLabelsDefaults: {
+    margin: number;
+    padding: number;
+    fontSize: number;
+    maxWidth: number;
+};
+type AxisTitleDefaults = Required<ChartAxis['title']> & {
+    style: BaseTextStyle;
+};
+export declare const xAxisTitleDefaults: AxisTitleDefaults;
+export declare const yAxisTitleDefaults: AxisTitleDefaults;
+export declare const DEFAULT_AXIS_TYPE: ChartAxisType;
+export {};