Converted time to constants
test-org/trust-module-frontend/pipeline/pr-redesign Build queued...
Details
test-org/trust-module-frontend/pipeline/pr-redesign Build queued...
Details
parent
858f6e2c4c
commit
22c5fcf02c
|
|
@ -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(() => {
|
||||
|
|
|
|||
|
|
@ -17,4 +17,19 @@ export const TIME_RANGES = [
|
|||
];
|
||||
|
||||
export const COLORS = ['#3e95cd', '#8e5ea2', '#3cba9f', '#e8c3b9', '#c45850'];
|
||||
export const MAX_POINTS = 20;
|
||||
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;
|
||||
|
|
@ -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 часов
|
||||
}, []);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue