mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
update: spacings on the overview sections.
This commit is contained in:
Darshan
@@ -32,60 +32,62 @@
|
||||
$: bandwidth = humanFileSize(totalMetrics($usage?.network));
|
||||
</script>
|
||||
|
||||
<Layout.Stack justifyContent="space-between" direction="row" alignItems="flex-start">
|
||||
<div>
|
||||
<Typography.Title>
|
||||
{bandwidth.value}
|
||||
<span class="body-text-2">{bandwidth.unit}</span>
|
||||
</Typography.Title>
|
||||
<Typography.Text>Bandwidth</Typography.Text>
|
||||
</div>
|
||||
<Popover let:toggle padding="none" let:showing>
|
||||
<Button.Button on:click={toggle} variant="extra-compact">
|
||||
{period}
|
||||
<Icon icon={showing ? IconChevronUp : IconChevronDown} slot="end" />
|
||||
</Button.Button>
|
||||
<svelte:fragment slot="tooltip">
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Button on:click={() => dispatch('change', '24h')}
|
||||
>24h</ActionMenu.Item.Button>
|
||||
<ActionMenu.Item.Button on:click={() => dispatch('change', '30d')}
|
||||
>30d</ActionMenu.Item.Button>
|
||||
<ActionMenu.Item.Button on:click={() => dispatch('change', '90d')}
|
||||
>90d</ActionMenu.Item.Button>
|
||||
</ActionMenu.Root>
|
||||
</svelte:fragment>
|
||||
</Popover>
|
||||
<Layout.Stack gap="l">
|
||||
<Layout.Stack justifyContent="space-between" direction="row" alignItems="flex-start">
|
||||
<div>
|
||||
<Typography.Title>
|
||||
{bandwidth.value}
|
||||
<span class="body-text-2">{bandwidth.unit}</span>
|
||||
</Typography.Title>
|
||||
<Typography.Text>Bandwidth</Typography.Text>
|
||||
</div>
|
||||
<Popover let:toggle padding="none" let:showing>
|
||||
<Button.Button on:click={toggle} variant="extra-compact">
|
||||
{period}
|
||||
<Icon icon={showing ? IconChevronUp : IconChevronDown} slot="end" />
|
||||
</Button.Button>
|
||||
<svelte:fragment slot="tooltip">
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Button on:click={() => dispatch('change', '24h')}
|
||||
>24h</ActionMenu.Item.Button>
|
||||
<ActionMenu.Item.Button on:click={() => dispatch('change', '30d')}
|
||||
>30d</ActionMenu.Item.Button>
|
||||
<ActionMenu.Item.Button on:click={() => dispatch('change', '90d')}
|
||||
>90d</ActionMenu.Item.Button>
|
||||
</ActionMenu.Root>
|
||||
</svelte:fragment>
|
||||
</Popover>
|
||||
</Layout.Stack>
|
||||
{#if bandwidth.value !== '0'}
|
||||
<div style="height: 12rem;">
|
||||
<BarChart
|
||||
options={{
|
||||
yAxis: {
|
||||
axisLabel: {
|
||||
formatter: (value) =>
|
||||
value
|
||||
? `${humanFileSize(+value).value} ${humanFileSize(+value).unit}`
|
||||
: '0'
|
||||
}
|
||||
}
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
name: 'Bandwidth',
|
||||
data: [...network.map((e) => [e.date, e.value])],
|
||||
tooltip: {
|
||||
valueFormatter: (value) =>
|
||||
`${humanFileSize(+value).value} ${humanFileSize(+value).unit}`
|
||||
}
|
||||
}
|
||||
]} />
|
||||
</div>
|
||||
{:else}
|
||||
<Card isDashed>
|
||||
<Layout.Stack gap="xs" alignItems="center" justifyContent="center">
|
||||
<Icon icon={IconChartSquareBar} size="l" />
|
||||
<Typography.Text variant="m-600">No data to show</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
{#if bandwidth.value !== '0'}
|
||||
<div style="height: 12rem;">
|
||||
<BarChart
|
||||
options={{
|
||||
yAxis: {
|
||||
axisLabel: {
|
||||
formatter: (value) =>
|
||||
value
|
||||
? `${humanFileSize(+value).value} ${humanFileSize(+value).unit}`
|
||||
: '0'
|
||||
}
|
||||
}
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
name: 'Bandwidth',
|
||||
data: [...network.map((e) => [e.date, e.value])],
|
||||
tooltip: {
|
||||
valueFormatter: (value) =>
|
||||
`${humanFileSize(+value).value} ${humanFileSize(+value).unit}`
|
||||
}
|
||||
}
|
||||
]} />
|
||||
</div>
|
||||
{:else}
|
||||
<Card isDashed>
|
||||
<Layout.Stack gap="xs" alignItems="center" justifyContent="center">
|
||||
<Icon icon={IconChartSquareBar} size="l" />
|
||||
<Typography.Text variant="m-600">No data to show</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
{/if}
|
||||
|
||||
@@ -13,29 +13,31 @@
|
||||
$: total = projectStats?.reduce((prev, next) => prev + next[1], 0) ?? 0;
|
||||
</script>
|
||||
|
||||
<div class="heading-level-4">
|
||||
{formatNum(current)}
|
||||
</div>
|
||||
<div>Realtime Connections</div>
|
||||
{#if total}
|
||||
<div style="height: 18em">
|
||||
<BarChart
|
||||
series={[
|
||||
{
|
||||
name: 'Realtime connection',
|
||||
data: $stats.get(projectId)
|
||||
}
|
||||
]} />
|
||||
<Layout.Stack gap="l">
|
||||
<div class="heading-level-4">
|
||||
{formatNum(current)}
|
||||
</div>
|
||||
{:else}
|
||||
<Card isDashed>
|
||||
<Layout.Stack gap="xs" alignItems="center" justifyContent="center" height="10rem">
|
||||
<Icon icon={IconChartSquareBar} size="l" />
|
||||
<Typography.Text variant="m-600">No data to show</Typography.Text>
|
||||
<Link.Anchor
|
||||
href="https://appwrite.io/docs/apis/realtime"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Get started with Realtime</Link.Anchor>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
{/if}
|
||||
<div>Realtime Connections</div>
|
||||
{#if total}
|
||||
<div style="height: 18em">
|
||||
<BarChart
|
||||
series={[
|
||||
{
|
||||
name: 'Realtime connection',
|
||||
data: $stats.get(projectId)
|
||||
}
|
||||
]} />
|
||||
</div>
|
||||
{:else}
|
||||
<Card isDashed>
|
||||
<Layout.Stack gap="xs" alignItems="center" justifyContent="center" height="10rem">
|
||||
<Icon icon={IconChartSquareBar} size="l" />
|
||||
<Typography.Text variant="m-600">No data to show</Typography.Text>
|
||||
<Link.Anchor
|
||||
href="https://appwrite.io/docs/apis/realtime"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Get started with Realtime</Link.Anchor>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
|
||||
@@ -30,51 +30,53 @@
|
||||
}>;
|
||||
</script>
|
||||
|
||||
<Layout.Stack justifyContent="space-between" direction="row" alignItems="flex-start">
|
||||
<div>
|
||||
<Typography.Title>
|
||||
{formatNum(totalMetrics($usage?.requests))}
|
||||
</Typography.Title>
|
||||
<Typography.Text>Requests</Typography.Text>
|
||||
</div>
|
||||
<Popover let:toggle padding="none" let:showing>
|
||||
<Button.Button on:click={toggle} variant="extra-compact">
|
||||
{period}
|
||||
<Icon icon={showing ? IconChevronUp : IconChevronDown} slot="end" />
|
||||
</Button.Button>
|
||||
<ActionMenu.Root slot="tooltip">
|
||||
<ActionMenu.Item.Button on:click={() => dispatch('change', '24h')}
|
||||
>24h</ActionMenu.Item.Button>
|
||||
<ActionMenu.Item.Button on:click={() => dispatch('change', '30d')}
|
||||
>30d</ActionMenu.Item.Button>
|
||||
<ActionMenu.Item.Button on:click={() => dispatch('change', '90d')}
|
||||
>90d</ActionMenu.Item.Button>
|
||||
</ActionMenu.Root>
|
||||
</Popover>
|
||||
</Layout.Stack>
|
||||
|
||||
{#if totalMetrics($usage?.requests) !== 0}
|
||||
<div style="height: 12rem;">
|
||||
<LineChart
|
||||
options={{
|
||||
yAxis: {
|
||||
axisLabel: {
|
||||
formatter: formatNum
|
||||
}
|
||||
}
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
name: 'Requests',
|
||||
data: [...requests.map((e) => [e.date, e.value])]
|
||||
}
|
||||
]} />
|
||||
</div>
|
||||
{:else}
|
||||
<Card isDashed>
|
||||
<Layout.Stack gap="xs" alignItems="center" justifyContent="center">
|
||||
<Icon icon={IconChartSquareBar} size="l" />
|
||||
<Typography.Text variant="m-600">No data to show</Typography.Text>
|
||||
<Layout.Stack gap="l">
|
||||
<Layout.Stack justifyContent="space-between" direction="row" alignItems="flex-start">
|
||||
<Layout.Stack gap="xxs">
|
||||
<Typography.Title>
|
||||
{formatNum(totalMetrics($usage?.requests))}
|
||||
</Typography.Title>
|
||||
<Typography.Text>Requests</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
{/if}
|
||||
<Popover let:toggle padding="none" let:showing>
|
||||
<Button.Button on:click={toggle} variant="extra-compact">
|
||||
{period}
|
||||
<Icon icon={showing ? IconChevronUp : IconChevronDown} slot="end" />
|
||||
</Button.Button>
|
||||
<ActionMenu.Root slot="tooltip">
|
||||
<ActionMenu.Item.Button on:click={() => dispatch('change', '24h')}
|
||||
>24h</ActionMenu.Item.Button>
|
||||
<ActionMenu.Item.Button on:click={() => dispatch('change', '30d')}
|
||||
>30d</ActionMenu.Item.Button>
|
||||
<ActionMenu.Item.Button on:click={() => dispatch('change', '90d')}
|
||||
>90d</ActionMenu.Item.Button>
|
||||
</ActionMenu.Root>
|
||||
</Popover>
|
||||
</Layout.Stack>
|
||||
|
||||
{#if totalMetrics($usage?.requests) !== 0}
|
||||
<div style="height: 12rem;">
|
||||
<LineChart
|
||||
options={{
|
||||
yAxis: {
|
||||
axisLabel: {
|
||||
formatter: formatNum
|
||||
}
|
||||
}
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
name: 'Requests',
|
||||
data: [...requests.map((e) => [e.date, e.value])]
|
||||
}
|
||||
]} />
|
||||
</div>
|
||||
{:else}
|
||||
<Card isDashed>
|
||||
<Layout.Stack gap="xs" alignItems="center" justifyContent="center">
|
||||
<Icon icon={IconChartSquareBar} size="l" />
|
||||
<Typography.Text variant="m-600">No data to show</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
|
||||
Reference in New Issue
Block a user