@fundar/data-chart-telling 1.2.0 → 1.3.0

package/docs/theming.md

@@ -40,7 +40,7 @@ resetConfiguration(); // back to the shipped defaults
 | `spacing`, `chrome`                                                                                                                                                 | Padding around header, legend and caption; the chrome `order` and `rowGap`                                                                                                                                                                                                                                                                                                                                                                             |
 | `title`, `subtitle`, `caption`                                                                                                                                      | Text blocks: `font`, `size`, `weight`, `color`, `leading`, `spacing`                                                                                                                                                                                                                                                                                                                                                                                   |
 | `divider`                                                                                                                                                           | The line a `'divider'` in the chrome `order` draws                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `legend`                                                                                                                                                            | Text, gaps, swatches, `disabledOpacity`, paginated nav buttons, the continuous bar, its handles, ticks and labels, and the `seriesTitle` and `sizeScale` options                                                                                                                                                                                                                                                                                       |
+| `legend`                                                                                                                                                            | Text, gaps, swatches, the series `icon` (`rounded`, and the shape each mark draws as in `marks`), `disabledOpacity`, paginated nav buttons, the continuous bar, its handles, ticks and labels, and the `seriesTitle` and `sizeScale` options                                                                                                                                                                                                           |
 | `axis`                                                                                                                                                              | Axis color, font and tick sizes, `grid`, and the number locale (below)                                                                                                                                                                                                                                                                                                                                                                                 |
 | `tooltip`                                                                                                                                                           | Tooltip background, color, font size, padding, radius, border                                                                                                                                                                                                                                                                                                                                                                                          |
 | `margins`                                                                                                                                                           | Default margin per side (`'auto'` or a number)                                                                                                                                                                                                                                                                                                                                                                                                         |

package/examples/FacetsScoped.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './datasets';
+
+	// Each region's value split into two sectors.
+	const SECTORS = [
+		{ sector: 'Goods', share: 0.8 },
+		{ sector: 'Services', share: 1.4 }
+	];
+	const rows = REGION_VALUES.flatMap((row) =>
+		SECTORS.map(({ sector, share }) => ({ ...row, sector, value: row.value * share }))
+	);
+</script>
+
+<!-- One panel per region. `facet` on a marker or a segment limits it to the panels it names: the rule is drawn in GBA only, and Services is dashed in Cuyo only. -->
+<LinePlot
+	width={900}
+	height={360}
+	data={rows}
+	x="date"
+	y="value"
+	color="sector"
+	facet={{ by: 'region', columns: 3 }}
+	markers={[{ type: 'rule', axis: 'y', value: 10, facet: 'GBA' }]}
+	segments={{ Services: [{ facet: 'Cuyo', styles: { stroke: { strokeDasharray: '4 4' } } }] }}
+/>

package/llms-full.txt

@@ -68,6 +68,7 @@ Per kind: `BarPlot` x = category, y = value (swap for horizontal bars); `Pyramid
 7. `r` takes raw values and its sqrt scale makes area follow the value; tune with `scales.r.range`. A literal number is a fixed pixel radius.
 8. Narrow plots with long category or series names: shorten the text in the data, format with `tickFormat` / `values.format`, or give `margins` more room.
 9. In Svelte 5 components, `state` is taken by the `$state` rune: name local variables otherwise.
+10. In a `facet`, every panel draws the plot's `markers` and `segments`. Give one a `facet` (a `by` value, a list of them, or `{ row, col }` in a `rows`/`cols` grid) to draw it only in the panels it names: `markers={[{ type: 'rule', axis: 'y', value: 10, facet: 'GBA' }]}`, `segments={{ Services: [{ facet: 'Cuyo', styles: { stroke: { strokeDasharray: '4 4' } } }] }}`. A plot with no facet leaves out whatever names one.
 10. Stacking is `transforms={[{ type: 'stackY' }]}`, also for horizontal bars (the value channel is the one stacked).
 
 ## Reading and driving plot state (custom UI)
@@ -88,13 +89,13 @@ Add with `markers={[{ type: '...' }]}`. For x/y plots:
 `area arrow bar bollinger box brush cell component delaunayLink delaunayMesh delta density difference dot hover hull image line raster rect regression rule text tick trail violin voronoi voronoiMesh waffle`.
 GeoPlot: `graticule sphere dot text vector link contour inset geo-hover geo-component`.
 
-- `delta` annotates the difference between two series at a position: `{ type: 'delta', axis: 'x', at: 2020, from: { type: 'series', series: 'A' }, to: { type: 'series', series: 'B' }, formatDiff: (d) => d.toFixed(1) }`.
-- `rule` (`axis`, `value`), `text` (`text`), `dot` annotate; `component` mounts your own Svelte component inside the plot (it can call `usePlot()`).
+- `delta` annotates the difference between two series at a position: `{ type: 'delta', axis: 'x', at: 2020, from: { type: 'series', series: 'A' }, to: { type: 'series', series: 'B' }, formatDiff: (d) => d.toFixed(1) }`; `at` can be a list of positions, one delta at each (`at: [1991, 2001]`), and `line`, `text` and `dot` can be functions of the position (`text: (at) => at === 2022 ? { dx: -20, textAnchor: 'end' } : { dx: 20 }`).
+- `rule` (`axis`, `value`; a list draws a line at each), `text` (`text`), `dot` annotate; `component` mounts your own Svelte component inside the plot (it can call `usePlot()`).
 - Each plot kind types its own marker union (`AxisBasedMarkersConfig`, `GeoMarkersConfig`); `satisfies` on a markers array gives completion.
 
 ## Theming and locale
 
-- `setConfiguration(partial)` deep-merges global defaults (colors, fonts, spacing, legend, tooltip, timeline); `resetConfiguration()` restores them. Inside an `$effect`, wrap the call in `untrack`.
+- `setConfiguration(partial)` deep-merges global defaults (colors, fonts, spacing, legend, tooltip, timeline); `resetConfiguration()` restores them. Legend series icons: `legend.icon.rounded` (default `false`) and `legend.icon.marks` (shape per mark: `line`, `dot`, `area`, `bar`, `cell`, `rect`, `geo`; a symbol or `'line'`). Inside an `$effect`, wrap the call in `untrack`.
 - `THEMES` has `Default Editorial Dark Compact`: `setConfiguration(THEMES.Editorial)`.
 - Number and date text follows `axis.locale` (default `'es-AR'`) in the configuration; per axis, `tickFormat: (d) => new Intl.NumberFormat('en-US').format(d)` or an `Intl.*FormatOptions` object.
 
@@ -150,4 +151,5 @@ GeoPlot: `graticule sphere dot text vector link contour inset geo-hover geo-comp
 - `ChromeOrder.svelte` - ordering chrome blocks with dividers.
 - `FacetsCarousel.svelte` - facets as a carousel.
 - `FacetsRowsCols.svelte` - facets by rows and columns.
+- `FacetsScoped.svelte` - markers and segments in some facet panels.
 - `Composer.svelte` - several plots in one figure.

package/llms.txt

@@ -92,6 +92,7 @@ Start with the full guide: it lists the mental model, the props every plot share
 - [Ordering chrome blocks with dividers](./examples/ChromeOrder.svelte)
 - [Facets as a carousel](./examples/FacetsCarousel.svelte)
 - [Facets by rows and columns](./examples/FacetsRowsCols.svelte)
+- [Markers and segments in some facet panels](./examples/FacetsScoped.svelte)
 - [Several plots in one figure](./examples/Composer.svelte)
 - [Example datasets, one file each](./examples/datasets)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Declarative charts, maps and small multiples for Svelte, built on svelteplot.",
   "license": "MIT",
   "author": "Ezequiel Puerta",