@gravity-ui/charts 1.35.1 → 1.36.0

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/useAxisScales/x-scale.d.ts

@@ -6,4 +6,4 @@ export declare function createXScale(args: {
     series: (PreparedSeries | ChartSeries)[];
     rangeSliderState?: RangeSliderState;
     zoomStateX?: [number, number];
-}): import("d3-scale").ScaleBand<string> | import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleTime<number, number, never> | undefined;
+}): import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleBand<string> | import("d3-scale").ScaleTime<number, number, never> | undefined;

package/dist/cjs/hooks/useAxisScales/y-scale.d.ts

@@ -7,4 +7,4 @@ export declare function createYScale(args: {
     primaryAxis?: PreparedAxis;
     primaryTicksCount?: number;
     zoomStateY?: [number, number];
-}): import("d3-scale").ScaleBand<string> | import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleTime<number, number, never> | undefined;
+}): import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleBand<string> | import("d3-scale").ScaleTime<number, number, never> | undefined;

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

package/dist/cjs/hooks/useTooltip/index.js

@@ -1,16 +1,18 @@
 import React from 'react';
 import isEqual from 'lodash/isEqual';
 export const useTooltip = ({ dispatcher, tooltip }) => {
-    const [{ hovered, pointerPosition }, setTooltipState] = React.useState({});
+    const [{ hovered, hoveredPlotLines, hoveredPlotBands, pointerPosition }, setTooltipState] = React.useState({});
     const prevHovered = React.useRef(hovered);
     React.useEffect(() => {
         if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled) {
-            dispatcher.on('hover-shape.tooltip', (nextHovered, nextPointerPosition) => {
+            dispatcher.on('hover-shape.tooltip', (nextHovered, nextPointerPosition, nextHoveredPlots) => {
                 const filteredNextHovered = nextHovered === null || nextHovered === void 0 ? void 0 : nextHovered.filter((item) => 'y' in item.data ? item.data.y !== null : true);
                 const isHoveredChanged = !isEqual(prevHovered.current, filteredNextHovered);
                 const newTooltipState = {
-                    pointerPosition: nextPointerPosition,
                     hovered: isHoveredChanged ? filteredNextHovered : prevHovered.current,
+                    hoveredPlotLines: nextHoveredPlots === null || nextHoveredPlots === void 0 ? void 0 : nextHoveredPlots.lines,
+                    hoveredPlotBands: nextHoveredPlots === null || nextHoveredPlots === void 0 ? void 0 : nextHoveredPlots.bands,
+                    pointerPosition: nextPointerPosition,
                 };
                 if (isHoveredChanged) {
                     prevHovered.current = filteredNextHovered;
@@ -26,6 +28,8 @@ export const useTooltip = ({ dispatcher, tooltip }) => {
     }, [dispatcher, tooltip]);
     return {
         hovered,
+        hoveredPlotLines,
+        hoveredPlotBands,
         pointerPosition,
     };
 };

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

@@ -1,6 +1,7 @@
 import type { DurationInput } from '@gravity-ui/date-utils';
 import type { AXIS_TYPE, DashStyle } from '../../constants';
 import type { FormatNumberOptions } from '../formatter';
+import type { MeaningfulAny } from '../misc';
 import type { BaseTextStyle } from './base';
 import type { ChartBrush } from './brush';
 export type ChartAxisType = (typeof AXIS_TYPE)[keyof typeof AXIS_TYPE];
@@ -94,6 +95,16 @@ export interface ChartAxisTitle {
      */
     maxRowCount?: number;
 }
+export interface ChartAxisTickMarks {
+    /** Enable or disable the tick marks on the axis.
+     * @default false
+     */
+    enabled?: boolean;
+    /** The length of the tick marks in pixels (perpendicular to the axis).
+     * @default 6
+     */
+    length?: number;
+}
 export interface ChartAxis {
     categories?: string[];
     /** Configure a crosshair that follows either the mouse pointer or the hovered point. */
@@ -161,6 +172,8 @@ export interface ChartAxis {
     plotLines?: AxisPlotLine[];
     /** An array of colored bands stretching across the plot area marking an interval on the axis. */
     plotBands?: AxisPlotBand[];
+    /** Small perpendicular marks on the axis line at each tick position. */
+    tickMarks?: ChartAxisTickMarks;
     /** Whether axis, including axis title, line, ticks and labels, should be visible. */
     visible?: boolean;
     /** Setting the order of the axis values. It is not applied by default.
@@ -226,6 +239,8 @@ export interface AxisPlot {
          * It is assigned as a data-qa attribute to an element. */
         qa?: string;
     };
+    /** Custom data associated with the plot line/band, accessible in tooltip renderer args. */
+    custom?: MeaningfulAny;
 }
 export interface AxisPlotLine extends AxisPlot {
     /** The position of the line in axis units. */
@@ -259,7 +274,7 @@ export interface AxisPlotBand extends AxisPlot {
      */
     to: number | string | null;
 }
-export interface AxisCrosshair extends Omit<AxisPlotLine, 'value' | 'label'> {
+export interface AxisCrosshair extends Omit<AxisPlotLine, 'value' | 'label' | 'custom'> {
     /** Whether the crosshair should snap to the point or follow the pointer independent of points.
      * @default true
      */
@@ -269,7 +284,7 @@ export interface AxisCrosshair extends Omit<AxisPlotLine, 'value' | 'label'> {
      */
     enabled?: boolean;
 }
-interface ChartYAxisTitle extends ChartAxisTitle {
+export interface ChartYAxisTitle extends ChartAxisTitle {
     /** Rotation of the title in degrees.
      * Currently, the available values are only for rotation in multiples of 90 degrees.
      *
@@ -297,4 +312,3 @@ export interface ChartYAxis extends ChartAxis {
     plotIndex?: number;
     title?: ChartYAxisTitle;
 }
-export {};

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

@@ -84,7 +84,7 @@ export interface BaseSeriesLegend extends ChartLegendItem {
 }
 export interface BaseTextStyle {
     fontSize: string;
-    fontWeight?: string;
+    fontWeight?: string | number;
     fontColor?: string;
 }
 export {};

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

@@ -1,7 +1,7 @@
 import type { TOOLTIP_TOTALS_BUILT_IN_AGGREGATION } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { AreaSeries, AreaSeriesData } from './area';
-import type { ChartXAxis, ChartYAxis } from './axis';
+import type { AxisPlotBand, AxisPlotLine, ChartXAxis, ChartYAxis } from './axis';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
 import type { CustomFormat, ValueFormat } from './base';
@@ -91,6 +91,10 @@ export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | Too
 };
 export interface ChartTooltipRendererArgs<T = MeaningfulAny> {
     hovered: TooltipDataChunk<T>[];
+    /** Plot lines that intersect with the current pointer position. */
+    hoveredPlotLines?: AxisPlotLine[];
+    /** Plot bands that contain the current pointer position. */
+    hoveredPlotBands?: AxisPlotBand[];
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
 }

package/dist/cjs/utils/chart/axis/common.d.ts

@@ -2,14 +2,12 @@ import type { AxisDomain, AxisScale, ScaleBand, ScaleTime } from 'd3';
 import type { ChartScale, PreparedAxis, PreparedAxisPlotBand, PreparedSplit } from '../../../hooks';
 import type { ChartAxis } from '../../../types';
 import type { AxisDirection } from '../types';
-type Ticks = number[] | string[] | Date[];
 export declare function getTicksCountByPixelInterval({ axis, axisWidth, }: {
     axis: PreparedAxis;
     axisWidth: number;
 }): number | undefined;
 export declare function isBandScale(scale?: ChartScale | AxisScale<AxisDomain>): scale is ScaleBand<string>;
 export declare function isTimeScale(scale?: ChartScale | AxisScale<AxisDomain>): scale is ScaleTime<number, number>;
-export declare function getScaleTicks(scale: ChartScale | AxisScale<AxisDomain>, ticksCount?: number): Ticks;
 export declare function getXAxisOffset(): 0 | 0.5;
 export declare function getXTickPosition({ scale, offset }: {
     scale: AxisScale<AxisDomain>;
@@ -19,7 +17,7 @@ export declare function getAxisItems({ scale, count, maxCount, }: {
     scale: ChartScale | AxisScale<AxisDomain>;
     count?: number;
     maxCount?: number;
-}): Ticks;
+}): number[] | string[] | Date[];
 export declare function getAxisHeight(args: {
     split: PreparedSplit;
     boundsHeight: number;

package/dist/cjs/utils/chart/axis/common.js

@@ -1,5 +1,6 @@
 import { ascending, descending, reverse, sort } from 'd3';
 import clamp from 'lodash/clamp';
+import { getScaleTicks } from '../ticks';
 export function getTicksCountByPixelInterval({ axis, axisWidth, }) {
     let ticksCount;
     if (axis.ticks.pixelInterval) {
@@ -16,15 +17,6 @@ export function isTimeScale(scale) {
     }
     return scale.domain()[0] instanceof Date;
 }
-export function getScaleTicks(scale, ticksCount) {
-    if ('ticks' in scale && typeof scale.ticks === 'function') {
-        return scale.ticks(ticksCount);
-    }
-    if (isBandScale(scale)) {
-        return scale.domain();
-    }
-    return [];
-}
 export function getXAxisOffset() {
     return typeof window !== 'undefined' && window.devicePixelRatio > 1 ? 0 : 0.5;
 }
@@ -42,7 +34,7 @@ export function getXTickPosition({ scale, offset }) {
     return isBandScale(scale) ? center(scale, offset) : number(scale);
 }
 export function getAxisItems({ scale, count, maxCount, }) {
-    let values = getScaleTicks(scale, count);
+    let values = getScaleTicks({ scale, ticksCount: count });
     if (maxCount && values.length > maxCount) {
         const step = Math.ceil(values.length / maxCount);
         values = values.filter((_, i) => i % step === 0);

package/dist/cjs/utils/chart/axis/x-axis.js

@@ -1,5 +1,6 @@
 import { getMinSpaceBetween } from '../array';
 import { isSeriesWithNumericalXValues } from '../series-type-guards';
+import { getScaleTicks } from '../ticks';
 import { getTicksCountByPixelInterval, isBandScale, thinOut } from './common';
 const DEFAULT_TICKS_COUNT = 10;
 function getTicksCount(args) {
@@ -29,7 +30,7 @@ export function getXAxisTickValues({ axis, labelLineHeight, scale, series, }) {
             return [];
         }
         const scaleTicksCount = getTicksCount({ axis, axisWidth, series });
-        const scaleTicks = scale.ticks(scaleTicksCount);
+        const scaleTicks = getScaleTicks({ scale, ticksCount: scaleTicksCount });
         const originalTickValues = scaleTicks.map((t) => ({
             x: scale(t),
             value: t,
@@ -43,7 +44,7 @@ export function getXAxisTickValues({ axis, labelLineHeight, scale, series, }) {
         let ticksCount = result.length - 1;
         while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
             ticksCount = ticksCount ? ticksCount - 1 : result.length - 1;
-            const newScaleTicks = scale.ticks(ticksCount);
+            const newScaleTicks = getScaleTicks({ scale, ticksCount });
             result = newScaleTicks.map((t) => ({
                 x: scale(t),
                 value: t,

package/dist/cjs/utils/chart/format.js

@@ -2,7 +2,7 @@ import { dateTimeUtc } from '@gravity-ui/date-utils';
 import capitalize from 'lodash/capitalize';
 import { DEFAULT_DATE_FORMAT } from '../../constants';
 import { formatNumber, getDefaultUnit } from '../../libs';
-import { getDefaultDateFormat } from './time';
+import { DATETIME_LABEL_FORMATS, TIME_UNITS, getDefaultDateFormat, getDefaultTimeOnlyFormat, } from './time';
 const LETTER_MOUNTH_AT_START_FORMAT_REGEXP = /^M{3,}/;
 function getFormattedDate(args) {
     const { value, format = DEFAULT_DATE_FORMAT } = args;
@@ -43,7 +43,22 @@ export function formatAxisTickLabel(args) {
         }
         case 'datetime': {
             const date = value;
-            const format = axis.labels.dateFormat || getDefaultDateFormat(step);
+            let format;
+            if (axis.labels.dateFormat) {
+                format = axis.labels.dateFormat;
+            }
+            else if (step !== undefined && step < TIME_UNITS.day) {
+                const d = dateTimeUtc({ input: date });
+                const isMidnight = d.isValid() &&
+                    d.hour() === 0 &&
+                    d.minute() === 0 &&
+                    d.second() === 0 &&
+                    d.millisecond() === 0;
+                format = isMidnight ? DATETIME_LABEL_FORMATS.day : getDefaultTimeOnlyFormat(step);
+            }
+            else {
+                format = getDefaultDateFormat(step);
+            }
             return getFormattedDate({ value: date, format });
         }
         case 'linear':

package/dist/cjs/utils/chart/get-hovered-plots.d.ts

@@ -0,0 +1,14 @@
+import type { PreparedXAxis, PreparedYAxis } from '../../hooks';
+import type { ChartScale } from '../../hooks/useAxisScales/types';
+import type { AxisPlotBand, AxisPlotLine } from '../../types';
+export declare function getHoveredPlots(args: {
+    pointerX: number;
+    pointerY: number;
+    xAxis?: PreparedXAxis | null;
+    yAxis: PreparedYAxis[];
+    xScale?: ChartScale;
+    yScale?: (ChartScale | undefined)[];
+}): {
+    plotLines: AxisPlotLine[];
+    plotBands: AxisPlotBand[];
+};

package/dist/cjs/utils/chart/get-hovered-plots.js

@@ -0,0 +1,67 @@
+import { getBandsPosition, isBandScale } from './axis/common';
+const PLOT_LINE_HIT_THRESHOLD_PX = 4;
+function getHoveredAxisPlotBands(args) {
+    const { pointerPx, plotBands, scale, axis } = args;
+    const axisScale = scale;
+    const result = [];
+    for (const band of plotBands) {
+        const { from, to } = getBandsPosition({ band, axisScale, axis });
+        const startPx = Math.min(from, to);
+        const endPx = Math.max(from, to);
+        if (pointerPx >= startPx && pointerPx <= endPx) {
+            result.push(band);
+        }
+    }
+    return result;
+}
+function getHoveredAxisPlotLines(args) {
+    const { pointerPx, plotLines, scale } = args;
+    const result = [];
+    if (isBandScale(scale)) {
+        return result;
+    }
+    for (const line of plotLines) {
+        const linePx = Number(scale(line.value));
+        if (Math.abs(pointerPx - linePx) <= PLOT_LINE_HIT_THRESHOLD_PX + line.width / 2) {
+            result.push(line);
+        }
+    }
+    return result;
+}
+export function getHoveredPlots(args) {
+    const { pointerX, pointerY, xAxis, yAxis, xScale, yScale } = args;
+    const plotLines = [];
+    const plotBands = [];
+    if (xAxis && xScale) {
+        plotBands.push(...getHoveredAxisPlotBands({
+            pointerPx: pointerX,
+            plotBands: xAxis.plotBands,
+            scale: xScale,
+            axis: 'x',
+        }));
+        plotLines.push(...getHoveredAxisPlotLines({
+            pointerPx: pointerX,
+            plotLines: xAxis.plotLines,
+            scale: xScale,
+        }));
+    }
+    for (let i = 0; i < yAxis.length; i++) {
+        const yAxisItem = yAxis[i];
+        const yScaleItem = yScale === null || yScale === void 0 ? void 0 : yScale[i];
+        if (!yAxisItem || !yScaleItem) {
+            continue;
+        }
+        plotBands.push(...getHoveredAxisPlotBands({
+            pointerPx: pointerY,
+            plotBands: yAxisItem.plotBands,
+            scale: yScaleItem,
+            axis: 'y',
+        }));
+        plotLines.push(...getHoveredAxisPlotLines({
+            pointerPx: pointerY,
+            plotLines: yAxisItem.plotLines,
+            scale: yScaleItem,
+        }));
+    }
+    return { plotLines, plotBands };
+}

package/dist/cjs/utils/chart/ticks/datetime.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Generates time ticks for the given interval.
+ *
+ * Based on d3's utcTicks algorithm (https://github.com/d3/d3-time/blob/main/src/ticks.js) with one modification:
+ * weeks are considered to start on Monday (ISO 8601 standard)
+ * instead of Sunday (d3 default).
+ */
+export declare function getDateTimeTicks(start: Date, stop: Date, count?: number): Date[];

package/dist/cjs/utils/chart/ticks/datetime.js

@@ -0,0 +1,50 @@
+import { bisector, tickStep, utcDay, utcHour, utcMillisecond, utcMinute, utcMonth, utcSecond, utcMonday as utcWeek, utcYear, } from 'd3';
+import { DAY, HOUR, MINUTE, MONTH, SECOND, WEEK, YEAR } from '../../../constants';
+const tickIntervals = [
+    [utcSecond, 1, SECOND],
+    [utcSecond, 5, 5 * SECOND],
+    [utcSecond, 15, 15 * SECOND],
+    [utcSecond, 30, 30 * SECOND],
+    [utcMinute, 1, MINUTE],
+    [utcMinute, 5, 5 * MINUTE],
+    [utcMinute, 15, 15 * MINUTE],
+    [utcMinute, 30, 30 * MINUTE],
+    [utcHour, 1, HOUR],
+    [utcHour, 3, 3 * HOUR],
+    [utcHour, 6, 6 * HOUR],
+    [utcHour, 12, 12 * HOUR],
+    [utcDay, 1, DAY],
+    [utcDay, 2, 2 * DAY],
+    [utcWeek, 1, WEEK],
+    [utcMonth, 1, MONTH],
+    [utcMonth, 3, 3 * MONTH],
+    [utcYear, 1, YEAR],
+];
+function getDateTimeTickInterval(start, stop, count) {
+    const target = Math.abs(stop - start) / count;
+    const i = bisector(([, , step]) => step).right(tickIntervals, target);
+    if (i === tickIntervals.length) {
+        return utcYear.every(tickStep(start / YEAR, stop / YEAR, count));
+    }
+    if (i === 0) {
+        return utcMillisecond.every(Math.max(tickStep(start, stop, count), 1));
+    }
+    const [t, step] = tickIntervals[target / tickIntervals[i - 1][2] < tickIntervals[i][2] / target ? i - 1 : i];
+    return t.every(step);
+}
+/**
+ * Generates time ticks for the given interval.
+ *
+ * Based on d3's utcTicks algorithm (https://github.com/d3/d3-time/blob/main/src/ticks.js) with one modification:
+ * weeks are considered to start on Monday (ISO 8601 standard)
+ * instead of Sunday (d3 default).
+ */
+export function getDateTimeTicks(start, stop, count = 10) {
+    const reverse = stop < start;
+    if (reverse) {
+        [start, stop] = [stop, start];
+    }
+    const interval = getDateTimeTickInterval(start.getTime(), stop.getTime(), count);
+    const ticks = interval ? interval.range(start, new Date(Number(stop) + 1)) : [];
+    return reverse ? ticks.reverse() : ticks;
+}

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

@@ -0,0 +1,6 @@
+import type { AxisDomain, AxisScale } from 'd3';
+import type { ChartScale } from '../../../hooks';
+export declare function getScaleTicks({ scale, ticksCount, }: {
+    scale: ChartScale | AxisScale<AxisDomain>;
+    ticksCount?: number;
+}): string[] | number[] | Date[];

package/dist/cjs/utils/chart/ticks/index.js

@@ -0,0 +1,17 @@
+import { getDateTimeTicks } from './datetime';
+export function getScaleTicks({ scale, ticksCount, }) {
+    const scaleDomain = scale.domain();
+    switch (typeof scaleDomain[0]) {
+        case 'number': {
+            return scale.ticks(ticksCount);
+        }
+        // datetime scale
+        case 'object': {
+            return getDateTimeTicks(scaleDomain[0], scaleDomain[scaleDomain.length - 1], ticksCount);
+        }
+        case 'string': {
+            return scaleDomain;
+        }
+    }
+    return [];
+}

package/dist/cjs/utils/chart/time.d.ts

@@ -1,3 +1,4 @@
 export declare const TIME_UNITS: Record<string, number>;
 export declare const DATETIME_LABEL_FORMATS: Record<keyof typeof TIME_UNITS, string>;
 export declare function getDefaultDateFormat(range?: number): string;
+export declare function getDefaultTimeOnlyFormat(step: number): string;

package/dist/cjs/utils/chart/time.js

@@ -32,3 +32,12 @@ export function getDefaultDateFormat(range) {
     }
     return DATETIME_LABEL_FORMATS.day;
 }
+export function getDefaultTimeOnlyFormat(step) {
+    if (step < TIME_UNITS.second) {
+        return 'HH:mm:ss.SSS';
+    }
+    if (step < TIME_UNITS.minute) {
+        return 'HH:mm:ss';
+    }
+    return 'HH:mm';
+}

package/dist/esm/components/AxisX/AxisX.js

@@ -10,6 +10,7 @@ export const AxisX = (props) => {
     const lineGenerator = line();
     const htmlLabels = preparedAxisData.ticks.map((d) => d.htmlLabel).filter(Boolean);
     React.useEffect(() => {
+        var _a, _b;
         if (!ref.current) {
             return () => { };
         }
@@ -32,14 +33,17 @@ 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)
                 .selectAll('tspan')
                 .data(preparedAxisData.title.content)
                 .join('tspan')
                 .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) {
@@ -64,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(' '));
@@ -103,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)
@@ -124,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);
                     }
                 });
@@ -144,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))
@@ -166,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/esm/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/esm/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);
 }