@gravity-ui/chartkit 3.1.3 → 3.2.0

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

@@ -0,0 +1,7 @@
+import { ChartKitPlugin } from '../../types';
+/**
+ * It is an experemental plugin
+ *
+ * DO NOT USE IT IN YOUR PRODUCTION
+ * */
+export declare const D3Plugin: ChartKitPlugin;

package/build/plugins/d3/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * It is an experemental plugin
+ *
+ * DO NOT USE IT IN YOUR PRODUCTION
+ * */
+export const D3Plugin = {
+    type: 'd3',
+    renderer: React.lazy(() => import('./renderer/D3Widget')),
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ChartKitWidgetRef } from '../../../types';
+declare const D3Widget: React.ForwardRefExoticComponent<{
+    type: "d3";
+    data: import("../../../types/widget-data").ChartKitWidgetData<any>;
+    id?: string | undefined;
+    isMobile?: boolean | undefined;
+    onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"d3"> | undefined) => void) | undefined;
+    onRender?: ((data: import("../../../types").ChartKitOnRenderData) => void) | undefined;
+    onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"d3">) => void) | undefined;
+    onError?: import("../../../types").ChartKitOnError | undefined;
+    renderError?: import("../../../types").RenderError | undefined;
+    renderPluginLoader?: (() => React.ReactNode) | undefined;
+} & {} & React.RefAttributes<ChartKitWidgetRef | undefined>>;
+export default D3Widget;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { select } from 'd3';
+import debounce from 'lodash/debounce';
+import { Chart } from './components';
+const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
+    const ref = React.useRef(null);
+    const debounced = React.useRef();
+    const [dimensions, setDimensions] = React.useState();
+    const handleResize = React.useCallback(() => {
+        if (ref.current) {
+            const { width, height } = ref.current.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() {
+            handleResize();
+        },
+    }), [handleResize]);
+    React.useEffect(() => {
+        const selection = select(window);
+        selection.on('resize', debuncedHandleResize);
+        return () => {
+            // https://d3js.org/d3-selection/events#selection_on
+            selection.on('resize', null);
+        };
+    }, [debuncedHandleResize]);
+    React.useEffect(() => {
+        // 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 }))));
+});
+export default D3Widget;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ChartOptions, ChartScale } from '../hooks';
+type Props = {
+    axis: ChartOptions['xAxis'];
+    width: number;
+    height: number;
+    scale: ChartScale;
+};
+export declare const AxisX: ({ axis, width, height, scale }: Props) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import { axisBottom, select } from 'd3';
+import { formatAxisTickLabel, parseTransformStyle } from '../utils';
+const b = block('chartkit-d3-axis');
+const EMPTY_SPACE_BETWEEN_LABELS = 10;
+// Note: this method do not prepared for rotated labels
+const removeOverlappingXTicks = (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.left < x) {
+            (_a = node === null || node === void 0 ? void 0 : node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
+        }
+        else {
+            x = r.right + EMPTY_SPACE_BETWEEN_LABELS;
+        }
+    }
+};
+// FIXME: add overflow ellipsis for the labels that out of boundaries
+export const AxisX = ({ axis, width, height, scale }) => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const xAxisGenerator = axisBottom(scale)
+            .tickSize(height * -1)
+            .tickPadding(axis.labels.padding)
+            .tickFormat((value) => {
+            return formatAxisTickLabel({
+                axisType: axis.type,
+                value,
+                dateFormat: axis.labels.dateFormat,
+                numberFormat: axis.labels.numberFormat,
+            });
+        });
+        svgElement.call(xAxisGenerator).attr('class', b());
+        svgElement.select('.domain').attr('d', `M0,0V0H${width}`);
+        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();
+        }
+        if (axis.title.text) {
+            const textY = axis.title.height + parseInt(axis.labels.style.fontSize) + axis.labels.padding;
+            svgElement
+                .append('text')
+                .attr('class', b('title'))
+                .attr('text-anchor', 'middle')
+                .attr('x', width / 2)
+                .attr('y', textY)
+                .attr('font-size', axis.title.style.fontSize)
+                .text(axis.title.text);
+        }
+        removeOverlappingXTicks(svgElement);
+    }, [axis, width, height, scale]);
+    return React.createElement("g", { ref: ref });
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ChartOptions, ChartScale } from '../hooks';
+type Props = {
+    axises: ChartOptions['yAxis'];
+    width: number;
+    height: number;
+    scale: ChartScale;
+};
+export declare const AxisY: ({ axises, width, height, scale }: Props) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import { axisLeft, select } from 'd3';
+import { formatAxisTickLabel, parseTransformStyle } from '../utils';
+const b = block('chartkit-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
+export const AxisY = ({ axises, width, height, scale }) => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const axis = axises[0];
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const yAxisGenerator = axisLeft(scale)
+            .tickSize(width * -1)
+            .tickPadding(axis.labels.padding)
+            .tickFormat((value) => {
+            return formatAxisTickLabel({
+                axisType: axis.type,
+                value,
+                dateFormat: axis.labels.dateFormat,
+                numberFormat: axis.labels.numberFormat,
+            });
+        });
+        svgElement.call(yAxisGenerator).attr('class', b());
+        svgElement.select('.domain').attr('d', `M0,${height}H0V0`);
+        svgElement
+            .selectAll('.tick text')
+            .style('font-size', axis.labels.style.fontSize)
+            .style('transform', 'translateY(-1px)');
+        const transformStyle = svgElement.select('.tick').attr('transform');
+        const { y } = parseTransformStyle(transformStyle);
+        if (y === height) {
+            // Remove stroke from tick that has the same y coordinate like domain
+            svgElement.select('.tick line').style('stroke', 'none');
+        }
+        if (axis.title.text) {
+            const textY = axis.title.height + axis.labels.padding;
+            svgElement
+                .append('text')
+                .attr('class', b('title'))
+                .attr('text-anchor', 'middle')
+                .attr('dy', -textY)
+                .attr('dx', -height / 2)
+                .attr('font-size', axis.title.style.fontSize)
+                .attr('transform', 'rotate(-90)')
+                .text(axis.title.text);
+        }
+        removeOverlappingYTicks(svgElement);
+    }, [axises, width, height, scale]);
+    return React.createElement("g", { ref: ref });
+};

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

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

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import { AxisY } from './AxisY';
+import { AxisX } from './AxisX';
+import { Legend } from './Legend';
+import { Title } from './Title';
+import { Tooltip } from './Tooltip';
+import { useChartDimensions, useChartEvents, useChartOptions, useLegend, useScales, useSeries, useShapes, useTooltip, } from '../hooks';
+import { isAxisRelatedSeries } from '../utils';
+import './styles.css';
+const b = block('chartkit-d3');
+export const Chart = ({ width, height, data }) => {
+    // FIXME: add data validation
+    const { series } = data;
+    const svgRef = React.createRef();
+    const hasAxisRelatedSeries = series.some(isAxisRelatedSeries);
+    const { chartHovered, handleMouseEnter, handleMouseLeave } = useChartEvents();
+    const { chart, legend, title, tooltip, xAxis, yAxis } = useChartOptions(data);
+    const { boundsWidth, boundsHeight, legendHeight } = useChartDimensions({
+        width,
+        height,
+        margin: chart.margin,
+        legend,
+        title,
+        xAxis,
+        yAxis,
+    });
+    const { activeLegendItems, handleLegendItemClick } = useLegend({ series });
+    const { chartSeries } = useSeries({ activeLegendItems, series });
+    const { xScale, yScale } = useScales({
+        boundsWidth,
+        boundsHeight,
+        series: chartSeries,
+        xAxis,
+        yAxis,
+    });
+    const { hovered, pointerPosition, handleSeriesMouseMove, handleSeriesMouseLeave } = useTooltip({
+        tooltip,
+    });
+    const { shapes } = useShapes({
+        series: chartSeries,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+        svgContainer: svgRef.current,
+        onSeriesMouseMove: handleSeriesMouseMove,
+        onSeriesMouseLeave: handleSeriesMouseLeave,
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("svg", { ref: svgRef, className: b({ hovered: chartHovered }), width: width, height: height, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+            title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
+            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[
+                    chart.margin.left,
+                    chart.margin.top + ((title === null || title === void 0 ? void 0 : title.height) || 0),
+                ].join(',')})` },
+                hasAxisRelatedSeries && (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 }))),
+        React.createElement(Tooltip, { hovered: hovered, pointerPosition: pointerPosition, tooltip: tooltip, xAxis: xAxis, yAxis: yAxis[0] })));
+};

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

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

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import { select } from 'd3';
+const b = block('chartkit-d3-legend');
+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');
+        } }));
+};

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+const b = block('chartkit-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: { fontSize: style === null || style === void 0 ? void 0 : style.fontSize, lineHeight: `${height}px` } },
+        React.createElement("tspan", null, text)));
+};

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

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

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
+    const { data, series } = hovered;
+    switch (series.type) {
+        case 'scatter': {
+            const scatterData = data;
+            const xRow = xAxis.type === 'category' ? scatterData.category : scatterData.x;
+            const yRow = yAxis.type === 'category' ? scatterData.category : scatterData.y;
+            return (React.createElement("div", null,
+                React.createElement("div", null,
+                    React.createElement("span", null, "X:\u00A0"),
+                    React.createElement("b", null, xRow)),
+                React.createElement("div", null,
+                    React.createElement("span", null, "Y:\u00A0"),
+                    React.createElement("b", null, yRow))));
+        }
+        default: {
+            return null;
+        }
+    }
+};

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 {};