@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.
- package/package.json +11 -10
- package/src/chart/FacetGrid.svelte +6 -6
- package/src/chart/Swatch.svelte +2 -3
- package/src/chart/TexturedShape.svelte +1 -1
- package/src/chart/TimelapseChart.svelte +2 -2
- package/src/elements/ColorRamp.svelte +1 -1
- package/src/elements/ContinuousLegend.svelte +1 -1
- package/src/index.js +1 -2
- package/src/{components/lib → lib}/chart.js +12 -0
- package/src/lib/color.js +59 -0
- package/src/{components/lib/color.js → lib/constants.js} +111 -56
- package/src/lib/geom.js +106 -0
- package/src/lib/index.js +0 -0
- package/src/lib/{colors.js → palette.js} +3 -3
- package/src/lib/shape.js +52 -0
- package/src/{swatch.js → lib/swatch.js} +4 -4
- package/src/{components/lib/utils.js → lib/utils-2.js} +1 -41
- package/src/lib/utils.js +4 -0
- package/src/plots/BarPlot.svelte +1 -1
- package/src/plots/FunnelPlot.svelte +2 -3
- package/src/plots/HeatMapCalendar.svelte +1 -1
- package/src/plots/LinePlot.svelte +1 -1
- package/src/plots/Plot.svelte +1 -1
- package/src/plots/ScatterPlot.svelte +1 -1
- package/src/chart/Symbol.svelte +0 -40
- package/src/chart.js +0 -11
- package/src/components/index.js +0 -2
- package/src/components/lib/index.js +0 -19
- package/src/components/lib/shape.js +0 -199
- package/src/components/lib/timer.js +0 -41
- package/src/constants.js +0 -66
- package/src/elements/PatternDefs.svelte +0 -13
- package/src/elements/PatternMask.svelte +0 -20
- package/src/elements/Symbol.svelte +0 -38
- package/src/funnel.svelte +0 -35
- package/src/geom.js +0 -105
- package/src/lib/shapes.js +0 -144
- package/src/plots/old_ScatterPlot.svelte +0 -20
- /package/src/chart/{Grid.svelte → AxisGrid.svelte} +0 -0
- /package/src/{components/lib → lib}/funnel.js +0 -0
- /package/src/{plots → lib}/heatmap.js +0 -0
- /package/src/{lookup.js → lib/lookup.js} +0 -0
- /package/src/{components/lib → lib}/pattern.js +0 -0
- /package/src/{components/lib → lib}/rollup.js +0 -0
- /package/src/{components → lib}/store.js +0 -0
- /package/src/{components/lib → lib}/summary.js +0 -0
- /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 '../
|
|
4
|
-
import { funnel } from '../
|
|
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 '
|
|
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'
|
package/src/plots/Plot.svelte
CHANGED
package/src/chart/Symbol.svelte
DELETED
|
@@ -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
package/src/components/index.js
DELETED
|
@@ -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
|
-
// }
|