console/src/lib/layout/usageMultiple.svelte at 36a5c61504aeff3751c3ba7291dc2dcda74dfc8d · appwrite/console · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script lang="ts">
    import { BarChart, Legend } from '$lib/charts';
    import { Card } from '$lib/components';
    import { page } from '$app/state';
    import { type Models } from '@appwrite.io/console';
    import { Layout, Typography } from '@appwrite.io/pink-svelte';

    export let title: string;
    export let description: string = '';
    export let count: Models.Metric[][];
    export let seriesNames: string[];
    export let showHeader: boolean = true;
</script>

<div>
    {#if showHeader}
        <div class="u-flex u-main-space-between common-section">
            <Typography.Title>{title}</Typography.Title>
        </div>
    {/if}

    <Card>
        {#if count}
            {#if description}
                <Layout.Stack gap="xs">
                    <Typography.Text>{description}</Typography.Text>
                </Layout.Stack>
            {/if}
            <div class="multiple-chart-container u-flex-vertical u-gap-16">
                <BarChart
                    formatted={page.params.period === '24h' ? 'hours' : 'days'}
                    series={count.map((c, index) => ({
                        name: seriesNames[index],
                        data: c.map((metric) => [metric.date, metric.value])
                    }))} />
                <Legend
                    showValues={false}
                    legendData={seriesNames.map((name) => ({ name, value: '' }))} />
            </div>
        {/if}
    </Card>
</div>

<style lang="scss">
    .multiple-chart-container {
        height: 12rem;
    }

    :global(.multiple-chart-container .echart) {
        margin-top: -1em;
        margin-bottom: -1em;
    }
</style>