Merge branch 'dev/create_data_views' into 'master'

Dev/create data views

See merge request klawr/walter!77

Deeplex.Saverwalter.WebAPI/svelte/package.json

@@ -14,6 +14,8 @@
         "vitest:ui": "vitest --coverage --ui"
     },
     "devDependencies": {
+        "@carbon/charts-svelte": "^1.11.21",
+        "@carbon/styles": "^1.36.0",
         "@sveltejs/adapter-auto": "^2.1.0",
         "@sveltejs/adapter-static": "^2.0.2",
         "@sveltejs/kit": "^1.0.0-next.587",
@@ -26,6 +28,9 @@
         "@vitest/ui": "^0.33.0",
         "carbon-components-svelte": "^0.77.0",
         "carbon-icons-svelte": "^12.0.0",
+        "d3": "^7.8.5",
+        "d3-cloud": "^1.2.7",
+        "d3-sankey": "^0.12.3",
         "eslint": "^8.28.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-svelte3": "^4.0.0",

Deeplex.Saverwalter.WebAPI/svelte/src/components/subdetails/WalterAbrechnung.svelte → Deeplex.Saverwalter.WebAPI/svelte/src/components/abrechnung/WalterAbrechnung.svelte

@@ -7,12 +7,13 @@
         WalterAbrechnungNotes,
         WalterAbrechnungResultat,
         WalterMieten,
+        WalterAbrechnungNebenkosten,
     } from '$walter/components';
     import { convertDateCanadian, convertDateGerman, convertEuro } from '$walter/services/utils';
     import type { WalterBetriebskostenabrechnungEntry } from '$walter/types';
     import { Accordion, Column, Loading, Row, TextInput, Tile } from 'carbon-components-svelte';
-    import WalterAbrechnungNebenkosten from './WalterAbrechnungNebenkosten.svelte';
     import type { WalterMieteEntry } from '$walter/lib';
+    import WalterData from '../data/WalterData.svelte';
 
     export let abrechnung: WalterBetriebskostenabrechnungEntry;
     export let title: string | undefined;
@@ -61,7 +62,7 @@
             <WalterAbrechnungNotes {abrechnung}/>
         {/if}
     </Row>
-
+    
     <Row>
         <TextInput
             placeholder="Nutzungsbeginn"
@@ -78,6 +79,7 @@
     </Row>
 
     <Accordion>
+        <WalterData {abrechnung} />
         <WalterMieten
             entry={mietEntry}
             title="Gezahlte Mieten ({abrechnung.gezahltMiete}€)"

Deeplex.Saverwalter.WebAPI/svelte/src/components/subdetails/WalterAbrechnungEinheitKalt.svelte → Deeplex.Saverwalter.WebAPI/svelte/src/components/abrechnung/WalterAbrechnungEinheitKalt.svelte

@@ -2,6 +2,11 @@
     import { convertM2 } from '$walter/services/utils';
     import type { WalterAbrechnungseinheit } from '$walter/types';
     import type {  WalterZeitraum } from '$walter/types/WalterBetriebskostenabrechnung.type';
+    import {
+        WalterAbrechnungEinheitHead,
+        WalterAbrechnungEinheitPart,
+        WalterAbrechnungEinheitVerbrauch
+    } from '$walter/components'
     import {
         Row,
         StructuredList,
@@ -11,9 +16,6 @@
         StructuredListRow,
         Tile
     } from 'carbon-components-svelte';
-    import WalterAbrechnungEinheitPart from './WalterAbrechnungEinheitPart.svelte';
-    import WalterAbrechnungEinheitHead from './WalterAbrechnungEinheitHead.svelte';
-    import WalterAbrechnungEinheitVerbrauch from './WalterAbrechnungEinheitVerbrauch.svelte';
 
     export let einheit: WalterAbrechnungseinheit;
     export let zeitraum: WalterZeitraum;

Deeplex.Saverwalter.WebAPI/svelte/src/components/data/WalterData.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import type { WalterBetriebskostenabrechnungEntry } from "$walter/types";
+    import { Accordion, AccordionItem, ExpandableTile, Row } from "carbon-components-svelte";
+    import WalterRechnungAenderung from "./WalterRechnungAenderung.svelte";
+    import WalterRechnungAenderung2 from "./WalterRechnungAenderung2.svelte";
+    import WalterRechnungVerteilung from "./WalterRechnungVerteilung.svelte";
+
+    export let abrechnung: WalterBetriebskostenabrechnungEntry;
+</script>
+
+<AccordionItem title="Übersicht">
+    <WalterRechnungVerteilung {abrechnung} />
+    <WalterRechnungAenderung {abrechnung}/>
+    <WalterRechnungAenderung2 {abrechnung}/>    
+</AccordionItem>

Deeplex.Saverwalter.WebAPI/svelte/src/components/data/WalterRechnungAenderung.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import '@carbon/styles/css/styles.css'
+	import '@carbon/charts-svelte/styles.css'
+	import { BarChartSimple } from '@carbon/charts-svelte'
+    import type { WalterBetriebskostenabrechnungEntry, WalterRechnungEntry } from '$walter/types';
+    import { convertToData } from './WalterRechnungAenderung';
+
+    export let abrechnung: WalterBetriebskostenabrechnungEntry;
+    const rechnungen = abrechnung.abrechnungseinheiten.flatMap(einheit => einheit.rechnungen);
+
+    const data = convertToData(rechnungen);
+	const options = {
+		legend: { enabled: false },
+		title: 'Änderung der Rechnungen',
+		height: '400px',
+		axes: {
+			bottom: { mapsTo: 'value', title: 'Betrag'  },
+			left: { mapsTo: 'group', scaleType: 'labels', title: 'Rechnung' }
+		}
+	} as any; // TODO scaleType is not correct
+</script>
+
+<BarChartSimple {data} {options} />

Deeplex.Saverwalter.WebAPI/svelte/src/components/data/WalterRechnungAenderung.ts

@@ -0,0 +1,9 @@
+import type { WalterRechnungEntry } from '$walter/types';
+
+export function convertToData(rechnungen: WalterRechnungEntry[]) {
+    return rechnungen.map((e) => ({
+        ...e,
+        group: e.typ,
+        value: [e.betragLetztesJahr, e.gesamtBetrag]
+    }));
+}

Deeplex.Saverwalter.WebAPI/svelte/src/components/data/WalterRechnungAenderung2.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import '@carbon/styles/css/styles.css'
+	import '@carbon/charts-svelte/styles.css'
+	import { BarChartSimple } from '@carbon/charts-svelte'
+    import type { WalterBetriebskostenabrechnungEntry, WalterRechnungEntry } from '$walter/types';
+    import { convertToData } from './WalterRechnungAenderung2';
+
+    export let abrechnung: WalterBetriebskostenabrechnungEntry;
+    const rechnungen = abrechnung.abrechnungseinheiten.flatMap(einheit => einheit.rechnungen);
+
+    const data = convertToData(rechnungen);
+	const options = {
+		legend: { enabled: false },
+		title: 'Änderung der Rechnungen',
+		height: '400px',
+		axes: {
+			bottom: { mapsTo: 'value', title: 'Betrag'  },
+			left: { mapsTo: 'group', scaleType: 'labels', title: 'Rechnung' }
+		}
+	} as any; // TODO scaleType is not correct
+</script>
+
+<BarChartSimple {data} {options} />

Deeplex.Saverwalter.WebAPI/svelte/src/components/data/WalterRechnungAenderung2.ts

@@ -0,0 +1,9 @@
+import type { WalterRechnungEntry } from '$walter/types';
+
+export function convertToData(rechnungen: WalterRechnungEntry[]) {
+    return rechnungen.map((e) => ({
+        ...e,
+        group: e.typ,
+        value: e.gesamtBetrag - e.betragLetztesJahr
+    }));
+}

Deeplex.Saverwalter.WebAPI/svelte/src/components/data/WalterRechnungVerteilung.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import '@carbon/styles/css/styles.css'
+	import '@carbon/charts-svelte/styles.css'
+	import { PieChart } from '@carbon/charts-svelte'
+    import type { WalterBetriebskostenabrechnungEntry } from '$walter/types';
+    import { convertToData } from './WalterRechnungVerteilung';
+
+    export let abrechnung: WalterBetriebskostenabrechnungEntry;
+    const rechnungen = abrechnung.abrechnungseinheiten.flatMap(einheit => einheit.rechnungen);
+
+    const data = convertToData(rechnungen);
+    const options = {
+		legend: { enabled: false },
+		title: 'Rechnungen',
+		height: '400px',
+	};
+</script>
+
+<PieChart {data} {options} />

Deeplex.Saverwalter.WebAPI/svelte/src/components/data/WalterRechnungVerteilung.ts

@@ -0,0 +1,8 @@
+import type { WalterRechnungEntry } from '$walter/types';
+
+export function convertToData(rechnungen: WalterRechnungEntry[]) {
+    return rechnungen.map((e) => ({
+        group: e.typ,
+        value: e.gesamtBetrag
+    }));
+}

Deeplex.Saverwalter.WebAPI/svelte/src/components/index.ts

@@ -1,13 +1,18 @@
+export { default as WalterAbrechnung } from './abrechnung/WalterAbrechnung.svelte';
+export { default as WalterAbrechnungGruppe } from './abrechnung/WalterAbrechnungGruppe.svelte';
+export { default as WalterAbrechnungEinheitKalt } from './abrechnung/WalterAbrechnungEinheitKalt.svelte';
+export { default as WalterAbrechnungEinheitWarm } from './abrechnung/WalterAbrechnungEinheitWarm.svelte';
+export { default as WalterAbrechnungResultat } from './abrechnung/WalterAbrechnungResultat.svelte';
+export { default as WalterAbrechnungNebenkosten } from './abrechnung/WalterAbrechnungNebenkosten.svelte';
+export { default as WalterAbrechnungNotes } from './abrechnung/WalterAbrechnungNotes.svelte';
+export { default as WalterAbrechnungHeizkosten } from './abrechnung/WalterAbrechnungHeizkosten.svelte';
+export { default as WalterAbrechnungEinheitPart } from './abrechnung/WalterAbrechnungEinheitPart.svelte';
+export { default as WalterAbrechnungEinheitHead } from './abrechnung/WalterAbrechnungEinheitHead.svelte';
+export { default as WalterAbrechnungEinheitVerbrauch } from './abrechnung/WalterAbrechnungEinheitVerbrauch.svelte';
+
 export { default as WalterAnhaenge } from './subdetails/WalterAnhaenge.svelte';
 export { default as WalterAnhaengeEntry } from './subdetails/WalterAnhaengeEntry.svelte';
 export { default as WalterPerson } from './subdetails/WalterPerson.svelte';
-export { default as WalterAbrechnung } from './subdetails/WalterAbrechnung.svelte';
-export { default as WalterAbrechnungGruppe } from './subdetails/WalterAbrechnungGruppe.svelte';
-export { default as WalterAbrechnungEinheitKalt } from './subdetails/WalterAbrechnungEinheitKalt.svelte';
-export { default as WalterAbrechnungEinheitWarm } from './subdetails/WalterAbrechnungEinheitWarm.svelte';
-export { default as WalterAbrechnungResultat } from './subdetails/WalterAbrechnungResultat.svelte';
-export { default as WalterAbrechnungNotes } from './subdetails/WalterAbrechnungNotes.svelte';
-export { default as WalterAbrechnungHeizkosten } from './subdetails/WalterAbrechnungHeizkosten.svelte';
 export { default as WalterLinks } from './subdetails/WalterLinks.svelte';
 export { default as WalterLinkTile } from './subdetails/WalterLinkTile.svelte';
 export { default as WalterLink } from './subdetails/WalterLink.svelte';

Deeplex.Saverwalter.WebAPI/svelte/svelte.config.js

@@ -7,7 +7,9 @@ const config = {
     // Consult https://kit.svelte.dev/docs/integrations#preprocessors
     // for more information about preprocessors
     preprocess: vitePreprocess(),
-
+    ssr: {
+		noExternal: process.env.NODE_ENV === 'production' ? ['@carbon/charts'] : []
+	},
     kit: {
         adapter: adapter({
             fallback: 'index.html',