@malloydata/render 0.0.1

package/dist/html/index.js

@@ -0,0 +1,18 @@
+"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.HTMLView = void 0;
+var html_view_1 = require("./html_view");
+Object.defineProperty(exports, "HTMLView", { enumerable: true, get: function () { return html_view_1.HTMLView; } });
+//# sourceMappingURL=index.js.map

package/dist/html/json.d.ts

@@ -0,0 +1,7 @@
+import { DataColumn } from "@malloydata/malloy";
+import { Renderer } from "../renderer";
+export declare class HTMLJSONRenderer implements Renderer {
+    private readonly document;
+    constructor(document: Document);
+    render(table: DataColumn): Promise<HTMLElement>;
+}

package/dist/html/json.js

@@ -0,0 +1,31 @@
+"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.HTMLJSONRenderer = void 0;
+const utils_1 = require("./utils");
+class HTMLJSONRenderer {
+    constructor(document) {
+        this.document = document;
+    }
+    async render(table) {
+        if (!table.isArray() && !table.isRecord()) {
+            (0, utils_1.createErrorElement)(this.document, "Invalid data for chart renderer.");
+        }
+        const element = this.document.createElement("pre");
+        element.appendChild(this.document.createTextNode(JSON.stringify(table.value, undefined, 2)));
+        return element;
+    }
+}
+exports.HTMLJSONRenderer = HTMLJSONRenderer;
+//# sourceMappingURL=json.js.map

package/dist/html/line_chart.d.ts

@@ -0,0 +1,7 @@
+import { DataColumn, Field } from "@malloydata/malloy";
+import { HTMLCartesianChartRenderer } from "./cartesian_chart";
+export declare class HTMLLineChartRenderer extends HTMLCartesianChartRenderer {
+    getMark(): "line";
+    getDataType(field: Field): "temporal" | "ordinal" | "quantitative" | "nominal";
+    getDataValue(data: DataColumn): Date | string | number | null;
+}

package/dist/html/line_chart.js

@@ -0,0 +1,51 @@
+"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.HTMLLineChartRenderer = void 0;
+const cartesian_chart_1 = require("./cartesian_chart");
+class HTMLLineChartRenderer extends cartesian_chart_1.HTMLCartesianChartRenderer {
+    getMark() {
+        return "line";
+    }
+    getDataType(field) {
+        if (field.isAtomicField()) {
+            if (field.isDate() || field.isTimestamp()) {
+                return "temporal";
+            }
+            else if (field.isString()) {
+                return "nominal";
+            }
+            else if (field.isNumber()) {
+                return "quantitative";
+            }
+        }
+        throw new Error("Invalid field type for line chart.");
+    }
+    getDataValue(data) {
+        if (data.isNull()) {
+            return null;
+        }
+        else if (data.isTimestamp() ||
+            data.isDate() ||
+            data.isNumber() ||
+            data.isString()) {
+            return data.value;
+        }
+        else {
+            throw new Error("Invalid field type for line chart.");
+        }
+    }
+}
+exports.HTMLLineChartRenderer = HTMLLineChartRenderer;
+//# sourceMappingURL=line_chart.js.map

package/dist/html/link.d.ts

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

package/dist/html/link.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.HTMLLinkRenderer = void 0;
+const utils_1 = require("./utils");
+class HTMLLinkRenderer {
+    constructor(document) {
+        this.document = document;
+    }
+    async render(data) {
+        if (data.isNull()) {
+            return (0, utils_1.createNullElement)(this.document);
+        }
+        if (!data.isString()) {
+            return (0, utils_1.createErrorElement)(this.document, "Invalid type for link renderer.");
+        }
+        const element = document.createElement("a");
+        element.href = data.value;
+        element.appendChild(this.document.createTextNode(data.value.replace(/\//g, "/\u200C")));
+        return element;
+    }
+}
+exports.HTMLLinkRenderer = HTMLLinkRenderer;
+//# sourceMappingURL=link.js.map

package/dist/html/list.d.ts

@@ -0,0 +1,9 @@
+import { DataColumn, Field, Explore } from "@malloydata/malloy";
+import { StyleDefaults } from "../data_styles";
+import { ContainerRenderer } from "./container";
+export declare class HTMLListRenderer extends ContainerRenderer {
+    protected childrenStyleDefaults: StyleDefaults;
+    getValueField(struct: Explore): Field;
+    getDetailField(_struct: Explore): Field | undefined;
+    render(table: DataColumn): Promise<HTMLElement>;
+}

package/dist/html/list.js

@@ -0,0 +1,63 @@
+"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.HTMLListRenderer = void 0;
+const container_1 = require("./container");
+const utils_1 = require("./utils");
+class HTMLListRenderer extends container_1.ContainerRenderer {
+    constructor() {
+        super(...arguments);
+        this.childrenStyleDefaults = {
+            size: "small",
+        };
+    }
+    getValueField(struct) {
+        return struct.intrinsicFields[0];
+    }
+    getDetailField(_struct) {
+        return undefined;
+    }
+    async render(table) {
+        if (!table.isArray()) {
+            return (0, utils_1.createErrorElement)(this.document, "Invalid data for chart renderer.");
+        }
+        if (table.rowCount === 0) {
+            return this.document.createElement("span");
+        }
+        const valueField = this.getValueField(table.field);
+        const detailField = this.getDetailField(table.field);
+        const element = this.document.createElement("span");
+        let isFirst = true;
+        for (const row of table) {
+            if (!isFirst) {
+                element.appendChild(this.document.createTextNode(", "));
+            }
+            isFirst = false;
+            const childRenderer = this.childRenderers[valueField.name];
+            const rendered = await childRenderer.render(row.cell(valueField));
+            element.appendChild(rendered);
+            if (detailField) {
+                const childRenderer = this.childRenderers[detailField.name];
+                await (0, utils_1.yieldTask)();
+                const rendered = await childRenderer.render(row.cell(detailField));
+                element.appendChild(this.document.createTextNode("("));
+                element.appendChild(rendered);
+                element.appendChild(this.document.createTextNode(")"));
+            }
+        }
+        return element;
+    }
+}
+exports.HTMLListRenderer = HTMLListRenderer;
+//# sourceMappingURL=list.js.map

package/dist/html/list_detail.d.ts

@@ -0,0 +1,5 @@
+import { Explore, Field } from "@malloydata/malloy";
+import { HTMLListRenderer } from "./list";
+export declare class HTMLListDetailRenderer extends HTMLListRenderer {
+    getDetailField(explore: Explore): Field | undefined;
+}

package/dist/html/list_detail.js

@@ -0,0 +1,23 @@
+"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.HTMLListDetailRenderer = void 0;
+const list_1 = require("./list");
+class HTMLListDetailRenderer extends list_1.HTMLListRenderer {
+    getDetailField(explore) {
+        return explore.intrinsicFields[1];
+    }
+}
+exports.HTMLListDetailRenderer = HTMLListDetailRenderer;
+//# sourceMappingURL=list_detail.js.map

package/dist/html/number.d.ts

@@ -0,0 +1,6 @@
+import { DataColumn } from "@malloydata/malloy";
+import { HTMLTextRenderer } from "./text";
+export declare class HTMLNumberRenderer extends HTMLTextRenderer {
+    getNumber(data: DataColumn): number | null;
+    getText(data: DataColumn): string | null;
+}

package/dist/html/number.js

@@ -0,0 +1,30 @@
+"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.HTMLNumberRenderer = void 0;
+const text_1 = require("./text");
+class HTMLNumberRenderer extends text_1.HTMLTextRenderer {
+    getNumber(data) {
+        if (data.isNull()) {
+            return null;
+        }
+        return data.number.value;
+    }
+    getText(data) {
+        const num = this.getNumber(data);
+        return num === null ? num : num.toLocaleString();
+    }
+}
+exports.HTMLNumberRenderer = HTMLNumberRenderer;
+//# sourceMappingURL=number.js.map

package/dist/html/percent.d.ts

@@ -0,0 +1,5 @@
+import { DataColumn } from "@malloydata/malloy";
+import { HTMLNumberRenderer } from "./number";
+export declare class HTMLPercentRenderer extends HTMLNumberRenderer {
+    getText(data: DataColumn): string | null;
+}

package/dist/html/percent.js

@@ -0,0 +1,26 @@
+"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.HTMLPercentRenderer = void 0;
+const number_1 = require("./number");
+class HTMLPercentRenderer extends number_1.HTMLNumberRenderer {
+    getText(data) {
+        const num = this.getNumber(data);
+        return num === null
+            ? num
+            : (num * 100).toLocaleString("en", { maximumFractionDigits: 2 }) + "%";
+    }
+}
+exports.HTMLPercentRenderer = HTMLPercentRenderer;
+//# sourceMappingURL=percent.js.map

package/dist/html/point_map.d.ts

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

package/dist/html/point_map.js

@@ -0,0 +1,147 @@
+"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.HTMLPointMapRenderer = void 0;
+const malloy_1 = require("@malloydata/malloy");
+const states_10m_json_1 = __importDefault(require("us-atlas/states-10m.json"));
+const chart_1 = require("./chart");
+const utils_1 = require("./utils");
+class HTMLPointMapRenderer extends chart_1.HTMLChartRenderer {
+    getDataValue(data) {
+        if (data.isNumber() || data.isString()) {
+            return data.value;
+        }
+        else if (data.isTimestamp() || data.isDate()) {
+            return (0, utils_1.timeToString)(data.value, data.field.timeframe || malloy_1.TimestampTimeframe.Second);
+        }
+        throw new Error("Invalid field type for point map chart.");
+    }
+    getDataType(field) {
+        if (field.isAtomicField()) {
+            if (field.isDate() || field.isTimestamp() || field.isString()) {
+                return "nominal";
+            }
+            else if (field.isNumber()) {
+                return "quantitative";
+            }
+        }
+        throw new Error("Invalid field type for point map.");
+    }
+    getVegaLiteSpec(data) {
+        if (data.isNull()) {
+            throw new Error("Expected struct value not to be null.");
+        }
+        const fields = data.field.intrinsicFields;
+        const latField = fields[0];
+        const lonField = fields[1];
+        const colorField = fields[2];
+        const sizeField = fields[3];
+        const shapeField = fields[4];
+        const colorType = colorField ? this.getDataType(colorField) : undefined;
+        const sizeType = sizeField ? this.getDataType(sizeField) : undefined;
+        const shapeType = shapeField ? this.getDataType(shapeField) : undefined;
+        const colorDef = colorField !== undefined
+            ? {
+                field: colorField.name,
+                type: colorType,
+                axis: { title: colorField.name },
+                scale: (0, utils_1.getColorScale)(colorType, false),
+            }
+            : undefined;
+        const sizeDef = sizeField
+            ? {
+                field: sizeField.name,
+                type: sizeType,
+                axis: { title: sizeField.name },
+            }
+            : { value: 5 };
+        const shapeDef = shapeField
+            ? {
+                field: shapeField.name,
+                type: shapeType,
+                axis: { title: shapeField.name },
+            }
+            : { value: "circle" };
+        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: "#efefef",
+                        stroke: "white",
+                    },
+                },
+                {
+                    mark: "point",
+                    encoding: {
+                        latitude: { field: latField.name, type: "quantitative" },
+                        longitude: { field: lonField.name, type: "quantitative" },
+                        size: sizeDef,
+                        color: colorDef,
+                        shape: shapeDef,
+                    },
+                },
+            ],
+            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-Roboto" },
+                title: {
+                    font: "var(--malloy-font-family, Roboto)",
+                    subtitleFont: "var(--malloy-font-family, Roboto)",
+                    fontWeight: 500,
+                },
+            },
+        };
+    }
+}
+exports.HTMLPointMapRenderer = HTMLPointMapRenderer;
+//# sourceMappingURL=point_map.js.map

package/dist/html/scatter_chart.d.ts

@@ -0,0 +1,7 @@
+import { DataColumn, Field } from "@malloydata/malloy";
+import { HTMLCartesianChartRenderer } from "./cartesian_chart";
+export declare class HTMLScatterChartRenderer extends HTMLCartesianChartRenderer {
+    getMark(): "point";
+    getDataType(field: Field): "temporal" | "ordinal" | "quantitative" | "nominal";
+    getDataValue(data: DataColumn): Date | string | number | null;
+}

package/dist/html/scatter_chart.js

@@ -0,0 +1,51 @@
+"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.HTMLScatterChartRenderer = void 0;
+const cartesian_chart_1 = require("./cartesian_chart");
+class HTMLScatterChartRenderer extends cartesian_chart_1.HTMLCartesianChartRenderer {
+    getMark() {
+        return "point";
+    }
+    getDataType(field) {
+        if (field.isAtomicField()) {
+            if (field.isDate() || field.isTimestamp()) {
+                return "temporal";
+            }
+            else if (field.isString()) {
+                return "nominal";
+            }
+            else if (field.isNumber()) {
+                return "quantitative";
+            }
+        }
+        throw new Error("Invalid field type for scatter chart.");
+    }
+    getDataValue(data) {
+        if (data.isNull()) {
+            return null;
+        }
+        else if (data.isTimestamp() ||
+            data.isDate() ||
+            data.isNumber() ||
+            data.isString()) {
+            return data.value;
+        }
+        else {
+            throw new Error("Invalid field type for scatter chart.");
+        }
+    }
+}
+exports.HTMLScatterChartRenderer = HTMLScatterChartRenderer;
+//# sourceMappingURL=scatter_chart.js.map

package/dist/html/segment_map.d.ts

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