From b88f4afea1b50a13ad911a8d041f2eeae68d8227 Mon Sep 17 00:00:00 2001 From: Christoph Massmann Date: Thu, 6 Mar 2025 10:30:50 +0100 Subject: [PATCH] moved checkbox for monthly values out of sidebar --- bundlesize.config.json | 2 +- src/main.ts | 15 +++++++++++---- src/template.html | 33 ++++++++++++++++++--------------- 3 files changed, 30 insertions(+), 20 deletions(-) diff --git a/bundlesize.config.json b/bundlesize.config.json index 6096552..6281f1e 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -3,7 +3,7 @@ { "path": "./dist/SankeyChart.lua", "compression": "none", - "maxSize": "850 kB" + "maxSize": "860 kB" } ] } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 05c5c1f..5b8da17 100644 --- 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 index a0d92d1..7aae43f 100644 --- a/src/template.html +++ b/src/template.html @@ -26,14 +26,25 @@

Cashflows

-

{{ account_name }}, {{ start_date }} bis {{ end_date }}

+

{{ account_name }}, {{ start_date }} bis {{ end_date }}

- +
+
+ +
+
+
+ + + (insg. {{ number_of_months_formatted }} Monat(e)) +
+
+
@@ -86,14 +97,6 @@
Konfiguration
-
-
- - - (insg. {{ number_of_months_formatted }} Monat(e)) -
-
-