Skip to content

Commit 0a88a62

Browse files
gkagka
committed
docs: improve defaults docs
1 parent 9300748 commit 0a88a62

File tree

1 file changed

+94
-61
lines changed

1 file changed

+94
-61
lines changed

‎src/routes/features/defaults/+page.md

Lines changed: 94 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -13,40 +13,78 @@ If you're using SveltePlot in a SvelteKit project, you can even set the defaults
1313
import { setContext } from 'svelte';
1414
1515
setContext('svelteplot/defaults', {
16-
tickSize: 0,
17-
colorScheme: 'plasma'
16+
height: 400,
17+
colorScheme: 'plasma',
18+
axis: {
19+
tickSize: 0,
20+
tickPadding: 5
21+
}
1822
});
1923
</script>
2024
2125
<slot />
2226
```
2327

24-
## Options
25-
26-
| Name | Description | Unit | Default |
27-
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------- |
28-
| _height_ | Plot height | px | `350` |
29-
| _inset_ | Plot inset | px | `0` |
30-
| _colorScheme_ | Default scheme for color scale | string | `'turbo'` |
31-
| _categoricalColorScheme_ | Default scheme for [categorical color scales](/features/color-scales#Categorical-colors) | string | `'observable10'` |
32-
| _unknown_ | Fallback color to be used when mapping NAs to colors s | string | `'#cccccc'` |
33-
| _tickSize_ | Axis tick line length | px | `6` |
34-
| _tickPadding_ | Distance between tick line and label | px | `3` |
35-
| _tickFontSize_ | Tick label font size | px | `11` |
36-
| _axisXAnchor_ | Alignment of AxisX | | `'bottom'` |
37-
| _axisYAnchor_ | Alignment of AxisY | | `'left'` |
38-
| _xTickSpacing_ | Horizontal space between ticks in AxisX and GridX | px | `80` |
39-
| _yTickSpacing_ | Vertical space between ticks in AxisY and GridY | px | `50` |
40-
| _graticuleStep_ | Default step size in graticules | degrees | `10` |
41-
| _locale_ | Default locale used in axis ticks etc. | string | `'en-US'` |
42-
| _numberFormat_ | Default [number format options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) in axis ticks | object | |
43-
| _css_ | For passing an `@emotion/css` instance to your plots | | |
44-
45-
<style>
46-
* :global(td) {
47-
vertical-align: top;
48-
}
49-
</style>
28+
## Global defaults
29+
30+
The defaults context accepts the following options:
31+
32+
| Name | Description | Unit | Default |
33+
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ----------------------------------------------- |
34+
| _height_ | Plot height | px | `350` |
35+
| _inset_ | Plot inset | px | `0` |
36+
| _colorScheme_ | Default scheme for color scale | string | `'turbo'` |
37+
| _categoricalColorScheme_ | Default scheme for [categorical color scales](/features/color-scales#Categorical-colors) | string | `'observable10'` |
38+
| _unknown_ | Fallback color to be used when mapping NAs to colors | string | `'#cccccc'` |
39+
| _locale_ | Default locale used in axis ticks etc. | string | `'en-US'` |
40+
| _numberFormat_ | Default [number format options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) in axis ticks | object | `{ style: 'decimal', compactDisplay: 'short' }` |
41+
| _css_ | For passing an `@emotion/css` instance to your plots | | |
42+
43+
## Mark-specific defaults
44+
45+
Since version 0.3 you can set defaults for specific components using their respective keys:
46+
47+
| Component | Key | Description |
48+
| --------- | ----------- | ------------------------------------------ |
49+
| Axis | `axis` | Default options for both X and Y axes |
50+
| AxisX | `axisX` | Default options for X axis |
51+
| AxisY | `axisY` | Default options for Y axis |
52+
| Grid | `grid` | Default options for both X and Y grids |
53+
| GridX | `gridX` | Default options for X grid |
54+
| GridY | `gridY` | Default options for Y grid |
55+
| Frame | `frame` | Default options for plot frame |
56+
| Area | `area` | Default options for area marks |
57+
| AreaX | `areaX` | Default options for horizontal area marks |
58+
| AreaY | `areaY` | Default options for vertical area marks |
59+
| Bar | `bar` | Default options for bar marks |
60+
| BarX | `barX` | Default options for horizontal bar marks |
61+
| BarY | `barY` | Default options for vertical bar marks |
62+
| Box | `box` | Default options for box marks |
63+
| BoxX | `boxX` | Default options for horizontal box marks |
64+
| BoxY | `boxY` | Default options for vertical box marks |
65+
| Brush | `brush` | Default options for brush marks |
66+
| BrushX | `brushX` | Default options for horizontal brush marks |
67+
| BrushY | `brushY` | Default options for vertical brush marks |
68+
| Cell | `cell` | Default options for cell marks |
69+
| Dot | `dot` | Default options for dot marks |
70+
| Geo | `geo` | Default options for geo marks |
71+
| Graticule | `graticule` | Default options for graticule marks |
72+
| Line | `line` | Default options for line marks |
73+
| Link | `link` | Default options for link marks |
74+
| Pointer | `pointer` | Default options for pointer marks |
75+
| Rect | `rect` | Default options for rect marks |
76+
| RectX | `rectX` | Default options for horizontal rect marks |
77+
| RectY | `rectY` | Default options for vertical rect marks |
78+
| Rule | `rule` | Default options for rule marks |
79+
| RuleX | `ruleX` | Default options for horizontal rule marks |
80+
| RuleY | `ruleY` | Default options for vertical rule marks |
81+
| Sphere | `sphere` | Default options for sphere marks |
82+
| Spike | `spike` | Default options for spike marks |
83+
| Text | `text` | Default options for text marks |
84+
| Tick | `tick` | Default options for tick marks |
85+
| TickX | `tickX` | Default options for horizontal tick marks |
86+
| TickY | `tickY` | Default options for vertical tick marks |
87+
| Vector | `vector` | Default options for vector marks |
5088

5189
## CSS Variables
5290

@@ -56,7 +94,9 @@ SveltePlot is also relying on CSS variables.
5694
| ----------------- | ----------------------------- | ----- | ------- |
5795
| _--svelteplot-bg_ | Background color of your page | color | white |
5896

59-
## Example plot
97+
## Examples
98+
99+
Setting Global and Component Defaults
60100

61101
```svelte live
62102
<script>
@@ -66,49 +106,20 @@ SveltePlot is also relying on CSS variables.
66106
67107
let { penguins } = $derived(page.data.data);
68108
setContext('svelteplot/defaults', {
69-
axis: {
70-
tickSize: 0,
71-
tickPadding: 5
72-
},
73-
frame: { implicit: true },
74-
grid: { implicit: true },
109+
// Global defaults
75110
inset: 15,
76111
categoricalColorScheme: [
77112
'var(--svp-red)',
78113
'var(--svp-blue)',
79114
'var(--svp-green)'
80115
],
81-
dot: {
82-
r: 5
83-
}
84-
});
85-
</script>
86-
87-
<Plot>
88-
<Dot
89-
data={penguins}
90-
x="culmen_length_mm"
91-
fx="species"
92-
y="culmen_depth_mm"
93-
fill="species" />
94-
</Plot>
95-
```
96-
97-
```svelte
98-
<script>
99-
setContext('svelteplot/defaults', {
116+
// Component-specific defaults
100117
axis: {
101118
tickSize: 0,
102119
tickPadding: 5
103120
},
104121
frame: { implicit: true },
105122
grid: { implicit: true },
106-
inset: 15,
107-
categoricalColorScheme: [
108-
'var(--svp-red)',
109-
'var(--svp-blue)',
110-
'var(--svp-green)'
111-
],
112123
dot: {
113124
r: 5
114125
}
@@ -125,7 +136,29 @@ SveltePlot is also relying on CSS variables.
125136
</Plot>
126137
```
127138

128-
You can set mark-specific defaults, too:
139+
```js
140+
setContext('svelteplot/defaults', {
141+
// Global defaults
142+
inset: 15,
143+
categoricalColorScheme: [
144+
'var(--svp-red)',
145+
'var(--svp-blue)',
146+
'var(--svp-green)'
147+
],
148+
// Mark-specific defaults
149+
axis: {
150+
tickSize: 0,
151+
tickPadding: 5
152+
},
153+
frame: { implicit: true },
154+
grid: { implicit: true },
155+
dot: {
156+
r: 5
157+
}
158+
});
159+
```
160+
161+
another one
129162

130163
```svelte live
131164
<script>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy