|
1 | 1 | <script lang="ts"> |
2 | | - import { onDestroy, onMount } from 'svelte'; |
3 | | - import { page } from '$app/state'; |
| 2 | + import { onMount } from 'svelte'; |
4 | 3 | import SettingsCard from '$lib/components/SettingsCard.svelte'; |
5 | 4 | import { slide } from 'svelte/transition'; |
6 | 5 | import { cubicOut } from 'svelte/easing'; |
|
13 | 12 | Chart.register(...registerables); |
14 | 13 |
|
15 | 14 | // 🌙 |
16 | | - let lpsChartElement: HTMLCanvasElement = $state(); |
| 15 | + let lpsChartElement: HTMLCanvasElement | undefined = $state(); |
17 | 16 | let lpsChart: Chart; |
18 | 17 |
|
19 | | - let heapChartElement: HTMLCanvasElement = $state(); |
| 18 | + let heapChartElement: HTMLCanvasElement | undefined = $state(); |
20 | 19 | let heapChart: Chart; |
21 | 20 |
|
22 | | - let psramChartElement: HTMLCanvasElement = $state(); |
| 21 | + let psramChartElement: HTMLCanvasElement | undefined = $state(); |
23 | 22 | let psramChart: Chart; |
24 | 23 |
|
25 | | - let filesystemChartElement: HTMLCanvasElement = $state(); |
| 24 | + let filesystemChartElement: HTMLCanvasElement | undefined = $state(); |
26 | 25 | let filesystemChart: Chart; |
27 | 26 |
|
28 | | - let temperatureChartElement: HTMLCanvasElement = $state(); |
| 27 | + let temperatureChartElement: HTMLCanvasElement | undefined = $state(); |
29 | 28 | let temperatureChart: Chart; |
30 | 29 |
|
| 30 | + // Check if PSRAM data is available |
| 31 | + let hasPsramData = $derived(Math.max(...$analytics.psram_size) > 0); |
| 32 | +
|
31 | 33 | onMount(() => { |
32 | 34 | // 🌙 |
33 | 35 | lpsChart = new Chart(lpsChartElement, { |
|
168 | 170 | } |
169 | 171 | } |
170 | 172 | }); |
171 | | - psramChart = new Chart(psramChartElement, { |
| 173 | + |
| 174 | + // Only create PSRAM chart if PSRAM data is available |
| 175 | + if (hasPsramData) { |
| 176 | + psramChart = new Chart(psramChartElement, { |
172 | 177 | type: 'line', |
173 | 178 | data: { |
174 | 179 | labels: $analytics.uptime, |
|
178 | 183 | borderColor: daisyColor('--color-primary'), |
179 | 184 | backgroundColor: daisyColor('--color-primary', 50), |
180 | 185 | borderWidth: 2, |
181 | | - data: $analytics.free_psram, |
| 186 | + data: $analytics.used_psram, |
182 | 187 | yAxisID: 'y' |
183 | 188 | } |
184 | 189 | ] |
|
233 | 238 | } |
234 | 239 | } |
235 | 240 | }); |
| 241 | + } |
| 242 | + |
236 | 243 | filesystemChart = new Chart(filesystemChartElement, { |
237 | 244 | type: 'line', |
238 | 245 | data: { |
|
381 | 388 | heapChart.update('none'); |
382 | 389 | heapChart.options.scales.y.max = Math.round(Math.max(...$analytics.total_heap)); |
383 | 390 |
|
384 | | - if (Math.max(...$analytics.psram_size)) { |
| 391 | + if (hasPsramData) { |
385 | 392 | psramChart.data.labels = $analytics.uptime; |
386 | 393 | psramChart.data.datasets[0].data = $analytics.used_psram; |
387 | 394 | psramChart.update('none'); |
|
451 | 458 | <canvas bind:this={heapChartElement}></canvas> |
452 | 459 | </div> |
453 | 460 | </div> |
454 | | - {#if Math.max(...$analytics.psram_size)} |
| 461 | + {#if hasPsramData} |
455 | 462 | <div class="w-full overflow-x-auto"> |
456 | 463 | <div |
457 | 464 | class="flex w-full flex-col space-y-1 h-60" |
|
0 commit comments