@@ -23,16 +117,15 @@ const demoCharts = Object.entries(chartsData as Record
-
+
-
-
-
-
-
-
-
+
+
+
+
+
+
@@ -56,28 +149,6 @@ const demoCharts = Object.entries(chartsData as Record
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -92,15 +163,35 @@ const demoCharts = Object.entries(chartsData as Record
{
- demoCharts.map(([chartId, chart]) => (
-
-
- {chart.name && }
-
-
-
-
-
+ sections.map((section) => (
+
+
+
{section.title}
+
{section.description}
+
+
+
+
+ {charts[chartId]?.name ?? capitalize(chartId.replace(/-/g, ' '))}
+ {subtitle}
+
+
+
+ {topLegend(chartId) && (
+
+ {topLegend(chartId)?.map((item) => (
+
+ ))}
+
+ )}
+
+
+
+
+
+
+ Large
+ Set size="lg" to put a big value under the label. Add unit for the unit and divided on the list for the lines.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Under a stat
+ A legend row explains the split behind a single number.
+ Requests
+ 341.0k
+
+ {requests.map((item) => )}
+
+
+
+
+
+
+ Above a chart
+ Large items show the latest value of each series, so the chart needs no legend of its own.
+
+ {latency.map((item) => )}
+
+
+
+
+
+
+
+
+
+ Large vertical
+ Combine size="lg" with a vertical list for a side panel.
+
+ {storage.map((item) => )}
+
+
+
+
+
+
+
+
+ Large links
+ Large items work as links and buttons too. Mark the current one with active and a hidden series with off.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ With units
+ Add unit to a regular item to show the unit after the value.
+
+ {latency.slice(0, 3).map((item) => )}
+
+
+
+
+
+
+
+
+ Without lines
+ Leave out divided when the items sit in a tight space or wrap to more rows.
+
+ {traffic.map((item) => )}
+
+
+
+
+
+
+
+
+ Loading
+ Use placeholder blocks for the label and the value while the data loads.
+
+ {
+ [1, 2].map(() => (
+
+
+
+
+
+
+
+ ))
+ }
+
+
+
+
-
-
-
+
+
+
@@ -170,20 +292,6 @@ const storage = [
-
-
-
- Under a stat
- A legend row explains the split behind a single number.
- Requests
- 341.0k
-
- {requests.map((item) => )}
-
-
-
-
diff --git a/screenshots/pages/legend-large-list.astro b/screenshots/pages/legend-large-list.astro
new file mode 100644
index 000000000..9415dcfa2
--- /dev/null
+++ b/screenshots/pages/legend-large-list.astro
@@ -0,0 +1,22 @@
+---
+// Large legend on its own, no card and no chart: a `divided` LegendList of
+// `size="lg"` items — colored dot and name, a big value with a small unit
+// below — with a line between them. The last item shows the `off` state of a
+// hidden series.
+import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
+import Legend from '@ui/Legend.astro'
+import LegendList from '@ui/LegendList.astro'
+
+const items = [
+ { name: 'Requests', color: 'primary', value: '1,234', unit: 'req/s' },
+ { name: 'Bandwidth', color: 'azure', value: '86.2', unit: 'MB/s' },
+ { name: 'Storage', color: 'purple', value: '56', unit: 'GB' },
+ { name: 'Warnings', color: 'orange', value: '128', off: true },
+]
+---
+
+
+
+ {items.map((item) => )}
+
+
diff --git a/screenshots/pages/legend-large-vertical.astro b/screenshots/pages/legend-large-vertical.astro
new file mode 100644
index 000000000..6b9519d5c
--- /dev/null
+++ b/screenshots/pages/legend-large-vertical.astro
@@ -0,0 +1,38 @@
+---
+// Large legend next to a donut: a traffic-sources card with the chart on the
+// left and a `vertical` list of `size="lg"` items on the right, each showing a
+// source and its share. `legend-donut` is the traffic donut from charts.json
+// with the ApexCharts legend left off, since the list replaces it.
+import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
+import Card from '@ui/Card.astro'
+import CardHeader from '@ui/CardHeader.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'
+
+// Order and colors follow the `traffic-sources-donut` entry in charts.json.
+const sources = [
+ { name: 'Organic search', color: 'azure', value: 38 },
+ { name: 'Direct', color: 'primary', value: 27 },
+ { name: 'Social media', color: 'purple', value: 18 },
+ { name: 'Referral', color: 'orange', value: 12 },
+ { name: 'Email', color: 'green', value: 5 },
+]
+---
+
+
+
+
+
+
+
+
+
+
+ {sources.map((item) => )}
+
+