From f1880f525899d76b425a4368b7f11af9ab8ff55b Mon Sep 17 00:00:00 2001
From: tada5hi <peter.placzek1996@gmail.com>
Date: Mon, 23 Sep 2024 15:27:22 +0200
Subject: [PATCH] feat: split key value table in 3 columns (key, value,
 percent)

---
 .../components/utility/kv-table/DKVTable.vue  | 34 ++++++++++++-------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/components/utility/kv-table/DKVTable.vue b/packages/core/src/components/utility/kv-table/DKVTable.vue
index 96bb642f..d507addd 100644
--- a/packages/core/src/components/utility/kv-table/DKVTable.vue
+++ b/packages/core/src/components/utility/kv-table/DKVTable.vue
@@ -29,44 +29,52 @@ export default defineComponent({
     setup(props) {
         const items = computed<{
             key: string,
-            value: number | string
+            value: number | string,
+            percent: number | string
         }[]>(() => props.data.map((item) => {
             let key : string;
-            if (typeof item.value === 'number') {
-                key = `${generateChartLabelsForKeyValueRecord(item)}`;
-            } else if (isConceptCount(item)) {
-                key = `${generateChartLabelsForKeyValueRecord(item, {
-                    codingVerbose: props.codingVerboseLabel,
-                })} (${item.value.percent.toFixed(1)}%)`;
-            } else {
-                key = 'unknown';
-            }
-
             let value : number | string;
+            let percent : number | string;
+
             if (typeof item.value === 'number') {
+                key = `${generateChartLabelsForKeyValueRecord(item)}`;
                 value = item.value.toFixed(2);
+                percent = '?%';
             } else if (isConceptCount(item)) {
+                key = generateChartLabelsForKeyValueRecord(item, {
+                    codingVerbose: props.codingVerboseLabel,
+                });
                 value = item.value.count.toFixed(2);
+                percent = `${item.value.percent.toFixed(1)}%`;
             } else {
+                key = 'unknown';
                 value = Number(item.value);
+                percent = '?%';
             }
 
             return {
                 key,
                 value,
+                percent,
             };
         }));
 
         const fields : TableFieldRaw[] = [
             {
                 key: 'key',
-                label: 'Key',
+                label: 'Element',
                 thClass: 'text-left',
                 tdClass: 'text-left',
             },
             {
                 key: 'value',
-                label: 'Value',
+                label: 'Häufigkeit',
+                thClass: 'text-center',
+                tdClass: 'text-center',
+            },
+            {
+                key: 'percent',
+                label: 'Prozent (%)',
                 thClass: 'text-center',
                 tdClass: 'text-center',
             },