@gravity-ui/charts 1.7.1 → 1.9.0

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

@@ -50,11 +50,11 @@ export const AxisX = React.memo(function AxisX(props) {
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
-        const plotClassName = b('plot-x');
+        const plotDataAttr = 'data-plot-x';
         let plotContainer = null;
         if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
             plotContainer = select(plotRef.current);
-            plotContainer.selectAll(`.${plotClassName}`).remove();
+            plotContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
         if (!axis.visible) {
             return;
@@ -116,12 +116,13 @@ export const AxisX = React.memo(function AxisX(props) {
         }
         // add plot bands
         if (plotContainer && axis.plotBands.length > 0) {
-            const plotBandClassName = b('plot-x-band');
+            const plotBandDataAttr = 'plot-x-band';
             const plotBandsSelection = plotContainer
-                .selectAll(`.${plotBandClassName}-x`)
+                .selectAll(`[${plotBandDataAttr}]`)
                 .data(axis.plotBands)
                 .join('g')
-                .attr('class', `${plotClassName} ${plotBandClassName}-x`);
+                .attr(plotDataAttr, 1)
+                .attr(plotBandDataAttr, 1);
             plotBandsSelection
                 .append('rect')
                 .attr('x', (band) => {
@@ -153,12 +154,13 @@ export const AxisX = React.memo(function AxisX(props) {
         }
         // add plot lines
         if (plotContainer && axis.plotLines.length > 0) {
-            const plotLineClassName = b('plot-x-line');
+            const plotLineDataAttr = 'plot-x-line';
             const plotLinesSelection = plotContainer
-                .selectAll(`.${plotLineClassName}`)
+                .selectAll(`[${plotLineDataAttr}]`)
                 .data(axis.plotLines)
                 .join('g')
-                .attr('class', `${plotClassName} ${plotLineClassName}`);
+                .attr(plotDataAttr, 1)
+                .attr(plotLineDataAttr, 1);
             const lineGenerator = line();
             plotLinesSelection
                 .append('path')

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { axisLeft, axisRight, line, select } from 'd3';
-import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
+import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisPlotsPosition, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
 import './styles.css';
 const b = block('axis');
 function transformLabel(args) {
@@ -97,39 +97,17 @@ export const AxisY = (props) => {
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
         let plotContainer = null;
-        const plotClassName = b('plot-y');
+        const plotDataAttr = 'data-plot-y';
         if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
             plotContainer = select(plotRef.current);
-            plotContainer.selectAll(`.${plotClassName}`).remove();
+            plotContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
-        const getAxisPosition = (axis) => {
-            var _a;
-            const top = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
-            if (axis.position === 'left') {
-                return `translate(0, ${top}px)`;
-            }
-            return `translate(${width}px, 0)`;
-        };
-        const plotLines = axes.reduce((acc, axis) => {
-            if (axis.plotLines.length) {
-                acc.push(...axis.plotLines.map((plotLine) => {
-                    return Object.assign(Object.assign({}, plotLine), { transform: getAxisPosition(axis) });
-                }));
-            }
-            return acc;
-        }, []);
-        const plotBands = axes.reduce((acc, axis) => {
-            if (axis.plotBands.length) {
-                acc.push(...axis.plotBands.map((plotBand) => (Object.assign(Object.assign({}, plotBand), { transform: getAxisPosition(axis) }))));
-            }
-            return acc;
-        }, []);
         const axisSelection = svgElement
             .selectAll('axis')
             .data(axes)
             .join('g')
             .attr('class', b())
-            .style('transform', (d) => getAxisPosition(d));
+            .style('transform', (d) => getAxisPlotsPosition(d, split, width));
         axisSelection.each((d, index, node) => {
             const seriesScale = scale[index];
             const axisItem = select(node[index]);
@@ -197,13 +175,14 @@ export const AxisY = (props) => {
                     .remove();
             }
             if (plotContainer && d.plotBands.length > 0) {
-                const plotBandClassName = b('plot-y-band');
+                const plotBandDataAttr = `data-plot-y-band-${index}`;
                 const plotBandsSelection = plotContainer
-                    .selectAll(`.${plotBandClassName}`)
-                    .data(plotBands)
+                    .selectAll(`[${plotBandDataAttr}]`)
+                    .data(d.plotBands)
                     .join('g')
-                    .attr('class', `${plotClassName} ${plotBandClassName}`)
-                    .style('transform', (plotBand) => plotBand.transform);
+                    .attr(plotDataAttr, 1)
+                    .attr(plotBandDataAttr, 1)
+                    .style('transform', getAxisPlotsPosition(d, split));
                 plotBandsSelection
                     .append('rect')
                     .attr('x', 0)
@@ -234,13 +213,14 @@ export const AxisY = (props) => {
                 });
             }
             if (plotContainer && d.plotLines.length > 0) {
-                const plotLineClassName = b('plot-y-line');
+                const plotLineDataAttr = `data-plot-y-line-${index}`;
                 const plotLinesSelection = plotContainer
-                    .selectAll(`.${plotLineClassName}`)
-                    .data(plotLines)
+                    .selectAll(`[${plotLineDataAttr}]`)
+                    .data(d.plotLines)
                     .join('g')
-                    .attr('class', `${plotClassName} ${plotLineClassName}`)
-                    .style('transform', (plotLine) => plotLine.transform);
+                    .attr(plotDataAttr, 1)
+                    .attr(plotLineDataAttr, 1)
+                    .style('transform', getAxisPlotsPosition(d, split));
                 plotLinesSelection
                     .append('path')
                     .attr('d', (plotLine) => {

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useCrosshair } from '../../hooks';
 import { EventType, block, getDispatcher } from '../../utils';
 import { AxisX, AxisY } from '../Axis';
 import { Legend } from '../Legend';
@@ -39,6 +40,19 @@ export const ChartInner = (props) => {
     });
     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;
+    useCrosshair({
+        split: preparedSplit,
+        plotElement: plotRef.current,
+        boundsOffsetLeft,
+        boundsOffsetTop,
+        width: boundsWidth,
+        height: boundsHeight,
+        xAxis,
+        yAxes: yAxis,
+        yScale,
+        xScale,
+        dispatcher,
+    });
     React.useEffect(() => {
         if (clickHandler) {
             dispatcher.on(EventType.CLICK_CHART, clickHandler);
@@ -71,7 +85,7 @@ export const ChartInner = (props) => {
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { leftmostLimit: svgXPos, 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 }))),
+            preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayerRef.current }))),
         React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),

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

@@ -20,8 +20,10 @@ export declare function useChartInnerProps(props: Props): {
             top: number;
         };
         pagination: {
-            limit: number;
-            maxPage: number;
+            pages: {
+                start: number;
+                end: number;
+            }[];
         } | undefined;
     };
     legendItems: import("../../hooks").LegendItem[][];

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

@@ -56,9 +56,12 @@ export function useChartInnerProps(props) {
         htmlLayout,
     });
     const boundsOffsetTop = chart.margin.top;
-    // We need to calculate the width of each axis because the first axis can be hidden
+    // We need to calculate the width of each left axis because the first axis can be hidden
     const boundsOffsetLeft = chart.margin.left +
         yAxis.reduce((acc, axis) => {
+            if (axis.position !== 'left') {
+                return acc;
+            }
             const axisWidth = getYAxisWidth(axis);
             if (acc < axisWidth) {
                 acc = axisWidth;

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

@@ -7,6 +7,7 @@ type Props = {
     legend: PreparedLegend;
     items: LegendItem[][];
     config: LegendConfig;
+    htmlLayout: HTMLElement | null;
     onItemClick: OnLegendItemClick;
     onUpdate?: () => void;
 };

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
 import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
 import { formatNumber } from '../../libs';
-import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineDashArray, getSymbol, } from '../../utils';
+import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineDashArray, getSymbol, handleOverflowingText, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('legend');
@@ -18,27 +18,28 @@ const getLegendPosition = (args) => {
     return { top, left: offsetWidth + width / 2 - contentWidth / 2 };
 };
 const appendPaginator = (args) => {
-    const { container, offset, maxPage, legend, transform, onArrowClick } = args;
+    const { container, pageIndex, legend, transform, pages, onArrowClick } = args;
     const paginationLine = container.append('g').attr('class', b('pagination'));
+    const maxPage = pages.length;
     let computedWidth = 0;
     paginationLine
         .append('text')
         .text('▲')
         .attr('class', function () {
-        return b('pagination-arrow', { inactive: offset === 0 });
+        return b('pagination-arrow', { inactive: pageIndex === 0 });
     })
         .style('font-size', legend.itemStyle.fontSize)
         .each(function () {
         computedWidth += this.getComputedTextLength();
     })
         .on('click', function () {
-        if (offset - 1 >= 0) {
-            onArrowClick(offset - 1);
+        if (pageIndex - 1 >= 0) {
+            onArrowClick(pageIndex - 1);
         }
     });
     paginationLine
         .append('text')
-        .text(`${offset + 1}/${maxPage}`)
+        .text(`${pageIndex + 1}/${maxPage}`)
         .attr('class', b('pagination-counter'))
         .attr('x', computedWidth)
         .style('font-size', legend.itemStyle.fontSize)
@@ -49,13 +50,13 @@ const appendPaginator = (args) => {
         .append('text')
         .text('▼')
         .attr('class', function () {
-        return b('pagination-arrow', { inactive: offset === maxPage - 1 });
+        return b('pagination-arrow', { inactive: pageIndex === maxPage - 1 });
     })
         .attr('x', computedWidth)
         .style('font-size', legend.itemStyle.fontSize)
         .on('click', function () {
-        if (offset + 1 < maxPage) {
-            onArrowClick(offset + 1);
+        if (pageIndex + 1 < maxPage) {
+            onArrowClick(pageIndex + 1);
         }
     });
     paginationLine.attr('transform', transform);
@@ -64,7 +65,7 @@ const legendSymbolGenerator = lineGenerator()
     .x((d) => d.x)
     .y((d) => d.y);
 function renderLegendSymbol(args) {
-    const { selection, legend } = args;
+    const { selection, legend, legendLineHeight } = args;
     const line = selection.data();
     const getXPosition = (i) => {
         return line.slice(0, i).reduce((acc, legendItem) => {
@@ -82,7 +83,7 @@ function renderLegendSymbol(args) {
         const color = d.visible ? d.color : '';
         switch (d.symbol.shape) {
             case 'path': {
-                const y = legend.lineHeight / 2;
+                const y = legendLineHeight / 2;
                 const points = [
                     { x: x, y },
                     { x: x + d.symbol.width, y },
@@ -100,7 +101,7 @@ function renderLegendSymbol(args) {
                 break;
             }
             case 'rect': {
-                const y = (legend.lineHeight - d.symbol.height) / 2;
+                const y = (legendLineHeight - d.symbol.height) / 2;
                 element
                     .append('rect')
                     .attr('x', x)
@@ -113,7 +114,7 @@ function renderLegendSymbol(args) {
                 break;
             }
             case 'symbol': {
-                const y = legend.lineHeight / 2;
+                const y = legendLineHeight / 2;
                 const translateX = x + d.symbol.width / 2;
                 element
                     .append('svg:path')
@@ -134,28 +135,36 @@ function renderLegendSymbol(args) {
     });
 }
 export const Legend = (props) => {
-    const { boundsWidth, chartSeries, legend, items, config, onItemClick, onUpdate } = props;
+    const { boundsWidth, chartSeries, legend, items, config, htmlLayout, onItemClick, onUpdate } = props;
     const ref = React.useRef(null);
-    const [paginationOffset, setPaginationOffset] = React.useState(0);
+    const [pageIndex, setPageIndex] = React.useState(0);
     React.useEffect(() => {
-        setPaginationOffset(0);
+        setPageIndex(0);
     }, [boundsWidth]);
     React.useEffect(() => {
-        var _a, _b, _c, _d, _e;
-        if (!ref.current) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (!ref.current || !htmlLayout) {
             return;
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
+        const htmlElement = select(htmlLayout);
+        htmlElement.selectAll('[data-legend]').remove();
+        const htmlContainer = legend.html
+            ? htmlElement.append('div').attr('data-legend', 1).style('position', 'absolute')
+            : null;
         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)
+            const start = (_b = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.pages[pageIndex]) === null || _b === void 0 ? void 0 : _b.start;
+            const end = (_d = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _d === void 0 ? void 0 : _d.end;
+            const pageItems = typeof start === 'number' && typeof end === 'number'
+                ? items.slice(start, end)
                 : items;
-            pageItems.forEach((line, lineIndex) => {
+            const legendLineHeights = [];
+            pageItems.forEach((line) => {
                 var _a;
                 const legendLine = svgElement.append('g').attr('class', b('line'));
+                const htmlLegendLine = htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.append('div').style('position', 'absolute');
                 const legendItemTemplate = legendLine
                     .selectAll('legend-history')
                     .data(line)
@@ -175,22 +184,65 @@ export const Legend = (props) => {
                             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);
-                })
-                    .html(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 legendLineHeight = Math.max(...line.map((l) => l.height));
+                renderLegendSymbol({ selection: legendItemTemplate, legend, legendLineHeight });
+                if (htmlLegendLine) {
+                    htmlLegendLine
+                        .selectAll('legend-item')
+                        .data(line)
+                        .enter()
+                        .append('div')
+                        .attr('class', function (d) {
+                        const mods = { selected: d.visible, unselected: !d.visible };
+                        return b('item-text-html', mods);
+                    })
+                        .style('font-size', legend.itemStyle.fontSize)
+                        .style('position', 'absolute')
+                        .style('max-width', function (d) {
+                        return `${d.textWidth}px`;
+                    })
+                        .style('left', function (d, i) {
+                        return `${getXPosition(i) + d.symbol.width + d.symbol.padding}px`;
+                    })
+                        .style('top', function (d) {
+                        if (d.height < legendLineHeight) {
+                            return `${(legendLineHeight - d.height) / 2}px`;
+                        }
+                        return '0px';
+                    })
+                        .on('click', function (e, d) {
+                        onItemClick({ name: d.name, metaKey: e.metaKey });
+                        onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate();
+                    })[legend.html ? 'html' : 'text'](function (d) {
+                        return d.name;
+                    });
+                }
+                else {
+                    legendItemTemplate
+                        .append('text')
+                        .attr('x', function (legendItem, i) {
+                        return (getXPosition(i) +
+                            legendItem.symbol.width +
+                            legendItem.symbol.padding);
+                    })
+                        .attr('height', legend.height)
+                        .attr('class', function (d) {
+                        const mods = { selected: d.visible, unselected: !d.visible };
+                        return b('item-text', mods);
+                    })
+                        .html(function (d) {
+                        return ('name' in d && d.name);
+                    })
+                        .style('font-size', legend.itemStyle.fontSize)
+                        .each((d, index, nodes) => {
+                        if (d.overflowed) {
+                            handleOverflowingText(nodes[index], d.textWidth);
+                        }
+                    });
+                }
+                const contentWidth = (legend.html
+                    ? getXPosition(line.length) - legend.itemDistance
+                    : (_a = legendLine.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
                 let left = 0;
                 switch (legend.justifyContent) {
                     case 'center': {
@@ -209,27 +261,26 @@ export const Legend = (props) => {
                         break;
                     }
                 }
-                const top = legend.lineHeight * lineIndex;
+                const top = legendLineHeights.reduce((acc, h) => acc + h, 0);
+                legendLineHeights.push(legendLineHeight);
                 legendLine.attr('transform', `translate(${[left, top].join(',')})`);
+                htmlLegendLine === null || htmlLegendLine === void 0 ? void 0 : htmlLegendLine.style('transform', `translate(${left}px, ${top}px)`);
             });
             if (config.pagination) {
-                const transform = `translate(${[
-                    0,
-                    legend.lineHeight * config.pagination.limit + legend.lineHeight / 2,
-                ].join(',')})`;
+                const transform = `translate(${[0, legend.height - legend.lineHeight / 2].join(',')})`;
                 appendPaginator({
                     container: svgElement,
-                    offset: paginationOffset,
-                    maxPage: config.pagination.maxPage,
+                    pageIndex: pageIndex,
                     legend,
                     transform,
-                    onArrowClick: setPaginationOffset,
+                    pages: config.pagination.pages,
+                    onArrowClick: setPageIndex,
                 });
             }
         }
         else {
             // gradient rect
-            const domain = (_b = legend.colorScale.domain) !== null && _b !== void 0 ? _b : [];
+            const domain = (_e = legend.colorScale.domain) !== null && _e !== void 0 ? _e : [];
             const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
             svgElement.call(createGradientRect, {
                 y: legend.title.height + legend.title.margin,
@@ -291,9 +342,9 @@ export const Legend = (props) => {
                 .attr('class', b('title'))
                 .append('text')
                 .attr('dx', dx)
-                .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)
+                .attr('font-weight', (_f = legend.title.style.fontWeight) !== null && _f !== void 0 ? _f : null)
+                .attr('font-size', (_g = legend.title.style.fontSize) !== null && _g !== void 0 ? _g : null)
+                .attr('fill', (_h = legend.title.style.fontColor) !== null && _h !== void 0 ? _h : null)
                 .style('dominant-baseline', 'text-before-edge')
                 .html(legend.title.text);
         }
@@ -304,6 +355,17 @@ export const Legend = (props) => {
             contentWidth: legendWidth,
         });
         svgElement.attr('transform', `translate(${[left, config.offset.top].join(',')})`);
-    }, [boundsWidth, chartSeries, onItemClick, onUpdate, legend, items, config, paginationOffset]);
+        htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${left}px, ${config.offset.top}px)`);
+    }, [
+        boundsWidth,
+        chartSeries,
+        onItemClick,
+        onUpdate,
+        legend,
+        items,
+        config,
+        pageIndex,
+        htmlLayout,
+    ]);
     return React.createElement("g", { className: b(), ref: ref, width: boundsWidth, height: legend.height });
 };

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

@@ -27,6 +27,19 @@
 .gcharts-legend__item-text:hover {
   fill: var(--g-color-text-complementary);
 }
+.gcharts-legend__item-text-html {
+  overflow: hidden;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.gcharts-legend__item-text-html_unselected {
+  color: var(--g-color-text-hint);
+}
+.gcharts-legend__item-text-html:hover {
+  color: var(--g-color-text-complementary);
+}
 .gcharts-legend__pagination {
   user-select: none;
   fill: var(--g-color-text-primary);

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

@@ -135,9 +135,12 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                     });
                     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", { dangerouslySetInnerHTML: {
+                                __html: [seriesData.name || seriesData.id]
+                                    .flat()
+                                    .join('\n'),
+                            } }),
+                        "\u00A0",
                         React.createElement("span", null, formattedValue)));
                 }
                 case 'sankey': {

package/dist/cjs/constants/chart-types.d.ts

@@ -0,0 +1,12 @@
+export declare const SeriesType: {
+    readonly Area: "area";
+    readonly BarX: "bar-x";
+    readonly BarY: "bar-y";
+    readonly Line: "line";
+    readonly Pie: "pie";
+    readonly Scatter: "scatter";
+    readonly Treemap: "treemap";
+    readonly Waterfall: "waterfall";
+    readonly Sankey: "sankey";
+    readonly Radar: "radar";
+};

package/dist/cjs/constants/chart-types.js

@@ -0,0 +1,12 @@
+export const SeriesType = {
+    Area: 'area',
+    BarX: 'bar-x',
+    BarY: 'bar-y',
+    Line: 'line',
+    Pie: 'pie',
+    Scatter: 'scatter',
+    Treemap: 'treemap',
+    Waterfall: 'waterfall',
+    Sankey: 'sankey',
+    Radar: 'radar',
+};

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

@@ -1,4 +1,4 @@
-import type { BaseTextStyle, ChartAxis, ChartAxisType } from '../../types';
+import type { AxisCrosshair, BaseTextStyle, ChartAxis, ChartAxisType } from '../../types';
 export declare const axisLabelsDefaults: {
     margin: number;
     padding: number;
@@ -8,6 +8,8 @@ export declare const axisLabelsDefaults: {
 type AxisTitleDefaults = Required<ChartAxis['title']> & {
     style: BaseTextStyle;
 };
+type AxisCrosshairDefaults = Required<AxisCrosshair>;
+export declare const axisCrosshairDefaults: AxisCrosshairDefaults;
 export declare const xAxisTitleDefaults: AxisTitleDefaults;
 export declare const yAxisTitleDefaults: AxisTitleDefaults;
 export declare const DEFAULT_AXIS_TYPE: ChartAxisType;

package/dist/cjs/constants/defaults/axis.js

@@ -1,3 +1,4 @@
+import { DASH_STYLE } from '../line-styles';
 export const axisLabelsDefaults = {
     margin: 10,
     padding: 10,
@@ -13,6 +14,15 @@ const axisTitleDefaults = {
     align: 'center',
     maxRowCount: 1,
 };
+export const axisCrosshairDefaults = {
+    enabled: false,
+    color: 'var(--g-color-line-generic)',
+    width: 1,
+    snap: true,
+    dashStyle: DASH_STYLE.Solid,
+    opacity: 1,
+    layerPlacement: 'after',
+};
 export const xAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 4 });
 export const yAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 8 });
 export const DEFAULT_AXIS_TYPE = 'linear';