rev2
This commit is contained in:
2 files changed
+138
-148
No files matched your search
+131
-148
@@ -4,12 +4,13 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Log Analytics Dashboard</title>
|
||||
<title>Log Viewer // Grafana Style</title>
|
||||
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">
|
||||
<script src="js/lucide.min.js"></script>
|
||||
<script src="js/chart.js"></script>
|
||||
<script src="js/chartjs-plugin-zoom.min.js"></script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
@@ -24,7 +25,7 @@
|
||||
background-color: var(--bg-dark);
|
||||
color: #f1f5f9;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.82rem;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -61,7 +62,8 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 2px;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.75rem;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
@@ -82,109 +84,104 @@
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
padding: 0.75rem 1.5rem;
|
||||
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 */
|
||||
.chart-container {
|
||||
height: 180px;
|
||||
background: #111827;
|
||||
/* Chart Area - Styled like Grafana */
|
||||
.chart-section {
|
||||
height: 200px;
|
||||
background: #0b0e14;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Stats & Toggles */
|
||||
.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: 600;
|
||||
padding: 4px 10px;
|
||||
font-weight: 700;
|
||||
padding: 4px 12px;
|
||||
margin-right: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn-check:not(:checked)+.btn {
|
||||
opacity: 0.2;
|
||||
opacity: 0.15;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
.btn-dbg {
|
||||
background: #0ea5e9;
|
||||
color: white;
|
||||
background: #38bdf8;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-inf {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
background: #4ade80;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-wrn {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
background: #fbbf24;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-err {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
background: #f87171;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.content-area {
|
||||
flex-grow: 1;
|
||||
padding: 1.25rem;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: var(--card-dark);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
table.dataTable thead th {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
background: #111827;
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
padding: 10px 15px !important;
|
||||
letter-spacing: 0.5px;
|
||||
color: #94a3b8;
|
||||
border-bottom: 1px solid var(--border-color) !important;
|
||||
}
|
||||
|
||||
.lvl-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.row-INF .lvl-indicator {
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
.row-ERR .lvl-indicator {
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
.row-DBG .lvl-indicator {
|
||||
background: #0ea5e9;
|
||||
}
|
||||
|
||||
.row-WRN .lvl-indicator {
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background: #0f172a;
|
||||
border: 1px solid var(--border-color);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
padding: 4px 10px;
|
||||
padding: 4px 12px;
|
||||
font-size: 0.8rem;
|
||||
width: 250px;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.range-info {
|
||||
font-size: 0.75rem;
|
||||
color: var(--brand-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -193,11 +190,13 @@
|
||||
|
||||
<div class="wrapper">
|
||||
<aside>
|
||||
<div class="sidebar-header">
|
||||
<h6 class="mb-3"><i data-lucide="activity" class="text-success me-2"></i>LogViewer Pro</h6>
|
||||
<button class="btn btn-sm btn-outline-secondary w-100"
|
||||
<div class="sidebar-header text-center">
|
||||
<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
|
||||
</h6>
|
||||
<button class="btn btn-sm btn-outline-primary w-100 mb-2"
|
||||
onclick="document.getElementById('dir-input').click()">
|
||||
<i data-lucide="folder" size="14"></i> Load Directory
|
||||
<i data-lucide="plus" size="14"></i> Select Project Folder
|
||||
</button>
|
||||
<input type="file" id="dir-input" webkitdirectory hidden>
|
||||
</div>
|
||||
@@ -206,38 +205,41 @@
|
||||
|
||||
<main>
|
||||
<div class="top-bar">
|
||||
<div class="level-toggles" id="filter-buttons">
|
||||
<div class="level-toggles">
|
||||
<input type="checkbox" class="btn-check" id="toggle-DBG" checked value="DBG">
|
||||
<label class="btn btn-dbg" for="toggle-DBG">DBG <span id="count-DBG">0</span></label>
|
||||
<label class="btn btn-dbg" for="toggle-DBG">DBG</label>
|
||||
<input type="checkbox" class="btn-check" id="toggle-INF" checked value="INF">
|
||||
<label class="btn btn-inf" for="toggle-INF">INF <span id="count-INF">0</span></label>
|
||||
<label class="btn btn-inf" for="toggle-INF">INF</label>
|
||||
<input type="checkbox" class="btn-check" id="toggle-WRN" checked value="WRN">
|
||||
<label class="btn btn-wrn" for="toggle-WRN">WRN <span id="count-WRN">0</span></label>
|
||||
<label class="btn btn-wrn" for="toggle-WRN">WRN</label>
|
||||
<input type="checkbox" class="btn-check" id="toggle-ERR" checked value="ERR">
|
||||
<label class="btn btn-err" for="toggle-ERR">ERR <span id="count-ERR">0</span></label>
|
||||
<label class="btn btn-err" for="toggle-ERR">ERR</label>
|
||||
<span id="range-display" class="range-info ms-3"></span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-3">
|
||||
<input type="text" id="global-search" class="search-input" placeholder="Search RegEx...">
|
||||
<button class="btn btn-link text-white p-0" id="reset-filter" title="Reset Filters">
|
||||
<i data-lucide="rotate-ccw" size="18"></i>
|
||||
<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 class="chart-container">
|
||||
<div class="chart-section">
|
||||
<span class="chart-hint"><i data-lucide="mouse-pointer-2" size="10"></i> Drag to select time
|
||||
range</span>
|
||||
<canvas id="intensityChart"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="content-area">
|
||||
<div class="table-container">
|
||||
<div class="table-container shadow-lg">
|
||||
<table id="log-table" class="table table-dark table-hover table-sm w-100">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="30"></th>
|
||||
<th width="90">Level</th>
|
||||
<th width="80">Level</th>
|
||||
<th width="120">Time</th>
|
||||
<th>Message</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
@@ -247,17 +249,6 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="logModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered">
|
||||
<div class="modal-content bg-dark border-secondary">
|
||||
<div class="modal-body p-0">
|
||||
<pre id="modal-content" class="m-0 p-4 text-info"
|
||||
style="font-size: 0.8rem; background: #000;"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/jquery-3.7.0.min.js"></script>
|
||||
<script src="js/jquery.dataTables.min.js"></script>
|
||||
<script src="js/dataTables.bootstrap5.min.js"></script>
|
||||
@@ -266,92 +257,104 @@
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
let chart;
|
||||
let rawData = [];
|
||||
let selectedTimeRange = null; // {start: 'HH:mm', end: 'HH:mm'}
|
||||
|
||||
$(document).ready(function () {
|
||||
const table = $('#log-table').DataTable({
|
||||
dom: 'rtip',
|
||||
pageLength: 100,
|
||||
pageLength: 50,
|
||||
order: [[2, 'desc']],
|
||||
columns: [
|
||||
{
|
||||
className: 'text-center opacity-50',
|
||||
orderable: false,
|
||||
data: null,
|
||||
render: (d, t, row) => row.exception ? '<i data-lucide="plus-square" size="14"></i>' : ''
|
||||
},
|
||||
{ data: null, orderable: false, render: () => `<i data-lucide="more-horizontal" size="14" style="opacity:0.3"></i>` },
|
||||
{
|
||||
data: 'level',
|
||||
render: l => `<span class="lvl-indicator"></span><strong>${l}</strong>`
|
||||
render: l => `<span class="badge w-100 btn-${l.toLowerCase()}">${l}</span>`
|
||||
},
|
||||
{ data: 'time' },
|
||||
{
|
||||
data: 'message',
|
||||
render: m => `<span class="text-truncate d-block" style="max-width: 900px;">${m}</span>`
|
||||
}
|
||||
{ data: 'message', render: m => `<span class="text-truncate d-block" style="max-width: 900px">${m}</span>` }
|
||||
],
|
||||
createdRow: (row, data) => $(row).addClass('row-' + data.level),
|
||||
drawCallback: () => lucide.createIcons()
|
||||
});
|
||||
|
||||
// Search & Reset
|
||||
$('#global-search').on('keyup', function () { table.search(this.value, true, false).draw(); });
|
||||
$('#reset-filter').on('click', () => {
|
||||
$('#global-search').val('');
|
||||
table.search('').column(2).search('').draw();
|
||||
});
|
||||
|
||||
// Initialize Chart.js
|
||||
// Chart.js Configuration
|
||||
const ctx = document.getElementById('intensityChart').getContext('2d');
|
||||
chart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80' }] },
|
||||
data: { labels: [], datasets: [{ data: [], backgroundColor: '#4ade80', borderRadius: 2, barPercentage: 0.8 }] },
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { legend: { display: false }, tooltip: { mode: 'index', intersect: false } },
|
||||
scales: {
|
||||
x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } },
|
||||
y: { beginAtZero: true, grid: { color: '#334155' }, ticks: { color: '#64748b' } }
|
||||
y: { beginAtZero: true, ticks: { color: '#475569' }, grid: { color: '#1e293b' } }
|
||||
},
|
||||
onClick: (e, activeEls) => {
|
||||
if (activeEls.length > 0) {
|
||||
const index = activeEls[0].index;
|
||||
const label = chart.data.labels[index];
|
||||
// Filter table by the HH:mm from the chart
|
||||
table.column(2).search('^' + label, true, false).draw();
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Level Toggles
|
||||
$('.btn-check').on('change', () => table.draw());
|
||||
// Custom Table Filter for Levels + Time Range
|
||||
$.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
|
||||
const level = data[1];
|
||||
const checked = $('.btn-check:checked').map((i, el) => $(el).val()).get();
|
||||
return checked.includes(level);
|
||||
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;
|
||||
});
|
||||
|
||||
// Directory Handler
|
||||
// Search & Reset
|
||||
$('#global-search').on('keyup', function () { table.search(this.value, true, false).draw(); });
|
||||
$('#reset-all').on('click', () => {
|
||||
chart.resetZoom();
|
||||
selectedTimeRange = null;
|
||||
$('#range-display').text('');
|
||||
$('#global-search').val('');
|
||||
table.search('').draw();
|
||||
});
|
||||
|
||||
$('.btn-check').on('change', () => table.draw());
|
||||
|
||||
// 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((file, idx) => {
|
||||
list.append(`<div class="file-item" onclick="loadLog(${idx})"><span>${file.name}</span></div>`);
|
||||
});
|
||||
files.forEach((f, i) => list.append(`<div class="file-item" onclick="loadLog(${i})"><span>${f.name}</span></div>`));
|
||||
window.loadedFiles = files;
|
||||
});
|
||||
|
||||
window.loadLog = function (idx) {
|
||||
$('.file-item').removeClass('active').eq(idx).addClass('active');
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
reader.onload = e => {
|
||||
const logs = parseLogs(e.target.result);
|
||||
rawData = logs;
|
||||
table.clear().rows.add(logs).draw();
|
||||
updateChart(logs);
|
||||
updateCounts(logs);
|
||||
};
|
||||
reader.readAsText(window.loadedFiles[idx]);
|
||||
};
|
||||
@@ -359,46 +362,26 @@
|
||||
function parseLogs(text) {
|
||||
const lines = text.split(/\r?\n/);
|
||||
const logs = [];
|
||||
const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/;
|
||||
|
||||
const regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/;
|
||||
lines.forEach(line => {
|
||||
const match = line.match(headerRegex);
|
||||
if (match) {
|
||||
logs.push({ time: match[1], level: match[2], message: match[3], exception: "" });
|
||||
} else if (logs.length > 0) {
|
||||
logs[logs.length - 1].exception += line + "\n";
|
||||
}
|
||||
const match = line.match(regex);
|
||||
if (match) logs.push({ time: match[1], level: match[2], message: match[3] });
|
||||
});
|
||||
return logs;
|
||||
}
|
||||
|
||||
function updateChart(logs) {
|
||||
// Bin logs by Minute (HH:mm)
|
||||
const bins = {};
|
||||
logs.forEach(l => {
|
||||
const min = l.time.substring(0, 5); // Get HH:mm
|
||||
bins[min] = (bins[min] || 0) + 1;
|
||||
const m = l.time.substring(0, 5);
|
||||
bins[m] = (bins[m] || 0) + 1;
|
||||
});
|
||||
|
||||
const labels = Object.keys(bins).sort();
|
||||
const data = labels.map(l => bins[l]);
|
||||
|
||||
chart.data.labels = labels;
|
||||
chart.data.datasets[0].data = data;
|
||||
chart.data.datasets[0].data = labels.map(l => bins[l]);
|
||||
chart.resetZoom();
|
||||
chart.update();
|
||||
}
|
||||
|
||||
function updateCounts(logs) {
|
||||
const counts = { DBG: 0, INF: 0, WRN: 0, ERR: 0 };
|
||||
logs.forEach(l => { if (counts[l.level] !== undefined) counts[l.level]++; });
|
||||
Object.keys(counts).forEach(lvl => $(`#count-${lvl}`).text(counts[lvl]));
|
||||
}
|
||||
|
||||
$('#log-table tbody').on('click', 'tr', function () {
|
||||
const data = table.row(this).data();
|
||||
$('#modal-content').text(`[${data.time}] [${data.level}] ${data.message}\n\n${data.exception}`);
|
||||
new bootstrap.Modal('#logModal').show();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
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