feat: initial final summary view for mtb and rd

dnpm-dip · Jan 24, 2024 · f89e085 · f89e085
1 parent 4d41987
commit f89e085
Show file tree

Hide file tree

Showing 18 changed files with 218 additions and 212 deletions.
diff --git a/packages/core/src/components/core/query/QuerySummaryDemographics.vue b/packages/core/src/components/core/query/QuerySummaryDemographics.vue
@@ -0,0 +1,56 @@
+<script lang="ts">
+
+import { type PropType, defineComponent } from 'vue';
+import type { QuerySummaryDemographics } from '../../../domains';
+import { DChartBar, DChartDoughnut } from '../../utility';
+
+export default defineComponent({
+    components: { DChartDoughnut, DChartBar },
+    props: {
+        entity: {
+            type: Object as PropType<QuerySummaryDemographics>,
+            required: true,
+        },
+    },
+});
+</script>
+<template>
+    <div>
+        <h5>Allgemein</h5>
+        <div class="row">
+            <div class="col-12 col-xl-4">
+                <div class="entity-card text-center mb-3 w-100">
+                    <h6>
+                        Patienten pro Standort
+                    </h6>
+                    <DChartDoughnut
+                        style="max-height: 390px"
+                        :items="entity.siteDistribution"
+                    />
+                </div>
+            </div>
+            <div class="col-12 col-xl-4">
+                <div class="entity-card text-center mb-3 w-100">
+                    <h6>
+                        Verteilung von Geschlechtern
+                    </h6>
+                    <DChartDoughnut
+                        style="max-height: 390px"
+                        :items="entity.genderDistribution"
+                    />
+                </div>
+            </div>
+            <div class="col-12 col-xl-4">
+                <div class="entity-card text-center mb-3 w-100">
+                    <h6>
+                        Verteilung des Alters
+                    </h6>
+                    <DChartBar
+                        style="max-height: 390px"
+                        :items="entity.ageDistribution"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/packages/core/src/components/core/query/QuerySummaryGrouped.vue b/packages/core/src/components/core/query/QuerySummaryGrouped.vue
@@ -7,7 +7,8 @@ import type {
 import {
     computed, defineComponent, ref, watch,
 } from 'vue';
-import type { QuerySummaryGrouped, QuerySummaryGroupedItem } from '../../../domains';
+import type { KeyValueRecord, KeyValueRecords } from '../../../domains';
+import { generateChartLabelsForKeyValueRecord } from '../../utility/chart/utils';
 
 export default defineComponent({
     props: {
@@ -16,17 +17,17 @@ export default defineComponent({
             default: 'Gruppe',
         },
         items: {
-            type: Array as PropType<QuerySummaryGrouped>,
+            type: Array as PropType<KeyValueRecords>,
             required: true,
         },
     },
     setup(props) {
         const id = ref(undefined) as Ref<string | undefined>;
-        const item = ref(null) as Ref<QuerySummaryGroupedItem | null>;
+        const item = ref(null) as Ref<KeyValueRecord | null>;
 
-        const options = computed<FormSelectOption[]>(() => props.items.map((el) => ({
-            id: el.key.code,
-            value: el.key.display || el.key.code,
+        const options = computed<FormSelectOption[]>(() => props.items.map((el, id) => ({
+            id,
+            value: generateChartLabelsForKeyValueRecord(el),
         })));
 
         watch(id, (val) => {
@@ -35,7 +36,7 @@ export default defineComponent({
                 return;
             }
 
-            const index = props.items.findIndex((el) => el.key.code === val);
+            const index = props.items.findIndex((_el, id) => id === parseInt(val, 10));
             if (index !== -1) {
                 item.value = props.items[index];
             }

diff --git a/packages/core/src/components/core/query/index.ts b/packages/core/src/components/core/query/index.ts
@@ -1 +1,2 @@
 export { default as DQuerySummaryGrouped } from './QuerySummaryGrouped.vue';
+export { default as DQuerySummaryDemographics } from './QuerySummaryDemographics.vue';
diff --git a/packages/core/src/components/utility/chart/DChartBar.vue b/packages/core/src/components/utility/chart/DChartBar.vue
@@ -5,9 +5,8 @@ import type {
 import { Bar } from 'vue-chartjs';
 import type { PropType } from 'vue';
 import { computed, defineComponent } from 'vue';
-import type { Coding, ConceptsCount, MinMaxRange } from '../../../domains';
-import { isCoding, isMinMaxRange } from '../../../domains';
-import { stringToColor } from '../../../utils';
+import type { Coding, KeyValueRecords, MinMaxRange } from '../../../domains';
+import { generateChartBackgroundColorForKeyValueRecord, generateChartLabelsForKeyValueRecord } from './utils';
 
 export default defineComponent({
     components: {
@@ -16,44 +15,16 @@ export default defineComponent({
     props: {
         items: {
             required: true,
-            type: Array as PropType<ConceptsCount<MinMaxRange | Coding | string[]>>,
+            type: Array as PropType<KeyValueRecords<MinMaxRange | Coding | string[] | string>>,
         },
     },
     setup(props) {
         const data = computed<ChartData<'bar'>>(() => ({
             datasets: [{
-                data: props.items.map((item) => item.count),
-                backgroundColor: props.items.map((item) => {
-                    if (isCoding(item.concept)) {
-                        return `${stringToColor(item.concept.display || item.concept.code)}`;
-                    }
-
-                    if (isMinMaxRange(item.concept)) {
-                        return `${stringToColor(`${(item.concept.min + item.concept.max) * 10}`)}`;
-                    }
-
-                    if (Array.isArray(item.concept)) {
-                        return `${stringToColor(item.concept.join('+'))}`;
-                    }
-
-                    return undefined;
-                }),
+                data: props.items.map((item) => item.value),
+                backgroundColor: props.items.map((item) => generateChartBackgroundColorForKeyValueRecord(item)),
             }],
-            labels: props.items.map((item) => {
-                if (isCoding(item.concept)) {
-                    return item.concept.display || item.concept.code;
-                }
-
-                if (isMinMaxRange(item.concept)) {
-                    return `${item.concept.min}-${item.concept.max}`;
-                }
-
-                if (Array.isArray(item.concept)) {
-                    return `${item.concept.join(', ')}`;
-                }
-
-                return undefined;
-            }),
+            labels: props.items.map((item) => generateChartLabelsForKeyValueRecord(item)),
         }));
 
         const options : ChartOptions<'bar'> = {

diff --git a/packages/core/src/components/utility/chart/DChartDoughnut.vue b/packages/core/src/components/utility/chart/DChartDoughnut.vue
@@ -6,9 +6,8 @@ import type {
 import { Doughnut } from 'vue-chartjs';
 import type { PropType } from 'vue';
 import { computed, defineComponent } from 'vue';
-import { stringToColor } from '../../../utils';
-import { isCoding } from '../../../domains';
-import type { Coding, ConceptsCount, MinMaxRange } from '../../../domains';
+import type { Coding, KeyValueRecords, MinMaxRange } from '../../../domains';
+import { generateChartBackgroundColorForKeyValueRecord, generateChartLabelsForKeyValueRecord } from './utils';
 
 export default defineComponent({
     components: {
@@ -17,24 +16,16 @@ export default defineComponent({
     props: {
         items: {
             required: true,
-            type: Array as PropType<ConceptsCount<MinMaxRange | Coding>>,
+            type: Array as PropType<KeyValueRecords<MinMaxRange | Coding>>,
         },
     },
     setup(props) {
         const data = computed<ChartData<'doughnut'>>(() => ({
             datasets: [{
-                data: props.items.map((item) => item.count),
-                backgroundColor: props.items.map(
-                    (item) => (isCoding(item.concept) ?
-                        `${stringToColor(item.concept.display || item.concept.code)}` :
-                        `${stringToColor(`${(item.concept.min + item.concept.max) * 10}`)}`),
-                ),
+                data: props.items.map((item) => item.value),
+                backgroundColor: props.items.map((item) => generateChartBackgroundColorForKeyValueRecord(item)),
             }],
-            labels: props.items.map(
-                (item) => (isCoding(item.concept) ?
-                    item.concept.display || item.concept.code :
-                    `${item.concept.min}-${item.concept.max}`),
-            ),
+            labels: props.items.map((item) => generateChartLabelsForKeyValueRecord(item)),
         }));
 
         const options : ChartOptions<'doughnut'> = {

diff --git a/packages/core/src/components/utility/chart/utils.ts b/packages/core/src/components/utility/chart/utils.ts
@@ -0,0 +1,47 @@
+import type { KeyValueRecord } from '../../../domains';
+import { isCoding, isMinMaxRange } from '../../../domains';
+import { stringToColor } from '../../../utils';
+
+export function generateChartLabelsForKeyValueRecord(
+    item: KeyValueRecord,
+) : string | undefined {
+    if (isCoding(item.key)) {
+        return item.key.display || item.key.code;
+    }
+
+    if (isMinMaxRange(item.key)) {
+        return `${item.key.min}-${item.key.max}`;
+    }
+
+    if (Array.isArray(item.key)) {
+        return `${item.key.join(', ')}`;
+    }
+
+    if (typeof item.key === 'string') {
+        return item.key;
+    }
+
+    return undefined;
+}
+
+export function generateChartBackgroundColorForKeyValueRecord(
+    item: KeyValueRecord,
+) : string | undefined {
+    if (isCoding(item.key)) {
+        return `${stringToColor(item.key.display || item.key.code)}`;
+    }
+
+    if (isMinMaxRange(item.key)) {
+        return `${stringToColor(`${(item.key.min + item.key.max) * 10}`)}`;
+    }
+
+    if (Array.isArray(item.key)) {
+        return `${stringToColor(item.key.join('+'))}`;
+    }
+
+    if (typeof item.key === 'string') {
+        return stringToColor(item.key);
+    }
+
+    return undefined;
+}
diff --git a/packages/core/src/domains/query/types.ts b/packages/core/src/domains/query/types.ts
@@ -1,15 +1,9 @@
 import type { ObjectLiteral } from '../../types';
 import type { Coding } from '../coding';
 import type { PatientFilter } from '../patient';
+import type { KeyValueRecords } from '../types';
 import type { MinMaxRange } from '../utility';
 
-export type ConceptCount<CONCEPT = any> = {
-    concept: CONCEPT,
-    count: number
-};
-
-export type ConceptsCount<CONCEPT = any> = ConceptCount<CONCEPT>[];
-
 export type DiagnosisFilter = {
     category?: Coding[],
 };
@@ -44,16 +38,16 @@ export type QueryBase<
     lastUpdate: string
 };
 
-export type QuerySummaryGroupedItem<K = Coding, V = ConceptsCount<Coding>> = {
+export type QuerySummaryGroupedItem<K = Coding, V = KeyValueRecords<Coding>> = {
     key: K,
     value: V
 };
-export type QuerySummaryGrouped<K = Coding, V = ConceptsCount> = QuerySummaryGroupedItem<K, V>[];
+export type QuerySummaryGrouped<K = Coding, V = KeyValueRecords> = QuerySummaryGroupedItem<K, V>[];
 
 export type QuerySummaryDemographics = {
-    siteDistribution: ConceptsCount<Coding>,
-    genderDistribution: ConceptsCount<Coding>,
-    ageDistribution: ConceptsCount<MinMaxRange>,
+    siteDistribution: KeyValueRecords<Coding>,
+    genderDistribution: KeyValueRecords<Coding>,
+    ageDistribution: KeyValueRecords<MinMaxRange>,
 };
 
 export type QuerySummaryBase = {

diff --git a/packages/core/src/domains/types.ts b/packages/core/src/domains/types.ts
@@ -15,3 +15,9 @@ export type CodeRecord<V extends string = string> = {
     code: V,
     display?: string
 };
+
+export type KeyValueRecord<KEY = any, VALUE = number> = {
+    key: KEY,
+    value: VALUE
+};
+export type KeyValueRecords<KEY = any, VALUE = number> = KeyValueRecord<KEY, VALUE>[];
diff --git a/packages/mtb/src/runtime/components/core/MQuerySummaryMedication.vue b/packages/mtb/src/runtime/components/core/MQuerySummaryMedication.vue
@@ -1,11 +1,12 @@
 <script lang="ts">
-import { DChartBar, DQuerySummaryGrouped } from '@dnpm-dip/core';
+import { DChartBar, DChartDoughnut, DQuerySummaryGrouped } from '@dnpm-dip/core';
 import { type PropType, defineComponent } from 'vue';
 import type { QuerySummaryMedication } from '../../domains';
 
 export default defineComponent({
     components: {
         DChartBar,
+        DChartDoughnut,
         DQuerySummaryGrouped,
     },
     props: {
@@ -32,11 +33,14 @@ export default defineComponent({
                     <h6>Verteilung nach Variante</h6>
 
                     <DQuerySummaryGrouped
-                        :items="entity.recommendations.distributionbySupportingVariant"
+                        :items="entity.recommendations.distributionBySupportingVariant"
                         :label="'Variante'"
                     >
                         <template #default="{ item }">
-                            {{ item }}
+                            <DChartDoughnut
+                                style="max-height: 450px"
+                                :items="item.value"
+                            />
                         </template>
                     </DQuerySummaryGrouped>
                 </div>
@@ -61,7 +65,10 @@ export default defineComponent({
                         :label="'Variante'"
                     >
                         <template #default="{ item }">
-                            {{ item }}
+                            <DChartDoughnut
+                                style="max-height: 450px"
+                                :items="item.value"
+                            />
                         </template>
                     </DQuerySummaryGrouped>
                 </div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { default as DQuerySummaryGrouped } from './QuerySummaryGrouped.vue';
		export { default as DQuerySummaryDemographics } from './QuerySummaryDemographics.vue';