new: custom legend and usage component.

src/lib/charts/index.ts

@@ -1,2 +1,3 @@
 export { default as BarChart } from './bar.svelte';
 export { default as LineChart } from './line.svelte';
+export { default as Legend, type LegendData } from './legend.svelte';

src/lib/charts/legend.svelte

@@ -0,0 +1,23 @@
+<script context="module" lang="ts">
+    export type LegendData = {
+        name: string;
+        value: string | number | boolean;
+    };
+</script>
+
+<script lang="ts">
+    import { Colors } from '$lib/charts/config';
+
+    export let legendData: LegendData[] = [];
+
+    let colors = Object.values(Colors);
+</script>
+
+<div class="u-flex u-cross-center u-gap-16">
+    {#each legendData as { name, value }, index}
+        <div class="status u-flex u-cross-baseline u-gap-8">
+            <span class="status-icon" style:background-color={colors[index % colors.length]} />
+            <span>{name} ({value})</span>
+        </div>
+    {/each}
+</div>

src/lib/layout/index.ts

@@ -13,6 +13,7 @@ export { default as WizardStep } from './wizardStep.svelte';
 export { default as Breadcrumbs } from './breadcrumbs.svelte';
 export { default as Unauthenticated } from './unauthenticated.svelte';
 export { default as Usage, type UsagePeriods } from './usage.svelte';
+export { default as UsageMultiple } from './usageMultiple.svelte';
 export { default as Activity } from './activity.svelte';
 export { default as Progress } from './progress.svelte';
 export { default as GridHeader } from './gridHeader.svelte';

src/lib/layout/usageMultiple.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    import { Container } from '$lib/layout';
+    import { BarChart, Legend, type LegendData } from '$lib/charts';
+    import { accumulateFromEndingTotal } from '$lib/layout/usage.svelte';
+    import { Card, Heading, SecondaryTabs, SecondaryTabsItem } from '$lib/components';
+    import { page } from '$app/stores';
+    import { type Models } from '@appwrite.io/console';
+
+    export let title: string;
+    export let total: number[];
+    export let path: string = null;
+    export let count: Models.Metric[][];
+    export let legendData: LegendData[];
+</script>
+
+<Container>
+    <div class="u-flex u-main-space-between common-section">
+        <Heading tag="h2" size="5">{title}</Heading>
+        {#if path}
+            <SecondaryTabs>
+                <SecondaryTabsItem href={`${path}/24h`} disabled={$page.params.period === '24h'}>
+                    24h
+                </SecondaryTabsItem>
+                <SecondaryTabsItem
+                    href={`${path}/30d`}
+                    disabled={!$page.params.period || $page.params.period === '30d'}>
+                    30d
+                </SecondaryTabsItem>
+                <SecondaryTabsItem href={`${path}/90d`} disabled={$page.params.period === '90d'}>
+                    90d
+                </SecondaryTabsItem>
+            </SecondaryTabs>
+        {/if}
+    </div>
+    <Card>
+        {#if count}
+            <div class="u-flex-vertical">
+                <div class="chart-container">
+                    <BarChart
+                        formatted={$page.params.period === '24h' ? 'hours' : 'days'}
+                        series={count.map((c, index) => ({
+                            name: legendData[index].name,
+                            data: accumulateFromEndingTotal(c, total[index])
+                        }))} />
+                </div>
+
+                {#if legendData}
+                    <Legend {legendData} />
+                {/if}
+            </div>
+        {/if}
+    </Card>
+</Container>
+
+<style lang="scss">
+    .chart-container {
+        height: 12rem;
+    }
+
+    :global(.chart-container .echart) {
+        margin-top: -1rem;
+    }
+</style>