ncounter.git

commit

602dbf5

parent

4679d04

author

CheddarCrisp

date

2024-04-12 18:41:58 +0200 CEST

Bring back history, without the chart

 1@@ -40,9 +40,13 @@
 2         </form>
 3     </div>
 4     {/if}
 5+    {#if showHistory}
 6+    <History { counterId } on:close={ () => { showHistory = false; } }></History>
 7+    {/if}
 8 </div>
 9 <script>
10 import MyProgress from './MyProgress.svelte';
11+import History from './History.svelte';
12 import { counters } from './db.js';
13 
14 export let counterId;

 1@@ -3,8 +3,6 @@
 2         <h1>{ counter.title }</h1>
 3         <button class="close" on:click={ close }><span class="material-symbols-outlined">close</span></button>
 4     </header>
 5-    <canvas class="chart-container" bind:this={ chartEl } width="{ window.outerWidth }" height="250">
 6-    </canvas>
 7     <div class="table-container">
 8         <table class="history">
 9             <thead>
10@@ -27,7 +25,6 @@
11 <script>
12 import { createEventDispatcher } from 'svelte';
13 import { counters } from './db.js';
14-import Chart from 'chart.js';
15 
16 const dispatch = createEventDispatcher();
17 
18@@ -47,77 +44,9 @@ $: history = counter.history.map(x => {
19         value: x.value
20     }
21 });
22-$: dataset = counter.history.reduce((acc, x) => {
23-    return {
24-        labels: [...acc.labels, x.time],
25-        datasets: [
26-            {
27-                ...acc.datasets[0],
28-                data: [...acc.datasets[0].data, x.value]
29-            }
30-        ]
31-    }
32-}, {
33-    labels: [],
34-    datasets: [
35-        {
36-            borderColor: darkMode ? 'rgba(255, 255, 255, 0.25)' : undefined,
37-            backgroundColor: darkMode ? 'rgba(255, 255, 255, 0.25)' : undefined,
38-            lineTension: 0.1,
39-            data: []
40-        }
41-    ]
42-});
43 
44 export let counterId;
45 
46-let chartEl;
47-
48-const themeMatch = window.matchMedia('(prefers-color-scheme: dark)');
49-let darkMode = themeMatch.matches;
50-themeMatch.addListener((e) => {
51-    darkMode = e.matches;
52-});
53-
54-$: {
55-    if(chartEl){
56-        const theme = darkMode ?
57-            {
58-                gridLines: {
59-                    color: 'rgba(255, 255, 255, 0.1)',
60-                    zeroLineColor: 'rgba(255, 255, 255, 0.25)'
61-                },
62-                ticks: {
63-                    fontColor: '#FFFFFF'
64-                }
65-            } :
66-            {} //Use defaults for light mode;
67-
68-        new Chart(chartEl, {
69-            type: 'line',
70-            data: dataset,
71-            options: {
72-                scales: {
73-                    xAxes: [
74-                        {
75-                            ...theme,
76-                            type: 'time'
77-                        }
78-                    ],
79-                    yAxes: [
80-                        {
81-                            ...theme
82-                        }
83-                    ]
84-                },
85-                legend: {
86-                    display: false
87-                }
88-            }
89-        });
90-    }
91-}
92-
93 function close(){
94     dispatch('close');
95 }