1 Commits

10 changed files with 7 additions and 101 deletions

View File

@@ -1,4 +1,3 @@
branch=
DEV_API_URL=http://localhost:3101
VITE_DIAGRAM_API_URL=http://localhost:3002
VITE_TOIR_LIGHT_ORIGIN=https://toir-light.greact.ru

View File

@@ -1,19 +0,0 @@
services:
drill-ui-dev:
container_name: container-drill-ui${branch:+-${branch}}
build:
context: .
args:
VITE_DIAGRAM_API_URL: ${VITE_DIAGRAM_API_URL}
VITE_TOIR_LIGHT_ORIGIN: ${VITE_TOIR_LIGHT_ORIGIN}
VITE_KEYCLOAK_URL: ${VITE_KEYCLOAK_URL}
VITE_KEYCLOAK_REALM: ${VITE_KEYCLOAK_REALM}
VITE_KEYCLOAK_CLIENT_ID: ${VITE_KEYCLOAK_CLIENT_ID}
expose:
- "80"
networks:
- proxy
networks:
proxy:
external: true

View File

@@ -1,6 +1,5 @@
services:
drill-ui:
container_name: container-drill-ui${branch:+-${branch}}
build:
context: .
args:

View File

@@ -202,12 +202,7 @@ export function ArchiveView({
) : null}
</div>
<div
className="archive-chart"
onFocusCapture={() => setSelectorOpen(false)}
onPointerDown={() => setSelectorOpen(false)}
onPointerEnter={() => setSelectorOpen(false)}
>
<div className="archive-chart">
<div className="toolbar">
<div className="segmented">
{RANGE_PRESETS.map((preset) => (

View File

@@ -18,10 +18,6 @@ type HistoryChartProps = {
};
/** Контейнер истории: загружает выбранные теги и передает готовые серии в область ECharts. */
function isXAxisDataZoom(state: DataZoomState): boolean {
return state.dataZoomId?.startsWith('history-x-') || state.dataZoomIndex === 0 || state.dataZoomIndex === 1;
}
export function HistoryChart({
edge,
from,
@@ -53,12 +49,7 @@ export function HistoryChart({
);
const handleDataZoom = useCallback((event: DataZoomEventBatch) => {
const state = (event.batch ?? [event]).find(isXAxisDataZoom);
if (!state) {
return;
}
const state = event.batch?.[0] ?? event;
dataZoomRef.current = {
start: state.start,
end: state.end,

View File

@@ -1,15 +1,12 @@
export type AvgPointValue = [time: number, avg: number, min: number, max: number, count: number];
export type TooltipParam = {
color?: string;
marker?: string;
seriesName?: string;
value?: unknown;
};
export type DataZoomState = {
dataZoomId?: string;
dataZoomIndex?: number;
start?: number;
end?: number;
startValue?: number;

View File

@@ -60,19 +60,6 @@ function formatChartValue(value: number): string {
}).format(value);
}
/** Показывает одно значение, если min/avg/max визуально совпадают. */
function formatTooltipValue(value: AvgPointValue): string {
const avg = formatChartValue(value[1]);
const min = formatChartValue(value[2]);
const max = formatChartValue(value[3]);
if (min === avg && avg === max) {
return avg;
}
return `min ${min} · avg ${avg} · max ${max}`;
}
function isAvgPointValue(value: unknown): value is AvgPointValue {
return Array.isArray(value) && value.length >= 5 && value.every((item) => typeof item === 'number');
}
@@ -102,9 +89,9 @@ export function formatTooltip(params: unknown): string {
const value = item.value as AvgPointValue;
return [
'<div class="chart-tooltip-row">',
`<span class="chart-tooltip-label" style="--chart-tooltip-marker-color:${item.color ?? 'currentColor'};">${item.seriesName ?? ''}</span>`,
`<span>${item.marker ?? ''}${item.seriesName ?? ''}</span>`,
'<strong>',
formatTooltipValue(value),
`min ${formatChartValue(value[2])} · avg ${formatChartValue(value[1])} · max ${formatChartValue(value[3])}`,
value[4] > 1 ? ` · ${value[4]} точек` : '',
'</strong>',
'</div>',

View File

@@ -45,16 +45,13 @@ export function createHistoryChartOptions({
legend: {
type: 'scroll',
top: 0,
icon: 'rect',
itemWidth: 18,
itemHeight: 3,
data: legendData,
textStyle: { color: '#cbd5e1' },
},
grid: {
top: 54,
left: 48,
right: 56,
right: 24,
bottom: 72,
},
xAxis: {
@@ -79,9 +76,7 @@ export function createHistoryChartOptions({
},
dataZoom: [
{
id: 'history-x-inside',
type: 'inside',
xAxisIndex: 0,
throttle: 80,
start: dataZoomState.start,
end: dataZoomState.end,
@@ -89,9 +84,7 @@ export function createHistoryChartOptions({
endValue: dataZoomState.endValue,
},
{
id: 'history-x-slider',
type: 'slider',
xAxisIndex: 0,
bottom: 18,
height: 28,
borderColor: 'rgba(148, 163, 184, 0.24)',
@@ -106,28 +99,6 @@ export function createHistoryChartOptions({
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,
};

View File

@@ -93,11 +93,7 @@ export function createSeriesOptions(points: HistoryPoint[], index: number, label
color,
},
emphasis: {
disabled: true,
lineStyle: {
width: 1.8,
color,
},
focus: 'series',
},
z: 3,
},

View File

@@ -36,7 +36,7 @@
margin-top: 5px;
}
.chart-tooltip-label {
.chart-tooltip-row span {
min-width: 0;
overflow: hidden;
color: #cbd5e1;
@@ -44,16 +44,6 @@
white-space: nowrap;
}
.chart-tooltip-label::before {
content: '';
display: inline-block;
width: 18px;
height: 3px;
margin-right: 6px;
vertical-align: middle;
background: var(--chart-tooltip-marker-color, currentColor);
}
.chart-tooltip-row strong {
color: #f8fafc;
font-variant-numeric: tabular-nums;