feat: split key value table in 3 columns (key, value, percent)

KohlbacherLab · Sep 23, 2024 · f1880f5 · f1880f5
1 parent 7019956
commit f1880f5
Showing 1 changed file with 21 additions and 13 deletions.
diff --git 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',
             },