From 22c5fcf02c535e1de3f7cd3af5a3251695e830c3 Mon Sep 17 00:00:00 2001
From: DmitriyA <faleo1999@mail.ru>
Date: Thu, 10 Apr 2025 05:33:15 -0400
Subject: [PATCH] Converted time to constants

---
 src/Charts/Components/LineChartComponent.jsx | 26 +++++++++-----------
 src/Charts/Components/constants.jsx          | 17 ++++++++++++-
 src/Charts/PrometheusChart.jsx               | 18 +++++++-------
 3 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/src/Charts/Components/LineChartComponent.jsx b/src/Charts/Components/LineChartComponent.jsx
index caca080..3c548ac 100755
--- a/src/Charts/Components/LineChartComponent.jsx
+++ b/src/Charts/Components/LineChartComponent.jsx
@@ -1,5 +1,11 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { LineChart, XAxis, YAxis, CartesianGrid, Tooltip, Line, ResponsiveContainer, ReferenceArea } from 'recharts';
+import { HOUR, DAY } from './constants';
+const TIME_FORMATS = {
+    LONG: 'dd.MM HH:mm',   // Для диапазона > 24 часов
+    MEDIUM: 'HH:mm',       // Для диапазона > 1 часа
+    SHORT: 'HH:mm:ss'      // Для коротких диапазонов
+};
 
 const LineChartComponent = ({
     chartData,
@@ -12,6 +18,7 @@ const LineChartComponent = ({
     const [isSelecting, setIsSelecting] = useState(false);
     const chartRef = useRef(null);
 
+
     const allTimestamps = Object.values(chartData)
         .flat()
         .map(point => point.timestamp)
@@ -46,22 +53,13 @@ const LineChartComponent = ({
 
     // Функция для определения оптимального формата времени в зависимости от диапазона
     const getTimeFormat = () => {
-        if (!data.length) return 'HH:mm:ss';
+        if (!data.length) return TIME_FORMATS.SHORT;
 
-        const first = data[0].timestamp;
-        const last = data[data.length - 1].timestamp;
-        const range = last - first;
+        const range = data[data.length - 1].timestamp - data[0].timestamp;
 
-        // Если диапазон больше 24 часов - показываем дату
-        if (range > 86400000) {
-            return 'dd.MM HH:mm';
-        }
-        // Если больше 1 часа - показываем часы и минуты
-        if (range > 3600000) {
-            return 'HH:mm';
-        }
-        // Для коротких диапазонов - показываем время с секундами
-        return 'HH:mm:ss';
+        if (range > DAY) return TIME_FORMATS.LONG;
+        if (range > HOUR) return TIME_FORMATS.MEDIUM;
+        return TIME_FORMATS.SHORT;
     };
 
     useEffect(() => {
diff --git a/src/Charts/Components/constants.jsx b/src/Charts/Components/constants.jsx
index 68f92d9..a3b621a 100644
--- a/src/Charts/Components/constants.jsx
+++ b/src/Charts/Components/constants.jsx
@@ -17,4 +17,19 @@ export const TIME_RANGES = [
 ];
 
 export const COLORS = ['#3e95cd', '#8e5ea2', '#3cba9f', '#e8c3b9', '#c45850'];
-export const MAX_POINTS = 20;
\ No newline at end of file
+export const MAX_POINTS = 20;
+
+
+// Для работы с временными интервалами (setTimeout и т.д.)
+export const MS = 1;
+export const SECOND_MS = 1000 * MS;
+export const MINUTE_MS = 60 * SECOND_MS;
+export const HOUR_MS = 60 * MINUTE_MS;
+export const DAY_MS = 24 * HOUR_MS;
+
+// Для работы с Unix-временем и API (Prometheus и т.д.)
+export const SECOND = 1;
+export const MINUTE = 60 * SECOND;
+export const HOUR = 60 * MINUTE;
+export const DAY = 24 * HOUR;
+export const WEEK = 7 * DAY;
\ No newline at end of file
diff --git a/src/Charts/PrometheusChart.jsx b/src/Charts/PrometheusChart.jsx
index 74641cd..04c9e20 100755
--- a/src/Charts/PrometheusChart.jsx
+++ b/src/Charts/PrometheusChart.jsx
@@ -4,7 +4,7 @@ import LineChartComponent from './Components/LineChartComponent';
 import { TimeRangeSelector } from './Components/TimeRangeSelector';
 import { ConnectionStatusIndicator } from './Components/ConnectionStatusIndicator';
 import { CurrentRangeDisplay } from './Components/CurrentRangeDisplay';
-import { TIME_RANGES, COLORS } from './Components/constants';
+import { TIME_RANGES, COLORS, SECOND, MINUTE, HOUR, DAY } from './Components/constants';
 import axios from 'axios';
 
 const PrometheusChart = ({ metricName }) => {
@@ -59,14 +59,14 @@ const PrometheusChart = ({ metricName }) => {
 
     const calculateStep = useCallback((start, end) => {
         const range = end - start;
-        if (range <= 60) return 1;       // 1 мин
-        if (range <= 300) return 5;      // 5 мин
-        if (range <= 1800) return 15;    // 30 мин
-        if (range <= 3600) return 30;    // 1 час
-        if (range <= 10800) return 60;   // 3 часа
-        if (range <= 21600) return 120;  // 6 часов
-        if (range <= 43200) return 300;  // 12 часов
-        if (range <= 86400) return 600;  // 24 часа
+        if (range <= MINUTE) return 1;           // 1 мин
+        if (range <= MINUTE * 5) return 5;      // 5 мин
+        if (range <= HOUR / 2) return 15;      // 30 мин
+        if (range <= HOUR) return 30;         // 1 час
+        if (range <= HOUR * 3) return 60;    // 3 часа
+        if (range <= HOUR * 6) return 120;  // 6 часов
+        if (range <= DAY / 2) return 300;  // 12 часов
+        if (range <= DAY) return 600;     // 24 часа
         return 1800;                     // > 24 часов
     }, []);