bryan
/
BangleApps
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"> <link rel="stylesheet" href="../../css/spectre.min.css">
</head> </head>
<body> <body>
<p>Data Test 2</p>
<script src="../../core/lib/customize.js"></script> <script src="../../core/lib/customize.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.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> <script>
let globalApps = []; let globalApps = [];
// Called by the app loader
function onInit(device) { function onInit(device) {
Util.showModal("Reading Storage..."); Util.showModal("Reading Storage...");
Puck.eval(`require("Storage").list(/\\.info$/).map(appInfoName => { 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])); globalApps = apps.sort((a,b) => (b[1]+b[2]) - (a[1]+a[2]));
if (apps.length === 0) { if (apps.length === 0) {
document.getElementById("storageInfo").innerHTML = "<p>No apps found</p>"; document.getElementById("storageTable").innerHTML = "<p>No apps found</p>";
return; return;
} }
document.getElementById("storageInfo").innerHTML = ` drawTable();
});
}
function drawTable() {
document.getElementById("storageTable").innerHTML = `
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
@ -53,7 +70,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
${apps.map(app => ` ${globalApps.map(app => `
<tr> <tr>
<td>${app[0]}</td> <td>${app[0]}</td>
<td>${(app[1]/1000).toFixed(1)}</td> <td>${(app[1]/1000).toFixed(1)}</td>
@ -62,9 +79,6 @@
</tr>`).join("")} </tr>`).join("")}
</tbody> </tbody>
</table>`; </table>`;
drawChart(); // Now safe to call
});
} }
function drawChart() { function drawChart() {
@ -78,17 +92,46 @@
const options = { const options = {
title: 'App Storage Breakdown', 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')); const chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options); chart.draw(data, options);
} }
// Load Google Charts and prepare initial chart (in background)
google.charts.load('current', {'packages':['corechart']}); google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(() => { google.charts.setOnLoadCallback(() => {
drawChart(); 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> </script>
</body> </body>
</html> </html>