@samizdata/create-mozaic 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
package/template/AGENTS.md
CHANGED
|
@@ -22,6 +22,10 @@ the mozaic chart library (Svelte 5 + d3). House style: `src/lib/theme.ts`. Langu
|
|
|
22
22
|
Text uses text colours (`var(--mz-color-text)`), never data colours.
|
|
23
23
|
- Every chart needs `alt` text, a legend for 2+ series, and strings in every language.
|
|
24
24
|
- Use the theme's breakpoints (`plot.breakpoint`) for small-screen layouts.
|
|
25
|
+
- Name the y unit once, on the top tick: `<AxisY unit="lei/m³" />`.
|
|
26
|
+
- Tooltips: `<Tooltip title items>`, one item per series (label, value, colour), so values line up.
|
|
27
|
+
- Event markers on a time axis: `<RefLine x={date} label="…" dotted labelY={-30} />`, labels above the plot.
|
|
28
|
+
- No `<DataTable>` ("Show the data" button) unless asked for.
|
|
25
29
|
|
|
26
30
|
## Before you finish
|
|
27
31
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { scaleLinear } from 'd3-scale';
|
|
3
3
|
import { extent, max } from 'd3-array';
|
|
4
|
-
import { Chart, Header, Title, Subtitle, Footer, Notes, Source
|
|
4
|
+
import { Chart, Header, Title, Subtitle, Footer, Notes, Source } from '@samizdata/mozaic/frame';
|
|
5
5
|
import { Plot, Svg, Html } from '@samizdata/mozaic/core';
|
|
6
6
|
import { Line, LineEndLabels, Points } from '@samizdata/mozaic/marks';
|
|
7
7
|
import { AxisX, AxisY, GridY, Legend } from '@samizdata/mozaic/guides';
|
|
@@ -73,12 +73,20 @@
|
|
|
73
73
|
</Svg>
|
|
74
74
|
<Html>
|
|
75
75
|
{#if hoverYear !== null}
|
|
76
|
-
<Tooltip
|
|
77
|
-
|
|
78
|
-
{
|
|
79
|
-
|
|
80
|
-
{
|
|
81
|
-
|
|
76
|
+
<Tooltip
|
|
77
|
+
x={plot.x(hoverYear) ?? 0}
|
|
78
|
+
y={plot.height / 2}
|
|
79
|
+
title={String(hoverYear)}
|
|
80
|
+
items={rows
|
|
81
|
+
.filter((d) => d.year === hoverYear)
|
|
82
|
+
.toSorted((a, b) => b.value - a.value)
|
|
83
|
+
.map((d) => ({
|
|
84
|
+
label: t.regions[d.region] ?? d.region,
|
|
85
|
+
value: fmt.number(d.value),
|
|
86
|
+
color: color[d.region],
|
|
87
|
+
shape: 'line'
|
|
88
|
+
}))}
|
|
89
|
+
/>
|
|
82
90
|
{/if}
|
|
83
91
|
</Html>
|
|
84
92
|
{/snippet}
|
|
@@ -88,13 +96,4 @@
|
|
|
88
96
|
<Notes>{t.notes}</Notes>
|
|
89
97
|
<Source>{t.source}</Source>
|
|
90
98
|
</Footer>
|
|
91
|
-
<DataTable
|
|
92
|
-
data={rows}
|
|
93
|
-
columns={[
|
|
94
|
-
{ key: 'region', label: t.region, value: (d: Row) => t.regions[d.region] ?? d.region },
|
|
95
|
-
{ key: 'year', label: t.year, value: (d: Row) => d.year, format: String },
|
|
96
|
-
{ key: 'value', label: t.value, value: (d: Row) => d.value }
|
|
97
|
-
]}
|
|
98
|
-
maxRows={10}
|
|
99
|
-
/>
|
|
100
99
|
</Chart>
|