rollback to old usage charts

package.json

@@ -20,7 +20,7 @@
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
         "@analytics/google-tag-manager": "^0.5.3",
-        "@appwrite.io/console": "npm:matej-appwrite-console@7.1.126",
+        "@appwrite.io/console": "npm:khushboo-console-vcs@0.0.24",
         "@appwrite.io/pink": "0.1.0-next.4",
         "@appwrite.io/pink-icons": "^0.1.0-next.4",
         "@popperjs/core": "^2.11.6",

src/lib/layout/usage.svelte

@@ -13,10 +13,12 @@
 
 <script lang="ts">
     import { Container } from '$lib/layout';
-    import { BarChart } from '$lib/charts';
+    import { BarChart, LineChart } from '$lib/charts';
     import { Card, SecondaryTabs, SecondaryTabsItem, Heading } from '$lib/components';
+    import { Colors } from '$lib/charts/config';
     import type { Models } from '@appwrite.io/console';
     import { page } from '$app/stores';
+    import { Tiles } from '../components/index.js';
 
     type MetricMetadata = {
         title: string;
@@ -25,7 +27,16 @@
 
     export let title: string;
     export let count: Models.Metric[];
+    export let created: Models.Metric[];
+    export let read: Models.Metric[];
+    export let updated: Models.Metric[];
+    export let deleted: Models.Metric[];
+
     export let countMetadata: MetricMetadata;
+    export let createdMetadata: MetricMetadata;
+    export let readMetadata: MetricMetadata;
+    export let updatedMetadata: MetricMetadata;
+    export let deletedMetadata: MetricMetadata;
     export let path: string = null;
 </script>
 
@@ -62,6 +73,76 @@
             </div>
         {/if}
     </Card>
+    <Tiles>
+        <Card isTile>
+            {#if created}
+                <Heading tag="h6" size="6">{total(created)}</Heading>
+                <p>{createdMetadata.title}</p>
+                <div class="u-margin-block-start-16" />
+                <div class="chart-container">
+                    <LineChart
+                        series={[
+                            {
+                                name: createdMetadata.legend,
+                                data: [...created.map((e) => [e.date, e.value])],
+                                color: Colors.Secondary
+                            }
+                        ]} />
+                </div>
+            {/if}
+        </Card>
+        <Card isTile>
+            {#if read}
+                <Heading tag="h6" size="6">{total(read)}</Heading>
+                <p>{readMetadata.title}</p>
+                <div class="u-margin-block-start-16" />
+                <div class="chart-container">
+                    <LineChart
+                        series={[
+                            {
+                                name: readMetadata.legend,
+                                data: [...read.map((e) => [e.date, e.value])],
+                                color: Colors.Tertiary
+                            }
+                        ]} />
+                </div>
+            {/if}
+        </Card>
+        <Card isTile>
+            {#if updated}
+                <Heading tag="h6" size="6">{total(updated)}</Heading>
+                <p>{updatedMetadata.title}</p>
+                <div class="u-margin-block-start-16" />
+                <div class="chart-container">
+                    <LineChart
+                        series={[
+                            {
+                                name: updatedMetadata.legend,
+                                data: [...updated.map((e) => [e.date, e.value])],
+                                color: Colors.Quaternary
+                            }
+                        ]} />
+                </div>
+            {/if}
+        </Card>
+        <Card isTile>
+            {#if deleted}
+                <Heading tag="h6" size="6">{total(deleted)}</Heading>
+                <p>{deletedMetadata.title}</p>
+                <div class="u-margin-block-start-16" />
+                <div class="chart-container">
+                    <LineChart
+                        series={[
+                            {
+                                name: deletedMetadata.legend,
+                                data: [...deleted.map((e) => [e.date, e.value])],
+                                color: Colors.Quinary
+                            }
+                        ]} />
+                </div>
+            {/if}
+        </Card>
+    </Tiles>
 </Container>
 
 <style lang="scss">

src/routes/console/project-[project]/auth/usage/[[period]]/+page.svelte

@@ -5,14 +5,38 @@
 
     export let data: PageData;
 
-    $: count = data.usersTotal;
+    $: count = data.count;
+    $: created = data.created;
+    $: read = data.read;
+    $: updated = data.updated;
+    $: deleted = data.deleted;
 </script>
 
 <Usage
     title="Users"
     path={`/console/project-${$page.params.project}/auth/usage`}
     {count}
+    {created}
+    {read}
+    {updated}
+    {deleted}
     countMetadata={{
         legend: 'Users',
         title: 'Registered users'
+    }}
+    createdMetadata={{
+        legend: 'Create',
+        title: 'Users created'
+    }}
+    readMetadata={{
+        legend: 'Read',
+        title: 'Users read'
+    }}
+    updatedMetadata={{
+        legend: 'Update',
+        title: 'Users updated'
+    }}
+    deletedMetadata={{
+        legend: 'Delete',
+        title: 'Users deleted'
     }} />

src/routes/console/project-[project]/auth/usage/[[period]]/+page.ts

@@ -8,7 +8,11 @@ export const load: PageLoad = async ({ params }) => {
     try {
         const response = await sdk.forProject.users.getUsage(period ?? '30d');
         return {
-            usersTotal: response.usersTotal as unknown as Models.Metric[]
+            count: response.usersCount as unknown as Models.Metric[],
+            created: response.usersCreate as unknown as Models.Metric[],
+            read: response.usersRead as unknown as Models.Metric[],
+            updated: response.usersUpdate as unknown as Models.Metric[],
+            deleted: response.usersDelete as unknown as Models.Metric[]
         };
     } catch (e) {
         throw error(e.code, e.message);

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte

@@ -5,14 +5,38 @@
 
     export let data: PageData;
 
-    $: count = data.documentsTotal;
+    $: count = data.count;
+    $: created = data.created;
+    $: read = data.read;
+    $: updated = data.updated;
+    $: deleted = data.deleted;
 </script>
 
 <Usage
     title="Databases"
     path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/usage`}
     {count}
+    {created}
+    {read}
+    {updated}
+    {deleted}
     countMetadata={{
         legend: 'Documents',
         title: 'Total documents'
+    }}
+    createdMetadata={{
+        legend: 'Create',
+        title: 'Documents created'
+    }}
+    readMetadata={{
+        legend: 'Read',
+        title: 'Documents read'
+    }}
+    updatedMetadata={{
+        legend: 'Update',
+        title: 'Documents updated'
+    }}
+    deletedMetadata={{
+        legend: 'Delete',
+        title: 'Documents deleted'
     }} />

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.ts

@@ -10,6 +10,10 @@ export const load: PageLoad = async ({ params }) => {
     );
 
     return {
-        documentsTotal: response.documentsTotal as unknown as Models.Metric[]
+        count: response.documentsCount as unknown as Models.Metric[],
+        created: response.documentsCreate as unknown as Models.Metric[],
+        read: response.documentsRead as unknown as Models.Metric[],
+        updated: response.documentsUpdate as unknown as Models.Metric[],
+        deleted: response.documentsDelete as unknown as Models.Metric[]
     };
 };

src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte

@@ -5,14 +5,38 @@
 
     export let data: PageData;
 
-    $: count = data.collectionsTotal;
+    $: count = data.count;
+    $: created = data.created;
+    $: read = data.read;
+    $: updated = data.updated;
+    $: deleted = data.deleted;
 </script>
 
 <Usage
     title="Databases"
     path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}/usage`}
     {count}
+    {created}
+    {read}
+    {updated}
+    {deleted}
     countMetadata={{
         legend: 'Collections',
         title: 'Total collections'
+    }}
+    createdMetadata={{
+        legend: 'Create',
+        title: 'Collections created'
+    }}
+    readMetadata={{
+        legend: 'Read',
+        title: 'Collections read'
+    }}
+    updatedMetadata={{
+        legend: 'Update',
+        title: 'Collections updated'
+    }}
+    deletedMetadata={{
+        legend: 'Delete',
+        title: 'Collections deleted'
     }} />

src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.ts

@@ -9,6 +9,10 @@ export const load: PageLoad = async ({ params }) => {
     );
 
     return {
-        collectionsTotal: response.collectionsTotal as unknown as Models.Metric[]
+        count: response.collectionsCount as unknown as Models.Metric[],
+        created: response.collectionsCreate as unknown as Models.Metric[],
+        read: response.collectionsRead as unknown as Models.Metric[],
+        updated: response.collectionsUpdate as unknown as Models.Metric[],
+        deleted: response.collectionsDelete as unknown as Models.Metric[]
     };
 };

src/routes/console/project-[project]/databases/usage/[[period]]/+page.svelte

@@ -5,14 +5,38 @@
 
     export let data: PageData;
 
-    $: count = data.databasesTotal;
+    $: count = data.count;
+    $: created = data.created;
+    $: read = data.read;
+    $: updated = data.updated;
+    $: deleted = data.deleted;
 </script>
 
 <Usage
     title="Databases"
     path={`/console/project-${$page.params.project}/databases/usage`}
     {count}
+    {created}
+    {read}
+    {updated}
+    {deleted}
     countMetadata={{
         legend: 'Databases',
         title: 'Total databases'
+    }}
+    createdMetadata={{
+        legend: 'Create',
+        title: 'Databases created'
+    }}
+    readMetadata={{
+        legend: 'Read',
+        title: 'Databases read'
+    }}
+    updatedMetadata={{
+        legend: 'Update',
+        title: 'Databases updated'
+    }}
+    deletedMetadata={{
+        legend: 'Delete',
+        title: 'Databases deleted'
     }} />

src/routes/console/project-[project]/databases/usage/[[period]]/+page.ts

@@ -8,7 +8,11 @@ export const load: PageLoad = async ({ params }) => {
     try {
         const response = await sdk.forProject.databases.getUsage(period ?? '30d');
         return {
-            databasesTotal: response.databasesTotal as unknown as Models.Metric[]
+            count: response.databasesCount as unknown as Models.Metric[],
+            created: response.databasesCreate as unknown as Models.Metric[],
+            read: response.databasesRead as unknown as Models.Metric[],
+            updated: response.databasesUpdate as unknown as Models.Metric[],
+            deleted: response.databasesDelete as unknown as Models.Metric[]
         };
     } catch (e) {
         throw error(e.code, e.message);

src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte

@@ -7,7 +7,9 @@
     import type { PageData } from './$types';
 
     export let data: PageData;
-    $: count = data.executionsTotal;
+
+    $: count = data.count;
+    $: errors = data.errors;
 </script>
 
 <Container>
@@ -45,4 +47,18 @@
                 ]} />
         </Card>
     {/if}
+    {#if errors}
+        <Card>
+            <Heading tag="h6" size="6">{total(errors)}</Heading>
+            <p>Errors</p>
+            <div class="u-margin-block-start-16" />
+            <BarChart
+                series={[
+                    {
+                        name: 'Count of function errors over time',
+                        data: [...errors.map((e) => [e.date, e.value])]
+                    }
+                ]} />
+        </Card>
+    {/if}
 </Container>