From fc1db66288191e6a5eee48fcb98e0db1ce9880ac Mon Sep 17 00:00:00 2001
From: DmitriyA <faleo1999@mail.ru>
Date: Wed, 26 Mar 2025 05:16:52 -0400
Subject: [PATCH] redesign of graphs and visualizations

---
 src/Charts/Components/LineChartComponent.jsx | 55 ++++++++++++--------
 src/Charts/PrometheusChart.jsx               |  2 +-
 src/Style/range-selector.css                 | 54 -------------------
 3 files changed, 35 insertions(+), 76 deletions(-)

diff --git a/src/Charts/Components/LineChartComponent.jsx b/src/Charts/Components/LineChartComponent.jsx
index d684d1c..b1d6963 100755
--- a/src/Charts/Components/LineChartComponent.jsx
+++ b/src/Charts/Components/LineChartComponent.jsx
@@ -1,17 +1,15 @@
 import React, { useState } from 'react';
-import { LineChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Line, ResponsiveContainer } from 'recharts';
+import { LineChart, XAxis, YAxis, CartesianGrid, Tooltip, Line, ResponsiveContainer } from 'recharts';
 
 const LineChartComponent = ({ chartData, metricName, colors, description, onRangeSelect, filteredData }) => {
     const [selectionStart, setSelectionStart] = useState(null);
     const [selectionEnd, setSelectionEnd] = useState(null);
 
-    // Создаем массив уникальных временных меток
     const allTimes = Object.values(chartData)
         .flat()
         .map(point => point.time)
         .filter((time, index, self) => self.indexOf(time) === index);
 
-    // Формируем данные для графика
     const data = allTimes.map(time => {
         const point = { time };
         Object.keys(chartData).forEach(key => {
@@ -21,10 +19,8 @@ const LineChartComponent = ({ chartData, metricName, colors, description, onRang
         return point;
     });
 
-    // Используем отфильтрованные данные, если они есть
     const displayData = filteredData || data;
 
-    // Обработчик клика на графике
     const handleClick = (e) => {
         if (!e || !e.activeLabel) return;
 
@@ -45,40 +41,57 @@ const LineChartComponent = ({ chartData, metricName, colors, description, onRang
         }
     };
 
-    // Кастомный Tooltip для отображения значения
+    // Упрощенный Tooltip без указания instance
     const CustomTooltip = ({ active, payload, label }) => {
         if (active && payload && payload.length) {
             return (
-                <div className="custom-tooltip" style={{ padding: '10px' }}>
-                    <p>{`Время: ${label}`}</p>
-                    {payload.map((entry, index) => (
-                        <p key={index} style={{}}>
-                            {`Значение: ${entry.value}`}
-                        </p>
-                    ))}
+                <div className="custom-tooltip" style={{
+                    backgroundColor: '#fff',
+                    padding: '10px',
+                    border: '1px solid #ccc',
+                    borderRadius: '4px'
+                }}>
+                    <p style={{ fontWeight: 'bold', marginBottom: '5px' }}>{`Время: ${label}`}</p>
+                    <p>{`Значение: ${payload[0].value}`}</p>
                 </div>
             );
         }
-
         return null;
     };
 
     return (
         <div>
             <ResponsiveContainer width="100%" height={400}>
-                <LineChart data={displayData} onClick={handleClick}>
-                    <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="time" />
-                    <YAxis />
-                    <Tooltip content={<CustomTooltip />} />
-                    <Legend />
+                <LineChart
+                    data={displayData}
+                    onClick={handleClick}
+                    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+                >
+                    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                    <XAxis
+                        dataKey="time"
+                        tick={{ fill: '#666' }}
+                        tickMargin={10}
+                    />
+                    <YAxis
+                        tick={{ fill: '#666' }}
+                        tickMargin={10}
+                    />
+                    <Tooltip
+                        content={<CustomTooltip />}
+                        cursor={{ stroke: '#ccc', strokeWidth: 1 }}
+                    />
+                    {/* Убрали <Legend /> чтобы скрыть имена instance */}
                     {Object.keys(chartData).map((key, index) => (
                         <Line
                             key={key}
                             type="monotone"
                             dataKey={key}
                             stroke={colors[index % colors.length]}
-                            name={key}
+                            strokeWidth={2}
+                            dot={false}
+                            activeDot={{ r: 6 }}
+                        // Убрали name чтобы не отображалось в tooltip
                         />
                     ))}
                 </LineChart>
diff --git a/src/Charts/PrometheusChart.jsx b/src/Charts/PrometheusChart.jsx
index ddb1b65..d06db8e 100755
--- a/src/Charts/PrometheusChart.jsx
+++ b/src/Charts/PrometheusChart.jsx
@@ -125,7 +125,7 @@ const PrometheusChart = ({ metricName }) => {
                     ? date.toLocaleString([], { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })
                     : date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
 
-                const key = `${m.instance}-${m.device || m.scrape_job}`;
+                const key = m.instance;
                 if (!updatedData[key]) updatedData[key] = {};
                 updatedData[key][formattedTime] = m.value;
             });
diff --git a/src/Style/range-selector.css b/src/Style/range-selector.css
index 9a8fc73..e69de29 100644
--- a/src/Style/range-selector.css
+++ b/src/Style/range-selector.css
@@ -1,54 +0,0 @@
-.range-selector {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    padding: 15px;
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    background-color: #f9f9f9;
-    max-width: 500px;
-}
-
-.range-selector label {
-    font-weight: bold;
-}
-
-.range-selector select,
-.range-selector button {
-    padding: 8px;
-    border: 1px solid #aaa;
-    border-radius: 5px;
-    background-color: white;
-    cursor: pointer;
-}
-
-.custom-range {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.custom-range div {
-    display: flex;
-    flex-direction: column;
-}
-
-.date-picker {
-    width: 180px;
-}
-
-.apply-button {
-    background-color: #007bff;
-    color: white;
-    padding: 8px 12px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-top: 5px;
-}
-
-.apply-button:hover {
-    background-color: #0056b3;
-}