135 lines
3.5 KiB
TypeScript
135 lines
3.5 KiB
TypeScript
import type { EChartsOption } from 'echarts';
|
|
import type { SeriesOption } from 'echarts';
|
|
import type { HistoryAxisLabelFormat } from '../../utils/historyGranularity';
|
|
import type { DataZoomState } from './chartTypes';
|
|
import { formatAxisDate, formatTooltip } from './historyChartFormat';
|
|
import { SERIES_COLORS } from './historyChartSeries';
|
|
|
|
export type HistoryChartOptionsInput = {
|
|
dataZoomState: DataZoomState;
|
|
from?: string;
|
|
to?: string;
|
|
labelFormat?: HistoryAxisLabelFormat;
|
|
legendData: string[];
|
|
series: SeriesOption[];
|
|
tickIntervalMs?: number;
|
|
};
|
|
|
|
export function createHistoryChartOptions({
|
|
dataZoomState,
|
|
from,
|
|
to,
|
|
labelFormat,
|
|
legendData,
|
|
series,
|
|
tickIntervalMs,
|
|
}: HistoryChartOptionsInput): EChartsOption {
|
|
const xMin = from ? new Date(from).getTime() : undefined;
|
|
const xMax = to ? new Date(to).getTime() : undefined;
|
|
|
|
return {
|
|
color: SERIES_COLORS,
|
|
animation: false,
|
|
backgroundColor: 'transparent',
|
|
textStyle: {
|
|
color: '#cbd5e1',
|
|
fontFamily: 'Inter, Segoe UI, sans-serif',
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
backgroundColor: 'rgba(10, 13, 18, 0.96)',
|
|
borderColor: 'rgba(212, 165, 116, 0.32)',
|
|
textStyle: { color: '#f8fafc' },
|
|
formatter: formatTooltip,
|
|
},
|
|
legend: {
|
|
type: 'scroll',
|
|
top: 0,
|
|
icon: 'rect',
|
|
itemWidth: 18,
|
|
itemHeight: 3,
|
|
data: legendData,
|
|
textStyle: { color: '#cbd5e1' },
|
|
},
|
|
grid: {
|
|
top: 54,
|
|
left: 48,
|
|
right: 56,
|
|
bottom: 72,
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
min: Number.isFinite(xMin) ? xMin : undefined,
|
|
max: Number.isFinite(xMax) ? xMax : undefined,
|
|
minInterval: tickIntervalMs,
|
|
maxInterval: tickIntervalMs,
|
|
axisLine: { lineStyle: { color: 'rgba(148, 163, 184, 0.35)' } },
|
|
axisLabel: {
|
|
color: '#94a3b8',
|
|
formatter: (value: number) => formatAxisDate(value, labelFormat),
|
|
},
|
|
splitLine: { show: false },
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
scale: true,
|
|
axisLine: { lineStyle: { color: 'rgba(148, 163, 184, 0.35)' } },
|
|
axisLabel: { color: '#94a3b8' },
|
|
splitLine: { lineStyle: { color: 'rgba(148, 163, 184, 0.1)' } },
|
|
},
|
|
dataZoom: [
|
|
{
|
|
id: 'history-x-inside',
|
|
type: 'inside',
|
|
xAxisIndex: 0,
|
|
throttle: 80,
|
|
start: dataZoomState.start,
|
|
end: dataZoomState.end,
|
|
startValue: dataZoomState.startValue,
|
|
endValue: dataZoomState.endValue,
|
|
},
|
|
{
|
|
id: 'history-x-slider',
|
|
type: 'slider',
|
|
xAxisIndex: 0,
|
|
bottom: 18,
|
|
height: 28,
|
|
borderColor: 'rgba(148, 163, 184, 0.24)',
|
|
fillerColor: 'rgba(91, 143, 249, 0.18)',
|
|
handleStyle: {
|
|
color: '#d4a574',
|
|
borderColor: '#e8c9a0',
|
|
},
|
|
textStyle: { color: '#94a3b8' },
|
|
start: dataZoomState.start,
|
|
end: dataZoomState.end,
|
|
startValue: dataZoomState.startValue,
|
|
endValue: dataZoomState.endValue,
|
|
},
|
|
{
|
|
id: 'history-y-inside',
|
|
type: 'inside',
|
|
yAxisIndex: 0,
|
|
filterMode: 'none',
|
|
throttle: 80,
|
|
},
|
|
{
|
|
id: 'history-y-slider',
|
|
type: 'slider',
|
|
yAxisIndex: 0,
|
|
filterMode: 'none',
|
|
right: 8,
|
|
width: 12,
|
|
borderColor: 'rgba(148, 163, 184, 0.24)',
|
|
fillerColor: 'rgba(91, 143, 249, 0.18)',
|
|
handleStyle: {
|
|
color: '#d4a574',
|
|
borderColor: '#e8c9a0',
|
|
},
|
|
textStyle: { color: '#94a3b8' },
|
|
},
|
|
],
|
|
series,
|
|
};
|
|
}
|