From bacdcfe973ec6cbdcef8b5ff41b759e56af49fa8 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 2 Nov 2022 13:50:33 +0100
Subject: [PATCH] fix: realtime stats

---
 src/lib/charts/base.svelte                    |  1 +
 src/lib/layout/usage.svelte                   | 72 ++++++++++---------
 .../console/project-[project]/+layout.svelte  | 21 ++++++
 .../project-[project]/overview/+layout.svelte | 64 +++++++++--------
 src/routes/console/project-[project]/store.ts | 36 +++++++++-
 5 files changed, 132 insertions(+), 62 deletions(-)

diff --git a/src/lib/charts/base.svelte b/src/lib/charts/base.svelte
index 54d8e2907..91a5064a0 100644
--- a/src/lib/charts/base.svelte
+++ b/src/lib/charts/base.svelte
@@ -86,5 +86,6 @@
     .echart {
         width: 100%;
         min-height: 12rem;
+        height: 100%;
     }
 </style>
diff --git a/src/lib/layout/usage.svelte b/src/lib/layout/usage.svelte
index 8b07ff126..a2c5860c4 100644
--- a/src/lib/layout/usage.svelte
+++ b/src/lib/layout/usage.svelte
@@ -75,14 +75,16 @@
                 <Heading tag="h6" size="6">{total(created)}</Heading>
                 <p>{createdMetadata.title}</p>
                 <div class="u-margin-block-start-16" />
-                <LineChart
-                    series={[
-                        {
-                            name: createdMetadata.legend,
-                            data: [...created.map((e) => [e.date, e.value])],
-                            color: Colors.Secondary
-                        }
-                    ]} />
+                <div style="height: 12rem;">
+                    <LineChart
+                        series={[
+                            {
+                                name: createdMetadata.legend,
+                                data: [...created.map((e) => [e.date, e.value])],
+                                color: Colors.Secondary
+                            }
+                        ]} />
+                </div>
             {/if}
         </Card>
         <Card isTile>
@@ -90,14 +92,16 @@
                 <Heading tag="h6" size="6">{total(read)}</Heading>
                 <p>{readMetadata.title}</p>
                 <div class="u-margin-block-start-16" />
-                <LineChart
-                    series={[
-                        {
-                            name: readMetadata.legend,
-                            data: [...read.map((e) => [e.date, e.value])],
-                            color: Colors.Tertiary
-                        }
-                    ]} />
+                <div style="height: 12rem;">
+                    <LineChart
+                        series={[
+                            {
+                                name: readMetadata.legend,
+                                data: [...read.map((e) => [e.date, e.value])],
+                                color: Colors.Tertiary
+                            }
+                        ]} />
+                </div>
             {/if}
         </Card>
         <Card isTile>
@@ -105,14 +109,16 @@
                 <Heading tag="h6" size="6">{total(updated)}</Heading>
                 <p>{updatedMetadata.title}</p>
                 <div class="u-margin-block-start-16" />
-                <LineChart
-                    series={[
-                        {
-                            name: updatedMetadata.legend,
-                            data: [...updated.map((e) => [e.date, e.value])],
-                            color: Colors.Quaternary
-                        }
-                    ]} />
+                <div style="height: 12rem;">
+                    <LineChart
+                        series={[
+                            {
+                                name: updatedMetadata.legend,
+                                data: [...updated.map((e) => [e.date, e.value])],
+                                color: Colors.Quaternary
+                            }
+                        ]} />
+                </div>
             {/if}
         </Card>
         <Card isTile>
@@ -120,14 +126,16 @@
                 <Heading tag="h6" size="6">{total(deleted)}</Heading>
                 <p>{deletedMetadata.title}</p>
                 <div class="u-margin-block-start-16" />
-                <LineChart
-                    series={[
-                        {
-                            name: deletedMetadata.legend,
-                            data: [...deleted.map((e) => [e.date, e.value])],
-                            color: Colors.Quinary
-                        }
-                    ]} />
+                <div style="height: 12rem;">
+                    <LineChart
+                        series={[
+                            {
+                                name: deletedMetadata.legend,
+                                data: [...deleted.map((e) => [e.date, e.value])],
+                                color: Colors.Quinary
+                            }
+                        ]} />
+                </div>
             {/if}
         </Card>
     </Tiles>
diff --git a/src/routes/console/project-[project]/+layout.svelte b/src/routes/console/project-[project]/+layout.svelte
index 6b69070e6..004daed0f 100644
--- a/src/routes/console/project-[project]/+layout.svelte
+++ b/src/routes/console/project-[project]/+layout.svelte
@@ -1,5 +1,26 @@
 <script lang="ts">
     import { UploadBox } from '$lib/components';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onDestroy, onMount } from 'svelte';
+    import { stats } from './store';
+
+    let unsubscribe: { (): void };
+
+    onMount(() => {
+        unsubscribe = sdkForConsole.client.subscribe(['project', 'console'], (response) => {
+            if (response.events.includes('stats.connections')) {
+                for (const [projectId, value] of Object.entries(response.payload)) {
+                    stats.add(projectId, [new Date(response.timestamp).toISOString(), value]);
+                }
+            }
+        });
+    });
+
+    onDestroy(() => {
+        if (unsubscribe) {
+            unsubscribe();
+        }
+    });
 </script>
 
 <slot />
diff --git a/src/routes/console/project-[project]/overview/+layout.svelte b/src/routes/console/project-[project]/overview/+layout.svelte
index 87145363e..c76947b11 100644
--- a/src/routes/console/project-[project]/overview/+layout.svelte
+++ b/src/routes/console/project-[project]/overview/+layout.svelte
@@ -2,9 +2,7 @@
     import type { Models } from '@aw-labs/appwrite-console';
     import { Container, type UsagePeriods } from '$lib/layout';
     import { page } from '$app/stores';
-    import { browser } from '$app/environment';
-    import { sdkForConsole } from '$lib/stores/sdk';
-    import { project } from '../store';
+    import { project, stats } from '../store';
     import { usage } from './store';
     import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
@@ -14,7 +12,7 @@
 
     $: projectId = $page.params.project;
     $: path = `/console/project-${projectId}/overview`;
-
+    $: console.log($stats.get(projectId));
     let period: UsagePeriods = '30d';
     let showPeriodBandwidth = false;
     let showPeriodRequests = false;
@@ -55,15 +53,6 @@
         showPeriodRequests = false;
     }
 
-    if (browser) {
-        sdkForConsole.client.subscribe<unknown>('console', (message) => {
-            if (message.events.includes('stats.connections')) {
-                // TODO: take care of realtime connections
-                return;
-            }
-        });
-    }
-
     //TODO: workaround for broken types
     $: network = $usage?.network as unknown as Array<{
         date: number;
@@ -119,13 +108,15 @@
                             </DropList>
                         </div>
                         {#if network.length}
-                            <BarChart
-                                series={[
-                                    {
-                                        name: 'Bandwidth',
-                                        data: [...network.map((e) => [e.date, e.value])]
-                                    }
-                                ]} />
+                            <div style="height: 12rem;">
+                                <BarChart
+                                    series={[
+                                        {
+                                            name: 'Bandwidth',
+                                            data: [...network.map((e) => [e.date, e.value])]
+                                        }
+                                    ]} />
+                            </div>
                         {/if}
                     </div>
                     <div class="card is-2-columns-medium-screen is-3-columns-large-screen">
@@ -160,13 +151,15 @@
                             </DropList>
                         </div>
                         {#if network.length}
-                            <LineChart
-                                series={[
-                                    {
-                                        name: 'Requests',
-                                        data: [...requests.map((e) => [e.date, e.value])]
-                                    }
-                                ]} />
+                            <div style="height: 12rem;">
+                                <LineChart
+                                    series={[
+                                        {
+                                            name: 'Requests',
+                                            data: [...requests.map((e) => [e.date, e.value])]
+                                        }
+                                    ]} />
+                            </div>
                         {/if}
                     </div>
                     <div class="card is-2-columns-large-screen">
@@ -262,8 +255,21 @@
                     </div>
                     <div
                         class="card is-2-columns-medium-screen is-2-columns-large-screen is-2-rows-large-screen is-location-row-2-end-large-screen">
-                        <div class="heading-level-4">XX</div>
-                        <div>Realtime Connections</div>
+                        {#if $stats.get(projectId)}
+                            <div class="heading-level-4">
+                                {format($stats.get(projectId)[11][1])}
+                            </div>
+                            <div>Realtime Connections</div>
+                            <BarChart
+                                series={[
+                                    {
+                                        name: 'Realtime connection',
+                                        data: $stats.get(projectId)
+                                    }
+                                ]} />
+                        {:else}
+                            <div>waiting for realtime connections</div>
+                        {/if}
                     </div>
                 </div>
             </section>
diff --git a/src/routes/console/project-[project]/store.ts b/src/routes/console/project-[project]/store.ts
index c1ca42ac1..97c2372ec 100644
--- a/src/routes/console/project-[project]/store.ts
+++ b/src/routes/console/project-[project]/store.ts
@@ -1,5 +1,39 @@
-import { derived } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
 import { page } from '$app/stores';
 import type { Models } from '@aw-labs/appwrite-console';
+import type { BarSeriesOption } from 'echarts/charts';
 
 export const project = derived(page, ($page) => $page.data.project as Models.Project);
+
+function createStats() {
+    const { subscribe, set, update } = writable<Map<string, BarSeriesOption['data']>>(new Map());
+
+    return {
+        subscribe,
+        add: (projectId: string, data: BarSeriesOption['data'][number]) =>
+            update((n) => {
+                let series = n.get(projectId) ?? [];
+
+                if (series.length === 0) {
+                    const date = new Date(data[0]);
+                    for (let i = 0; i < 12; i++) {
+                        series.push([date.toISOString(), 0]);
+                        date.setSeconds(date.getSeconds() - 5);
+                    }
+                }
+
+                series.push(data);
+
+                if (series.length > 12) {
+                    series = series.slice(-12);
+                }
+
+                n.set(projectId, series);
+
+                return n;
+            }),
+        reset: () => set(new Map())
+    };
+}
+
+export const stats = createStats();