Skip to content

Commit 85fcac8

Browse files
codeperfectpluscodeperfectplus
committed
chore: 🎨 graph page improved
1 parent 1bf430d commit 85fcac8

2 files changed

Lines changed: 85 additions & 111 deletions

File tree

‎src/static/js/graphs.js‎

Lines changed: 44 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,14 @@ function fetchDataAndRenderCharts() {
2323
const dashboardMemoryUsageData = data.dashboard_memory_usage;
2424
const cpuFrequencyData = data.cpu_frequency;
2525
const currentTempData = data.current_temp;
26+
27+
// current time from backend to display
2628
const currentTime = data.current_time;
2729
const timeZoneName = Intl.DateTimeFormat().resolvedOptions().timeZone;
30+
displayTimeAndTimeZone(currentTime, timeZoneName);
2831

2932
// Format the time data using the currentTime from backend
30-
const timeData = data.time.map(time => formatDate(time, currentTime));
31-
32-
displayTimeAndTimeZone(currentTime, timeZoneName);
33+
const timeData = data.time.map(time => formatDate(time, timeZoneName)); // Use timeZoneName from displayTimeAndTimeZone function
3334

3435
createCharts(cpuData, timeData, memoryData, batteryData, networkSentData, networkReceivedData, dashboardMemoryUsageData, cpuFrequencyData, currentTempData);
3536
})
@@ -82,52 +83,25 @@ document.getElementById('refreshCurrentTempTime').addEventListener('click', () =
8283
fetchDataAndRenderCharts();
8384
});
8485

85-
86-
function formatDate(dateString, currentTime) {
87-
const date = new Date(dateString);
88-
const now = new Date(currentTime); // Use currentTime from backend
89-
90-
// Helper function to format with leading zeros
91-
const pad = (num) => String(num).padStart(2, '0');
92-
93-
// Manually extract UTC components
94-
const day = pad(date.getUTCDate()); // e.g., 09
95-
const month = pad(date.getUTCMonth() + 1); // e.g., 04
96-
const year = date.getUTCFullYear(); // e.g., 2021
97-
const hours = pad(date.getUTCHours()); // e.g., 11
98-
const minutes = pad(date.getUTCMinutes()); // e.g., 33
99-
100-
101-
// Calculate time differences
102-
const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
103-
const diffWeeks = Math.floor(diffDays / 7);
104-
const diffMonths = now.getMonth() - date.getUTCMonth() + (12 * (now.getFullYear() - date.getUTCFullYear()));
105-
const diffYears = now.getFullYear() - date.getUTCFullYear();
106-
107-
// Determine the label based on time differences
108-
// // Reset the time to 12am for the date comparison
109-
// date.setUTCHours(0, 0, 0, 0);
110-
// now.setUTCHours(0, 0, 0, 0);
111-
112-
// if (diffDays === 0) {
113-
// return `Today ${hours}:${minutes}`;
114-
// } else if (diffDays === 1) {
115-
// return `Yesterday ${hours}:${minutes}`;
116-
// } else if (diffDays <= 3) {
117-
// return `${diffDays} Days Ago ${hours}:${minutes}`;
118-
// } else if (diffDays <= 7) {
119-
// return `${Math.ceil(diffDays / 7)} Week${diffDays > 7 ? 's' : ''} Ago ${hours}:${minutes}`;
120-
// } else if (diffDays <= 30) {
121-
// return `${Math.ceil(diffDays / 7)} Weeks Ago ${hours}:${minutes}`;
122-
// } else if (diffMonths < 12) {
123-
// return `${diffMonths} Month${diffMonths > 1 ? 's' : ''} Ago ${hours}:${minutes}`;
124-
// } else if (diffYears < 2) {
125-
// return `Last Year ${hours}:${minutes}`;
126-
// } else {
127-
// return `${year}/${month}/${day} ${hours}:${minutes}`;
128-
// }
129-
130-
return `${year}/${month}/${day} ${hours}:${minutes}`;
86+
function formatDate(utcTime, timeZone) {
87+
const date = new Date(utcTime);
88+
89+
// Format options can be adjusted for your needs
90+
const options = {
91+
timeZone: timeZone,
92+
year: 'numeric',
93+
month: '2-digit',
94+
day: '2-digit',
95+
hour: '2-digit',
96+
minute: '2-digit',
97+
hour12: false // Change to true if you prefer 12-hour format
98+
};
99+
100+
// Generate formatted string
101+
const formattedDate = date.toLocaleString('en-US', options);
102+
103+
// For better graph display, you might want just the date and hour
104+
return formattedDate.replace(/, (\d{2}:\d{2})/, ' $1'); // Example: "09/22/2024 14:30"
131105
}
132106

133107
function displayTimeAndTimeZone(currentTime, timeZoneName) {
@@ -155,13 +129,27 @@ function createChart(ctx, labels, datasets, yLabel) {
155129
ctx.chart.destroy(); // Destroy the existing chart if it exists
156130
}
157131

132+
const allDataPoints = datasets.flatMap(dataset => dataset.data);
133+
const minY = Math.min(...allDataPoints.filter(value => typeof value === 'number'));
134+
const maxY = Math.max(...allDataPoints.filter(value => typeof value === 'number'));
135+
158136
ctx.chart = new Chart(ctx, {
159137
type: 'line',
160138
data: {
161-
labels: labels, // Use your timeData directly as labels
162-
datasets: datasets
139+
labels: labels,
140+
datasets: datasets.map(dataset => ({
141+
...dataset,
142+
borderWidth: 2,
143+
fill: false,
144+
tension: 0.3,
145+
pointRadius: 5,
146+
pointHoverRadius: 7,
147+
backgroundColor: dataset.backgroundColor || 'rgba(75, 192, 192, 0.2)',
148+
borderColor: dataset.borderColor || 'rgba(75, 192, 192, 1)',
149+
})),
163150
},
164151
options: {
152+
165153
scales: {
166154
x: {
167155
type: 'category',
@@ -171,17 +159,17 @@ function createChart(ctx, labels, datasets, yLabel) {
171159
},
172160
ticks: {
173161
autoSkip: true,
174-
maxTicksLimit: 10,
175-
maxRotation: 20,
162+
maxTicksLimit: 6,
163+
maxRotation: 0,
176164
minRotation: 0,
177165
}
178166
},
179167
y: {
180-
beginAtZero: true,
168+
beginAtZero: minY < 0 ? false : true, // Adjust y-axis based on data
181169
title: {
182170
display: true,
183-
text: yLabel
184-
}
171+
text: yLabel,
172+
},
185173
}
186174
}
187175
}

‎src/static/js/graphs_experimental.js‎

Lines changed: 41 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,8 @@ function fetchDataAndRenderCharts() {
2626
const currentTime = data.current_time;
2727
const timeZoneName = Intl.DateTimeFormat().resolvedOptions().timeZone;
2828

29-
console.log('cpuFrequencyData:', cpuFrequencyData);
30-
3129
// Format the time data using the currentTime from backend
32-
const timeData = data.time.map(time => formatDate(time, currentTime));
30+
const timeData = data.time.map(time => formatDate(time, timeZoneName)); // Use timeZoneName from displayTimeAndTimeZone function
3331

3432
displayTimeAndTimeZone(currentTime, timeZoneName);
3533

@@ -85,51 +83,25 @@ document.getElementById('refreshCurrentTempTime').addEventListener('click', () =
8583
});
8684

8785

88-
function formatDate(dateString, currentTime) {
89-
const date = new Date(dateString);
90-
const now = new Date(currentTime); // Use currentTime from backend
91-
92-
// Helper function to format with leading zeros
93-
const pad = (num) => String(num).padStart(2, '0');
94-
95-
// Manually extract UTC components
96-
const day = pad(date.getUTCDate()); // e.g., 09
97-
const month = pad(date.getUTCMonth() + 1); // e.g., 04
98-
const year = date.getUTCFullYear(); // e.g., 2021
99-
const hours = pad(date.getUTCHours()); // e.g., 11
100-
const minutes = pad(date.getUTCMinutes()); // e.g., 33
101-
102-
103-
// Calculate time differences
104-
const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
105-
const diffWeeks = Math.floor(diffDays / 7);
106-
const diffMonths = now.getMonth() - date.getUTCMonth() + (12 * (now.getFullYear() - date.getUTCFullYear()));
107-
const diffYears = now.getFullYear() - date.getUTCFullYear();
108-
109-
// Determine the label based on time differences
110-
// // Reset the time to 12am for the date comparison
111-
// date.setUTCHours(0, 0, 0, 0);
112-
// now.setUTCHours(0, 0, 0, 0);
113-
114-
// if (diffDays === 0) {
115-
// return `Today ${hours}:${minutes}`;
116-
// } else if (diffDays === 1) {
117-
// return `Yesterday ${hours}:${minutes}`;
118-
// } else if (diffDays <= 3) {
119-
// return `${diffDays} Days Ago ${hours}:${minutes}`;
120-
// } else if (diffDays <= 7) {
121-
// return `${Math.ceil(diffDays / 7)} Week${diffDays > 7 ? 's' : ''} Ago ${hours}:${minutes}`;
122-
// } else if (diffDays <= 30) {
123-
// return `${Math.ceil(diffDays / 7)} Weeks Ago ${hours}:${minutes}`;
124-
// } else if (diffMonths < 12) {
125-
// return `${diffMonths} Month${diffMonths > 1 ? 's' : ''} Ago ${hours}:${minutes}`;
126-
// } else if (diffYears < 2) {
127-
// return `Last Year ${hours}:${minutes}`;
128-
// } else {
129-
// return `${year}/${month}/${day} ${hours}:${minutes}`;
130-
// }
131-
132-
return `${year}/${month}/${day} ${hours}:${minutes}`;
86+
function formatDate(utcTime, timeZone) {
87+
const date = new Date(utcTime);
88+
89+
// Format options can be adjusted for your needs
90+
const options = {
91+
timeZone: timeZone,
92+
year: 'numeric',
93+
month: '2-digit',
94+
day: '2-digit',
95+
hour: '2-digit',
96+
minute: '2-digit',
97+
hour12: false // Change to true if you prefer 12-hour format
98+
};
99+
100+
// Generate formatted string
101+
const formattedDate = date.toLocaleString('en-US', options);
102+
103+
// For better graph display, you might want just the date and hour
104+
return formattedDate.replace(/, (\d{2}:\d{2})/, ' $1'); // Example: "09/22/2024 14:30"
133105
}
134106

135107
function displayTimeAndTimeZone(currentTime, timeZoneName) {
@@ -157,13 +129,27 @@ function createChart(ctx, labels, datasets, yLabel) {
157129
ctx.chart.destroy(); // Destroy the existing chart if it exists
158130
}
159131

132+
const allDataPoints = datasets.flatMap(dataset => dataset.data);
133+
const minY = Math.min(...allDataPoints.filter(value => typeof value === 'number'));
134+
const maxY = Math.max(...allDataPoints.filter(value => typeof value === 'number'));
135+
160136
ctx.chart = new Chart(ctx, {
161137
type: 'line',
162138
data: {
163-
labels: labels, // Use your timeData directly as labels
164-
datasets: datasets
139+
labels: labels,
140+
datasets: datasets.map(dataset => ({
141+
...dataset,
142+
borderWidth: 2,
143+
fill: false,
144+
tension: 0.3,
145+
pointRadius: 5,
146+
pointHoverRadius: 7,
147+
backgroundColor: dataset.backgroundColor || 'rgba(75, 192, 192, 0.2)',
148+
borderColor: dataset.borderColor || 'rgba(75, 192, 192, 1)',
149+
})),
165150
},
166151
options: {
152+
167153
scales: {
168154
x: {
169155
type: 'category',
@@ -173,17 +159,17 @@ function createChart(ctx, labels, datasets, yLabel) {
173159
},
174160
ticks: {
175161
autoSkip: true,
176-
maxTicksLimit: 10,
177-
maxRotation: 20,
162+
maxTicksLimit: 6,
163+
maxRotation: 0,
178164
minRotation: 0,
179165
}
180166
},
181167
y: {
182-
beginAtZero: true,
168+
beginAtZero: minY < 0 ? false : true, // Adjust y-axis based on data
183169
title: {
184170
display: true,
185-
text: yLabel
186-
}
171+
text: yLabel,
172+
},
187173
}
188174
}
189175
}

0 commit comments

Comments
 (0)