svelteplot 0.2.4 → 0.2.6-next.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.
Files changed (17) hide show
  1. package/dist/core/Plot.svelte +17 -17
  2. package/dist/helpers/getBaseStyles.js +1 -0
  3. package/dist/helpers/index.js +1 -1
  4. package/dist/helpers/isRawValue.js +1 -1
  5. package/dist/index.d.ts +3 -67
  6. package/dist/index.js +3 -70
  7. package/dist/marks/helpers/BaseAxisX.svelte +25 -11
  8. package/dist/marks/helpers/BaseAxisY.svelte +28 -12
  9. package/dist/marks/index.d.ts +52 -0
  10. package/dist/marks/index.js +54 -0
  11. package/dist/transforms/bin.js +1 -1
  12. package/dist/transforms/group.js +1 -1
  13. package/dist/transforms/index.d.ts +15 -0
  14. package/dist/transforms/index.js +15 -0
  15. package/dist/transforms/stack.js +0 -1
  16. package/dist/types.d.ts +4 -3
  17. package/package.json +118 -114
package/dist/core/Plot.svelte CHANGED
@@ -28,22 +28,6 @@
28
28
  import mergeDeep from '../helpers/mergeDeep.js';
29
29
  import { computeScales, projectXY } from '../helpers/scales.js';
30
30
  import { CHANNEL_SCALE, SCALES } from '../constants.js';
31
- import { scale } from 'svelte/transition';
32
-
33
- let {
34
- header,
35
- footer,
36
- overlay,
37
- underlay,
38
- children,
39
- facetAxes,
40
- testid,
41
- facet,
42
- class: className = '',
43
- css,
44
- width: fixedWidth,
45
- ...initialOpts
46
- }: Partial<PlotOptions> = $props();
47
31
 
48
32
  // automatic margins can be applied by the marks, registered
49
33
  // with their respective unique identifier as keys
@@ -95,6 +79,21 @@
95
79
  ...getContext<Partial<PlotDefaults>>('svelteplot/defaults')
96
80
  };
97
81
 
82
+ let {
83
+ header,
84
+ footer,
85
+ overlay,
86
+ underlay,
87
+ children,
88
+ facetAxes,
89
+ testid,
90
+ facet,
91
+ class: className = '',
92
+ css = DEFAULTS.css,
93
+ width: fixedWidth,
94
+ ...initialOpts
95
+ }: Partial<PlotOptions> = $props();
96
+
98
97
  let width = $state(DEFAULTS.initialWidth);
99
98
 
100
99
  setContext('svelteplot/_defaults', DEFAULTS);
@@ -454,7 +453,8 @@
454
453
  symbol: { type: 'ordinal' },
455
454
  fx: { type: 'band', axis: 'top' },
456
455
  fy: { type: 'band', axis: 'right' },
457
- locale: DEFAULTS.locale
456
+ locale: DEFAULTS.locale,
457
+ css: DEFAULTS.css
458
458
  };
459
459
  }
460
460
 
package/dist/helpers/getBaseStyles.js CHANGED
@@ -15,6 +15,7 @@ const styleProps = {
15
15
  fontWeight: 'font-weight',
16
16
  fontStyle: 'font-style',
17
17
  textAnchor: 'text-anchor',
18
+ fontVariant: 'font-variant',
18
19
  cursor: 'cursor',
19
20
  pointerEvents: 'pointer-events'
20
21
  };
package/dist/helpers/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { resolveProp } from './resolve.js';
2
- import { isDate } from './typeChecks';
2
+ import { isDate } from './typeChecks.js';
3
3
  import { RAW_VALUE } from '../transforms/recordize.js';
4
4
  /**
5
5
  * Returns first argument that is not null or undefined
package/dist/helpers/isRawValue.js CHANGED
@@ -1,4 +1,4 @@
1
- import { isDate } from './typeChecks';
1
+ import { isDate } from './typeChecks.js';
2
2
  export default function (value) {
3
3
  const t = typeof value;
4
4
  return t === 'string' || t === 'number' || t === 'boolean' || isDate(value) || t === null;
package/dist/index.d.ts CHANGED
@@ -1,69 +1,5 @@
1
- export { default as Area } from './marks/Area.svelte';
2
- export { default as AreaX } from './marks/AreaX.svelte';
3
- export { default as AreaY } from './marks/AreaY.svelte';
4
- export { default as Arrow } from './marks/Arrow.svelte';
5
- export { default as AxisX } from './marks/AxisX.svelte';
6
- export { default as AxisY } from './marks/AxisY.svelte';
7
- export { default as BarX } from './marks/BarX.svelte';
8
- export { default as BarY } from './marks/BarY.svelte';
9
- export { default as BollingerX } from './marks/BollingerX.svelte';
10
- export { default as BollingerY } from './marks/BollingerY.svelte';
11
- export { default as BoxX } from './marks/BoxX.svelte';
12
- export { default as BoxY } from './marks/BoxY.svelte';
13
- export { default as Brush } from './marks/Brush.svelte';
14
- export { default as BrushX } from './marks/BrushX.svelte';
15
- export { default as BrushY } from './marks/BrushY.svelte';
16
- export { default as Cell } from './marks/Cell.svelte';
17
- export { default as CellX } from './marks/CellX.svelte';
18
- export { default as CellY } from './marks/CellY.svelte';
19
- export { default as CustomMark } from './marks/CustomMark.svelte';
20
- export { default as CustomMarkHTML } from './marks/CustomMarkHTML.svelte';
21
- export { default as DifferenceY } from './marks/DifferenceY.svelte';
22
- export { default as Dot } from './marks/Dot.svelte';
23
- export { default as DotX } from './marks/DotX.svelte';
24
- export { default as DotY } from './marks/DotY.svelte';
25
- export { default as Frame } from './marks/Frame.svelte';
26
- export { default as Geo } from './marks/Geo.svelte';
27
- export { default as Graticule } from './marks/Graticule.svelte';
28
- export { default as GridX } from './marks/GridX.svelte';
29
- export { default as GridY } from './marks/GridY.svelte';
30
- export { default as Line } from './marks/Line.svelte';
31
- export { default as LineX } from './marks/LineX.svelte';
32
- export { default as LineY } from './marks/LineY.svelte';
33
- export { default as Link } from './marks/Link.svelte';
34
1
  export { default as Plot } from './Plot.svelte';
35
- export { default as Pointer } from './marks/Pointer.svelte';
36
- export { default as Vector } from './marks/Vector.svelte';
37
- export { default as Rect } from './marks/Rect.svelte';
38
- export { default as RectX } from './marks/RectX.svelte';
39
- export { default as RectY } from './marks/RectY.svelte';
40
- export { default as RegressionX } from './marks/RegressionX.svelte';
41
- export { default as RegressionY } from './marks/RegressionY.svelte';
42
- export { default as RuleX } from './marks/RuleX.svelte';
43
- export { default as RuleY } from './marks/RuleY.svelte';
44
- export { default as Sphere } from './marks/Sphere.svelte';
45
- export { default as Spike } from './marks/Spike.svelte';
46
- export { default as Text } from './marks/Text.svelte';
47
- export { default as TickX } from './marks/TickX.svelte';
48
- export { default as TickY } from './marks/TickY.svelte';
49
- export { default as ColorLegend } from './marks/ColorLegend.svelte';
50
- export { default as HTMLTooltip } from './marks/HTMLTooltip.svelte';
51
- export { default as SymbolLegend } from './marks/SymbolLegend.svelte';
52
- export { bin, binX, binY } from './transforms/bin.js';
53
- export { bollingerX, bollingerY } from './transforms/bollinger.js';
54
- export { geoCentroid } from './transforms/centroid.js';
55
- export { filter } from './transforms/filter.js';
56
- export { map, mapX, mapY } from './transforms/map.js';
57
- export { normalizeX, normalizeY } from './transforms/normalize.js';
58
- export { group, groupX, groupY, groupZ } from './transforms/group.js';
59
- export { intervalX, intervalY } from './transforms/interval.js';
60
- export { recordizeX, recordizeY } from './transforms/recordize.js';
61
- export { renameChannels, replaceChannels } from './transforms/rename.js';
62
- export { select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY } from './transforms/select.js';
63
- export { shiftX, shiftY } from './transforms/shift.js';
64
- export { sort, shuffle, reverse } from './transforms/sort.js';
65
- export { stackX, stackY } from './transforms/stack.js';
66
- export { windowX, windowY } from './transforms/window.js';
2
+ export { default as PlotCore } from './core/Plot.svelte';
3
+ export * from './marks/index.js';
4
+ export * from './transforms/index.js';
67
5
  export { formatMonth } from './helpers/formats.js';
68
- export { default as LinearGradientX } from './marks/helpers/LinearGradientX.svelte';
69
- export { default as LinearGradientY } from './marks/helpers/LinearGradientY.svelte';
package/dist/index.js CHANGED
@@ -1,73 +1,6 @@
1
- // SVG marks
2
- export { default as Area } from './marks/Area.svelte';
3
- export { default as AreaX } from './marks/AreaX.svelte';
4
- export { default as AreaY } from './marks/AreaY.svelte';
5
- export { default as Arrow } from './marks/Arrow.svelte';
6
- export { default as AxisX } from './marks/AxisX.svelte';
7
- export { default as AxisY } from './marks/AxisY.svelte';
8
- export { default as BarX } from './marks/BarX.svelte';
9
- export { default as BarY } from './marks/BarY.svelte';
10
- export { default as BollingerX } from './marks/BollingerX.svelte';
11
- export { default as BollingerY } from './marks/BollingerY.svelte';
12
- export { default as BoxX } from './marks/BoxX.svelte';
13
- export { default as BoxY } from './marks/BoxY.svelte';
14
- export { default as Brush } from './marks/Brush.svelte';
15
- export { default as BrushX } from './marks/BrushX.svelte';
16
- export { default as BrushY } from './marks/BrushY.svelte';
17
- export { default as Cell } from './marks/Cell.svelte';
18
- export { default as CellX } from './marks/CellX.svelte';
19
- export { default as CellY } from './marks/CellY.svelte';
20
- export { default as CustomMark } from './marks/CustomMark.svelte';
21
- export { default as CustomMarkHTML } from './marks/CustomMarkHTML.svelte';
22
- export { default as DifferenceY } from './marks/DifferenceY.svelte';
23
- export { default as Dot } from './marks/Dot.svelte';
24
- export { default as DotX } from './marks/DotX.svelte';
25
- export { default as DotY } from './marks/DotY.svelte';
26
- export { default as Frame } from './marks/Frame.svelte';
27
- export { default as Geo } from './marks/Geo.svelte';
28
- export { default as Graticule } from './marks/Graticule.svelte';
29
- export { default as GridX } from './marks/GridX.svelte';
30
- export { default as GridY } from './marks/GridY.svelte';
31
- export { default as Line } from './marks/Line.svelte';
32
- export { default as LineX } from './marks/LineX.svelte';
33
- export { default as LineY } from './marks/LineY.svelte';
34
- export { default as Link } from './marks/Link.svelte';
35
1
  export { default as Plot } from './Plot.svelte';
36
- export { default as Pointer } from './marks/Pointer.svelte';
37
- export { default as Vector } from './marks/Vector.svelte';
38
- export { default as Rect } from './marks/Rect.svelte';
39
- export { default as RectX } from './marks/RectX.svelte';
40
- export { default as RectY } from './marks/RectY.svelte';
41
- export { default as RegressionX } from './marks/RegressionX.svelte';
42
- export { default as RegressionY } from './marks/RegressionY.svelte';
43
- export { default as RuleX } from './marks/RuleX.svelte';
44
- export { default as RuleY } from './marks/RuleY.svelte';
45
- export { default as Sphere } from './marks/Sphere.svelte';
46
- export { default as Spike } from './marks/Spike.svelte';
47
- export { default as Text } from './marks/Text.svelte';
48
- export { default as TickX } from './marks/TickX.svelte';
49
- export { default as TickY } from './marks/TickY.svelte';
50
- // HTML marks
51
- export { default as ColorLegend } from './marks/ColorLegend.svelte';
52
- export { default as HTMLTooltip } from './marks/HTMLTooltip.svelte';
53
- export { default as SymbolLegend } from './marks/SymbolLegend.svelte';
54
- // transforms
55
- export { bin, binX, binY } from './transforms/bin.js';
56
- export { bollingerX, bollingerY } from './transforms/bollinger.js';
57
- export { geoCentroid } from './transforms/centroid.js';
58
- export { filter } from './transforms/filter.js';
59
- export { map, mapX, mapY } from './transforms/map.js';
60
- export { normalizeX, normalizeY } from './transforms/normalize.js';
61
- export { group, groupX, groupY, groupZ } from './transforms/group.js';
62
- export { intervalX, intervalY } from './transforms/interval.js';
63
- export { recordizeX, recordizeY } from './transforms/recordize.js';
64
- export { renameChannels, replaceChannels } from './transforms/rename.js';
65
- export { select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY } from './transforms/select.js';
66
- export { shiftX, shiftY } from './transforms/shift.js';
67
- export { sort, shuffle, reverse } from './transforms/sort.js';
68
- export { stackX, stackY } from './transforms/stack.js';
69
- export { windowX, windowY } from './transforms/window.js';
2
+ export { default as PlotCore } from './core/Plot.svelte';
3
+ export * from './marks/index.js';
4
+ export * from './transforms/index.js';
70
5
  // helpers
71
6
  export { formatMonth } from './helpers/formats.js';
72
- export { default as LinearGradientX } from './marks/helpers/LinearGradientX.svelte';
73
- export { default as LinearGradientY } from './marks/helpers/LinearGradientY.svelte';
package/dist/marks/helpers/BaseAxisX.svelte CHANGED
@@ -11,7 +11,7 @@
11
11
  RawValue,
12
12
  ScaleType
13
13
  } from '../../types.js';
14
- import { resolveScaledStyles, resolveProp } from '../../helpers/resolve.js';
14
+ import { resolveProp, resolveStyles } from '../../helpers/resolve.js';
15
15
  import { max } from 'd3-array';
16
16
  import { randomId, testFilter } from '../../helpers/index.js';
17
17
 
@@ -142,7 +142,7 @@
142
142
  </script>
143
143
 
144
144
  <g class="axis-x">
145
- {#each positionedTicks as tick, t}
145
+ {#each positionedTicks as tick, t (t)}
146
146
  {#if testFilter(tick.value, options) && !tick.hidden}
147
147
  {@const textLines = tick.text}
148
148
  {@const prevTextLines = t && positionedTicks[t - 1].text}
@@ -152,27 +152,41 @@
152
152
  {@const moveDown =
153
153
  (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize * 0.35 : 0)) *
154
154
  (anchor === 'bottom' ? 1 : -1)}
155
+ {@const [textStyle, textClass] = resolveStyles(
156
+ plot,
157
+ tick,
158
+ {
159
+ fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
160
+ ...options,
161
+ fontSize: tickFontSize,
162
+ stroke: null
163
+ },
164
+ 'fill',
165
+ { x: true }
166
+ )}
155
167
  <g
156
168
  class="tick {tickClass_ || ''}"
157
169
  transform="translate({tick.x + tick.dx}, {tickY + tick.dy})"
158
170
  text-anchor={tickRotate < 0 ? 'end' : tickRotate > 0 ? 'start' : 'middle'}>
159
171
  {#if tickSize}
172
+ {@const [tickLineStyle, tickLineClass] = resolveStyles(
173
+ plot,
174
+ tick,
175
+ options,
176
+ 'stroke',
177
+ { x: true }
178
+ )}
160
179
  <line
161
- style={resolveScaledStyles(tick, options, {}, plot, 'stroke')}
180
+ style={tickLineStyle}
181
+ class={tickLineClass}
162
182
  y2={anchor === 'bottom' ? tickSize : -tickSize} />
163
183
  {/if}
164
184
 
165
185
  <text
166
186
  bind:this={tickTextElements[t]}
167
187
  transform="translate(0, {moveDown}) rotate({tickRotate})"
168
- style:font-variant={isQuantitative ? 'tabular-nums' : 'normal'}
169
- style={resolveScaledStyles(
170
- tick,
171
- { ...options, fontSize: tickFontSize, stroke: null },
172
- {},
173
- plot,
174
- 'fill'
175
- )}
188
+ style={textStyle}
189
+ class={textClass}
176
190
  x={0}
177
191
  y={0}
178
192
  dominant-baseline={tickRotate !== 0
package/dist/marks/helpers/BaseAxisY.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
- import { getContext, untrack } from 'svelte';
2
+ import { getContext, tick, untrack } from 'svelte';
3
3
  import { randomId, testFilter } from '../../helpers/index.js';
4
- import { resolveProp, resolveScaledStyles } from '../../helpers/resolve.js';
4
+ import { resolveProp, resolveStyles } from '../../helpers/resolve.js';
5
5
  import { max } from 'd3-array';
6
6
  import type {
7
7
  AutoMarginStores,
@@ -84,6 +84,8 @@
84
84
 
85
85
  let tickTexts = $state([] as SVGTextElement[]);
86
86
 
87
+ const isQuantitative = $derived(scaleType !== 'point' && scaleType !== 'band');
88
+
87
89
  // generate id used for registering margins
88
90
  const id = randomId();
89
91
 
@@ -141,29 +143,43 @@
141
143
  </script>
142
144
 
143
145
  <g class="axis-y">
144
- {#each positionedTicks as tick, t}
146
+ {#each positionedTicks as tick, t (t)}
145
147
  {#if testFilter(tick.value, options) && !tick.hidden}
146
148
  {@const tickClass_ = resolveProp(tickClass, tick.value)}
149
+ {@const [textStyle, textClass] = resolveStyles(
150
+ plot,
151
+ tick,
152
+ {
153
+ fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
154
+ ...options,
155
+ fontSize: tickFontSize,
156
+ stroke: null
157
+ },
158
+ 'fill',
159
+ { y: true }
160
+ )}
147
161
  <g
148
162
  class="tick {tickClass_ || ''}"
149
163
  transform="translate({tick.dx +
150
164
  marginLeft +
151
165
  (anchor === 'left' ? 0 : width)},{tick.y + tick.dy})">
152
166
  {#if tickSize}
167
+ {@const [tickLineStyle, tickLineClass] = resolveStyles(
168
+ plot,
169
+ tick,
170
+ options,
171
+ 'stroke',
172
+ { y: true }
173
+ )}
153
174
  <line
154
- style={resolveScaledStyles(tick.value, options, {}, plot, 'stroke')}
175
+ style={tickLineStyle}
176
+ class={tickLineClass}
155
177
  x2={anchor === 'left' ? -tickSize : tickSize} />
156
178
  {/if}
157
179
  <text
158
180
  bind:this={tickTexts[t]}
159
- class={{ 'is-left': anchor === 'left' }}
160
- style={resolveScaledStyles(
161
- tick.value,
162
- { ...options, fontSize: tickFontSize, stroke: null },
163
- {},
164
- plot,
165
- 'fill'
166
- )}
181
+ class={[textClass, { 'is-left': anchor === 'left' }]}
182
+ style={textStyle}
167
183
  x={(tickSize + tickPadding) * (anchor === 'left' ? -1 : 1)}
168
184
  dominant-baseline={LINE_ANCHOR[lineAnchor]}
169
185
  >{Array.isArray(tick.text) ? tick.text.join(' ') : tick.text}</text>
package/dist/marks/index.d.ts ADDED
@@ -0,0 +1,52 @@
1
+ export { default as Area } from './Area.svelte';
2
+ export { default as AreaX } from './AreaX.svelte';
3
+ export { default as AreaY } from './AreaY.svelte';
4
+ export { default as Arrow } from './Arrow.svelte';
5
+ export { default as AxisX } from './AxisX.svelte';
6
+ export { default as AxisY } from './AxisY.svelte';
7
+ export { default as BarX } from './BarX.svelte';
8
+ export { default as BarY } from './BarY.svelte';
9
+ export { default as BollingerX } from './BollingerX.svelte';
10
+ export { default as BollingerY } from './BollingerY.svelte';
11
+ export { default as BoxX } from './BoxX.svelte';
12
+ export { default as BoxY } from './BoxY.svelte';
13
+ export { default as Brush } from './Brush.svelte';
14
+ export { default as BrushX } from './BrushX.svelte';
15
+ export { default as BrushY } from './BrushY.svelte';
16
+ export { default as Cell } from './Cell.svelte';
17
+ export { default as CellX } from './CellX.svelte';
18
+ export { default as CellY } from './CellY.svelte';
19
+ export { default as CustomMark } from './CustomMark.svelte';
20
+ export { default as CustomMarkHTML } from './CustomMarkHTML.svelte';
21
+ export { default as DifferenceY } from './DifferenceY.svelte';
22
+ export { default as Dot } from './Dot.svelte';
23
+ export { default as DotX } from './DotX.svelte';
24
+ export { default as DotY } from './DotY.svelte';
25
+ export { default as Frame } from './Frame.svelte';
26
+ export { default as Geo } from './Geo.svelte';
27
+ export { default as Graticule } from './Graticule.svelte';
28
+ export { default as GridX } from './GridX.svelte';
29
+ export { default as GridY } from './GridY.svelte';
30
+ export { default as Line } from './Line.svelte';
31
+ export { default as LineX } from './LineX.svelte';
32
+ export { default as LineY } from './LineY.svelte';
33
+ export { default as Link } from './Link.svelte';
34
+ export { default as Pointer } from './Pointer.svelte';
35
+ export { default as Vector } from './Vector.svelte';
36
+ export { default as Rect } from './Rect.svelte';
37
+ export { default as RectX } from './RectX.svelte';
38
+ export { default as RectY } from './RectY.svelte';
39
+ export { default as RegressionX } from './RegressionX.svelte';
40
+ export { default as RegressionY } from './RegressionY.svelte';
41
+ export { default as RuleX } from './RuleX.svelte';
42
+ export { default as RuleY } from './RuleY.svelte';
43
+ export { default as Sphere } from './Sphere.svelte';
44
+ export { default as Spike } from './Spike.svelte';
45
+ export { default as Text } from './Text.svelte';
46
+ export { default as TickX } from './TickX.svelte';
47
+ export { default as TickY } from './TickY.svelte';
48
+ export { default as ColorLegend } from './ColorLegend.svelte';
49
+ export { default as HTMLTooltip } from './HTMLTooltip.svelte';
50
+ export { default as SymbolLegend } from './SymbolLegend.svelte';
51
+ export { default as LinearGradientX } from './helpers/LinearGradientX.svelte';
52
+ export { default as LinearGradientY } from './helpers/LinearGradientY.svelte';
package/dist/marks/index.js ADDED
@@ -0,0 +1,54 @@
1
+ export { default as Area } from './Area.svelte';
2
+ export { default as AreaX } from './AreaX.svelte';
3
+ export { default as AreaY } from './AreaY.svelte';
4
+ export { default as Arrow } from './Arrow.svelte';
5
+ export { default as AxisX } from './AxisX.svelte';
6
+ export { default as AxisY } from './AxisY.svelte';
7
+ export { default as BarX } from './BarX.svelte';
8
+ export { default as BarY } from './BarY.svelte';
9
+ export { default as BollingerX } from './BollingerX.svelte';
10
+ export { default as BollingerY } from './BollingerY.svelte';
11
+ export { default as BoxX } from './BoxX.svelte';
12
+ export { default as BoxY } from './BoxY.svelte';
13
+ export { default as Brush } from './Brush.svelte';
14
+ export { default as BrushX } from './BrushX.svelte';
15
+ export { default as BrushY } from './BrushY.svelte';
16
+ export { default as Cell } from './Cell.svelte';
17
+ export { default as CellX } from './CellX.svelte';
18
+ export { default as CellY } from './CellY.svelte';
19
+ export { default as CustomMark } from './CustomMark.svelte';
20
+ export { default as CustomMarkHTML } from './CustomMarkHTML.svelte';
21
+ export { default as DifferenceY } from './DifferenceY.svelte';
22
+ export { default as Dot } from './Dot.svelte';
23
+ export { default as DotX } from './DotX.svelte';
24
+ export { default as DotY } from './DotY.svelte';
25
+ export { default as Frame } from './Frame.svelte';
26
+ export { default as Geo } from './Geo.svelte';
27
+ export { default as Graticule } from './Graticule.svelte';
28
+ export { default as GridX } from './GridX.svelte';
29
+ export { default as GridY } from './GridY.svelte';
30
+ export { default as Line } from './Line.svelte';
31
+ export { default as LineX } from './LineX.svelte';
32
+ export { default as LineY } from './LineY.svelte';
33
+ export { default as Link } from './Link.svelte';
34
+ export { default as Pointer } from './Pointer.svelte';
35
+ export { default as Vector } from './Vector.svelte';
36
+ export { default as Rect } from './Rect.svelte';
37
+ export { default as RectX } from './RectX.svelte';
38
+ export { default as RectY } from './RectY.svelte';
39
+ export { default as RegressionX } from './RegressionX.svelte';
40
+ export { default as RegressionY } from './RegressionY.svelte';
41
+ export { default as RuleX } from './RuleX.svelte';
42
+ export { default as RuleY } from './RuleY.svelte';
43
+ export { default as Sphere } from './Sphere.svelte';
44
+ export { default as Spike } from './Spike.svelte';
45
+ export { default as Text } from './Text.svelte';
46
+ export { default as TickX } from './TickX.svelte';
47
+ export { default as TickY } from './TickY.svelte';
48
+ // HTML marks
49
+ export { default as ColorLegend } from './ColorLegend.svelte';
50
+ export { default as HTMLTooltip } from './HTMLTooltip.svelte';
51
+ export { default as SymbolLegend } from './SymbolLegend.svelte';
52
+ // helper marks
53
+ export { default as LinearGradientX } from './helpers/LinearGradientX.svelte';
54
+ export { default as LinearGradientY } from './helpers/LinearGradientY.svelte';
package/dist/transforms/bin.js CHANGED
@@ -3,7 +3,7 @@ import { maybeInterval } from '../helpers/autoTicks.js';
3
3
  import { bin as d3Bin, extent, groups as d3Groups, thresholdFreedmanDiaconis, thresholdScott, thresholdSturges } from 'd3-array';
4
4
  import { Reducer, reduceOutputs } from '../helpers/reduce.js';
5
5
  import { groupFacetsAndZ } from '../helpers/group.js';
6
- import { isDate } from '../helpers/typeChecks';
6
+ import { isDate } from '../helpers/typeChecks.js';
7
7
  const ThresholdGenerators = {
8
8
  auto: thresholdScott,
9
9
  scott: thresholdScott,
package/dist/transforms/group.js CHANGED
@@ -3,7 +3,7 @@ import { testFilter } from '../helpers/index.js';
3
3
  import { reduceOutputs } from '../helpers/reduce.js';
4
4
  import { resolveChannel } from '../helpers/resolve.js';
5
5
  import { groups as d3Groups } from 'd3-array';
6
- import { omit } from '../helpers';
6
+ import { omit } from '../helpers/index.js';
7
7
  import { maybeInterval } from '../helpers/autoTicks.js';
8
8
  /**
9
9
  * groups the dataset by x and y channel and optionally reduces the group items
package/dist/transforms/index.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ export { bin, binX, binY } from './bin.js';
2
+ export { bollingerX, bollingerY } from './bollinger.js';
3
+ export { geoCentroid } from './centroid.js';
4
+ export { filter } from './filter.js';
5
+ export { map, mapX, mapY } from './map.js';
6
+ export { normalizeX, normalizeY } from './normalize.js';
7
+ export { group, groupX, groupY, groupZ } from './group.js';
8
+ export { intervalX, intervalY } from './interval.js';
9
+ export { recordizeX, recordizeY } from './recordize.js';
10
+ export { renameChannels, replaceChannels } from './rename.js';
11
+ export { select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY } from './select.js';
12
+ export { shiftX, shiftY } from './shift.js';
13
+ export { sort, shuffle, reverse } from './sort.js';
14
+ export { stackX, stackY } from './stack.js';
15
+ export { windowX, windowY } from './window.js';
package/dist/transforms/index.js ADDED
@@ -0,0 +1,15 @@
1
+ export { bin, binX, binY } from './bin.js';
2
+ export { bollingerX, bollingerY } from './bollinger.js';
3
+ export { geoCentroid } from './centroid.js';
4
+ export { filter } from './filter.js';
5
+ export { map, mapX, mapY } from './map.js';
6
+ export { normalizeX, normalizeY } from './normalize.js';
7
+ export { group, groupX, groupY, groupZ } from './group.js';
8
+ export { intervalX, intervalY } from './interval.js';
9
+ export { recordizeX, recordizeY } from './recordize.js';
10
+ export { renameChannels, replaceChannels } from './rename.js';
11
+ export { select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY } from './select.js';
12
+ export { shiftX, shiftY } from './shift.js';
13
+ export { sort, shuffle, reverse } from './sort.js';
14
+ export { stackX, stackY } from './stack.js';
15
+ export { windowX, windowY } from './window.js';
package/dist/transforms/stack.js CHANGED
@@ -2,7 +2,6 @@ import isDataRecord from '../helpers/isDataRecord.js';
2
2
  import { resolveChannel } from '../helpers/resolve.js';
3
3
  import { stack, stackOffsetExpand, stackOffsetSilhouette, stackOffsetWiggle, stackOrderAppearance, stackOrderAscending, stackOrderInsideOut, stackOrderNone, stackOffsetDiverging } from 'd3-shape';
4
4
  import { index, union, groups as d3Groups } from 'd3-array';
5
- import { RAW_VALUE } from './recordize';
6
5
  const GROUP = Symbol('group');
7
6
  const FACET = Symbol('group');
8
7
  const DEFAULT_STACK_OPTIONS = {
package/dist/types.d.ts CHANGED
@@ -296,9 +296,9 @@ export type PlotOptions = {
296
296
  */
297
297
  locale: string;
298
298
  /**
299
- *
299
+ * pass a @emotion/css function to style plot using dynamic classes
300
300
  */
301
- css: (d: string) => string;
301
+ css: (d: string) => string | undefined;
302
302
  };
303
303
  export type PlotDefaults = {
304
304
  axisXAnchor: AxisXAnchor;
@@ -339,6 +339,7 @@ export type PlotDefaults = {
339
339
  */
340
340
  numberFormat: Intl.NumberFormatOptions;
341
341
  markerDotRadius: number;
342
+ css: (d: string) => string | undefined;
342
343
  };
343
344
  export type GenericMarkOptions = Record<string, any>;
344
345
  export type DataRecord = Record<string | symbol, RawValue> & {
@@ -583,7 +584,7 @@ export type TransformArgsRecord = Partial<Channels> & {
583
584
  data: DataRecord[];
584
585
  };
585
586
  export type ColorScheme = 'brbg' | 'prgn' | 'piyg' | 'puor' | 'rdbu' | 'rdgy' | 'rdylbu' | 'rdylgn' | 'spectral' | 'burd' | 'buylrd' | 'blues' | 'greens' | 'grays' | 'greys' | 'oranges' | 'purples' | 'reds' | 'turbo' | 'viridis' | 'magma' | 'inferno' | 'plasma' | 'cividis' | 'cubehelix' | 'warm' | 'cool' | 'bugn' | 'bupu' | 'gnbu' | 'orrd' | 'pubu' | 'pubugn' | 'purd' | 'rdpu' | 'ylgn' | 'ylgnbu' | 'ylorbr' | 'ylorrd' | 'rainbow' | 'sinebow' | 'accent' | 'category10' | 'dark2' | 'paired' | 'pastel1' | 'pastel2' | 'set1' | 'set2' | 'set3' | 'tableau10' | 'observable10';
586
- export type MarkStyleProps = 'strokeDasharray' | 'strokeLinejoin' | 'strokeLinecap' | 'opacity' | 'cursor' | 'pointerEvents' | 'blend' | 'fill' | 'fillOpacity' | 'fontWeight' | 'fontSize' | 'fontStyle' | 'stroke' | 'strokeWidth' | 'strokeOpacity' | 'x' | 'y' | 'clipPath' | 'mask' | 'filter' | 'angle' | 'radius' | 'symbol' | 'textAnchor' | 'width';
587
+ export type MarkStyleProps = 'strokeDasharray' | 'strokeLinejoin' | 'strokeLinecap' | 'opacity' | 'cursor' | 'pointerEvents' | 'blend' | 'fill' | 'fillOpacity' | 'fontWeight' | 'fontVariant' | 'fontSize' | 'fontStyle' | 'stroke' | 'strokeWidth' | 'strokeOpacity' | 'x' | 'y' | 'clipPath' | 'mask' | 'filter' | 'angle' | 'radius' | 'symbol' | 'textAnchor' | 'width';
587
588
  export type AutoMarginStores = {
588
589
  autoMarginTop: Writable<Map<string, number>>;
589
590
  autoMarginLeft: Writable<Map<string, number>>;
package/package.json CHANGED
@@ -1,120 +1,124 @@
1
1
  {
2
- "name": "svelteplot",
3
- "version": "0.2.4",
4
- "license": "ISC",
5
- "author": {
6
- "name": "Gregor Aisch",
7
- "email": "gka@users.noreply.github.com"
8
- },
9
- "exports": {
10
- ".": {
11
- "types": "./dist/index.d.ts",
12
- "svelte": "./dist/index.js"
2
+ "name": "svelteplot",
3
+ "version": "0.2.6-next.0",
4
+ "license": "ISC",
5
+ "author": {
6
+ "name": "Gregor Aisch",
7
+ "email": "gka@users.noreply.github.com"
13
8
  },
14
- "./*.js": {
15
- "import": "./dist/*.js"
9
+ "scripts": {
10
+ "dev": "vite dev",
11
+ "build": "vite build",
12
+ "preview": "vite preview",
13
+ "test": "npm run test:unit",
14
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
15
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
16
+ "lint": "prettier --check src && eslint src",
17
+ "format": "prettier --write .",
18
+ "test:unit": "vitest",
19
+ "prepack": "npx svelte-package",
20
+ "release-next": "npm version prerelease --preid next && npm publish && git push && git push --tags && sleep 1 && npm dist-tag add svelteplot@$(npm view . version) next",
21
+ "docs": "npm run build && cd build && rsync --recursive . vis4.net:svelteplot/alpha0/"
16
22
  },
17
- "./*.svelte": {
18
- "import": "./dist/*.svelte"
23
+ "exports": {
24
+ ".": {
25
+ "types": "./dist/index.d.ts",
26
+ "svelte": "./dist/index.js"
27
+ },
28
+ "./*.js": {
29
+ "import": "./dist/*.js"
30
+ },
31
+ "./*.svelte": {
32
+ "import": "./dist/*.svelte"
33
+ },
34
+ "./core/*.svelte": {
35
+ "import": "./dist/core/*.svelte"
36
+ },
37
+ "./marks/*.svelte": {
38
+ "import": "./dist/marks/*.svelte"
39
+ },
40
+ "./transforms": {
41
+ "import": "./dist/transforms/index.js"
42
+ }
19
43
  },
20
- "./core/*.svelte": {
21
- "import": "./dist/core/*.svelte"
44
+ "main": "./dist/index.js",
45
+ "files": [
46
+ "dist",
47
+ "!dist/**/*.test.*",
48
+ "!dist/**/*.spec.*"
49
+ ],
50
+ "devDependencies": {
51
+ "@aitodotai/json-stringify-pretty-compact": "^1.3.0",
52
+ "@emotion/css": "^11.13.5",
53
+ "@sveltejs/adapter-auto": "^6.0.1",
54
+ "@sveltejs/adapter-static": "^3.0.8",
55
+ "@sveltejs/eslint-config": "^8.2.0",
56
+ "@sveltejs/kit": "^2.21.0",
57
+ "@sveltejs/package": "^2.3.11",
58
+ "@sveltejs/vite-plugin-svelte": "5.0.3",
59
+ "@sveltepress/theme-default": "^6.0.3",
60
+ "@sveltepress/twoslash": "^1.2.2",
61
+ "@sveltepress/vite": "^1.2.2",
62
+ "@testing-library/svelte": "^5.2.7",
63
+ "@testing-library/user-event": "^14.6.1",
64
+ "@types/d3-array": "^3.2.1",
65
+ "@types/d3-color": "^3.1.3",
66
+ "@types/d3-dsv": "^3.0.7",
67
+ "@types/d3-geo": "^3.1.0",
68
+ "@types/d3-interpolate": "^3.0.4",
69
+ "@types/d3-path": "^3.1.1",
70
+ "@types/d3-random": "^3.0.3",
71
+ "@types/d3-scale": "^4.0.9",
72
+ "@types/d3-scale-chromatic": "^3.1.0",
73
+ "@types/d3-shape": "^3.1.7",
74
+ "@typescript-eslint/eslint-plugin": "^8.32.1",
75
+ "@typescript-eslint/parser": "^8.32.1",
76
+ "csstype": "^3.1.3",
77
+ "d3-dsv": "^3.0.1",
78
+ "d3-fetch": "^3.0.1",
79
+ "d3-force": "^3.0.0",
80
+ "eslint": "^9.26.0",
81
+ "eslint-config-prettier": "^10.1.5",
82
+ "eslint-plugin-svelte": "3.7.0",
83
+ "jsdom": "^26.1.0",
84
+ "prettier": "^3.5.3",
85
+ "prettier-plugin-svelte": "^3.4.0",
86
+ "remark-code-extra": "^1.0.1",
87
+ "remark-code-frontmatter": "^1.0.0",
88
+ "resize-observer-polyfill": "^1.5.1",
89
+ "sass": "^1.89.0",
90
+ "svelte-check": "^4.2.1",
91
+ "svelte-eslint-parser": "1.2.0",
92
+ "svelte-highlight": "^7.8.3",
93
+ "svg-path-parser": "^1.1.0",
94
+ "topojson-client": "^3.1.0",
95
+ "tslib": "^2.8.1",
96
+ "typedoc": "^0.28.4",
97
+ "typedoc-plugin-markdown": "^4.6.3",
98
+ "typescript": "^5.8.3",
99
+ "vite": "^6.3.5",
100
+ "vitest": "^3.1.3",
101
+ "vitest-matchmedia-mock": "^2.0.3"
22
102
  },
23
- "./marks/*.svelte": {
24
- "import": "./dist/marks/*.svelte"
103
+ "types": "./dist/index.d.ts",
104
+ "type": "module",
105
+ "dependencies": {
106
+ "d3-array": "^3.2.4",
107
+ "d3-color": "^3.1.0",
108
+ "d3-format": "^3.1.0",
109
+ "d3-geo": "^3.1.1",
110
+ "d3-interpolate": "^3.0.1",
111
+ "d3-path": "^3.1.0",
112
+ "d3-quadtree": "^3.0.1",
113
+ "d3-random": "^3.0.1",
114
+ "d3-regression": "^1.3.10",
115
+ "d3-scale": "^4.0.2",
116
+ "d3-scale-chromatic": "^3.1.0",
117
+ "d3-shape": "^3.2.0",
118
+ "d3-time": "^3.1.0",
119
+ "es-toolkit": "^1.37.2",
120
+ "fast-equals": "^5.2.2",
121
+ "merge-deep": "^3.0.3",
122
+ "svelte": "5.30.1"
25
123
  }
26
- },
27
- "main": "./dist/index.js",
28
- "files": [
29
- "dist",
30
- "!dist/**/*.test.*",
31
- "!dist/**/*.spec.*"
32
- ],
33
- "devDependencies": {
34
- "@aitodotai/json-stringify-pretty-compact": "^1.3.0",
35
- "@emotion/css": "^11.13.5",
36
- "@sveltejs/adapter-auto": "^6.0.1",
37
- "@sveltejs/adapter-static": "^3.0.8",
38
- "@sveltejs/eslint-config": "^8.2.0",
39
- "@sveltejs/kit": "^2.21.0",
40
- "@sveltejs/package": "^2.3.11",
41
- "@sveltejs/vite-plugin-svelte": "5.0.3",
42
- "@sveltepress/theme-default": "^6.0.3",
43
- "@sveltepress/twoslash": "^1.2.2",
44
- "@sveltepress/vite": "^1.2.2",
45
- "@testing-library/svelte": "^5.2.7",
46
- "@testing-library/user-event": "^14.6.1",
47
- "@types/d3-array": "^3.2.1",
48
- "@types/d3-color": "^3.1.3",
49
- "@types/d3-dsv": "^3.0.7",
50
- "@types/d3-geo": "^3.1.0",
51
- "@types/d3-interpolate": "^3.0.4",
52
- "@types/d3-path": "^3.1.1",
53
- "@types/d3-random": "^3.0.3",
54
- "@types/d3-scale": "^4.0.9",
55
- "@types/d3-scale-chromatic": "^3.1.0",
56
- "@types/d3-shape": "^3.1.7",
57
- "@typescript-eslint/eslint-plugin": "^8.32.1",
58
- "@typescript-eslint/parser": "^8.32.1",
59
- "csstype": "^3.1.3",
60
- "d3-dsv": "^3.0.1",
61
- "d3-fetch": "^3.0.1",
62
- "d3-force": "^3.0.0",
63
- "eslint": "^9.26.0",
64
- "eslint-config-prettier": "^10.1.5",
65
- "eslint-plugin-svelte": "3.7.0",
66
- "jsdom": "^26.1.0",
67
- "prettier": "^3.5.3",
68
- "prettier-plugin-svelte": "^3.4.0",
69
- "remark-code-extra": "^1.0.1",
70
- "remark-code-frontmatter": "^1.0.0",
71
- "resize-observer-polyfill": "^1.5.1",
72
- "sass": "^1.89.0",
73
- "svelte-check": "^4.2.1",
74
- "svelte-eslint-parser": "1.2.0",
75
- "svelte-highlight": "^7.8.3",
76
- "svg-path-parser": "^1.1.0",
77
- "topojson-client": "^3.1.0",
78
- "tslib": "^2.8.1",
79
- "typedoc": "^0.28.4",
80
- "typedoc-plugin-markdown": "^4.6.3",
81
- "typescript": "^5.8.3",
82
- "vite": "^6.3.5",
83
- "vitest": "^3.1.3",
84
- "vitest-matchmedia-mock": "^2.0.3"
85
- },
86
- "types": "./dist/index.d.ts",
87
- "type": "module",
88
- "dependencies": {
89
- "d3-array": "^3.2.4",
90
- "d3-color": "^3.1.0",
91
- "d3-format": "^3.1.0",
92
- "d3-geo": "^3.1.1",
93
- "d3-interpolate": "^3.0.1",
94
- "d3-path": "^3.1.0",
95
- "d3-quadtree": "^3.0.1",
96
- "d3-random": "^3.0.1",
97
- "d3-regression": "^1.3.10",
98
- "d3-scale": "^4.0.2",
99
- "d3-scale-chromatic": "^3.1.0",
100
- "d3-shape": "^3.2.0",
101
- "d3-time": "^3.1.0",
102
- "es-toolkit": "^1.37.2",
103
- "fast-equals": "^5.2.2",
104
- "merge-deep": "^3.0.3",
105
- "svelte": "5.30.1"
106
- },
107
- "scripts": {
108
- "dev": "vite dev",
109
- "build": "vite build",
110
- "preview": "vite preview",
111
- "test": "npm run test:unit",
112
- "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
113
- "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
114
- "lint": "prettier --check src && eslint src",
115
- "format": "prettier --write .",
116
- "test:unit": "vitest",
117
- "release-next": "npm version prerelease --preid next && npm publish && git push && git push --tags && sleep 1 && npm dist-tag add svelteplot@$(npm view . version) next",
118
- "docs": "npm run build && cd build && rsync --recursive . vis4.net:svelteplot/alpha0/"
119
- }
120
- }
124
+ }