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 (
-
-
{`Время: ${label}`}
- {payload.map((entry, index) => (
-
- {`Значение: ${entry.value}`}
-
- ))}
+
+
{`Время: ${label}`}
+
{`Значение: ${payload[0].value}`}
);
}
-
return null;
};
return (
-
-
-
-
- } />
-
+
+
+
+
+ }
+ cursor={{ stroke: '#ccc', strokeWidth: 1 }}
+ />
+ {/* Убрали чтобы скрыть имена instance */}
{Object.keys(chartData).map((key, index) => (
))}
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;
-}