bryan
/
BangleApps_old
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add buttons to toggle views, fix alignment,

master
RKBoss6 2025-07-09 14:28:40 -04:00 committed by GitHub
parent 137b9feaaa
commit 8ddae73270
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 71 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
apps/storageanalyzer/custom.html
View File

@ -3,15 +3,27 @@
<link rel="stylesheet" href="../../css/spectre.min.css">
</head>
<body>
<p>Data Test 2</p>
<script src="../../core/lib/customize.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="storageInfo"></div>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<!-- Toggle Buttons -->
<div class="btn-group" style="margin: 1em; display: flex; justify-content: center;">
<button id="tableButton" class="btn btn-primary">View Table</button>
<button id="pieChartButton" class="btn">View Pie Chart</button>
</div>
<!-- Table View -->
<div id="storageTable"></div>
<!-- Chart View -->
<div id="storagePieChart" style="display: none; justify-content: center;">
<div id="piechart" style="width: 100%; max-width: 600px; height: 400px;"></div>
</div>
<script>
let globalApps = [];
// Called by the app loader
function onInit(device) {
Util.showModal("Reading Storage...");
Puck.eval(`require("Storage").list(/\\.info$/).map(appInfoName => {
@ -38,11 +50,16 @@
globalApps = apps.sort((a,b) => (b[1]+b[2]) - (a[1]+a[2]));
if (apps.length === 0) {
document.getElementById("storageInfo").innerHTML = "<p>No apps found</p>";
document.getElementById("storageTable").innerHTML = "<p>No apps found</p>";
return;
}
document.getElementById("storageInfo").innerHTML = `
drawTable();
});
}
function drawTable() {
document.getElementById("storageTable").innerHTML = `
<table class="table table-striped">
<thead>
<tr>
@ -53,7 +70,7 @@
</tr>
</thead>
<tbody>
${apps.map(app => `
${globalApps.map(app => `
<tr>
<td>${app[0]}</td>
<td>${(app[1]/1000).toFixed(1)}</td>
@ -62,9 +79,6 @@
</tr>`).join("")}
</tbody>
</table>`;
drawChart(); // Now safe to call
});
}
function drawChart() {
@ -78,17 +92,46 @@
const options = {
title: 'App Storage Breakdown',
is3D: true
is3D: false,
chartArea: {
width: '90%',
height: '80%'
},
legend: {
position: 'bottom'
}
};
const chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
// Load Google Charts and prepare initial chart (in background)
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(() => {
drawChart();
});
// Toggle view buttons
document.getElementById("pieChartButton").addEventListener("click", function () {
document.getElementById("storageTable").style.display = "none";
document.getElementById("storagePieChart").style.display = "flex";
drawChart();
this.classList.add("btn-primary");
document.getElementById("tableButton").classList.remove("btn-primary");
});
document.getElementById("tableButton").addEventListener("click", function () {
document.getElementById("storageTable").style.display = "block";
document.getElementById("storagePieChart").style.display = "none";
drawTable();
this.classList.add("btn-primary");
document.getElementById("pieChartButton").classList.remove("btn-primary");
});
</script>
</body>
</html>