@rokkit/chart 1.0.0-next.36 → 1.0.0-next.37

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 (47) hide show
  1. package/package.json +11 -10
  2. package/src/chart/FacetGrid.svelte +6 -6
  3. package/src/chart/Swatch.svelte +2 -3
  4. package/src/chart/TexturedShape.svelte +1 -1
  5. package/src/chart/TimelapseChart.svelte +2 -2
  6. package/src/elements/ColorRamp.svelte +1 -1
  7. package/src/elements/ContinuousLegend.svelte +1 -1
  8. package/src/index.js +1 -2
  9. package/src/{components/lib → lib}/chart.js +12 -0
  10. package/src/lib/color.js +59 -0
  11. package/src/{components/lib/color.js → lib/constants.js} +111 -56
  12. package/src/lib/geom.js +106 -0
  13. package/src/lib/index.js +0 -0
  14. package/src/lib/{colors.js → palette.js} +3 -3
  15. package/src/lib/shape.js +52 -0
  16. package/src/{swatch.js → lib/swatch.js} +4 -4
  17. package/src/{components/lib/utils.js → lib/utils-2.js} +1 -41
  18. package/src/lib/utils.js +4 -0
  19. package/src/plots/BarPlot.svelte +1 -1
  20. package/src/plots/FunnelPlot.svelte +2 -3
  21. package/src/plots/HeatMapCalendar.svelte +1 -1
  22. package/src/plots/LinePlot.svelte +1 -1
  23. package/src/plots/Plot.svelte +1 -1
  24. package/src/plots/ScatterPlot.svelte +1 -1
  25. package/src/chart/Symbol.svelte +0 -40
  26. package/src/chart.js +0 -11
  27. package/src/components/index.js +0 -2
  28. package/src/components/lib/index.js +0 -19
  29. package/src/components/lib/shape.js +0 -199
  30. package/src/components/lib/timer.js +0 -41
  31. package/src/constants.js +0 -66
  32. package/src/elements/PatternDefs.svelte +0 -13
  33. package/src/elements/PatternMask.svelte +0 -20
  34. package/src/elements/Symbol.svelte +0 -38
  35. package/src/funnel.svelte +0 -35
  36. package/src/geom.js +0 -105
  37. package/src/lib/shapes.js +0 -144
  38. package/src/plots/old_ScatterPlot.svelte +0 -20
  39. /package/src/chart/{Grid.svelte → AxisGrid.svelte} +0 -0
  40. /package/src/{components/lib → lib}/funnel.js +0 -0
  41. /package/src/{plots → lib}/heatmap.js +0 -0
  42. /package/src/{lookup.js → lib/lookup.js} +0 -0
  43. /package/src/{components/lib → lib}/pattern.js +0 -0
  44. /package/src/{components/lib → lib}/rollup.js +0 -0
  45. /package/src/{components → lib}/store.js +0 -0
  46. /package/src/{components/lib → lib}/summary.js +0 -0
  47. /package/src/{components/lib → lib}/theme.js +0 -0
@@ -1,7 +1,7 @@
1
1
  <script>
2
2
  import { getContext } from 'svelte'
3
- import { compact } from '../components/lib/utils'
4
- import { funnel } from '../components/lib/funnel'
3
+ import { compact } from '../lib/utils-2'
4
+ import { funnel } from '../lib/funnel'
5
5
 
6
6
  const chart = getContext('chart')
7
7
 
@@ -13,7 +13,6 @@
13
13
 
14
14
  $: aes = { ...$chart.aes, ...compact({ x, y, fill, stat, curve }) }
15
15
  $: data = funnel($chart.data, aes, $chart.width, $chart.height)
16
-
17
16
  </script>
18
17
 
19
18
  {#each data.stats as stat, i}
@@ -1,5 +1,5 @@
1
1
  <script>
2
- import { summarize, heatmap } from './heatmap'
2
+ import { summarize, heatmap } from '../lib/heatmap'
3
3
  import { interpolateHsl } from 'd3-interpolate'
4
4
  import { scaleLinear } from 'd3-scale'
5
5
  // import ContinuousLegend from '../elements/ContinuousLegend.svelte'
@@ -1,6 +1,6 @@
1
1
  <script>
2
2
  import { getContext } from 'svelte'
3
- import { colorBrewer } from '../lib/colors'
3
+ import { colorBrewer } from '../lib/palette'
4
4
 
5
5
  let chart = getContext('chart')
6
6
 
@@ -2,7 +2,7 @@
2
2
  import { aggregate, getScales } from '../lib/utils'
3
3
 
4
4
  import BoxPlot from './BoxPlot.svelte'
5
- import ScatterPlot from './old_ScatterPlot.svelte'
5
+ import ScatterPlot from './ScatterPlot.svelte'
6
6
 
7
7
  export let data
8
8
  export let width
@@ -1,6 +1,6 @@
1
1
  <script>
2
2
  import { clamp } from 'yootils'
3
- import Symbol from '../chart/Symbol.svelte'
3
+ import {Symbol} from '@rokkit/molecules'
4
4
  import { getContext } from 'svelte'
5
5
 
6
6
  const chart = getContext('chart')
@@ -1,40 +0,0 @@
1
- <script>
2
- import { namedShapes } from '../components/lib/shape'
3
-
4
- export let x = 0
5
- export let y = 0
6
- export let size = 10
7
- export let fill = 'none'
8
- export let stroke = 'currentColor'
9
- export let thickness = 0.5
10
-
11
- export let name = null
12
- export let shape = null
13
-
14
- $: x = x - size / 2
15
- $: y = y - size / 2
16
-
17
- $: d =
18
- typeof shape === 'function'
19
- ? shape(size)
20
- : (shape || name) in namedShapes
21
- ? namedShapes[shape || name](size)
22
- : namedShapes.circle(size)
23
- </script>
24
-
25
- <!-- svelte-ignore a11y-click-events-have-key-events -->
26
- <path
27
- {d}
28
- {fill}
29
- {stroke}
30
- transform="translate({x},{y})"
31
- stroke-width={thickness}
32
- fill-rule="evenodd"
33
- on:click
34
- on:mouseover
35
- on:mouseleave
36
- on:focus
37
- role="option"
38
- aria-selected={false}
39
- tabindex="0"
40
- />
package/src/chart.js DELETED
@@ -1,11 +0,0 @@
1
- // export function scales(data, aes, opts) {
2
- // const { x, y } = aes
3
- // const { width, height, flipCoords } = {
4
- // width: 800,
5
- // height: 600,
6
- // flipCoords: false,
7
- // ...opts
8
- // }
9
-
10
- // return { x, y, width, height, flipCoords }
11
- // }
@@ -1,2 +0,0 @@
1
- export { toHexString, initCap, uniqueId, toNested } from './lib/utils'
2
- export { brewer, uniques, slidingWindow, colors } from './lib/index'
@@ -1,19 +0,0 @@
1
- import { ChartBrewer } from './chart'
2
- import { ColorBrewer } from './color'
3
- import { ShapeBrewer } from './shape'
4
- import { ThemeBrewer } from './theme'
5
- import { PatternBrewer } from './pattern'
6
-
7
- export { toHexString, swatch } from './utils'
8
- export { uniques, slidingWindow } from './rollup'
9
- export { colors } from './color'
10
-
11
- export function brewer() {
12
- return {
13
- pattern: () => new PatternBrewer(),
14
- color: () => new ColorBrewer(),
15
- theme: () => new ThemeBrewer(),
16
- shape: () => new ShapeBrewer(),
17
- chart: (data, x, y) => new ChartBrewer(data, x, y)
18
- }
19
- }
@@ -1,199 +0,0 @@
1
- import { ColorBrewer } from './color'
2
-
3
- export const namedShapes = {
4
- square: (s) =>
5
- `M${0.1 * s} 0` +
6
- `A${0.1 * s} ${0.1 * s} 0 0 0 0 ${0.1 * s}V${0.9 * s}` +
7
- `A${0.1 * s} ${0.1 * s} 0 0 0 ${0.1 * s} ${s}H${0.9 * s}` +
8
- `A${0.1 * s} ${0.1 * s} 0 0 0 ${s} ${0.9 * s}V${0.1 * s}` +
9
- `A${0.1 * s} ${0.1 * s} 0 0 0 ${0.9 * s} 0Z`,
10
- circle: (s) =>
11
- `M0 ${0.5 * s}` +
12
- `A${0.5 * s} ${0.5 * s} 0 0 0 ${s} ${0.5 * s}` +
13
- `A${0.5 * s} ${0.5 * s} 0 0 0 0 ${0.5 * s}`,
14
- diamond: (s) =>
15
- `M${0.5 * s} 0` +
16
- `A${0.6 * s} ${0.6 * s} 0 0 0 ${s} ${0.5 * s}` +
17
- `A${0.6 * s} ${0.6 * s} 0 0 0 ${0.5 * s} ${s}` +
18
- `A${0.6 * s} ${0.6 * s} 0 0 0 0 ${0.5 * s}` +
19
- `A${0.6 * s} ${0.6 * s} 0 0 0 ${0.5 * s} 0`,
20
- triangle: (s) =>
21
- `M${0.5 * s} ${0.0866 * s}L0 ${0.9234 * s}L${s} ${0.9234 * s}Z`,
22
- rhombus: (s) =>
23
- `M${0.5 * s} 0` +
24
- `L${s} ${0.5 * s}` +
25
- `L${0.5 * s} ${s}` +
26
- `L0 ${0.5 * s}Z`,
27
- star: (s) =>
28
- `M${0.5 * s} ${0.05 * s}` +
29
- `L${0.606 * s} ${0.36 * s}` +
30
- `L${s} ${0.36 * s}` +
31
- `L${0.685 * s} ${0.59 * s}` +
32
- `L${0.81 * s} ${0.95 * s}` +
33
- `L${0.5 * s} ${0.725 * s}` +
34
- `L${0.19 * s} ${0.95 * s}` +
35
- `L${0.315 * s} ${0.59 * s}` +
36
- `L0 ${0.36 * s}` +
37
- `L${0.394 * s} ${0.36 * s}Z`,
38
- heart: (s) =>
39
- `M${0.9 * s} ${0.5 * s}` +
40
- `A${0.08 * s} ${0.08 * s} 0 0 0 ${0.5 * s} ${0.2 * s}` +
41
- `A${0.08 * s} ${0.08 * s} 0 0 0 ${0.1 * s} ${0.5 * s}` +
42
- `L${0.5 * s} ${0.9 * s}` +
43
- `L${0.9 * s} ${0.5 * s}`,
44
- shurikan: (s) =>
45
- `M${0.3 * s} ${0.1 * s}L${0.5 * s} 0L${0.7 * s} ${0.1 * s}` +
46
- `A ${0.05 * s} ${0.05 * s} 0 0 0 ${0.9 * s} ${0.35 * s}` +
47
- `L${s} ${0.5 * s}L${0.9 * s} ${0.7 * s}` +
48
- `A ${0.05 * s} ${0.05 * s} 0 0 0 ${0.7 * s} ${0.9 * s}` +
49
- `L${0.5 * s} ${s}L${0.3 * s} ${0.9 * s}` +
50
- `A${0.05 * s} ${0.05 * s} 0 0 0 ${0.1 * s} ${0.7 * s}` +
51
- `L0 ${0.5 * s}L${0.1 * s} ${0.3 * s}` +
52
- `A${0.05 * s} ${0.05 * s} 0 0 0 ${0.3 * s} ${0.1 * s}` +
53
- `M${0.4 * s} ${0.5 * s}` +
54
- `A${0.1 * s} ${0.1 * s} 0 0 0 ${0.6 * s} ${0.5 * s}` +
55
- `A${0.1 * s} ${0.1 * s} 0 0 0 ${0.4 * s} ${0.5 * s}`,
56
- target: (s) =>
57
- `M${0.2 * s} ${0.5 * s}` +
58
- `A${0.3 * s} ${0.3 * s} 0 0 0 ${0.8 * s} ${0.5 * s}` +
59
- `A${0.3 * s} ${0.3 * s} 0 0 0 ${0.2 * s} ${0.5 * s}` +
60
- `M0 ${0.5 * s}` +
61
- `L${s} ${0.5 * s}` +
62
- `M${0.5 * s} 0` +
63
- `L${0.5 * s} ${s}`
64
- }
65
-
66
- export const builtIn = [
67
- ...Object.keys(namedShapes).map((key) => ({ shape: namedShapes[key] })),
68
- {
69
- shape: (s) =>
70
- `M${0.1 * s} ${0.1 * s}` +
71
- `A${0.5 * s} ${0.5 * s} 0 0 0 ${0.9 * s} ${0.1 * s}` +
72
- `A${0.5 * s} ${0.5 * s} 0 0 0 ${0.9 * s} ${0.9 * s}` +
73
- `A${0.5 * s} ${0.5 * s} 0 0 0 ${0.1 * s} ${0.9 * s}` +
74
- `A${0.5 * s} ${0.5 * s} 0 0 0 ${0.1 * s} ${0.1 * s}`
75
- },
76
- {
77
- shape: (s) =>
78
- `M${0.5 * s} ${0.3 * s}` +
79
- `A${0.2 * s} ${0.1 * s} 0 0 0 ${0.5 * s} ${0.1 * s}` +
80
- `L${0.5 * s} ${0.9 * s}` +
81
- `M${0.5 * s} ${0.7 * s}` +
82
- `A${0.2 * s} ${0.1 * s} 0 0 0 ${0.5 * s} ${0.9 * s}` +
83
- `M${0.3 * s} ${0.5 * s}` +
84
- `A${0.1 * s} ${0.2 * s} 0 0 0 ${0.1 * s} ${0.5 * s}` +
85
- `L${0.9 * s} ${0.5 * s}` +
86
- `M${0.7 * s} ${0.5 * s}` +
87
- `A${0.1 * s} ${0.2 * s} 0 0 0 ${0.9 * s} ${0.5 * s}`
88
- },
89
- {
90
- shape: (s) =>
91
- `M${0.1 * s} ${0.3 * s}` +
92
- `L${0.7 * s} ${0.9 * s}` +
93
- `L${0.9 * s} ${0.7 * s}` +
94
- `L${0.3 * s} ${0.1 * s}Z` +
95
- `M${0.1 * s} ${0.7 * s}` +
96
- `L${0.7 * s} ${0.1 * s}` +
97
- `L${0.9 * s} ${0.3 * s}` +
98
- `L${0.3 * s} ${0.9 * s}Z`
99
- },
100
- {
101
- shape: (s) =>
102
- `M${0.1 * s} ${0.4 * s}` +
103
- `L${0.9 * s} ${0.4 * s}` +
104
- `L${0.9 * s} ${0.6 * s}` +
105
- `L${0.1 * s} ${0.6 * s}Z` +
106
- `M${0.4 * s} ${0.1 * s}` +
107
- `L${0.4 * s} ${0.9 * s}` +
108
- `L${0.6 * s} ${0.9 * s}` +
109
- `L${0.6 * s} ${0.1 * s}Z`
110
- },
111
- {
112
- shape: (s) =>
113
- `M${0.5 * s} ${0.05 * s}` +
114
- `L${0.19 * s} ${0.95 * s}` +
115
- `L${s} ${0.36 * s}` +
116
- `L0 ${0.36 * s}` +
117
- `L${0.81 * s} ${0.95 * s}Z`
118
- },
119
- {
120
- shape: (s) =>
121
- `M${0.1 * s} ${0.1 * s}` +
122
- `L${0.1 * s} ${0.9 * s}` +
123
- `L${0.9 * s} ${0.9 * s}` +
124
- `L${0.9 * s} ${0.1 * s}Z` +
125
- `M${0.1 * s} ${0.1 * s}` +
126
- `L${0.1 * s} ${0.5 * s}` +
127
- `L${0.5 * s} ${0.5 * s}` +
128
- `L${0.5 * s} ${0.1 * s}Z` +
129
- `M${0.5 * s} ${0.5 * s}` +
130
- `L${0.5 * s} ${0.9 * s}` +
131
- `L${0.9 * s} ${0.9 * s}` +
132
- `L${0.9 * s} ${0.5 * s}Z`
133
- },
134
- {
135
- shape: (s) =>
136
- `M${0.5 * s} 0` +
137
- `L${s} ${0.5 * s}` +
138
- `L${0.5 * s} ${s}` +
139
- `L0 ${0.5 * s}Z` +
140
- `M${0.5 * s} 0` +
141
- `L${s} ${0.5 * s}` +
142
- `L${0.5 * s} ${s}Z`
143
- },
144
- {
145
- shape: (s) =>
146
- `M0 ${0.5 * s}` +
147
- `A${0.6 * s} ${0.4 * s} 0 0 0 ${s} ${0.5 * s}` +
148
- `A${0.6 * s} ${0.4 * s} 0 0 0 0 ${0.5 * s}` +
149
- `M${0.5 * s} 0` +
150
- `A${0.4 * s} ${0.6 * s} 0 0 0 ${0.5 * s} ${s}` +
151
- `A${0.4 * s} ${0.6 * s} 0 0 0 ${0.5 * s} 0`
152
- }
153
- ]
154
-
155
- export class ShapeBrewer {
156
- constructor() {
157
- this.shapes = builtIn
158
- this.repeat = false
159
- this.indices = [...this.shapes.keys()]
160
- this.gray = new ColorBrewer().gray()
161
- this.shades = []
162
- this.repeat = false
163
- }
164
-
165
- clear() {
166
- this.shapes = []
167
- return this
168
- }
169
-
170
- add(shape) {
171
- const shapes = Array.isArray(shape) ? shape : [shape]
172
- this.shapes = [...shapes]
173
-
174
- return this
175
- }
176
-
177
- filter(indices) {
178
- indices = Array.isArray(indices) ? indices : [indices]
179
- this.indices = indices.filter((i) => i > 0 && i < this.shapes.length)
180
-
181
- return this
182
- }
183
-
184
- colors(shades, repeat = false) {
185
- this.shades = Array.isArray(shades) ? shades : [shades]
186
- this.repeat = repeat
187
- return this
188
- }
189
-
190
- brew() {
191
- return this.indices
192
- .map((i) => this.shapes[i])
193
- .map((shape, i) => {
194
- return i < this.shades.length || this.repeat
195
- ? { ...shape, ...this.shades[i % this.shades.length] }
196
- : { ...shape, ...this.gray }
197
- })
198
- }
199
- }
@@ -1,41 +0,0 @@
1
- import { writable } from 'svelte/store'
2
-
3
- let req
4
- let prev
5
- const elapsed = writable(0)
6
-
7
- const tick = (timestamp) => {
8
- if (!prev) prev = timestamp
9
- const diff = Math.round(timestamp - prev)
10
- prev = timestamp
11
- elapsed.update((e) => e + diff)
12
- req = window.requestAnimationFrame(tick)
13
- }
14
-
15
- const timer = {
16
- start() {
17
- if (typeof window === 'undefined') return
18
- else if (!req) {
19
- prev = null
20
- req = window.requestAnimationFrame(tick)
21
- }
22
- },
23
- stop() {
24
- if (typeof window === 'undefined') return
25
- else if (req) {
26
- window.cancelAnimationFrame(req)
27
- req = null
28
- }
29
- },
30
- toggle() {
31
- req ? timer.stop() : timer.start()
32
- },
33
- set(val) {
34
- if (typeof val === 'number') elapsed.set(val)
35
- },
36
- reset() {
37
- timer.set(0)
38
- }
39
- }
40
-
41
- export { timer, elapsed }
package/src/constants.js DELETED
@@ -1,66 +0,0 @@
1
- export const __muted__ = {
2
- color: '#eeeeee',
3
- fill: 'empty',
4
- shape: 'circle'
5
- }
6
- export const __colors__ = [
7
- '#FFDE6B',
8
- '#EF89EE',
9
- '#F79F1E',
10
- '#02B8FF',
11
- '#9F84EC',
12
- '#15CBC4',
13
- '#0092FD',
14
- '#F63A57',
15
- '#A2CB39',
16
- '#FF6E2F',
17
- '#FEB8B9',
18
- '#af7aa1',
19
- '#7EFFF5'
20
- ]
21
-
22
- export const __patterns__ = {
23
- A: 'M0 5A6 6 0 0 0 10 5',
24
- B: 'M0 10L10 0',
25
- C: 'M0 0A10 10 0 0 0 10 10',
26
- D: 'M0 0L10 10',
27
- E: 'M10 5A6 6 0 0 0 0 5',
28
- F: 'M10 10A10 10 0 0 0 0 0',
29
- G: 'M0 0L10 10ZM10 0L0 10Z',
30
- H: 'M1 1L9 1L9 9L1 9Z',
31
- I: 'M4 0L4 10M6 10L6 0M0 4L10 4M10 6L0 6',
32
- J: 'M0 2L8 10M2 0L10 8M0 8L8 0M2 10L10 2',
33
- K: 'M5 1A 4 4 0 0 0 9 5A4 4 0 0 0 5 9A4 4 0 0 0 1 5A4 4 0 0 0 5 1',
34
- L: 'M1 3L7 9M3 1L9 7M1 7L7 1M3 9L9 3',
35
- M: 'M2 2A4 4 0 0 0 8 2A4 4 0 0 0 8 8A4 4 0 0 0 2 8A4 4 0 0 0 2 2',
36
- N: 'M0 0A5 5 0 0 0 10 0A5 5 0 0 0 10 10A5 5 0 0 0 0 10A5 5 0 0 0 0 0',
37
- O: 'M5 2A 3 3 0 0 0 8 5A3 3 0 0 0 5 8A3 3 0 0 0 2 5A3 3 0 0 0 5 2',
38
- P: 'M2 5L5 2L8 5L5 8Z',
39
- Q: 'M3 5A2 2 0 0 0 7 5A2 2 0 0 0 3 5M1 5L9 5M5 1L5 9',
40
- R: 'M2 8L8 2ZM1.5 3.5L3.5 1.5ZM6.5 8.5L8.5 6.5ZM0 0L10 10Z',
41
- S:
42
- 'M2 8L8 2ZM1.5 3.5L3.5 1.5Z' +
43
- 'M6.5 8.5L8.5 6.5Z' +
44
- 'M2 2L8 8M1.5 6.5L3.5 8.5' +
45
- 'M6.5 1.5L8.5 3.5',
46
- T:
47
- 'M5 1 A6 6 0 0 0 5 9' +
48
- 'A6 6 0 0 0 5 1' +
49
- 'M1 5A6 6 0 0 0 9 5A6 6 0 0 0 1 5',
50
- U:
51
- 'M1.5 5A1 1 0 0 0 3.5 5A1 1 0 0 0 1.5 5' +
52
- 'M6.5 5A1 1 0 0 0 8.5 5A1 1 0 0 0 6.5 5' +
53
- 'M5 1.5A1 1 0 0 0 5 3.5A1 1 0 0 0 5 1.5' +
54
- 'M5 6.5A1 1 0 0 0 5 8.5A1 1 0 0 0 5 6.5',
55
- V:
56
- 'M1.5 2.5A1 1 0 0 0 3.5 2.5A1 1 0 0 0 1.5 2.5' +
57
- 'M6.5 2.5A1 1 0 0 0 8.5 2.5A1 1 0 0 0 6.5 2.5' +
58
- 'M2.5 6.5A1 1 0 0 0 2.5 8.5A1 1 0 0 0 2.5 6.5' +
59
- 'M7.5 6.5A1 1 0 0 0 7.5 8.5A1 1 0 0 0 7.5 6.5' +
60
- 'M3.5 5A1 1 0 0 0 6.5 5A1 1 0 0 0 3.5 5',
61
- W: 'M5 0L6 4L10 5L6 6L5 10L4 6L0 5L4 4Z' + 'M2 1V3M1 2H3' + 'M8 9V7M9 8H7',
62
- X: 'M5 2L2.5 9L8.8 4.6L1.2 4.6L7.5 9Z',
63
- Y: 'M0 5A5 5 0 0 0 5 0' + 'M5 10A5 5 0 0 0 0 5' + 'M5 10A5 5 0 0 0 5 0',
64
- Z: 'M0 0L10 10M5 0L10 5M0 5 L5 10',
65
- Z1: 'M0 0L10 10M3 0L10 7M0 7 L3 10'
66
- }
@@ -1,13 +0,0 @@
1
- <script>
2
- import PatternMask from './PatternMask.svelte'
3
- const size = 10
4
-
5
- export let thickness = 0.5
6
- export let patterns
7
- </script>
8
-
9
- <defs>
10
- {#each patterns as pattern}
11
- <PatternMask {...pattern} {thickness} {size} />
12
- {/each}
13
- </defs>
@@ -1,20 +0,0 @@
1
- <script>
2
- export let id
3
- // export let fill
4
- export let path
5
- // export let contrast
6
- export let thickness = 0.5
7
- export let patternUnits = 'userSpaceOnUse'
8
- export let size = 10
9
- </script>
10
-
11
- <pattern id="p-{id}" {patternUnits} width={size} height={size}>
12
- {#if path}
13
- <path d={path} fill="none" stroke="white" stroke-width={thickness} />
14
- <!-- {:else}
15
- <rect width={size} height={size} {fill} /> -->
16
- {/if}
17
- </pattern>
18
- <mask {id}>
19
- <rect x="0" y="0" width="100%" height="100%" fill="url(#p-{id})" />
20
- </mask>
@@ -1,38 +0,0 @@
1
- <script>
2
- // import { namedShapes } from '../lib/shape'
3
- import { swatchStore } from '../swatch'
4
-
5
- export let x = 0
6
- export let y = 0
7
- export let size = 10
8
- export let fill = 'none'
9
- export let stroke = 'currentColor'
10
- export let thickness = 0.5
11
-
12
- export let name = 'circle'
13
- // export let shape = null
14
-
15
- $: x = x - size / 2
16
- $: y = y - size / 2
17
-
18
- $: d = $swatchStore['shapes'][name](size)
19
- // typeof shape === 'function'
20
- // ? shape(size)
21
- // : (shape || name) in namedShapes
22
- // ? namedShapes[shape || name](size)
23
- // : namedShapes.circle(size)
24
- </script>
25
-
26
- <!-- svelte-ignore a11y-click-events-have-key-events -->
27
- <path
28
- {d}
29
- {fill}
30
- {stroke}
31
- transform="translate({x},{y})"
32
- stroke-width={thickness}
33
- fill-rule="evenodd"
34
- on:click
35
- on:mouseover
36
- on:mouseleave
37
- on:focus
38
- />
package/src/funnel.svelte DELETED
@@ -1,35 +0,0 @@
1
- <!-- <script context="module">
2
- /**
3
- * @type {import('@sveltejs/kit').Load}
4
- */
5
- export async function load({ page, fetch, session, stuff }) {
6
- const url = '/api/data/funnel'
7
- const response = await fetch(url)
8
-
9
- if (response.ok) {
10
- let result = await response.json()
11
-
12
- return {
13
- props: { data: result }
14
- }
15
- }
16
-
17
- return {
18
- status: response.status,
19
- error: new Error(`Could not load ${url}`)
20
- }
21
- }
22
- </script> -->
23
-
24
- <script>
25
- import { FunnelPlot, Chart } from '@rokkit/chart'
26
- export let data
27
-
28
- // let names = ['one', 'two', 'three'] // each one is a separate segment. max of Combined value at each stage is overall height/width
29
- // let groups = ['a', 'b', 'c'] // each group should have a value. individual values are used for each band height
30
- </script>
31
-
32
- <h1>Funnel</h1>
33
- <Chart {data} width={1200}>
34
- <FunnelPlot x="stage" y="count" fill="client" stat="sum" />
35
- </Chart>
package/src/geom.js DELETED
@@ -1,105 +0,0 @@
1
- import {
2
- sum,
3
- min,
4
- max,
5
- mean,
6
- mode,
7
- median,
8
- deviation,
9
- variance,
10
- flatRollup
11
- } from 'd3-array'
12
-
13
- const summaries = {
14
- identity: (value) => value,
15
- count: (values) => values.length,
16
- sum: (values) => sum(values),
17
- min: (values) => min(values),
18
- max: (values) => max(values),
19
- mean: (values) => mean(values),
20
- median: (values) => median(values),
21
- mode: (values) => mode(values),
22
- variance: (values) => variance(values),
23
- deviation: (values) => deviation(values)
24
- }
25
-
26
- /**
27
- * Returns an aggregator function for an input string or function.
28
- *
29
- * @param {string|function} stat
30
- * @returns
31
- */
32
- export function rollup(stat) {
33
- if (typeof stat === 'function') return stat
34
- if (typeof stat !== 'string')
35
- throw new TypeError('stat must be a string or function')
36
- if (!(stat in summaries)) throw new TypeError('Unknown stat: ' + stat)
37
-
38
- return summaries[stat]
39
- }
40
-
41
- /**
42
- * Aesthetics for a chart.
43
- *
44
- * @typedef Aesthetics
45
- * @property {string} x
46
- * @property {string} y
47
- * @property {string} [fill]
48
- * @property {string} [size]
49
- * @property {string} [color]
50
- * @property {string} [shape]
51
- * @property {string} [pattern]
52
- */
53
-
54
- /**
55
- *
56
- * @param {Array<any>} data
57
- * @param {Aesthetics} aes
58
- * @param {function|string} stat
59
- * @returns
60
- */
61
- export function aggregate(data, aes, stat = 'identity') {
62
- const agg = rollup(stat)
63
- const keys = ['color', 'fill', 'pattern', 'shape', 'size'].filter((k) =>
64
- Object.keys(aes).includes(k)
65
- )
66
-
67
- let groups = keys.map((k) => (d) => d[aes[k]])
68
-
69
- return flatRollup(
70
- data,
71
- (v) => agg(v.map((d) => d[aes.y])),
72
- (d) => d[aes.x],
73
- ...groups
74
- )
75
- }
76
-
77
- // export function geomBars(chart, aes) {
78
- // const { x, y, fill, color, pattern } = { ...aes, ...chart.aes }
79
- // return aggregate(chart.data, { x, y, fill, color, pattern })
80
- // }
81
-
82
- // export function geomLines(chart, aes) {
83
- // const { x, y, color } = { ...aes, ...chart.aes }
84
- // return aggregate(chart.data, { x, y, color })
85
- // }
86
-
87
- // export function geomViolin(chart, aes) {
88
- // const { x, y, fill, color, pattern } = { ...aes, ...chart.aes }
89
- // return { x, y, fill, color, pattern, ...opts }
90
- // }
91
-
92
- // export function geomArea(chart, aes) {
93
- // const { x, y, fill, color, pattern } = { ...aes, ...chart.aes }
94
- // return { x, y, fill, color, pattern, ...opts }
95
- // }
96
-
97
- // export function geomTrend(chart, aes) {
98
- // const { x, y, fill, color, pattern } = { ...aes, ...chart.aes }
99
- // return { x, y, fill, color, pattern, ...opts }
100
- // }
101
-
102
- // export function geomPoints(chart, aes) {
103
- // const { x, y, fill, color, shape, size } = { ...aes, ...chart.aes }
104
- // return { x, y, fill, color, shape, size, ...opts }
105
- // }