@fundar/data-chart-telling 1.9.0 → 1.11.0

package/docs/styles-and-segments.md

@@ -103,6 +103,36 @@ A row whose value is `null`, `undefined` or `NaN` breaks a line. `styles.gaps` b
 - On bar plots only the presence of `x` matters.
 - Unset styles fall back to `line.gap`, `bar.gap` and `pyramid.gap` in the [configuration](theming.md).
 
+### Basic styles
+
+`styles.stroke`, `styles.dot` and `styles.area` set the style every series is drawn with, so `segments` are left for what only part of a series looks like. Each takes a style as it is, or a function of the series' name returning one (`undefined` leaves that series as it is):
+
+```svelte
+<LinePlot
+	styles={{
+		stroke: (name) =>
+			name === 'male' ? { strokeWidth: 2, strokeOpacity: 0.5 } : { strokeWidth: 4 },
+		dot: { dotRadius: 3 }
+	}}
+	...
+/>
+```
+
+- A plot uses the ones its own marks are made of and ignores the rest, so one `styles` can be shared between plots:
+
+  | Plot                                                                                                                       | Uses                                                           |
+  | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
+  | `LinePlot`, `SlopePlot`, `SparklinePlot`                                                                                   | `stroke` (the line), `dot` (a dot on every point; unset, none) |
+  | `AreaPlot`, `BarPlot`, `BulletPlot`, `PyramidPlot`, `HistogramPlot`, `BoxPlot`, `DensityPlot`, `ViolinPlot`, `HeatmapPlot` | `area`                                                         |
+  | `ScatterPlot`                                                                                                              | `dot`                                                          |
+  | `LollipopPlot`, `DumbbellPlot`, `ClevelandPlot`, `ForestPlot`                                                              | `stroke` (the stems and connectors), `dot`                     |
+
+  `GeoPlot` has styles of its own and uses none of them.
+
+- On the plots with connectors, `styles.stroke` (or a segment's `stroke`) styles the stems and connectors: width, color, opacity, dashes and line caps and joins. What the author sets for a connector wins over it: a segment's `stroke` wins over `styles.connector`, which wins over `styles.stroke`. A function of the series styles only the connector of a lone dot, which has a series; the connector of several dots takes a style as it is.
+- A series keeps the color of the `color` scale unless the style sets its own.
+- A segment's own style wins over them, field by field, and what a legend turned off dims over both - so a `legend.off` fades a series without `segments` repeating its opacity.
+
 ## Segments
 
 `segments` separates data ranges from their styling. It is an object: each key is a series name (a feature id for `GeoPlot`), or `'default'`, mapped to a list of segments.
@@ -125,7 +155,7 @@ The style shape depends on the plot:
 
 | Plot                        | Style type                         | Fields                                         |
 | --------------------------- | ---------------------------------- | ---------------------------------------------- |
-| `LinePlot`                  | `LineSegmentStyle`                 | `stroke` (line style), `dots` (dot style)      |
+| `LinePlot`                  | `LineSegmentStyle`                 | `stroke` (line style), `dot` (dot style)       |
 | `AreaPlot`, `HistogramPlot` | `AreaStyle`                        | `fill`, `fillOpacity`, `stroke`, ...           |
 | `BarPlot`, `PyramidPlot`    | `BarSegmentStyle` (`AreaStyle`)    | `fill`, `fillOpacity`, `stroke`, ...           |
 | `HeatmapPlot`               | `CellSegmentStyle` (`AreaStyle`)   | `fill`, `fillOpacity`, `stroke`, `strokeWidth` |
@@ -192,7 +222,7 @@ Per-series colors, plus dots over a range shared by every series:
 		default: [
 			{
 				areas: [{ x: { from: 1965, to: 1980 } }],
-				styles: { dots: { dotRadius: 5, dotSymbol: 'circle' } }
+				styles: { dot: { dotRadius: 5, dotSymbol: 'circle' } }
 			}
 		]
 	}}

package/examples/SegmentsBySeries.svelte

@@ -18,7 +18,7 @@
 		default: [
 			{
 				areas: [{ x: { from: 1965, to: 1980 } }],
-				styles: { dots: { dotRadius: 5, dotSymbol: 'circle' } }
+				styles: { dot: { dotRadius: 5, dotSymbol: 'circle' } }
 			}
 		]
 	}}

package/package.json

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