BUR-64 синхронизировал изменение input date/time полей с масштабированием графика. #18

Merged
APervov merged 1 commits from bur-64 into dev 2026-07-05 10:49:04 +00:00
2 changed files with 13 additions and 2 deletions

View File

@@ -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>

View File

@@ -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