734 lines
32 KiB
PHP
734 lines
32 KiB
PHP
<?php // phpcs:ignoreFile
|
|
|
|
require __DIR__ . '/../../session.php';
|
|
require __DIR__ . '/../../userAccess.php';
|
|
|
|
$pageTitle = 'Multi-Chart Trending';
|
|
$pageSubtitle = 'Watch up to eight live tags at once';
|
|
$pageDescription = 'Build a custom grid of synchronized charts, then reorder them to match your shift handoff.';
|
|
$assetBasePath = '../../';
|
|
$layoutWithoutSidebar = true;
|
|
$layoutReturnUrl = '../../overview.php';
|
|
$layoutReturnLabel = 'Back to overview';
|
|
|
|
require __DIR__ . '/../../includes/layout/header.php';
|
|
?>
|
|
|
|
<div class="app-content">
|
|
<section class="data-panel trend-panel">
|
|
<header class="trend-panel__header">
|
|
<div>
|
|
<h2>Multi-chart dashboard</h2>
|
|
<p>Start up to four live charts, synchronize update intervals, and drag cards to reorder the layout.</p>
|
|
</div>
|
|
<span class="trend-status trend-status--stopped">Manual control</span>
|
|
</header>
|
|
|
|
<div class="trend-global-controls">
|
|
<div class="trend-control">
|
|
<label for="globalUpdateInterval">Update interval</label>
|
|
<select id="globalUpdateInterval">
|
|
<option value="5000" selected>Every 5 seconds</option>
|
|
<option value="10000">Every 10 seconds</option>
|
|
<option value="30000">Every 30 seconds</option>
|
|
</select>
|
|
</div>
|
|
<div class="trend-control">
|
|
<label for="globalTimeWindow">Time window</label>
|
|
<select id="globalTimeWindow">
|
|
<option value="10">Last 10 minutes</option>
|
|
<option value="15" selected>Last 15 minutes</option>
|
|
<option value="30">Last 30 minutes</option>
|
|
<option value="60">Last hour</option>
|
|
</select>
|
|
</div>
|
|
<div class="trend-actions">
|
|
<button type="button" class="button button--success" onclick="startAllCharts()">Start all</button>
|
|
<button type="button" class="button button--danger" onclick="stopAllCharts()">Stop all</button>
|
|
<button type="button" class="button button--ghost" onclick="clearAllCharts()">Clear all</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="multi-trend-grid" data-multi-trend-grid>
|
|
<article class="multi-trend-card" id="panel1">
|
|
<header class="multi-trend-card__header">
|
|
<h3 class="multi-trend-card__title" id="title1">Chart 1</h3>
|
|
<span class="trend-status trend-status--stopped" id="status1">STOPPED</span>
|
|
</header>
|
|
<div class="multi-trend-card__controls">
|
|
<div class="trend-control">
|
|
<label for="tagSelect1_1">Primary tag</label>
|
|
<select id="tagSelect1_1">
|
|
<option value="">Loading...</option>
|
|
</select>
|
|
</div>
|
|
<div class="trend-control">
|
|
<label for="tagSelect1_2">Secondary tag</label>
|
|
<select id="tagSelect1_2">
|
|
<option value="">Optional...</option>
|
|
</select>
|
|
</div>
|
|
<div class="trend-actions">
|
|
<button type="button" class="button button--success" onclick="startChart(1)">Start</button>
|
|
<button type="button" class="button button--danger" onclick="stopChart(1)">Stop</button>
|
|
<button type="button" class="button button--ghost" onclick="clearChart(1)">Clear</button>
|
|
</div>
|
|
</div>
|
|
<div class="trend-stat-grid trend-stat-grid--compact">
|
|
<div class="trend-stat">
|
|
<span id="current1_1" class="trend-stat__value">--</span>
|
|
<span class="trend-stat__label">Current 1</span>
|
|
</div>
|
|
<div class="trend-stat">
|
|
<span id="current1_2" class="trend-stat__value trend-stat__value--secondary">--</span>
|
|
<span class="trend-stat__label">Current 2</span>
|
|
</div>
|
|
<div class="trend-stat">
|
|
<span id="points1" class="trend-stat__value">0</span>
|
|
<span class="trend-stat__label">Points</span>
|
|
</div>
|
|
<div class="trend-stat">
|
|
<span id="update1" class="trend-stat__value">--</span>
|
|
<span class="trend-stat__label">Updated</span>
|
|
</div>
|
|
</div>
|
|
<div class="trend-chart trend-chart--compact">
|
|
<canvas id="chart1"></canvas>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="multi-trend-card" id="panel2">
|
|
<header class="multi-trend-card__header">
|
|
<h3 class="multi-trend-card__title" id="title2">Chart 2</h3>
|
|
<span class="trend-status trend-status--stopped" id="status2">STOPPED</span>
|
|
</header>
|
|
<div class="multi-trend-card__controls">
|
|
<div class="trend-control">
|
|
<label for="tagSelect2_1">Primary tag</label>
|
|
<select id="tagSelect2_1">
|
|
<option value="">Loading...</option>
|
|
</select>
|
|
</div>
|
|
<div class="trend-control">
|
|
<label for="tagSelect2_2">Secondary tag</label>
|
|
<select id="tagSelect2_2">
|
|
<option value="">Optional...</option>
|
|
</select>
|
|
</div>
|
|
<div class="trend-actions">
|
|
<button type="button" class="button button--success" onclick="startChart(2)">Start</button>
|
|
<button type="button" class="button button--danger" onclick="stopChart(2)">Stop</button>
|
|
<button type="button" class="button button--ghost" onclick="clearChart(2)">Clear</button>
|
|
</div>
|
|
</div>
|
|
<div class="trend-stat-grid trend-stat-grid--compact">
|
|
<div class="trend-stat">
|
|
<span id="current2_1" class="trend-stat__value">--</span>
|
|
<span class="trend-stat__label">Current 1</span>
|
|
</div>
|
|
<div class="trend-stat">
|
|
<span id="current2_2" class="trend-stat__value trend-stat__value--secondary">--</span>
|
|
<span class="trend-stat__label">Current 2</span>
|
|
</div>
|
|
<div class="trend-stat">
|
|
<span id="points2" class="trend-stat__value">0</span>
|
|
<span class="trend-stat__label">Points</span>
|
|
</div>
|
|
<div class="trend-stat">
|
|
<span id="update2" class="trend-stat__value">--</span>
|
|
<span class="trend-stat__label">Updated</span>
|
|
</div>
|
|
</div>
|
|
<div class="trend-chart trend-chart--compact">
|
|
<canvas id="chart2"></canvas>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="multi-trend-card" id="panel3">
|
|
<header class="multi-trend-card__header">
|
|
<h3 class="multi-trend-card__title" id="title3">Chart 3</h3>
|
|
<span class="trend-status trend-status--stopped" id="status3">STOPPED</span>
|
|
</header>
|
|
<div class="multi-trend-card__controls">
|
|
<div class="trend-control">
|
|
<label for="tagSelect3_1">Primary tag</label>
|
|
<select id="tagSelect3_1">
|
|
<option value="">Loading...</option>
|
|
</select>
|
|
</div>
|
|
<div class="trend-control">
|
|
<label for="tagSelect3_2">Secondary tag</label>
|
|
<select id="tagSelect3_2">
|
|
<option value="">Optional...</option>
|
|
</select>
|
|
</div>
|
|
<div class="trend-actions">
|
|
<button type="button" class="button button--success" onclick="startChart(3)">Start</button>
|
|
<button type="button" class="button button--danger" onclick="stopChart(3)">Stop</button>
|
|
<button type="button" class="button button--ghost" onclick="clearChart(3)">Clear</button>
|
|
</div>
|
|
</div>
|
|
<div class="trend-stat-grid trend-stat-grid--compact">
|
|
<div class="trend-stat">
|
|
<span id="current3_1" class="trend-stat__value">--</span>
|
|
<span class="trend-stat__label">Current 1</span>
|
|
</div>
|
|
<div class="trend-stat">
|
|
<span id="current3_2" class="trend-stat__value trend-stat__value--secondary">--</span>
|
|
<span class="trend-stat__label">Current 2</span>
|
|
</div>
|
|
<div class="trend-stat">
|
|
<span id="points3" class="trend-stat__value">0</span>
|
|
<span class="trend-stat__label">Points</span>
|
|
</div>
|
|
<div class="trend-stat">
|
|
<span id="update3" class="trend-stat__value">--</span>
|
|
<span class="trend-stat__label">Updated</span>
|
|
</div>
|
|
</div>
|
|
<div class="trend-chart trend-chart--compact">
|
|
<canvas id="chart3"></canvas>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="multi-trend-card" id="panel4">
|
|
<header class="multi-trend-card__header">
|
|
<h3 class="multi-trend-card__title" id="title4">Chart 4</h3>
|
|
<span class="trend-status trend-status--stopped" id="status4">STOPPED</span>
|
|
</header>
|
|
<div class="multi-trend-card__controls">
|
|
<div class="trend-control">
|
|
<label for="tagSelect4_1">Primary tag</label>
|
|
<select id="tagSelect4_1">
|
|
<option value="">Loading...</option>
|
|
</select>
|
|
</div>
|
|
<div class="trend-control">
|
|
<label for="tagSelect4_2">Secondary tag</label>
|
|
<select id="tagSelect4_2">
|
|
<option value="">Optional...</option>
|
|
</select>
|
|
</div>
|
|
<div class="trend-actions">
|
|
<button type="button" class="button button--success" onclick="startChart(4)">Start</button>
|
|
<button type="button" class="button button--danger" onclick="stopChart(4)">Stop</button>
|
|
<button type="button" class="button button--ghost" onclick="clearChart(4)">Clear</button>
|
|
</div>
|
|
</div>
|
|
<div class="trend-stat-grid trend-stat-grid--compact">
|
|
<div class="trend-stat">
|
|
<span id="current4_1" class="trend-stat__value">--</span>
|
|
<span class="trend-stat__label">Current 1</span>
|
|
</div>
|
|
<div class="trend-stat">
|
|
<span id="current4_2" class="trend-stat__value trend-stat__value--secondary">--</span>
|
|
<span class="trend-stat__label">Current 2</span>
|
|
</div>
|
|
<div class="trend-stat">
|
|
<span id="points4" class="trend-stat__value">0</span>
|
|
<span class="trend-stat__label">Points</span>
|
|
</div>
|
|
<div class="trend-stat">
|
|
<span id="update4" class="trend-stat__value">--</span>
|
|
<span class="trend-stat__label">Updated</span>
|
|
</div>
|
|
</div>
|
|
<div class="trend-chart trend-chart--compact">
|
|
<canvas id="chart4"></canvas>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.1/dist/chartjs-adapter-moment.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
|
|
|
|
<script>
|
|
// Global variables for multi-chart management
|
|
const charts = {};
|
|
const chartData = {};
|
|
const updateTimers = {};
|
|
const chartStates = {};
|
|
let globalTimeWindow = 15;
|
|
let globalUpdateInterval = 5000;
|
|
let availableTags = [];
|
|
|
|
// Chart configuration template
|
|
function getChartConfig(chartId) {
|
|
return {
|
|
type: 'line',
|
|
data: {
|
|
datasets: [{
|
|
label: 'Primary Tag',
|
|
data: [],
|
|
borderColor: '#3498db',
|
|
backgroundColor: 'rgba(52, 152, 219, 0.1)',
|
|
borderWidth: 2,
|
|
fill: false,
|
|
tension: 0.1,
|
|
pointRadius: 0,
|
|
pointHoverRadius: 0,
|
|
hitRadius: 0,
|
|
yAxisID: 'y1'
|
|
}, {
|
|
label: 'Secondary Tag',
|
|
data: [],
|
|
borderColor: '#27ae60',
|
|
backgroundColor: 'rgba(39, 174, 96, 0.1)',
|
|
borderWidth: 2,
|
|
fill: false,
|
|
tension: 0.1,
|
|
pointRadius: 0,
|
|
pointHoverRadius: 0,
|
|
hitRadius: 0,
|
|
yAxisID: 'y2',
|
|
hidden: true
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
animation: {
|
|
duration: 200
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index'
|
|
},
|
|
scales: {
|
|
x: {
|
|
type: 'time',
|
|
time: {
|
|
unit: 'minute',
|
|
displayFormats: {
|
|
second: 'HH:mm:ss',
|
|
minute: 'HH:mm'
|
|
}
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: `Last ${globalTimeWindow} Minutes`,
|
|
font: { size: 10 }
|
|
},
|
|
min: function() {
|
|
return moment().subtract(globalTimeWindow, 'minutes').toDate();
|
|
},
|
|
max: function() {
|
|
return moment().toDate();
|
|
},
|
|
ticks: {
|
|
font: { size: 9 }
|
|
}
|
|
},
|
|
y1: {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'left',
|
|
title: {
|
|
display: true,
|
|
text: 'Primary',
|
|
color: '#3498db',
|
|
font: { size: 10 }
|
|
},
|
|
grid: {
|
|
drawOnChartArea: true,
|
|
},
|
|
ticks: {
|
|
color: '#3498db',
|
|
font: { size: 9 }
|
|
}
|
|
},
|
|
y2: {
|
|
type: 'linear',
|
|
display: false,
|
|
position: 'right',
|
|
title: {
|
|
display: true,
|
|
text: 'Secondary',
|
|
color: '#27ae60',
|
|
font: { size: 10 }
|
|
},
|
|
grid: {
|
|
drawOnChartArea: false,
|
|
},
|
|
ticks: {
|
|
color: '#27ae60',
|
|
font: { size: 9 }
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
position: 'top',
|
|
labels: {
|
|
font: { size: 10 },
|
|
usePointStyle: true
|
|
}
|
|
},
|
|
tooltip: {
|
|
titleFont: { size: 11 },
|
|
bodyFont: { size: 10 },
|
|
callbacks: {
|
|
title: function(context) {
|
|
return moment(context[0].parsed.x).format('HH:mm:ss');
|
|
},
|
|
label: function(context) {
|
|
return `${context.dataset.label}: ${context.parsed.y.toFixed(2)}`;
|
|
}
|
|
}
|
|
},
|
|
zoom: {
|
|
pan: {
|
|
enabled: true,
|
|
modifierKey: 'ctrl',
|
|
mode: 'x'
|
|
},
|
|
zoom: {
|
|
wheel: { enabled: true, modifierKey: 'shift' },
|
|
pinch: { enabled: true },
|
|
mode: 'x'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
// Initialize all charts
|
|
function initializeCharts() {
|
|
for (let i = 1; i <= 4; i++) {
|
|
const ctx = document.getElementById(`chart${i}`).getContext('2d');
|
|
charts[i] = new Chart(ctx, getChartConfig(i));
|
|
chartData[i] = { primary: [], secondary: [] };
|
|
chartStates[i] = { running: false, timer: null };
|
|
}
|
|
}
|
|
|
|
// Load tags for all dropdowns
|
|
async function loadTags() {
|
|
const pairs = [];
|
|
|
|
for (let i = 1; i <= 4; i++) {
|
|
const primary = document.getElementById(`tagSelect${i}_1`);
|
|
const secondary = document.getElementById(`tagSelect${i}_2`);
|
|
|
|
if (!primary || !secondary) {
|
|
console.error(`Missing tag selectors for chart ${i}.`);
|
|
return;
|
|
}
|
|
|
|
primary.innerHTML = '<option value="">Loading tags...</option>';
|
|
secondary.innerHTML = '<option value="">Loading tags...</option>';
|
|
pairs.push({ primary, secondary });
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('get_tags.php', {
|
|
method: 'GET',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json'
|
|
},
|
|
cache: 'no-cache'
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
if (!(data.success && Array.isArray(data.tags) && data.tags.length > 0)) {
|
|
throw new Error(data.error || 'No tags available');
|
|
}
|
|
|
|
availableTags = data.tags;
|
|
|
|
pairs.forEach(({ primary, secondary }) => {
|
|
primary.innerHTML = '<option value="">Select primary tag...</option>';
|
|
secondary.innerHTML = '<option value="">Select secondary tag...</option>';
|
|
|
|
availableTags.forEach((tag) => {
|
|
if (!tag || !tag.name) {
|
|
return;
|
|
}
|
|
|
|
const option1 = document.createElement('option');
|
|
option1.value = tag.name;
|
|
option1.textContent = tag.name;
|
|
primary.appendChild(option1);
|
|
|
|
const option2 = document.createElement('option');
|
|
option2.value = tag.name;
|
|
option2.textContent = tag.name;
|
|
secondary.appendChild(option2);
|
|
});
|
|
});
|
|
} catch (error) {
|
|
console.error('Failed to load tags for multi-chart:', error);
|
|
pairs.forEach(({ primary, secondary }) => {
|
|
const message = `Error: ${error.message}`;
|
|
primary.innerHTML = `<option value="">${message}</option>`;
|
|
secondary.innerHTML = `<option value="">${message}</option>`;
|
|
});
|
|
}
|
|
}
|
|
|
|
// Fetch data for a specific chart
|
|
async function fetchChartData(chartId) {
|
|
const tag1 = document.getElementById(`tagSelect${chartId}_1`).value;
|
|
const tag2 = document.getElementById(`tagSelect${chartId}_2`).value;
|
|
|
|
if (!tag1) return;
|
|
|
|
try {
|
|
const endTime = moment().format('YYYY-MM-DD HH:mm:ss');
|
|
const startTime = moment().subtract(globalTimeWindow, 'minutes').format('YYYY-MM-DD HH:mm:ss');
|
|
|
|
// Fetch primary tag data
|
|
const data1 = await fetchTagData(tag1);
|
|
if (data1) {
|
|
chartData[chartId].primary = data1;
|
|
charts[chartId].data.datasets[0].data = data1;
|
|
charts[chartId].data.datasets[0].label = tag1;
|
|
}
|
|
|
|
// Fetch secondary tag data if selected
|
|
if (tag2 && tag2 !== tag1) {
|
|
const data2 = await fetchTagData(tag2);
|
|
if (data2) {
|
|
chartData[chartId].secondary = data2;
|
|
charts[chartId].data.datasets[1].data = data2;
|
|
charts[chartId].data.datasets[1].label = tag2;
|
|
charts[chartId].data.datasets[1].hidden = false;
|
|
charts[chartId].options.scales.y2.display = true;
|
|
}
|
|
} else {
|
|
chartData[chartId].secondary = [];
|
|
charts[chartId].data.datasets[1].data = [];
|
|
charts[chartId].data.datasets[1].hidden = true;
|
|
charts[chartId].options.scales.y2.display = false;
|
|
}
|
|
|
|
// Update time axis
|
|
charts[chartId].options.scales.x.min = moment().subtract(globalTimeWindow, 'minutes').toDate();
|
|
charts[chartId].options.scales.x.max = moment().toDate();
|
|
charts[chartId].options.scales.x.title.text = `Last ${globalTimeWindow} Minutes`;
|
|
|
|
charts[chartId].update('none');
|
|
updateChartStats(chartId);
|
|
updateChartTitle(chartId);
|
|
|
|
} catch (error) {
|
|
console.error(`Error fetching data for chart ${chartId}:`, error);
|
|
}
|
|
}
|
|
|
|
// Fetch data for individual tag
|
|
async function fetchTagData(tagName) {
|
|
try {
|
|
const endTime = moment().format('YYYY-MM-DD HH:mm:ss');
|
|
const startTime = moment().subtract(globalTimeWindow, 'minutes').format('YYYY-MM-DD HH:mm:ss');
|
|
|
|
const url = `realtime_data.php?tag=${encodeURIComponent(tagName)}&limit=7200&start_time=${encodeURIComponent(startTime)}&end_time=${encodeURIComponent(endTime)}`;
|
|
const response = await fetch(url);
|
|
const data = await response.json();
|
|
|
|
if (data.success && data.data && data.data.length > 0) {
|
|
return data.data.map(point => ({
|
|
x: new Date(point.x),
|
|
y: point.y
|
|
}));
|
|
}
|
|
return [];
|
|
} catch (error) {
|
|
console.error(`Error fetching data for ${tagName}:`, error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
// Update chart statistics
|
|
function updateChartStats(chartId) {
|
|
const primary = chartData[chartId].primary;
|
|
const secondary = chartData[chartId].secondary;
|
|
|
|
// Primary tag stats
|
|
if (primary.length > 0) {
|
|
const current = primary[primary.length - 1].y;
|
|
document.getElementById(`current${chartId}_1`).textContent = current.toFixed(2);
|
|
} else {
|
|
document.getElementById(`current${chartId}_1`).textContent = '--';
|
|
}
|
|
|
|
// Secondary tag stats
|
|
if (secondary.length > 0) {
|
|
const current = secondary[secondary.length - 1].y;
|
|
document.getElementById(`current${chartId}_2`).textContent = current.toFixed(2);
|
|
} else {
|
|
document.getElementById(`current${chartId}_2`).textContent = '--';
|
|
}
|
|
|
|
// General stats
|
|
document.getElementById(`points${chartId}`).textContent = primary.length + secondary.length;
|
|
document.getElementById(`update${chartId}`).textContent = moment().format('HH:mm:ss');
|
|
}
|
|
|
|
// Update chart title
|
|
function updateChartTitle(chartId) {
|
|
const tag1 = document.getElementById(`tagSelect${chartId}_1`).value;
|
|
const tag2 = document.getElementById(`tagSelect${chartId}_2`).value;
|
|
|
|
let title = `Chart ${chartId}`;
|
|
if (tag1) {
|
|
title += ` - ${tag1}`;
|
|
if (tag2) {
|
|
title += ` & ${tag2}`;
|
|
}
|
|
}
|
|
|
|
document.getElementById(`title${chartId}`).textContent = title;
|
|
}
|
|
|
|
// Start individual chart
|
|
function startChart(chartId) {
|
|
const tag1 = document.getElementById(`tagSelect${chartId}_1`).value;
|
|
if (!tag1) {
|
|
alert(`Please select a primary tag for Chart ${chartId}`);
|
|
return;
|
|
}
|
|
|
|
if (chartStates[chartId].running) return;
|
|
|
|
chartStates[chartId].running = true;
|
|
const statusBadge = document.getElementById(`status${chartId}`);
|
|
if (statusBadge) {
|
|
statusBadge.textContent = 'RUNNING';
|
|
statusBadge.className = 'trend-status trend-status--running';
|
|
}
|
|
|
|
// Initial fetch
|
|
fetchChartData(chartId);
|
|
|
|
// Start timer
|
|
chartStates[chartId].timer = setInterval(() => {
|
|
fetchChartData(chartId);
|
|
}, globalUpdateInterval);
|
|
|
|
}
|
|
|
|
// Stop individual chart
|
|
function stopChart(chartId) {
|
|
if (!chartStates[chartId].running) return;
|
|
|
|
chartStates[chartId].running = false;
|
|
const statusBadge = document.getElementById(`status${chartId}`);
|
|
if (statusBadge) {
|
|
statusBadge.textContent = 'STOPPED';
|
|
statusBadge.className = 'trend-status trend-status--stopped';
|
|
}
|
|
|
|
if (chartStates[chartId].timer) {
|
|
clearInterval(chartStates[chartId].timer);
|
|
chartStates[chartId].timer = null;
|
|
}
|
|
|
|
}
|
|
|
|
// Clear individual chart
|
|
function clearChart(chartId) {
|
|
stopChart(chartId);
|
|
|
|
chartData[chartId] = { primary: [], secondary: [] };
|
|
charts[chartId].data.datasets[0].data = [];
|
|
charts[chartId].data.datasets[1].data = [];
|
|
charts[chartId].data.datasets[1].hidden = true;
|
|
charts[chartId].options.scales.y2.display = false;
|
|
charts[chartId].update();
|
|
|
|
// Reset stats
|
|
document.getElementById(`current${chartId}_1`).textContent = '--';
|
|
document.getElementById(`current${chartId}_2`).textContent = '--';
|
|
document.getElementById(`points${chartId}`).textContent = '0';
|
|
document.getElementById(`update${chartId}`).textContent = '--';
|
|
|
|
// Reset title
|
|
document.getElementById(`title${chartId}`).textContent = `Chart ${chartId}`;
|
|
}
|
|
|
|
// Global controls
|
|
function startAllCharts() {
|
|
for (let i = 1; i <= 4; i++) {
|
|
const tag1 = document.getElementById(`tagSelect${i}_1`).value;
|
|
if (tag1) {
|
|
startChart(i);
|
|
}
|
|
}
|
|
}
|
|
|
|
function stopAllCharts() {
|
|
for (let i = 1; i <= 4; i++) {
|
|
stopChart(i);
|
|
}
|
|
}
|
|
|
|
function clearAllCharts() {
|
|
for (let i = 1; i <= 4; i++) {
|
|
clearChart(i);
|
|
}
|
|
}
|
|
|
|
// Handle global setting changes
|
|
document.getElementById('globalUpdateInterval').addEventListener('change', function() {
|
|
globalUpdateInterval = parseInt(this.value);
|
|
|
|
// Update all running charts
|
|
for (let i = 1; i <= 4; i++) {
|
|
if (chartStates[i].running) {
|
|
stopChart(i);
|
|
setTimeout(() => startChart(i), 100);
|
|
}
|
|
}
|
|
});
|
|
|
|
document.getElementById('globalTimeWindow').addEventListener('change', function() {
|
|
globalTimeWindow = parseInt(this.value);
|
|
|
|
// Update all charts
|
|
for (let i = 1; i <= 4; i++) {
|
|
charts[i].options.scales.x.title.text = `Last ${globalTimeWindow} Minutes`;
|
|
if (chartStates[i].running) {
|
|
fetchChartData(i);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Initialize everything on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initializeCharts();
|
|
loadTags();
|
|
|
|
const grid = document.querySelector('[data-multi-trend-grid]');
|
|
if (!grid) {
|
|
console.warn('Multi-trend grid not found for drag-and-drop.');
|
|
return;
|
|
}
|
|
|
|
Sortable.create(grid, {
|
|
animation: 150,
|
|
handle: '.multi-trend-card__header',
|
|
draggable: '.multi-trend-card'
|
|
});
|
|
});
|
|
|
|
// Cleanup on page unload
|
|
window.addEventListener('beforeunload', function() {
|
|
stopAllCharts();
|
|
});
|
|
</script>
|
|
|
|
<?php require __DIR__ . '/../../includes/layout/footer.php'; ?>
|