@gravity-ui/charts 1.35.0 → 1.35.2

package/dist/cjs/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 () => { };
         }
@@ -34,6 +35,8 @@ export const AxisX = (props) => {
                 .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('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')

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

@@ -15,7 +15,7 @@ export const AxisY = (props) => {
         htmlElements.push(preparedAxisData.title);
     }
     React.useEffect(() => {
-        var _a;
+        var _a, _b, _c;
         if (!ref.current) {
             return () => { };
         }
@@ -41,6 +41,8 @@ export const AxisY = (props) => {
                 .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('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)
                 .selectAll('tspan')
                 .data(preparedAxisData.title.content)
                 .join('tspan')

package/dist/cjs/constants/datetime.d.ts

@@ -0,0 +1,8 @@
+export declare const DEFAULT_DATE_FORMAT = "DD.MM.YY";
+export declare const SECOND = 1000;
+export declare const MINUTE: number;
+export declare const HOUR: number;
+export declare const DAY: number;
+export declare const WEEK: number;
+export declare const MONTH: number;
+export declare const YEAR: number;

package/dist/cjs/constants/datetime.js

@@ -0,0 +1,8 @@
+export const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
+export const SECOND = 1000;
+export const MINUTE = SECOND * 60;
+export const HOUR = MINUTE * 60;
+export const DAY = HOUR * 24;
+export const WEEK = DAY * 7;
+export const MONTH = DAY * 30;
+export const YEAR = DAY * 365;

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

@@ -1,6 +1,6 @@
 export * from './axis';
 export * from './chart-types';
-export * from './date';
+export * from './datetime';
 export * from './defaults';
 export * from './layout-algorithms';
 export * from './line-styles';

package/dist/cjs/constants/index.js

@@ -1,6 +1,6 @@
 export * from './axis';
 export * from './chart-types';
-export * from './date';
+export * from './datetime';
 export * from './defaults';
 export * from './layout-algorithms';
 export * from './line-styles';

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

@@ -3,7 +3,7 @@ export declare function prepareAxisPlotLabel(d: AxisPlot): {
     text: string;
     style: {
         fontSize: string;
-        fontWeight?: string;
+        fontWeight?: string | number;
         fontColor: string;
     };
     padding: number;

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/useShapes/area/index.js

@@ -11,6 +11,7 @@ export const AreaSeriesShapes = (args) => {
     const hoveredDataRef = React.useRef(null);
     const plotRef = React.useRef(null);
     const markersRef = React.useRef(null);
+    const hoverMarkersRef = React.useRef(null);
     const allowOverlapDataLabels = React.useMemo(() => {
         return preparedData.some((d) => d === null || d === void 0 ? void 0 : d.series.dataLabels.allowOverlap);
     }, [preparedData]);
@@ -20,6 +21,7 @@ export const AreaSeriesShapes = (args) => {
         }
         const plotSvgElement = select(plotRef.current);
         const markersSvgElement = select(markersRef.current);
+        const hoverMarkersSvgElement = select(hoverMarkersRef.current);
         const hoverOptions = get(seriesOptions, 'area.states.hover');
         const inactiveOptions = get(seriesOptions, 'area.states.inactive');
         const line = lineGenerator()
@@ -141,6 +143,41 @@ export const AreaSeriesShapes = (args) => {
                 }
                 return d;
             });
+            hoverMarkersSvgElement.selectAll('*').remove();
+            if (hoverEnabled && selected.length > 0) {
+                const hoverOnlyMarkers = [];
+                for (const chunk of selected) {
+                    const seriesData = preparedData.find((pd) => pd.id === chunk.series.id);
+                    if (!seriesData) {
+                        continue;
+                    }
+                    const { series } = seriesData;
+                    if (series.marker.states.normal.enabled ||
+                        !series.marker.states.hover.enabled) {
+                        continue;
+                    }
+                    const point = seriesData.points.find((p) => p.data === chunk.data);
+                    if (!point || point.y === null) {
+                        continue;
+                    }
+                    hoverOnlyMarkers.push({
+                        point: point,
+                        active: true,
+                        hovered: true,
+                        clipped: false,
+                    });
+                }
+                if (hoverOnlyMarkers.length > 0) {
+                    hoverMarkersSvgElement
+                        .selectAll('g')
+                        .data(hoverOnlyMarkers)
+                        .join('g')
+                        .call(renderMarker)
+                        .each((_d, i, nodes) => {
+                        selectMarkerSymbol(select(nodes[i])).call(setMarker, 'hover');
+                    });
+                }
+            }
         }
         if (hoveredDataRef.current !== null) {
             handleShapeHover(hoveredDataRef.current);
@@ -160,5 +197,6 @@ export const AreaSeriesShapes = (args) => {
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: plotRef, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement("g", { ref: markersRef }),
+        React.createElement("g", { ref: hoverMarkersRef }),
         React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
 };

package/dist/cjs/hooks/useShapes/area/prepare-data.js

@@ -220,17 +220,22 @@ export const prepareAreaData = async (args) => {
                     return pointsAcc;
                 }, []);
                 let markers = [];
-                if (s.marker.states.normal.enabled || s.marker.states.hover.enabled) {
+                const hasPerPointNormalMarkers = s.data.some((d) => { var _a, _b, _c; return (_c = (_b = (_a = d.marker) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.normal) === null || _c === void 0 ? void 0 : _c.enabled; });
+                if (s.marker.states.normal.enabled || hasPerPointNormalMarkers) {
                     markers = points.reduce((markersAcc, p) => {
+                        var _a, _b, _c, _d;
                         if (p.y === null) {
                             return markersAcc;
                         }
-                        markersAcc.push({
-                            point: p,
-                            active: true,
-                            hovered: false,
-                            clipped: isOutsideBounds(p.x, p.y),
-                        });
+                        const pointNormalEnabled = (_d = (_c = (_b = (_a = p.data.marker) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.normal) === null || _c === void 0 ? void 0 : _c.enabled) !== null && _d !== void 0 ? _d : false;
+                        if (s.marker.states.normal.enabled || pointNormalEnabled) {
+                            markersAcc.push({
+                                point: p,
+                                active: true,
+                                hovered: false,
+                                clipped: isOutsideBounds(p.x, p.y),
+                            });
+                        }
                         return markersAcc;
                     }, []);
                 }

package/dist/cjs/hooks/useShapes/bar-x/prepare-data.js

@@ -1,9 +1,10 @@
-import { ascending, descending, reverse, sort } from 'd3';
+import { ascending, descending, max, reverse, sort } from 'd3';
 import get from 'lodash/get';
 import { getDataCategoryValue, getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
+import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../../constants';
 import { getSeriesStackId } from '../../useSeries/utils';
-import { getBarXLayout } from '../../utils/bar-x';
+import { getBandSize } from '../../utils/get-band-size';
 const isSeriesDataValid = (d) => d.y !== null;
 async function getLabelData(d, xMax) {
     var _a;
@@ -54,6 +55,8 @@ export const prepareBarXData = async (args) => {
             }
         }
     })();
+    const domain = new Set();
+    let maxGroupSize = 1;
     // series grouped by plotIndex > xValue > data[];
     const dataByPlots = new Map();
     series.forEach((s) => {
@@ -81,19 +84,27 @@ export const prepareBarXData = async (args) => {
                     data[key][stackId] = [];
                 }
                 data[key][stackId].push({ data: d, series: s });
+                domain.add(key);
             }
         });
+        maxGroupSize = Math.max(maxGroupSize, max(Object.values(data), (d) => Object.values(d).length) || 1);
     });
     const result = [];
+    const barMaxWidth = get(seriesOptions, 'bar-x.barMaxWidth');
+    const barPadding = get(seriesOptions, 'bar-x.barPadding');
+    const groupPadding = get(seriesOptions, 'bar-x.groupPadding');
+    const bandSize = getBandSize({
+        domain: Array.from(domain),
+        scale: xScale,
+    });
+    const groupGap = Math.max(bandSize * groupPadding, MIN_BAR_GROUP_GAP);
+    const groupSize = bandSize - groupGap;
+    const rectGap = Math.max(bandSize * barPadding, MIN_BAR_GAP);
+    const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(groupSize / maxGroupSize - rectGap, barMaxWidth));
     const plotIndexes = Array.from(dataByPlots.keys());
     for (let plotDataIndex = 0; plotDataIndex < plotIndexes.length; plotDataIndex++) {
         const data = (_b = dataByPlots.get(plotIndexes[plotDataIndex])) !== null && _b !== void 0 ? _b : {};
         const groupedData = Object.entries(data);
-        const { bandSize, barGap: rectGap, barSize: rectWidth, } = getBarXLayout({
-            groupedData: data,
-            seriesOptions,
-            scale: xScale,
-        });
         for (let groupedDataIndex = 0; groupedDataIndex < groupedData.length; groupedDataIndex++) {
             const [xValue, val] = groupedData[groupedDataIndex];
             const stacks = Object.values(val);

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

@@ -11,6 +11,7 @@ export const LineSeriesShapes = (args) => {
     const hoveredDataRef = React.useRef(null);
     const plotRef = React.useRef(null);
     const markersRef = React.useRef(null);
+    const hoverMarkersRef = React.useRef(null);
     const allowOverlapDataLabels = React.useMemo(() => {
         return preparedData.some((d) => d === null || d === void 0 ? void 0 : d.series.dataLabels.allowOverlap);
     }, [preparedData]);
@@ -20,6 +21,7 @@ export const LineSeriesShapes = (args) => {
         }
         const plotSvgElement = select(plotRef.current);
         const markersSvgElement = select(markersRef.current);
+        const hoverMarkersSvgElement = select(hoverMarkersRef.current);
         const hoverOptions = get(seriesOptions, 'line.states.hover');
         const inactiveOptions = get(seriesOptions, 'line.states.inactive');
         const line = lineGenerator()
@@ -127,6 +129,41 @@ export const LineSeriesShapes = (args) => {
                 }
                 return d;
             });
+            hoverMarkersSvgElement.selectAll('*').remove();
+            if (hoverEnabled && selected.length > 0) {
+                const hoverOnlyMarkers = [];
+                for (const chunk of selected) {
+                    const seriesData = preparedData.find((pd) => pd.id === chunk.series.id);
+                    if (!seriesData) {
+                        continue;
+                    }
+                    const { series } = seriesData;
+                    if (series.marker.states.normal.enabled ||
+                        !series.marker.states.hover.enabled) {
+                        continue;
+                    }
+                    const point = seriesData.points.find((p) => p.data === chunk.data);
+                    if (!point || point.x === null || point.y === null) {
+                        continue;
+                    }
+                    hoverOnlyMarkers.push({
+                        point: point,
+                        active: true,
+                        hovered: true,
+                        clipped: false,
+                    });
+                }
+                if (hoverOnlyMarkers.length > 0) {
+                    hoverMarkersSvgElement
+                        .selectAll('g')
+                        .data(hoverOnlyMarkers)
+                        .join('g')
+                        .call(renderMarker)
+                        .each((_d, i, nodes) => {
+                        selectMarkerSymbol(select(nodes[i])).call(setMarker, 'hover');
+                    });
+                }
+            }
         }
         if (hoveredDataRef.current !== null) {
             handleShapeHover(hoveredDataRef.current);
@@ -146,5 +183,6 @@ export const LineSeriesShapes = (args) => {
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: plotRef, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement("g", { ref: markersRef }),
+        React.createElement("g", { ref: hoverMarkersRef }),
         React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
 };

package/dist/cjs/hooks/useShapes/line/prepare-data.js

@@ -86,17 +86,22 @@ export const prepareLineData = async (args) => {
             }
         }
         let markers = [];
-        if (s.marker.states.normal.enabled || s.marker.states.hover.enabled) {
+        const hasPerPointNormalMarkers = s.data.some((d) => { var _a, _b, _c; return (_c = (_b = (_a = d.marker) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.normal) === null || _c === void 0 ? void 0 : _c.enabled; });
+        if (s.marker.states.normal.enabled || hasPerPointNormalMarkers) {
             markers = points.reduce((result, p) => {
+                var _a, _b, _c, _d;
                 if (p.y === null || p.x === null) {
                     return result;
                 }
-                result.push({
-                    point: p,
-                    active: true,
-                    hovered: false,
-                    clipped: isOutsideBounds(p.x, p.y),
-                });
+                const pointNormalEnabled = (_d = (_c = (_b = (_a = p.data.marker) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.normal) === null || _c === void 0 ? void 0 : _c.enabled) !== null && _d !== void 0 ? _d : false;
+                if (s.marker.states.normal.enabled || pointNormalEnabled) {
+                    result.push({
+                        point: p,
+                        active: true,
+                        hovered: false,
+                        clipped: isOutsideBounds(p.x, p.y),
+                    });
+                }
                 return result;
             }, []);
         }

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

@@ -269,7 +269,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 +297,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/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/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/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 () => { };
         }
@@ -34,6 +35,8 @@ export const AxisX = (props) => {
                 .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('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')

package/dist/esm/components/AxisY/AxisY.js

@@ -15,7 +15,7 @@ export const AxisY = (props) => {
         htmlElements.push(preparedAxisData.title);
     }
     React.useEffect(() => {
-        var _a;
+        var _a, _b, _c;
         if (!ref.current) {
             return () => { };
         }
@@ -41,6 +41,8 @@ export const AxisY = (props) => {
                 .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('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)
                 .selectAll('tspan')
                 .data(preparedAxisData.title.content)
                 .join('tspan')

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

@@ -0,0 +1,8 @@
+export declare const DEFAULT_DATE_FORMAT = "DD.MM.YY";
+export declare const SECOND = 1000;
+export declare const MINUTE: number;
+export declare const HOUR: number;
+export declare const DAY: number;
+export declare const WEEK: number;
+export declare const MONTH: number;
+export declare const YEAR: number;

package/dist/esm/constants/datetime.js

@@ -0,0 +1,8 @@
+export const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
+export const SECOND = 1000;
+export const MINUTE = SECOND * 60;
+export const HOUR = MINUTE * 60;
+export const DAY = HOUR * 24;
+export const WEEK = DAY * 7;
+export const MONTH = DAY * 30;
+export const YEAR = DAY * 365;

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

@@ -1,6 +1,6 @@
 export * from './axis';
 export * from './chart-types';
-export * from './date';
+export * from './datetime';
 export * from './defaults';
 export * from './layout-algorithms';
 export * from './line-styles';

package/dist/esm/constants/index.js

@@ -1,6 +1,6 @@
 export * from './axis';
 export * from './chart-types';
-export * from './date';
+export * from './datetime';
 export * from './defaults';
 export * from './layout-algorithms';
 export * from './line-styles';

package/dist/esm/hooks/useAxis/utils.d.ts

@@ -3,7 +3,7 @@ export declare function prepareAxisPlotLabel(d: AxisPlot): {
     text: string;
     style: {
         fontSize: string;
-        fontWeight?: string;
+        fontWeight?: string | number;
         fontColor: string;
     };
     padding: number;

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