mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
46 lines
1.8 KiB
Plaintext
46 lines
1.8 KiB
Plaintext
---
|
|
// Legend component: a request-volume card whose header carries an interactive
|
|
// legend. Each item is a button — colored dot, series name, total in tabular
|
|
// numerals — and the fake cursor rests on one of them so the tinted hover
|
|
// background is part of the picture. `legend-requests` is a three-series stacked bar
|
|
// chart in charts.json with the ApexCharts legend left off, since the card's
|
|
// own legend replaces it.
|
|
import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
|
|
import Card from '@ui/Card.astro'
|
|
import CardHeader from '@ui/CardHeader.astro'
|
|
import CardTitle from '@ui/CardTitle.astro'
|
|
import CardBody from '@ui/CardBody.astro'
|
|
import Legend from '@ui/Legend.astro'
|
|
import LegendList from '@ui/LegendList.astro'
|
|
import Chart from '@components/demo/Chart.astro'
|
|
|
|
// Series order and colors follow the `legend-requests` entry in charts.json.
|
|
const series = [
|
|
{ name: 'Allowed', color: 'blue', value: '339.0k' },
|
|
{ name: 'Challenged', color: 'azure', value: '815' },
|
|
{ name: 'Logged', color: 'green', value: '12.4k', active: true },
|
|
{ name: 'Rate limited', color: 'red', value: '-', off: true },
|
|
]
|
|
---
|
|
|
|
<ScreenshotLayout title="Legend" columns={2.6} pageLibs={['apexcharts']}>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Requests</CardTitle>
|
|
<LegendList class="ms-auto">
|
|
{
|
|
series.map((item) => (
|
|
<Legend button color={item.color} value={item.value} active={item.active} off={item.off} class="position-relative">
|
|
{item.name}
|
|
{item.active && <span class="cursor" />}
|
|
</Legend>
|
|
))
|
|
}
|
|
</LegendList>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<Chart chartId="legend-requests" height={14} label="Requests per day, split by firewall action" />
|
|
</CardBody>
|
|
</Card>
|
|
</ScreenshotLayout>
|