diff --git a/src/features/edge-detail/components/ArchiveView.tsx b/src/features/edge-detail/components/ArchiveView.tsx index ce4dbfd..06ce2b7 100644 --- a/src/features/edge-detail/components/ArchiveView.tsx +++ b/src/features/edge-detail/components/ArchiveView.tsx @@ -4,6 +4,8 @@ import { useRef } from 'react'; import { CalendarDays, CalendarClock, Check, ChevronDown, Clock3, DatabaseZap, Search } from 'lucide-react'; import type { CurrentItem } from '../../../entities/current/types'; import { HistoryChart } from '../../../features/history-chart/HistoryChart'; +import { HistoryChartAvgLineModeControl } from '../../../features/history-chart/HistoryChartAvgLineModeControl'; +import type { AvgLineMode } from '../../../features/history-chart/chartTypes'; import { RANGE_PRESETS, createRange, type DateRangeState } from '../../../features/history/dateRange'; import { formatNumber, toIsoFromInput } from '../../../utils/format'; import type { HistoryGranularity } from '../../../utils/historyGranularity'; @@ -93,6 +95,7 @@ export function ArchiveView({ onSelectVisibleTags, onToggleTag, }: ArchiveViewProps) { + const [avgLineMode, setAvgLineMode] = useState('auto'); const [selectorOpen, setSelectorOpen] = useState(false); const selectedPreview = selectedTags.slice(0, 10); const hiddenSelectedCount = Math.max(0, selectedTags.length - selectedPreview.length); @@ -209,7 +212,7 @@ export function ArchiveView({ onPointerEnter={() => setSelectorOpen(false)} >
-
+
{RANGE_PRESETS.map((preset) => (
+
{selectedTags.length ? ( | null>(null); const lastReadyOptionRef = useRef(null); - const [avgLineMode, setAvgLineMode] = useState('auto'); const lines = useHistoryChartQueries({ edge, from: zoomRange.from, @@ -149,13 +150,12 @@ export function HistoryChart({ return ( 0} loading={loading} - avgLineMode={avgLineMode} option={displayOption} onDataZoom={handleDataZoom} - onAvgLineModeChange={setAvgLineMode} /> ); } diff --git a/src/features/history-chart/HistoryChartArea.tsx b/src/features/history-chart/HistoryChartArea.tsx index dea99a6..8937689 100644 --- a/src/features/history-chart/HistoryChartArea.tsx +++ b/src/features/history-chart/HistoryChartArea.tsx @@ -2,8 +2,9 @@ import type { EChartsOption } from 'echarts'; import ReactEChartsCore from 'echarts-for-react/esm/core.js'; import { useCallback, useEffect, useMemo, useRef } from 'react'; import type { WheelEvent } from 'react'; -import type { AvgLineMode, DataZoomEventBatch } from './chartTypes'; +import type { DataZoomEventBatch } from './chartTypes'; import { echarts } from './historyChartEcharts'; +import type { AvgLineMode } from './chartTypes'; type HistoryChartAreaProps = { avgLineMode: AvgLineMode; @@ -11,17 +12,9 @@ type HistoryChartAreaProps = { hasSelection: boolean; loading: boolean; option: EChartsOption; - onAvgLineModeChange: (mode: AvgLineMode) => void; onDataZoom: (event: DataZoomEventBatch) => void; }; -// Порядок режимов соответствует требованию: авто, принудительно рисовать, принудительно скрыть. -const AVG_LINE_MODES: Array<{ value: AvgLineMode; label: string }> = [ - { value: 'auto', label: 'Авто' }, - { value: 'show', label: 'Рисовать' }, - { value: 'hide', label: 'Не рисовать' }, -]; - /** Включает или выключает нативный X-зум колесом, чтобы Shift + колесо работал только по Y. */ function setXAxisWheelZoom(chart: ReturnType, enabled: boolean): void { chart.setOption( @@ -44,7 +37,6 @@ export function HistoryChartArea({ hasSelection, loading, option, - onAvgLineModeChange, onDataZoom, }: HistoryChartAreaProps) { const chartRef = useRef | null>(null); @@ -111,22 +103,6 @@ export function HistoryChartArea({ return (
-
- Линия avg -
- {AVG_LINE_MODES.map((mode) => ( - - ))} -
-
void; +}; + +const AVG_LINE_MODES: Array<{ value: AvgLineMode; label: string }> = [ + { value: 'auto', label: 'Авто' }, + { value: 'show', label: 'Рисовать' }, + { value: 'hide', label: 'Не рисовать' }, +]; + +export function HistoryChartAvgLineModeControl({ value, onChange }: HistoryChartAvgLineModeControlProps) { + return ( +
+ Линия avg +
+ {AVG_LINE_MODES.map((mode) => ( + + ))} +
+
+ ); +} diff --git a/src/features/history-chart/historyChartAvgLineSeries.ts b/src/features/history-chart/historyChartAvgLineSeries.ts index ae5ef7c..9dd2080 100644 --- a/src/features/history-chart/historyChartAvgLineSeries.ts +++ b/src/features/history-chart/historyChartAvgLineSeries.ts @@ -41,7 +41,7 @@ function createAvgLineData(points: HistoryPoint[], granulate: string, breakOnGap } const previousTime = new Date(finitePoints[index - 1].time).getTime(); - const hasAcceptableGap = currentTime - previousTime <= slotMs * 100; + const hasAcceptableGap = currentTime - previousTime <= slotMs * 24; return hasAcceptableGap ? [currentPoint] : [null, currentPoint]; }); diff --git a/src/styles/charts.css b/src/styles/charts.css index 8bba975..bf69a2a 100644 --- a/src/styles/charts.css +++ b/src/styles/charts.css @@ -28,16 +28,41 @@ padding: 3px; } +.archive-avgline-mode-control .history-chart-line-mode button { + border-radius: 0; +} + +.archive-avgline-mode-control .history-chart-line-mode button:first-child { + border-top-left-radius: var(--radius); + border-bottom-left-radius: var(--radius); +} + +.archive-avgline-mode-control .history-chart-line-mode button:last-child { + border-top-right-radius: var(--radius); + border-bottom-right-radius: var(--radius); +} + +.segmented--range-preset button { + border-radius: 0; +} + +.segmented--range-preset button:first-child { + border-top-left-radius: var(--radius); + border-bottom-left-radius: var(--radius); +} + +.segmented--range-preset button:last-child { + border-top-right-radius: var(--radius); + border-bottom-right-radius: var(--radius); +} + .history-chart-line-mode button { - min-height: 24px; - padding: 0 8px; - font-size: 12px; + font-size: inherit; } .history-chart-line-mode__button--active { - color: #f8fafc; - background: rgba(212, 165, 116, 0.16); - border-color: rgba(212, 165, 116, 0.38); + border-color: var(--line-strong); + background: rgba(201, 122, 61, 0.18); } .chart-section--archive .history-chart-shell, diff --git a/src/styles/detail/archive.css b/src/styles/detail/archive.css index 48afed0..baa830e 100644 --- a/src/styles/detail/archive.css +++ b/src/styles/detail/archive.css @@ -216,6 +216,14 @@ font-size: 0.84rem; } +.archive-avgline-mode-control { + display: inline-flex; + align-items: center; + gap: 8px; + color: var(--muted); + font-size: 0.84rem; +} + .archive-date-input { color-scheme: dark; min-height: 36px;