moved checkbox for monthly values out of sidebar

ma4nn · Mar 6, 2025 · b88f4af · b88f4af
1 parent fbb5a57
commit b88f4af
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 20 deletions.
diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -3,7 +3,7 @@
     {
       "path": "./dist/SankeyChart.lua",
       "compression": "none",
-      "maxSize": "850 kB"
+      "maxSize": "860 kB"
     }
   ]
 }
diff --git a/src/main.ts b/src/main.ts
@@ -66,7 +66,7 @@ function updateCategoryTable(): void {
 }
 
 function setScaling(): void {
-    const input = document.querySelector("form #is-show-monthly") as HTMLInputElement;
+    const input = document.querySelector("input#is-show-monthly") as HTMLInputElement;
     config.scalingFactor = input.checked ? parseFloat(input.value) : defaultConfig.scalingFactor;
     console.debug('scaling: ' + config.scalingFactor);
 }
@@ -88,9 +88,17 @@ export function initApp(chartDataTree: Tree, numberOfMonths: number, currency: s
     update();
 
     if (Math.round(numberOfMonths) == 1) {
-        document.querySelector("form input#is-show-monthly").setAttribute('disabled', 'disabled');
+        document.querySelector("input#is-show-monthly").setAttribute('disabled', 'disabled');
     }
 
+    document.querySelector("input#is-show-monthly").addEventListener('change', (event) => {
+        event.preventDefault();
+
+        setScaling();
+        persistConfig(config);
+        chart.update();
+    });
+
     document.querySelector("#apply-settings-btn").addEventListener('click', (event) => {
         event.preventDefault();
 
@@ -120,7 +128,6 @@ export function initApp(chartDataTree: Tree, numberOfMonths: number, currency: s
 }
 
 function applyConfig(): void {
-    setScaling();
     setThreshold();
     setCategories();
     chart.update();
@@ -129,7 +136,7 @@ function applyConfig(): void {
 function update(): void {
     updateCategoryTable();
     (document.querySelector("form #threshold") as HTMLInputElement).value = String((config.threshold / config.scalingFactor).toFixed(2));
-    (document.querySelector("form input#is-show-monthly") as HTMLInputElement).checked = config.scalingFactor !== 1;
+    (document.querySelector("input#is-show-monthly") as HTMLInputElement).checked = config.scalingFactor !== 1;
 }
 
 function reset(): void {

diff --git a/src/template.html b/src/template.html
@@ -26,14 +26,25 @@
     <header class="container text-center">
         <h1 class="my-4">Cashflows</h1>
 
-        <p>{{ account_name }}, {{ start_date }} bis {{ end_date }}</p>
+        <p class="lead">{{ account_name }}, {{ start_date }} bis {{ end_date }}</p>
 
-        <button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasConfig" aria-controls="offcanvasConfig">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
-                <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
-            </svg>
-            Chart anpassen
-        </button>
+        <div class="row g-5 align-items-center justify-content-center">
+            <div class="col-auto">
+                <button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasConfig" aria-controls="offcanvasConfig">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
+                        <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+                    </svg>
+                    Chart anpassen
+                </button>
+            </div>
+            <div class="col-auto">
+                <div class="form-check form-switch form-check-inline">
+                    <input class="form-check-input" type="checkbox" role="switch" id="is-show-monthly" value="{{ number_of_months }}">
+                    <label class="form-check-label" for="is-show-monthly">Werte pro Monat anzeigen</label>
+                    <span class="form-text">(insg. {{ number_of_months_formatted }} Monat(e))</span>
+                </div>
+            </div>
+        </div>
     </header>
 
     <main class="container-fluid my-3">
@@ -86,14 +97,6 @@ <h5 class="offcanvas-title" id="offcanvasConfigLabel">Konfiguration</h5>
                         </div>
                     </div>
 
-                    <div class="col-12">
-                        <div class="form-check mb-3">
-                            <input class="form-check-input" type="checkbox" id="is-show-monthly" value="{{ number_of_months }}">
-                            <label class="form-check-label" for="is-show-monthly">Werte pro Monat anzeigen</label>
-                            <span class="form-text">(insg. {{ number_of_months_formatted }} Monat(e))</span>
-                        </div>
-                    </div>
-
                     <template id="category-table-template">
                         <table id="category-config" class="table table-hover">
                             <thead>