@gravity-ui/date-components 2.10.3 → 2.11.0

package/dist/esm/components/RangeDateSelection/components/RulerViewport/RulerViewport.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useMove } from '../../../../hooks/useMove';
+import { block } from '../../../../utils/cn';
+import './RulerViewport.css';
+const b = block('ruler-viewport');
+function RulerViewport({ className, children, onMove, onMoveStart, onMoveEnd, dragDisabled }, ref) {
+    const containerRef = React.useRef(null);
+    const draggable = typeof onMove === 'function';
+    const { moveProps } = useMove({
+        onMoveStart: onMoveStart,
+        onMove: (e) => {
+            const container = containerRef.current;
+            if (e.deltaX !== 0 && container) {
+                const { width } = container.getBoundingClientRect();
+                let delta = (e.deltaX * 100) / width;
+                delta = Math.round(delta * 100) / 100;
+                if (delta !== 0) {
+                    onMove === null || onMove === void 0 ? void 0 : onMove(delta, e);
+                }
+            }
+        },
+        onMoveEnd: onMoveEnd,
+    });
+    return (_jsxs("div", { ref: ref, className: b(null, className), children: [_jsxs("svg", { ref: containerRef, className: b('svg'), width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [_jsx("defs", { children: _jsxs("filter", { x: "0", y: "0", width: "1", height: "1", id: "g-date-tt-ticklabelbg", children: [_jsx("feFlood", { floodColor: "var(--_--g-date-ruler-viewport-background)" }), _jsx("feComposite", { in: "SourceGraphic" })] }) }), children] }), draggable ? (_jsx("div", Object.assign({ className: b('dragger', { disabled: dragDisabled }) }, moveProps))) : null] }));
+}
+const _RulerViewport = React.forwardRef(RulerViewport);
+export { _RulerViewport as RulerViewport };

package/dist/esm/components/RangeDateSelection/components/SelectionControl/SelectionControl.css

@@ -0,0 +1,78 @@
+.g-date-range-date-selection-control {
+  --_--g-date-timeline-color-selection: var(
+      --g-date-timeline-color-selection,
+      var(--g-color-base-info-light)
+  );
+  --_--g-date-timeline-color-selection-hover: var(
+      --g-date-timeline-color-selection-hover,
+      var(--g-color-base-info-light-hover)
+  );
+  --_--g-date-timeline-color-selection-handle: var(
+      --g-date-timeline-color-selection-handle,
+      var(--g-color-base-brand)
+  );
+  --_--g-date-timeline-color-selection-handle-hover: var(
+      --g-date-timeline-color-selection-handle-hover,
+      var(--g-color-base-brand-hover)
+  );
+  position: absolute;
+  z-index: 1;
+  inset-block: 0;
+}
+@supports (selector(:has(*))) and (selector(:focus-visible)) {
+  .g-date-range-date-selection-control__start:has(.g-date-range-date-selection-control__slider-input:focus-visible), .g-date-range-date-selection-control__end:has(.g-date-range-date-selection-control__slider-input:focus-visible), .g-date-range-date-selection-control__dragger:has(.g-date-range-date-selection-control__slider-input:focus-visible) {
+    border-radius: var(--g-border-radius-xs);
+    outline: var(--g-color-line-focus) solid 2px;
+  }
+}
+@supports not (selector(:has(*))) {
+  .g-date-range-date-selection-control__start:focus-within, .g-date-range-date-selection-control__end:focus-within, .g-date-range-date-selection-control__dragger:focus-within {
+    border-radius: var(--g-border-radius-xs);
+    outline: var(--g-color-line-focus) solid 2px;
+  }
+}
+.g-date-range-date-selection-control__dragger {
+  position: absolute;
+  inset-block: 0;
+  inset-inline: 2px;
+  cursor: move;
+  background: var(--_--g-date-timeline-color-selection);
+}
+.g-date-range-date-selection-control__dragger:hover, .g-date-range-date-selection-control__dragger_dragging {
+  background: var(--_--g-date-timeline-color-selection-hover);
+}
+.g-date-range-date-selection-control__dragger_disabled {
+  pointer-events: none;
+}
+.g-date-range-date-selection-control__start {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 4px;
+  background: var(--_--g-date-timeline-color-selection-handle);
+}
+.g-date-range-date-selection-control__end {
+  position: absolute;
+  inset-inline-end: 0;
+  width: 4px;
+  height: 100%;
+  background: var(--_--g-date-timeline-color-selection-handle);
+}
+.g-date-range-date-selection-control__start, .g-date-range-date-selection-control__end {
+  cursor: ew-resize;
+}
+.g-date-range-date-selection-control__start:hover, .g-date-range-date-selection-control__start_dragging, .g-date-range-date-selection-control__end:hover, .g-date-range-date-selection-control__end_dragging {
+  background: var(--_--g-date-timeline-color-selection-handle-hover);
+}
+.g-date-range-date-selection-control__slider-input-wrapper {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}

package/dist/esm/components/RangeDateSelection/components/SelectionControl/SelectionControl.d.ts

@@ -0,0 +1,8 @@
+import type { AccessibilityProps, DomProps, StyleProps } from '../../../types';
+import type { RangeDateSelectionState } from '../../hooks/useRangeDateSelectionState';
+import './SelectionControl.css';
+interface SelectionControlProps extends DomProps, StyleProps, AccessibilityProps {
+    state: RangeDateSelectionState;
+}
+export declare function SelectionControl({ state, style, className, ...props }: SelectionControlProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/RangeDateSelection/components/SelectionControl/SelectionControl.js

@@ -0,0 +1,132 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useMove } from '../../../../hooks/useMove';
+import { block } from '../../../../utils/cn';
+import { i18n } from '../../i18n';
+import { lerp } from '../../utils/span';
+import { useViewportDimensions, useViewportInterval } from '../Ruler/Ruler';
+import './SelectionControl.css';
+const b = block('range-date-selection-control');
+const MIN_SELECTION_WIDTH = 12; // px;
+const MIN_DRAG_SCALE = 0.01;
+const MAX_DRAG_SCALE = 100;
+const DRAG_SCALE_STRENGTH = 20;
+export function SelectionControl(_a) {
+    var _b;
+    var { state, style, className } = _a, props = __rest(_a, ["state", "style", "className"]);
+    const { start: startDate, end: endDate } = useViewportInterval();
+    const viewport = useViewportDimensions();
+    const [isDragging, setIsDragging] = React.useState(null);
+    const moveDataRef = React.useRef({
+        isZooming: false,
+    });
+    const visualMinDuration = (MIN_SELECTION_WIDTH * (endDate.valueOf() - startDate.valueOf())) / viewport.width;
+    const handleMoveEnd = () => {
+        state.endDragging();
+        setIsDragging(null);
+    };
+    const { moveProps } = useMove({
+        onMoveStart: (e) => {
+            setIsDragging('dragger');
+            state.startDragging();
+            moveDataRef.current = {
+                isZooming: state.canResize && (e.ctrlKey || e.metaKey),
+            };
+        },
+        onMoveEnd: handleMoveEnd,
+        onMove: (e) => {
+            if (e.deltaX === 0) {
+                return;
+            }
+            if (moveDataRef.current.isZooming) {
+                let scale = Math.exp((e.deltaX * DRAG_SCALE_STRENGTH) / viewport.width);
+                scale = Math.min(Math.max(scale, MIN_DRAG_SCALE), MAX_DRAG_SCALE);
+                state.scale(scale, { visualMinDuration });
+            }
+            else {
+                let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;
+                if (e.pointerType === 'keyboard') {
+                    delta =
+                        delta > 0
+                            ? Math.max(delta, state.align)
+                            : Math.min(delta, -1 * state.align);
+                }
+                state.move(delta, { visualMinDuration });
+            }
+        },
+    });
+    const { moveProps: moveStartProps } = useMove({
+        onMoveStart: () => {
+            setIsDragging('start');
+            state.startDragging();
+        },
+        onMoveEnd: handleMoveEnd,
+        onMove: (e) => {
+            if (e.deltaX === 0) {
+                return;
+            }
+            let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;
+            if (e.pointerType === 'keyboard') {
+                delta =
+                    delta > 0 ? Math.max(delta, state.align) : Math.min(delta, -1 * state.align);
+            }
+            state.moveStart(delta, { visualMinDuration });
+        },
+    });
+    const { moveProps: moveEndProps } = useMove({
+        onMoveStart: () => {
+            setIsDragging('end');
+            state.startDragging();
+        },
+        onMoveEnd: handleMoveEnd,
+        onMove: (e) => {
+            if (e.deltaX === 0) {
+                return;
+            }
+            let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;
+            if (e.pointerType === 'keyboard') {
+                delta =
+                    delta > 0 ? Math.max(delta, state.align) : Math.min(delta, -1 * state.align);
+            }
+            state.moveEnd(delta, { visualMinDuration });
+        },
+    });
+    const { start: startValue, end: endValue } = state.value;
+    const startX = lerp({ start: startDate.valueOf(), end: endDate.valueOf() }, { start: 0, end: viewport.width }, startValue.valueOf());
+    const endX = lerp({ start: startDate.valueOf(), end: endDate.valueOf() }, { start: 0, end: viewport.width }, endValue.valueOf());
+    const draggerInputRef = React.useRef(null);
+    const startInputRef = React.useRef(null);
+    const endInputRef = React.useRef(null);
+    let id = React.useId();
+    id = (_b = props.id) !== null && _b !== void 0 ? _b : id;
+    return (_jsxs("div", { className: b(null, className), style: Object.assign(Object.assign({}, style), { left: startX, width: endX - startX }), children: [_jsx("div", Object.assign({ className: b('dragger', {
+                    dragging: isDragging === 'dragger',
+                    disabled: Boolean(isDragging && isDragging !== 'dragger'),
+                }) }, moveProps, { onClick: () => {
+                    var _a;
+                    (_a = draggerInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, children: _jsx("div", { className: b('slider-input-wrapper'), children: _jsx("input", { id: `${id}-range`, ref: draggerInputRef, className: b('slider-input'), type: "range", step: 1, "aria-label": i18n('Range'), "aria-labelledby": [`${id}-range`, props['aria-labelledby']]
+                            .filter(Boolean)
+                            .join(' '), "aria-orientation": "horizontal", "aria-valuetext": `${startValue.format()} - ${endValue.format()}`, value: 0, onChange: () => { } }) }) })), state.canResize ? (
+            /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+            _jsx("div", Object.assign({ className: b('start', {
+                    dragging: isDragging === 'start',
+                    disabled: Boolean(isDragging && isDragging !== 'start'),
+                }) }, moveStartProps, { onClick: () => {
+                    var _a;
+                    (_a = startInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, children: _jsx("div", { className: b('slider-input-wrapper'), children: _jsx("input", { id: `${id}-start`, ref: startInputRef, className: b('slider-input'), type: "range", step: 1, "aria-label": i18n('Start of range'), "aria-labelledby": [`${id}-start`, props['aria-labelledby']]
+                            .filter(Boolean)
+                            .join(' '), "aria-orientation": "horizontal", "aria-valuetext": `${startValue.format()}`, value: 0, onChange: () => { } }) }) }))) : null, state.canResize ? (
+            /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+            _jsx("div", Object.assign({ className: b('end', {
+                    dragging: isDragging === 'end',
+                    disabled: Boolean(isDragging && isDragging !== 'end'),
+                }) }, moveEndProps, { onClick: () => {
+                    var _a;
+                    (_a = endInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, children: _jsx("div", { className: b('slider-input-wrapper'), children: _jsx("input", { id: `${id}-end`, ref: endInputRef, className: b('slider-input'), type: "range", step: 1, "aria-label": i18n('End of range'), "aria-labelledby": [`${id}-end`, props['aria-labelledby']]
+                            .filter(Boolean)
+                            .join(' '), "aria-orientation": "horizontal", "aria-valuetext": `${endValue.format()}`, value: 0, onChange: () => { } }) }) }))) : null] }));
+}

package/dist/esm/components/RangeDateSelection/components/Ticks/MiddleTicks.d.ts

@@ -0,0 +1,3 @@
+export declare function MiddleTicks({ timeZone }: {
+    timeZone?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/RangeDateSelection/components/Ticks/MiddleTicks.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useViewportDimensions } from '../Ruler/Ruler';
+import { Ticks, makeMiddleTicksGeometry } from './Ticks';
+export function MiddleTicks({ timeZone }) {
+    const { height } = useViewportDimensions();
+    return (_jsx(Ticks, { minTickWidth: 8, maxTickWidth: 20, theme: "dim", geometry: makeMiddleTicksGeometry({ tickHeight: 4, viewportHeight: height }), timeZone: timeZone }));
+}

package/dist/esm/components/RangeDateSelection/components/Ticks/SlitTicks.d.ts

@@ -0,0 +1,5 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+export declare function SlitTicks({ formatTime, timeZone, }: {
+    formatTime?: (time: DateTime) => string;
+    timeZone?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/RangeDateSelection/components/Ticks/SlitTicks.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useViewportDimensions } from '../Ruler/Ruler';
+import { Ticks, makeSlitTicksGeometry } from './Ticks';
+export function SlitTicks({ formatTime, timeZone, }) {
+    const { height } = useViewportDimensions();
+    return (_jsx(Ticks, { minTickWidth: 80, maxTickWidth: 200, theme: "normal", geometry: makeSlitTicksGeometry({ tickHeight: 4, viewportHeight: height }), hasLabels: true, formatTime: formatTime, timeZone: timeZone }));
+}

package/dist/esm/components/RangeDateSelection/components/Ticks/Ticks.css

@@ -0,0 +1,16 @@
+.g-date-timeline-ticks {
+  stroke: var(--g-color-text-secondary);
+  fill: var(--g-color-text-secondary);
+  stroke-width: 1px;
+}
+.g-date-timeline-ticks_theme_dim {
+  stroke: var(--g-color-line-generic-accent);
+  fill: var(--g-color-line-generic-accent);
+}
+.g-date-timeline-ticks__label {
+  font-size: 11px;
+  line-height: 14px;
+  user-select: none;
+  fill: var(--g-color-text-secondary);
+  text-anchor: middle;
+}

package/dist/esm/components/RangeDateSelection/components/Ticks/Ticks.d.ts

@@ -0,0 +1,18 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { Geometry } from './utils';
+import { makeMiddleTicksGeometry, makeSlitTicksGeometry } from './utils';
+import './Ticks.css';
+interface TicksProps {
+    theme: 'normal' | 'dim';
+    minTickWidth: number;
+    maxTickWidth: number;
+    hasLabels?: boolean;
+    geometry: Geometry;
+    className?: string;
+    labelsClassName?: string;
+    formatTime?: (time: DateTime) => string;
+    timeZone?: string;
+}
+export { makeMiddleTicksGeometry, makeSlitTicksGeometry };
+export type { Geometry };
+export declare function Ticks({ theme, minTickWidth, maxTickWidth, hasLabels, geometry, className, labelsClassName, formatTime, timeZone, }: TicksProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/RangeDateSelection/components/Ticks/Ticks.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { dateTime } from '@gravity-ui/date-utils';
+import { block } from '../../../../utils/cn';
+import { getLerpCoeff } from '../../utils/span';
+import { useViewportDimensions, useViewportInterval } from '../Ruler/Ruler';
+import { calculateTickTimes, formatTick as defaultFormatTime, makeMiddleTicksGeometry, makeSlitTicksGeometry, } from './utils';
+import './Ticks.css';
+const b = block('timeline-ticks');
+export { makeMiddleTicksGeometry, makeSlitTicksGeometry };
+export function Ticks({ theme, minTickWidth, maxTickWidth, hasLabels, geometry, className, labelsClassName, formatTime, timeZone, }) {
+    const viewport = useViewportDimensions();
+    const interval = useViewportInterval();
+    const tickTimes = React.useMemo(() => calculateTickTimes({
+        minTickWidth,
+        maxTickWidth,
+        viewportStart: interval.start,
+        viewportEnd: interval.end,
+        viewportWidth: viewport.width,
+        timeZone,
+    }), [maxTickWidth, minTickWidth, interval, viewport.width, timeZone]);
+    const tickCoords = React.useMemo(() => {
+        const timeToXCoeff = getLerpCoeff({ start: interval.start.valueOf(), end: interval.end.valueOf() }, { start: 0, end: viewport.width });
+        return tickTimes.map((t) => 0 + Math.round((t.valueOf() - interval.start.valueOf()) * timeToXCoeff));
+    }, [tickTimes, interval, viewport.width]);
+    const ticksGeometry = React.useMemo(() => {
+        return tickCoords.map(geometry).join('');
+    }, [geometry, tickCoords]);
+    const ticksPath = _jsx("path", { className: b({ theme }, className), d: ticksGeometry });
+    const tickLabels = React.useMemo(() => {
+        if (!hasLabels || tickCoords.length < 2) {
+            return null;
+        }
+        const result = [];
+        for (let i = 0; i < tickCoords.length; i++) {
+            const x = tickCoords[i];
+            const t = tickTimes[i];
+            const dt = dateTime({ input: t, timeZone });
+            result.push(_jsx("text", { className: b('label', labelsClassName), dominantBaseline: "middle", x: x, y: "50%", filter: "url(#g-date-tt-ticklabelbg)", children: formatTime ? formatTime(dt) : defaultFormatTime(dt) }, i));
+        }
+        return result;
+    }, [hasLabels, tickCoords, tickTimes, timeZone, labelsClassName, formatTime]);
+    return (_jsxs(React.Fragment, { children: [ticksPath, tickLabels] }));
+}

package/dist/esm/components/RangeDateSelection/components/Ticks/UnavialableTicks.d.ts

@@ -0,0 +1,15 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { Geometry } from './utils';
+import { makeMiddleTicksGeometry, makeSlitTicksGeometry } from './utils';
+import './Ticks.css';
+interface TicksProps {
+    theme: 'normal' | 'dim';
+    tickWidth: number;
+    minValue?: DateTime;
+    maxValue?: DateTime;
+    geometry: Geometry;
+    className?: string;
+}
+export { makeMiddleTicksGeometry, makeSlitTicksGeometry };
+export type { Geometry };
+export declare function UnavailableTicks({ theme, geometry, tickWidth, minValue, maxValue, className, }: TicksProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/RangeDateSelection/components/Ticks/UnavialableTicks.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { block } from '../../../../utils/cn';
+import { useViewportDimensions, useViewportInterval } from '../Ruler/Ruler';
+import { calculatePosition, makeMiddleTicksGeometry, makeSlitTicksGeometry } from './utils';
+import './Ticks.css';
+const b = block('timeline-ticks');
+export { makeMiddleTicksGeometry, makeSlitTicksGeometry };
+export function UnavailableTicks({ theme, geometry, tickWidth, minValue, maxValue, className, }) {
+    const viewport = useViewportDimensions();
+    const interval = useViewportInterval();
+    const endPoint = calculatePosition(minValue, interval, viewport.width);
+    const startPoint = calculatePosition(maxValue, interval, viewport.width);
+    const tickCoords = [];
+    if (!isNaN(endPoint) && endPoint > 0) {
+        let x = endPoint - tickWidth;
+        if (endPoint > viewport.width) {
+            x = endPoint - tickWidth * Math.floor((endPoint - viewport.width) / tickWidth);
+        }
+        tickCoords.push(x);
+        while (x > 0) {
+            x -= tickWidth;
+            tickCoords.push(x);
+        }
+    }
+    if (!isNaN(startPoint) && startPoint < viewport.width) {
+        let x = startPoint;
+        if (startPoint < 0) {
+            x = startPoint + tickWidth * Math.floor((0 - startPoint) / tickWidth) - tickWidth;
+        }
+        tickCoords.push(x);
+        while (x < viewport.width) {
+            x += tickWidth;
+            tickCoords.push(x);
+        }
+    }
+    const ticksGeometry = React.useMemo(() => {
+        return tickCoords.map(geometry).join('');
+    }, [geometry, tickCoords]);
+    const ticksPath = _jsx("path", { className: b({ theme }, className), d: ticksGeometry });
+    return _jsx(React.Fragment, { children: ticksPath });
+}

package/dist/esm/components/RangeDateSelection/components/Ticks/utils.d.ts

@@ -0,0 +1,24 @@
+import type { DateTime } from '@gravity-ui/date-utils/build/typings';
+import type { RangeValue } from '../../../types';
+interface CalculateTicksOptions {
+    viewportStart: DateTime;
+    viewportEnd: DateTime;
+    minTickWidth: number;
+    maxTickWidth: number;
+    viewportWidth: number;
+    timeZone?: string;
+}
+export declare function calculateTickTimes({ viewportStart, viewportEnd, minTickWidth, maxTickWidth, viewportWidth, timeZone, }: CalculateTicksOptions): number[];
+export declare function formatTick(t: DateTime): string;
+export interface Geometry {
+    (x: number): string;
+}
+interface MakeTicksOptions {
+    tickHeight: number;
+    viewportHeight: number;
+}
+export declare function makeMiddleTicksGeometry({ tickHeight, viewportHeight }: MakeTicksOptions): Geometry;
+export declare function makeSlitTicksGeometry({ tickHeight, viewportHeight }: MakeTicksOptions): Geometry;
+export declare function makeUnavailableTicksGeometry({ tickHeight, viewportHeight, }: MakeTicksOptions): Geometry;
+export declare function calculatePosition(value: DateTime | undefined, interval: RangeValue<DateTime>, width: number): number;
+export {};

package/dist/esm/components/RangeDateSelection/components/Ticks/utils.js

@@ -0,0 +1,158 @@
+import { dateTimeUtc, settings } from '@gravity-ui/date-utils';
+import { DAY, HOUR, MINUTE, MONTH, SECOND, WEEK, YEAR } from '../../../utils/constants';
+import { getLerpCoeff } from '../../utils/span';
+const MAX_TICKS = 100000;
+function makeTickSizes(periodSize, periodName, ...multipliers) {
+    return multipliers.map((m) => ({
+        duration: m * periodSize,
+        period: periodName,
+        multiplier: m,
+    }));
+}
+const tickSizes = [
+    ...makeTickSizes(SECOND, 'second', 1, 2, 5, 10, 15, 30),
+    ...makeTickSizes(MINUTE, 'minute', 1, 2, 5, 10, 20, 30),
+    ...makeTickSizes(HOUR, 'hour', 1, 2, 3, 6, 12),
+    ...makeTickSizes(DAY, 'day', 1, 2, 3),
+    ...makeTickSizes(WEEK, 'week', 1, 2),
+    ...makeTickSizes(MONTH, 'month', 1, 2, 3, 6),
+    ...makeTickSizes(YEAR, 'year', 1, 2, 5, 10, 15, 20, 30),
+];
+const TickFormat = {
+    SECONDS: 'HH:mm:ss',
+    MINUTES: 'HH:mm',
+    DATE: 'DD.MM.YY',
+    MONTH: 'MM-YYYY',
+    YEAR: 'YYYY',
+};
+function findTickSize({ minWidth, maxWidth, timelineWidth, timelineDuration }) {
+    const minDuration = (minWidth / timelineWidth) * timelineDuration;
+    const maxDuration = (maxWidth / timelineWidth) * timelineDuration;
+    const suitableSizes = [];
+    for (const size of tickSizes) {
+        if (minDuration <= size.duration) {
+            if (size.duration <= maxDuration) {
+                suitableSizes.push(size);
+            }
+            else if (!suitableSizes.length) {
+                return size;
+            }
+        }
+    }
+    if (!suitableSizes.length) {
+        return tickSizes[tickSizes.length - 1];
+    }
+    return suitableSizes[Math.floor(suitableSizes.length / 2)];
+}
+export function calculateTickTimes({ viewportStart, viewportEnd, minTickWidth, maxTickWidth, viewportWidth, timeZone, }) {
+    const tickSize = findTickSize({
+        minWidth: minTickWidth,
+        maxWidth: maxTickWidth,
+        timelineDuration: viewportEnd.valueOf() - viewportStart.valueOf(),
+        timelineWidth: viewportWidth,
+    });
+    let cursor;
+    const stableDate = dateTimeUtc({ input: '1977-01-01' }).timeZone(timeZone || settings.getDefaultTimeZone(), true);
+    const diff = stableDate.diff(viewportStart, tickSize.period);
+    const divider = tickSize.multiplier;
+    const multiplier = Math.floor(diff / divider);
+    cursor = stableDate.subtract(multiplier * divider, tickSize.period);
+    if (viewportStart.isBefore(cursor)) {
+        cursor = cursor.subtract(divider, tickSize.period);
+    }
+    const timeDiff = stableDate.utcOffset() - cursor.utcOffset();
+    if (timeDiff !== 0 &&
+        (tickSize.period === 'hour' || tickSize.period === 'minute' || tickSize.period === 'second')) {
+        cursor = cursor.add(timeDiff, 'minutes');
+    }
+    const ticks = [];
+    let i = 0;
+    let maxTickValue = cursor.valueOf();
+    while (cursor.valueOf() < viewportEnd.valueOf()) {
+        if (i >= MAX_TICKS) {
+            throw new Error('TimeLine: too much ticks');
+        }
+        i++;
+        ticks.push(cursor.valueOf());
+        let next = cursor.add(tickSize.multiplier, tickSize.period);
+        // Get time shift when season timeZone changed
+        const timeDiff = cursor.utcOffset() - next.utcOffset();
+        if (timeDiff !== 0 &&
+            (tickSize.period === 'hour' ||
+                tickSize.period === 'minute' ||
+                tickSize.period === 'second')) {
+            // Tick should be on same local time distance. Then labels will have correct format (such as date/week/month)
+            // For example, Amsterdam timezone:
+            //
+            //  2023-10-28T22:00Z -> Summer time is 2023-10-29T00:00, displays as 29.10.2023
+            //  2023-10-29T22:00Z -> Winter time is 2023-10-29T23:00, displays as 23:00
+            //
+            //  Add 1h:
+            //  2023-10-29T23:00Z -> Winter time is 2023-10-30T00:00, displays as 30.10.2023
+            //
+            next = next.add(timeDiff, 'minutes');
+            let k = 1;
+            while (next.valueOf() <= maxTickValue) {
+                // Example of case, Amsterdam timezone:
+                //  2023-03-26T00:00Z -> Winter time is 2023-03-26T01:00, displays as 01:00
+                //  2023-03-26T01:00Z -> Summer time is 2023-03-26T03:00, displays as 03:00
+                // We shift time on -1h... And again:
+                //  2023-03-26T00:00Z -> Winter time is 2023-03-26T01:00, displays as 01:00
+                // Infinite loop
+                //
+                // Therefore we need to skip period in the past
+                next = next
+                    .add(tickSize.multiplier * k++, tickSize.period)
+                    .add(timeDiff, 'minutes');
+            }
+        }
+        cursor = next;
+        maxTickValue = Math.max(maxTickValue, cursor.valueOf());
+    }
+    return ticks;
+}
+export function formatTick(t) {
+    let format;
+    if (t.valueOf() % MINUTE === 0) {
+        if (t.hour() === 0 && t.minute() === 0) {
+            if (t.date() === 1) {
+                if (t.month() === 0) {
+                    format = TickFormat.YEAR;
+                }
+                else {
+                    format = TickFormat.MONTH;
+                }
+            }
+            else {
+                format = TickFormat.DATE;
+            }
+        }
+        else {
+            format = TickFormat.MINUTES;
+        }
+    }
+    else {
+        format = TickFormat.SECONDS;
+    }
+    return t.format(format);
+}
+export function makeMiddleTicksGeometry({ tickHeight, viewportHeight }) {
+    const tickYStart = (viewportHeight - tickHeight) / 2;
+    return (x) => `M${x},${tickYStart}l0,${tickHeight}`;
+}
+export function makeSlitTicksGeometry({ tickHeight, viewportHeight }) {
+    const slitHeight = viewportHeight - 2 * tickHeight;
+    return (x) => `M${x},0l0,${tickHeight}m0,${slitHeight}l0,${tickHeight}`;
+}
+export function makeUnavailableTicksGeometry({ tickHeight, viewportHeight, }) {
+    const w = tickHeight;
+    const h = viewportHeight;
+    return (x) => `M${x},0l${h},${h}l${w},0l${-h},${-h}l${-w},0`;
+}
+export function calculatePosition(value, interval, width) {
+    if (!value) {
+        return NaN;
+    }
+    const timeToXCoeff = getLerpCoeff({ start: interval.start.valueOf(), end: interval.end.valueOf() }, { start: 0, end: width });
+    return Math.round((value.valueOf() - interval.start.valueOf()) * timeToXCoeff);
+}