seo/control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

네트워크 오류 드롭 이력 추가

Browse Source
This commit is contained in:
seo
2026-07-25 23:15:18 +09:00
parent e500eb2876
commit 7f9a5d1a81
5 changed files with 201 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/app.js
+124
View File
@@ -167,10 +167,14 @@
wifi5History: '5G WiFi History',
downloadRxPackets: 'Download / RX Packets',
uploadTxPackets: 'Upload / TX Packets',
rxErrorsDrops: 'RX Errors / Drops',
txErrorsDrops: 'TX Errors / Drops',
downloadLine: 'Download',
uploadLine: 'Upload',
rxPacketsLine: 'RX Packets',
txPacketsLine: 'TX Packets',
errorsLine: 'Errors',
dropsLine: 'Drops',
remaining: 'Remaining',
batteryVoltage: 'Battery Voltage',
wifiClients: 'DHCP Clients',
@@ -373,10 +377,14 @@
wifi5History: '5G WiFi 이력',
downloadRxPackets: '다운로드 / RX 패킷',
uploadTxPackets: '업로드 / TX 패킷',
rxErrorsDrops: 'RX 오류 / 드롭',
txErrorsDrops: 'TX 오류 / 드롭',
downloadLine: '다운로드',
uploadLine: '업로드',
rxPacketsLine: 'RX 패킷',
txPacketsLine: 'TX 패킷',
errorsLine: '오류',
dropsLine: '드롭',
remaining: '잔여 시간',
batteryVoltage: '배터리 전압',
wifiClients: 'DHCP 클라이언트',
@@ -2626,6 +2634,114 @@
c.update('none');
}
function networkQualityChart(canvasId, rows, errorKey, dropKey) {
const canvas = $('#' + canvasId);
if (!canvas || typeof Chart === 'undefined') return;
const { labels, xTickCallback, xGridColor } = timeAxis(rows);
const errorValues = rows.map(row => {
const value = Number(row[errorKey]);
return Number.isFinite(value) ? value : null;
});
const dropValues = rows.map(row => {
const value = Number(row[dropKey]);
return Number.isFinite(value) ? value : null;
});
const scale = dynamicScaleForValues([...errorValues, ...dropValues], { minSpan: 1, padding: 0.2 });
const datasets = [
{
label: t('errorsLine'),
data: errorValues,
borderColor: '#ef4444',
backgroundColor: 'transparent',
borderWidth: 2.1,
pointRadius: 0,
tension: 0.2,
fill: false,
},
{
label: t('dropsLine'),
data: dropValues,
borderColor: '#f59e0b',
backgroundColor: 'transparent',
borderWidth: 2,
borderDash: [5, 4],
pointRadius: 0,
tension: 0.2,
fill: false,
},
];
const options = {
responsive: true,
maintainAspectRatio: false,
animation: false,
interaction: {
intersect: false,
mode: 'index',
},
plugins: {
legend: {
display: true,
position: 'bottom',
labels: {
boxWidth: 18,
boxHeight: 2,
color: '#8d98aa',
padding: 10,
},
},
tooltip: {
displayColors: true,
padding: 8,
callbacks: {
label: item => `${item.dataset.label}: ${formatChartNumber(item.parsed.y, '/s')}`,
},
},
},
scales: {
x: {
ticks: {
color: '#64748b',
maxRotation: 0,
autoSkip: false,
callback: xTickCallback,
},
grid: {
color: xGridColor,
drawTicks: false,
},
border: { display: false },
},
y: {
min: scale.min,
max: scale.max,
ticks: {
color: '#8d98aa',
maxTicksLimit: 4,
callback: value => formatChartNumber(value, '/s'),
},
grid: { color: 'rgba(255,255,255,.045)', drawTicks: false },
border: { display: false },
},
},
};
if (!state.charts[canvasId]) {
state.charts[canvasId] = new Chart(canvas, {
type: 'line',
data: { labels, datasets },
options,
});
return;
}
const c = state.charts[canvasId];
c.data.labels = labels;
c.data.datasets = datasets;
c.options = options;
c.update('none');
}
function dynamicScaleForValues(values, options = {}) {
const floor = Number(options.floor ?? 0);
const ceiling = Number.isFinite(Number(options.ceiling)) ? Number(options.ceiling) : null;
@@ -2690,12 +2806,20 @@
const wifi5Rows = networkRowsForIface(networkRows, 'wlan1');
networkChart('netWanRxChart', wanRows, 'rx_mbytes', t('downloadLine'), 'rx_pps', t('rxPacketsLine'), '#0ea5e9');
networkChart('netWanTxChart', wanRows, 'tx_mbytes', t('uploadLine'), 'tx_pps', t('txPacketsLine'), '#22c55e');
networkQualityChart('netWanRxQualityChart', wanRows, 'rx_errors_per_sec', 'rx_dropped_per_sec');
networkQualityChart('netWanTxQualityChart', wanRows, 'tx_errors_per_sec', 'tx_dropped_per_sec');
networkChart('netLanRxChart', lanRows, 'rx_mbytes', t('downloadLine'), 'rx_pps', t('rxPacketsLine'), '#0ea5e9');
networkChart('netLanTxChart', lanRows, 'tx_mbytes', t('uploadLine'), 'tx_pps', t('txPacketsLine'), '#22c55e');
networkQualityChart('netLanRxQualityChart', lanRows, 'rx_errors_per_sec', 'rx_dropped_per_sec');
networkQualityChart('netLanTxQualityChart', lanRows, 'tx_errors_per_sec', 'tx_dropped_per_sec');
networkChart('netWifi24RxChart', wifi24Rows, 'rx_mbytes', t('downloadLine'), 'rx_pps', t('rxPacketsLine'), '#0ea5e9');
networkChart('netWifi24TxChart', wifi24Rows, 'tx_mbytes', t('uploadLine'), 'tx_pps', t('txPacketsLine'), '#22c55e');
networkQualityChart('netWifi24RxQualityChart', wifi24Rows, 'rx_errors_per_sec', 'rx_dropped_per_sec');
networkQualityChart('netWifi24TxQualityChart', wifi24Rows, 'tx_errors_per_sec', 'tx_dropped_per_sec');
networkChart('netWifi5RxChart', wifi5Rows, 'rx_mbytes', t('downloadLine'), 'rx_pps', t('rxPacketsLine'), '#0ea5e9');
networkChart('netWifi5TxChart', wifi5Rows, 'tx_mbytes', t('uploadLine'), 'tx_pps', t('txPacketsLine'), '#22c55e');
networkQualityChart('netWifi5RxQualityChart', wifi5Rows, 'rx_errors_per_sec', 'rx_dropped_per_sec');
networkQualityChart('netWifi5TxQualityChart', wifi5Rows, 'tx_errors_per_sec', 'tx_dropped_per_sec');
}
function resizeChartsSoon() {