APervov/ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Первов Артем
2026-07-07 19:55:16 +03:00
parent 44b52785dd
commit e796dced6c
7 changed files with 375 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/features/history-chart/HistoryChart.tsx
View File

@@ -1,9 +1,17 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import type { EChartsOption } from 'echarts';
import { getHistoryGranularity, type HistoryAxisLabelFormat } from '../../utils/historyGranularity';
import type { DataZoomEventBatch, DataZoomState, HistoryZoomRange } from './chartTypes';
import { parseGranulateMs, type HistoryAxisLabelFormat } from '../../utils/historyGranularity';
import type { AvgLineMode, DataZoomEventBatch, HistoryZoomRange } from './chartTypes';
import { HistoryChartArea } from './HistoryChartArea';
import { createHistoryChartOptions } from './historyChartOptions';
import {
createDataZoomState,
createInitialZoomRange,
getZoomRangeFromEvent,
isSameZoomRange,
isXAxisDataZoom,
ZOOM_REQUEST_DELAY_MS,
} from './historyChartZoom';
import { useHistoryChartQueries } from './useHistoryChartQueries';
import { useHistoryChartSeries } from './useHistoryChartSeries';
@@ -18,106 +26,19 @@ type HistoryChartProps = {
tagLabels?: Record<string, string>;
};
const ZOOM_REQUEST_DELAY_MS = 350;
const DAY_MS = 24 * 60 * 60 * 1000;
function isXAxisDataZoom(state: DataZoomState): boolean {
return state.dataZoomId?.startsWith('history-x-') || state.dataZoomIndex === 0 || state.dataZoomIndex === 1;
}
/** Собирает начальный zoom-диапазон из внешних props графика. */
function createInitialZoomRange({
from,
granulate,
labelFormat,
tickIntervalMs,
to,
}: Pick<HistoryChartProps, 'from' | 'granulate' | 'labelFormat' | 'tickIntervalMs' | 'to'>): HistoryZoomRange {
return { from, to, granulate, labelFormat, tickIntervalMs };
}
/** Создает zoom-диапазон из миллисекунд и подбирает для него грануляцию. */
function createZoomRange(fromMs: number, toMs: number): HistoryZoomRange {
const from = new Date(fromMs).toISOString();
const to = new Date(toMs).toISOString();
return {
from,
to,
...getHistoryGranularity(from, to),
};
}
/** Достает подинтервал X-зума из события ECharts. */
function getZoomRangeFromEvent(state: DataZoomState, baseRange: HistoryZoomRange): HistoryZoomRange | null {
const baseFromMs = new Date(baseRange.from).getTime();
const baseToMs = new Date(baseRange.to).getTime();
const baseSpanMs = baseToMs - baseFromMs;
if (!Number.isFinite(baseFromMs) || !Number.isFinite(baseToMs) || baseSpanMs <= 0) {
return null;
/** Определяет видимость соединительной avg-линии с учетом ручного режима и текущей грануляции. */
function shouldShowAvgLine(mode: AvgLineMode, granulate: string): boolean {
if (mode === 'show') {
return true;
}
const startValue = Number(state.startValue);
const endValue = Number(state.endValue);
let nextFromMs = Number.isFinite(startValue) ? startValue : undefined;
let nextToMs = Number.isFinite(endValue) ? endValue : undefined;
// ECharts иногда не передает startValue/endValue, поэтому используем start/end.
if (nextFromMs === undefined || nextToMs === undefined) {
const start = Number(state.start);
const end = Number(state.end);
if (!Number.isFinite(start) || !Number.isFinite(end)) {
return null;
}
nextFromMs = baseFromMs + (baseSpanMs * start) / 100;
nextToMs = baseFromMs + (baseSpanMs * end) / 100;
if (mode === 'hide') {
return false;
}
// Проверка на выход из диапазона
const fromMs = Math.max(baseFromMs, Math.min(nextFromMs, nextToMs));
const toMs = Math.min(baseToMs, Math.max(nextFromMs, nextToMs));
return toMs > fromMs ? createZoomRange(fromMs, toMs) : null;
}
/** Проверяет, что lazy zoom не пытается повторно применить тот же диапазон. */
function isSameZoomRange(left: HistoryZoomRange, right: HistoryZoomRange): boolean {
return left.from === right.from && left.to === right.to && left.granulate === right.granulate;
}
/** Вычисляет, какую часть верхнеуровневого периода занимает текущий пользовательский zoom. */
function createDataZoomState(baseRange: HistoryZoomRange, zoomRange: HistoryZoomRange): DataZoomState {
// Верхнеуровневый период берём из инпутов "С/По" и считаем его полными 0..100%.
const baseFromMs = new Date(baseRange.from).getTime();
const baseToMs = new Date(baseRange.to).getTime();
// Пользовательский zoom живёт внутри верхнеуровневого периода и должен быть выделен на нижней шкале.
const zoomFromMs = new Date(zoomRange.from).getTime();
const zoomToMs = new Date(zoomRange.to).getTime();
const baseSpanMs = baseToMs - baseFromMs;
// Если даты некорректны, показываем весь период, чтобы не ломать управление графиком.
if (
!Number.isFinite(baseFromMs) ||
!Number.isFinite(baseToMs) ||
!Number.isFinite(zoomFromMs) ||
!Number.isFinite(zoomToMs) ||
baseSpanMs <= 0
) {
return { start: 0, end: 100 };
}
// Переводим абсолютные даты zoom-а в проценты относительно верхнеуровневого периода.
const start = ((zoomFromMs - baseFromMs) / baseSpanMs) * 100;
const end = ((zoomToMs - baseFromMs) / baseSpanMs) * 100;
// Ограничиваем значения диапазоном 0..100, чтобы ECharts не получил выход за шкалу.
return {
start: Math.max(0, Math.min(100, start)),
end: Math.max(0, Math.min(100, end)),
};
return parseGranulateMs(granulate) < DAY_MS;
}
export function HistoryChart({
@@ -141,6 +62,7 @@ export function HistoryChart({
const zoomRangeRef = useRef(zoomRange);
const zoomTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const lastReadyOptionRef = useRef<EChartsOption | null>(null);
const [avgLineMode, setAvgLineMode] = useState<AvgLineMode>('auto');
const lines = useHistoryChartQueries({
edge,
from: zoomRange.from,
@@ -149,7 +71,8 @@ export function HistoryChart({
to: zoomRange.to,
tagLabels,
});
const series = useHistoryChartSeries(lines, zoomRange.granulate);
const showAvgLine = shouldShowAvgLine(avgLineMode, zoomRange.granulate);
const series = useHistoryChartSeries(lines, zoomRange.granulate, showAvgLine);
const legendData = useMemo(() => lines.map((line) => line.label), [lines]);
const loading = lines.some((line) => line.loading);
const hasData = series.length > 0;
@@ -229,8 +152,10 @@ export function HistoryChart({
hasData={displayHasData}
hasSelection={tags.length > 0}
loading={loading}
avgLineMode={avgLineMode}
option={displayOption}
onDataZoom={handleDataZoom}
onAvgLineModeChange={setAvgLineMode}
/>
);
}

29
src/features/history-chart/HistoryChartArea.tsx
View File

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

13
src/features/history-chart/chartTypes.ts
View File

@@ -2,7 +2,18 @@ import type { HistoryAxisLabelFormat } from '../../utils/historyGranularity';
export type AvgPointValue = [time: number, avg: number, min: number, max: number, count: number, slotMs?: number];
export type HistoryBucketValue = [time: number, avg: number, min: number, max: number, count: number, slotMs: number];
export type HistoryBucketValue = [
time: number,
avg: number,
min: number,
max: number,
count: number,
slotMs: number,
previousTime: number | null,
previousAvg: number | null,
];
export type AvgLineMode = 'auto' | 'show' | 'hide';
export type HistoryZoomRange = {
from: string;

238
src/features/history-chart/historyChartSeries.ts
View File

@@ -20,6 +20,17 @@ export const SERIES_COLORS = [
'#A7B3FF',
];
const BUCKET = {
time: 0,
avg: 1,
min: 2,
max: 3,
count: 4,
slotMs: 5,
previousTime: 6,
previousAvg: 7,
} as const;
type CartesianCoordSys = {
x: number;
y: number;
@@ -27,10 +38,26 @@ type CartesianCoordSys = {
height: number;
};
type ChartArea = CartesianCoordSys;
type BucketValues = {
time: number;
avg: number;
min: number;
max: number;
slotMs: number;
previousTime: number;
previousAvg: number;
previousTimeValue: unknown;
previousAvgValue: unknown;
};
/** Ограничивает число заданными границами, чтобы фигуры не выходили за canvas графика. */
function clamp(value: number, min: number, max: number): number {
return Math.min(max, Math.max(min, value));
}
/** Создает вертикальный градиент min..max с максимальной яркостью в позиции avg. */
function createAvgGradientStops(color: string, avgOffset: number) {
const softZone = 0.18;
@@ -43,103 +70,190 @@ function createAvgGradientStops(color: string, avgOffset: number) {
].sort((first, second) => first.offset - second.offset);
}
/** Проверяет, что точку можно безопасно отрисовать на графике. */
function isFinitePoint(point: HistoryPoint): boolean {
return [point.avg_value, point.min_value, point.max_value].every(Number.isFinite);
}
/** Упаковывает один bucket API в компактный tuple для custom series ECharts. */
/** Упаковывает bucket и предыдущую avg-точку в tuple для custom series ECharts. */
function createBucketData(points: HistoryPoint[], slotMs: number): HistoryBucketValue[] {
return points.filter(isFinitePoint).map((point) => [
new Date(point.time).getTime(),
point.avg_value,
point.min_value,
point.max_value,
point.point_count,
slotMs,
]);
const finitePoints = points.filter(isFinitePoint);
return finitePoints.map((point, index) => {
const previousPoint = finitePoints[index - 1];
return [
new Date(point.time).getTime(),
point.avg_value,
point.min_value,
point.max_value,
point.point_count,
slotMs,
previousPoint ? new Date(previousPoint.time).getTime() : null,
previousPoint?.avg_value ?? null,
];
});
}
/** Рисует один bucket как временной слот: затухающий min..max и яркий маркер avg. */
function renderBucket(color: string) {
/** Читает tuple bucket-а из ECharts API и возвращает значения с понятными именами. */
function readBucketValues(api: CustomSeriesRenderItemAPI): BucketValues {
const previousTimeValue = api.value(BUCKET.previousTime);
const previousAvgValue = api.value(BUCKET.previousAvg);
return {
time: Number(api.value(BUCKET.time)),
avg: Number(api.value(BUCKET.avg)),
min: Number(api.value(BUCKET.min)),
max: Number(api.value(BUCKET.max)),
slotMs: Number(api.value(BUCKET.slotMs)),
previousTime: Number(previousTimeValue),
previousAvg: Number(previousAvgValue),
previousTimeValue,
previousAvgValue,
};
}
/** Проверяет, можно ли рисовать соединительный отрезок к предыдущей avg-точке. */
function hasPreviousAvg(values: BucketValues): boolean {
return (
values.previousTimeValue !== null &&
values.previousTimeValue !== undefined &&
values.previousAvgValue !== null &&
values.previousAvgValue !== undefined &&
Number.isFinite(values.previousTime) &&
Number.isFinite(values.previousAvg)
);
}
/** Считает пиксельные фигуры одного bucket-а и обрезает их по области графика. */
function createBucketShapes(api: CustomSeriesRenderItemAPI, values: BucketValues, chartArea: ChartArea) {
const avgPoint = api.coord([values.time, values.avg]);
const minPoint = api.coord([values.time, values.min]);
const maxPoint = api.coord([values.time, values.max]);
const slotStart = api.coord([values.time - values.slotMs / 2, values.avg]);
const slotEnd = api.coord([values.time + values.slotMs / 2, values.avg]);
const x = Math.min(slotStart[0], slotEnd[0]);
const rawHeight = Math.abs(maxPoint[1] - minPoint[1]);
const width = Math.max(2, Math.abs(slotEnd[0] - slotStart[0]));
const height = Math.max(2, rawHeight);
const y = Math.min(minPoint[1], maxPoint[1]) - (height - rawHeight) / 2;
const avgY = avgPoint[1];
const rangeShape = graphic.clipRectByRect({ x, y, width, height }, chartArea);
const avgShape = graphic.clipRectByRect({ x, y: avgY - 1, width, height: 2 }, chartArea);
if (!rangeShape) {
return null;
}
return {
avgPoint,
avgShape,
avgY,
rangeShape,
};
}
/** Создает отрезок к предыдущей avg-точке, если режим соединительной линии включен. */
function createAvgLineShape(
api: CustomSeriesRenderItemAPI,
values: BucketValues,
avgPoint: number[],
avgY: number,
chartArea: ChartArea,
) {
if (!hasPreviousAvg(values)) {
return null;
}
const previousPoint = api.coord([values.previousTime, values.previousAvg]);
return {
x1: clamp(previousPoint[0], chartArea.x, chartArea.x + chartArea.width),
y1: clamp(previousPoint[1], chartArea.y, chartArea.y + chartArea.height),
x2: clamp(avgPoint[0], chartArea.x, chartArea.x + chartArea.width),
y2: clamp(avgY, chartArea.y, chartArea.y + chartArea.height),
};
}
/** Рисует один bucket: min..max слот, avg-маркер и опциональный отрезок к предыдущей avg-точке. */
function renderBucket(color: string, showAvgLine: boolean) {
return (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI): CustomSeriesRenderItemReturn => {
const time = Number(api.value(0));
const avg = Number(api.value(1));
const min = Number(api.value(2));
const max = Number(api.value(3));
const slotMs = Number(api.value(5));
const values = readBucketValues(api);
// ECharts отдает размеры области графика в runtime, но в публичных типах
// они не описаны. Поэтому держим cast локально рядом с clipping-логикой.
const coordSys = params.coordSys as unknown as CartesianCoordSys;
// ECharts отдает размеры области графика в runtime, но в публичных типах они не описаны.
const chartArea = params.coordSys as unknown as ChartArea;
const bucketShapes = createBucketShapes(api, values, chartArea);
// Переводим координаты данных (time/value) в пиксели canvas.
const avgPoint = api.coord([time, avg]);
const minPoint = api.coord([time, min]);
const maxPoint = api.coord([time, max]);
const slotStart = api.coord([time - slotMs / 2, avg]);
const slotEnd = api.coord([time + slotMs / 2, avg]);
// Слот занимает один интервал грануляции по X и диапазон min..max по Y.
const x = Math.min(slotStart[0], slotEnd[0]);
const rawHeight = Math.abs(maxPoint[1] - minPoint[1]);
const width = Math.max(2, Math.abs(slotEnd[0] - slotStart[0]));
const height = Math.max(2, rawHeight);
const y = Math.min(minPoint[1], maxPoint[1]) - (height - rawHeight) / 2;
const avgY = avgPoint[1];
const chartArea = { x: coordSys.x, y: coordSys.y, width: coordSys.width, height: coordSys.height };
// Обрезаем фигуры, чтобы при Y-зуме они не выходили за область графика.
const rangeShape = graphic.clipRectByRect(
{ x, y, width, height },
chartArea,
);
const avgShape = graphic.clipRectByRect(
{ x, y: avgY - 1, width, height: 2 },
chartArea,
);
if (!rangeShape) {
if (!bucketShapes) {
return null;
}
const avgOffset = clamp((avgY - rangeShape.y) / rangeShape.height, 0, 1);
// Avg-линия рисуется внутри той же custom-серии, чтобы не удваивать число ECharts-серий при зуме.
const lineShape = showAvgLine
? createAvgLineShape(api, values, bucketShapes.avgPoint, bucketShapes.avgY, chartArea)
: null;
const avgOffset = clamp(
(bucketShapes.avgY - bucketShapes.rangeShape.y) / bucketShapes.rangeShape.height,
0,
1,
);
return {
type: 'group',
children: [
{
type: 'rect',
shape: rangeShape,
shape: bucketShapes.rangeShape,
style: {
fill: new graphic.LinearGradient(0, 0, 0, 1, createAvgGradientStops(color, avgOffset)),
},
},
...(avgShape ? [{
type: 'rect' as const,
shape: avgShape,
style: {
fill: color,
},
}] : []),
...(lineShape
? [{
type: 'line' as const,
shape: lineShape,
style: {
stroke: color,
lineWidth: 1,
opacity: 0.72,
},
}]
: []),
...(bucketShapes.avgShape
? [{
type: 'rect' as const,
shape: bucketShapes.avgShape,
style: {
fill: color,
},
}]
: []),
],
};
};
}
/** Создает отдельный временной слот min..max с акцентом на avg для каждой точки history. */
export function createSeriesOptions(points: HistoryPoint[], index: number, label: string, granulate: string): SeriesOption[] {
/** Создает одну custom-серию на тег: bucket-слоты и avg-линия живут в одном renderItem. */
export function createSeriesOptions(
points: HistoryPoint[],
index: number,
label: string,
granulate: string,
showAvgLine: boolean,
): SeriesOption[] {
const color = SERIES_COLORS[index % SERIES_COLORS.length];
const data = createBucketData(points, parseGranulateMs(granulate));
return [
{
name: label,
type: 'custom',
data,
renderItem: renderBucket(color),
data: createBucketData(points, parseGranulateMs(granulate)),
renderItem: renderBucket(color, showAvgLine),
encode: {
x: 0,
y: [1, 2, 3],
x: BUCKET.time,
y: [BUCKET.avg, BUCKET.min, BUCKET.max],
},
itemStyle: {
color,

97
src/features/history-chart/historyChartZoom.ts Normal file
View File

@@ -0,0 +1,97 @@
import { getHistoryGranularity } from '../../utils/historyGranularity';
import type { DataZoomState, HistoryZoomRange } from './chartTypes';
export const ZOOM_REQUEST_DELAY_MS = 180;
export function isXAxisDataZoom(state: DataZoomState): boolean {
return state.dataZoomId?.startsWith('history-x-') || state.dataZoomIndex === 0 || state.dataZoomIndex === 1;
}
/** Собирает начальный zoom-диапазон из внешних props графика. */
export function createInitialZoomRange(range: HistoryZoomRange): HistoryZoomRange {
return range;
}
/** Создает zoom-диапазон из миллисекунд и подбирает для него грануляцию. */
function createZoomRange(fromMs: number, toMs: number): HistoryZoomRange {
const from = new Date(fromMs).toISOString();
const to = new Date(toMs).toISOString();
return {
from,
to,
...getHistoryGranularity(from, to),
};
}
/** Достает подинтервал X-зума из события ECharts. */
export function getZoomRangeFromEvent(state: DataZoomState, baseRange: HistoryZoomRange): HistoryZoomRange | null {
const baseFromMs = new Date(baseRange.from).getTime();
const baseToMs = new Date(baseRange.to).getTime();
const baseSpanMs = baseToMs - baseFromMs;
if (!Number.isFinite(baseFromMs) || !Number.isFinite(baseToMs) || baseSpanMs <= 0) {
return null;
}
const startValue = Number(state.startValue);
const endValue = Number(state.endValue);
let nextFromMs = Number.isFinite(startValue) ? startValue : undefined;
let nextToMs = Number.isFinite(endValue) ? endValue : undefined;
// ECharts иногда не передает startValue/endValue, поэтому используем проценты start/end.
if (nextFromMs === undefined || nextToMs === undefined) {
const start = Number(state.start);
const end = Number(state.end);
if (!Number.isFinite(start) || !Number.isFinite(end)) {
return null;
}
nextFromMs = baseFromMs + (baseSpanMs * start) / 100;
nextToMs = baseFromMs + (baseSpanMs * end) / 100;
}
const fromMs = Math.max(baseFromMs, Math.min(nextFromMs, nextToMs));
const toMs = Math.min(baseToMs, Math.max(nextFromMs, nextToMs));
return toMs > fromMs ? createZoomRange(fromMs, toMs) : null;
}
/** Проверяет, что lazy zoom не пытается повторно применить тот же диапазон. */
export function isSameZoomRange(left: HistoryZoomRange, right: HistoryZoomRange): boolean {
return left.from === right.from && left.to === right.to && left.granulate === right.granulate;
}
/** Вычисляет, какую часть верхнеуровневого периода занимает текущий пользовательский zoom. */
export function createDataZoomState(baseRange: HistoryZoomRange, zoomRange: HistoryZoomRange): DataZoomState {
// Верхнеуровневый период берем из инпутов "С/По" и считаем его полными 0..100%.
const baseFromMs = new Date(baseRange.from).getTime();
const baseToMs = new Date(baseRange.to).getTime();
// Пользовательский zoom живет внутри верхнеуровневого периода и выделяется на нижней шкале.
const zoomFromMs = new Date(zoomRange.from).getTime();
const zoomToMs = new Date(zoomRange.to).getTime();
const baseSpanMs = baseToMs - baseFromMs;
// Если даты некорректны, показываем весь период, чтобы не ломать управление графиком.
if (
!Number.isFinite(baseFromMs) ||
!Number.isFinite(baseToMs) ||
!Number.isFinite(zoomFromMs) ||
!Number.isFinite(zoomToMs) ||
baseSpanMs <= 0
) {
return { start: 0, end: 100 };
}
// Переводим абсолютные даты zoom-а в проценты относительно верхнеуровневого периода.
const start = ((zoomFromMs - baseFromMs) / baseSpanMs) * 100;
const end = ((zoomToMs - baseFromMs) / baseSpanMs) * 100;
// Ограничиваем значения диапазоном 0..100, чтобы ECharts не получил выход за шкалу.
return {
start: Math.max(0, Math.min(100, start)),
end: Math.max(0, Math.min(100, end)),
};
}

10
src/features/history-chart/useHistoryChartSeries.ts
View File

@@ -3,12 +3,16 @@ import type { SeriesOption } from 'echarts';
import { createSeriesOptions } from './historyChartSeries';
import type { HistoryChartLineData } from './useHistoryChartQueries';
export function useHistoryChartSeries(lines: HistoryChartLineData[], granulate: string): SeriesOption[] {
export function useHistoryChartSeries(
lines: HistoryChartLineData[],
granulate: string,
showAvgLine: boolean,
): SeriesOption[] {
return useMemo(
() =>
lines.flatMap((line) =>
line.rows.length ? createSeriesOptions(line.rows, line.index, line.label, granulate) : [],
line.rows.length ? createSeriesOptions(line.rows, line.index, line.label, granulate, showAvgLine) : [],
),
[granulate, lines],
[granulate, lines, showAvgLine],
);
}