mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
64 lines
2.4 KiB
Plaintext
64 lines
2.4 KiB
Plaintext
---
|
||
// `radar` is one of the chart types added in 1.5 (charts.json `type: "radar"`),
|
||
// rendered through the same demo/Chart.astro wrapper as every other chart.
|
||
// Composition: the plot on the left, a legend column on the right that also
|
||
// carries each plan's average — so the card stays short. Each legend entry is
|
||
// a three-step stack: series name, the figure large and semibold with tabular
|
||
// numerals so the two averages align digit for digit, a muted uppercase label. `radar-large` extends
|
||
// the docs radar with an explicit `radar-size` (ApexCharts would leave wide
|
||
// margins otherwise) and without the built-in bottom legend.
|
||
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 CardSubtitle from '@ui/CardSubtitle.astro'
|
||
import CardBody from '@ui/CardBody.astro'
|
||
import Legend from '@ui/Legend.astro'
|
||
import Subheader from '@ui/Subheader.astro'
|
||
import Chart from '@components/demo/Chart.astro'
|
||
|
||
// Series order and colors follow the `radar` entry in charts.json; the
|
||
// averages are computed from its data.
|
||
const plans = [
|
||
{ name: 'Pro', color: 'primary', average: 69 },
|
||
{ name: 'Enterprise', color: 'green', average: 83 },
|
||
]
|
||
---
|
||
|
||
<ScreenshotLayout title="Radar chart" columns={2} pageLibs={['apexcharts']}>
|
||
<Card>
|
||
<CardHeader>
|
||
<div>
|
||
<CardTitle>Plan comparison</CardTitle>
|
||
<CardSubtitle>Feature scores, 0–100, Pro against Enterprise</CardSubtitle>
|
||
</div>
|
||
</CardHeader>
|
||
<CardBody>
|
||
<div class="row g-4 align-items-center">
|
||
<div class="col">
|
||
<Chart chartId="radar-large" height={18} label="Pro and Enterprise plans compared across support, security, speed, storage, integrations and price" />
|
||
</div>
|
||
<div class="col-4">
|
||
<div class="space-y-4">
|
||
{
|
||
plans.map((plan) => (
|
||
<div>
|
||
<Legend color={plan.color} class="mb-1">
|
||
{plan.name}
|
||
</Legend>
|
||
<div class="h1 mb-0 lh-1" style="font-variant-numeric: tabular-nums">
|
||
{plan.average}
|
||
</div>
|
||
<Subheader as="div" class="mt-1">
|
||
Average score
|
||
</Subheader>
|
||
</div>
|
||
))
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardBody>
|
||
</Card>
|
||
</ScreenshotLayout>
|