106 lines
2.4 KiB
TypeScript
106 lines
2.4 KiB
TypeScript
import type { SeriesOption } from 'echarts';
|
|
import type { HistoryPoint } from '../../entities/history/types';
|
|
import type { AvgPointValue } from './chartTypes';
|
|
|
|
export const SERIES_COLORS = [
|
|
'#5B8FF9',
|
|
'#5AD8A6',
|
|
'#F6BD16',
|
|
'#E8684A',
|
|
'#6DC8EC',
|
|
'#FF9D4D',
|
|
'#73D13D',
|
|
'#A7B3FF',
|
|
];
|
|
|
|
/** Создает avg-линию, вертикальные min/max-отрезки и точки экстремумов для одной серии. */
|
|
export function createSeriesOptions(points: HistoryPoint[], index: number, label: string): SeriesOption[] {
|
|
const color = SERIES_COLORS[index % SERIES_COLORS.length];
|
|
const avgData: AvgPointValue[] = points.map((point) => {
|
|
const time = new Date(point.time).getTime();
|
|
return [time, point.avg_value, point.min_value, point.max_value, point.point_count];
|
|
});
|
|
const spreadData = points.flatMap((point) => {
|
|
const time = new Date(point.time).getTime();
|
|
return [
|
|
[time, point.min_value],
|
|
[time, point.max_value],
|
|
[time, null],
|
|
];
|
|
});
|
|
|
|
return [
|
|
{
|
|
name: label,
|
|
type: 'line',
|
|
data: spreadData,
|
|
showSymbol: false,
|
|
connectNulls: false,
|
|
silent: true,
|
|
tooltip: { show: false },
|
|
legendHoverLink: false,
|
|
lineStyle: {
|
|
width: 1,
|
|
opacity: 0.42,
|
|
color,
|
|
},
|
|
emphasis: {
|
|
disabled: true,
|
|
},
|
|
z: 1,
|
|
},
|
|
{
|
|
name: label,
|
|
type: 'scatter',
|
|
data: points.map((point) => [new Date(point.time).getTime(), point.min_value]),
|
|
symbolSize: 4,
|
|
silent: true,
|
|
tooltip: { show: false },
|
|
itemStyle: {
|
|
color,
|
|
opacity: 0.72,
|
|
},
|
|
emphasis: {
|
|
disabled: true,
|
|
},
|
|
z: 2,
|
|
},
|
|
{
|
|
name: label,
|
|
type: 'scatter',
|
|
data: points.map((point) => [new Date(point.time).getTime(), point.max_value]),
|
|
symbolSize: 4,
|
|
silent: true,
|
|
tooltip: { show: false },
|
|
itemStyle: {
|
|
color,
|
|
opacity: 0.72,
|
|
},
|
|
emphasis: {
|
|
disabled: true,
|
|
},
|
|
z: 2,
|
|
},
|
|
{
|
|
name: label,
|
|
type: 'line',
|
|
showSymbol: false,
|
|
smooth: false,
|
|
sampling: 'lttb',
|
|
data: avgData,
|
|
lineStyle: {
|
|
width: 1.8,
|
|
color,
|
|
},
|
|
emphasis: {
|
|
disabled: true,
|
|
lineStyle: {
|
|
width: 1.8,
|
|
color,
|
|
},
|
|
},
|
|
z: 3,
|
|
},
|
|
];
|
|
}
|