@rokkit/chart 1.0.0-next.147 → 1.0.0-next.149

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 (157) hide show
  1. package/dist/Plot/index.d.ts +4 -0
  2. package/dist/PlotState.svelte.d.ts +47 -0
  3. package/dist/crossfilter/createCrossFilter.svelte.d.ts +15 -0
  4. package/dist/geoms/lib/areas.d.ts +52 -0
  5. package/dist/geoms/lib/bars.d.ts +3 -0
  6. package/dist/index.d.ts +38 -1
  7. package/dist/lib/brewing/BoxBrewer.svelte.d.ts +10 -0
  8. package/dist/lib/brewing/CartesianBrewer.svelte.d.ts +8 -0
  9. package/dist/lib/brewing/PieBrewer.svelte.d.ts +8 -0
  10. package/dist/lib/brewing/ViolinBrewer.svelte.d.ts +9 -0
  11. package/dist/lib/brewing/brewer.svelte.d.ts +145 -0
  12. package/dist/lib/brewing/colors.d.ts +17 -0
  13. package/dist/lib/brewing/marks/arcs.d.ts +17 -0
  14. package/dist/lib/brewing/marks/areas.d.ts +31 -0
  15. package/dist/lib/brewing/marks/bars.d.ts +1 -0
  16. package/dist/lib/brewing/marks/boxes.d.ts +24 -0
  17. package/dist/lib/brewing/marks/lines.d.ts +24 -0
  18. package/dist/lib/brewing/marks/points.d.ts +40 -0
  19. package/dist/lib/brewing/marks/violins.d.ts +20 -0
  20. package/dist/lib/brewing/patterns.d.ts +14 -0
  21. package/dist/lib/brewing/scales.d.ts +28 -0
  22. package/dist/lib/brewing/stats.d.ts +31 -0
  23. package/dist/lib/brewing/symbols.d.ts +7 -0
  24. package/dist/lib/plot/chartProps.d.ts +177 -0
  25. package/dist/lib/plot/crossfilter.d.ts +13 -0
  26. package/dist/lib/plot/facet.d.ts +24 -0
  27. package/dist/lib/plot/frames.d.ts +47 -0
  28. package/dist/lib/plot/helpers.d.ts +3 -0
  29. package/dist/lib/plot/preset.d.ts +29 -0
  30. package/dist/lib/plot/scales.d.ts +5 -0
  31. package/dist/lib/plot/stat.d.ts +32 -0
  32. package/dist/lib/plot/types.d.ts +89 -0
  33. package/dist/lib/scales.svelte.d.ts +1 -1
  34. package/dist/lib/swatch.d.ts +12 -0
  35. package/dist/lib/utils.d.ts +1 -0
  36. package/dist/lib/xscale.d.ts +11 -0
  37. package/dist/patterns/index.d.ts +4 -9
  38. package/dist/patterns/patterns.d.ts +72 -0
  39. package/dist/patterns/scale.d.ts +30 -0
  40. package/package.json +9 -3
  41. package/src/AnimatedPlot.svelte +214 -0
  42. package/src/Chart.svelte +101 -0
  43. package/src/FacetPlot/Panel.svelte +23 -0
  44. package/src/FacetPlot.svelte +90 -0
  45. package/src/Plot/Arc.svelte +29 -0
  46. package/src/Plot/Area.svelte +25 -0
  47. package/src/Plot/Axis.svelte +62 -84
  48. package/src/Plot/Grid.svelte +20 -58
  49. package/src/Plot/Legend.svelte +160 -120
  50. package/src/Plot/Line.svelte +27 -0
  51. package/src/Plot/Point.svelte +27 -0
  52. package/src/Plot/Timeline.svelte +95 -0
  53. package/src/Plot/Tooltip.svelte +81 -0
  54. package/src/Plot/index.js +4 -0
  55. package/src/Plot.svelte +189 -0
  56. package/src/PlotState.svelte.js +278 -0
  57. package/src/Sparkline.svelte +69 -0
  58. package/src/charts/AreaChart.svelte +25 -0
  59. package/src/charts/BarChart.svelte +26 -0
  60. package/src/charts/BoxPlot.svelte +21 -0
  61. package/src/charts/BubbleChart.svelte +23 -0
  62. package/src/charts/LineChart.svelte +26 -0
  63. package/src/charts/PieChart.svelte +25 -0
  64. package/src/charts/ScatterPlot.svelte +25 -0
  65. package/src/charts/ViolinPlot.svelte +21 -0
  66. package/src/crossfilter/CrossFilter.svelte +38 -0
  67. package/src/crossfilter/FilterBar.svelte +32 -0
  68. package/src/crossfilter/FilterSlider.svelte +79 -0
  69. package/src/crossfilter/createCrossFilter.svelte.js +113 -0
  70. package/src/elements/SymbolGrid.svelte +6 -7
  71. package/src/geoms/Arc.svelte +81 -0
  72. package/src/geoms/Area.svelte +50 -0
  73. package/src/geoms/Bar.svelte +142 -0
  74. package/src/geoms/Box.svelte +101 -0
  75. package/src/geoms/LabelPill.svelte +17 -0
  76. package/src/geoms/Line.svelte +100 -0
  77. package/src/geoms/Point.svelte +100 -0
  78. package/src/geoms/Violin.svelte +44 -0
  79. package/src/geoms/lib/areas.js +131 -0
  80. package/src/geoms/lib/bars.js +172 -0
  81. package/src/index.js +52 -3
  82. package/src/lib/brewing/BoxBrewer.svelte.js +56 -0
  83. package/src/lib/brewing/CartesianBrewer.svelte.js +16 -0
  84. package/src/lib/brewing/PieBrewer.svelte.js +14 -0
  85. package/src/lib/brewing/ViolinBrewer.svelte.js +55 -0
  86. package/src/lib/brewing/brewer.svelte.js +229 -0
  87. package/src/lib/brewing/colors.js +22 -0
  88. package/src/lib/brewing/marks/arcs.js +43 -0
  89. package/src/lib/brewing/marks/areas.js +59 -0
  90. package/src/lib/brewing/marks/bars.js +49 -0
  91. package/src/lib/brewing/marks/boxes.js +75 -0
  92. package/src/lib/brewing/marks/lines.js +48 -0
  93. package/src/lib/brewing/marks/points.js +57 -0
  94. package/src/lib/brewing/marks/violins.js +90 -0
  95. package/src/lib/brewing/patterns.js +31 -0
  96. package/src/lib/brewing/scales.js +51 -0
  97. package/src/lib/brewing/scales.svelte.js +2 -26
  98. package/src/lib/brewing/stats.js +62 -0
  99. package/src/lib/brewing/symbols.js +10 -0
  100. package/src/lib/plot/chartProps.js +76 -0
  101. package/src/lib/plot/crossfilter.js +16 -0
  102. package/src/lib/plot/facet.js +58 -0
  103. package/src/lib/plot/frames.js +80 -0
  104. package/src/lib/plot/helpers.js +14 -0
  105. package/src/lib/plot/preset.js +53 -0
  106. package/src/lib/plot/scales.js +56 -0
  107. package/src/lib/plot/stat.js +92 -0
  108. package/src/lib/plot/types.js +65 -0
  109. package/src/lib/scales.svelte.js +2 -26
  110. package/src/lib/swatch.js +13 -0
  111. package/src/lib/utils.js +9 -0
  112. package/src/lib/xscale.js +31 -0
  113. package/src/patterns/DefinePatterns.svelte +32 -0
  114. package/src/patterns/PatternDef.svelte +27 -0
  115. package/src/patterns/index.js +4 -14
  116. package/src/patterns/patterns.js +208 -0
  117. package/src/patterns/scale.js +87 -0
  118. package/src/spec/chart-spec.js +29 -0
  119. package/src/symbols/Shape.svelte +1 -1
  120. package/src/symbols/constants/index.js +1 -1
  121. package/dist/old_lib/index.d.ts +0 -4
  122. package/dist/old_lib/plots.d.ts +0 -3
  123. package/dist/old_lib/swatch.d.ts +0 -285
  124. package/dist/old_lib/utils.d.ts +0 -1
  125. package/dist/patterns/paths/constants.d.ts +0 -1
  126. package/dist/template/constants.d.ts +0 -43
  127. package/dist/template/shapes/index.d.ts +0 -4
  128. package/src/old_lib/index.js +0 -4
  129. package/src/old_lib/plots.js +0 -27
  130. package/src/old_lib/swatch.js +0 -16
  131. package/src/old_lib/utils.js +0 -8
  132. package/src/patterns/Brick.svelte +0 -15
  133. package/src/patterns/Circles.svelte +0 -18
  134. package/src/patterns/CrossHatch.svelte +0 -12
  135. package/src/patterns/CurvedWave.svelte +0 -7
  136. package/src/patterns/Dots.svelte +0 -20
  137. package/src/patterns/OutlineCircles.svelte +0 -13
  138. package/src/patterns/Tile.svelte +0 -16
  139. package/src/patterns/Triangles.svelte +0 -13
  140. package/src/patterns/Waves.svelte +0 -9
  141. package/src/patterns/paths/NamedPattern.svelte +0 -9
  142. package/src/patterns/paths/constants.js +0 -4
  143. package/src/template/Texture.svelte +0 -13
  144. package/src/template/constants.js +0 -43
  145. package/src/template/shapes/Circles.svelte +0 -15
  146. package/src/template/shapes/Lines.svelte +0 -16
  147. package/src/template/shapes/Path.svelte +0 -9
  148. package/src/template/shapes/Polygons.svelte +0 -15
  149. package/src/template/shapes/index.js +0 -4
  150. /package/dist/{old_lib → lib}/brewer.d.ts +0 -0
  151. /package/dist/{old_lib → lib}/chart.d.ts +0 -0
  152. /package/dist/{old_lib → lib}/grid.d.ts +0 -0
  153. /package/dist/{old_lib → lib}/ticks.d.ts +0 -0
  154. /package/src/{old_lib → lib}/brewer.js +0 -0
  155. /package/src/{old_lib → lib}/chart.js +0 -0
  156. /package/src/{old_lib → lib}/grid.js +0 -0
  157. /package/src/{old_lib → lib}/ticks.js +0 -0
@@ -0,0 +1,208 @@
1
+ /**
2
+ * Unified pattern library.
3
+ *
4
+ * Each entry is an array of mark descriptors. All geometry is in normalized
5
+ * 0–1 coordinates; the renderer scales by `size` at paint time.
6
+ *
7
+ * Mark types
8
+ * ----------
9
+ * circle { cx, cy, r }
10
+ * line { x1, y1, x2, y2 } coordinates may exceed 0–1 for seamless tiling
11
+ * polygon { points: [x,y][] }
12
+ * rect { x, y, w, h }
13
+ * path { d: [cmd, ...args][] } SVG path commands as nested arrays (H/V take one arg)
14
+ *
15
+ * Appearance
16
+ * ----------
17
+ * fill: true → element uses fill color (stroke: none)
18
+ * fill: false → element uses stroke color (fill: none) ← default
19
+ * fillOpacity: n → applied as fill-opacity on filled marks
20
+ * opacity: n → applied as opacity on any mark
21
+ */
22
+
23
+ /** @typedef {{ type: 'circle', cx: number, cy: number, r: number, fill?: boolean, fillOpacity?: number, opacity?: number }} CircleMark */
24
+ /** @typedef {{ type: 'line', x1: number, y1: number, x2: number, y2: number, fill?: false, strokeWidth?: number }} LineMark */
25
+ /** @typedef {{ type: 'polygon', points: [number,number][], fill?: boolean, fillOpacity?: number, opacity?: number }} PolygonMark */
26
+ /** @typedef {{ type: 'rect', x: number, y: number, w: number, h: number, fill?: boolean, fillOpacity?: number, opacity?: number }} RectMark */
27
+ /** @typedef {{ type: 'path', d: (string|number)[][], fill?: boolean, fillOpacity?: number, opacity?: number }} PathMark */
28
+ /** @typedef {CircleMark | LineMark | PolygonMark | RectMark | PathMark} PatternMark */
29
+
30
+ /** @type {Record<string, PatternMark[]>} */
31
+ export const PATTERNS = {
32
+ // ── Line-based ──────────────────────────────────────────────────────────────
33
+
34
+ brick: [
35
+ { type: 'line', x1: 0, y1: 0.25, x2: 0.5, y2: 0.25 },
36
+ { type: 'line', x1: 0.5, y1: 0.75, x2: 1, y2: 0.75 },
37
+ { type: 'line', x1: 0, y1: 0, x2: 0, y2: 1 },
38
+ { type: 'line', x1: 1, y1: 0, x2: 1, y2: 1 },
39
+ { type: 'line', x1: 0.5, y1: 0, x2: 0.5, y2: 1 }
40
+ ],
41
+
42
+ hatch: [
43
+ { type: 'line', x1: 0, y1: 0.25, x2: 1, y2: 0.25 },
44
+ { type: 'line', x1: 0, y1: 0.5, x2: 1, y2: 0.5 },
45
+ { type: 'line', x1: 0, y1: 0.75, x2: 1, y2: 0.75 },
46
+ { type: 'line', x1: 0.25, y1: 0, x2: 0.25, y2: 1 },
47
+ { type: 'line', x1: 0.5, y1: 0, x2: 0.5, y2: 1 },
48
+ { type: 'line', x1: 0.75, y1: 0, x2: 0.75, y2: 1 }
49
+ ],
50
+
51
+ // Coordinates intentionally exceed 0–1 so lines tile seamlessly at tile edges
52
+ diagonal: [
53
+ { type: 'line', x1: -0.5, y1: 0.5, x2: 0.5, y2: -0.5 },
54
+ { type: 'line', x1: 0, y1: 1, x2: 1, y2: 0 },
55
+ { type: 'line', x1: 0.5, y1: 1.5, x2: 1.5, y2: 0.5 }
56
+ ],
57
+
58
+ // Two sets of diagonals crossing to form a diamond lattice
59
+ diamonds: [
60
+ { type: 'line', x1: 0, y1: 1, x2: 1, y2: 0 },
61
+ { type: 'line', x1: -0.5, y1: 0.5, x2: 0.5, y2: -0.5 },
62
+ { type: 'line', x1: 0.5, y1: 1.5, x2: 1.5, y2: 0.5 },
63
+ { type: 'line', x1: 0, y1: 0, x2: 1, y2: 1 },
64
+ { type: 'line', x1: -0.5, y1: 0.5, x2: 0.5, y2: 1.5 },
65
+ { type: 'line', x1: 0.5, y1: -0.5, x2: 1.5, y2: 0.5 }
66
+ ],
67
+
68
+ tile: [
69
+ { type: 'line', x1: 0, y1: 0.5, x2: 1, y2: 0.5 },
70
+ { type: 'line', x1: 0.5, y1: 0, x2: 0.5, y2: 1 }
71
+ ],
72
+
73
+ // ── Path-based ──────────────────────────────────────────────────────────────
74
+
75
+ swell: [
76
+ { type: 'path', d: [['M', 0, 0.3], ['A', 0.6, 0.5, 0, 0, 0, 1, 0.3]] }
77
+ ],
78
+
79
+ waves: [
80
+ { type: 'path', d: [['M', 0, 0.5], ['L', 0.25, 0], ['L', 0.75, 1], ['L', 1, 0.5]] }
81
+ ],
82
+
83
+ // ── Circle-based ────────────────────────────────────────────────────────────
84
+
85
+ // Small filled dots in an X pattern across the tile
86
+ dots: [
87
+ { type: 'circle', cx: 0.2, cy: 0.2, r: 0.08, fill: true },
88
+ { type: 'circle', cx: 0.4, cy: 0.4, r: 0.08, fill: true },
89
+ { type: 'circle', cx: 0.6, cy: 0.6, r: 0.08, fill: true },
90
+ { type: 'circle', cx: 0.8, cy: 0.8, r: 0.08, fill: true },
91
+ { type: 'circle', cx: 0.8, cy: 0.2, r: 0.08, fill: true },
92
+ { type: 'circle', cx: 0.6, cy: 0.4, r: 0.08, fill: true },
93
+ { type: 'circle', cx: 0.4, cy: 0.6, r: 0.08, fill: true },
94
+ { type: 'circle', cx: 0.2, cy: 0.8, r: 0.08, fill: true }
95
+ ],
96
+
97
+ // Outlined diamond (rotated square)
98
+ lattice: [
99
+ { type: 'polygon', points: [[0.5, 0.22], [0.78, 0.5], [0.5, 0.78], [0.22, 0.5]] }
100
+ ],
101
+
102
+ // Fish-scale geometry as stroke only — same circles as petals, no fill
103
+ scales: [
104
+ {
105
+ type: 'path',
106
+ d: [
107
+ ['M', -0.7071, 0], ['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
108
+ ['M', 0.2929, 0], ['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
109
+ ['M', -0.2071, 0.5], ['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
110
+ ['M', -0.7071, 1], ['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
111
+ ['M', 0.2929, 1], ['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
112
+ ]
113
+ }
114
+ ],
115
+
116
+ // Filled circles at tile corners + center (5-point dice pattern)
117
+ circles: [
118
+ { type: 'circle', cx: 0.5, cy: 0.5, r: 0.2, fill: true },
119
+ { type: 'circle', cx: 0, cy: 0, r: 0.2, fill: true },
120
+ { type: 'circle', cx: 1, cy: 0, r: 0.2, fill: true },
121
+ { type: 'circle', cx: 0, cy: 1, r: 0.2, fill: true },
122
+ { type: 'circle', cx: 1, cy: 1, r: 0.2, fill: true }
123
+ ],
124
+
125
+ // Diagonal cross strokes with a filled circle at the center
126
+ pip: [
127
+ { type: 'line', x1: 0, y1: 0, x2: 1, y2: 1 },
128
+ { type: 'line', x1: 0, y1: 1, x2: 1, y2: 0 },
129
+ { type: 'circle', cx: 0.5, cy: 0.5, r: 0.22, fill: true }
130
+ ],
131
+
132
+ // Two outlined circles + two filled circles in a 2×2 grid
133
+ rings: [
134
+ { type: 'circle', cx: 0.25, cy: 0.25, r: 0.2 },
135
+ { type: 'circle', cx: 0.75, cy: 0.75, r: 0.2 },
136
+ { type: 'circle', cx: 0.25, cy: 0.75, r: 0.2, fill: true },
137
+ { type: 'circle', cx: 0.75, cy: 0.25, r: 0.2, fill: true }
138
+ ],
139
+
140
+ // Fish-scale: circles centered at corners + tile center, r = 0.5√2 so each
141
+ // circle passes through its adjacent neighbors' centers. Even-odd fill produces
142
+ // the scallop/petal pattern where overlapping regions alternate filled/clear.
143
+ petals: [
144
+ {
145
+ type: 'path', fill: true, fillRule: 'evenodd',
146
+ d: [
147
+ // center (0, 0) r=0.7071 leftmost = (-0.7071, 0)
148
+ ['M', -0.7071, 0], ['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
149
+ // center (1, 0) leftmost = (0.2929, 0)
150
+ ['M', 0.2929, 0], ['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
151
+ // center (0.5, 0.5) leftmost = (-0.2071, 0.5)
152
+ ['M', -0.2071, 0.5], ['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
153
+ // center (0, 1) leftmost = (-0.7071, 1)
154
+ ['M', -0.7071, 1], ['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
155
+ // center (1, 1) leftmost = (0.2929, 1)
156
+ ['M', 0.2929, 1], ['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
157
+ ]
158
+ }
159
+ ],
160
+
161
+ // ── Polygon-based ───────────────────────────────────────────────────────────
162
+
163
+ // Three filled triangles tiling the corners + center of the tile
164
+ triangles: [
165
+ { type: 'polygon', points: [[0, 0.5], [0.5, 1], [0, 1]], fill: true },
166
+ { type: 'polygon', points: [[0.5, 0], [0, 0], [0, 0.5]], fill: true },
167
+ { type: 'polygon', points: [[1, 0], [0.5, 0.5], [1, 1]], fill: true }
168
+ ],
169
+
170
+ // Two filled triangles scattered at opposite corners
171
+ shards: [
172
+ { type: 'polygon', points: [[0.25, 0.017], [0, 0.417], [0.5, 0.417]], fill: true },
173
+ { type: 'polygon', points: [[0.5, 0.583], [1, 0.583], [0.75, 0.983]], fill: true }
174
+ ],
175
+
176
+ // Diagonal corner split — two-tone polygon division
177
+ wedge: [
178
+ { type: 'polygon', points: [[1, 1], [0.45, 1], [0, 0.55], [0, 0]], fill: true },
179
+ { type: 'polygon', points: [[1, 0], [0, 0], [1, 1]], fill: true, fillOpacity: 0.55 }
180
+ ],
181
+
182
+ // Two triangles pointing inward from top and bottom edges
183
+ argyle: [
184
+ { type: 'polygon', points: [[1, 0], [0.5, 0.5], [0, 0]], fill: true },
185
+ { type: 'polygon', points: [[1, 1], [0.5, 0.5], [0, 1]], fill: true }
186
+ ],
187
+
188
+ // triangles pattern rotated 90° clockwise: (x,y) → (1−y, x)
189
+ chevrons: [
190
+ { type: 'polygon', points: [[0, 0], [0.5, 0], [0, 0.5]], fill: true },
191
+ { type: 'polygon', points: [[0.5, 0], [1, 0], [1, 0.5]], fill: true },
192
+ { type: 'polygon', points: [[0, 1], [1, 1], [0.5, 0.5]], fill: true }
193
+ ],
194
+
195
+ // ── Rect-based ──────────────────────────────────────────────────────────────
196
+
197
+ checkerboard: [
198
+ { type: 'rect', x: 0, y: 0, w: 0.5, h: 0.5, fill: true },
199
+ { type: 'rect', x: 0.5, y: 0.5, w: 0.5, h: 0.5, fill: true }
200
+ ],
201
+
202
+ // Quarter-circle filled shape (bottom-left corner) with two accent dots
203
+ shell: [
204
+ { type: 'path', d: [['M', 0, 1], ['V', 0], ['H', 0.6], ['V', 0.4], ['A', 0.6, 0.6, 0, 0, 1, 0, 1]], fill: true },
205
+ { type: 'circle', cx: 0.798, cy: 0.298, r: 0.081, fill: true },
206
+ { type: 'circle', cx: 0.798, cy: 0.702, r: 0.081, fill: true }
207
+ ],
208
+ }
@@ -0,0 +1,87 @@
1
+ /**
2
+ * Mark geometry scaling and attribute resolution utilities.
3
+ *
4
+ * All pattern coordinates are stored normalized 0–1. `scaleMark` multiplies
5
+ * every geometric value by `size`. `resolveMarkAttrs` then folds in the
6
+ * runtime fill/stroke colors and produces a plain object whose keys are
7
+ * valid SVG attribute names, ready for spread (`{...attrs}`).
8
+ *
9
+ * Path `A` (arc) commands: indices 2, 3, 4 are xRotation, largeArcFlag, and
10
+ * sweepFlag — NOT coordinates — and are never scaled.
11
+ *
12
+ * Source → SVG name mappings applied by scaleMark:
13
+ * rect w → width, h → height
14
+ * polygon points [[x,y]…] → SVG points string
15
+ * path d [[cmd,…]…] → SVG d string
16
+ */
17
+
18
+ /** @import { PatternMark } from './patterns.js' */
19
+
20
+ /**
21
+ * Scale a single SVG path command by `size`.
22
+ * @param {(string|number)[]} cmd
23
+ * @param {number} size
24
+ * @returns {(string|number)[]}
25
+ */
26
+ function scalePathCmd(cmd, size) {
27
+ const [op, ...args] = cmd
28
+ if (op === 'A' || op === 'a') {
29
+ return [op, args[0] * size, args[1] * size, args[2], args[3], args[4], args[5] * size, args[6] * size]
30
+ }
31
+ return [op, ...args.map((v) => (typeof v === 'number' ? v * size : v))]
32
+ }
33
+
34
+ /**
35
+ * Scale all geometric coordinates in a mark by `size`.
36
+ * Renames rect `w`/`h` to `width`/`height` and converts polygon/path to strings.
37
+ * @param {PatternMark} mark
38
+ * @param {number} size
39
+ * @returns {object}
40
+ */
41
+ export function scaleMark(mark, size) {
42
+ switch (mark.type) {
43
+ case 'line':
44
+ return { ...mark, x1: mark.x1 * size, y1: mark.y1 * size, x2: mark.x2 * size, y2: mark.y2 * size }
45
+ case 'circle':
46
+ return { ...mark, cx: mark.cx * size, cy: mark.cy * size, r: mark.r * size }
47
+ case 'rect': {
48
+ const { w, h, ...rest } = mark
49
+ return { ...rest, x: mark.x * size, y: mark.y * size, width: w * size, height: h * size }
50
+ }
51
+ case 'polygon':
52
+ return { ...mark, points: mark.points.map(([x, y]) => `${x * size},${y * size}`).join(' ') }
53
+ case 'path':
54
+ return { ...mark, d: mark.d.map((cmd) => scalePathCmd(cmd, size)).map((cmd) => cmd.join(' ')).join(' ') }
55
+ default:
56
+ return mark
57
+ }
58
+ }
59
+
60
+ /**
61
+ * Resolve a scaled mark into SVG-ready `{ type, attrs }`.
62
+ * `attrs` can be spread directly onto the SVG element.
63
+ *
64
+ * Per-mark overrides respected:
65
+ * mark.strokeWidth → `stroke-width` (takes precedence over `thickness`)
66
+ * mark.fillOpacity → `fill-opacity`
67
+ * mark.opacity → `opacity`
68
+ *
69
+ * @param {object} scaledMark Output of scaleMark
70
+ * @param {{ fill: string, stroke: string, thickness: number }} appearance
71
+ * @returns {{ type: string, attrs: object }}
72
+ */
73
+ export function resolveMarkAttrs(scaledMark, { fill, stroke, thickness }) {
74
+ const { type, fill: isFill, strokeWidth, fillOpacity, opacity, fillRule, ...geometry } = scaledMark
75
+
76
+ const attrs = {
77
+ ...geometry,
78
+ fill: isFill ? fill : 'none',
79
+ stroke: isFill ? 'none' : stroke,
80
+ 'stroke-width': isFill ? 0 : (strokeWidth ?? thickness),
81
+ }
82
+ if (fillOpacity !== null && fillOpacity !== undefined) attrs['fill-opacity'] = fillOpacity
83
+ if (opacity !== null && opacity !== undefined) attrs.opacity = opacity
84
+ if (fillRule !== null && fillRule !== undefined) attrs['fill-rule'] = fillRule
85
+
86
+ return { type, attrs }
87
+ }
@@ -0,0 +1,29 @@
1
+ export class ChartSpec {
2
+ constructor(data) {
3
+ this.data = data ?? []
4
+ this.channels = {}
5
+ this.layers = []
6
+ this.options = {}
7
+ }
8
+
9
+ x(f) { this.channels.x = f; return this }
10
+ y(f) { this.channels.y = f; return this }
11
+ color(f) { this.channels.color = f; return this }
12
+ pattern(f){ this.channels.pattern = f; return this }
13
+ aes(ch) { Object.assign(this.channels, ch); return this }
14
+
15
+ bar(opts = {}) { this.layers.push({ type: 'bar', ...opts }); return this }
16
+ line(opts = {}) { this.layers.push({ type: 'line', ...opts }); return this }
17
+ area(opts = {}) { this.layers.push({ type: 'area', ...opts }); return this }
18
+ arc(opts = {}) { this.layers.push({ type: 'arc', ...opts }); return this }
19
+ point(opts = {}) { this.layers.push({ type: 'point', ...opts }); return this }
20
+
21
+ grid(opts = {}) { this.options.grid = opts; return this }
22
+ legend(opts = {}) { this.options.legend = opts; return this }
23
+ axis(type, opts = {}) { this.options[`axis_${type}`] = opts; return this }
24
+ size(w, h) { this.options.width = w; this.options.height = h; return this }
25
+ }
26
+
27
+ export function chart(data, channels = {}) {
28
+ return new ChartSpec(data).aes(channels)
29
+ }
@@ -26,7 +26,7 @@
26
26
  {stroke}
27
27
  transform="translate({x},{y})"
28
28
  stroke-width={thickness}
29
- fill-rule="evenodd"
29
+ fill-rule="nonzero"
30
30
  role="button"
31
31
  {onclick}
32
32
  {onmouseover}
@@ -1,4 +1,4 @@
1
- import { scaledPathCollection } from '../../old_lib/utils'
1
+ import { scaledPathCollection } from '../../lib/utils'
2
2
  import paths from './shapes.json' with { type: 'json' }
3
3
 
4
4
  export const namedShapes = scaledPathCollection(paths)
@@ -1,4 +0,0 @@
1
- export { swatch } from "./swatch";
2
- export { swatchGrid } from "./grid";
3
- export * from "./chart";
4
- export * from "./brewer";
@@ -1,3 +0,0 @@
1
- export function plotter(node: any, options: any): {
2
- update: (input: any) => void;
3
- };
@@ -1,285 +0,0 @@
1
- export const swatch: import("svelte/store").Writable<{
2
- palette: {
3
- gold: {
4
- "50": string;
5
- "100": string;
6
- "200": string;
7
- "300": string;
8
- "400": string;
9
- "500": string;
10
- "600": string;
11
- "700": string;
12
- "800": string;
13
- "900": string;
14
- "950": string;
15
- };
16
- lavender: {
17
- "50": string;
18
- "100": string;
19
- "200": string;
20
- "300": string;
21
- "400": string;
22
- "500": string;
23
- "600": string;
24
- "700": string;
25
- "800": string;
26
- "900": string;
27
- "950": string;
28
- };
29
- teal: {
30
- "50": string;
31
- "100": string;
32
- "200": string;
33
- "300": string;
34
- "400": string;
35
- "500": string;
36
- "600": string;
37
- "700": string;
38
- "800": string;
39
- "900": string;
40
- "950": string;
41
- };
42
- rose: {
43
- "50": string;
44
- "100": string;
45
- "200": string;
46
- "300": string;
47
- "400": string;
48
- "500": string;
49
- "600": string;
50
- "700": string;
51
- "800": string;
52
- "900": string;
53
- "950": string;
54
- };
55
- sky: {
56
- "50": string;
57
- "100": string;
58
- "200": string;
59
- "300": string;
60
- "400": string;
61
- "500": string;
62
- "600": string;
63
- "700": string;
64
- "800": string;
65
- "900": string;
66
- "950": string;
67
- };
68
- yellow: {
69
- "50": string;
70
- "100": string;
71
- "200": string;
72
- "300": string;
73
- "400": string;
74
- "500": string;
75
- "600": string;
76
- "700": string;
77
- "800": string;
78
- "900": string;
79
- "950": string;
80
- };
81
- pink: {
82
- "50": string;
83
- "100": string;
84
- "200": string;
85
- "300": string;
86
- "400": string;
87
- "500": string;
88
- "600": string;
89
- "700": string;
90
- "800": string;
91
- "900": string;
92
- "950": string;
93
- };
94
- lime: {
95
- "50": string;
96
- "100": string;
97
- "200": string;
98
- "300": string;
99
- "400": string;
100
- "500": string;
101
- "600": string;
102
- "700": string;
103
- "800": string;
104
- "900": string;
105
- "950": string;
106
- };
107
- red: {
108
- "50": string;
109
- "100": string;
110
- "200": string;
111
- "300": string;
112
- "400": string;
113
- "500": string;
114
- "600": string;
115
- "700": string;
116
- "800": string;
117
- "900": string;
118
- "950": string;
119
- };
120
- cyan: {
121
- "50": string;
122
- "100": string;
123
- "200": string;
124
- "300": string;
125
- "400": string;
126
- "500": string;
127
- "600": string;
128
- "700": string;
129
- "800": string;
130
- "900": string;
131
- "950": string;
132
- };
133
- orange: {
134
- "50": string;
135
- "100": string;
136
- "200": string;
137
- "300": string;
138
- "400": string;
139
- "500": string;
140
- "600": string;
141
- "700": string;
142
- "800": string;
143
- "900": string;
144
- "950": string;
145
- };
146
- violet: {
147
- "50": string;
148
- "100": string;
149
- "200": string;
150
- "300": string;
151
- "400": string;
152
- "500": string;
153
- "600": string;
154
- "700": string;
155
- "800": string;
156
- "900": string;
157
- "950": string;
158
- };
159
- emerald: {
160
- "50": string;
161
- "100": string;
162
- "200": string;
163
- "300": string;
164
- "400": string;
165
- "500": string;
166
- "600": string;
167
- "700": string;
168
- "800": string;
169
- "900": string;
170
- "950": string;
171
- };
172
- wood: {
173
- "50": string;
174
- "100": string;
175
- "200": string;
176
- "300": string;
177
- "400": string;
178
- "500": string;
179
- "600": string;
180
- "700": string;
181
- "800": string;
182
- "900": string;
183
- "950": string;
184
- };
185
- blue: {
186
- "50": string;
187
- "100": string;
188
- "200": string;
189
- "300": string;
190
- "400": string;
191
- "500": string;
192
- "600": string;
193
- "700": string;
194
- "800": string;
195
- "900": string;
196
- "950": string;
197
- };
198
- amber: {
199
- "50": string;
200
- "100": string;
201
- "200": string;
202
- "300": string;
203
- "400": string;
204
- "500": string;
205
- "600": string;
206
- "700": string;
207
- "800": string;
208
- "900": string;
209
- "950": string;
210
- };
211
- purple: {
212
- "50": string;
213
- "100": string;
214
- "200": string;
215
- "300": string;
216
- "400": string;
217
- "500": string;
218
- "600": string;
219
- "700": string;
220
- "800": string;
221
- "900": string;
222
- "950": string;
223
- };
224
- zinc: {
225
- "50": string;
226
- "100": string;
227
- "200": string;
228
- "300": string;
229
- "400": string;
230
- "500": string;
231
- "600": string;
232
- "700": string;
233
- "800": string;
234
- "900": string;
235
- "950": string;
236
- };
237
- stone: {
238
- "50": string;
239
- "100": string;
240
- "200": string;
241
- "300": string;
242
- "400": string;
243
- "500": string;
244
- "600": string;
245
- "700": string;
246
- "800": string;
247
- "900": string;
248
- "950": string;
249
- };
250
- indigo: {
251
- "50": string;
252
- "100": string;
253
- "200": string;
254
- "300": string;
255
- "400": string;
256
- "500": string;
257
- "600": string;
258
- "700": string;
259
- "800": string;
260
- "900": string;
261
- "950": string;
262
- };
263
- gray: {
264
- "50": string;
265
- "100": string;
266
- "200": string;
267
- "300": string;
268
- "400": string;
269
- "500": string;
270
- "600": string;
271
- "700": string;
272
- "800": string;
273
- "900": string;
274
- "950": string;
275
- };
276
- };
277
- patterns: typeof patterns;
278
- keys: {
279
- gray: string[];
280
- color: string[];
281
- symbol: string[];
282
- pattern: string[];
283
- };
284
- }>;
285
- import * as patterns from '../patterns';
@@ -1 +0,0 @@
1
- export function scaledPathCollection(paths: any): {};
@@ -1 +0,0 @@
1
- export const patterns: {};
@@ -1,43 +0,0 @@
1
- export namespace library {
2
- namespace Brick {
3
- let component: string;
4
- let allowed: string[];
5
- let data: {
6
- x1: number;
7
- y1: number;
8
- x2: number;
9
- y2: number;
10
- }[];
11
- }
12
- namespace Circles {
13
- let component_1: string;
14
- export { component_1 as component };
15
- let allowed_1: string[];
16
- export { allowed_1 as allowed };
17
- let data_1: {
18
- cx: number;
19
- cy: number;
20
- r: number;
21
- }[];
22
- export { data_1 as data };
23
- }
24
- namespace Dominoes {
25
- let component_2: string;
26
- export { component_2 as component };
27
- let allowed_2: string[];
28
- export { allowed_2 as allowed };
29
- let data_2: {
30
- cx: number;
31
- cy: number;
32
- r: number;
33
- }[];
34
- export { data_2 as data };
35
- }
36
- namespace Waves {
37
- let component_3: string;
38
- export { component_3 as component };
39
- export let stroke: boolean;
40
- let data_3: (string | number)[][];
41
- export { data_3 as data };
42
- }
43
- }