deployer3000
/
trust-module-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 10 Wiki Activity

Converted time to constants #35

Merged
DmitriyA merged 1 commits from debugging into redesign 2025-04-10 12:36:48 +03:00
Conversation 0 Commits 1 Files Changed 3
3 changed files with 37 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/Charts/Components/LineChartComponent.jsx
View File

@ -1,5 +1,11 @@
import React, { useState, useRef, useEffect } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import { LineChart, XAxis, YAxis, CartesianGrid, Tooltip, Line, ResponsiveContainer, ReferenceArea } from 'recharts'; 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 = ({ const LineChartComponent = ({
chartData, chartData,
@ -12,6 +18,7 @@ const LineChartComponent = ({
const [isSelecting, setIsSelecting] = useState(false); const [isSelecting, setIsSelecting] = useState(false);
const chartRef = useRef(null); const chartRef = useRef(null);
const allTimestamps = Object.values(chartData) const allTimestamps = Object.values(chartData)
.flat() .flat()
.map(point => point.timestamp) .map(point => point.timestamp)
@ -46,22 +53,13 @@ const LineChartComponent = ({
// Функция для определения оптимального формата времени в зависимости от диапазона // Функция для определения оптимального формата времени в зависимости от диапазона
const getTimeFormat = () => { const getTimeFormat = () => {
if (!data.length) return 'HH:mm:ss'; if (!data.length) return TIME_FORMATS.SHORT;
const first = data[0].timestamp; const range = data[data.length - 1].timestamp - data[0].timestamp;
const last = data[data.length - 1].timestamp;
const range = last - first;
// Если диапазон больше 24 часов - показываем дату if (range > DAY) return TIME_FORMATS.LONG;
if (range > 86400000) { if (range > HOUR) return TIME_FORMATS.MEDIUM;
return 'dd.MM HH:mm'; return TIME_FORMATS.SHORT;
}
// Если больше 1 часа - показываем часы и минуты
if (range > 3600000) {
return 'HH:mm';
}
// Для коротких диапазонов - показываем время с секундами
return 'HH:mm:ss';
}; };
useEffect(() => { useEffect(() => {

15
src/Charts/Components/constants.jsx
View File

@ -18,3 +18,18 @@ export const TIME_RANGES = [
export const COLORS = ['#3e95cd', '#8e5ea2', '#3cba9f', '#e8c3b9', '#c45850']; 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;

18
src/Charts/PrometheusChart.jsx
View File

@ -4,7 +4,7 @@ import LineChartComponent from './Components/LineChartComponent';
import { TimeRangeSelector } from './Components/TimeRangeSelector'; import { TimeRangeSelector } from './Components/TimeRangeSelector';
import { ConnectionStatusIndicator } from './Components/ConnectionStatusIndicator'; import { ConnectionStatusIndicator } from './Components/ConnectionStatusIndicator';
import { CurrentRangeDisplay } from './Components/CurrentRangeDisplay'; 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'; import axios from 'axios';
const PrometheusChart = ({ metricName }) => { const PrometheusChart = ({ metricName }) => {
@ -59,14 +59,14 @@ const PrometheusChart = ({ metricName }) => {
const calculateStep = useCallback((start, end) => { const calculateStep = useCallback((start, end) => {
const range = end - start; const range = end - start;
if (range <= 60) return 1; // 1 мин if (range <= MINUTE) return 1; // 1 мин
if (range <= 300) return 5; // 5 мин if (range <= MINUTE * 5) return 5; // 5 мин
if (range <= 1800) return 15; // 30 мин if (range <= HOUR / 2) return 15; // 30 мин
if (range <= 3600) return 30; // 1 час if (range <= HOUR) return 30; // 1 час
if (range <= 10800) return 60; // 3 часа if (range <= HOUR * 3) return 60; // 3 часа
if (range <= 21600) return 120; // 6 часов if (range <= HOUR * 6) return 120; // 6 часов
if (range <= 43200) return 300; // 12 часов if (range <= DAY / 2) return 300; // 12 часов
if (range <= 86400) return 600; // 24 часа if (range <= DAY) return 600; // 24 часа
return 1800; // > 24 часов return 1800; // > 24 часов
}, []); }, []);