Skip to content

Commit c2e5241

Browse files
codeperfectpluscodeperfectplus
committed
Refactor chart creation and add download and refresh buttons
This commit refactors the createChart function in graphs_experimental.js to improve code readability and maintainability. It also adds download and refresh buttons to the charts for better user experience.
1 parent ae2c54f commit c2e5241

2 files changed

Lines changed: 47 additions & 65 deletions

File tree

‎src/static/js/graphs_experimental.js‎

Lines changed: 47 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -38,51 +38,10 @@ function fetchDataAndRenderCharts() {
3838

3939
// Add event listener to refresh data when filter value changes
4040
document.getElementById('timeFilter').addEventListener('change', (event) => {
41-
// Save the new filter value to local storage
4241
localStorage.setItem('filterValue', event.target.value);
43-
// Fetch data with the new filter value
4442
fetchDataAndRenderCharts();
4543
});
4644

47-
// Initial fetch when the page loads
48-
document.addEventListener('DOMContentLoaded', () => {
49-
fetchDataAndRenderCharts();
50-
});
51-
52-
// Add the refresh button to fetch the data
53-
document.getElementById('refreshData').addEventListener('click', () => {
54-
fetchDataAndRenderCharts();
55-
});
56-
57-
document.getElementById('refreshCpuTime').addEventListener('click', () => {
58-
fetchDataAndRenderCharts();
59-
});
60-
61-
document.getElementById('refreshMemoryTime').addEventListener('click', () => {
62-
fetchDataAndRenderCharts();
63-
});
64-
65-
document.getElementById('refreshBatteryTime').addEventListener('click', () => {
66-
fetchDataAndRenderCharts();
67-
});
68-
69-
document.getElementById('refreshNetworkTime').addEventListener('click', () => {
70-
fetchDataAndRenderCharts();
71-
});
72-
73-
document.getElementById('refreshDashboardMemoryTime').addEventListener('click', () => {
74-
fetchDataAndRenderCharts();
75-
});
76-
77-
document.getElementById('refreshCpuFrequencyTime').addEventListener('click', () => {
78-
fetchDataAndRenderCharts();
79-
});
80-
81-
document.getElementById('refreshCurrentTempTime').addEventListener('click', () => {
82-
fetchDataAndRenderCharts();
83-
});
84-
85-
8645
function formatDate(utcTime, timeZone) {
8746
const date = new Date(utcTime);
8847

@@ -129,6 +88,24 @@ function createChart(ctx, labels, datasets, yLabel) {
12988
ctx.chart.destroy(); // Destroy the existing chart if it exists
13089
}
13190

91+
// Ensure the parent element is positioned relatively
92+
ctx.canvas.parentNode.style.position = 'relative';
93+
94+
// Create or update download button
95+
getOrCreateButton(ctx.canvas.parentNode, 'Download Chart', 'download-button', (e) => {
96+
const fileName = `${yLabel.replace(/\s+/g, '_')}_chart.png`; // Dynamic filename
97+
console.log('Download button clicked');
98+
const link = document.createElement('a');
99+
link.href = ctx.chart.toBase64Image();
100+
link.download = fileName;
101+
link.click();
102+
}, { top: '10px', right: '10px' });
103+
104+
// Create or update refresh button
105+
getOrCreateButton(ctx.canvas.parentNode, 'Refresh Data', 'refresh-button', () => {
106+
fetchDataAndRenderCharts();
107+
}, { top: '10px', right: '200px' });
108+
132109
const allDataPoints = datasets.flatMap(dataset => dataset.data);
133110
const minY = Math.min(...allDataPoints.filter(value => typeof value === 'number'));
134111
const maxY = Math.max(...allDataPoints.filter(value => typeof value === 'number'));
@@ -152,20 +129,25 @@ function createChart(ctx, labels, datasets, yLabel) {
152129
responsive: true,
153130
scales: {
154131
x: {
155-
type: 'category',
156-
title: {
157-
display: true,
158-
text: 'Time'
159-
},
132+
type: 'category',
133+
// title: {
134+
// display: true,
135+
// text: 'Time',
136+
// font: {
137+
// size: 16,
138+
// weight: 'bold'
139+
// },
140+
// padding: { top: 10, left: 0, right: 0, bottom: 0 }
141+
// },
160142
ticks: {
161-
autoSkip: true,
162-
maxTicksLimit: 6,
163-
maxRotation: 0,
143+
autoSkip: true,
144+
maxTicksLimit: 6,
145+
maxRotation: 0,
164146
minRotation: 0,
165147
}
166148
},
167149
y: {
168-
beginAtZero: minY < 0 ? false : true, // Adjust y-axis based on data
150+
beginAtZero: minY < 0 ? false : true,
169151
title: {
170152
display: true,
171153
text: yLabel,
@@ -176,6 +158,21 @@ function createChart(ctx, labels, datasets, yLabel) {
176158
});
177159
}
178160

161+
// Helper function to create or retrieve a button
162+
function getOrCreateButton(parent, text, className, onClick, position) {
163+
let button = parent.querySelector(`.${className}`);
164+
if (!button) {
165+
button = document.createElement('button');
166+
button.classList.add(className);
167+
button.textContent = text;
168+
button.style.position = 'absolute';
169+
button.style.zIndex = '5';
170+
Object.assign(button.style, position); // Apply positioning styles
171+
parent.appendChild(button);
172+
}
173+
button.onclick = onClick; // Update the click handler
174+
return button;
175+
}
179176

180177
// Function to create charts with the fetched data
181178
function createCharts(cpuData, timeData, memoryData, batteryData, networkSentData, networkReceivedData, dashboardMemoryUsageData, cpuFrequencyData, currentTempData) {

‎src/templates/experimental/graphs.html‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -57,17 +57,13 @@ <h2><i class="fas fa-clock"></i> Current Server Time & Time Zone</h2>
5757
<div class="cpu-usage col-md-6">
5858
<div class="section-header d-flex justify-content-between align-items-center">
5959
<h2><i class="fas fa-microchip"></i> CPU Usage </h2>
60-
<button id="refreshCpuTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh CPU
61-
Graph</button>
6260
</div>
6361
<canvas id="cpuTimeChart"></canvas>
6462
</div>
6563

6664
<div class="memory-usage col-md-6">
6765
<div class="section-header d-flex justify-content-between align-items-center">
6866
<h2><i class="fas fa-memory"></i> Memory Usage </h2>
69-
<button id="refreshMemoryTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh Memory
70-
Graph</button>
7167
</div>
7268
<canvas id="memoryTimeChart"></canvas>
7369
</div>
@@ -77,17 +73,13 @@ <h2><i class="fas fa-memory"></i> Memory Usage </h2>
7773
<div class="cpu-temperature col-md-6">
7874
<div class="section-header d-flex justify-content-between align-items-center">
7975
<h2><i class="fas fa-thermometer-half"></i> Current Temperature</h2>
80-
<button id="refreshCurrentTempTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh
81-
Temperature Graph</button>
8276
</div>
8377
<canvas id="currentTempTimeChart"></canvas>
8478
</div>
8579

8680
<div class="cpu-frequency col-md-6">
8781
<div class="section-header d-flex justify-content-between align-items-center">
8882
<h2><i class="fas fa-microchip"></i> CPU Frequency</h2>
89-
<button id="refreshCpuFrequencyTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh CPU
90-
Frequency Graph</button>
9183
</div>
9284
<canvas id="cpuFrequencyTimeChart"></canvas>
9385
</div>
@@ -97,17 +89,13 @@ <h2><i class="fas fa-microchip"></i> CPU Frequency</h2>
9789
<div class="battery-usage col-md-6">
9890
<div class="section-header d-flex justify-content-between align-items-center">
9991
<h2><i class="fas fa-battery-half"></i> Battery Percentage</h2>
100-
<button id="refreshBatteryTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh Battery
101-
Graph</button>
10292
</div>
10393
<canvas id="batteryTimeChart"></canvas>
10494
</div>
10595

10696
<div class="network-usage col-md-6">
10797
<div class="section-header d-flex justify-content-between align-items-center">
10898
<h2><i class="fas fa-network-wired"></i> Network Sent & Received</h2>
109-
<button id="refreshNetworkTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh Network
110-
Graph</button>
11199
</div>
112100
<canvas id="networkTimeChart"></canvas>
113101
</div>
@@ -117,12 +105,9 @@ <h2><i class="fas fa-network-wired"></i> Network Sent & Received</h2>
117105
<div class="dashboard-memory-usage col-md-6">
118106
<div class="section-header d-flex justify-content-between align-items-center">
119107
<h2><i class="fas fa-memory"></i>Memory Usage(APP)</h2>
120-
<button id="refreshDashboardMemoryTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh
121-
Dashboard Memory Graph</button>
122108
</div>
123109
<canvas id="dashboardMemoryTimeChart"></canvas>
124110
</div>
125-
126111
</div>
127112

128113
{% endblock %}

0 commit comments

Comments
 (0)