@rokkit/chart 1.0.0-next.12 → 1.0.0-next.121
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/README.md +132 -46
- package/dist/Plot/index.d.ts +5 -0
- package/dist/elements/index.d.ts +6 -0
- package/dist/index.d.ts +14 -0
- package/dist/lib/brewing/axes.svelte.d.ts +72 -0
- package/dist/lib/brewing/bars.svelte.d.ts +54 -0
- package/dist/lib/brewing/dimensions.svelte.d.ts +35 -0
- package/dist/lib/brewing/index.svelte.d.ts +118 -0
- package/dist/lib/brewing/legends.svelte.d.ts +54 -0
- package/dist/lib/brewing/scales.svelte.d.ts +29 -0
- package/dist/lib/brewing/types.d.ts +162 -0
- package/dist/lib/context.d.ts +13 -0
- package/dist/lib/scales.svelte.d.ts +35 -0
- package/dist/lib/utils.d.ts +58 -0
- package/dist/old_lib/brewer.d.ts +9 -0
- package/dist/old_lib/chart.d.ts +40 -0
- package/dist/old_lib/grid.d.ts +72 -0
- package/dist/old_lib/index.d.ts +4 -0
- package/dist/old_lib/plots.d.ts +3 -0
- package/dist/old_lib/swatch.d.ts +285 -0
- package/dist/old_lib/ticks.d.ts +36 -0
- package/dist/old_lib/utils.d.ts +1 -0
- package/dist/patterns/index.d.ts +9 -0
- package/dist/patterns/paths/constants.d.ts +1 -0
- package/dist/symbols/constants/index.d.ts +1 -0
- package/dist/symbols/index.d.ts +5 -0
- package/dist/template/constants.d.ts +43 -0
- package/dist/template/shapes/index.d.ts +4 -0
- package/package.json +28 -44
- package/src/Plot/Axis.svelte +103 -0
- package/src/Plot/Bar.svelte +95 -0
- package/src/Plot/Grid.svelte +68 -0
- package/src/Plot/Legend.svelte +129 -0
- package/src/Plot/Root.svelte +112 -0
- package/src/Plot/index.js +5 -0
- package/src/Symbol.svelte +21 -0
- package/src/{chart/Texture.svelte → Texture.svelte} +3 -3
- package/src/elements/Bar.svelte +2 -8
- package/src/elements/ColorRamp.svelte +3 -5
- package/src/elements/ContinuousLegend.svelte +4 -5
- package/src/elements/DefinePatterns.svelte +22 -0
- package/src/elements/DiscreteLegend.svelte +3 -5
- package/src/elements/Label.svelte +6 -5
- package/src/elements/SymbolGrid.svelte +23 -0
- package/src/elements/index.js +6 -0
- package/src/examples/BarChartExample.svelte +81 -0
- package/src/index.js +18 -16
- package/src/lib/brewing/axes.svelte.js +179 -0
- package/src/lib/brewing/bars.svelte.js +114 -0
- package/src/lib/brewing/dimensions.svelte.js +54 -0
- package/src/lib/brewing/index.svelte.js +214 -0
- package/src/lib/brewing/legends.svelte.js +95 -0
- package/src/lib/brewing/scales.svelte.js +94 -0
- package/src/lib/brewing/types.js +73 -0
- package/src/lib/context.js +122 -0
- package/src/lib/scales.svelte.js +129 -0
- package/src/lib/utils.js +110 -132
- package/src/old_lib/brewer.js +25 -0
- package/src/old_lib/chart.js +213 -0
- package/src/old_lib/grid.js +85 -0
- package/src/old_lib/index.js +4 -0
- package/src/old_lib/plots.js +27 -0
- package/src/old_lib/swatch.js +16 -0
- package/src/old_lib/ticks.js +46 -0
- package/src/old_lib/utils.js +8 -0
- package/src/patterns/Brick.svelte +17 -0
- package/src/patterns/Circles.svelte +18 -0
- package/src/patterns/CrossHatch.svelte +14 -0
- package/src/patterns/CurvedWave.svelte +9 -0
- package/src/patterns/Dots.svelte +19 -0
- package/src/patterns/OutlineCircles.svelte +15 -0
- package/src/patterns/Tile.svelte +17 -0
- package/src/patterns/Triangles.svelte +15 -0
- package/src/patterns/Waves.svelte +13 -0
- package/src/patterns/index.js +14 -0
- package/src/patterns/paths/NamedPattern.svelte +12 -0
- package/src/patterns/paths/constants.js +4 -0
- package/src/symbols/RoundedSquare.svelte +27 -0
- package/src/symbols/Shape.svelte +31 -0
- package/src/symbols/constants/index.js +4 -0
- package/src/symbols/index.js +9 -0
- package/src/symbols/outline.svelte +60 -0
- package/src/symbols/solid.svelte +60 -0
- package/src/template/Texture.svelte +16 -0
- package/src/template/constants.js +43 -0
- package/src/template/shapes/Circles.svelte +16 -0
- package/src/template/shapes/Lines.svelte +17 -0
- package/src/template/shapes/Path.svelte +12 -0
- package/src/template/shapes/Polygons.svelte +18 -0
- package/src/template/shapes/index.js +4 -0
- package/LICENSE +0 -21
- package/src/chart/FacetGrid.svelte +0 -51
- package/src/chart/Grid.svelte +0 -34
- package/src/chart/Legend.svelte +0 -16
- package/src/chart/PatternDefs.svelte +0 -13
- package/src/chart/Swatch.svelte +0 -93
- package/src/chart/SwatchButton.svelte +0 -29
- package/src/chart/SwatchGrid.svelte +0 -55
- package/src/chart/Symbol.svelte +0 -37
- package/src/chart/TexturedShape.svelte +0 -27
- package/src/chart/TimelapseChart.svelte +0 -97
- package/src/chart/Timer.svelte +0 -27
- package/src/chart.js +0 -9
- package/src/components/charts/Axis.svelte +0 -66
- package/src/components/charts/Chart.svelte +0 -35
- package/src/components/index.js +0 -23
- package/src/components/lib/axis.js +0 -0
- package/src/components/lib/chart.js +0 -187
- package/src/components/lib/color.js +0 -327
- package/src/components/lib/funnel.js +0 -204
- package/src/components/lib/index.js +0 -19
- package/src/components/lib/pattern.js +0 -190
- package/src/components/lib/rollup.js +0 -55
- package/src/components/lib/shape.js +0 -199
- package/src/components/lib/summary.js +0 -145
- package/src/components/lib/theme.js +0 -23
- package/src/components/lib/timer.js +0 -41
- package/src/components/lib/utils.js +0 -165
- package/src/components/plots/BarPlot.svelte +0 -36
- package/src/components/plots/BoxPlot.svelte +0 -54
- package/src/components/plots/ScatterPlot.svelte +0 -30
- package/src/components/store.js +0 -70
- 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/elements/Tooltip.svelte +0 -23
- package/src/funnel.svelte +0 -35
- package/src/geom.js +0 -105
- package/src/lib/axis.js +0 -75
- package/src/lib/colors.js +0 -32
- package/src/lib/geom.js +0 -4
- package/src/lib/shapes.js +0 -144
- package/src/lib/timer.js +0 -44
- package/src/lookup.js +0 -29
- package/src/plots/BarPlot.svelte +0 -55
- package/src/plots/BoxPlot.svelte +0 -0
- package/src/plots/FunnelPlot.svelte +0 -33
- package/src/plots/HeatMap.svelte +0 -5
- package/src/plots/HeatMapCalendar.svelte +0 -129
- package/src/plots/LinePlot.svelte +0 -55
- package/src/plots/Plot.svelte +0 -25
- package/src/plots/RankBarPlot.svelte +0 -38
- package/src/plots/ScatterPlot.svelte +0 -20
- package/src/plots/ViolinPlot.svelte +0 -11
- package/src/plots/heatmap.js +0 -70
- package/src/plots/index.js +0 -10
- package/src/swatch.js +0 -11
|
@@ -1,190 +0,0 @@
|
|
|
1
|
-
import { clamp } from 'yootils'
|
|
2
|
-
import { ColorBrewer } from './color'
|
|
3
|
-
import { toHexString, uniqueId } from './utils'
|
|
4
|
-
|
|
5
|
-
export const builtIn = [
|
|
6
|
-
{ path: 'M0 5A6 6 0 0 0 10 5', minAngle: 0, maxAngle: 90 },
|
|
7
|
-
{ path: 'M0 10L10 0', minAngle: 0, maxAngle: 90 },
|
|
8
|
-
{ path: 'M0 0A10 10 0 0 0 10 10', minAngle: 0, maxAngle: 90 },
|
|
9
|
-
{ path: 'M0 0L10 10', minAngle: 0, maxAngle: 90 },
|
|
10
|
-
{ path: 'M10 5A6 6 0 0 0 0 5', minAngle: 0, maxAngle: 90 },
|
|
11
|
-
|
|
12
|
-
{ path: 'M10 10A10 10 0 0 0 0 0', minAngle: 0, maxAngle: 90 },
|
|
13
|
-
{ path: 'M0 0L10 10ZM10 0L0 10Z', minAngle: 0, maxAngle: 90 },
|
|
14
|
-
{ path: 'M1 1L9 1L9 9L1 9Z', minAngle: 0, maxAngle: 90 },
|
|
15
|
-
{ path: 'M4 0L4 10M6 10L6 0M0 4L10 4M10 6L0 6', minAngle: 0, maxAngle: 90 },
|
|
16
|
-
{ path: 'M0 2L8 10M2 0L10 8M0 8L8 0M2 10L10 2', minAngle: 0, maxAngle: 90 },
|
|
17
|
-
|
|
18
|
-
{
|
|
19
|
-
path: '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',
|
|
20
|
-
minAngle: 0,
|
|
21
|
-
maxAngle: 45
|
|
22
|
-
},
|
|
23
|
-
{ path: 'M1 3L7 9M3 1L9 7M1 7L7 1M3 9L9 3', minAngle: 0, maxAngle: 90 },
|
|
24
|
-
{
|
|
25
|
-
path: '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',
|
|
26
|
-
minAngle: 0,
|
|
27
|
-
maxAngle: 90
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
path: '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',
|
|
31
|
-
minAngle: 0,
|
|
32
|
-
maxAngle: 45
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
path: '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',
|
|
36
|
-
minAngle: 0,
|
|
37
|
-
maxAngle: 90
|
|
38
|
-
},
|
|
39
|
-
|
|
40
|
-
{ path: 'M2 5L5 2L8 5L5 8Z', minAngle: 0, maxAngle: 90 },
|
|
41
|
-
{
|
|
42
|
-
path: 'M3 5A2 2 0 0 0 7 5A2 2 0 0 0 3 5M1 5L9 5M5 1L5 9',
|
|
43
|
-
minAngle: 0,
|
|
44
|
-
maxAngle: 90
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
path: 'M2 8L8 2ZM1.5 3.5L3.5 1.5ZM6.5 8.5L8.5 6.5ZM0 0L10 10Z',
|
|
48
|
-
minAngle: 0,
|
|
49
|
-
maxAngle: 90
|
|
50
|
-
},
|
|
51
|
-
|
|
52
|
-
{
|
|
53
|
-
path:
|
|
54
|
-
'M2 8L8 2ZM1.5 3.5L3.5 1.5Z' +
|
|
55
|
-
'M6.5 8.5L8.5 6.5Z' +
|
|
56
|
-
'M2 2L8 8M1.5 6.5L3.5 8.5' +
|
|
57
|
-
'M6.5 1.5L8.5 3.5',
|
|
58
|
-
minAngle: 0,
|
|
59
|
-
maxAngle: 90
|
|
60
|
-
},
|
|
61
|
-
|
|
62
|
-
{
|
|
63
|
-
path:
|
|
64
|
-
'M5 1 A6 6 0 0 0 5 9' +
|
|
65
|
-
'A6 6 0 0 0 5 1' +
|
|
66
|
-
'M1 5A6 6 0 0 0 9 5A6 6 0 0 0 1 5',
|
|
67
|
-
minAngle: 0,
|
|
68
|
-
maxAngle: 90
|
|
69
|
-
},
|
|
70
|
-
{
|
|
71
|
-
path:
|
|
72
|
-
'M1.5 5A1 1 0 0 0 3.5 5A1 1 0 0 0 1.5 5' +
|
|
73
|
-
'M6.5 5A1 1 0 0 0 8.5 5A1 1 0 0 0 6.5 5' +
|
|
74
|
-
'M5 1.5A1 1 0 0 0 5 3.5A1 1 0 0 0 5 1.5' +
|
|
75
|
-
'M5 6.5A1 1 0 0 0 5 8.5A1 1 0 0 0 5 6.5',
|
|
76
|
-
minAngle: 0,
|
|
77
|
-
maxAngle: 90
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
path:
|
|
81
|
-
'M1.5 2.5A1 1 0 0 0 3.5 2.5A1 1 0 0 0 1.5 2.5' +
|
|
82
|
-
'M6.5 2.5A1 1 0 0 0 8.5 2.5A1 1 0 0 0 6.5 2.5' +
|
|
83
|
-
'M2.5 6.5A1 1 0 0 0 2.5 8.5A1 1 0 0 0 2.5 6.5' +
|
|
84
|
-
'M7.5 6.5A1 1 0 0 0 7.5 8.5A1 1 0 0 0 7.5 6.5' +
|
|
85
|
-
'M3.5 5A1 1 0 0 0 6.5 5A1 1 0 0 0 3.5 5',
|
|
86
|
-
minAngle: 0,
|
|
87
|
-
maxAngle: 90
|
|
88
|
-
},
|
|
89
|
-
{
|
|
90
|
-
path:
|
|
91
|
-
'M5 0L6 4L10 5L6 6L5 10L4 6L0 5L4 4Z' + 'M2 1V3M1 2H3' + 'M8 9V7M9 8H7',
|
|
92
|
-
minAngle: 0,
|
|
93
|
-
maxAngle: 90
|
|
94
|
-
},
|
|
95
|
-
{ path: 'M5 2L2.5 9L8.8 4.6L1.2 4.6L7.5 9Z', minAngle: 0, maxAngle: 90 },
|
|
96
|
-
{
|
|
97
|
-
path: 'M0 5A5 5 0 0 0 5 0' + 'M5 10A5 5 0 0 0 0 5' + 'M5 10A5 5 0 0 0 5 0',
|
|
98
|
-
minAngle: 0,
|
|
99
|
-
maxAngle: 90
|
|
100
|
-
},
|
|
101
|
-
{
|
|
102
|
-
path: 'M0 0L10 10M5 0L10 5M0 5 L5 10',
|
|
103
|
-
minAngle: 0,
|
|
104
|
-
maxAngle: 90
|
|
105
|
-
},
|
|
106
|
-
{
|
|
107
|
-
path: 'M0 0L10 10M3 0L10 7M0 7 L3 10',
|
|
108
|
-
minAngle: 0,
|
|
109
|
-
maxAngle: 90
|
|
110
|
-
}
|
|
111
|
-
]
|
|
112
|
-
|
|
113
|
-
export class PatternBrewer {
|
|
114
|
-
constructor() {
|
|
115
|
-
this.paths = builtIn
|
|
116
|
-
this.shades = []
|
|
117
|
-
this.gray = new ColorBrewer().gray()
|
|
118
|
-
this.bw = false
|
|
119
|
-
this.repeat = false
|
|
120
|
-
this.indices = [...this.paths.keys()]
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
clear() {
|
|
124
|
-
this.paths = []
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
add(path) {
|
|
128
|
-
let paths = Array.isArray(path) ? path : [path]
|
|
129
|
-
this.paths = [...this.paths, ...paths]
|
|
130
|
-
|
|
131
|
-
return this
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
filter(indices) {
|
|
135
|
-
indices = Array.isArray(indices) ? indices : [indices]
|
|
136
|
-
this.indices = indices.filter((i) => i >= 0 && i < this.paths.length)
|
|
137
|
-
return this
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
colors(shades, repeat = false) {
|
|
141
|
-
this.shades = Array.isArray(shades) ? shades : [shades]
|
|
142
|
-
this.repeat = repeat
|
|
143
|
-
return this
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
variants(count) {
|
|
147
|
-
count = clamp(count, 1, 15)
|
|
148
|
-
this.paths = this.paths.map((path) => ({
|
|
149
|
-
...path,
|
|
150
|
-
angles: [...Array(count).keys()].map(
|
|
151
|
-
(i) => (i * (path.maxAngle - path.minAngle)) / count
|
|
152
|
-
)
|
|
153
|
-
}))
|
|
154
|
-
return this
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
brew() {
|
|
158
|
-
// const hexPrefix = toHexString(prefix)
|
|
159
|
-
const hexPrefix = uniqueId()
|
|
160
|
-
|
|
161
|
-
let patterns = []
|
|
162
|
-
|
|
163
|
-
// apply filter and add angle variations
|
|
164
|
-
this.indices
|
|
165
|
-
.map((i) => this.paths[i])
|
|
166
|
-
.map((path) => {
|
|
167
|
-
if ('angles' in path) {
|
|
168
|
-
path.angles.map((angle) => patterns.push({ ...path, angle }))
|
|
169
|
-
} else {
|
|
170
|
-
patterns.push(path)
|
|
171
|
-
}
|
|
172
|
-
})
|
|
173
|
-
|
|
174
|
-
patterns = patterns
|
|
175
|
-
// Add reference ids
|
|
176
|
-
.map((path, index) => ({
|
|
177
|
-
id: hexPrefix + '-' + toHexString(index),
|
|
178
|
-
...path,
|
|
179
|
-
fillUrl: `url(#${hexPrefix}-${toHexString(index)})`
|
|
180
|
-
}))
|
|
181
|
-
// Add colors
|
|
182
|
-
.map((pattern, i) => {
|
|
183
|
-
return i < this.shades.length || this.repeat
|
|
184
|
-
? { ...pattern, ...this.shades[i % this.shades.length] }
|
|
185
|
-
: { ...pattern, ...this.gray }
|
|
186
|
-
})
|
|
187
|
-
|
|
188
|
-
return patterns
|
|
189
|
-
}
|
|
190
|
-
}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { min, max, add, format } from 'date-fns'
|
|
2
|
-
|
|
3
|
-
export function uniques(data, attr) {
|
|
4
|
-
return data && attr ? [...new Set(data.map((item) => item[attr]))] : []
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
export function slidingWindow(values, size, step, offset, fmt) {
|
|
8
|
-
return size && typeof size === 'object'
|
|
9
|
-
? slidingWindowForDates(values, size, step, offset, fmt)
|
|
10
|
-
: slidingWindowForNumbers(values, size, step, offset, fmt)
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
function slidingWindowForNumbers(values, size, step, offset = 0, fmt = 0) {
|
|
14
|
-
const smallest = Number(Math.min(...values).toFixed(fmt))
|
|
15
|
-
let largest = Math.max(...values)
|
|
16
|
-
let count = Math.ceil((largest - smallest + offset) / step)
|
|
17
|
-
|
|
18
|
-
if (smallest + count * step + offset == largest) {
|
|
19
|
-
count += 1
|
|
20
|
-
}
|
|
21
|
-
// console.log('count:', count)
|
|
22
|
-
const range = [...Array(count).keys()]
|
|
23
|
-
|
|
24
|
-
const result = range.map((key) => ({
|
|
25
|
-
key: smallest + key * step,
|
|
26
|
-
lowerBound: smallest + key * step + offset,
|
|
27
|
-
upperBound: smallest + key * step + offset + size
|
|
28
|
-
}))
|
|
29
|
-
return result
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
function slidingWindowForDates(
|
|
33
|
-
values,
|
|
34
|
-
size,
|
|
35
|
-
step,
|
|
36
|
-
offset = {},
|
|
37
|
-
fmt = 'yyyy-MM-dd'
|
|
38
|
-
) {
|
|
39
|
-
const largest = max(values)
|
|
40
|
-
let current = new Date(format(min(values), fmt))
|
|
41
|
-
let blocks = []
|
|
42
|
-
let lowerBound = current
|
|
43
|
-
|
|
44
|
-
while (lowerBound <= largest) {
|
|
45
|
-
lowerBound = add(current, offset)
|
|
46
|
-
|
|
47
|
-
blocks.push({
|
|
48
|
-
key: current,
|
|
49
|
-
lowerBound,
|
|
50
|
-
upperBound: add(lowerBound, size)
|
|
51
|
-
})
|
|
52
|
-
current = add(current, step)
|
|
53
|
-
}
|
|
54
|
-
return blocks
|
|
55
|
-
}
|
|
@@ -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,145 +0,0 @@
|
|
|
1
|
-
// import { sum, median, max, mean, min, quantile, cumsum } from 'd3-array'
|
|
2
|
-
// import { nest } from 'd3-collection'
|
|
3
|
-
// import { pick, flatten } from 'ramda'
|
|
4
|
-
|
|
5
|
-
// const aggregate = {
|
|
6
|
-
// count: (values) => values.length,
|
|
7
|
-
// sum: (values) => sum(values),
|
|
8
|
-
// min: (values) => min(values),
|
|
9
|
-
// max: (values) => max(values),
|
|
10
|
-
// mean: (values) => mean(values),
|
|
11
|
-
// median: (values) => median(values),
|
|
12
|
-
// q1: (values) => quantile(values, 0.25),
|
|
13
|
-
// q3: (values) => quantile(values, 0.75),
|
|
14
|
-
// }
|
|
15
|
-
|
|
16
|
-
// export function summarize(data, by, attr, stat = 'count') {
|
|
17
|
-
// const stats = Array.isArray(stat) ? stat : [stat]
|
|
18
|
-
// const grouped = nest()
|
|
19
|
-
// .key((d) => by.map((f) => d[f]).join('|'))
|
|
20
|
-
// .rollup((rows) => {
|
|
21
|
-
// let agg = pick(by, rows[0])
|
|
22
|
-
// stats.map(
|
|
23
|
-
// (stat) => (agg[stat] = aggregate[stat](rows.map((d) => d[attr])))
|
|
24
|
-
// )
|
|
25
|
-
// return [agg]
|
|
26
|
-
// })
|
|
27
|
-
// .entries(data)
|
|
28
|
-
// return flatten(grouped.map((group) => group.value))
|
|
29
|
-
// }
|
|
30
|
-
|
|
31
|
-
// export function getUniques(input, aes) {
|
|
32
|
-
// const attrs = ['x', 'y', 'fill']
|
|
33
|
-
// let values = {}
|
|
34
|
-
|
|
35
|
-
// attrs.map((attr) => {
|
|
36
|
-
// if (attr in aes) {
|
|
37
|
-
// values[attr] = [...new Set(input.map((d) => d[aes[attr]]))]
|
|
38
|
-
// }
|
|
39
|
-
// })
|
|
40
|
-
// // x: 'x' in aes ? [...new Set(input.map((d) => d[aes.x]))] : [],
|
|
41
|
-
// // y: 'y' in aes ? [...new Set(input.map((d) => d[aes.y]))] : [],
|
|
42
|
-
// // fill: 'fill' in aes ? [...new Set(input.map((d) => d[aes.fill]))] : [],
|
|
43
|
-
// // }
|
|
44
|
-
// return values
|
|
45
|
-
// }
|
|
46
|
-
|
|
47
|
-
// export function fillMissing(fill, rows, key, aes) {
|
|
48
|
-
// const filled = fill.map((f) => {
|
|
49
|
-
// let matched = rows.filter((r) => r[aes.fill] === f)
|
|
50
|
-
// if (matched.length == 0) {
|
|
51
|
-
// let row = {}
|
|
52
|
-
// row[key] = rows[0][key]
|
|
53
|
-
// row[aes.fill] = f
|
|
54
|
-
// row[aes.stat] = 0
|
|
55
|
-
// return row
|
|
56
|
-
// } else {
|
|
57
|
-
// return matched[0]
|
|
58
|
-
// }
|
|
59
|
-
// })
|
|
60
|
-
// return filled
|
|
61
|
-
// }
|
|
62
|
-
|
|
63
|
-
// export function convertToPhases(input, aes) {
|
|
64
|
-
// const uniques = getUniques(input, aes)
|
|
65
|
-
// let vertical = 'y' in uniques && uniques.y.some(isNaN)
|
|
66
|
-
// const horizontal = 'x' in uniques && uniques.x.some(isNaN)
|
|
67
|
-
|
|
68
|
-
// let summary = []
|
|
69
|
-
|
|
70
|
-
// if (horizontal && vertical) {
|
|
71
|
-
// if ((aes.stat || 'count') === 'count') {
|
|
72
|
-
// vertical = false
|
|
73
|
-
// console.warn('Assuming horizontal layout becuse stat is count')
|
|
74
|
-
// } else {
|
|
75
|
-
// console.error(
|
|
76
|
-
// 'cannot plot without at least one axis having numeric values'
|
|
77
|
-
// )
|
|
78
|
-
// return { uniques, vertical }
|
|
79
|
-
// }
|
|
80
|
-
// }
|
|
81
|
-
|
|
82
|
-
// const key = vertical ? aes.y : aes.x
|
|
83
|
-
// const value = vertical ? aes.x : aes.y
|
|
84
|
-
|
|
85
|
-
// let by = [key]
|
|
86
|
-
// if ('fill' in aes) {
|
|
87
|
-
// by.push(aes.fill)
|
|
88
|
-
// }
|
|
89
|
-
// summary = summarize(input, by, value, aes.stat)
|
|
90
|
-
// const phases = nest()
|
|
91
|
-
// .key((d) => d[key])
|
|
92
|
-
// .rollup((rows) => {
|
|
93
|
-
// return 'fill' in aes ? fillMissing(uniques.fill, rows, key, aes) : rows
|
|
94
|
-
// })
|
|
95
|
-
// .entries(summary)
|
|
96
|
-
|
|
97
|
-
// return { phases, uniques, vertical }
|
|
98
|
-
// }
|
|
99
|
-
|
|
100
|
-
// export function mirror(input, aes) {
|
|
101
|
-
// let domain = 0
|
|
102
|
-
|
|
103
|
-
// const stats = input.phases.map((phase) => {
|
|
104
|
-
// const stat = cumsum(phase.value.map((row) => row[aes.stat]))
|
|
105
|
-
// const midpoint = max(stat) / 2
|
|
106
|
-
// domain = Math.max(domain, midpoint)
|
|
107
|
-
|
|
108
|
-
// const rows = phase.value.map((row, index) => {
|
|
109
|
-
// if (input.vertical) {
|
|
110
|
-
// return {
|
|
111
|
-
// ...row,
|
|
112
|
-
// y: input.uniques.y.indexOf(row[aes.y]),
|
|
113
|
-
// x1: stat[index] - midpoint,
|
|
114
|
-
// x0: stat[index] - midpoint - row[aes.stat],
|
|
115
|
-
// }
|
|
116
|
-
// } else {
|
|
117
|
-
// return {
|
|
118
|
-
// ...row,
|
|
119
|
-
// x: input.uniques.x.indexOf(row[aes.x]),
|
|
120
|
-
// y1: stat[index] - midpoint,
|
|
121
|
-
// y0: stat[index] - midpoint - row[aes.stat],
|
|
122
|
-
// }
|
|
123
|
-
// }
|
|
124
|
-
// })
|
|
125
|
-
// phase.value = rows
|
|
126
|
-
// return phase
|
|
127
|
-
// })
|
|
128
|
-
// return { ...input, stats }
|
|
129
|
-
// }
|
|
130
|
-
|
|
131
|
-
// export function funnel(input, aes) {
|
|
132
|
-
// let data = convertToPhases(input, aes)
|
|
133
|
-
// data = mirror(data, aes)
|
|
134
|
-
// // console.log(data)
|
|
135
|
-
|
|
136
|
-
// if ('fill' in aes) {
|
|
137
|
-
// let stats = flatten(data.stats.map((phase) => phase.value))
|
|
138
|
-
// // console.log(stats)
|
|
139
|
-
// data.stats = nest()
|
|
140
|
-
// .key((d) => d[aes.fill])
|
|
141
|
-
// .rollup((rows) => [...rows, { ...rows[rows.length - 1], x: rows.length }])
|
|
142
|
-
// .entries(stats)
|
|
143
|
-
// }
|
|
144
|
-
// return data
|
|
145
|
-
// }
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { builtIn as patterns } from './pattern'
|
|
2
|
-
import { namedShapes as shapes } from './shape'
|
|
3
|
-
import { builtIn as symbols } from './shape'
|
|
4
|
-
import { colors, palette } from './color'
|
|
5
|
-
/**
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
export class ThemeBrewer {
|
|
9
|
-
constructor() {
|
|
10
|
-
this.patterns = []
|
|
11
|
-
this.shapes = []
|
|
12
|
-
this.palette = []
|
|
13
|
-
this.defaults = {}
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export const builtIn = {
|
|
18
|
-
colors,
|
|
19
|
-
palette,
|
|
20
|
-
patterns,
|
|
21
|
-
shapes,
|
|
22
|
-
symbols
|
|
23
|
-
}
|
|
@@ -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 }
|