Skip to content

Commit 816ce67

Browse files
RKBoss6RKBoss6
authored
Fix for proper displaying of total storage pie chart
1 parent 5b135b1 commit 816ce67

File tree

1 file changed

+67
-75
lines changed

1 file changed

+67
-75
lines changed

‎apps/storageanalyzer/custom.html‎

Lines changed: 67 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -9,56 +9,49 @@
99
<!-- Toggle Buttons -->
1010
<div class="btn-group" style="margin: 1em; display: flex; justify-content: center;">
1111
<button id="tableButton" class="btn btn-primary">View Table</button>
12-
<button id="pieChartButton" class="btn">View Pie Charts</button>
12+
<button id="pieChartButton" class="btn">View Pie Chart</button>
1313
</div>
1414

1515
<!-- Table View -->
1616
<div id="storageTable"></div>
1717

18-
<!-- Charts View -->
19-
<div id="storagePieCharts" style="display: none; flex-direction: column; align-items: center; gap: 1.5em;">
20-
<!-- App Breakdown Chart -->
18+
<!-- Chart View -->
19+
<div id="storagePieChart" style="display: none; flex-direction: column; align-items: center;">
2120
<div id="piechart" style="width: 100%; max-width: 600px; height: 400px;"></div>
22-
<!-- Total Storage Chart -->
2321
<div id="totalStoragePie" style="width: 100%; max-width: 600px; height: 300px;"></div>
2422
</div>
2523

2624
<script>
2725
let globalApps = [];
2826
let storageStats = null;
29-
let hasGetStats = true;
30-
27+
3128
function onInit(device) {
3229
Util.showModal("Reading Storage...");
33-
34-
// Fetch app list and stats from the watch
3530
Puck.eval(`(()=>{
36-
const Storage = require("Storage");
37-
const getApps = () => Storage.list(/\\.info$/).map(n => {
38-
const app = Storage.readJSON(n,1)||{};
39-
let fileSize=0, dataSize=0;
40-
if (app.files) app.files.split(",").forEach(f=>{
41-
const d = Storage.read(f); if (d) fileSize += d.length;
42-
});
43-
const parts = (app.data||"").split(";");
44-
function toRegExp(wc) { return new RegExp("^"+wc.replace(/[.+?^${}()|[\\]\\\\]/g,"\\\\$&").replace(/\\*/g,".*")+"$"); }
45-
if (parts[0]) parts[0].split(",").forEach(wc=>{
46-
Storage.list(toRegExp(wc), {sf:false}).forEach(f=>{const d=Storage.read(f); if (d) dataSize += d.length;});
31+
let getApps = () => require("Storage").list(/\\.info$/).map(appInfoName => {
32+
let appInfo = require("Storage").readJSON(appInfoName,1)||{};
33+
var fileSize = 0, dataSize = 0;
34+
appInfo.files.split(",").forEach(f => fileSize += require("Storage").read(f).length);
35+
var data = (appInfo.data||"").split(";");
36+
function wildcardToRegexp(wc) {
37+
return new RegExp("^"+wc.replaceAll(".","\\\\.").replaceAll("?",".*")+"$");
38+
}
39+
if (data[0]) data[0].split(",").forEach(wc => {
40+
require("Storage").list(wildcardToRegexp(wc), {sf:false}).forEach(f => {
41+
dataSize += require("Storage").read(f).length
42+
});
4743
});
48-
if (parts[1]) parts[1].split(",").forEach(wc=>{
49-
Storage.list(toRegExp(wc), {sf:true}).forEach(f=>{ try{ dataSize += Storage.open(f,"r").getLength(); }catch(e){} });
44+
if (data[1]) data[1].split(",").forEach(wc => {
45+
require("Storage").list(wildcardToRegexp(wc), {sf:true}).forEach(f => {
46+
dataSize += require("Storage").open(f,"r").getLength();
47+
});
5048
});
51-
return [app.id||"Unknown", fileSize, dataSize];
49+
return [appInfo.id, fileSize, dataSize];
5250
});
53-
54-
let stats;
55-
try { stats = Storage.getStats(); } catch(e) { stats = null; }
56-
return [getApps(), stats];
57-
})()`, function(result) {
51+
return [getApps(), require(\"Storage\").getStats()]; })()`, function(result) {
5852
Util.hideModal();
59-
globalApps = result[0].sort((a,b)=>(b[1]+b[2])-(a[1]+a[2]));
53+
globalApps = result[0].sort((a,b) => (b[1]+b[2]) - (a[1]+a[2]));
6054
storageStats = result[1];
61-
hasGetStats = !!storageStats;
6255

6356
if (globalApps.length === 0) {
6457
document.getElementById("storageTable").innerHTML = "<p>No apps found</p>";
@@ -75,9 +68,9 @@
7568
<thead>
7669
<tr>
7770
<th>App</th>
78-
<th>Code (KB)</th>
79-
<th>Data (KB)</th>
80-
<th>Total (KB)</th>
71+
<th>Code (kb)</th>
72+
<th>Data (kb)</th>
73+
<th>Total (kb)</th>
8174
</tr>
8275
</thead>
8376
<tbody>
@@ -92,69 +85,68 @@
9285
</table>`;
9386
}
9487

95-
function drawCharts() {
88+
function drawChart() {
9689
if (globalApps.length === 0) return;
9790

98-
// Chart 1: App Breakdown
99-
const appData = google.visualization.arrayToDataTable([
100-
['App', 'Total Size (KB)'],
101-
...globalApps.map(a => [a[0], (a[1]+a[2])/1000])
102-
]);
91+
// App-specific chart
92+
const chartData = [
93+
['App', 'Total Size (KB)']
94+
].concat(globalApps.map(app => [app[0], (app[1] + app[2])/1000]));
95+
96+
const data = google.visualization.arrayToDataTable(chartData);
10397

104-
const appChart = new google.visualization.PieChart(document.getElementById('piechart'));
105-
appChart.draw(appData, {
98+
const options = {
10699
title: 'App Storage Breakdown',
107100
chartArea: { width: '90%', height: '80%' },
108101
legend: { position: 'bottom' }
109-
});
110-
111-
// Chart 2: Total Storage (only if stats available, i.e., Bangle.js 2)
112-
const totalDiv = document.getElementById('totalStoragePie');
113-
if (!hasGetStats) {
114-
totalDiv.style.display = "none"; // hide for Bangle.js 1
115-
return;
102+
};
103+
104+
const chart = new google.visualization.PieChart(document.getElementById('piechart'));
105+
chart.draw(data, options);
106+
107+
// Total storage chart
108+
if (storageStats) {
109+
const usedKB = storageStats.fileBytes / 1000;
110+
const freeKB = storageStats.freeBytes / 1000;
111+
const trashKB = storageStats.trashBytes / 1000;
112+
const totalData = google.visualization.arrayToDataTable([
113+
['Type', 'KB'],
114+
['Used', usedKB],
115+
['Free', freeKB],
116+
['Trash', trashKB],
117+
]);
118+
119+
const totalOptions = {
120+
title: 'Total Storage Usage',
121+
122+
chartArea: { width: '90%', height: '80%' },
123+
legend: { position: 'bottom' }
124+
};
125+
126+
const totalChart = new google.visualization.PieChart(document.getElementById('totalStoragePie'));
127+
totalChart.draw(totalData, totalOptions);
116128
}
117-
118-
const used = (storageStats.fileBytes||0)/1000;
119-
const free = (storageStats.freeBytes||0)/1000;
120-
const trash = (storageStats.garbageBytes||0)/1000;
121-
122-
const totalData = google.visualization.arrayToDataTable([
123-
['Type', 'KB'],
124-
['Used', used],
125-
['Free', free],
126-
['Trash', trash]
127-
]);
128-
129-
const totalChart = new google.visualization.PieChart(totalDiv);
130-
totalChart.draw(totalData, {
131-
title: 'Total Storage Usage',
132-
pieHole: 0.4,
133-
chartArea: { width: '90%', height: '80%' },
134-
legend: { position: 'bottom' }
135-
});
136129
}
137130

138-
// Load Google Charts
139131
google.charts.load('current', {'packages':['corechart']});
132+
140133

141-
document.getElementById("pieChartButton").addEventListener("click", function() {
134+
document.getElementById("pieChartButton").addEventListener("click", function () {
142135
document.getElementById("storageTable").style.display = "none";
143-
document.getElementById("storagePieCharts").style.display = "flex";
144-
google.charts.setOnLoadCallback(drawCharts);
136+
document.getElementById("storagePieChart").style.display = "flex";
137+
drawChart();
145138
this.classList.add("btn-primary");
146139
document.getElementById("tableButton").classList.remove("btn-primary");
147140
});
148141

149-
document.getElementById("tableButton").addEventListener("click", function() {
142+
document.getElementById("tableButton").addEventListener("click", function () {
150143
document.getElementById("storageTable").style.display = "block";
151-
document.getElementById("storagePieCharts").style.display = "none";
144+
document.getElementById("storagePieChart").style.display = "none";
152145
drawTable();
153146
this.classList.add("btn-primary");
154147
document.getElementById("pieChartButton").classList.remove("btn-primary");
155148
});
156-
157-
window.onInit = onInit;
149+
158150
</script>
159151
</body>
160152
</html>

0 commit comments

Comments
 (0)