Compare commits
3
Commits
main
..
dc6714c3bf
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
dc6714c3bf
|
||
|
|
712bceccbe
|
||
|
|
d2bf90ccec
|
No files matched your search
+288
-287
@@ -4,241 +4,249 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Log Viewer Pro // Dark Mode</title>
|
<title>Log Viewer // Grafana Style</title>
|
||||||
|
|
||||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||||
<link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">
|
<link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">
|
||||||
<script src="js/lucide.min.js"></script>
|
<script src="js/lucide.min.js"></script>
|
||||||
|
<script src="js/chart.js"></script>
|
||||||
|
<script src="js/chartjs-plugin-zoom.min.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--bg-color: #0f111a;
|
--sidebar-width: 260px;
|
||||||
--card-bg: #1a1c27;
|
--brand-color: #4ade80;
|
||||||
--border-color: #2d303e;
|
--bg-dark: #0f172a;
|
||||||
--accent-color: #3d5afe;
|
--card-dark: #1e293b;
|
||||||
|
--border-color: #334155;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-dark);
|
||||||
color: #e0e0e0;
|
color: #f1f5f9;
|
||||||
font-family: 'Inter', -apple-system, sans-serif;
|
font-family: 'Inter', sans-serif;
|
||||||
font-size: 0.85rem;
|
font-size: 0.82rem;
|
||||||
overflow-x: hidden;
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Full Screen Drop Zone */
|
.wrapper {
|
||||||
#drop-overlay {
|
display: flex;
|
||||||
position: fixed;
|
height: 100vh;
|
||||||
top: 0;
|
}
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
/* Sidebar */
|
||||||
height: 100%;
|
aside {
|
||||||
background: rgba(61, 90, 254, 0.9);
|
width: var(--sidebar-width);
|
||||||
z-index: 9999;
|
background: var(--card-dark);
|
||||||
display: none;
|
border-right: 1px solid var(--border-color);
|
||||||
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border: 4px dashed #fff;
|
|
||||||
color: white;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sleek Table Design */
|
.sidebar-header {
|
||||||
.main-container {
|
|
||||||
padding: 1.5rem;
|
|
||||||
max-width: 1600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-card {
|
|
||||||
background: var(--card-bg);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
border-bottom: 1px solid var(--border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
table.dataTable {
|
.file-list {
|
||||||
border: none !important;
|
overflow-y: auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.dataTable thead th {
|
.file-item {
|
||||||
background: #242736;
|
padding: 8px 12px;
|
||||||
text-transform: uppercase;
|
border-radius: 6px;
|
||||||
font-size: 0.7rem;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
border-bottom: 1px solid var(--border-color) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Level Badges */
|
|
||||||
.lvl-badge {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: inline-block;
|
|
||||||
min-width: 40px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lvl-TRC {
|
|
||||||
background: #424242;
|
|
||||||
color: #bdbdbd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lvl-DBG {
|
|
||||||
background: #1e3a8a;
|
|
||||||
color: #93c5fd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lvl-INF {
|
|
||||||
background: #064e3b;
|
|
||||||
color: #6ee7b7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lvl-WRN {
|
|
||||||
background: #78350f;
|
|
||||||
color: #fcd34d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lvl-ERR {
|
|
||||||
background: #7f1d1d;
|
|
||||||
color: #fca5a5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lvl-CRT {
|
|
||||||
background: #ec4899;
|
|
||||||
color: white;
|
|
||||||
animation: pulse 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0% {
|
|
||||||
box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
70% {
|
|
||||||
box-shadow: 0 0 0 10px rgba(236, 72, 153, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
box-shadow: 0 0 0 0 rgba(236, 72, 153, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Controls */
|
|
||||||
.details-control {
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--accent-color);
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
font-size: 0.75rem;
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.details-control:hover {
|
.file-item:hover {
|
||||||
transform: scale(1.2);
|
background: rgba(255, 255, 255, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.exception-view {
|
.file-item.active {
|
||||||
background: #000;
|
background: rgba(74, 222, 128, 0.15);
|
||||||
color: #ff5555;
|
color: var(--brand-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main Content */
|
||||||
|
main {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-bar {
|
||||||
|
padding: 0.6rem 1.5rem;
|
||||||
|
background: var(--card-dark);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Chart Area - Styled like Grafana */
|
||||||
|
.chart-section {
|
||||||
|
height: 200px;
|
||||||
|
background: #0b0e14;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-hint {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 20px;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: #64748b;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toggles */
|
||||||
|
.level-toggles .btn {
|
||||||
|
border: none;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 4px 12px;
|
||||||
|
margin-right: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-check:not(:checked)+.btn {
|
||||||
|
opacity: 0.15;
|
||||||
|
filter: grayscale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dbg {
|
||||||
|
background: #38bdf8;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-inf {
|
||||||
|
background: #4ade80;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-wrn {
|
||||||
|
background: #fbbf24;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-err {
|
||||||
|
background: #f87171;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table */
|
||||||
|
.content-area {
|
||||||
|
flex-grow: 1;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 8px;
|
overflow-y: auto;
|
||||||
font-family: 'Fira Code', monospace;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
border-left: 3px solid #7f1d1d;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Search Bar Customization */
|
.table-container {
|
||||||
.dataTables_filter input {
|
background: var(--card-dark);
|
||||||
background: #242736;
|
border-radius: 6px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
table.dataTable thead th {
|
||||||
|
background: #111827;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
color: #94a3b8;
|
||||||
|
border-bottom: 1px solid var(--border-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
background: #0f172a;
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
border-radius: 8px;
|
|
||||||
color: white;
|
color: white;
|
||||||
padding: 6px 12px;
|
border-radius: 4px;
|
||||||
width: 300px !important;
|
padding: 4px 12px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
width: 280px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-more {
|
.range-info {
|
||||||
color: var(--accent-color);
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.props-col {
|
|
||||||
color: #888;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
|
color: var(--brand-color);
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="drop-overlay">
|
<div class="wrapper">
|
||||||
<i data-lucide="upload-cloud" size="64"></i>
|
<aside>
|
||||||
<h2 class="mt-3">Drop Log File to Import</h2>
|
<div class="sidebar-header text-center">
|
||||||
</div>
|
<h6 class="mb-3 d-flex align-items-center justify-content-center gap-2">
|
||||||
|
<i data-lucide="bar-chart-3" class="text-success"></i> LOG EXPLORER
|
||||||
<div class="main-container">
|
</h6>
|
||||||
<header class="d-flex justify-content-between align-items-center mb-4">
|
<button class="btn btn-sm btn-outline-primary w-100 mb-2"
|
||||||
<div>
|
onclick="document.getElementById('dir-input').click()">
|
||||||
<h4 class="mb-0 fw-bold"><i data-lucide="terminal" class="me-2 text-primary"></i>LogView <span
|
<i data-lucide="plus" size="14"></i> Select Project Folder
|
||||||
class="text-primary">Pro</span></h4>
|
</button>
|
||||||
<p class="text-muted small mb-0">v3.0 • Dark Mode Enabled</p>
|
<input type="file" id="dir-input" webkitdirectory hidden>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn btn-outline-primary btn-sm" onclick="document.getElementById('file-input').click()">
|
<div class="file-list" id="file-list"></div>
|
||||||
<i data-lucide="file-plus" class="me-1"></i> Open File
|
</aside>
|
||||||
</button>
|
|
||||||
<input type="file" id="file-input" hidden accept=".log,.txt">
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="table-card">
|
<main>
|
||||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
<div class="top-bar">
|
||||||
<div class="d-flex align-items-center gap-3">
|
<div class="level-toggles">
|
||||||
<select id="level-filter" class="form-select form-select-sm bg-dark border-secondary"
|
<input type="checkbox" class="btn-check" id="toggle-DBG" checked value="DBG">
|
||||||
style="width: 150px;">
|
<label class="btn btn-dbg" for="toggle-DBG">DBG</label>
|
||||||
<option value="">All Levels</option>
|
<input type="checkbox" class="btn-check" id="toggle-INF" checked value="INF">
|
||||||
<option value="CRT">CRT (Critical)</option>
|
<label class="btn btn-inf" for="toggle-INF">INF</label>
|
||||||
<option value="ERR">ERR (Error)</option>
|
<input type="checkbox" class="btn-check" id="toggle-WRN" checked value="WRN">
|
||||||
<option value="WRN">WRN (Warning)</option>
|
<label class="btn btn-wrn" for="toggle-WRN">WRN</label>
|
||||||
<option value="INF">INF (Info)</option>
|
<input type="checkbox" class="btn-check" id="toggle-ERR" checked value="ERR">
|
||||||
<option value="DBG">DBG (Debug)</option>
|
<label class="btn btn-err" for="toggle-ERR">ERR</label>
|
||||||
<option value="TRC">TRC (Trace)</option>
|
<span id="range-display" class="range-info ms-3"></span>
|
||||||
</select>
|
</div>
|
||||||
<div id="stats-area" class="small text-muted"></div>
|
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<input type="text" id="global-search" class="search-input" placeholder="Regex Search...">
|
||||||
|
<button class="btn btn-sm btn-dark border-secondary" id="reset-all" title="Reset Range & Filters">
|
||||||
|
<i data-lucide="refresh-cw" size="14"></i>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="log-table" class="table table-dark table-hover w-100">
|
<div class="chart-section">
|
||||||
<thead>
|
<span class="chart-hint"><i data-lucide="mouse-pointer-2" size="10"></i> Drag to select time
|
||||||
<tr>
|
range</span>
|
||||||
<th width="30"></th>
|
<canvas id="intensityChart"></canvas>
|
||||||
<th width="120">Timestamp</th>
|
</div>
|
||||||
<th width="80">Level</th>
|
|
||||||
<th>Message</th>
|
|
||||||
<th width="300">Properties</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal fade" id="logModal" tabindex="-1">
|
<div class="content-area">
|
||||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
<div class="table-container shadow-lg">
|
||||||
<div class="modal-content border-secondary shadow-lg">
|
<table id="log-table" class="table table-dark table-hover table-sm w-100">
|
||||||
<div class="modal-header border-secondary">
|
<thead>
|
||||||
<h6 class="modal-title">Log Message Detail</h6>
|
<tr>
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
<th width="30"></th>
|
||||||
</div>
|
<th width="80">Level</th>
|
||||||
<div class="modal-body p-0">
|
<th width="120">Time</th>
|
||||||
<pre id="modal-body-content" class="m-0 p-3"
|
<th>Description</th>
|
||||||
style="background:#000; color:#fff; font-size:0.8rem;"></pre>
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="js/jquery-3.7.0.min.js"></script>
|
<script src="js/jquery-3.7.0.min.js"></script>
|
||||||
@@ -248,139 +256,132 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
lucide.createIcons();
|
lucide.createIcons();
|
||||||
const TRUNCATE_LIMIT = 150;
|
let chart;
|
||||||
|
let selectedTimeRange = null; // {start: 'HH:mm', end: 'HH:mm'}
|
||||||
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
const table = $('#log-table').DataTable({
|
const table = $('#log-table').DataTable({
|
||||||
dom: '<"d-flex justify-content-between align-items-center mb-2"f>rtip',
|
dom: 'rtip',
|
||||||
pageLength: 50,
|
pageLength: 50,
|
||||||
|
order: [[2, 'desc']],
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{ data: null, orderable: false, render: () => `<i data-lucide="more-horizontal" size="14" style="opacity:0.3"></i>` },
|
||||||
className: 'details-control',
|
|
||||||
orderable: false,
|
|
||||||
data: null,
|
|
||||||
render: (d, t, row) => row.exception ? '<i data-lucide="chevron-right" size="16"></i>' : ''
|
|
||||||
},
|
|
||||||
{ data: 'time', className: 'text-muted' },
|
|
||||||
{
|
{
|
||||||
data: 'level',
|
data: 'level',
|
||||||
render: l => `<span class="lvl-badge lvl-${l}">${l}</span>`
|
render: l => `<span class="badge w-100 btn-${l.toLowerCase()}">${l}</span>`
|
||||||
},
|
},
|
||||||
{
|
{ data: 'time' },
|
||||||
data: 'message',
|
{ data: 'message', render: m => `<span class="text-truncate d-block" style="max-width: 900px">${m}</span>` }
|
||||||
render: function (data) {
|
|
||||||
if (data.length > TRUNCATE_LIMIT) {
|
|
||||||
return `<span>${data.substring(0, TRUNCATE_LIMIT)}</span><a class="btn-more ms-1" onclick="viewMore('${btoa(unescape(encodeURIComponent(data)))}')">...more</a>`;
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: 'props',
|
|
||||||
className: 'props-col',
|
|
||||||
render: p => p ? `<span title="${p} text-truncate d-block" style="max-width:280px">${p}</span>` : ''
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
order: [[1, 'asc']],
|
drawCallback: () => lucide.createIcons()
|
||||||
drawCallback: function () { lucide.createIcons(); },
|
|
||||||
language: { search: "", searchPlaceholder: "Filter logs..." }
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Expandable Exception Rows
|
// Chart.js Configuration
|
||||||
$('#log-table tbody').on('click', 'td.details-control', function () {
|
const ctx = document.getElementById('intensityChart').getContext('2d');
|
||||||
let tr = $(this).closest('tr'), row = table.row(tr);
|
chart = new Chart(ctx, {
|
||||||
if (row.child.isShown()) {
|
type: 'bar',
|
||||||
row.child.hide();
|
data: { labels: [], datasets: [{ data: [], backgroundColor: '#4ade80', borderRadius: 2, barPercentage: 0.8 }] },
|
||||||
$(this).html('<i data-lucide="chevron-right" size="16"></i>');
|
options: {
|
||||||
} else if (row.data().exception) {
|
responsive: true,
|
||||||
row.child(`<div class="exception-view">${row.data().exception}</div>`).show();
|
maintainAspectRatio: false,
|
||||||
$(this).html('<i data-lucide="chevron-down" class="text-danger" size="16"></i>');
|
scales: {
|
||||||
|
x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } },
|
||||||
|
y: { beginAtZero: true, ticks: { color: '#475569' }, grid: { color: '#1e293b' } }
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
legend: { display: false },
|
||||||
|
zoom: {
|
||||||
|
zoom: {
|
||||||
|
drag: { enabled: true, backgroundColor: 'rgba(74, 222, 128, 0.2)', borderColor: '#4ade80', borderWidth: 1 },
|
||||||
|
mode: 'x',
|
||||||
|
onZoomComplete: ({ chart }) => {
|
||||||
|
const { min, max } = chart.scales.x;
|
||||||
|
const labels = chart.data.labels;
|
||||||
|
const start = labels[Math.max(0, Math.floor(min))];
|
||||||
|
const end = labels[Math.min(labels.length - 1, Math.ceil(max))];
|
||||||
|
|
||||||
|
selectedTimeRange = { start, end };
|
||||||
|
$('#range-display').text(`Range: ${start} - ${end}`);
|
||||||
|
table.draw();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
lucide.createIcons();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Level Filter
|
// Custom Table Filter for Levels + Time Range
|
||||||
$('#level-filter').on('change', function () {
|
$.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
|
||||||
table.column(2).search(this.value ? `^${this.value}$` : '', true, false).draw();
|
const level = data[1];
|
||||||
|
const timeStr = data[2]; // HH:mm:ss.SSS
|
||||||
|
const timeShort = timeStr.substring(0, 5); // HH:mm
|
||||||
|
|
||||||
|
// 1. Filter by Level
|
||||||
|
const checkedLevels = $('.btn-check:checked').map((i, el) => $(el).val()).get();
|
||||||
|
if (!checkedLevels.includes(level)) return false;
|
||||||
|
|
||||||
|
// 2. Filter by Time Range (if zoomed)
|
||||||
|
if (selectedTimeRange) {
|
||||||
|
return timeShort >= selectedTimeRange.start && timeShort <= selectedTimeRange.end;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
});
|
});
|
||||||
|
|
||||||
// --- FULL SCREEN DRAG & DROP ---
|
// Search & Reset
|
||||||
let dragCounter = 0;
|
$('#global-search').on('keyup', function () { table.search(this.value, true, false).draw(); });
|
||||||
window.addEventListener('dragenter', e => {
|
$('#reset-all').on('click', () => {
|
||||||
e.preventDefault();
|
chart.resetZoom();
|
||||||
dragCounter++;
|
selectedTimeRange = null;
|
||||||
$('#drop-overlay').css('display', 'flex');
|
$('#range-display').text('');
|
||||||
|
$('#global-search').val('');
|
||||||
|
table.search('').draw();
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener('dragleave', e => {
|
$('.btn-check').on('change', () => table.draw());
|
||||||
dragCounter--;
|
|
||||||
if (dragCounter === 0) $('#drop-overlay').hide();
|
// File/Directory Loading
|
||||||
|
$('#dir-input').on('change', function (e) {
|
||||||
|
const files = Array.from(e.target.files).filter(f => f.name.endsWith('.log'));
|
||||||
|
const list = $('#file-list').empty();
|
||||||
|
files.forEach((f, i) => list.append(`<div class="file-item" onclick="loadLog(${i})"><span>${f.name}</span></div>`));
|
||||||
|
window.loadedFiles = files;
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener('dragover', e => e.preventDefault());
|
window.loadLog = function (idx) {
|
||||||
|
$('.file-item').removeClass('active').eq(idx).addClass('active');
|
||||||
window.addEventListener('drop', e => {
|
|
||||||
e.preventDefault();
|
|
||||||
dragCounter = 0;
|
|
||||||
$('#drop-overlay').hide();
|
|
||||||
processFile(e.dataTransfer.files[0]);
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#file-input').on('change', e => processFile(e.target.files[0]));
|
|
||||||
|
|
||||||
function processFile(file) {
|
|
||||||
if (!file) return;
|
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onload = e => {
|
reader.onload = e => {
|
||||||
const logs = parseLogs(e.target.result);
|
const logs = parseLogs(e.target.result);
|
||||||
table.clear().rows.add(logs).draw();
|
table.clear().rows.add(logs).draw();
|
||||||
updateStats(logs);
|
updateChart(logs);
|
||||||
};
|
};
|
||||||
reader.readAsText(file);
|
reader.readAsText(window.loadedFiles[idx]);
|
||||||
}
|
};
|
||||||
|
|
||||||
function parseLogs(text) {
|
function parseLogs(text) {
|
||||||
const lines = text.split(/\r?\n/);
|
const lines = text.split(/\r?\n/);
|
||||||
const results = [];
|
const logs = [];
|
||||||
// Support 6 levels: TRC, DBG, WRN, INF, ERR, CRT
|
const regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/;
|
||||||
const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(TRC|DBG|WRN|INF|ERR|CRT)\]\s(.*)$/;
|
|
||||||
|
|
||||||
lines.forEach(line => {
|
lines.forEach(line => {
|
||||||
if (!line.trim()) return;
|
const match = line.match(regex);
|
||||||
const match = line.match(headerRegex);
|
if (match) logs.push({ time: match[1], level: match[2], message: match[3] });
|
||||||
|
|
||||||
if (match) {
|
|
||||||
let content = match[3].trim();
|
|
||||||
let message = content, props = "";
|
|
||||||
|
|
||||||
// Parse props at the end: (key: value)
|
|
||||||
const lastParenIdx = content.lastIndexOf(' (');
|
|
||||||
if (lastParenIdx !== -1 && content.endsWith(')')) {
|
|
||||||
const possibleProps = content.substring(lastParenIdx + 2, content.length - 1);
|
|
||||||
if (possibleProps.includes(':')) {
|
|
||||||
props = possibleProps;
|
|
||||||
message = content.substring(0, lastParenIdx).trim();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
results.push({ time: match[1], level: match[2], message, props, exception: "" });
|
|
||||||
} else if (results.length > 0) {
|
|
||||||
results[results.length - 1].exception += (results[results.length - 1].exception ? "\n" : "") + line;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
return results;
|
return logs;
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateStats(logs) {
|
function updateChart(logs) {
|
||||||
const count = logs.length;
|
const bins = {};
|
||||||
const errs = logs.filter(l => l.level === 'ERR' || l.level === 'CRT').length;
|
logs.forEach(l => {
|
||||||
$('#stats-area').html(`<span class="me-3">${count} total logs</span> <span class="text-danger">${errs} errors/criticals</span>`);
|
const m = l.time.substring(0, 5);
|
||||||
|
bins[m] = (bins[m] || 0) + 1;
|
||||||
|
});
|
||||||
|
const labels = Object.keys(bins).sort();
|
||||||
|
chart.data.labels = labels;
|
||||||
|
chart.data.datasets[0].data = labels.map(l => bins[l]);
|
||||||
|
chart.resetZoom();
|
||||||
|
chart.update();
|
||||||
}
|
}
|
||||||
|
|
||||||
window.viewMore = function (encoded) {
|
|
||||||
const text = decodeURIComponent(escape(atob(encoded)));
|
|
||||||
$('#modal-body-content').text(text);
|
|
||||||
new bootstrap.Modal('#logModal').show();
|
|
||||||
};
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
+14
@@ -0,0 +1,14 @@
|
|||||||
|
/*!
|
||||||
|
* Chart.js v4.5.1
|
||||||
|
* https://www.chartjs.org
|
||||||
|
* (c) 2025 Chart.js Contributors
|
||||||
|
* Released under the MIT License
|
||||||
|
*/
|
||||||
|
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Chart=e()}(this,(function(){"use strict";var t=Object.freeze({__proto__:null,get Colors(){return Jo},get Decimation(){return ta},get Filler(){return ba},get Legend(){return Ma},get SubTitle(){return Pa},get Title(){return ka},get Tooltip(){return Na}});function e(){}const i=(()=>{let t=0;return()=>t++})();function s(t){return null==t}function n(t){if(Array.isArray&&Array.isArray(t))return!0;const e=Object.prototype.toString.call(t);return"[object"===e.slice(0,7)&&"Array]"===e.slice(-6)}function o(t){return null!==t&&"[object Object]"===Object.prototype.toString.call(t)}function a(t){return("number"==typeof t||t instanceof Number)&&isFinite(+t)}function r(t,e){return a(t)?t:e}function l(t,e){return void 0===t?e:t}const h=(t,e)=>"string"==typeof t&&t.endsWith("%")?parseFloat(t)/100:+t/e,c=(t,e)=>"string"==typeof t&&t.endsWith("%")?parseFloat(t)/100*e:+t;function d(t,e,i){if(t&&"function"==typeof t.call)return t.apply(i,e)}function u(t,e,i,s){let a,r,l;if(n(t))if(r=t.length,s)for(a=r-1;a>=0;a--)e.call(i,t[a],a);else for(a=0;a<r;a++)e.call(i,t[a],a);else if(o(t))for(l=Object.keys(t),r=l.length,a=0;a<r;a++)e.call(i,t[l[a]],l[a])}function f(t,e){let i,s,n,o;if(!t||!e||t.length!==e.length)return!1;for(i=0,s=t.length;i<s;++i)if(n=t[i],o=e[i],n.datasetIndex!==o.datasetIndex||n.index!==o.index)return!1;return!0}function g(t){if(n(t))return t.map(g);if(o(t)){const e=Object.create(null),i=Object.keys(t),s=i.length;let n=0;for(;n<s;++n)e[i[n]]=g(t[i[n]]);return e}return t}function p(t){return-1===["__proto__","prototype","constructor"].indexOf(t)}function m(t,e,i,s){if(!p(t))return;const n=e[t],a=i[t];o(n)&&o(a)?x(n,a,s):e[t]=g(a)}function x(t,e,i){const s=n(e)?e:[e],a=s.length;if(!o(t))return t;const r=(i=i||{}).merger||m;let l;for(let e=0;e<a;++e){if(l=s[e],!o(l))continue;const n=Object.keys(l);for(let e=0,s=n.length;e<s;++e)r(n[e],t,l,i)}return t}function b(t,e){return x(t,e,{merger:_})}function _(t,e,i){if(!p(t))return;const s=e[t],n=i[t];o(s)&&o(n)?b(s,n):Object.prototype.hasOwnProperty.call(e,t)||(e[t]=g(n))}const y={"":t=>t,x:t=>t.x,y:t=>t.y};function v(t){const e=t.split("."),i=[];let s="";for(const t of e)s+=t,s.endsWith("\\")?s=s.slice(0,-1)+".":(i.push(s),s="");return i}function M(t,e){const i=y[e]||(y[e]=function(t){const e=v(t);return t=>{for(const i of e){if(""===i)break;t=t&&t[i]}return t}}(e));return i(t)}function w(t){return t.charAt(0).toUpperCase()+t.slice(1)}const k=t=>void 0!==t,S=t=>"function"==typeof t,P=(t,e)=>{if(t.size!==e.size)return!1;for(const i of t)if(!e.has(i))return!1;return!0};function D(t){return"mouseup"===t.type||"click"===t.type||"contextmenu"===t.type}const C=Math.PI,O=2*C,A=O+C,T=Number.POSITIVE_INFINITY,L=C/180,E=C/2,R=C/4,I=2*C/3,z=Math.log10,F=Math.sign;function V(t,e,i){return Math.abs(t-e)<i}function B(t){const e=Math.round(t);t=V(t,e,t/1e3)?e:t;const i=Math.pow(10,Math.floor(z(t))),s=t/i;return(s<=1?1:s<=2?2:s<=5?5:10)*i}function W(t){const e=[],i=Math.sqrt(t);let s;for(s=1;s<i;s++)t%s==0&&(e.push(s),e.push(t/s));return i===(0|i)&&e.push(i),e.sort(((t,e)=>t-e)).pop(),e}function N(t){return!function(t){return"symbol"==typeof t||"object"==typeof t&&null!==t&&!(Symbol.toPrimitive in t||"toString"in t||"valueOf"in t)}(t)&&!isNaN(parseFloat(t))&&isFinite(t)}function H(t,e){const i=Math.round(t);return i-e<=t&&i+e>=t}function j(t,e,i){let s,n,o;for(s=0,n=t.length;s<n;s++)o=t[s][i],isNaN(o)||(e.min=Math.min(e.min,o),e.max=Math.max(e.max,o))}function $(t){return t*(C/180)}function Y(t){return t*(180/C)}function U(t){if(!a(t))return;let e=1,i=0;for(;Math.round(t*e)/e!==t;)e*=10,i++;return i}function X(t,e){const i=e.x-t.x,s=e.y-t.y,n=Math.sqrt(i*i+s*s);let o=Math.atan2(s,i);return o<-.5*C&&(o+=O),{angle:o,distance:n}}function q(t,e){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))}function K(t,e){return(t-e+A)%O-C}function G(t){return(t%O+O)%O}function J(t,e,i,s){const n=G(t),o=G(e),a=G(i),r=G(o-n),l=G(a-n),h=G(n-o),c=G(n-a);return n===o||n===a||s&&o===a||r>l&&h<c}function Z(t,e,i){return Math.max(e,Math.min(i,t))}function Q(t){return Z(t,-32768,32767)}function tt(t,e,i,s=1e-6){return t>=Math.min(e,i)-s&&t<=Math.max(e,i)+s}function et(t,e,i){i=i||(i=>t[i]<e);let s,n=t.length-1,o=0;for(;n-o>1;)s=o+n>>1,i(s)?o=s:n=s;return{lo:o,hi:n}}const it=(t,e,i,s)=>et(t,i,s?s=>{const n=t[s][e];return n<i||n===i&&t[s+1][e]===i}:s=>t[s][e]<i),st=(t,e,i)=>et(t,i,(s=>t[s][e]>=i));function nt(t,e,i){let s=0,n=t.length;for(;s<n&&t[s]<e;)s++;for(;n>s&&t[n-1]>i;)n--;return s>0||n<t.length?t.slice(s,n):t}const ot=["push","pop","shift","splice","unshift"];function at(t,e){t._chartjs?t._chartjs.listeners.push(e):(Object.defineProperty(t,"_chartjs",{configurable:!0,enumerable:!1,value:{listeners:[e]}}),ot.forEach((e=>{const i="_onData"+w(e),s=t[e];Object.defineProperty(t,e,{configurable:!0,enumerable:!1,value(...eLine truncated
|
||||||
|
/*!
|
||||||
|
* @kurkle/color v0.3.2
|
||||||
|
* https://github.com/kurkle/color#readme
|
||||||
|
* (c) 2023 Jukka Kurkela
|
||||||
|
* Released under the MIT License
|
||||||
|
*/function _t(t){return t+.5|0}const yt=(t,e,i)=>Math.max(Math.min(t,i),e);function vt(t){return yt(_t(2.55*t),0,255)}function Mt(t){return yt(_t(255*t),0,255)}function wt(t){return yt(_t(t/2.55)/100,0,1)}function kt(t){return yt(_t(100*t),0,100)}const St={0:0,1:1,2:2,3:3,4:4,5:5,6:6,7:7,8:8,9:9,A:10,B:11,C:12,D:13,E:14,F:15,a:10,b:11,c:12,d:13,e:14,f:15},Pt=[..."0123456789ABCDEF"],Dt=t=>Pt[15&t],Ct=t=>Pt[(240&t)>>4]+Pt[15&t],Ot=t=>(240&t)>>4==(15&t);function At(t){var e=(t=>Ot(t.r)&&Ot(t.g)&&Ot(t.b)&&Ot(t.a))(t)?Dt:Ct;return t?"#"+e(t.r)+e(t.g)+e(t.b)+((t,e)=>t<255?e(t):"")(t.a,e):void 0}const Tt=/^(hsla?|hwb|hsv)\(\s*([-+.e\d]+)(?:deg)?[\s,]+([-+.e\d]+)%[\s,]+([-+.e\d]+)%(?:[\s,]+([-+.e\d]+)(%)?)?\s*\)$/;function Lt(t,e,i){const s=e*Math.min(i,1-i),n=(e,n=(e+t/30)%12)=>i-s*Math.max(Math.min(n-3,9-n,1),-1);return[n(0),n(8),n(4)]}function Et(t,e,i){const s=(s,n=(s+t/60)%6)=>i-i*e*Math.max(Math.min(n,4-n,1),0);return[s(5),s(3),s(1)]}function Rt(t,e,i){const s=Lt(t,1,.5);let n;for(e+i>1&&(n=1/(e+i),e*=n,i*=n),n=0;n<3;n++)s[n]*=1-e-i,s[n]+=e;return s}function It(t){const e=t.r/255,i=t.g/255,s=t.b/255,n=Math.max(e,i,s),o=Math.min(e,i,s),a=(n+o)/2;let r,l,h;return n!==o&&(h=n-o,l=a>.5?h/(2-n-o):h/(n+o),r=function(t,e,i,s,n){return t===n?(e-i)/s+(e<i?6:0):e===n?(i-t)/s+2:(t-e)/s+4}(e,i,s,h,n),r=60*r+.5),[0|r,l||0,a]}function zt(t,e,i,s){return(Array.isArray(e)?t(e[0],e[1],e[2]):t(e,i,s)).map(Mt)}function Ft(t,e,i){return zt(Lt,t,e,i)}function Vt(t){return(t%360+360)%360}function Bt(t){const e=Tt.exec(t);let i,s=255;if(!e)return;e[5]!==i&&(s=e[6]?vt(+e[5]):Mt(+e[5]));const n=Vt(+e[2]),o=+e[3]/100,a=+e[4]/100;return i="hwb"===e[1]?function(t,e,i){return zt(Rt,t,e,i)}(n,o,a):"hsv"===e[1]?function(t,e,i){return zt(Et,t,e,i)}(n,o,a):Ft(n,o,a),{r:i[0],g:i[1],b:i[2],a:s}}const Wt={x:"dark",Z:"light",Y:"re",X:"blu",W:"gr",V:"medium",U:"slate",A:"ee",T:"ol",S:"or",B:"ra",C:"lateg",D:"ights",R:"in",Q:"turquois",E:"hi",P:"ro",O:"al",N:"le",M:"de",L:"yello",F:"en",K:"ch",G:"arks",H:"ea",I:"ightg",J:"wh"},Nt={OiceXe:"f0f8ff",antiquewEte:"faebd7",aqua:"ffff",aquamarRe:"7fffd4",azuY:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"0",blanKedOmond:"ffebcd",Xe:"ff",XeviTet:"8a2be2",bPwn:"a52a2a",burlywood:"deb887",caMtXe:"5f9ea0",KartYuse:"7fff00",KocTate:"d2691e",cSO:"ff7f50",cSnflowerXe:"6495ed",cSnsilk:"fff8dc",crimson:"dc143c",cyan:"ffff",xXe:"8b",xcyan:"8b8b",xgTMnPd:"b8860b",xWay:"a9a9a9",xgYF:"6400",xgYy:"a9a9a9",xkhaki:"bdb76b",xmagFta:"8b008b",xTivegYF:"556b2f",xSange:"ff8c00",xScEd:"9932cc",xYd:"8b0000",xsOmon:"e9967a",xsHgYF:"8fbc8f",xUXe:"483d8b",xUWay:"2f4f4f",xUgYy:"2f4f4f",xQe:"ced1",xviTet:"9400d3",dAppRk:"ff1493",dApskyXe:"bfff",dimWay:"696969",dimgYy:"696969",dodgerXe:"1e90ff",fiYbrick:"b22222",flSOwEte:"fffaf0",foYstWAn:"228b22",fuKsia:"ff00ff",gaRsbSo:"dcdcdc",ghostwEte:"f8f8ff",gTd:"ffd700",gTMnPd:"daa520",Way:"808080",gYF:"8000",gYFLw:"adff2f",gYy:"808080",honeyMw:"f0fff0",hotpRk:"ff69b4",RdianYd:"cd5c5c",Rdigo:"4b0082",ivSy:"fffff0",khaki:"f0e68c",lavFMr:"e6e6fa",lavFMrXsh:"fff0f5",lawngYF:"7cfc00",NmoncEffon:"fffacd",ZXe:"add8e6",ZcSO:"f08080",Zcyan:"e0ffff",ZgTMnPdLw:"fafad2",ZWay:"d3d3d3",ZgYF:"90ee90",ZgYy:"d3d3d3",ZpRk:"ffb6c1",ZsOmon:"ffa07a",ZsHgYF:"20b2aa",ZskyXe:"87cefa",ZUWay:"778899",ZUgYy:"778899",ZstAlXe:"b0c4de",ZLw:"ffffe0",lime:"ff00",limegYF:"32cd32",lRF:"faf0e6",magFta:"ff00ff",maPon:"800000",VaquamarRe:"66cdaa",VXe:"cd",VScEd:"ba55d3",VpurpN:"9370db",VsHgYF:"3cb371",VUXe:"7b68ee",VsprRggYF:"fa9a",VQe:"48d1cc",VviTetYd:"c71585",midnightXe:"191970",mRtcYam:"f5fffa",mistyPse:"ffe4e1",moccasR:"ffe4b5",navajowEte:"ffdead",navy:"80",Tdlace:"fdf5e6",Tive:"808000",TivedBb:"6b8e23",Sange:"ffa500",SangeYd:"ff4500",ScEd:"da70d6",pOegTMnPd:"eee8aa",pOegYF:"98fb98",pOeQe:"afeeee",pOeviTetYd:"db7093",papayawEp:"ffefd5",pHKpuff:"ffdab9",peru:"cd853f",pRk:"ffc0cb",plum:"dda0dd",powMrXe:"b0e0e6",purpN:"800080",YbeccapurpN:"663399",Yd:"ff0000",Psybrown:"bc8f8f",PyOXe:"4169e1",saddNbPwn:"8b4513",sOmon:"fa8072",sandybPwn:"f4a460",sHgYF:"2e8b57",sHshell:"fff5ee",siFna:"a0522d",silver:"c0c0c0",skyXe:"87ceeb",UXe:"6a5acd",UWay:"708090",UgYy:"708090",snow:"fffafa",sprRggYF:"ff7f",stAlXe:"4682b4",tan:"d2b48c",teO:"8080",tEstN:"d8bfd8",tomato:"ff6347",Qe:"40e0d0",viTet:"ee82ee",JHt:"f5deb3",wEte:"ffffff",wEtesmoke:"f5f5f5",Lw:"ffff00",LwgYF:"9acd32"};let Ht;function jt(t){Ht||(Ht=function(){const t={},e=Object.keys(Nt),i=Object.keys(Wt);let s,n,o,a,r;for(s=0;s<e.length;s++){for(a=r=e[s],n=0;n<i.length;n++)o=i[n],r=r.replace(o,Wt[o]);o=parseInt(Nt[a],16),t[r]=[o>>16&255,o>>8&255,255&o]}return t}(),Ht.transparent=[0,0,0,0]);const e=Ht[t.toLowerCase()];return e&&{r:e[0],g:e[1],b:e[2],a:4===e.length?e[3]:255}}const $t=/^rgba?\(\s*([-+.\d]+)(%)?[\s,]+([-+.e\d]+)(%)?[\s,]+([-+.e\d]+)(%)?(?:[\s,/]+([-+.e\d]+)(%)?)?\s*\)$/;const Yt=t=>t<=.0031308?12.92*t:1.055*Math.pow(t,1/2.4)-.055,Ut=t=>t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4);function Xt(t,e,i){if(t){let s=It(t);s[e]=Math.max(0,Math.min(s[e]+s[e]*i,0===e?360:1)),Line truncated
|
||||||
|
//# sourceMappingURL=chart.umd.min.js.map
|
||||||
Vendored
+7
@@ -0,0 +1,7 @@
|
|||||||
|
/*!
|
||||||
|
* chartjs-plugin-zoom v2.0.1
|
||||||
|
* undefined
|
||||||
|
* (c) 2016-2023 chartjs-plugin-zoom Contributors
|
||||||
|
* Released under the MIT License
|
||||||
|
*/
|
||||||
|
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("chart.js"),require("hammerjs"),require("chart.js/helpers")):"function"==typeof define&&define.amd?define(["chart.js","hammerjs","chart.js/helpers"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).ChartZoom=t(e.Chart,e.Hammer,e.Chart.helpers)}(this,(function(e,t,n){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t);const i=e=>e&&e.enabled&&e.modifierKey,c=(e,t)=>e&&t[e+"Key"],r=(e,t)=>e&&!t[e+"Key"];function s(e,t,n){return void 0===e||("string"==typeof e?-1!==e.indexOf(t):"function"==typeof e&&-1!==e({chart:n}).indexOf(t))}function l(e,t){return"function"==typeof e&&(e=e({chart:t})),"string"==typeof e?{x:-1!==e.indexOf("x"),y:-1!==e.indexOf("y")}:{x:!1,y:!1}}function u(e,t,o){const{mode:a="xy",scaleMode:i,overScaleMode:c}=e||{},r=function({x:e,y:t},n){const o=n.scales,a=Object.keys(o);for(let n=0;n<a.length;n++){const i=o[a[n]];if(t>=i.top&&t<=i.bottom&&e>=i.left&&e<=i.right)return i}return null}(t,o),s=l(a,o),u=l(i,o);if(c){const e=l(c,o);for(const t of["x","y"])e[t]&&(u[t]=s[t],s[t]=!1)}if(r&&u[r.axis])return[r];const m=[];return n.each(o.scales,(function(e){s[e.axis]&&m.push(e)})),m}const m=new WeakMap;function d(e){let t=m.get(e);return t||(t={originalScaleLimits:{},updatedScaleLimits:{},handlers:{},panDelta:{}},m.set(e,t)),t}function f(e,t,n){const o=e.max-e.min,a=o*(t-1),i=e.isHorizontal()?n.x:n.y,c=Math.max(0,Math.min(1,(e.getValueForPixel(i)-e.min)/o||0));return{min:a*c,max:a*(1-c)}}function p(e,t,o,a,i){let c=o[a];if("original"===c){const o=e.originalScaleLimits[t.id][a];c=n.valueOrDefault(o.options,o.scale)}return n.valueOrDefault(c,i)}function h(e,{min:t,max:n},o,a=!1){const i=d(e.chart),{id:c,axis:r,options:s}=e,l=o&&(o[c]||o[r])||{},{minRange:u=0}=l,m=p(i,e,l,"min",-1/0),f=p(i,e,l,"max",1/0),h=a?Math.max(n-t,u):e.max-e.min,x=(h-n+t)/2;return n+=x,(t-=x)<m?(t=m,n=Math.min(m+h,f)):n>f&&(n=f,t=Math.max(f-h,m)),s.min=t,s.max=n,i.updatedScaleLimits[e.id]={min:t,max:n},e.parse(t)!==e.min||e.parse(n)!==e.max}const x=e=>0===e||isNaN(e)?0:e<0?Math.min(Math.round(e),-1):Math.max(Math.round(e),1);const g={second:500,minute:3e4,hour:18e5,day:432e5,week:3024e5,month:1296e6,quarter:5184e6,year:157248e5};function y(e,t,n,o=!1){const{min:a,max:i,options:c}=e,r=c.time&&c.time.round,s=g[r]||0,l=e.getValueForPixel(e.getPixelForValue(a+s)-t),u=e.getValueForPixel(e.getPixelForValue(i+s)-t),{min:m=-1/0,max:d=1/0}=o&&n&&n[e.axis]||{};return!!(isNaN(l)||isNaN(u)||l<m||u>d)||h(e,{min:l,max:u},n,o)}function b(e,t,n){return y(e,t,n,!0)}const v={category:function(e,t,n,o){const a=f(e,t,n);return e.min===e.max&&t<1&&function(e){const t=e.getLabels().length-1;e.min>0&&(e.min-=1),e.max<t&&(e.max+=1)}(e),h(e,{min:e.min+x(a.min),max:e.max-x(a.max)},o,!0)},default:function(e,t,n,o){const a=f(e,t,n);return h(e,{min:e.min+a.min,max:e.max-a.max},o,!0)}},w={default:function(e,t,n,o){h(e,function(e,t,n){const o=e.getValueForPixel(t),a=e.getValueForPixel(n);return{min:Math.min(o,a),max:Math.max(o,a)}}(e,t,n),o,!0)}},z={category:function(e,t,n){const o=e.getLabels().length-1;let{min:a,max:i}=e;const c=Math.max(i-a,1),r=Math.round(function(e){return e.isHorizontal()?e.width:e.height}(e)/Math.max(c,10)),s=Math.round(Math.abs(t/r));let l;return t<-r?(i=Math.min(i+s,o),a=1===c?i:i-c,l=i===o):t>r&&(a=Math.max(0,a-s),i=1===c?a:a+c,l=0===a),h(e,{min:a,max:i},n)||l},default:y,logarithmic:b,timeseries:b};function M(e,t){n.each(e,((n,o)=>{t[o]||delete e[o]}))}function k(e,t){const{scales:o}=e,{originalScaleLimits:a,updatedScaleLimits:i}=t;return n.each(o,(function(e){(function(e,t,n){const{id:o,options:{min:a,max:i}}=e;if(!t[o]||!n[o])return!0;const c=n[o];return c.min!==a||c.max!==i})(e,a,i)&&(a[e.id]={min:{scale:e.min,options:e.options.min},max:{scale:e.max,options:e.options.max}})})),M(a,o),M(i,o),a}function S(e,t,o,a){const i=v[e.type]||v.default;n.callback(i,[e,t,o,a])}function P(e,t,o,a,i){const c=w[e.type]||w.default;n.callback(c,[e,t,o,a,i])}function D(e){const t=e.chartArea;return{x:(t.left+t.right)/2,y:(t.top+t.bottom)/2}}function j(e,t,o="none"){const{x:a=1,y:i=1,focalPoint:c=D(e)}="number"==typeof t?{x:t,y:t}:t,r=d(e),{options:{limits:s,zoom:l}}=r;k(e,r);const m=1!==a,f=1!==i,p=u(l,c,e);n.each(p||e.scales,(function(e){e.isHorizontal()&&m?S(e,a,c,s):!e.isHorizontal()&&f&&S(e,i,c,s)})),e.update(o),n.callback(l.onZoom,[{chart:e}])}function O(e,t,o,a="none"){const i=d(e),{options:{limits:c,zoom:r}}=i,{mode:l="xy"}=r;k(e,i);const u=s(l,"x",e),m=s(l,"y",e);n.each(e.scales,(function(e){e.isHorizontal()&&u?P(e,t.x,o.x,c):!e.isHorizontal()&&m&&P(e,t.y,o.y,c)})),e.update(a),n.callback(r.onZoom,[{chart:e}])}function C(e){const t=d(e);let o=1,a=1;return n.each(e.scales,(function(e){const i=function(e,t){const o=e.originalScaleLimits[t];if(!o)return;const{min:a,max:i}=o;return n.valueOrDefault(i.options,i.scale)-n.valueOrDefault(a.options,a.scale)}(t,e.id);if(i){const t=Math.round(i/(e.max-e.min)*10Line truncated
|
||||||
Reference in new issue
Block a user