Compare commits
1 Commits
bur-54
...
docker-imp
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d2f8671162 |
@@ -1,4 +1,3 @@
|
|||||||
branch=
|
|
||||||
DEV_API_URL=http://localhost:3101
|
DEV_API_URL=http://localhost:3101
|
||||||
VITE_DIAGRAM_API_URL=http://localhost:3002
|
VITE_DIAGRAM_API_URL=http://localhost:3002
|
||||||
VITE_TOIR_LIGHT_ORIGIN=https://toir-light.greact.ru
|
VITE_TOIR_LIGHT_ORIGIN=https://toir-light.greact.ru
|
||||||
|
|||||||
@@ -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
|
|
||||||
@@ -1,6 +1,5 @@
|
|||||||
services:
|
services:
|
||||||
drill-ui:
|
drill-ui:
|
||||||
container_name: container-drill-ui${branch:+-${branch}}
|
|
||||||
build:
|
build:
|
||||||
context: .
|
context: .
|
||||||
args:
|
args:
|
||||||
|
|||||||
@@ -202,12 +202,7 @@ export function ArchiveView({
|
|||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div className="archive-chart">
|
||||||
className="archive-chart"
|
|
||||||
onFocusCapture={() => setSelectorOpen(false)}
|
|
||||||
onPointerDown={() => setSelectorOpen(false)}
|
|
||||||
onPointerEnter={() => setSelectorOpen(false)}
|
|
||||||
>
|
|
||||||
<div className="toolbar">
|
<div className="toolbar">
|
||||||
<div className="segmented">
|
<div className="segmented">
|
||||||
{RANGE_PRESETS.map((preset) => (
|
{RANGE_PRESETS.map((preset) => (
|
||||||
|
|||||||
@@ -18,10 +18,6 @@ type HistoryChartProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
/** Контейнер истории: загружает выбранные теги и передает готовые серии в область ECharts. */
|
/** Контейнер истории: загружает выбранные теги и передает готовые серии в область ECharts. */
|
||||||
function isXAxisDataZoom(state: DataZoomState): boolean {
|
|
||||||
return state.dataZoomId?.startsWith('history-x-') || state.dataZoomIndex === 0 || state.dataZoomIndex === 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function HistoryChart({
|
export function HistoryChart({
|
||||||
edge,
|
edge,
|
||||||
from,
|
from,
|
||||||
@@ -53,12 +49,7 @@ export function HistoryChart({
|
|||||||
);
|
);
|
||||||
|
|
||||||
const handleDataZoom = useCallback((event: DataZoomEventBatch) => {
|
const handleDataZoom = useCallback((event: DataZoomEventBatch) => {
|
||||||
const state = (event.batch ?? [event]).find(isXAxisDataZoom);
|
const state = event.batch?.[0] ?? event;
|
||||||
|
|
||||||
if (!state) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
dataZoomRef.current = {
|
dataZoomRef.current = {
|
||||||
start: state.start,
|
start: state.start,
|
||||||
end: state.end,
|
end: state.end,
|
||||||
|
|||||||
@@ -1,15 +1,12 @@
|
|||||||
export type AvgPointValue = [time: number, avg: number, min: number, max: number, count: number];
|
export type AvgPointValue = [time: number, avg: number, min: number, max: number, count: number];
|
||||||
|
|
||||||
export type TooltipParam = {
|
export type TooltipParam = {
|
||||||
color?: string;
|
|
||||||
marker?: string;
|
marker?: string;
|
||||||
seriesName?: string;
|
seriesName?: string;
|
||||||
value?: unknown;
|
value?: unknown;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type DataZoomState = {
|
export type DataZoomState = {
|
||||||
dataZoomId?: string;
|
|
||||||
dataZoomIndex?: number;
|
|
||||||
start?: number;
|
start?: number;
|
||||||
end?: number;
|
end?: number;
|
||||||
startValue?: number;
|
startValue?: number;
|
||||||
|
|||||||
@@ -60,19 +60,6 @@ function formatChartValue(value: number): string {
|
|||||||
}).format(value);
|
}).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 {
|
function isAvgPointValue(value: unknown): value is AvgPointValue {
|
||||||
return Array.isArray(value) && value.length >= 5 && value.every((item) => typeof item === 'number');
|
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;
|
const value = item.value as AvgPointValue;
|
||||||
return [
|
return [
|
||||||
'<div class="chart-tooltip-row">',
|
'<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>',
|
'<strong>',
|
||||||
formatTooltipValue(value),
|
`min ${formatChartValue(value[2])} · avg ${formatChartValue(value[1])} · max ${formatChartValue(value[3])}`,
|
||||||
value[4] > 1 ? ` · ${value[4]} точек` : '',
|
value[4] > 1 ? ` · ${value[4]} точек` : '',
|
||||||
'</strong>',
|
'</strong>',
|
||||||
'</div>',
|
'</div>',
|
||||||
|
|||||||
@@ -45,16 +45,13 @@ export function createHistoryChartOptions({
|
|||||||
legend: {
|
legend: {
|
||||||
type: 'scroll',
|
type: 'scroll',
|
||||||
top: 0,
|
top: 0,
|
||||||
icon: 'rect',
|
|
||||||
itemWidth: 18,
|
|
||||||
itemHeight: 3,
|
|
||||||
data: legendData,
|
data: legendData,
|
||||||
textStyle: { color: '#cbd5e1' },
|
textStyle: { color: '#cbd5e1' },
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: 54,
|
top: 54,
|
||||||
left: 48,
|
left: 48,
|
||||||
right: 56,
|
right: 24,
|
||||||
bottom: 72,
|
bottom: 72,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
@@ -79,9 +76,7 @@ export function createHistoryChartOptions({
|
|||||||
},
|
},
|
||||||
dataZoom: [
|
dataZoom: [
|
||||||
{
|
{
|
||||||
id: 'history-x-inside',
|
|
||||||
type: 'inside',
|
type: 'inside',
|
||||||
xAxisIndex: 0,
|
|
||||||
throttle: 80,
|
throttle: 80,
|
||||||
start: dataZoomState.start,
|
start: dataZoomState.start,
|
||||||
end: dataZoomState.end,
|
end: dataZoomState.end,
|
||||||
@@ -89,9 +84,7 @@ export function createHistoryChartOptions({
|
|||||||
endValue: dataZoomState.endValue,
|
endValue: dataZoomState.endValue,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'history-x-slider',
|
|
||||||
type: 'slider',
|
type: 'slider',
|
||||||
xAxisIndex: 0,
|
|
||||||
bottom: 18,
|
bottom: 18,
|
||||||
height: 28,
|
height: 28,
|
||||||
borderColor: 'rgba(148, 163, 184, 0.24)',
|
borderColor: 'rgba(148, 163, 184, 0.24)',
|
||||||
@@ -106,28 +99,6 @@ export function createHistoryChartOptions({
|
|||||||
startValue: dataZoomState.startValue,
|
startValue: dataZoomState.startValue,
|
||||||
endValue: dataZoomState.endValue,
|
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,
|
series,
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -93,11 +93,7 @@ export function createSeriesOptions(points: HistoryPoint[], index: number, label
|
|||||||
color,
|
color,
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
disabled: true,
|
focus: 'series',
|
||||||
lineStyle: {
|
|
||||||
width: 1.8,
|
|
||||||
color,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
z: 3,
|
z: 3,
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -36,7 +36,7 @@
|
|||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-tooltip-label {
|
.chart-tooltip-row span {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
color: #cbd5e1;
|
color: #cbd5e1;
|
||||||
@@ -44,16 +44,6 @@
|
|||||||
white-space: nowrap;
|
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 {
|
.chart-tooltip-row strong {
|
||||||
color: #f8fafc;
|
color: #f8fafc;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
|
|||||||
Reference in New Issue
Block a user