BUR-67 Добавлена возможность рисовать соединительную линию.

src/features/history-chart/HistoryChartArea.tsx

@@ -2,17 +2,26 @@ 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 { DataZoomEventBatch } from './chartTypes';
+import type { AvgLineMode, DataZoomEventBatch } from './chartTypes';
 import { echarts } from './historyChartEcharts';
 
 type HistoryChartAreaProps = {
+  avgLineMode: AvgLineMode;
   hasData: boolean;
   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<ReactEChartsCore['getEchartsInstance']>, enabled: boolean): void {
   chart.setOption(
@@ -30,10 +39,12 @@ function setXAxisWheelZoom(chart: ReturnType<ReactEChartsCore['getEchartsInstanc
 
 /** Отвечает только за визуальную область графика: placeholder или ECharts canvas. */
 export function HistoryChartArea({
+  avgLineMode,
   hasData,
   hasSelection,
   loading,
   option,
+  onAvgLineModeChange,
   onDataZoom,
 }: HistoryChartAreaProps) {
   const chartRef = useRef<InstanceType<typeof ReactEChartsCore> | null>(null);
@@ -100,6 +111,22 @@ export function HistoryChartArea({
 
   return (
     <div className="history-chart-shell" onWheelCapture={handleWheelCapture}>
+      <div className="history-chart-controls" aria-label="Режим соединительной линии avg">
+        <span>Линия avg</span>
+        <div className="segmented history-chart-line-mode">
+          {AVG_LINE_MODES.map((mode) => (
+            <button
+              key={mode.value}
+              type="button"
+              className={mode.value === avgLineMode ? 'history-chart-line-mode__button--active' : undefined}
+              onClick={() => onAvgLineModeChange(mode.value)}
+              aria-pressed={mode.value === avgLineMode}
+            >
+              {mode.label}
+            </button>
+          ))}
+        </div>
+      </div>
       <ReactEChartsCore
         ref={chartRef}
         echarts={echarts}