@malloydata/render 0.0.22-dev230207182613 → 0.0.22-dev230207183024

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.
@@ -27,69 +27,69 @@ const chart_1 = require("./chart");
27
27
  const lodash_1 = require("lodash");
28
28
  const utils_1 = require("./utils");
29
29
  exports.DEFAULT_SPEC = {
30
- $schema: "https://vega.github.io/schema/vega-lite/v5.json",
31
- config: {
32
- params: [
30
+ "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
31
+ "config": {
32
+ "params": [
33
33
  {
34
- name: "defaultFont",
35
- value: "var(--malloy-font-family, 'Roboto')",
34
+ "name": "defaultFont",
35
+ "value": "var(--malloy-font-family, 'Roboto')"
36
36
  },
37
- { name: "titleColor", value: "var(--malloy-title-color, #505050)" },
38
- { name: "labelColor", value: "var(--malloy-label-color, #505050)" },
37
+ { "name": "titleColor", "value": "var(--malloy-title-color, #505050)" },
38
+ { "name": "labelColor", "value": "var(--malloy-label-color, #505050)" }
39
39
  ],
40
- background: undefined,
41
- color: { expr: "titleColor" },
42
- header: {
43
- labelFont: { expr: "defaultFont" },
44
- titleFont: { expr: "defaultFont" },
45
- titleFontWeight: 500,
40
+ "background": undefined,
41
+ "color": { "expr": "titleColor" },
42
+ "header": {
43
+ "labelFont": { "expr": "defaultFont" },
44
+ "titleFont": { "expr": "defaultFont" },
45
+ "titleFontWeight": 500
46
46
  },
47
- text: {
48
- font: { expr: "defaultFont" },
49
- color: { expr: "labelColor" },
47
+ "text": {
48
+ "font": { "expr": "defaultFont" },
49
+ "color": { "expr": "labelColor" }
50
50
  },
51
- mark: {
52
- font: { expr: "defaultFont" },
53
- color: { expr: "labelColor" },
51
+ "mark": {
52
+ "font": { "expr": "defaultFont" },
53
+ "color": { "expr": "labelColor" }
54
54
  },
55
- title: {
56
- font: { expr: "defaultFont" },
57
- subtitleFont: { expr: "defaultFont" },
58
- fontWeight: 500,
55
+ "title": {
56
+ "font": { "expr": "defaultFont" },
57
+ "subtitleFont": { "expr": "defaultFont" },
58
+ "fontWeight": 500
59
59
  },
60
- axis: {
61
- labelColor: { expr: "labelColor" },
62
- labelFont: { expr: "defaultFont" },
63
- titleFont: { expr: "defaultFont" },
64
- titleFontWeight: 500,
65
- titleColor: { expr: "titleColor" },
66
- titleFontSize: 12,
60
+ "axis": {
61
+ "labelColor": { "expr": "labelColor" },
62
+ "labelFont": { "expr": "defaultFont" },
63
+ "titleFont": { "expr": "defaultFont" },
64
+ "titleFontWeight": 500,
65
+ "titleColor": { "expr": "titleColor" },
66
+ "titleFontSize": 12
67
67
  },
68
- legend: {
69
- titleFontWeight: 500,
70
- titleColor: { expr: "titleColor" },
71
- titleFontSize: 12,
72
- labelColor: { expr: "labelColor" },
73
- labelFont: { expr: "defaultFont" },
74
- titleFont: { expr: "defaultFont" },
75
- },
76
- },
68
+ "legend": {
69
+ "titleFontWeight": 500,
70
+ "titleColor": { "expr": "titleColor" },
71
+ "titleFontSize": 12,
72
+ "labelColor": { "expr": "labelColor" },
73
+ "labelFont": { "expr": "defaultFont" },
74
+ "titleFont": { "expr": "defaultFont" }
75
+ }
76
+ }
77
77
  };
78
78
  const sizeSmall = {
79
- height: 80,
80
- width: 150,
79
+ "height": 80,
80
+ "width": 150
81
81
  };
82
82
  const sizeSmallWidth = {
83
- width: 150,
83
+ "width": 150
84
84
  };
85
85
  const sizeSmallHeightStep = {
86
- height: { step: 13 },
86
+ "height": { "step": 13 }
87
87
  };
88
88
  const sizeSmallStep = { ...sizeSmallWidth, ...sizeSmallHeightStep };
89
89
  const sizeMediumStep = { ...sizeSmallWidth };
90
90
  const sizeMedium = {
91
- height: 150,
92
- width: 200,
91
+ "height": 150,
92
+ "width": 200
93
93
  };
94
94
  const sizeLarge = {
95
95
  // height: 350,
@@ -98,321 +98,321 @@ const sizeLarge = {
98
98
  // bar with text in the bars.
99
99
  const bar_SM = {
100
100
  ...exports.DEFAULT_SPEC,
101
- encoding: {
102
- y: { field: "#{1}", type: "nominal", axis: null, sort: null },
101
+ "encoding": {
102
+ "y": { "field": "#{1}", "type": "nominal", "axis": null, "sort": null }
103
103
  },
104
- layer: [
104
+ "layer": [
105
105
  {
106
- mark: { type: "bar", color: "#aec7e8" },
107
- encoding: {
108
- x: {
109
- field: "#{2}",
110
- type: "quantitative",
111
- sort: null,
106
+ "mark": { "type": "bar", "color": "#aec7e8" },
107
+ "encoding": {
108
+ "x": {
109
+ "field": "#{2}",
110
+ "type": "quantitative",
111
+ "sort": null
112
112
  },
113
- color: { value: "#4285F4" },
114
- },
113
+ "color": { "value": "#4285F4" }
114
+ }
115
115
  },
116
116
  {
117
- mark: { type: "text", align: "left", x: 5 },
118
- encoding: {
119
- text: { field: "#{1}" },
120
- },
121
- },
122
- ],
117
+ "mark": { "type": "text", "align": "left", "x": 5 },
118
+ "encoding": {
119
+ "text": { "field": "#{1}" }
120
+ }
121
+ }
122
+ ]
123
123
  };
124
124
  const bar_SM_large = {
125
125
  ...exports.DEFAULT_SPEC,
126
- mark: "bar",
127
- data: [],
128
- encoding: {
129
- x: { field: "#{1}", type: "nominal", sort: null },
130
- y: { field: "#{2}", type: "quantitative", sort: null },
131
- color: { value: "#4285F4" },
132
- },
126
+ "mark": "bar",
127
+ "data": [],
128
+ "encoding": {
129
+ "x": { "field": "#{1}", "type": "nominal", "sort": null },
130
+ "y": { "field": "#{2}", "type": "quantitative", "sort": null },
131
+ "color": { "value": "#4285F4" }
132
+ }
133
133
  };
134
134
  const bar_SMM_large = {
135
135
  ...bar_SM_large,
136
- encoding: {
136
+ "encoding": {
137
137
  ...bar_SM_large.encoding,
138
- color: {
139
- field: "#{3}",
140
- type: "quantitative",
141
- scale: (0, utils_1.getColorScale)("quantitative", true, true),
142
- },
143
- },
138
+ "color": {
139
+ "field": "#{3}",
140
+ "type": "quantitative",
141
+ "scale": (0, utils_1.getColorScale)("quantitative", true, true)
142
+ }
143
+ }
144
144
  };
145
145
  const bar_SMS_large = {
146
146
  ...bar_SM_large,
147
- encoding: {
147
+ "encoding": {
148
148
  ...bar_SM_large.encoding,
149
- color: {
150
- field: "#{3}",
151
- scale: (0, utils_1.getColorScale)("nominal", true, true),
152
- },
153
- },
149
+ "color": {
150
+ "field": "#{3}",
151
+ "scale": (0, utils_1.getColorScale)("nominal", true, true)
152
+ }
153
+ }
154
154
  };
155
155
  const bar_SMS = {
156
156
  ...bar_SM,
157
- layer: [
157
+ "layer": [
158
158
  {
159
159
  ...bar_SM.layer[0],
160
- encoding: {
160
+ "encoding": {
161
161
  ...bar_SM.layer[0].encoding,
162
- color: {
163
- field: "#{3}",
164
- scale: (0, utils_1.getColorScale)("nominal", true, true),
165
- },
166
- },
162
+ "color": {
163
+ "field": "#{3}",
164
+ "scale": (0, utils_1.getColorScale)("nominal", true, true)
165
+ }
166
+ }
167
167
  },
168
- bar_SM.layer[1],
169
- ],
168
+ bar_SM.layer[1]
169
+ ]
170
170
  };
171
171
  const bar_SMM = {
172
172
  ...bar_SM,
173
- layer: [
173
+ "layer": [
174
174
  {
175
175
  ...bar_SM.layer[0],
176
- encoding: {
176
+ "encoding": {
177
177
  ...bar_SM.layer[0].encoding,
178
- color: {
179
- field: "#{3}",
180
- type: "quantitative",
181
- scale: (0, utils_1.getColorScale)("quantitative", true, true),
182
- },
183
- },
178
+ "color": {
179
+ "field": "#{3}",
180
+ "type": "quantitative",
181
+ "scale": (0, utils_1.getColorScale)("quantitative", true, true)
182
+ }
183
+ }
184
184
  },
185
- bar_SM.layer[1],
186
- ],
185
+ bar_SM.layer[1]
186
+ ]
187
187
  };
188
188
  // simple column chart
189
189
  const bar_NM = {
190
190
  ...exports.DEFAULT_SPEC,
191
- mark: "bar",
192
- data: [],
193
- encoding: {
194
- x: { field: "#{1}", type: "nominal", sort: null },
195
- y: { field: "#{2}", type: "quantitative", sort: null },
196
- color: { value: "#4285F4" },
197
- },
191
+ "mark": "bar",
192
+ "data": [],
193
+ "encoding": {
194
+ "x": { "field": "#{1}", "type": "nominal", "sort": null },
195
+ "y": { "field": "#{2}", "type": "quantitative", "sort": null },
196
+ "color": { "value": "#4285F4" }
197
+ }
198
198
  };
199
199
  const bar_NMS = {
200
200
  ...bar_NM,
201
- encoding: {
201
+ "encoding": {
202
202
  ...bar_NM.encoding,
203
- color: {
204
- field: "#{3}",
205
- type: "nominal",
206
- scale: (0, utils_1.getColorScale)("nominal", true),
207
- },
208
- },
203
+ "color": {
204
+ "field": "#{3}",
205
+ "type": "nominal",
206
+ "scale": (0, utils_1.getColorScale)("nominal", true)
207
+ }
208
+ }
209
209
  };
210
210
  const bar_NMM = {
211
211
  ...bar_NM,
212
- encoding: {
212
+ "encoding": {
213
213
  ...bar_NM.encoding,
214
- color: {
215
- field: "#{3}",
216
- type: "quantitative",
217
- scale: (0, utils_1.getColorScale)("quantitative", true),
218
- },
219
- },
214
+ "color": {
215
+ "field": "#{3}",
216
+ "type": "quantitative",
217
+ "scale": (0, utils_1.getColorScale)("quantitative", true)
218
+ }
219
+ }
220
220
  };
221
221
  exports.vegaSpecs = {
222
222
  bar_SM,
223
- bar_SM_small: { ...bar_SM, ...sizeSmallStep },
224
- bar_SM_medium: { ...bar_SM, ...sizeMediumStep },
223
+ "bar_SM_small": { ...bar_SM, ...sizeSmallStep },
224
+ "bar_SM_medium": { ...bar_SM, ...sizeMediumStep },
225
225
  bar_SM_large,
226
226
  bar_SMS,
227
- bar_SMS_small: { ...bar_SMS, ...sizeSmallStep },
228
- bar_SMS_medium: { ...bar_SMS, ...sizeMediumStep },
227
+ "bar_SMS_small": { ...bar_SMS, ...sizeSmallStep },
228
+ "bar_SMS_medium": { ...bar_SMS, ...sizeMediumStep },
229
229
  bar_SMS_large,
230
230
  bar_SMM,
231
- bar_SMM_small: { ...bar_SMM, ...sizeSmallStep },
232
- bar_SMM_medium: { ...bar_SMM, ...sizeMediumStep },
231
+ "bar_SMM_small": { ...bar_SMM, ...sizeSmallStep },
232
+ "bar_SMM_medium": { ...bar_SMM, ...sizeMediumStep },
233
233
  bar_SMM_large,
234
234
  bar_NM,
235
- bar_NM_small: { ...bar_NM, ...sizeSmall },
236
- bar_NM_medium: { ...bar_NM, ...sizeMedium },
237
- bar_NM_large: { ...bar_NM },
235
+ "bar_NM_small": { ...bar_NM, ...sizeSmall },
236
+ "bar_NM_medium": { ...bar_NM, ...sizeMedium },
237
+ "bar_NM_large": { ...bar_NM },
238
238
  bar_NMS,
239
- bar_NMS_small: { ...bar_NMS, ...sizeSmall },
240
- bar_NMS_medium: { ...bar_NMS, ...sizeMedium },
241
- bar_NMS_large: { ...bar_NMS, ...sizeLarge },
239
+ "bar_NMS_small": { ...bar_NMS, ...sizeSmall },
240
+ "bar_NMS_medium": { ...bar_NMS, ...sizeMedium },
241
+ "bar_NMS_large": { ...bar_NMS, ...sizeLarge },
242
242
  bar_NMM,
243
- bar_NMM_small: { ...bar_NMM, ...sizeSmall },
244
- bar_NMM_medium: { ...bar_NMM, ...sizeMedium },
245
- bar_NMM_large: { ...bar_NMM, ...sizeLarge },
246
- bar_SSMMM: {
243
+ "bar_NMM_small": { ...bar_NMM, ...sizeSmall },
244
+ "bar_NMM_medium": { ...bar_NMM, ...sizeMedium },
245
+ "bar_NMM_large": { ...bar_NMM, ...sizeLarge },
246
+ "bar_SSMMM": {
247
247
  ...exports.DEFAULT_SPEC,
248
- repeat: ["#{3}", "#{4}", "#{5}"],
249
- spec: {
250
- description: "A simple bar chart with embedded data.",
251
- encoding: {
252
- y: { field: "#{1}", type: "nominal", axis: null, sort: null },
248
+ "repeat": ["#{3}", "#{4}", "#{5}"],
249
+ "spec": {
250
+ "description": "A simple bar chart with embedded data.",
251
+ "encoding": {
252
+ "y": { "field": "#{1}", "type": "nominal", "axis": null, "sort": null }
253
253
  },
254
- layer: [
254
+ "layer": [
255
255
  {
256
- mark: {
257
- type: "bar",
256
+ "mark": {
257
+ "type": "bar"
258
258
  },
259
- encoding: {
260
- x: {
261
- field: { repeat: "repeat" },
262
- type: "quantitative",
263
- sort: null,
264
- },
265
- color: {
266
- field: "#{2}",
267
- scale: (0, utils_1.getColorScale)("nominal", true, true),
259
+ "encoding": {
260
+ "x": {
261
+ "field": { "repeat": "repeat" },
262
+ "type": "quantitative",
263
+ "sort": null
268
264
  },
269
- },
265
+ "color": {
266
+ "field": "#{2}",
267
+ "scale": (0, utils_1.getColorScale)("nominal", true, true)
268
+ }
269
+ }
270
270
  },
271
271
  {
272
- mark: { type: "text", align: "left", x: 5 },
273
- encoding: {
274
- text: { field: "#{1}" },
275
- detail: { aggregate: "count" },
276
- },
277
- },
278
- ],
279
- },
272
+ "mark": { "type": "text", "align": "left", "x": 5 },
273
+ "encoding": {
274
+ "text": { "field": "#{1}" },
275
+ "detail": { "aggregate": "count" }
276
+ }
277
+ }
278
+ ]
279
+ }
280
280
  },
281
- bubble_NNM: {
281
+ "bubble_NNM": {
282
282
  ...exports.DEFAULT_SPEC,
283
- data: [],
284
- mark: "circle",
285
- width: 400,
286
- encoding: {
287
- y: {
288
- field: "#{1}",
289
- type: "ordinal",
290
- sort: null,
283
+ "data": [],
284
+ "mark": "circle",
285
+ "width": 400,
286
+ "encoding": {
287
+ "y": {
288
+ "field": "#{1}",
289
+ "type": "ordinal",
290
+ "sort": null
291
291
  },
292
- x: {
293
- field: "#{2}",
294
- type: "ordinal",
295
- sort: null,
292
+ "x": {
293
+ "field": "#{2}",
294
+ "type": "ordinal",
295
+ "sort": null
296
296
  },
297
- size: {
298
- field: "#{3}",
299
- type: "quantitative",
297
+ "size": {
298
+ "field": "#{3}",
299
+ "type": "quantitative"
300
300
  },
301
- color: { value: "#4285F4" },
302
- },
301
+ "color": { "value": "#4285F4" }
302
+ }
303
303
  },
304
- heat_NNM: {
304
+ "heat_NNM": {
305
305
  ...exports.DEFAULT_SPEC,
306
- data: [],
307
- mark: "bar",
308
- width: 400,
309
- encoding: {
310
- y: {
311
- field: "#{1}",
312
- type: "ordinal",
313
- sort: null,
314
- },
315
- x: {
316
- field: "#{2}",
317
- type: "ordinal",
318
- sort: null,
306
+ "data": [],
307
+ "mark": "bar",
308
+ "width": 400,
309
+ "encoding": {
310
+ "y": {
311
+ "field": "#{1}",
312
+ "type": "ordinal",
313
+ "sort": null
319
314
  },
320
- color: {
321
- field: "#{3}",
322
- type: "quantitative",
323
- scale: (0, utils_1.getColorScale)("quantitative", false),
315
+ "x": {
316
+ "field": "#{2}",
317
+ "type": "ordinal",
318
+ "sort": null
324
319
  },
325
- },
320
+ "color": {
321
+ "field": "#{3}",
322
+ "type": "quantitative",
323
+ "scale": (0, utils_1.getColorScale)("quantitative", false)
324
+ }
325
+ }
326
326
  },
327
- heat_SNM: {
327
+ "heat_SNM": {
328
328
  ...exports.DEFAULT_SPEC,
329
- data: [],
330
- mark: "bar",
331
- width: 400,
332
- encoding: {
333
- y: {
334
- field: "#{1}",
335
- type: "nominal",
336
- sort: null,
329
+ "data": [],
330
+ "mark": "bar",
331
+ "width": 400,
332
+ "encoding": {
333
+ "y": {
334
+ "field": "#{1}",
335
+ "type": "nominal",
336
+ "sort": null
337
337
  },
338
- x: {
339
- field: "#{2}",
340
- type: "ordinal",
341
- sort: null,
338
+ "x": {
339
+ "field": "#{2}",
340
+ "type": "ordinal",
341
+ "sort": null
342
342
  },
343
- color: {
344
- field: "#{3}",
345
- type: "quantitative",
346
- scale: (0, utils_1.getColorScale)("quantitative", false),
347
- },
348
- },
343
+ "color": {
344
+ "field": "#{3}",
345
+ "type": "quantitative",
346
+ "scale": (0, utils_1.getColorScale)("quantitative", false)
347
+ }
348
+ }
349
349
  },
350
- stacked_line_STM: {
350
+ "stacked_line_STM": {
351
351
  ...exports.DEFAULT_SPEC,
352
- height: 50,
353
- data: [],
354
- mark: "area",
355
- encoding: {
356
- x: {
357
- field: "#{2}",
358
- type: "temporal",
359
- axis: { grid: false },
360
- sort: null,
352
+ "height": 50,
353
+ "data": [],
354
+ "mark": "area",
355
+ "encoding": {
356
+ "x": {
357
+ "field": "#{2}",
358
+ "type": "temporal",
359
+ "axis": { "grid": false },
360
+ "sort": null
361
361
  },
362
- y: {
363
- field: "#{3}",
364
- type: "quantitative",
365
- axis: { grid: false },
366
- title: null,
367
- sort: null,
362
+ "y": {
363
+ "field": "#{3}",
364
+ "type": "quantitative",
365
+ "axis": { "grid": false },
366
+ "title": null,
367
+ "sort": null
368
368
  },
369
- color: {
370
- field: "#{1}",
371
- type: "nominal",
372
- legend: null,
373
- scale: (0, utils_1.getColorScale)("nominal", false),
369
+ "color": {
370
+ "field": "#{1}",
371
+ "type": "nominal",
372
+ "legend": null,
373
+ "scale": (0, utils_1.getColorScale)("nominal", false)
374
374
  },
375
- row: {
376
- field: "#{1}",
377
- type: "nominal",
378
- },
379
- },
375
+ "row": {
376
+ "field": "#{1}",
377
+ "type": "nominal"
378
+ }
379
+ }
380
380
  },
381
- grid_line_SSTM: {
381
+ "grid_line_SSTM": {
382
382
  ...exports.DEFAULT_SPEC,
383
- height: 50,
384
- data: [],
385
- mark: "area",
386
- encoding: {
387
- x: {
388
- field: "#{3}",
389
- type: "temporal",
390
- axis: { grid: false },
391
- sort: null,
383
+ "height": 50,
384
+ "data": [],
385
+ "mark": "area",
386
+ "encoding": {
387
+ "x": {
388
+ "field": "#{3}",
389
+ "type": "temporal",
390
+ "axis": { "grid": false },
391
+ "sort": null
392
392
  },
393
- y: {
394
- field: "#{4}",
395
- type: "quantitative",
396
- axis: { grid: false },
397
- title: null,
398
- sort: null,
393
+ "y": {
394
+ "field": "#{4}",
395
+ "type": "quantitative",
396
+ "axis": { "grid": false },
397
+ "title": null,
398
+ "sort": null
399
399
  },
400
- color: {
401
- field: "#{1}",
402
- type: "nominal",
403
- legend: null,
404
- scale: (0, utils_1.getColorScale)("nominal", false),
400
+ "color": {
401
+ "field": "#{1}",
402
+ "type": "nominal",
403
+ "legend": null,
404
+ "scale": (0, utils_1.getColorScale)("nominal", false)
405
405
  },
406
- row: {
407
- field: "#{1}",
408
- type: "nominal",
406
+ "row": {
407
+ "field": "#{1}",
408
+ "type": "nominal"
409
409
  },
410
- column: {
411
- field: "#{2}",
412
- type: "nominal",
413
- },
414
- },
415
- },
410
+ "column": {
411
+ "field": "#{2}",
412
+ "type": "nominal"
413
+ }
414
+ }
415
+ }
416
416
  };
417
417
  function isDataContainer(a) {
418
418
  return Array.isArray(a) || (a !== null && typeof a === "object");
@@ -499,7 +499,7 @@ class HTMLVegaSpecRenderer extends chart_1.HTMLChartRenderer {
499
499
  const newSpec = (0, lodash_1.cloneDeep)(this.spec);
500
500
  this.translateFields(newSpec, data.field);
501
501
  const rdata = {
502
- values: this.mapData(data),
502
+ "values": this.mapData(data)
503
503
  };
504
504
  newSpec.data = rdata;
505
505
  return newSpec;