Skip to content

Commit 265ef60

Browse files
codeperfectpluscodeperfectplus
committed
more line chart added
1 parent fd7bc88 commit 265ef60

8 files changed

Lines changed: 58 additions & 21 deletions

File tree

‎src/static/js/cardChart.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const maxDataPoints = 20; // Number of data points to show on the chart
1+
const maxDataPoints = 500; // Number of data points to show on the chart
22

33
// Generalized function to create and update a line chart
44
function createLineChart(canvasId, label, dataStorage, updateFunc) {
@@ -14,6 +14,7 @@ function createLineChart(canvasId, label, dataStorage, updateFunc) {
1414
borderColor: 'red',
1515
borderWidth: 2,
1616
fill: true,
17+
opacity: 0.5,
1718
tension: 0.6, // Smooth line
1819
pointRadius: 0 // Removes the round tip (data points) on the line
1920
}]
@@ -58,5 +59,5 @@ function createLineChart(canvasId, label, dataStorage, updateFunc) {
5859
const newUsage = updateFunc(); // Call the update function to get the current usage
5960
console.log(`${label} Usage:`, newUsage);
6061
updateChart(newUsage);
61-
}, 2000);
62+
}, 300);
6263
}

‎src/templates/card_comp/cpu/current_temp.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,16 @@ <h5 class="card-title mb-3">CPU Temperature <i class="fas fa-microchip"></i></h5
88
<div class="temp-indicator mt-2">
99
<div class="temp-bar" style="width: {{ system_info['current_temp'] }}%;"></div>
1010
</div>
11+
<canvas id="cpuTempLineChart" height="30"></canvas>
1112
</div>
1213
</div>
1314
{% endif %}
15+
16+
17+
<script>
18+
// Initialize CPU Usage Chart
19+
const cpuTempData = [];
20+
createLineChart('cpuTempLineChart', '', cpuTempData, () => {
21+
return parseFloat(document.querySelector('.temp-value').textContent);
22+
});
23+
</script>

‎src/templates/card_comp/cpu/frequency.html‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,26 @@
1-
<div class="card cpu-frequency-card bg-cpu shadow-sm" data-cpu-frequency="{{ system_info['cpu_frequency'] }}" data-bs-toggle="tooltip" title="Maximum CPU frequency {{ system_info['cpu_max_frequency'] }} MHz"
2-
data-cpu-max-frequency="{{ system_info['cpu_max_frequency'] }}">
3-
<div class="card-body d-flex flex-column align-items-center">
4-
<h5 class="card-title mb-3">CPU Frequency <i class="fas fa-microchip"></i></h5>
5-
<p class="card-text fs-4 frequency-value" data-bs-toggle="tooltip"
6-
title="Maximum CPU frequency {{ system_info['cpu_max_frequency'] }} MHz">
7-
{{ system_info['cpu_frequency'] }}
8-
</p>
9-
<div class="frequency-indicator mt-3">
10-
<div class="frequency-bar"
11-
style="width: {{ 100 * system_info['cpu_frequency'] / (system_info['cpu_max_frequency'] if system_info['cpu_max_frequency'] != 0 else 1) }}%;">
12-
</div>
1+
<div class="card cpu-frequency-card bg-cpu shadow-sm" data-cpu-frequency="{{ system_info['cpu_frequency'] }}"
2+
data-bs-toggle="tooltip" title="Maximum CPU frequency {{ system_info['cpu_max_frequency'] }} MHz"
3+
data-cpu-max-frequency="{{ system_info['cpu_max_frequency'] }}">
4+
<div class="card-body d-flex flex-column align-items-center">
5+
<h5 class="card-title mb-3">CPU Frequency <i class="fas fa-microchip"></i></h5>
6+
<p class="card-text fs-4 frequency-value" data-bs-toggle="tooltip"
7+
title="Maximum CPU frequency {{ system_info['cpu_max_frequency'] }} MHz">
8+
{{ system_info['cpu_frequency'] }}
9+
</p>
10+
<div class="frequency-indicator mt-3">
11+
<div class="frequency-bar"
12+
style="width: {{ 100 * system_info['cpu_frequency'] / (system_info['cpu_max_frequency'] if system_info['cpu_max_frequency'] != 0 else 1) }}%;">
1313
</div>
14-
<!-- <p class="card-text fs-6 mt-2">Max Frequency: {{ system_info['cpu_max_frequency'] }} MHz</p> -->
1514
</div>
16-
</div>
15+
<!-- <p class="card-text fs-6 mt-2">Max Frequency: {{ system_info['cpu_max_frequency'] }} MHz</p> -->
16+
<canvas id="cpuFrequencyLineChart" height="30"></canvas>
17+
</div>
18+
</div>
19+
20+
<script>
21+
// Initialize CPU Usage Chart
22+
const cpuFrequencyData = [];
23+
createLineChart('cpuFrequencyLineChart', 'frequency', cpuFrequencyData, () => {
24+
return 100 * parseFloat(document.querySelector('.frequency-value').textContent) / {{ system_info['cpu_max_frequency'] }};
25+
});
26+
</script>

‎src/templates/card_comp/disk/usage.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,22 @@
22
<div class="card disk-usage-card bg-disk shadow-sm" data-disk-usage="{{ system_info['disk_percent'] }}" data-bs-toggle="tooltip" title="Total Disk: {{ system_info['disk_total'] }} GB">
33
<div class="card-body d-flex flex-column align-items-center">
44
<h5 class="card-title mb-3">Disk Usage <i class="fas fa-hdd"></i></h5>
5-
<p class="card-text fs-4 usage-value">
5+
<p class="card-text fs-4 disk-usage-value">
66
{{ system_info['disk_percent'] }}%
77
</p>
88
<div class="usage-indicator mt-2">
99
<div class="disk-bar" style="width: {{ system_info['disk_percent'] }}%;"></div>
1010
</div>
1111
<!-- <p class="card-text fs-6 mt-2">Total Disk: {{ system_info['disk_total'] }} GB</p> -->
12+
<canvas id="diskUsageLineChart" height="30"></canvas>
1213
</div>
1314
</div>
1415
{% endif %}
16+
17+
<script>
18+
// Initialize CPU Usage Chart
19+
const diskUsageData = [];
20+
createLineChart('diskUsageLineChart', '', diskUsageData, () => {
21+
return parseFloat(document.querySelector('.disk-usage-value').textContent);
22+
});
23+
</script>

‎src/templates/dashboard/developer.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,19 +28,19 @@
2828
{% include 'card_comp/battery/percentage.html' %}
2929
</div>
3030

31-
<div class="col-md-6 col-lg-4 mb-4">
31+
<div class="col-md-6 col-lg-6 mb-4">
3232
{% include 'card_comp/cpu/usages.html' %}
3333
</div>
34-
<div class="col-md-6 col-lg-4 mb-4">
34+
<div class="col-md-6 col-lg-6 mb-4">
3535
{% include 'card_comp/memory/usage.html' %}
3636
</div>
3737
<div class="col-md-6 col-lg-4 mb-4">
3838
{% include 'card_comp/disk/usage.html' %}
3939
</div>
40-
<div class="col-md-6 col-lg-6 mb-4">
40+
<div class="col-md-6 col-lg-4 mb-4">
4141
{% include 'card_comp/cpu/current_temp.html' %}
4242
</div>
43-
<div class="col-md-6 col-lg-6 mb-4">
43+
<div class="col-md-6 col-lg-4 mb-4">
4444
{% include 'card_comp/cpu/frequency.html' %}
4545
</div>
4646
<div class="col-md-6 col-lg-6 mb-4">

‎src/templates/info_pages/cpu_info.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
{% block extra_head %}
33
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
44
<link rel="stylesheet" href="{{ url_for('static', filename='css/refresher.css') }}">
5+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
6+
<script src="{{ url_for('static', filename='js/cardChart.js')}}"></script>
57
{% endblock %}
68
{% block content %}
79
{% include 'card_comp/selector/refresh_button.html' %}

‎src/templates/info_pages/disk_info.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
{% extends 'base/base.html' %}{% block title %}Disk Usage Details{% endblock %}
22
{% block extra_head %}
33
<link rel="stylesheet" href="{{ url_for('static', filename='css/refresher.css') }}">
4+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
5+
<script src="{{ url_for('static', filename='js/cardChart.js')}}"></script>
6+
47
{% endblock %}
58
{% block content %}
69
{% include 'card_comp/selector/refresh_button.html' %}<h2 class="my-4">Disk

‎src/templates/info_pages/memory_info.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
{% extends 'base/base.html' %}{% block title %}Memory Usage Details{% endblock %}
22
{% block extra_head %}
33
<link rel="stylesheet" href="{{ url_for('static', filename='css/refresher.css') }}">
4+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
5+
<script src="{{ url_for('static', filename='js/cardChart.js')}}"></script>
46
{% endblock %}
57
{% block content %}
68
{% include 'card_comp/selector/refresh_button.html' %}

0 commit comments

Comments
 (0)