@malloydata/render 0.0.1

package/dist/html/segment_map.js

@@ -0,0 +1,128 @@
+"use strict";
+/*
+ * Copyright 2021 Google LLC
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * version 2 as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLSegmentMapRenderer = void 0;
+const states_10m_json_1 = __importDefault(require("us-atlas/states-10m.json"));
+const chart_1 = require("./chart");
+const utils_1 = require("./utils");
+class HTMLSegmentMapRenderer extends chart_1.HTMLChartRenderer {
+    getDataValue(data) {
+        if (data.isNull() || data.isNumber() || data.isString()) {
+            return data.value;
+        }
+        throw new Error("Invalid field type for segment map.");
+    }
+    getDataType(field) {
+        if (field.isAtomicField()) {
+            if (field.isString()) {
+                return "nominal";
+            }
+            else if (field.isNumber()) {
+                return "quantitative";
+            }
+            // TODO dates nominal?
+        }
+        throw new Error("Invalid field type for segment map.");
+    }
+    getVegaLiteSpec(data) {
+        if (data.isNull()) {
+            throw new Error("Expected struct value not to be null.");
+        }
+        const fields = data.field.intrinsicFields;
+        const lat1Field = fields[0];
+        const lon1Field = fields[1];
+        const lat2Field = fields[2];
+        const lon2Field = fields[3];
+        const colorField = fields[4];
+        const colorType = colorField ? this.getDataType(colorField) : undefined;
+        const colorDef = colorField !== undefined
+            ? {
+                field: colorField.name,
+                type: colorType,
+                axis: { title: colorField.name },
+                scale: (0, utils_1.getColorScale)(colorType, false),
+            }
+            : undefined;
+        return {
+            ...this.getSize(),
+            data: {
+                values: this.mapData(data),
+            },
+            projection: {
+                type: "albersUsa",
+            },
+            layer: [
+                {
+                    data: {
+                        values: states_10m_json_1.default,
+                        format: {
+                            type: "topojson",
+                            feature: "states",
+                        },
+                    },
+                    mark: {
+                        type: "geoshape",
+                        fill: "lightgray",
+                        stroke: "white",
+                    },
+                },
+                {
+                    mark: "line",
+                    encoding: {
+                        latitude: { field: lat1Field.name, type: "quantitative" },
+                        longitude: { field: lon1Field.name, type: "quantitative" },
+                        latitude2: { field: lat2Field.name, type: "quantitative" },
+                        longitude2: { field: lon2Field.name, type: "quantitative" },
+                        color: colorDef,
+                    },
+                },
+            ],
+            background: "transparent",
+            config: {
+                axis: {
+                    labelFont: "var(--malloy-font-family, Roboto)",
+                    titleFont: "var(--malloy-font-family, Roboto)",
+                    titleFontWeight: 500,
+                    titleColor: "var(--malloy-title-color, #505050)",
+                    labelColor: "var(--malloy-label-color, #000000)",
+                    titleFontSize: 12,
+                },
+                legend: {
+                    labelFont: "var(--malloy-font-family, Roboto)",
+                    titleFont: "var(--malloy-font-family, Roboto)",
+                    titleFontWeight: 500,
+                    titleColor: "var(--malloy-title-color, #505050)",
+                    labelColor: "var(--malloy-label-color, #000000)",
+                    titleFontSize: 12,
+                },
+                header: {
+                    labelFont: "var(--malloy-font-family, Roboto)",
+                    titleFont: "var(--malloy-font-family, Roboto)",
+                    titleFontWeight: 500,
+                },
+                mark: { font: "var(--malloy-font-family, Roboto)" },
+                title: {
+                    font: "var(--malloy-font-family, Roboto)",
+                    subtitleFont: "var(--malloy-font-family, Roboto)",
+                    fontWeight: 500,
+                },
+            },
+        };
+    }
+}
+exports.HTMLSegmentMapRenderer = HTMLSegmentMapRenderer;
+//# sourceMappingURL=segment_map.js.map

package/dist/html/shape_map.d.ts

@@ -0,0 +1,10 @@
+import * as lite from "vega-lite";
+import { DataColumn, Field } from "@malloydata/malloy";
+import { HTMLChartRenderer } from "./chart";
+export declare class HTMLShapeMapRenderer extends HTMLChartRenderer {
+    private getRegionField;
+    private getColorField;
+    getDataValue(data: DataColumn): string | number | undefined;
+    getDataType(field: Field): "ordinal" | "quantitative" | "nominal";
+    getVegaLiteSpec(data: DataColumn): lite.TopLevelSpec;
+}

package/dist/html/shape_map.js

@@ -0,0 +1,171 @@
+"use strict";
+/*
+ * Copyright 2021 Google LLC
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * version 2 as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLShapeMapRenderer = void 0;
+const states_10m_json_1 = __importDefault(require("us-atlas/states-10m.json"));
+const chart_1 = require("./chart");
+const state_codes_1 = require("./state_codes");
+const utils_1 = require("./utils");
+class HTMLShapeMapRenderer extends chart_1.HTMLChartRenderer {
+    getRegionField(explore) {
+        return explore.intrinsicFields[0];
+    }
+    getColorField(explore) {
+        return explore.intrinsicFields[1];
+    }
+    getDataValue(data) {
+        if (data.isNumber()) {
+            return data.value;
+        }
+        else if (data.isString()) {
+            if (data.field === this.getRegionField(data.field.parentExplore)) {
+                const id = state_codes_1.STATE_CODES[data.value];
+                if (id === undefined) {
+                    return undefined;
+                }
+                return id;
+            }
+            else {
+                return data.value;
+            }
+        }
+        else if (data.isNull()) {
+            // ignore nulls
+            return undefined;
+        }
+        else {
+            throw new Error("Invalid field type for shape map.");
+        }
+    }
+    getDataType(field) {
+        if (field.isAtomicField()) {
+            if (field.isDate() || field.isTimestamp()) {
+                return "nominal";
+            }
+            else if (field.isString()) {
+                if (field === this.getRegionField(field.parentExplore)) {
+                    return "quantitative";
+                }
+                else {
+                    return "nominal";
+                }
+            }
+            else if (field.isNumber()) {
+                return "quantitative";
+            }
+        }
+        throw new Error("Invalid field type for shape map.");
+    }
+    getVegaLiteSpec(data) {
+        if (data.isNull()) {
+            throw new Error("Expected struct value not to be null.");
+        }
+        if (!data.isArray()) {
+            throw new Error("Invalid data for shape map");
+        }
+        const regionField = this.getRegionField(data.field);
+        const colorField = this.getColorField(data.field);
+        const colorType = colorField ? this.getDataType(colorField) : undefined;
+        const colorDef = colorField !== undefined
+            ? {
+                field: colorField.name,
+                type: colorType,
+                axis: { title: colorField.name },
+                scale: (0, utils_1.getColorScale)(colorType, false),
+            }
+            : undefined;
+        const mapped = this.mapData(data).filter((row) => row[regionField.name] !== undefined);
+        return {
+            ...this.getSize(),
+            data: { values: mapped },
+            projection: {
+                type: "albersUsa",
+            },
+            layer: [
+                {
+                    data: {
+                        values: states_10m_json_1.default,
+                        format: {
+                            type: "topojson",
+                            feature: "states",
+                        },
+                    },
+                    mark: {
+                        type: "geoshape",
+                        fill: "#efefef",
+                        stroke: "white",
+                    },
+                },
+                {
+                    transform: [
+                        {
+                            lookup: regionField.name,
+                            from: {
+                                data: {
+                                    values: states_10m_json_1.default,
+                                    format: {
+                                        type: "topojson",
+                                        feature: "states",
+                                    },
+                                },
+                                key: "id",
+                            },
+                            as: "geo",
+                        },
+                    ],
+                    mark: "geoshape",
+                    encoding: {
+                        shape: { field: "geo", type: "geojson" },
+                        color: colorDef,
+                    },
+                },
+            ],
+            background: "transparent",
+            config: {
+                axis: {
+                    labelFont: "var(--malloy-font-family, Roboto)",
+                    titleFont: "var(--malloy-font-family, Roboto)",
+                    titleFontWeight: 500,
+                    titleColor: "var(--malloy-title-color, #505050)",
+                    labelColor: "var(--malloy-label-color, #000000)",
+                    titleFontSize: 12,
+                },
+                legend: {
+                    labelFont: "var(--malloy-font-family, Roboto)",
+                    titleFont: "var(--malloy-font-family, Roboto)",
+                    titleFontWeight: 500,
+                    titleColor: "var(--malloy-title-color, #505050)",
+                    labelColor: "var(--malloy-label-color, #000000)",
+                    titleFontSize: 12,
+                },
+                header: {
+                    labelFont: "var(--malloy-font-family, Roboto)",
+                    titleFont: "var(--malloy-font-family, Roboto)",
+                    titleFontWeight: 500,
+                },
+                mark: { font: "var(--malloy-font-family, Roboto)" },
+                title: {
+                    font: "var(--malloy-font-family, Roboto)",
+                    subtitleFont: "var(--malloy-font-family, Roboto)",
+                    fontWeight: 500,
+                },
+            },
+        };
+    }
+}
+exports.HTMLShapeMapRenderer = HTMLShapeMapRenderer;
+//# sourceMappingURL=shape_map.js.map

package/dist/html/state_codes.d.ts

@@ -0,0 +1,3 @@
+export declare const STATE_CODES: {
+    [code: string]: string;
+};

package/dist/html/state_codes.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STATE_CODES = void 0;
+/*
+ * Copyright 2021 Google LLC
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * version 2 as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ */
+// force a branch
+exports.STATE_CODES = {
+    AL: "01",
+    Alabama: "01",
+    AK: "02",
+    Alaska: "02",
+    AZ: "04",
+    Arizona: "04",
+    AR: "05",
+    Arkansas: "05",
+    CA: "06",
+    California: "06",
+    CO: "08",
+    Colorado: "08",
+    CT: "09",
+    Connecticut: "09",
+    DE: "10",
+    Delaware: "10",
+    DC: "11",
+    "District of Columbia": "11",
+    FL: "12",
+    Florida: "12",
+    GA: "13",
+    Georgia: "13",
+    HI: "15",
+    Hawaii: "12",
+    ID: "16",
+    Idaho: "16",
+    IL: "17",
+    Illinois: "17",
+    IN: "18",
+    Indiana: "18",
+    IA: "19",
+    Iowa: "19",
+    KS: "20",
+    Kansas: "20",
+    KY: "21",
+    Kentucky: "21",
+    LA: "22",
+    Louisiana: "22",
+    ME: "23",
+    Maine: "23",
+    MD: "24",
+    Maryland: "24",
+    MA: "25",
+    Massachusetts: "25",
+    MI: "26",
+    Michigan: "26",
+    MN: "27",
+    Minnesota: "27",
+    MS: "28",
+    Mississippi: "28",
+    MO: "29",
+    Missouri: "29",
+    MT: "30",
+    Montana: "30",
+    NE: "31",
+    Nebraska: "31",
+    NV: "32",
+    Nevada: "32",
+    NH: "33",
+    "New Hampshire": "33",
+    NJ: "34",
+    "New Jersey": "34",
+    NM: "35",
+    "New Mexico": "35",
+    NY: "36",
+    "New York": "36",
+    NC: "37",
+    "North Carolina": "37",
+    ND: "38",
+    "North Dakota": "38",
+    OH: "39",
+    Ohio: "39",
+    OK: "40",
+    Oklahoma: "40",
+    OR: "41",
+    Oregon: "41",
+    PA: "42",
+    Pennsylvania: "42",
+    RI: "44",
+    "Rhode Island": "44",
+    SC: "45",
+    "South Carolina": "45",
+    SD: "46",
+    "South Dakota": "46",
+    TN: "47",
+    Tennessee: "47",
+    TX: "48",
+    Texas: "48",
+    UT: "49",
+    Utah: "49",
+    VT: "50",
+    Vermont: "50",
+    VA: "51",
+    Virginia: "51",
+    WA: "53",
+    Washington: "53",
+    WV: "54",
+    "West Virginia": "54",
+    WI: "55",
+    Wisconsin: "55",
+    WY: "56",
+    Wyoming: "56",
+    PR: "72",
+    "Puerto Rico": "72",
+    VI: "78",
+    AS: "60",
+    MP: "69",
+    GU: "66",
+};
+//# sourceMappingURL=state_codes.js.map

package/dist/html/table.d.ts

@@ -0,0 +1,7 @@
+import { DataColumn } from "@malloydata/malloy";
+import { StyleDefaults } from "../data_styles";
+import { ContainerRenderer } from "./container";
+export declare class HTMLTableRenderer extends ContainerRenderer {
+    protected childrenStyleDefaults: StyleDefaults;
+    render(table: DataColumn): Promise<HTMLElement>;
+}

package/dist/html/table.js

@@ -0,0 +1,111 @@
+"use strict";
+/*
+ * Copyright 2021 Google LLC
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * version 2 as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLTableRenderer = void 0;
+const drill_1 = require("../drill");
+const container_1 = require("./container");
+const number_1 = require("./number");
+const utils_1 = require("./utils");
+class HTMLTableRenderer extends container_1.ContainerRenderer {
+    constructor() {
+        super(...arguments);
+        this.childrenStyleDefaults = {
+            size: "medium",
+        };
+    }
+    async render(table) {
+        if (!table.isArray() && !table.isRecord()) {
+            throw new Error("Invalid type for Table Renderer");
+        }
+        const header = this.document.createElement("tr");
+        table.field.intrinsicFields.forEach((field) => {
+            const name = field.name;
+            const childRenderer = this.childRenderers[name];
+            const isNumeric = childRenderer instanceof number_1.HTMLNumberRenderer;
+            const headerCell = this.document.createElement("th");
+            headerCell.style.cssText = `
+        padding: 8px;
+        color: var(--malloy-title-color, #505050);
+        border-bottom: 1px solid var(--malloy-border-color, #eaeaea);
+        text-align: ${isNumeric ? "right" : "left"};
+      `;
+            headerCell.innerHTML = name.replace(/_/g, "_​");
+            header.appendChild(headerCell);
+        });
+        if (this.options.isDrillingEnabled) {
+            const drillHeader = this.document.createElement("th");
+            drillHeader.style.cssText = `
+        padding: 8px;
+        color: var(--malloy-title-color, #505050);
+        border-bottom: 1px solid var(--malloy-border-color, #eaeaea);
+        width: 25px;
+      `;
+            header.appendChild(drillHeader);
+        }
+        const tableBody = this.document.createElement("tbody");
+        for (const row of table) {
+            const rowElement = this.document.createElement("tr");
+            for (const field of table.field.intrinsicFields) {
+                const childRenderer = this.childRenderers[field.name];
+                const isNumeric = childRenderer instanceof number_1.HTMLNumberRenderer;
+                await (0, utils_1.yieldTask)();
+                const rendered = await childRenderer.render(row.cell(field));
+                const cellElement = this.document.createElement("td");
+                cellElement.style.cssText = `
+          padding: ${childRenderer instanceof HTMLTableRenderer ? "0" : "8px"};
+          vertical-align: top;
+          border-bottom: 1px solid var(--malloy-border-color, #eaeaea);
+          ${isNumeric ? "text-align: right;" : ""}
+        `;
+                cellElement.appendChild(rendered);
+                rowElement.appendChild(cellElement);
+            }
+            if (this.options.isDrillingEnabled) {
+                const drillCell = this.document.createElement("td");
+                const drillIcon = (0, utils_1.createDrillIcon)(this.document);
+                drillCell.appendChild(drillIcon);
+                drillCell.style.cssText = `
+          padding: 8px;
+          vertical-align: top;
+          border-bottom: 1px solid var(--malloy-border-color, #eaeaea);
+          width: 25px;
+          cursor: pointer
+        `;
+                drillCell.onclick = () => {
+                    if (this.options.onDrill) {
+                        const { drillQuery, drillFilters } = (0, drill_1.getDrillQuery)(row);
+                        this.options.onDrill(drillQuery, drillIcon, drillFilters);
+                    }
+                };
+                rowElement.appendChild(drillCell);
+            }
+            tableBody.appendChild(rowElement);
+        }
+        const tableElement = this.document.createElement("table");
+        tableElement.style.cssText = `
+      border: 1px solid var(--malloy-border-color, #eaeaea);
+      vertical-align: top;
+      border-bottom: 1px solid var(--malloy-border-color, #eaeaea);
+      border-collapse: collapse;
+      width: 100%;
+    `;
+        const tableHead = this.document.createElement("thead");
+        tableHead.appendChild(header);
+        tableElement.appendChild(tableHead);
+        tableElement.appendChild(tableBody);
+        return tableElement;
+    }
+}
+exports.HTMLTableRenderer = HTMLTableRenderer;
+//# sourceMappingURL=table.js.map

package/dist/html/text.d.ts

@@ -0,0 +1,8 @@
+import { DataColumn } from "@malloydata/malloy";
+import { Renderer } from "../renderer";
+export declare class HTMLTextRenderer implements Renderer {
+    private readonly document;
+    constructor(document: Document);
+    getText(data: DataColumn): string | null;
+    render(data: DataColumn): Promise<HTMLElement>;
+}

package/dist/html/text.js

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * Copyright 2021 Google LLC
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * version 2 as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLTextRenderer = void 0;
+const utils_1 = require("./utils");
+class HTMLTextRenderer {
+    constructor(document) {
+        this.document = document;
+    }
+    getText(data) {
+        return `${data.value}`;
+    }
+    async render(data) {
+        const text = this.getText(data);
+        if (text === null) {
+            return (0, utils_1.createNullElement)(this.document);
+        }
+        const element = this.document.createElement("span");
+        element.appendChild(this.document.createTextNode(text));
+        return element;
+    }
+}
+exports.HTMLTextRenderer = HTMLTextRenderer;
+//# sourceMappingURL=text.js.map

package/dist/html/utils.d.ts

@@ -0,0 +1,18 @@
+import { DateTimeframe, TimestampTimeframe } from "@malloydata/malloy";
+export declare function getColorScale(type: "temporal" | "ordinal" | "quantitative" | "nominal" | undefined, isRectMark: boolean, hasOverlappingText?: boolean): {
+    range: string[];
+} | undefined;
+export declare function timeToString(time: Date, timeframe: DateTimeframe | TimestampTimeframe): string;
+/**
+ * Use this function to break up expensive computation over multiple tasks.
+ *
+ * @returns A promise, which when awaited, puts subsequent code in a separate task.
+ *
+ * This is useful for cases when expensive code needs to run "concurrently" with a
+ * rendering / UI task. Sprinkling in `yieldTask`s into a long task allows other
+ * tasks to run periodically.
+ */
+export declare function yieldTask(): Promise<void>;
+export declare function createErrorElement(document: Document, error: string | Error): HTMLElement;
+export declare function createNullElement(document: Document): HTMLElement;
+export declare function createDrillIcon(document: Document): HTMLElement;