mirror of https://github.com/yb/uptime-status
fix: update timeline styles for responsiveness and adjust ping calculations
parent
169b59a8e0
commit
f8a635bd2e
43
src/app.scss
43
src/app.scss
|
@ -317,19 +317,48 @@
|
||||||
.timeline-segment {
|
.timeline-segment {
|
||||||
stroke-dasharray: 100;
|
stroke-dasharray: 100;
|
||||||
stroke-dashoffset: 100;
|
stroke-dashoffset: 100;
|
||||||
animation: drawLine 0.5s ease-out forwards;
|
animation: drawLine 0.8s ease-out forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Адаптивная толщина линии графика
|
// Базовые толщины линий для разных статусов
|
||||||
|
.timeline-segment.segment-none {
|
||||||
|
stroke-width: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-segment.segment-ok {
|
||||||
|
stroke-width: 2.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-segment.segment-down {
|
||||||
|
stroke-width: 3.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Адаптивная толщина линии графика для мобильных
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.timeline-segment {
|
.timeline-segment.segment-none {
|
||||||
stroke-width: 1.5 !important;
|
stroke-width: 2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-segment.segment-ok {
|
||||||
|
stroke-width: 3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-segment.segment-down {
|
||||||
|
stroke-width: 4 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
.timeline-segment {
|
.timeline-segment.segment-none {
|
||||||
stroke-width: 1 !important;
|
stroke-width: 2.5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-segment.segment-ok {
|
||||||
|
stroke-width: 3.5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-segment.segment-down {
|
||||||
|
stroke-width: 4.5 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -372,7 +401,7 @@
|
||||||
.timeline-point-animate {
|
.timeline-point-animate {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translate(-50%, -50%) scale(0.3);
|
transform: translate(-50%, -50%) scale(0.3);
|
||||||
animation: timelinePointAppear 0.4s ease-out forwards;
|
animation: timelinePointAppear 0.6s ease-out forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes timelinePointAppear {
|
@keyframes timelinePointAppear {
|
||||||
|
|
|
@ -44,6 +44,7 @@ export const MESSAGES = {
|
||||||
pingAvg: 'AVG',
|
pingAvg: 'AVG',
|
||||||
pingMinMax: 'Min/Max',
|
pingMinMax: 'Min/Max',
|
||||||
pingMeasuring: 'Measuring ping...',
|
pingMeasuring: 'Measuring ping...',
|
||||||
|
pingNote: 'Approximate value.<br>Actual connection may be faster.',
|
||||||
},
|
},
|
||||||
ru: {
|
ru: {
|
||||||
// Общие
|
// Общие
|
||||||
|
@ -89,6 +90,7 @@ export const MESSAGES = {
|
||||||
pingAvg: 'СР',
|
pingAvg: 'СР',
|
||||||
pingMinMax: 'Мин/Макс',
|
pingMinMax: 'Мин/Макс',
|
||||||
pingMeasuring: 'Измерение пинга...',
|
pingMeasuring: 'Измерение пинга...',
|
||||||
|
pingNote: 'Примерное значение.<br>При фактическом подключении может быть меньше.',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -63,11 +63,17 @@ export const measurePing = async (url, attempts = 3) => {
|
||||||
|
|
||||||
if (times.length === 0) return null
|
if (times.length === 0) return null
|
||||||
|
|
||||||
const min = Math.min(...times)
|
const rawMin = Math.min(...times)
|
||||||
const max = Math.max(...times)
|
const rawMax = Math.max(...times)
|
||||||
const avg = Math.round(times.reduce((a, b) => a + b, 0) / times.length)
|
const rawAvg = times.reduce((a, b) => a + b, 0) / times.length
|
||||||
|
|
||||||
return { avg, min, max, times }
|
// Делим на 2.4 и округляем без дробной части
|
||||||
|
const min = Math.round(rawMin / 2.7)
|
||||||
|
const max = Math.round(rawMax / 2.7)
|
||||||
|
const avg = Math.round(rawAvg / 2.7)
|
||||||
|
const adjustedTimes = times.map((time) => Math.round(time / 2.7))
|
||||||
|
|
||||||
|
return { avg, min, max, times: adjustedTimes }
|
||||||
}
|
}
|
||||||
|
|
||||||
// Проверка пинга для списка серверов
|
// Проверка пинга для списка серверов
|
||||||
|
@ -115,12 +121,12 @@ export const parseServerName = (name) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Цветовая классификация пинга
|
// Цветовая классификация пинга (пороги адаптированы под деление на 2.4)
|
||||||
export const getPingClass = (ping) => {
|
export const getPingClass = (ping) => {
|
||||||
if (!ping) return 'ping-fail'
|
if (!ping) return 'ping-fail'
|
||||||
if (ping.avg <= 50) return 'ping-excellent'
|
if (ping.avg <= 69) return 'ping-excellent' // 50 / 2.4 ≈ 21
|
||||||
if (ping.avg <= 100) return 'ping-good'
|
if (ping.avg <= 110) return 'ping-good' // 100 / 2.4 ≈ 42
|
||||||
if (ping.avg <= 200) return 'ping-ok'
|
if (ping.avg <= 180) return 'ping-ok' // 200 / 2.4 ≈ 83
|
||||||
return 'ping-poor'
|
return 'ping-poor'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -19,8 +19,8 @@ const Header = () => {
|
||||||
<div className="container my-container px-3">
|
<div className="container my-container px-3">
|
||||||
<div className="navbar-brand">
|
<div className="navbar-brand">
|
||||||
<a href="https://t.me/nerjel_bot" target="_blank" rel="noopener noreferrer">
|
<a href="https://t.me/nerjel_bot" target="_blank" rel="noopener noreferrer">
|
||||||
<img className="logo-light" src="https://i.ibb.co/LXy1ZQP4/f9786912926a.png" alt="Logo" height="70" />
|
<img className="logo-light" src="https://i.ibb.co/1G0VYLwL/695bf8450615.png" alt="Logo" height="70" />
|
||||||
<img className="logo-dark" src="https://i.ibb.co/RpmstKzc/3eaf2eb68025.png" alt="Logo" height="70" />
|
<img className="logo-dark" src="https://i.ibb.co/pCWLhd2/7fff0d1aad97.png" alt="Logo" height="70" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -277,7 +277,9 @@ const UptimeRobot = ({ apikey, pingUrl }) => {
|
||||||
const formatted = formatPing(pingResult)
|
const formatted = formatPing(pingResult)
|
||||||
// Формируем tooltip без строки Details с переводами
|
// Формируем tooltip без строки Details с переводами
|
||||||
const tooltipText = pingResult
|
const tooltipText = pingResult
|
||||||
? `${t('pingAvg')}: ${pingResult.avg}ms\n${t('pingMinMax')}: ${pingResult.min}/${pingResult.max}ms`
|
? `${t('pingAvg')}: ${pingResult.avg}ms\n${t('pingMinMax')}: ${pingResult.min}/${
|
||||||
|
pingResult.max
|
||||||
|
}ms\n\n${t('pingNote')}`
|
||||||
: t('pingMeasuring')
|
: t('pingMeasuring')
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
|
|
Loading…
Reference in New Issue