Skip to content
GitLab
Commit 0c6aa854 authored by Santhanavanich's avatar Santhanavanich
Browse files

update

parent 34ffd05d
Pipeline #10280 passed with stage
in 14 seconds
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 77 additions and 16 deletions
+77 -16
public/munakata/ds-chart.html
+ 76
- 15
View file @ 0c6aa854
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
...@@ -10,21 +11,70 @@ ...@@ -10,21 +11,70 @@
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style> <style>
body { font-family: 'Montserrat', sans-serif; margin: 20px; } body {
#chart { width: 100%; height: 600px; } font-family: 'Montserrat', sans-serif;
.error { color: red; } margin: 20px;
.btn-group { margin-bottom: 20px; } }
.card-title { font-size: 1rem; font-weight: normal; }
.card-text { font-size: 2rem; font-weight: bold; } #chart {
.timestamp { font-size: 0.75rem; font-weight: normal; } width: 100%;
.card { margin: 15px 0; border: none; } height: 600px;
.card-container { margin-top: 20px; } }
.card-average { background-color: #f0f9ff; color: #007bff; }
.card-max { background-color: #fff5f5; color: #dc3545; } .error {
.card-min { background-color: #f9f8ff; color: #6f42c1; } color: red;
.card-count { background-color: #f5fff7; color: #28a745; } }
.btn-group {
margin-bottom: 20px;
}
.card-title {
font-size: 1rem;
font-weight: normal;
}
.card-text {
font-size: 2rem;
font-weight: bold;
}
.timestamp {
font-size: 0.75rem;
font-weight: normal;
}
.card {
margin: 15px 0;
border: none;
}
.card-container {
margin-top: 20px;
}
.card-average {
background-color: #f0f9ff;
color: #007bff;
}
.card-max {
background-color: #fff5f5;
color: #dc3545;
}
.card-min {
background-color: #f9f8ff;
color: #6f42c1;
}
.card-count {
background-color: #f5fff7;
color: #28a745;
}
</style> </style>
</head> </head>
<body> <body>
<div class="container-fluid"> <div class="container-fluid">
<h2 class="text-center" id="chart-title" style="display: none;">Sensor Data Visualization</h2> <h2 class="text-center" id="chart-title" style="display: none;">Sensor Data Visualization</h2>
...@@ -132,6 +182,7 @@ ...@@ -132,6 +182,7 @@
} }
function renderChart(data) { function renderChart(data) {
const oneDayPoints = 288;
const option = { const option = {
grid: { grid: {
bottom: 175 // Add more space at the bottom to accommodate the labels bottom: 175 // Add more space at the bottom to accommodate the labels
...@@ -163,7 +214,16 @@ ...@@ -163,7 +214,16 @@
const value = params[0].data; const value = params[0].data;
return `${date}<br/>Value: ${value} ${chartUnit}`; return `${date}<br/>Value: ${value} ${chartUnit}`;
} }
} },
dataZoom: [{
type: 'slider', // Add a slider data zoom
startValue: 0, // Start at the beginning of the dataset
endValue: oneDayPoints, // Set the default zoom to display one day (288 points for a 5-min interval)
xAxisIndex: 0, // Apply the zoom to the xAxis
labelFormatter: function (value) { // Optional: Customize the label display
return new Date(data[value].resultTime).toLocaleDateString();
}
}]
}; };
myChart.setOption(option); myChart.setOption(option);
...@@ -217,7 +277,7 @@ ...@@ -217,7 +277,7 @@
}); });
// Activate button styles // Activate button styles
function activateButton(buttonId) { function activateButton(buttonId) {
const buttons = document.querySelectorAll('.btn-group .btn'); const buttons = document.querySelectorAll('.btn-group .btn');
buttons.forEach(btn => { buttons.forEach(btn => {
btn.classList.remove('active', 'btn-primary'); btn.classList.remove('active', 'btn-primary');
...@@ -234,4 +294,5 @@ ...@@ -234,4 +294,5 @@
}); });
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
public/munakata/pack-min.js
+ 1
- 1
View file @ 0c6aa854
This diff is collapsed.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal