@gravity-ui/charts 0.8.0 → 0.9.0

package/README.md

@@ -1,8 +1,5 @@
 # Gravity Charts · [![npm package](https://img.shields.io/npm/v/@gravity-ui/charts)](https://www.npmjs.com/package/@gravity-ui/charts) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/charts/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/charts/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/charts/)
 
-> [!WARNING]
-> The library may have major changes in minor releases while it is on version `0.*.*`.
-
 ## Install
 
 ```shell

package/dist/cjs/components/Axis/AxisX.d.ts

@@ -7,6 +7,7 @@ type Props = {
     height: number;
     scale: ChartScale;
     split: PreparedSplit;
+    plotRef?: React.MutableRefObject<SVGGElement | null>;
 };
 export declare function getTitlePosition(args: {
     axis: PreparedAxis;

package/dist/cjs/components/Axis/AxisX.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { select } from 'd3';
-import { block, formatAxisTickLabel, getAxisTitleRows, getClosestPointsRange, getMaxTickCount, getScaleTicks, getTicksCount, handleOverflowingText, } from '../../utils';
+import { line, select } from 'd3';
+import { block, formatAxisTickLabel, getAxisTitleRows, getClosestPointsRange, getLineDashArray, getMaxTickCount, getScaleTicks, getTicksCount, handleOverflowingText, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
-const b = block('d3-axis');
+const b = block('axis');
 function getLabelFormatter({ axis, scale }) {
     const ticks = getScaleTicks(scale);
     const tickStep = getClosestPointsRange(axis, ticks);
@@ -42,7 +42,7 @@ export function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisX = React.memo(function AxisX(props) {
-    const { axis, width, height: totalHeight, scale, split } = props;
+    const { axis, width, height: totalHeight, scale, split, plotRef } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -57,8 +57,9 @@ export const AxisX = React.memo(function AxisX(props) {
                 return [-top, -(top + height)];
             });
         }
+        const axisScale = scale;
         const xAxisGenerator = axisBottom({
-            scale: scale,
+            scale: axisScale,
             ticks: {
                 items: tickItems,
                 labelFormat: getLabelFormatter({ axis, scale }),
@@ -103,6 +104,42 @@ export const AxisX = React.memo(function AxisX(props) {
                 }
             });
         }
-    }, [axis, width, totalHeight, scale, split]);
+        // add plot lines
+        if (plotRef && axis.plotLines.length > 0) {
+            const plotLineClassName = b('plotLine');
+            const plotLineContainer = select(plotRef.current);
+            plotLineContainer.selectAll(`.${plotLineClassName}-x`).remove();
+            const plotLinesSelection = plotLineContainer
+                .selectAll(`.${plotLineClassName}-x`)
+                .data(axis.plotLines)
+                .join('g')
+                .attr('class', `${plotLineClassName}-x`);
+            const lineGenerator = line();
+            plotLinesSelection
+                .append('path')
+                .attr('d', (plotLine) => {
+                const plotLineValue = Number(axisScale(plotLine.value));
+                const points = [
+                    [plotLineValue, 0],
+                    [plotLineValue, totalHeight],
+                ];
+                return lineGenerator(points);
+            })
+                .attr('stroke', (plotLine) => plotLine.color)
+                .attr('stroke-width', (plotLine) => plotLine.width)
+                .attr('stroke-dasharray', (plotLine) => getLineDashArray(plotLine.dashStyle, plotLine.width))
+                .attr('opacity', (plotLine) => plotLine.opacity);
+            // set layer placement
+            plotLinesSelection.each((plotLineData, i, nodes) => {
+                const plotLineSelection = select(nodes[i]);
+                if (plotLineData.layerPlacement === 'before') {
+                    plotLineSelection.lower();
+                }
+                else {
+                    plotLineSelection.raise();
+                }
+            });
+        }
+    }, [axis, width, totalHeight, scale, split, plotRef]);
     return React.createElement("g", { ref: ref });
 });

package/dist/cjs/components/Axis/AxisY.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { axisLeft, axisRight, line, select } from 'd3';
 import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
 import './styles.css';
-const b = block('d3-axis');
+const b = block('axis');
 function transformLabel(args) {
     const { node, axis } = args;
     let topOffset = axis.labels.lineHeight / 2;
@@ -56,11 +56,14 @@ function getTitlePosition(args) {
     if (rowCount < 1) {
         return { x: 0, y: 0 };
     }
-    const x = -(axis.title.height -
+    let x = axis.title.height -
         axis.title.height / rowCount +
         axis.title.margin +
         axis.labels.margin +
-        axis.labels.width);
+        axis.labels.width;
+    if (axis.position === 'left') {
+        x = x * -1;
+    }
     let y;
     switch (axis.title.align) {
         case 'left': {
@@ -82,6 +85,7 @@ export const AxisY = (props) => {
     const { axes, width, height: totalHeight, scale, split, plotRef } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
+    const lineGenerator = line();
     React.useEffect(() => {
         if (!ref.current) {
             return;
@@ -174,7 +178,7 @@ export const AxisY = (props) => {
                         [0, plotLineValue],
                         [width, plotLineValue],
                     ];
-                    return line()(points);
+                    return lineGenerator(points);
                 })
                     .attr('stroke', (plotLine) => plotLine.color)
                     .attr('stroke-width', (plotLine) => plotLine.width)
@@ -199,7 +203,7 @@ export const AxisY = (props) => {
                 [0, 0],
                 [0, height],
             ];
-            return line()(points);
+            return lineGenerator(points);
         })
             .style('stroke', (d) => d.lineColor || '');
         svgElement.selectAll('.tick').each((_d, index, nodes) => {

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

@@ -1,17 +1,17 @@
-.gcharts-d3-axis .domain {
+.gcharts-axis .domain {
   stroke: var(--g-color-line-generic-active);
 }
-.gcharts-d3-axis .tick text {
+.gcharts-axis .tick text {
   color: var(--g-color-text-secondary);
   alignment-baseline: after-edge;
 }
-.gcharts-d3-axis .tick line, .gcharts-d3-axis .tick path {
+.gcharts-axis .tick line, .gcharts-axis .tick path {
   stroke: var(--g-color-line-generic);
 }
-.gcharts-d3-axis__title {
+.gcharts-axis__title {
   alignment-baseline: after-edge;
   fill: var(--g-color-text-secondary);
 }
-.gcharts-d3-axis__title tspan {
+.gcharts-axis__title tspan {
   alignment-baseline: after-edge;
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EventType, block, getD3Dispatcher } from '../../utils';
+import { EventType, block, getDispatcher } from '../../utils';
 import { AxisX, AxisY } from '../Axis';
 import { Legend } from '../Legend';
 import { PlotTitle } from '../PlotTitle';
@@ -9,14 +9,14 @@ import { useChartInnerHandlers } from './useChartInnerHandlers';
 import { useChartInnerProps } from './useChartInnerProps';
 import { useChartInnerState } from './useChartInnerState';
 import './styles.css';
-const b = block('d3');
+const b = block('chart');
 export const ChartInner = (props) => {
     var _a, _b, _c, _d;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
     const htmlLayerRef = React.useRef(null);
     const plotRef = React.useRef(null);
-    const dispatcher = React.useMemo(() => getD3Dispatcher(), []);
+    const dispatcher = React.useMemo(() => getDispatcher(), []);
     const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher, htmlLayout: htmlLayerRef.current }));
     const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
         dispatcher,
@@ -35,6 +35,7 @@ export const ChartInner = (props) => {
         unpinTooltip,
         xAxis,
         yAxis,
+        tooltipThrottle: tooltip.throttle,
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
     const pointerMoveHandler = (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.pointermove;
@@ -68,7 +69,7 @@ export const ChartInner = (props) => {
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
                     React.createElement(AxisY, { axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotRef: plotRef }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit })))),
+                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
                 shapes),
             preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip }))),
         React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {

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

@@ -1,10 +1,10 @@
-.gcharts-d3 {
-  --d3-data-labels: var(--g-color-text-secondary);
+.gcharts-chart {
+  --gcharts-data-labels: var(--g-color-text-secondary);
   position: absolute;
 }
-.gcharts-d3__html-layer {
+.gcharts-chart__html-layer {
   display: contents;
 }
-.gcharts-d3__html-layer > * {
+.gcharts-chart__html-layer > * {
   transform: inherit;
 }

package/dist/cjs/components/ChartInner/useChartInnerHandlers.d.ts

@@ -16,6 +16,7 @@ type Props = {
     unpinTooltip: ChartInnerState['unpinTooltip'];
     xAxis: PreparedAxis;
     yAxis: PreparedAxis[];
+    tooltipThrottle: number;
 };
 export declare function useChartInnerHandlers(props: Props): {
     handleChartClick: (event: React.MouseEvent<SVGSVGElement>) => void;

package/dist/cjs/components/ChartInner/useChartInnerHandlers.js

@@ -4,9 +4,8 @@ import throttle from 'lodash/throttle';
 import { IS_TOUCH_ENABLED } from '../../constants';
 import { EventType } from '../../utils';
 import { getClosestPoints } from '../../utils/chart/get-closest-data';
-const THROTTLE_DELAY = 50;
 export function useChartInnerHandlers(props) {
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, dispatcher, shapesData, svgContainer, togglePinTooltip, tooltipPinned, unpinTooltip, xAxis, yAxis, } = props;
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, dispatcher, shapesData, svgContainer, togglePinTooltip, tooltipPinned, unpinTooltip, xAxis, yAxis, tooltipThrottle, } = props;
     const isOutsideBounds = React.useCallback((x, y) => {
         return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
     }, [boundsHeight, boundsWidth]);
@@ -40,7 +39,7 @@ export function useChartInnerHandlers(props) {
     };
     const throttledHandleMouseMove = IS_TOUCH_ENABLED
         ? undefined
-        : throttle(handleMouseMove, THROTTLE_DELAY);
+        : throttle(handleMouseMove, tooltipThrottle);
     const handleMouseLeave = (event) => {
         if (tooltipPinned) {
             return;
@@ -55,7 +54,7 @@ export function useChartInnerHandlers(props) {
         handleMove([pointerX, pointerY], event);
     };
     const throttledHandleTouchMove = IS_TOUCH_ENABLED
-        ? throttle(handleTouchMove, THROTTLE_DELAY)
+        ? throttle(handleTouchMove, tooltipThrottle)
         : undefined;
     const handleChartClick = (event) => {
         const [pointerX, pointerY] = pointer(event, svgContainer);

package/dist/cjs/components/ChartInner/useChartInnerProps.d.ts

@@ -29,11 +29,12 @@ export declare function useChartInnerProps(props: Props): {
     prevWidth: number | undefined;
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: import("../../hooks").ShapeData[];
-    title: (import("../../types").ChartTitle & {
+    title: (import("../..").ChartTitle & {
         height: number;
     }) | undefined;
-    tooltip: import("../../types").ChartTooltip<any> & {
+    tooltip: import("../..").ChartTooltip<any> & {
         enabled: boolean;
+        throttle: number;
     };
     xAxis: import("../../hooks").PreparedAxis;
     xScale: import("../../hooks").ChartScale | undefined;

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

@@ -5,7 +5,7 @@ import { formatNumber } from '../../libs';
 import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineDashArray, getSymbol, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
-const b = block('d3-legend');
+const b = block('legend');
 const getLegendPosition = (args) => {
     const { align, offsetWidth = 0, width, contentWidth } = args;
     const top = 0;

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

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { block } from '../../utils';
 import './styles.css';
-const b = block('d3-title');
+const b = block('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) },

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

@@ -1,4 +1,4 @@
-.gcharts-d3-title {
+.gcharts-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/hooks/useChartOptions/tooltip.js

@@ -1,5 +1,6 @@
 import get from 'lodash/get';
 export const getPreparedTooltip = (args) => {
+    var _a;
     const { tooltip } = args;
-    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true) });
+    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true), throttle: (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.throttle) !== null && _a !== void 0 ? _a : 0 });
 };

package/dist/cjs/hooks/useChartOptions/types.d.ts

@@ -19,7 +19,7 @@ export type PreparedAxisPlotLine = {
     opacity: number;
     layerPlacement: AxisPlotLine['layerPlacement'];
 };
-export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels'> & {
+export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines'> & {
     type: ChartAxisType;
     labels: PreparedAxisLabels;
     title: {
@@ -48,6 +48,7 @@ export type PreparedTitle = ChartData['title'] & {
 };
 export type PreparedTooltip = ChartData['tooltip'] & {
     enabled: boolean;
+    throttle: number;
 };
 export type ChartOptions = {
     chart: PreparedChart;

package/dist/cjs/hooks/useChartOptions/x-axis.js

@@ -1,5 +1,5 @@
 import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE, DashStyle, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_X_AXIS, calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 function getLabelSettings({ axis, series, width, autoRotation = true, }) {
@@ -102,7 +102,14 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
         },
         position: 'bottom',
         plotIndex: 0,
-        plotLines: [],
+        plotLines: get(xAxis, 'plotLines', []).map((d) => ({
+            value: get(d, 'value', 0),
+            color: get(d, 'color', 'var(--g-color-base-brand)'),
+            width: get(d, 'width', 1),
+            dashStyle: get(d, 'dashStyle', DashStyle.Solid),
+            opacity: get(d, 'opacity', 1),
+            layerPlacement: get(d, 'layerPlacement', 'before'),
+        })),
     };
     const { height, rotation } = getLabelSettings({
         axis: preparedXAxis,

package/dist/cjs/hooks/useSeries/constants.js

@@ -4,7 +4,7 @@ export const DEFAULT_DATALABELS_PADDING = 5;
 export const DEFAULT_DATALABELS_STYLE = {
     fontSize: '11px',
     fontWeight: 'bold',
-    fontColor: 'var(--d3-data-labels)',
+    fontColor: 'var(--gcharts-data-labels)',
 };
 export const DEFAULT_HALO_OPTIONS = {
     enabled: true,

package/dist/cjs/hooks/useShapes/area/index.js

@@ -5,7 +5,7 @@ import { block, filterOverlappingLabels } from '../../..//utils';
 import { HtmlLayer } from '../HtmlLayer';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState } from '../utils';
-const b = block('d3-area');
+const b = block('area');
 export const AreaSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const hoveredDataRef = React.useRef(null);

package/dist/cjs/hooks/useShapes/line/index.js

@@ -5,7 +5,7 @@ import { block, filterOverlappingLabels, getLineDashArray } from '../../../utils
 import { HtmlLayer } from '../HtmlLayer';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState } from '../utils';
-const b = block('d3-line');
+const b = block('line');
 export const LineSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const hoveredDataRef = React.useRef(null);

package/dist/cjs/hooks/useShapes/marker.js

@@ -2,7 +2,7 @@ import { symbol } from 'd3';
 import get from 'lodash/get';
 import { SymbolType } from '../../constants';
 import { block, getSymbol } from '../../utils';
-const b = block('d3-marker');
+const b = block('marker');
 const haloClassName = b('halo');
 const symbolClassName = b('symbol');
 export function renderMarker(selection) {

package/dist/cjs/hooks/useShapes/pie/index.js

@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import { block, setEllipsisForOverflowTexts } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
 import { setActiveState } from '../utils';
-const b = block('d3-pie');
+const b = block('pie');
 export function getHaloVisibility(d) {
     const enabled = d.data.pie.halo.enabled && d.data.hovered;
     return enabled ? '' : 'hidden';

package/dist/cjs/hooks/useShapes/scatter/index.js

@@ -6,7 +6,7 @@ import { HtmlLayer } from '../HtmlLayer';
 import { getMarkerHaloVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState, shapeKey } from '../utils';
 export { prepareScatterData } from './prepare-data';
-const b = block('d3-scatter');
+const b = block('scatter');
 export function ScatterSeriesShape(props) {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
     const hoveredDataRef = React.useRef(null);

package/dist/cjs/hooks/useShapes/styles.css

@@ -1,11 +1,11 @@
-.gcharts-d3-scatter__point {
+.gcharts-scatter__point {
   stroke-width: 1px;
 }
 
-.gcharts-d3-pie__segment {
+.gcharts-pie__segment {
   stroke: var(--g-color-base-background);
 }
-.gcharts-d3-pie__label {
+.gcharts-pie__label {
   font-size: 11px;
   font-weight: bold;
   fill: var(--g-color-text-complementary);
@@ -23,13 +23,13 @@
   alignment-baseline: after-edge;
 }
 
-.gcharts-d3-treemap__label {
+.gcharts-treemap__label {
   user-select: none;
   pointer-events: none;
   fill: var(--g-color-text-complementary);
   alignment-baseline: text-before-edge;
 }
 
-.gcharts-d3-waterfall__connector {
+.gcharts-waterfall__connector {
   stroke: var(--g-color-line-generic-active);
 }

package/dist/cjs/hooks/useShapes/treemap/index.js

@@ -3,7 +3,7 @@ import { color, select } from 'd3';
 import get from 'lodash/get';
 import { block, setEllipsisForOverflowTexts } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-const b = block('d3-treemap');
+const b = block('treemap');
 export const TreemapSeriesShape = (props) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
     const hoveredDataRef = React.useRef(null);

package/dist/cjs/hooks/useShapes/waterfall/index.js

@@ -6,7 +6,7 @@ import { block, filterOverlappingLabels, getLineDashArray, getWaterfallPointColo
 import { HtmlLayer } from '../HtmlLayer';
 export { prepareWaterfallData } from './prepare-data';
 export * from './types';
-const b = block('d3-waterfall');
+const b = block('waterfall');
 export const WaterfallSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const hoveredDataRef = React.useRef(null);

package/dist/cjs/index.d.ts

@@ -1,3 +1,3 @@
 export { CustomShapeRenderer } from './utils';
 export * from './components';
-export type { ChartData } from './types';
+export * from './types';

package/dist/cjs/index.js

@@ -1,2 +1,3 @@
 export { CustomShapeRenderer } from './utils';
 export * from './components';
+export * from './types';

package/dist/cjs/types/chart/axis.d.ts

@@ -73,6 +73,8 @@ export interface ChartAxis {
      * Defaults to 0.05 for Y axis and to 0.01 for X axis.
      * */
     maxPadding?: number;
+    /** An array of lines stretching across the plot area, marking a specific value */
+    plotLines?: AxisPlotLine[];
 }
 export interface ChartXAxis extends ChartAxis {
 }
@@ -105,6 +107,4 @@ export interface ChartYAxis extends ChartAxis {
     /** Property for splitting charts. Determines which area the axis is located in.
      * */
     plotIndex?: number;
-    /** An array of lines stretching across the plot area, marking a specific value */
-    plotLines?: AxisPlotLine[];
 }

package/dist/cjs/types/chart/tooltip.d.ts

@@ -78,4 +78,6 @@ export interface ChartTooltip<T = MeaningfulAny> {
         enabled?: boolean;
         modifierKey?: 'altKey' | 'metaKey';
     };
+    /** Show tooltip at most once per every ```throttle``` milliseconds */
+    throttle?: number;
 }

package/dist/cjs/utils/{d3-dispatcher.d.ts → dispatcher.d.ts}

@@ -3,4 +3,4 @@ export declare const EventType: {
     HOVER_SHAPE: string;
     POINTERMOVE_CHART: string;
 };
-export declare const getD3Dispatcher: () => import("d3-dispatch").Dispatch<object>;
+export declare const getDispatcher: () => import("d3-dispatch").Dispatch<object>;

package/dist/cjs/utils/{d3-dispatcher.js → dispatcher.js}

@@ -4,6 +4,6 @@ export const EventType = {
     HOVER_SHAPE: 'hover-shape',
     POINTERMOVE_CHART: 'pointermove-chart',
 };
-export const getD3Dispatcher = () => {
+export const getDispatcher = () => {
     return dispatch(EventType.CLICK_CHART, EventType.HOVER_SHAPE, EventType.POINTERMOVE_CHART);
 };

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

@@ -1,5 +1,5 @@
 export * from './chart';
 export * from './chart-ui';
 export * from './cn';
-export * from './d3-dispatcher';
+export * from './dispatcher';
 export * from './misc';

package/dist/cjs/utils/index.js

@@ -1,5 +1,5 @@
 export * from './chart';
 export * from './chart-ui';
 export * from './cn';
-export * from './d3-dispatcher';
+export * from './dispatcher';
 export * from './misc';

package/dist/esm/components/Axis/AxisX.d.ts

@@ -7,6 +7,7 @@ type Props = {
     height: number;
     scale: ChartScale;
     split: PreparedSplit;
+    plotRef?: React.MutableRefObject<SVGGElement | null>;
 };
 export declare function getTitlePosition(args: {
     axis: PreparedAxis;