@liggi/figkit 0.1.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/GUIDE.md +96 -7
- package/README.md +3 -2
- package/bin/fig.mjs +14 -6
- package/dist/viz.iife.js +12 -12
- package/examples/charts/entities.json +17 -0
- package/examples/charts/groups.json +40 -0
- package/examples/charts/heatmap.json +231 -0
- package/examples/charts/lines.json +234 -0
- package/examples/charts/panels.json +62 -0
- package/examples/consolidate.html +10 -6
- package/package.json +1 -1
- package/runtime/fig.css +43 -5
- package/runtime/fig.js +174 -35
- package/viz/draw.js +253 -4
- package/viz/spec.js +167 -3
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"type": "entities",
|
|
3
|
+
"title": "Every order line names one product and one order",
|
|
4
|
+
"records": [
|
|
5
|
+
{ "id": "customer", "name": "Customer", "fields": ["email"] },
|
|
6
|
+
{ "id": "order", "name": "Order", "fields": ["placed at", "status"] },
|
|
7
|
+
{ "id": "line", "name": "Order line", "fields": ["quantity"], "tone": "accent" },
|
|
8
|
+
{ "id": "product", "name": "Product", "fields": ["sku", "price"] },
|
|
9
|
+
{ "id": "payment", "name": "Payment", "fields": ["amount"] }
|
|
10
|
+
],
|
|
11
|
+
"refs": [
|
|
12
|
+
{ "from": "order", "to": "customer" },
|
|
13
|
+
{ "from": "line", "to": "order" },
|
|
14
|
+
{ "from": "line", "to": "product" },
|
|
15
|
+
{ "from": "payment", "to": "order", "count": "one", "optional": true }
|
|
16
|
+
]
|
|
17
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"type": "groups",
|
|
3
|
+
"style": "report",
|
|
4
|
+
"title": "Only the new carrier got slower in December",
|
|
5
|
+
"note": "Median days from dispatch to doorstep",
|
|
6
|
+
"unit": " days",
|
|
7
|
+
"series": [
|
|
8
|
+
"Old carrier",
|
|
9
|
+
"New carrier"
|
|
10
|
+
],
|
|
11
|
+
"groups": [
|
|
12
|
+
{
|
|
13
|
+
"label": "October",
|
|
14
|
+
"values": [
|
|
15
|
+
2.1,
|
|
16
|
+
2.0
|
|
17
|
+
]
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"label": "November",
|
|
21
|
+
"values": [
|
|
22
|
+
2.2,
|
|
23
|
+
2.1
|
|
24
|
+
]
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"label": "December",
|
|
28
|
+
"values": [
|
|
29
|
+
2.4,
|
|
30
|
+
3.6
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
],
|
|
34
|
+
"accent": {
|
|
35
|
+
"series": "New carrier",
|
|
36
|
+
"group": "December",
|
|
37
|
+
"tone": "bad"
|
|
38
|
+
},
|
|
39
|
+
"source": "Invented example data"
|
|
40
|
+
}
|
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
{
|
|
2
|
+
"type": "heatmap",
|
|
3
|
+
"style": "report",
|
|
4
|
+
"title": "The help desk is busiest midweek mornings",
|
|
5
|
+
"note": "Tickets opened per hour",
|
|
6
|
+
"rows": [
|
|
7
|
+
"Mon",
|
|
8
|
+
"Tue",
|
|
9
|
+
"Wed",
|
|
10
|
+
"Thu",
|
|
11
|
+
"Fri",
|
|
12
|
+
"Sat",
|
|
13
|
+
"Sun"
|
|
14
|
+
],
|
|
15
|
+
"columns": [
|
|
16
|
+
"12am",
|
|
17
|
+
"1am",
|
|
18
|
+
"2am",
|
|
19
|
+
"3am",
|
|
20
|
+
"4am",
|
|
21
|
+
"5am",
|
|
22
|
+
"6am",
|
|
23
|
+
"7am",
|
|
24
|
+
"8am",
|
|
25
|
+
"9am",
|
|
26
|
+
"10am",
|
|
27
|
+
"11am",
|
|
28
|
+
"12pm",
|
|
29
|
+
"1pm",
|
|
30
|
+
"2pm",
|
|
31
|
+
"3pm",
|
|
32
|
+
"4pm",
|
|
33
|
+
"5pm",
|
|
34
|
+
"6pm",
|
|
35
|
+
"7pm",
|
|
36
|
+
"8pm",
|
|
37
|
+
"9pm",
|
|
38
|
+
"10pm",
|
|
39
|
+
"11pm"
|
|
40
|
+
],
|
|
41
|
+
"values": [
|
|
42
|
+
[
|
|
43
|
+
3,
|
|
44
|
+
2,
|
|
45
|
+
1,
|
|
46
|
+
1,
|
|
47
|
+
1,
|
|
48
|
+
2,
|
|
49
|
+
6,
|
|
50
|
+
14,
|
|
51
|
+
22,
|
|
52
|
+
25,
|
|
53
|
+
27,
|
|
54
|
+
28,
|
|
55
|
+
30,
|
|
56
|
+
29,
|
|
57
|
+
28,
|
|
58
|
+
27,
|
|
59
|
+
26,
|
|
60
|
+
24,
|
|
61
|
+
20,
|
|
62
|
+
16,
|
|
63
|
+
12,
|
|
64
|
+
9,
|
|
65
|
+
6,
|
|
66
|
+
4
|
|
67
|
+
],
|
|
68
|
+
[
|
|
69
|
+
3,
|
|
70
|
+
2,
|
|
71
|
+
1,
|
|
72
|
+
1,
|
|
73
|
+
1,
|
|
74
|
+
2,
|
|
75
|
+
6,
|
|
76
|
+
15,
|
|
77
|
+
23,
|
|
78
|
+
26,
|
|
79
|
+
28,
|
|
80
|
+
29,
|
|
81
|
+
32,
|
|
82
|
+
30,
|
|
83
|
+
29,
|
|
84
|
+
28,
|
|
85
|
+
27,
|
|
86
|
+
25,
|
|
87
|
+
21,
|
|
88
|
+
17,
|
|
89
|
+
13,
|
|
90
|
+
9,
|
|
91
|
+
6,
|
|
92
|
+
4
|
|
93
|
+
],
|
|
94
|
+
[
|
|
95
|
+
3,
|
|
96
|
+
2,
|
|
97
|
+
1,
|
|
98
|
+
1,
|
|
99
|
+
1,
|
|
100
|
+
2,
|
|
101
|
+
6,
|
|
102
|
+
15,
|
|
103
|
+
24,
|
|
104
|
+
27,
|
|
105
|
+
29,
|
|
106
|
+
30,
|
|
107
|
+
32,
|
|
108
|
+
31,
|
|
109
|
+
30,
|
|
110
|
+
29,
|
|
111
|
+
28,
|
|
112
|
+
26,
|
|
113
|
+
22,
|
|
114
|
+
17,
|
|
115
|
+
13,
|
|
116
|
+
10,
|
|
117
|
+
6,
|
|
118
|
+
4
|
|
119
|
+
],
|
|
120
|
+
[
|
|
121
|
+
3,
|
|
122
|
+
2,
|
|
123
|
+
1,
|
|
124
|
+
1,
|
|
125
|
+
1,
|
|
126
|
+
2,
|
|
127
|
+
6,
|
|
128
|
+
14,
|
|
129
|
+
22,
|
|
130
|
+
26,
|
|
131
|
+
28,
|
|
132
|
+
29,
|
|
133
|
+
31,
|
|
134
|
+
30,
|
|
135
|
+
29,
|
|
136
|
+
28,
|
|
137
|
+
27,
|
|
138
|
+
24,
|
|
139
|
+
20,
|
|
140
|
+
16,
|
|
141
|
+
12,
|
|
142
|
+
9,
|
|
143
|
+
6,
|
|
144
|
+
4
|
|
145
|
+
],
|
|
146
|
+
[
|
|
147
|
+
3,
|
|
148
|
+
2,
|
|
149
|
+
1,
|
|
150
|
+
1,
|
|
151
|
+
1,
|
|
152
|
+
2,
|
|
153
|
+
5,
|
|
154
|
+
13,
|
|
155
|
+
20,
|
|
156
|
+
22,
|
|
157
|
+
24,
|
|
158
|
+
25,
|
|
159
|
+
27,
|
|
160
|
+
26,
|
|
161
|
+
25,
|
|
162
|
+
24,
|
|
163
|
+
23,
|
|
164
|
+
22,
|
|
165
|
+
18,
|
|
166
|
+
14,
|
|
167
|
+
11,
|
|
168
|
+
8,
|
|
169
|
+
5,
|
|
170
|
+
4
|
|
171
|
+
],
|
|
172
|
+
[
|
|
173
|
+
2,
|
|
174
|
+
1,
|
|
175
|
+
1,
|
|
176
|
+
1,
|
|
177
|
+
1,
|
|
178
|
+
1,
|
|
179
|
+
4,
|
|
180
|
+
8,
|
|
181
|
+
13,
|
|
182
|
+
15,
|
|
183
|
+
16,
|
|
184
|
+
17,
|
|
185
|
+
18,
|
|
186
|
+
17,
|
|
187
|
+
17,
|
|
188
|
+
16,
|
|
189
|
+
16,
|
|
190
|
+
14,
|
|
191
|
+
12,
|
|
192
|
+
10,
|
|
193
|
+
7,
|
|
194
|
+
5,
|
|
195
|
+
4,
|
|
196
|
+
2
|
|
197
|
+
],
|
|
198
|
+
[
|
|
199
|
+
2,
|
|
200
|
+
1,
|
|
201
|
+
1,
|
|
202
|
+
1,
|
|
203
|
+
1,
|
|
204
|
+
1,
|
|
205
|
+
3,
|
|
206
|
+
8,
|
|
207
|
+
12,
|
|
208
|
+
14,
|
|
209
|
+
15,
|
|
210
|
+
15,
|
|
211
|
+
16,
|
|
212
|
+
16,
|
|
213
|
+
15,
|
|
214
|
+
15,
|
|
215
|
+
14,
|
|
216
|
+
13,
|
|
217
|
+
11,
|
|
218
|
+
9,
|
|
219
|
+
7,
|
|
220
|
+
5,
|
|
221
|
+
3,
|
|
222
|
+
2
|
|
223
|
+
]
|
|
224
|
+
],
|
|
225
|
+
"mark": {
|
|
226
|
+
"row": "Wed",
|
|
227
|
+
"column": "12pm",
|
|
228
|
+
"label": "Busiest: Wed noon"
|
|
229
|
+
},
|
|
230
|
+
"source": "Invented example data"
|
|
231
|
+
}
|
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
{
|
|
2
|
+
"type": "lines",
|
|
3
|
+
"style": "report",
|
|
4
|
+
"title": "Weekday orders peak at noon",
|
|
5
|
+
"note": "Orders per hour",
|
|
6
|
+
"series": [
|
|
7
|
+
{
|
|
8
|
+
"label": "Weekdays",
|
|
9
|
+
"points": [
|
|
10
|
+
{
|
|
11
|
+
"x": 0,
|
|
12
|
+
"y": 3
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"x": 1,
|
|
16
|
+
"y": 2
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"x": 2,
|
|
20
|
+
"y": 1
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"x": 3,
|
|
24
|
+
"y": 1
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"x": 4,
|
|
28
|
+
"y": 1
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"x": 5,
|
|
32
|
+
"y": 2
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"x": 6,
|
|
36
|
+
"y": 6
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"x": 7,
|
|
40
|
+
"y": 14
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"x": 8,
|
|
44
|
+
"y": 22
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"x": 9,
|
|
48
|
+
"y": 25
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"x": 10,
|
|
52
|
+
"y": 27
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"x": 11,
|
|
56
|
+
"y": 28
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"x": 12,
|
|
60
|
+
"y": 30
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"x": 13,
|
|
64
|
+
"y": 29
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"x": 14,
|
|
68
|
+
"y": 28
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"x": 15,
|
|
72
|
+
"y": 27
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"x": 16,
|
|
76
|
+
"y": 26
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"x": 17,
|
|
80
|
+
"y": 24
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"x": 18,
|
|
84
|
+
"y": 20
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"x": 19,
|
|
88
|
+
"y": 16
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"x": 20,
|
|
92
|
+
"y": 12
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"x": 21,
|
|
96
|
+
"y": 9
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"x": 22,
|
|
100
|
+
"y": 6
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"x": 23,
|
|
104
|
+
"y": 4
|
|
105
|
+
}
|
|
106
|
+
]
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"label": "Weekends",
|
|
110
|
+
"points": [
|
|
111
|
+
{
|
|
112
|
+
"x": 0,
|
|
113
|
+
"y": 4
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"x": 1,
|
|
117
|
+
"y": 3
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"x": 2,
|
|
121
|
+
"y": 2
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"x": 3,
|
|
125
|
+
"y": 1
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"x": 4,
|
|
129
|
+
"y": 1
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"x": 5,
|
|
133
|
+
"y": 1
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"x": 6,
|
|
137
|
+
"y": 2
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"x": 7,
|
|
141
|
+
"y": 4
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"x": 8,
|
|
145
|
+
"y": 8
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"x": 9,
|
|
149
|
+
"y": 13
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
"x": 10,
|
|
153
|
+
"y": 17
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"x": 11,
|
|
157
|
+
"y": 20
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
"x": 12,
|
|
161
|
+
"y": 22
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
"x": 13,
|
|
165
|
+
"y": 22
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"x": 14,
|
|
169
|
+
"y": 21
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
"x": 15,
|
|
173
|
+
"y": 20
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"x": 16,
|
|
177
|
+
"y": 19
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"x": 17,
|
|
181
|
+
"y": 18
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"x": 18,
|
|
185
|
+
"y": 17
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
"x": 19,
|
|
189
|
+
"y": 15
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"x": 20,
|
|
193
|
+
"y": 13
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"x": 21,
|
|
197
|
+
"y": 10
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
"x": 22,
|
|
201
|
+
"y": 8
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
"x": 23,
|
|
205
|
+
"y": 6
|
|
206
|
+
}
|
|
207
|
+
]
|
|
208
|
+
}
|
|
209
|
+
],
|
|
210
|
+
"accent": "Weekdays",
|
|
211
|
+
"mark": {
|
|
212
|
+
"x": 12,
|
|
213
|
+
"label": "30 at noon"
|
|
214
|
+
},
|
|
215
|
+
"xTicks": [
|
|
216
|
+
{
|
|
217
|
+
"x": 0,
|
|
218
|
+
"label": "12am"
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
"x": 6,
|
|
222
|
+
"label": "6am"
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
"x": 12,
|
|
226
|
+
"label": "12pm"
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
"x": 18,
|
|
230
|
+
"label": "6pm"
|
|
231
|
+
}
|
|
232
|
+
],
|
|
233
|
+
"source": "Invented example data"
|
|
234
|
+
}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
{
|
|
2
|
+
"type": "panels",
|
|
3
|
+
"style": "report",
|
|
4
|
+
"chart": "groups",
|
|
5
|
+
"title": "The cheaper plan answers almost as fast as the premium one",
|
|
6
|
+
"note": "Share of tickets answered within an hour",
|
|
7
|
+
"unit": "%",
|
|
8
|
+
"max": 100,
|
|
9
|
+
"series": [
|
|
10
|
+
"Basic",
|
|
11
|
+
"Standard",
|
|
12
|
+
"Premium"
|
|
13
|
+
],
|
|
14
|
+
"accent": {
|
|
15
|
+
"series": "Standard"
|
|
16
|
+
},
|
|
17
|
+
"panels": [
|
|
18
|
+
{
|
|
19
|
+
"label": "Email",
|
|
20
|
+
"groups": [
|
|
21
|
+
{
|
|
22
|
+
"label": "Weekdays",
|
|
23
|
+
"values": [
|
|
24
|
+
61,
|
|
25
|
+
84,
|
|
26
|
+
89
|
|
27
|
+
]
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"label": "Weekends",
|
|
31
|
+
"values": [
|
|
32
|
+
38,
|
|
33
|
+
70,
|
|
34
|
+
74
|
|
35
|
+
]
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"label": "Chat",
|
|
41
|
+
"groups": [
|
|
42
|
+
{
|
|
43
|
+
"label": "Weekdays",
|
|
44
|
+
"values": [
|
|
45
|
+
72,
|
|
46
|
+
91,
|
|
47
|
+
94
|
|
48
|
+
]
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"label": "Weekends",
|
|
52
|
+
"values": [
|
|
53
|
+
55,
|
|
54
|
+
83,
|
|
55
|
+
86
|
|
56
|
+
]
|
|
57
|
+
}
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
],
|
|
61
|
+
"source": "Invented example data"
|
|
62
|
+
}
|
|
@@ -4,13 +4,17 @@
|
|
|
4
4
|
<p class="read">Same behaviour at first, then changed in one place.</p>
|
|
5
5
|
</header>
|
|
6
6
|
<div class="row wide">
|
|
7
|
-
<div class="col grow"
|
|
7
|
+
<div class="col grow" style="gap: 10px">
|
|
8
8
|
<span class="lane-title">Today: five places</span>
|
|
9
|
-
<div class="node"
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
9
|
+
<div class="node grow" id="today" style="gap: 14px; padding: 26px 28px">
|
|
10
|
+
<span class="num t-muted">5 owners</span>
|
|
11
|
+
<h3>Prices <span class="tag">spreadsheet</span></h3>
|
|
12
|
+
<h3>Delivery zones <span class="tag">database</span></h3>
|
|
13
|
+
<h3>Opening hours <span class="tag">admin page</span></h3>
|
|
14
|
+
<h3>Discount rules <span class="tag">code</span></h3>
|
|
15
|
+
<h3>Email wording <span class="tag">templates</span></h3>
|
|
16
|
+
<p style="margin-top: auto">Each changed its own way</p>
|
|
17
|
+
</div>
|
|
14
18
|
</div>
|
|
15
19
|
<div class="col grow" style="gap: 10px">
|
|
16
20
|
<span class="lane-title t-accent">Proposed: one file per shop</span>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@liggi/figkit",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Explanatory figures for agents and people: write a little HTML or a chart spec, get a laid-out PNG and a list of what is wrong with it.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|