BUR-64 синхронизировал изменение input date/time полей с масштабированием графика.
This commit is contained in:
@@ -4,8 +4,9 @@ import { useRef } from 'react';
|
|||||||
import { CalendarDays, CalendarClock, Check, ChevronDown, Clock3, DatabaseZap, Search } from 'lucide-react';
|
import { CalendarDays, CalendarClock, Check, ChevronDown, Clock3, DatabaseZap, Search } from 'lucide-react';
|
||||||
import type { CurrentItem } from '../../../entities/current/types';
|
import type { CurrentItem } from '../../../entities/current/types';
|
||||||
import { HistoryChart } from '../../../features/history-chart/HistoryChart';
|
import { HistoryChart } from '../../../features/history-chart/HistoryChart';
|
||||||
|
import type { HistoryZoomRange } from '../../../features/history-chart/chartTypes';
|
||||||
import { RANGE_PRESETS, createRange, type DateRangeState } from '../../../features/history/dateRange';
|
import { RANGE_PRESETS, createRange, type DateRangeState } from '../../../features/history/dateRange';
|
||||||
import { toIsoFromInput } from '../../../utils/format';
|
import { toInputDateTimeValue, toIsoFromInput } from '../../../utils/format';
|
||||||
import type { HistoryGranularity } from '../../../utils/historyGranularity';
|
import type { HistoryGranularity } from '../../../utils/historyGranularity';
|
||||||
|
|
||||||
type ArchiveViewProps = {
|
type ArchiveViewProps = {
|
||||||
@@ -108,6 +109,12 @@ export function ArchiveView({
|
|||||||
[rangePart]: updateRangeInputPart(range[rangePart], inputPart, value),
|
[rangePart]: updateRangeInputPart(range[rangePart], inputPart, value),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
const updateRangeFromZoom = (nextRange: HistoryZoomRange) => {
|
||||||
|
onRangeChange({
|
||||||
|
from: toInputDateTimeValue(new Date(nextRange.from)),
|
||||||
|
to: toInputDateTimeValue(new Date(nextRange.to)),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="chart-section chart-section--archive">
|
<section className="chart-section chart-section--archive">
|
||||||
@@ -263,6 +270,7 @@ export function ArchiveView({
|
|||||||
labelFormat={historyAxis.labelFormat}
|
labelFormat={historyAxis.labelFormat}
|
||||||
tags={selectedTags}
|
tags={selectedTags}
|
||||||
tagLabels={tagLabels}
|
tagLabels={tagLabels}
|
||||||
|
onZoomRangeChange={updateRangeFromZoom}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="chart-placeholder">Разверните список показателей и выберите серию для графика</div>
|
<div className="chart-placeholder">Разверните список показателей и выберите серию для графика</div>
|
||||||
|
|||||||
@@ -15,6 +15,7 @@ type HistoryChartProps = {
|
|||||||
tickIntervalMs?: number;
|
tickIntervalMs?: number;
|
||||||
to: string;
|
to: string;
|
||||||
tagLabels?: Record<string, string>;
|
tagLabels?: Record<string, string>;
|
||||||
|
onZoomRangeChange?: (range: HistoryZoomRange) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const ZOOM_REQUEST_DELAY_MS = 350;
|
const ZOOM_REQUEST_DELAY_MS = 350;
|
||||||
@@ -95,6 +96,7 @@ export function HistoryChart({
|
|||||||
tickIntervalMs,
|
tickIntervalMs,
|
||||||
to,
|
to,
|
||||||
tagLabels = {},
|
tagLabels = {},
|
||||||
|
onZoomRangeChange,
|
||||||
}: HistoryChartProps) {
|
}: HistoryChartProps) {
|
||||||
const [zoomRange, setZoomRange] = useState(() =>
|
const [zoomRange, setZoomRange] = useState(() =>
|
||||||
createInitialZoomRange({ from, granulate, labelFormat, tickIntervalMs, to }),
|
createInitialZoomRange({ from, granulate, labelFormat, tickIntervalMs, to }),
|
||||||
@@ -167,8 +169,9 @@ export function HistoryChart({
|
|||||||
zoomTimerRef.current = setTimeout(() => {
|
zoomTimerRef.current = setTimeout(() => {
|
||||||
zoomRangeRef.current = nextRange;
|
zoomRangeRef.current = nextRange;
|
||||||
setZoomRange(nextRange);
|
setZoomRange(nextRange);
|
||||||
|
onZoomRangeChange?.(nextRange);
|
||||||
}, ZOOM_REQUEST_DELAY_MS);
|
}, ZOOM_REQUEST_DELAY_MS);
|
||||||
}, []);
|
}, [onZoomRangeChange]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<HistoryChartArea
|
<HistoryChartArea
|
||||||
|
|||||||
Reference in New Issue
Block a user