@malloydata/render 0.0.24-dev230224214106 → 0.0.24-dev230301165401

package/dist/html/vega_spec.js

@@ -30,69 +30,69 @@ const chart_1 = require("./chart");
 const cloneDeep_1 = __importDefault(require("lodash/cloneDeep"));
 const utils_1 = require("./utils");
 exports.DEFAULT_SPEC = {
-    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-    "config": {
-        "params": [
+    $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+    config: {
+        params: [
             {
-                "name": "defaultFont",
-                "value": "var(--malloy-font-family, 'Roboto')"
+                name: 'defaultFont',
+                value: "var(--malloy-font-family, 'Roboto')",
             },
-            { "name": "titleColor", "value": "var(--malloy-title-color, #505050)" },
-            { "name": "labelColor", "value": "var(--malloy-label-color, #505050)" }
+            { name: 'titleColor', value: 'var(--malloy-title-color, #505050)' },
+            { name: 'labelColor', value: 'var(--malloy-label-color, #505050)' },
         ],
-        "background": undefined,
-        "color": { "expr": "titleColor" },
-        "header": {
-            "labelFont": { "expr": "defaultFont" },
-            "titleFont": { "expr": "defaultFont" },
-            "titleFontWeight": 500
+        background: undefined,
+        color: { expr: 'titleColor' },
+        header: {
+            labelFont: { expr: 'defaultFont' },
+            titleFont: { expr: 'defaultFont' },
+            titleFontWeight: 500,
         },
-        "text": {
-            "font": { "expr": "defaultFont" },
-            "color": { "expr": "labelColor" }
+        text: {
+            font: { expr: 'defaultFont' },
+            color: { expr: 'labelColor' },
         },
-        "mark": {
-            "font": { "expr": "defaultFont" },
-            "color": { "expr": "labelColor" }
+        mark: {
+            font: { expr: 'defaultFont' },
+            color: { expr: 'labelColor' },
         },
-        "title": {
-            "font": { "expr": "defaultFont" },
-            "subtitleFont": { "expr": "defaultFont" },
-            "fontWeight": 500
+        title: {
+            font: { expr: 'defaultFont' },
+            subtitleFont: { expr: 'defaultFont' },
+            fontWeight: 500,
         },
-        "axis": {
-            "labelColor": { "expr": "labelColor" },
-            "labelFont": { "expr": "defaultFont" },
-            "titleFont": { "expr": "defaultFont" },
-            "titleFontWeight": 500,
-            "titleColor": { "expr": "titleColor" },
-            "titleFontSize": 12
+        axis: {
+            labelColor: { expr: 'labelColor' },
+            labelFont: { expr: 'defaultFont' },
+            titleFont: { expr: 'defaultFont' },
+            titleFontWeight: 500,
+            titleColor: { expr: 'titleColor' },
+            titleFontSize: 12,
         },
-        "legend": {
-            "titleFontWeight": 500,
-            "titleColor": { "expr": "titleColor" },
-            "titleFontSize": 12,
-            "labelColor": { "expr": "labelColor" },
-            "labelFont": { "expr": "defaultFont" },
-            "titleFont": { "expr": "defaultFont" }
-        }
-    }
+        legend: {
+            titleFontWeight: 500,
+            titleColor: { expr: 'titleColor' },
+            titleFontSize: 12,
+            labelColor: { expr: 'labelColor' },
+            labelFont: { expr: 'defaultFont' },
+            titleFont: { expr: 'defaultFont' },
+        },
+    },
 };
 const sizeSmall = {
-    "height": 80,
-    "width": 150
+    height: 80,
+    width: 150,
 };
 const sizeSmallWidth = {
-    "width": 150
+    width: 150,
 };
 const sizeSmallHeightStep = {
-    "height": { "step": 13 }
+    height: { step: 13 },
 };
 const sizeSmallStep = { ...sizeSmallWidth, ...sizeSmallHeightStep };
 const sizeMediumStep = { ...sizeSmallWidth };
 const sizeMedium = {
-    "height": 150,
-    "width": 200
+    height: 150,
+    width: 200,
 };
 const sizeLarge = {
 // height: 350,
@@ -101,324 +101,324 @@ const sizeLarge = {
 // bar with text in the bars.
 const bar_SM = {
     ...exports.DEFAULT_SPEC,
-    "encoding": {
-        "y": { "field": "#{1}", "type": "nominal", "axis": null, "sort": null }
+    encoding: {
+        y: { field: '#{1}', type: 'nominal', axis: null, sort: null },
     },
-    "layer": [
+    layer: [
         {
-            "mark": { "type": "bar", "color": "#aec7e8" },
-            "encoding": {
-                "x": {
-                    "field": "#{2}",
-                    "type": "quantitative",
-                    "sort": null
+            mark: { type: 'bar', color: '#aec7e8' },
+            encoding: {
+                x: {
+                    field: '#{2}',
+                    type: 'quantitative',
+                    sort: null,
                 },
-                "color": { "value": "#4285F4" }
-            }
+                color: { value: '#4285F4' },
+            },
         },
         {
-            "mark": { "type": "text", "align": "left", "x": 5 },
-            "encoding": {
-                "text": { "field": "#{1}" }
-            }
-        }
-    ]
+            mark: { type: 'text', align: 'left', x: 5 },
+            encoding: {
+                text: { field: '#{1}' },
+            },
+        },
+    ],
 };
 const bar_SM_large = {
     ...exports.DEFAULT_SPEC,
-    "mark": "bar",
-    "data": [],
-    "encoding": {
-        "x": { "field": "#{1}", "type": "nominal", "sort": null },
-        "y": { "field": "#{2}", "type": "quantitative", "sort": null },
-        "color": { "value": "#4285F4" }
-    }
+    mark: 'bar',
+    data: [],
+    encoding: {
+        x: { field: '#{1}', type: 'nominal', sort: null },
+        y: { field: '#{2}', type: 'quantitative', sort: null },
+        color: { value: '#4285F4' },
+    },
 };
 const bar_SMM_large = {
     ...bar_SM_large,
-    "encoding": {
+    encoding: {
         ...bar_SM_large.encoding,
-        "color": {
-            "field": "#{3}",
-            "type": "quantitative",
-            "scale": (0, utils_1.getColorScale)("quantitative", true, true)
-        }
-    }
+        color: {
+            field: '#{3}',
+            type: 'quantitative',
+            scale: (0, utils_1.getColorScale)('quantitative', true, true),
+        },
+    },
 };
 const bar_SMS_large = {
     ...bar_SM_large,
-    "encoding": {
+    encoding: {
         ...bar_SM_large.encoding,
-        "color": {
-            "field": "#{3}",
-            "scale": (0, utils_1.getColorScale)("nominal", true, true)
-        }
-    }
+        color: {
+            field: '#{3}',
+            scale: (0, utils_1.getColorScale)('nominal', true, true),
+        },
+    },
 };
 const bar_SMS = {
     ...bar_SM,
-    "layer": [
+    layer: [
         {
             ...bar_SM.layer[0],
-            "encoding": {
+            encoding: {
                 ...bar_SM.layer[0].encoding,
-                "color": {
-                    "field": "#{3}",
-                    "scale": (0, utils_1.getColorScale)("nominal", true, true)
-                }
-            }
+                color: {
+                    field: '#{3}',
+                    scale: (0, utils_1.getColorScale)('nominal', true, true),
+                },
+            },
         },
-        bar_SM.layer[1]
-    ]
+        bar_SM.layer[1],
+    ],
 };
 const bar_SMM = {
     ...bar_SM,
-    "layer": [
+    layer: [
         {
             ...bar_SM.layer[0],
-            "encoding": {
+            encoding: {
                 ...bar_SM.layer[0].encoding,
-                "color": {
-                    "field": "#{3}",
-                    "type": "quantitative",
-                    "scale": (0, utils_1.getColorScale)("quantitative", true, true)
-                }
-            }
+                color: {
+                    field: '#{3}',
+                    type: 'quantitative',
+                    scale: (0, utils_1.getColorScale)('quantitative', true, true),
+                },
+            },
         },
-        bar_SM.layer[1]
-    ]
+        bar_SM.layer[1],
+    ],
 };
 // simple column chart
 const bar_NM = {
     ...exports.DEFAULT_SPEC,
-    "mark": "bar",
-    "data": [],
-    "encoding": {
-        "x": { "field": "#{1}", "type": "nominal", "sort": null },
-        "y": { "field": "#{2}", "type": "quantitative", "sort": null },
-        "color": { "value": "#4285F4" }
-    }
+    mark: 'bar',
+    data: [],
+    encoding: {
+        x: { field: '#{1}', type: 'nominal', sort: null },
+        y: { field: '#{2}', type: 'quantitative', sort: null },
+        color: { value: '#4285F4' },
+    },
 };
 const bar_NMS = {
     ...bar_NM,
-    "encoding": {
+    encoding: {
         ...bar_NM.encoding,
-        "color": {
-            "field": "#{3}",
-            "type": "nominal",
-            "scale": (0, utils_1.getColorScale)("nominal", true)
-        }
-    }
+        color: {
+            field: '#{3}',
+            type: 'nominal',
+            scale: (0, utils_1.getColorScale)('nominal', true),
+        },
+    },
 };
 const bar_NMM = {
     ...bar_NM,
-    "encoding": {
+    encoding: {
         ...bar_NM.encoding,
-        "color": {
-            "field": "#{3}",
-            "type": "quantitative",
-            "scale": (0, utils_1.getColorScale)("quantitative", true)
-        }
-    }
+        color: {
+            field: '#{3}',
+            type: 'quantitative',
+            scale: (0, utils_1.getColorScale)('quantitative', true),
+        },
+    },
 };
 exports.vegaSpecs = {
     bar_SM,
-    "bar_SM_small": { ...bar_SM, ...sizeSmallStep },
-    "bar_SM_medium": { ...bar_SM, ...sizeMediumStep },
+    bar_SM_small: { ...bar_SM, ...sizeSmallStep },
+    bar_SM_medium: { ...bar_SM, ...sizeMediumStep },
     bar_SM_large,
     bar_SMS,
-    "bar_SMS_small": { ...bar_SMS, ...sizeSmallStep },
-    "bar_SMS_medium": { ...bar_SMS, ...sizeMediumStep },
+    bar_SMS_small: { ...bar_SMS, ...sizeSmallStep },
+    bar_SMS_medium: { ...bar_SMS, ...sizeMediumStep },
     bar_SMS_large,
     bar_SMM,
-    "bar_SMM_small": { ...bar_SMM, ...sizeSmallStep },
-    "bar_SMM_medium": { ...bar_SMM, ...sizeMediumStep },
+    bar_SMM_small: { ...bar_SMM, ...sizeSmallStep },
+    bar_SMM_medium: { ...bar_SMM, ...sizeMediumStep },
     bar_SMM_large,
     bar_NM,
-    "bar_NM_small": { ...bar_NM, ...sizeSmall },
-    "bar_NM_medium": { ...bar_NM, ...sizeMedium },
-    "bar_NM_large": { ...bar_NM },
+    bar_NM_small: { ...bar_NM, ...sizeSmall },
+    bar_NM_medium: { ...bar_NM, ...sizeMedium },
+    bar_NM_large: { ...bar_NM },
     bar_NMS,
-    "bar_NMS_small": { ...bar_NMS, ...sizeSmall },
-    "bar_NMS_medium": { ...bar_NMS, ...sizeMedium },
-    "bar_NMS_large": { ...bar_NMS, ...sizeLarge },
+    bar_NMS_small: { ...bar_NMS, ...sizeSmall },
+    bar_NMS_medium: { ...bar_NMS, ...sizeMedium },
+    bar_NMS_large: { ...bar_NMS, ...sizeLarge },
     bar_NMM,
-    "bar_NMM_small": { ...bar_NMM, ...sizeSmall },
-    "bar_NMM_medium": { ...bar_NMM, ...sizeMedium },
-    "bar_NMM_large": { ...bar_NMM, ...sizeLarge },
-    "bar_SSMMM": {
+    bar_NMM_small: { ...bar_NMM, ...sizeSmall },
+    bar_NMM_medium: { ...bar_NMM, ...sizeMedium },
+    bar_NMM_large: { ...bar_NMM, ...sizeLarge },
+    bar_SSMMM: {
         ...exports.DEFAULT_SPEC,
-        "repeat": ["#{3}", "#{4}", "#{5}"],
-        "spec": {
-            "description": "A simple bar chart with embedded data.",
-            "encoding": {
-                "y": { "field": "#{1}", "type": "nominal", "axis": null, "sort": null }
+        repeat: ['#{3}', '#{4}', '#{5}'],
+        spec: {
+            description: 'A simple bar chart with embedded data.',
+            encoding: {
+                y: { field: '#{1}', type: 'nominal', axis: null, sort: null },
             },
-            "layer": [
+            layer: [
                 {
-                    "mark": {
-                        "type": "bar"
+                    mark: {
+                        type: 'bar',
                     },
-                    "encoding": {
-                        "x": {
-                            "field": { "repeat": "repeat" },
-                            "type": "quantitative",
-                            "sort": null
+                    encoding: {
+                        x: {
+                            field: { repeat: 'repeat' },
+                            type: 'quantitative',
+                            sort: null,
                         },
-                        "color": {
-                            "field": "#{2}",
-                            "scale": (0, utils_1.getColorScale)("nominal", true, true)
-                        }
-                    }
+                        color: {
+                            field: '#{2}',
+                            scale: (0, utils_1.getColorScale)('nominal', true, true),
+                        },
+                    },
                 },
                 {
-                    "mark": { "type": "text", "align": "left", "x": 5 },
-                    "encoding": {
-                        "text": { "field": "#{1}" },
-                        "detail": { "aggregate": "count" }
-                    }
-                }
-            ]
-        }
+                    mark: { type: 'text', align: 'left', x: 5 },
+                    encoding: {
+                        text: { field: '#{1}' },
+                        detail: { aggregate: 'count' },
+                    },
+                },
+            ],
+        },
     },
-    "bubble_NNM": {
+    bubble_NNM: {
         ...exports.DEFAULT_SPEC,
-        "data": [],
-        "mark": "circle",
-        "width": 400,
-        "encoding": {
-            "y": {
-                "field": "#{1}",
-                "type": "ordinal",
-                "sort": null
+        data: [],
+        mark: 'circle',
+        width: 400,
+        encoding: {
+            y: {
+                field: '#{1}',
+                type: 'ordinal',
+                sort: null,
             },
-            "x": {
-                "field": "#{2}",
-                "type": "ordinal",
-                "sort": null
+            x: {
+                field: '#{2}',
+                type: 'ordinal',
+                sort: null,
             },
-            "size": {
-                "field": "#{3}",
-                "type": "quantitative"
+            size: {
+                field: '#{3}',
+                type: 'quantitative',
             },
-            "color": { "value": "#4285F4" }
-        }
+            color: { value: '#4285F4' },
+        },
     },
-    "heat_NNM": {
+    heat_NNM: {
         ...exports.DEFAULT_SPEC,
-        "data": [],
-        "mark": "bar",
-        "width": 400,
-        "encoding": {
-            "y": {
-                "field": "#{1}",
-                "type": "ordinal",
-                "sort": null
+        data: [],
+        mark: 'bar',
+        width: 400,
+        encoding: {
+            y: {
+                field: '#{1}',
+                type: 'ordinal',
+                sort: null,
             },
-            "x": {
-                "field": "#{2}",
-                "type": "ordinal",
-                "sort": null
+            x: {
+                field: '#{2}',
+                type: 'ordinal',
+                sort: null,
             },
-            "color": {
-                "field": "#{3}",
-                "type": "quantitative",
-                "scale": (0, utils_1.getColorScale)("quantitative", false)
-            }
-        }
+            color: {
+                field: '#{3}',
+                type: 'quantitative',
+                scale: (0, utils_1.getColorScale)('quantitative', false),
+            },
+        },
     },
-    "heat_SNM": {
+    heat_SNM: {
         ...exports.DEFAULT_SPEC,
-        "data": [],
-        "mark": "bar",
-        "width": 400,
-        "encoding": {
-            "y": {
-                "field": "#{1}",
-                "type": "nominal",
-                "sort": null
+        data: [],
+        mark: 'bar',
+        width: 400,
+        encoding: {
+            y: {
+                field: '#{1}',
+                type: 'nominal',
+                sort: null,
             },
-            "x": {
-                "field": "#{2}",
-                "type": "ordinal",
-                "sort": null
+            x: {
+                field: '#{2}',
+                type: 'ordinal',
+                sort: null,
             },
-            "color": {
-                "field": "#{3}",
-                "type": "quantitative",
-                "scale": (0, utils_1.getColorScale)("quantitative", false)
-            }
-        }
+            color: {
+                field: '#{3}',
+                type: 'quantitative',
+                scale: (0, utils_1.getColorScale)('quantitative', false),
+            },
+        },
     },
-    "stacked_line_STM": {
+    stacked_line_STM: {
         ...exports.DEFAULT_SPEC,
-        "height": 50,
-        "data": [],
-        "mark": "area",
-        "encoding": {
-            "x": {
-                "field": "#{2}",
-                "type": "temporal",
-                "axis": { "grid": false },
-                "sort": null
+        height: 50,
+        data: [],
+        mark: 'area',
+        encoding: {
+            x: {
+                field: '#{2}',
+                type: 'temporal',
+                axis: { grid: false },
+                sort: null,
             },
-            "y": {
-                "field": "#{3}",
-                "type": "quantitative",
-                "axis": { "grid": false },
-                "title": null,
-                "sort": null
+            y: {
+                field: '#{3}',
+                type: 'quantitative',
+                axis: { grid: false },
+                title: null,
+                sort: null,
             },
-            "color": {
-                "field": "#{1}",
-                "type": "nominal",
-                "legend": null,
-                "scale": (0, utils_1.getColorScale)("nominal", false)
+            color: {
+                field: '#{1}',
+                type: 'nominal',
+                legend: null,
+                scale: (0, utils_1.getColorScale)('nominal', false),
             },
-            "row": {
-                "field": "#{1}",
-                "type": "nominal"
-            }
-        }
+            row: {
+                field: '#{1}',
+                type: 'nominal',
+            },
+        },
     },
-    "grid_line_SSTM": {
+    grid_line_SSTM: {
         ...exports.DEFAULT_SPEC,
-        "height": 50,
-        "data": [],
-        "mark": "area",
-        "encoding": {
-            "x": {
-                "field": "#{3}",
-                "type": "temporal",
-                "axis": { "grid": false },
-                "sort": null
+        height: 50,
+        data: [],
+        mark: 'area',
+        encoding: {
+            x: {
+                field: '#{3}',
+                type: 'temporal',
+                axis: { grid: false },
+                sort: null,
             },
-            "y": {
-                "field": "#{4}",
-                "type": "quantitative",
-                "axis": { "grid": false },
-                "title": null,
-                "sort": null
+            y: {
+                field: '#{4}',
+                type: 'quantitative',
+                axis: { grid: false },
+                title: null,
+                sort: null,
             },
-            "color": {
-                "field": "#{1}",
-                "type": "nominal",
-                "legend": null,
-                "scale": (0, utils_1.getColorScale)("nominal", false)
+            color: {
+                field: '#{1}',
+                type: 'nominal',
+                legend: null,
+                scale: (0, utils_1.getColorScale)('nominal', false),
             },
-            "row": {
-                "field": "#{1}",
-                "type": "nominal"
+            row: {
+                field: '#{1}',
+                type: 'nominal',
             },
-            "column": {
-                "field": "#{2}",
-                "type": "nominal"
-            }
-        }
-    }
+            column: {
+                field: '#{2}',
+                type: 'nominal',
+            },
+        },
+    },
 };
 function isDataContainer(a) {
-    return Array.isArray(a) || (a !== null && typeof a === "object");
+    return Array.isArray(a) || (a !== null && typeof a === 'object');
 }
 exports.isDataContainer = isDataContainer;
 class HTMLVegaSpecRenderer extends chart_1.HTMLChartRenderer {
@@ -437,19 +437,19 @@ class HTMLVegaSpecRenderer extends chart_1.HTMLChartRenderer {
             return data.value;
         }
         else {
-            throw new Error("Invalid field type for vega chart.");
+            throw new Error('Invalid field type for vega chart.');
         }
     }
     getDataType(field) {
         if (field.isAtomicField()) {
             if (field.isDate() || field.isTimestamp() || field.isString()) {
-                return "nominal";
+                return 'nominal';
             }
             else if (field.isNumber()) {
-                return "quantitative";
+                return 'quantitative';
             }
         }
-        throw new Error("Invalid field type for vega chart.");
+        throw new Error('Invalid field type for vega chart.');
     }
     translateField(explore, fieldString) {
         const m = fieldString.match(/#\{(\d+)\}/);
@@ -466,15 +466,15 @@ class HTMLVegaSpecRenderer extends chart_1.HTMLChartRenderer {
                 }
             }
         }
-        else if (node && typeof node === "object") {
+        else if (node && typeof node === 'object') {
             for (const [key, value] of Object.entries(node)) {
-                if (key === "field" && typeof value === "string") {
+                if (key === 'field' && typeof value === 'string') {
                     node[key] = this.translateField(explore, value);
                 }
-                else if (key === "repeat" && Array.isArray(value)) {
+                else if (key === 'repeat' && Array.isArray(value)) {
                     for (const k of value.keys()) {
                         const fieldName = value[k];
-                        if (typeof fieldName === "string") {
+                        if (typeof fieldName === 'string') {
                             value[k] = this.translateField(explore, fieldName);
                         }
                     }
@@ -497,12 +497,12 @@ class HTMLVegaSpecRenderer extends chart_1.HTMLChartRenderer {
     // }
     getVegaLiteSpec(data) {
         if (data.isNull() || !data.isArray()) {
-            throw new Error("Expected struct value not to be null.");
+            throw new Error('Expected struct value not to be null.');
         }
         const newSpec = (0, cloneDeep_1.default)(this.spec);
         this.translateFields(newSpec, data.field);
         const rdata = {
-            "values": this.mapData(data)
+            values: this.mapData(data),
         };
         newSpec.data = rdata;
         return newSpec;