@gravity-ui/charts 1.7.1 → 1.9.0

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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';

package/dist/esm/constants/index.d.ts

@@ -1,49 +1,8 @@
 export * from './defaults';
 export * from './misc';
-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";
-};
-export declare enum DashStyle {
-    Dash = "Dash",
-    DashDot = "DashDot",
-    Dot = "Dot",
-    LongDash = "LongDash",
-    LongDashDot = "LongDashDot",
-    LongDashDotDot = "LongDashDotDot",
-    ShortDash = "ShortDash",
-    ShortDashDot = "ShortDashDot",
-    ShortDashDotDot = "ShortDashDotDot",
-    ShortDot = "ShortDot",
-    Solid = "Solid"
-}
-export declare enum SymbolType {
-    Circle = "circle",
-    Diamond = "diamond",
-    Square = "square",
-    Triangle = "triangle",
-    TriangleDown = "triangle-down"
-}
-export declare enum LineCap {
-    Butt = "butt",
-    Round = "round",
-    Square = "square",
-    None = "none"
-}
-export declare enum LayoutAlgorithm {
-    Binary = "binary",
-    Dice = "dice",
-    Slice = "slice",
-    SliceDice = "slice-dice",
-    Squarify = "squarify"
-}
-export declare const DEFAULT_PALETTE: string[];
-export declare const DEFAULT_AXIS_LABEL_FONT_SIZE = "11px";
+export * from './chart-types';
+export * from './line-styles';
+export * from './symbol-types';
+export * from './layout-algorithms';
+export * from './palette';
+export * from './typography';

package/dist/esm/constants/index.js

@@ -1,74 +1,8 @@
 export * from './defaults';
 export * from './misc';
-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',
-};
-export var DashStyle;
-(function (DashStyle) {
-    DashStyle["Dash"] = "Dash";
-    DashStyle["DashDot"] = "DashDot";
-    DashStyle["Dot"] = "Dot";
-    DashStyle["LongDash"] = "LongDash";
-    DashStyle["LongDashDot"] = "LongDashDot";
-    DashStyle["LongDashDotDot"] = "LongDashDotDot";
-    DashStyle["ShortDash"] = "ShortDash";
-    DashStyle["ShortDashDot"] = "ShortDashDot";
-    DashStyle["ShortDashDotDot"] = "ShortDashDotDot";
-    DashStyle["ShortDot"] = "ShortDot";
-    DashStyle["Solid"] = "Solid";
-})(DashStyle || (DashStyle = {}));
-export var SymbolType;
-(function (SymbolType) {
-    SymbolType["Circle"] = "circle";
-    SymbolType["Diamond"] = "diamond";
-    SymbolType["Square"] = "square";
-    SymbolType["Triangle"] = "triangle";
-    SymbolType["TriangleDown"] = "triangle-down";
-})(SymbolType || (SymbolType = {}));
-export var LineCap;
-(function (LineCap) {
-    LineCap["Butt"] = "butt";
-    LineCap["Round"] = "round";
-    LineCap["Square"] = "square";
-    LineCap["None"] = "none";
-})(LineCap || (LineCap = {}));
-export var LayoutAlgorithm;
-(function (LayoutAlgorithm) {
-    LayoutAlgorithm["Binary"] = "binary";
-    LayoutAlgorithm["Dice"] = "dice";
-    LayoutAlgorithm["Slice"] = "slice";
-    LayoutAlgorithm["SliceDice"] = "slice-dice";
-    LayoutAlgorithm["Squarify"] = "squarify";
-})(LayoutAlgorithm || (LayoutAlgorithm = {}));
-export const DEFAULT_PALETTE = [
-    '#4DA2F1',
-    '#FF3D64',
-    '#8AD554',
-    '#FFC636',
-    '#FFB9DD',
-    '#84D1EE',
-    '#FF91A1',
-    '#54A520',
-    '#DB9100',
-    '#BA74B3',
-    '#1F68A9',
-    '#ED65A9',
-    '#0FA08D',
-    '#FF7E00',
-    '#E8B0A4',
-    '#52A6C5',
-    '#BE2443',
-    '#70C1AF',
-    '#FFB46C',
-    '#DCA3D7',
-];
-export const DEFAULT_AXIS_LABEL_FONT_SIZE = '11px';
+export * from './chart-types';
+export * from './line-styles';
+export * from './symbol-types';
+export * from './layout-algorithms';
+export * from './palette';
+export * from './typography';

package/dist/esm/constants/layout-algorithms.d.ts

@@ -0,0 +1,7 @@
+export declare enum LayoutAlgorithm {
+    Binary = "binary",
+    Dice = "dice",
+    Slice = "slice",
+    SliceDice = "slice-dice",
+    Squarify = "squarify"
+}

package/dist/esm/constants/layout-algorithms.js

@@ -0,0 +1,8 @@
+export var LayoutAlgorithm;
+(function (LayoutAlgorithm) {
+    LayoutAlgorithm["Binary"] = "binary";
+    LayoutAlgorithm["Dice"] = "dice";
+    LayoutAlgorithm["Slice"] = "slice";
+    LayoutAlgorithm["SliceDice"] = "slice-dice";
+    LayoutAlgorithm["Squarify"] = "squarify";
+})(LayoutAlgorithm || (LayoutAlgorithm = {}));

package/dist/esm/constants/line-styles.d.ts

@@ -0,0 +1,20 @@
+export declare const DASH_STYLE: {
+    readonly Dash: "Dash";
+    readonly DashDot: "DashDot";
+    readonly Dot: "Dot";
+    readonly LongDash: "LongDash";
+    readonly LongDashDot: "LongDashDot";
+    readonly LongDashDotDot: "LongDashDotDot";
+    readonly ShortDash: "ShortDash";
+    readonly ShortDashDot: "ShortDashDot";
+    readonly ShortDashDotDot: "ShortDashDotDot";
+    readonly ShortDot: "ShortDot";
+    readonly Solid: "Solid";
+};
+export type DashStyle = keyof typeof DASH_STYLE;
+export declare enum LineCap {
+    Butt = "butt",
+    Round = "round",
+    Square = "square",
+    None = "none"
+}

package/dist/esm/constants/line-styles.js

@@ -0,0 +1,20 @@
+export const DASH_STYLE = {
+    Dash: 'Dash',
+    DashDot: 'DashDot',
+    Dot: 'Dot',
+    LongDash: 'LongDash',
+    LongDashDot: 'LongDashDot',
+    LongDashDotDot: 'LongDashDotDot',
+    ShortDash: 'ShortDash',
+    ShortDashDot: 'ShortDashDot',
+    ShortDashDotDot: 'ShortDashDotDot',
+    ShortDot: 'ShortDot',
+    Solid: 'Solid',
+};
+export var LineCap;
+(function (LineCap) {
+    LineCap["Butt"] = "butt";
+    LineCap["Round"] = "round";
+    LineCap["Square"] = "square";
+    LineCap["None"] = "none";
+})(LineCap || (LineCap = {}));

package/dist/esm/constants/palette.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_PALETTE: string[];

package/dist/esm/constants/palette.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/dist/esm/constants/symbol-types.d.ts

@@ -0,0 +1,7 @@
+export declare enum SymbolType {
+    Circle = "circle",
+    Diamond = "diamond",
+    Square = "square",
+    Triangle = "triangle",
+    TriangleDown = "triangle-down"
+}

package/dist/esm/constants/symbol-types.js

@@ -0,0 +1,8 @@
+export var SymbolType;
+(function (SymbolType) {
+    SymbolType["Circle"] = "circle";
+    SymbolType["Diamond"] = "diamond";
+    SymbolType["Square"] = "square";
+    SymbolType["Triangle"] = "triangle";
+    SymbolType["TriangleDown"] = "triangle-down";
+})(SymbolType || (SymbolType = {}));

package/dist/esm/constants/typography.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_AXIS_LABEL_FONT_SIZE = "11px";

package/dist/esm/constants/typography.js

@@ -0,0 +1 @@
+export const DEFAULT_AXIS_LABEL_FONT_SIZE = '11px';

package/dist/esm/hooks/index.d.ts

@@ -9,3 +9,4 @@ export * from './useShapes';
 export * from './useTooltip';
 export * from './useSplit';
 export * from './useSplit/types';
+export * from './useCrosshair';

package/dist/esm/hooks/index.js

@@ -9,3 +9,4 @@ export * from './useShapes';
 export * from './useTooltip';
 export * from './useSplit';
 export * from './useSplit/types';
+export * from './useCrosshair';