BUR-35 Привел к согласованному цветовому отображению график, легенду и тултип.

Reviewed-on: #5

.env.example

@@ -1,6 +1,7 @@
-VITE_CLOUD_API_URL=http://localhost:3101
+branch=
+DEV_API_URL=http://localhost:3101
 VITE_DIAGRAM_API_URL=http://localhost:3002
 VITE_TOIR_LIGHT_ORIGIN=https://toir-light.greact.ru
-VITE_KEYCLOAK_URL=
-VITE_KEYCLOAK_REALM=
-VITE_KEYCLOAK_CLIENT_ID=
+VITE_KEYCLOAK_URL=https://sso.greact.ru
+VITE_KEYCLOAK_REALM=toir
+VITE_KEYCLOAK_CLIENT_ID=localhost

.env.local.example

@@ -1,10 +0,0 @@
-VITE_CLOUD_API_URL=http://localhost:3101
-VITE_DIAGRAM_API_URL=http://localhost:3002
-
-# Если эти переменные не заданы, greact.drill.ui работает без SSO для локальной разработки.
-VITE_KEYCLOAK_URL=https://sso.greact.ru
-VITE_KEYCLOAK_REALM=toir
-VITE_KEYCLOAK_CLIENT_ID=drill-ui-frontend
-
-# Origin встроенного ТОиР light. По умолчанию используется https://toir-light.greact.ru.
-VITE_TOIR_LIGHT_ORIGIN=https://toir-light.greact.ru

Dockerfile

@@ -7,13 +7,11 @@ FROM node:22-alpine AS build
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-ARG VITE_CLOUD_API_URL
 ARG VITE_DIAGRAM_API_URL
 ARG VITE_TOIR_LIGHT_ORIGIN
 ARG VITE_KEYCLOAK_URL
 ARG VITE_KEYCLOAK_REALM
 ARG VITE_KEYCLOAK_CLIENT_ID
-ENV VITE_CLOUD_API_URL=$VITE_CLOUD_API_URL
 ENV VITE_DIAGRAM_API_URL=$VITE_DIAGRAM_API_URL
 ENV VITE_TOIR_LIGHT_ORIGIN=$VITE_TOIR_LIGHT_ORIGIN
 ENV VITE_KEYCLOAK_URL=$VITE_KEYCLOAK_URL

docker-compose.dev.yml

@@ -0,0 +1,19 @@
+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

docker-compose.yml

@@ -1,9 +1,9 @@
 services:
   drill-ui:
+    container_name: container-drill-ui${branch:+-${branch}}
     build:
       context: .
       args:
-        VITE_CLOUD_API_URL: ${VITE_CLOUD_API_URL}
         VITE_DIAGRAM_API_URL: ${VITE_DIAGRAM_API_URL}
         VITE_TOIR_LIGHT_ORIGIN: ${VITE_TOIR_LIGHT_ORIGIN}
         VITE_KEYCLOAK_URL: ${VITE_KEYCLOAK_URL}

nginx.conf

@@ -7,5 +7,10 @@ server {
 
   location / {
     try_files $uri $uri/ /index.html;
+
+    # отключаем кеширование вообще пока активная разработка
+    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+    add_header Pragma "no-cache";
+    add_header Expires "0";
   }
 }

src/features/history-chart/chartTypes.ts

@@ -1,6 +1,7 @@
 export type AvgPointValue = [time: number, avg: number, min: number, max: number, count: number];
 
 export type TooltipParam = {
+  color?: string;
   marker?: string;
   seriesName?: string;
   value?: unknown;

src/features/history-chart/historyChartFormat.ts

@@ -89,7 +89,7 @@ export function formatTooltip(params: unknown): string {
     const value = item.value as AvgPointValue;
     return [
       '<div class="chart-tooltip-row">',
-      `<span>${item.marker ?? ''}${item.seriesName ?? ''}</span>`,
+      `<span class="chart-tooltip-label" style="--chart-tooltip-marker-color:${item.color ?? 'currentColor'};">${item.seriesName ?? ''}</span>`,
       '<strong>',
       `min ${formatChartValue(value[2])} · avg ${formatChartValue(value[1])} · max ${formatChartValue(value[3])}`,
       value[4] > 1 ? ` · ${value[4]} точек` : '',

src/features/history-chart/historyChartOptions.ts

@@ -45,6 +45,9 @@ export function createHistoryChartOptions({
     legend: {
       type: 'scroll',
       top: 0,
+      icon: 'rect',
+      itemWidth: 18,
+      itemHeight: 3,
       data: legendData,
       textStyle: { color: '#cbd5e1' },
     },

src/features/history-chart/historyChartSeries.ts

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

src/shared/config/env.ts

@@ -1,4 +1,5 @@
-export const cloudApiUrl = import.meta.env.VITE_CLOUD_API_URL as string;
+/** Базовый путь cloud API; маршрутизация на бэкенд — на уровне реверс-прокси. */
+export const cloudApiUrl = '/api';
 export const diagramApiUrl = import.meta.env.VITE_DIAGRAM_API_URL as string;
 export const toirLightOrigin = import.meta.env.VITE_TOIR_LIGHT_ORIGIN as string;
 export const keycloakUrl = import.meta.env.VITE_KEYCLOAK_URL;

src/styles/charts.css

@@ -36,7 +36,7 @@
   margin-top: 5px;
 }
 
-.chart-tooltip-row span {
+.chart-tooltip-label {
   min-width: 0;
   overflow: hidden;
   color: #cbd5e1;
@@ -44,6 +44,16 @@
   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;

src/vite-env.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_CLOUD_API_URL?: string;
   readonly VITE_DIAGRAM_API_URL?: string;
   readonly VITE_TOIR_LIGHT_ORIGIN?: string;
   readonly VITE_KEYCLOAK_URL?: string;

vite.config.ts

@@ -1,7 +1,10 @@
 import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 
-export default defineConfig({
+export default defineConfig(({ mode }) => {
+  const { DEV_API_URL } = loadEnv(mode, '.', '');
+
+  return {
     plugins: [react()],
     build: {
       chunkSizeWarningLimit: 700,
@@ -10,10 +13,11 @@ export default defineConfig({
       port: 5173,
       proxy: {
         '/api': {
-        target: 'https://beta.backend.drill.greact.ru',
+          target: DEV_API_URL,
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
         },
       },
     },
+  };
 });