@gravity-ui/charts 1.35.2 → 1.36.0

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

@@ -33,7 +33,7 @@ export const AxisX = (props) => {
                 .attr('class', b('title'))
                 .append('text')
                 .attr('text-anchor', 'start')
-                .style('transform', `translate(${preparedAxisData.title.x}px, ${preparedAxisData.title.y}px) rotate(${preparedAxisData.title.rotate}deg) translate(0px, ${preparedAxisData.title.offset}px)`)
+                .attr('transform', `translate(${preparedAxisData.title.x},${preparedAxisData.title.y}) rotate(${preparedAxisData.title.rotate}) translate(0,${preparedAxisData.title.offset})`)
                 .attr('font-size', preparedAxisData.title.style.fontSize)
                 .attr('font-weight', (_a = preparedAxisData.title.style.fontWeight) !== null && _a !== void 0 ? _a : null)
                 .attr('fill', (_b = preparedAxisData.title.style.fontColor) !== null && _b !== void 0 ? _b : null)
@@ -43,6 +43,7 @@ export const AxisX = (props) => {
                 .html((d) => d.text)
                 .attr('x', (d) => d.x)
                 .attr('y', (d) => d.y)
+                .attr('dominant-baseline', 'text-before-edge')
                 .attr('text-anchor', 'start');
         }
         if (preparedAxisData.domain) {
@@ -67,13 +68,19 @@ export const AxisX = (props) => {
             if (tickData.line) {
                 tickSelection.append('path').attr('d', lineGenerator(tickData.line.points));
             }
+            if (tickData.mark) {
+                tickSelection
+                    .append('path')
+                    .attr('class', b('mark', { grid: preparedAxisData.gridEnabled }))
+                    .attr('d', lineGenerator(tickData.mark.points));
+            }
             if (tickData.svgLabel) {
                 const label = tickData.svgLabel;
                 const textSelection = tickSelection
                     .append('text')
-                    .style('transform', [
-                    `translate(${label.x}px, ${label.y}px)`,
-                    label.angle ? `rotate(${label.angle}deg)` : '',
+                    .attr('transform', [
+                    `translate(${label.x}, ${label.y})`,
+                    label.angle ? `rotate(${label.angle})` : '',
                 ]
                     .filter(Boolean)
                     .join(' '));
@@ -106,7 +113,7 @@ export const AxisX = (props) => {
                     .join('g')
                     .attr(plotDataAttr, 1)
                     .attr(plotBandDataAttr, 1)
-                    .style('transform', (d) => `translate(${d.x}px, ${d.y}px)`);
+                    .attr('transform', (d) => `translate(${d.x}, ${d.y})`);
                 plotBandsSelection
                     .append('rect')
                     .attr('width', (d) => d.width)
@@ -127,7 +134,7 @@ export const AxisX = (props) => {
                             .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
                             .style('dominant-baseline', 'text-before-edge')
                             .style('text-anchor', 'start')
-                            .style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`)
+                            .attr('transform', `translate(${label.x}, ${label.y}) rotate(${label.rotate})`)
                             .attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null);
                     }
                 });
@@ -147,7 +154,7 @@ export const AxisX = (props) => {
                     .join('g')
                     .attr(plotDataAttr, 1)
                     .attr(plotLineDataAttr, 1)
-                    .style('transform', (d) => `translate(${d.x}px, ${d.y}px)`);
+                    .attr('transform', (d) => `translate(${d.x}, ${d.y})`);
                 plotLinesSelection
                     .append('path')
                     .attr('d', (d) => lineGenerator(d.points))
@@ -169,7 +176,7 @@ export const AxisX = (props) => {
                             .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
                             .style('dominant-baseline', 'text-before-edge')
                             .style('text-anchor', 'start')
-                            .style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`)
+                            .attr('transform', `translate(${label.x}, ${label.y}) rotate(${label.rotate})`)
                             .attr('data-qa', (_c = label.qa) !== null && _c !== void 0 ? _c : null);
                     }
                 });

package/dist/cjs/components/AxisX/prepare-axis-data.js

@@ -178,8 +178,19 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                     ],
                 };
             }
+            let mark = null;
+            if (isBottomPlot && axis.tickMarks.enabled) {
+                const axisBottom = axisTop + axisHeight;
+                mark = {
+                    points: [
+                        [tickValue.x, axisBottom],
+                        [tickValue.x, axisBottom + axis.tickMarks.length],
+                    ],
+                };
+            }
             ticks.push({
                 line: tickLine,
+                mark,
                 svgLabel,
                 htmlLabel,
             });
@@ -315,6 +326,7 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
         }
         xAxisItems.push({
             id: getUniqId(),
+            gridEnabled: axis.grid.enabled,
             title,
             ticks,
             domain,

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

@@ -6,9 +6,14 @@
   stroke: none;
 }
 .gcharts-x-axis__tick {
-  stroke: var(--g-color-line-generic);
+  stroke: var(--gcharts-axis-tick-color);
+}
+.gcharts-x-axis__mark {
+  stroke: var(--gcharts-axis-tick-mark-color, var(--g-color-line-generic-active));
+}
+.gcharts-x-axis__mark_grid {
+  stroke: var(--gcharts-axis-tick-mark-color, var(--gcharts-axis-tick-color));
 }
 .gcharts-x-axis__title {
-  dominant-baseline: text-before-edge;
   fill: var(--g-color-text-secondary);
 }

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

@@ -16,8 +16,12 @@ export type AxisSvgLabelData = {
 export type AxisTickLine = {
     points: PointPosition[];
 };
+export type AxisTickMarkData = {
+    points: PointPosition[];
+};
 export type AxisTickData = {
     line: AxisTickLine | null;
+    mark: AxisTickMarkData | null;
     svgLabel: AxisSvgLabelData | null;
     htmlLabel: HtmlItem | null;
 };
@@ -70,6 +74,7 @@ export type AxisDomainData = {
 };
 export type AxisXData = {
     id: string;
+    gridEnabled: boolean;
     title: AxisTitleData | null;
     domain: AxisDomainData | null;
     ticks: AxisTickData[];

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

@@ -38,8 +38,7 @@ export const AxisY = (props) => {
                 .attr('class', b('title'))
                 .append('text')
                 .attr('text-anchor', 'start')
-                .style('dominant-baseline', 'text-after-edge')
-                .style('transform', `translate(${preparedAxisData.title.x}px, ${preparedAxisData.title.y}px) rotate(${preparedAxisData.title.rotate}deg) translate(0px, ${preparedAxisData.title.offset}px)`)
+                .attr('transform', `translate(${preparedAxisData.title.x}, ${preparedAxisData.title.y}) rotate(${preparedAxisData.title.rotate}) translate(0, ${preparedAxisData.title.offset})`)
                 .attr('font-size', preparedAxisData.title.style.fontSize)
                 .attr('font-weight', (_b = preparedAxisData.title.style.fontWeight) !== null && _b !== void 0 ? _b : null)
                 .attr('fill', (_c = preparedAxisData.title.style.fontColor) !== null && _c !== void 0 ? _c : null)
@@ -49,6 +48,7 @@ export const AxisY = (props) => {
                 .html((d) => d.text)
                 .attr('x', (d) => d.x)
                 .attr('y', (d) => d.y)
+                .attr('dominant-baseline', 'text-after-edge')
                 .attr('text-anchor', 'start');
         }
         if (preparedAxisData.domain) {
@@ -73,13 +73,19 @@ export const AxisY = (props) => {
             if (tickData.line) {
                 tickSelection.append('path').attr('d', lineGenerator(tickData.line.points));
             }
+            if (tickData.mark) {
+                tickSelection
+                    .append('path')
+                    .attr('class', b('mark', { grid: preparedAxisData.gridEnabled }))
+                    .attr('d', lineGenerator(tickData.mark.points));
+            }
             if (tickData.svgLabel) {
                 const label = tickData.svgLabel;
                 const textSelection = tickSelection
                     .append('text')
-                    .style('transform', [
-                    `translate(${label.x}px, ${label.y}px)`,
-                    label.angle ? `rotate(${label.angle}deg)` : '',
+                    .attr('transform', [
+                    `translate(${label.x}, ${label.y})`,
+                    label.angle ? `rotate(${label.angle})` : '',
                 ]
                     .filter(Boolean)
                     .join(' '));
@@ -112,7 +118,7 @@ export const AxisY = (props) => {
                     .join('g')
                     .attr(plotDataAttr, 1)
                     .attr(plotBandDataAttr, 1)
-                    .style('transform', (d) => `translate(${d.x}px, ${d.y}px)`);
+                    .attr('transform', (d) => `translate(${d.x}, ${d.y})`);
                 plotBandsSelection
                     .append('rect')
                     .attr('width', (d) => d.width)
@@ -153,7 +159,7 @@ export const AxisY = (props) => {
                     .join('g')
                     .attr(plotDataAttr, 1)
                     .attr(plotLineDataAttr, 1)
-                    .style('transform', (d) => `translate(${d.x}px, ${d.y}px)`);
+                    .attr('transform', (d) => `translate(${d.x}, ${d.y})`);
                 plotLinesSelection
                     .append('path')
                     .attr('d', (d) => lineGenerator(d.points))

package/dist/cjs/components/AxisY/prepare-axis-data.js

@@ -175,8 +175,21 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
                 ],
             }
             : null;
+        let mark = null;
+        if (axis.tickMarks.enabled) {
+            const isLeft = axis.position === 'left';
+            const markX = isLeft ? 0 : width;
+            const dir = isLeft ? -1 : 1;
+            mark = {
+                points: [
+                    [markX, y],
+                    [markX + dir * axis.tickMarks.length, y],
+                ],
+            };
+        }
         ticks.push({
             line: tickLine,
+            mark,
             svgLabel,
             htmlLabel,
         });
@@ -273,6 +286,7 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
     }
     return {
         id: getUniqId(),
+        gridEnabled: axis.grid.enabled,
         title,
         ticks,
         domain,

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

@@ -7,9 +7,14 @@
   dominant-baseline: text-after-edge;
 }
 .gcharts-y-axis__tick {
-  stroke: var(--g-color-line-generic);
+  stroke: var(--gcharts-axis-tick-color);
+}
+.gcharts-y-axis__mark {
+  stroke: var(--gcharts-axis-tick-mark-color, var(--g-color-line-generic-active));
+}
+.gcharts-y-axis__mark_grid {
+  stroke: var(--gcharts-axis-tick-mark-color, var(--gcharts-axis-tick-color));
 }
 .gcharts-y-axis__title {
-  dominant-baseline: text-after-edge;
   fill: var(--g-color-text-secondary);
 }

package/dist/cjs/components/AxisY/types.d.ts

@@ -16,8 +16,12 @@ export type AxisSvgLabelData = {
 export type AxisTickLine = {
     points: PointPosition[];
 };
+export type AxisTickMarkData = {
+    points: PointPosition[];
+};
 export type AxisTickData = {
     line: AxisTickLine | null;
+    mark: AxisTickMarkData | null;
     svgLabel: AxisSvgLabelData | null;
     htmlLabel: HtmlItem | null;
 };
@@ -81,6 +85,7 @@ export type AxisDomainData = {
 };
 export type AxisYData = {
     id: string;
+    gridEnabled: boolean;
     title: HtmlAxisTitleData | SvgAxisTitleData | null;
     domain: AxisDomainData | null;
     ticks: AxisTickData[];

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

@@ -93,6 +93,8 @@ export const ChartInner = (props) => {
         unpinTooltip,
         xAxis,
         yAxis,
+        xScale,
+        yScale,
         tooltipThrottle: preparedTooltip.throttle,
         isOutsideBounds,
     });

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

@@ -1,6 +1,7 @@
 .gcharts-chart {
   --gcharts-data-labels: var(--g-color-text-secondary);
   --gcharts-shape-border-color: var(--g-color-base-background);
+  --gcharts-axis-tick-color: var(--g-color-line-generic);
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;

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

@@ -1,6 +1,7 @@
 import type React from 'react';
 import type { Dispatch } from 'd3';
 import type { PreparedXAxis, PreparedYAxis, ShapeData } from '../../hooks';
+import type { ChartScale } from '../../hooks/useAxisScales/types';
 import type { useChartInnerState } from './useChartInnerState';
 type ChartInnerState = ReturnType<typeof useChartInnerState>;
 type Props = {
@@ -16,6 +17,8 @@ type Props = {
     unpinTooltip: ChartInnerState['unpinTooltip'];
     xAxis: PreparedXAxis | null;
     yAxis: PreparedYAxis[];
+    xScale?: ChartScale;
+    yScale?: (ChartScale | undefined)[];
     tooltipThrottle: number;
     isOutsideBounds: (x: number, y: number) => boolean;
 };

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

@@ -4,8 +4,9 @@ import throttle from 'lodash/throttle';
 import { IS_TOUCH_ENABLED } from '../../constants';
 import { EventType } from '../../utils';
 import { getClosestPoints } from '../../utils/chart/get-closest-data';
+import { getHoveredPlots } from '../../utils/chart/get-hovered-plots';
 export function useChartInnerHandlers(props) {
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, dispatcher, shapesData, svgContainer, togglePinTooltip, tooltipPinned, unpinTooltip, xAxis, yAxis, tooltipThrottle, isOutsideBounds, } = props;
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, dispatcher, shapesData, svgContainer, togglePinTooltip, tooltipPinned, unpinTooltip, xAxis, yAxis, xScale, yScale, tooltipThrottle, isOutsideBounds, } = props;
     const handleMove = ([pointerX, pointerY], event) => {
         if (tooltipPinned) {
             return;
@@ -24,11 +25,22 @@ export function useChartInnerHandlers(props) {
             boundsHeight,
             boundsWidth,
         });
-        dispatcher.call(EventType.HOVER_SHAPE, event.target, closest, [pointerX, pointerY]);
+        const { plotLines, plotBands } = getHoveredPlots({
+            pointerX: x,
+            pointerY: y,
+            xAxis,
+            yAxis,
+            xScale,
+            yScale,
+        });
+        const hoveredPlotsArg = { lines: plotLines, bands: plotBands };
+        dispatcher.call(EventType.HOVER_SHAPE, event.target, closest, [pointerX, pointerY], hoveredPlotsArg);
         dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
             hovered: closest,
             xAxis,
             yAxis: yAxis[0],
+            hoveredPlotLines: plotLines,
+            hoveredPlotBands: plotBands,
         }, event);
     };
     const handleMouseMove = (event) => {
@@ -77,11 +89,22 @@ export function useChartInnerHandlers(props) {
         dispatcher.call(EventType.CLICK_CHART, undefined, { point: selected.data, series: selected.series }, event);
         const nextTooltipFixed = !tooltipPinned;
         if (!nextTooltipFixed) {
-            dispatcher.call(EventType.HOVER_SHAPE, event.target, items, [pointerX, pointerY]);
+            const { plotLines, plotBands } = getHoveredPlots({
+                pointerX: x,
+                pointerY: y,
+                xAxis,
+                yAxis,
+                xScale,
+                yScale,
+            });
+            const hoveredPlotsArg = { lines: plotLines, bands: plotBands };
+            dispatcher.call(EventType.HOVER_SHAPE, event.target, items, [pointerX, pointerY], hoveredPlotsArg);
             dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
                 hovered: items,
                 xAxis,
                 yAxis: yAxis[0],
+                hoveredPlotLines: plotLines,
+                hoveredPlotBands: plotBands,
             }, event);
         }
         togglePinTooltip === null || togglePinTooltip === void 0 ? void 0 : togglePinTooltip(nextTooltipFixed, event);

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

@@ -77,6 +77,7 @@ export declare function useChartInnerProps(props: Props): {
         ticks: {
             pixelInterval?: number;
         };
+        tickMarks: import("../../hooks").PreparedAxisTickMarks;
         position: "left" | "right" | "top" | "bottom";
         plotIndex: number;
         plotLines: import("../../hooks").PreparedAxisPlotLine[];

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ChartTooltip, ChartXAxis, ChartYAxis, TooltipDataChunk } from '../../types';
+import type { ChartTooltip, ChartTooltipRendererArgs, ChartXAxis, ChartYAxis, TooltipDataChunk } from '../../types';
 export interface ChartTooltipContentProps {
     hovered?: TooltipDataChunk[];
     pinned?: boolean;
@@ -7,6 +7,8 @@ export interface ChartTooltipContentProps {
     rowRenderer?: ChartTooltip['rowRenderer'];
     valueFormat?: ChartTooltip['valueFormat'];
     headerFormat?: ChartTooltip['headerFormat'];
+    hoveredPlotLines?: ChartTooltipRendererArgs['hoveredPlotLines'];
+    hoveredPlotBands?: ChartTooltipRendererArgs['hoveredPlotBands'];
     totals?: ChartTooltip['totals'];
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;

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

@@ -2,11 +2,11 @@ import React from 'react';
 import isNil from 'lodash/isNil';
 import { DefaultTooltipContent } from './DefaultTooltipContent';
 export const ChartTooltipContent = React.memo((props) => {
-    const { hovered, xAxis, yAxis, renderer, rowRenderer, valueFormat, headerFormat, totals, pinned, qa, } = props;
+    const { hovered, hoveredPlotLines, hoveredPlotBands, xAxis, yAxis, renderer, rowRenderer, valueFormat, headerFormat, totals, pinned, qa, } = props;
     if (!hovered) {
         return null;
     }
-    const customTooltip = renderer === null || renderer === void 0 ? void 0 : renderer({ hovered, xAxis, yAxis });
+    const customTooltip = renderer === null || renderer === void 0 ? void 0 : renderer({ hovered, hoveredPlotLines, hoveredPlotBands, xAxis, yAxis });
     return isNil(customTooltip) ? (React.createElement(DefaultTooltipContent, { hovered: hovered, pinned: pinned, rowRenderer: rowRenderer, totals: totals, valueFormat: valueFormat, headerFormat: headerFormat, xAxis: xAxis, yAxis: yAxis, qa: qa })) : (customTooltip);
 });
 ChartTooltipContent.displayName = 'ChartTooltipContent';

package/dist/cjs/components/Tooltip/DefaultTooltipContent/Row.js

@@ -14,6 +14,6 @@ export function Row(props) {
     }, [color, colorSymbol]);
     return (React.createElement("div", { className: b('content-row', { active, striped }, className), style: style },
         colorItem,
-        label,
+        React.createElement("span", { className: b('content-row-label') }, label),
         value && React.createElement("span", { className: b('content-row-value') }, value)));
 }

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

@@ -7,7 +7,10 @@ import './styles.css';
 const b = block('tooltip');
 export const Tooltip = (props) => {
     const { tooltip, xAxis, yAxis, svgContainer, dispatcher, tooltipPinned, onOutsideClick } = props;
-    const { hovered, pointerPosition } = useTooltip({ dispatcher, tooltip });
+    const { hovered, hoveredPlotLines, hoveredPlotBands, pointerPosition } = useTooltip({
+        dispatcher,
+        tooltip,
+    });
     const containerRect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
     const left = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) || 0) + containerRect.left;
     const top = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[1]) || 0) + containerRect.top;
@@ -23,5 +26,5 @@ export const Tooltip = (props) => {
     }, [left, top]);
     return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { anchorElement: anchor, className: b({ pinned: tooltipPinned }), disableTransition: true, floatingStyles: tooltipPinned ? undefined : { pointerEvents: 'none' }, offset: { mainAxis: 20 }, onOpenChange: tooltipPinned ? handleOnOpenChange : undefined, open: true, placement: ['right', 'left', 'top', 'bottom'] },
         React.createElement("div", { className: b('popup-content') },
-            React.createElement(ChartTooltipContent, { hovered: hovered, pinned: tooltipPinned, renderer: tooltip.renderer, rowRenderer: tooltip.rowRenderer, totals: tooltip.totals, valueFormat: tooltip.valueFormat, headerFormat: tooltip.headerFormat, xAxis: xAxis, yAxis: yAxis, qa: tooltip.qa })))) : null;
+            React.createElement(ChartTooltipContent, { hovered: hovered, hoveredPlotLines: hoveredPlotLines, hoveredPlotBands: hoveredPlotBands, pinned: tooltipPinned, renderer: tooltip.renderer, rowRenderer: tooltip.rowRenderer, totals: tooltip.totals, valueFormat: tooltip.valueFormat, headerFormat: tooltip.headerFormat, xAxis: xAxis, yAxis: yAxis, qa: tooltip.qa })))) : null;
 };

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

@@ -45,14 +45,21 @@
   font-weight: 600;
   background-color: var(--g-color-base-info-medium);
 }
+.gcharts-tooltip__content-row-label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .gcharts-tooltip__content-row-color {
   display: inline-block;
+  flex-shrink: 0;
   width: 16px;
   height: 8px;
   border-radius: 2px;
   background-color: #dddddd;
 }
 .gcharts-tooltip__content-row-value {
+  flex-shrink: 0;
   margin-inline-start: auto;
 }
 .gcharts-tooltip__content-row-totals {

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

@@ -12,5 +12,9 @@ type AxisCrosshairDefaults = Required<AxisCrosshair>;
 export declare const axisCrosshairDefaults: AxisCrosshairDefaults;
 export declare const xAxisTitleDefaults: AxisTitleDefaults;
 export declare const yAxisTitleDefaults: AxisTitleDefaults;
+export declare const axisTickMarksDefaults: {
+    enabled: boolean;
+    length: number;
+};
 export declare const DEFAULT_AXIS_TYPE: ChartAxisType;
 export {};

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

@@ -25,4 +25,8 @@ export const axisCrosshairDefaults = {
 };
 export const xAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 4 });
 export const yAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 8 });
+export const axisTickMarksDefaults = {
+    enabled: false,
+    length: 6,
+};
 export const DEFAULT_AXIS_TYPE = 'linear';

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

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { DashStyle } from '../../constants';
-import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisRangeSlider, ChartAxisTitleAlignment, ChartAxisType, DeepRequired, PlotLayerPlacement } from '../../types';
+import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisRangeSlider, ChartAxisTitleAlignment, ChartAxisType, DeepRequired, MeaningfulAny, PlotLayerPlacement } from '../../types';
 type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation' | 'html'>> & {
     style: BaseTextStyle;
     rotation: number;
@@ -10,6 +10,7 @@ type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style'
     maxWidth: number;
 };
 export type PreparedAxisPlotBand = Required<AxisPlotBand> & {
+    custom?: MeaningfulAny;
     label: {
         text: string;
         style: BaseTextStyle;
@@ -25,6 +26,7 @@ export type PreparedAxisPlotLine = {
     dashStyle: DashStyle;
     opacity: number;
     layerPlacement: PlotLayerPlacement;
+    custom?: MeaningfulAny;
     label: {
         text: string;
         style: BaseTextStyle;
@@ -35,6 +37,10 @@ export type PreparedAxisPlotLine = {
 export type PreparedRangeSlider = DeepRequired<Omit<ChartAxisRangeSlider, 'defaultRange'>> & {
     defaultRange?: ChartAxisRangeSlider['defaultRange'];
 };
+export type PreparedAxisTickMarks = {
+    enabled: boolean;
+    length: number;
+};
 type PreparedBaseAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotBands'> & {
     type: ChartAxisType;
     labels: PreparedAxisLabels;
@@ -58,6 +64,7 @@ type PreparedBaseAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotB
     ticks: {
         pixelInterval?: number;
     };
+    tickMarks: PreparedAxisTickMarks;
     position: 'left' | 'right' | 'top' | 'bottom';
     plotIndex: number;
     plotLines: PreparedAxisPlotLine[];

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

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
-import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
-import { calculateCos, calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../../utils';
+import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, axisTickMarksDefaults, xAxisTitleDefaults, } from '../../constants';
+import { TIME_UNITS, calculateCos, calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { getXAxisTickValues } from '../../utils/chart/axis/x-axis';
 import { createXScale } from '../useAxisScales';
 import { getPreparedRangeSlider } from './range-slider';
@@ -17,7 +17,7 @@ async function setLabelSettings({ axis, seriesData, width, axisLabels, }) {
     const labelLineHeight = (await getTextSize('Tmp')).height;
     const tickValues = getXAxisTickValues({ axis, scale, labelLineHeight, series: seriesData });
     const tickStep = getMinSpaceBetween(tickValues, (d) => Number(d.value));
-    if (axis.type === 'datetime' && !(axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.dateFormat)) {
+    if (axis.type === 'datetime' && !(axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.dateFormat) && tickStep >= TIME_UNITS.day) {
         axis.labels.dateFormat = getDefaultDateFormat(tickStep);
     }
     const labels = tickValues.map((tick) => formatAxisTickLabel({
@@ -141,6 +141,10 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
                 })
                 : (_j = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _j === void 0 ? void 0 : _j.pixelInterval,
         },
+        tickMarks: {
+            enabled: get(xAxis, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
+            length: get(xAxis, 'tickMarks.length', axisTickMarksDefaults.length),
+        },
         position: 'bottom',
         plotIndex: 0,
         plotLines: get(xAxis, 'plotLines', []).map((d) => ({
@@ -150,6 +154,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
             dashStyle: get(d, 'dashStyle', DASH_STYLE.Solid),
             opacity: get(d, 'opacity', 1),
             layerPlacement: get(d, 'layerPlacement', 'before'),
+            custom: d.custom,
             label: prepareAxisPlotLabel(d),
         })),
         plotBands: get(xAxis, 'plotBands', []).map((d) => ({
@@ -158,6 +163,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
             from: get(d, 'from', 0),
             to: get(d, 'to', 0),
             layerPlacement: get(d, 'layerPlacement', 'before'),
+            custom: d.custom,
             label: prepareAxisPlotLabel(d),
         })),
         crosshair: {

package/dist/cjs/hooks/useAxis/y-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { getTickValues } from '../../components/AxisY/utils';
-import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
+import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, axisTickMarksDefaults, yAxisTitleDefaults, } from '../../constants';
 import { calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getDefaultMinYAxisValue, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, shouldSyncAxisWithPrimary, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 import { prepareAxisPlotLabel } from './utils';
@@ -160,6 +160,10 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                     })
                     : (_q = axisItem.ticks) === null || _q === void 0 ? void 0 : _q.pixelInterval,
             },
+            tickMarks: {
+                enabled: get(axisItem, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
+                length: get(axisItem, 'tickMarks.length', axisTickMarksDefaults.length),
+            },
             position: axisPosition,
             plotIndex: get(axisItem, 'plotIndex', 0),
             plotLines: get(axisItem, 'plotLines', []).map((d) => ({
@@ -169,6 +173,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 dashStyle: get(d, 'dashStyle', DASH_STYLE.Solid),
                 opacity: get(d, 'opacity', 1),
                 layerPlacement: get(d, 'layerPlacement', 'before'),
+                custom: d.custom,
                 label: prepareAxisPlotLabel(d),
             })),
             plotBands: get(axisItem, 'plotBands', []).map((d) => ({
@@ -177,6 +182,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 from: get(d, 'from', 0),
                 to: get(d, 'to', 0),
                 layerPlacement: get(d, 'layerPlacement', 'before'),
+                custom: d.custom,
                 label: prepareAxisPlotLabel(d),
             })),
             crosshair: {

package/dist/cjs/hooks/useNormalizedOriginalData/index.d.ts

@@ -27,6 +27,7 @@ export declare function useNormalizedOriginalData(props: UseOriginalDataProps):
         maxPadding?: number;
         plotLines?: import("../../types").AxisPlotLine[];
         plotBands?: import("../../types").AxisPlotBand[];
+        tickMarks?: import("../../types").ChartAxisTickMarks;
         visible?: boolean;
         order?: "sortAsc" | "sortDesc" | "reverse";
         startOnTick?: boolean;

package/dist/cjs/hooks/useTooltip/index.d.ts

@@ -1,5 +1,5 @@
 import type { Dispatch } from 'd3';
-import type { PointPosition, TooltipDataChunk } from '../../types';
+import type { AxisPlotBand, AxisPlotLine, PointPosition, TooltipDataChunk } from '../../types';
 import type { PreparedTooltip } from '../useChartOptions/types';
 type Args = {
     dispatcher: Dispatch<object>;
@@ -7,6 +7,8 @@ type Args = {
 };
 export declare const useTooltip: ({ dispatcher, tooltip }: Args) => {
     hovered: TooltipDataChunk[] | undefined;
+    hoveredPlotLines: AxisPlotLine[] | undefined;
+    hoveredPlotBands: AxisPlotBand[] | undefined;
     pointerPosition: PointPosition | undefined;
 };
 export {};