@malloydata/render 0.0.1

package/dist/html/utils.js

@@ -0,0 +1,175 @@
+"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.createDrillIcon = exports.createNullElement = exports.createErrorElement = exports.yieldTask = exports.timeToString = exports.getColorScale = void 0;
+const malloy_1 = require("@malloydata/malloy");
+function getColorScale(type, isRectMark, hasOverlappingText = false) {
+    if (type === undefined) {
+        return undefined;
+    }
+    switch (type) {
+        case "ordinal":
+            return { range: ["#C2D5EE", "#1A73E8"] };
+        case "temporal":
+        case "quantitative":
+            return isRectMark
+                ? hasOverlappingText
+                    ? { range: ["#6BA4EE", "#EEA361"] }
+                    : { range: ["#1A73E8", "#E8710A"] }
+                : { range: ["#C2D5EE", "#1A73E8"] };
+        case "nominal":
+            return hasOverlappingText
+                ? {
+                    range: [
+                        "#6BA4EE",
+                        "#66CEDC",
+                        "#EC72B8",
+                        "#EEA361",
+                        "#F9C85B",
+                        "#AACD85",
+                        "#B87CED",
+                        "#ACB0B3",
+                    ],
+                }
+                : {
+                    range: [
+                        "#1A73E8",
+                        "#12B5CB",
+                        "#E52592",
+                        "#E8710A",
+                        "#F9AB00",
+                        "#7CB342",
+                        "#9334E6",
+                        "#80868B",
+                    ],
+                };
+    }
+}
+exports.getColorScale = getColorScale;
+function numberFixedDigits(value, digits) {
+    return value.toString().padStart(digits, "0");
+}
+function timeToString(time, timeframe) {
+    switch (timeframe) {
+        case malloy_1.TimestampTimeframe.Year:
+        case malloy_1.DateTimeframe.Year: {
+            const year = numberFixedDigits(time.getUTCFullYear(), 4);
+            return `${year}`;
+        }
+        case malloy_1.TimestampTimeframe.Quarter:
+        case malloy_1.DateTimeframe.Quarter: {
+            const year = numberFixedDigits(time.getUTCFullYear(), 4);
+            const quarter = Math.floor(time.getUTCMonth() / 3) + 1;
+            return `${year}-Q${quarter}`;
+        }
+        case malloy_1.TimestampTimeframe.Month:
+        case malloy_1.DateTimeframe.Month: {
+            const year = numberFixedDigits(time.getUTCFullYear(), 2);
+            const month = numberFixedDigits(time.getUTCMonth() + 1, 2);
+            return `${year}-${month}`;
+        }
+        case malloy_1.TimestampTimeframe.Week:
+        case malloy_1.DateTimeframe.Week: {
+            const year = numberFixedDigits(time.getUTCFullYear(), 2);
+            const month = numberFixedDigits(time.getUTCMonth() + 1, 2);
+            const day = numberFixedDigits(time.getUTCDate(), 2);
+            return `WK${year}-${month}-${day}`;
+        }
+        case malloy_1.DateTimeframe.Day:
+        case malloy_1.TimestampTimeframe.Day: {
+            const year = numberFixedDigits(time.getUTCFullYear(), 2);
+            const month = numberFixedDigits(time.getUTCMonth() + 1, 2);
+            const day = numberFixedDigits(time.getUTCDate(), 2);
+            return `${year}-${month}-${day}`;
+        }
+        case malloy_1.TimestampTimeframe.Hour: {
+            const year = numberFixedDigits(time.getUTCFullYear(), 2);
+            const month = numberFixedDigits(time.getUTCMonth() + 1, 2);
+            const day = numberFixedDigits(time.getUTCDate(), 2);
+            const hour = numberFixedDigits(time.getUTCHours(), 2);
+            return `${year}-${month}-${day} ${hour}:00 for 1 hour`;
+        }
+        case malloy_1.TimestampTimeframe.Minute: {
+            const year = numberFixedDigits(time.getUTCFullYear(), 2);
+            const month = numberFixedDigits(time.getUTCMonth() + 1, 2);
+            const day = numberFixedDigits(time.getUTCDate(), 2);
+            const hour = numberFixedDigits(time.getUTCHours(), 2);
+            const minute = numberFixedDigits(time.getUTCMinutes(), 2);
+            return `${year}-${month}-${day} ${hour}:${minute}`;
+        }
+        case malloy_1.TimestampTimeframe.Second: {
+            const year = numberFixedDigits(time.getUTCFullYear(), 2);
+            const month = numberFixedDigits(time.getUTCMonth() + 1, 2);
+            const day = numberFixedDigits(time.getUTCDate(), 2);
+            const hour = numberFixedDigits(time.getUTCHours(), 2);
+            const minute = numberFixedDigits(time.getUTCMinutes(), 2);
+            const second = numberFixedDigits(time.getUTCSeconds(), 2);
+            return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+        }
+        default:
+            throw new Error("Unknown timeframe.");
+    }
+}
+exports.timeToString = timeToString;
+/**
+ * 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.
+ */
+async function yieldTask() {
+    return new Promise((resolve) => {
+        setTimeout(resolve, 0);
+    });
+}
+exports.yieldTask = yieldTask;
+function createErrorElement(document, error) {
+    const element = document.createElement("span");
+    element.classList.add("error");
+    element.appendChild(document.createTextNode(typeof error === "string" ? error : error.message));
+    return element;
+}
+exports.createErrorElement = createErrorElement;
+function createNullElement(document) {
+    const element = document.createElement("span");
+    element.appendChild(document.createTextNode("∅"));
+    element.classList.add("value-null");
+    return element;
+}
+exports.createNullElement = createNullElement;
+function createDrillIcon(document) {
+    const drill = document.createElement("div");
+    drill.style.borderRadius = "20px";
+    drill.style.backgroundColor = "var(--malloy-border-color, #efefef)";
+    drill.style.width = "27px";
+    drill.style.height = "14px";
+    drill.style.display = "flex";
+    drill.style.justifyContent = "center";
+    drill.style.alignItems = "center";
+    drill.style.gap = "2px";
+    for (let i = 0; i < 3; i++) {
+        const dot = document.createElement("div");
+        dot.style.backgroundColor = "var(--malloy-title-color, rgb(181 181 181))";
+        dot.style.borderRadius = "5px";
+        dot.style.width = "4px";
+        dot.style.height = "4px";
+        drill.appendChild(dot);
+    }
+    return drill;
+}
+exports.createDrillIcon = createDrillIcon;
+//# sourceMappingURL=utils.js.map

package/dist/html/vega_spec.d.ts

@@ -0,0 +1,18 @@
+import * as lite from "vega-lite";
+import { DataColumn, Explore, Field } from "@malloydata/malloy";
+import { HTMLChartRenderer } from "./chart";
+import { StyleDefaults } from "../data_styles";
+declare type DataContainer = Array<unknown> | Record<string, unknown>;
+export declare const DEFAULT_SPEC: Partial<lite.TopLevelSpec>;
+export declare const vegaSpecs: Record<string, lite.TopLevelSpec>;
+export declare function isDataContainer(a: unknown): a is DataContainer;
+export declare class HTMLVegaSpecRenderer extends HTMLChartRenderer {
+    spec: lite.TopLevelSpec;
+    constructor(document: Document, styleDefaults: StyleDefaults, spec: lite.TopLevelSpec);
+    getDataValue(data: DataColumn): Date | string | number | null;
+    getDataType(field: Field): "ordinal" | "quantitative" | "nominal";
+    translateField(explore: Explore, fieldString: string): string;
+    translateFields(node: DataContainer, explore: Explore): void;
+    getVegaLiteSpec(data: DataColumn): lite.TopLevelSpec;
+}
+export {};

package/dist/html/vega_spec.js

@@ -0,0 +1,499 @@
+"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.HTMLVegaSpecRenderer = exports.isDataContainer = exports.vegaSpecs = exports.DEFAULT_SPEC = void 0;
+const chart_1 = require("./chart");
+const lodash_1 = require("lodash");
+const utils_1 = require("./utils");
+exports.DEFAULT_SPEC = {
+    $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+    config: {
+        params: [
+            {
+                name: "defaultFont",
+                value: "var(--malloy-font-family, 'Roboto')",
+            },
+            { 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,
+        },
+        text: {
+            font: { expr: "defaultFont" },
+            color: { expr: "labelColor" },
+        },
+        mark: {
+            font: { expr: "defaultFont" },
+            color: { expr: "labelColor" },
+        },
+        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,
+        },
+        legend: {
+            titleFontWeight: 500,
+            titleColor: { expr: "titleColor" },
+            titleFontSize: 12,
+            labelColor: { expr: "labelColor" },
+            labelFont: { expr: "defaultFont" },
+            titleFont: { expr: "defaultFont" },
+        },
+    },
+};
+const sizeSmall = {
+    height: 80,
+    width: 150,
+};
+const sizeSmallWidth = {
+    width: 150,
+};
+const sizeSmallHeightStep = {
+    height: { step: 13 },
+};
+const sizeSmallStep = { ...sizeSmallWidth, ...sizeSmallHeightStep };
+const sizeMediumStep = { ...sizeSmallWidth };
+const sizeMedium = {
+    height: 150,
+    width: 200,
+};
+const sizeLarge = {
+// height: 350,
+// width: 500,
+};
+// bar with text in the bars.
+const bar_SM = {
+    ...exports.DEFAULT_SPEC,
+    encoding: {
+        y: { field: "#{1}", type: "nominal", axis: null, sort: null },
+    },
+    layer: [
+        {
+            mark: { type: "bar", color: "#aec7e8" },
+            encoding: {
+                x: {
+                    field: "#{2}",
+                    type: "quantitative",
+                    sort: null,
+                },
+                color: { value: "#4285F4" },
+            },
+        },
+        {
+            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" },
+    },
+};
+const bar_SMM_large = {
+    ...bar_SM_large,
+    encoding: {
+        ...bar_SM_large.encoding,
+        color: {
+            field: "#{3}",
+            type: "quantitative",
+            scale: (0, utils_1.getColorScale)("quantitative", true, true),
+        },
+    },
+};
+const bar_SMS_large = {
+    ...bar_SM_large,
+    encoding: {
+        ...bar_SM_large.encoding,
+        color: {
+            field: "#{3}",
+            scale: (0, utils_1.getColorScale)("nominal", true, true),
+        },
+    },
+};
+const bar_SMS = {
+    ...bar_SM,
+    layer: [
+        {
+            ...bar_SM.layer[0],
+            encoding: {
+                ...bar_SM.layer[0].encoding,
+                color: {
+                    field: "#{3}",
+                    scale: (0, utils_1.getColorScale)("nominal", true, true),
+                },
+            },
+        },
+        bar_SM.layer[1],
+    ],
+};
+const bar_SMM = {
+    ...bar_SM,
+    layer: [
+        {
+            ...bar_SM.layer[0],
+            encoding: {
+                ...bar_SM.layer[0].encoding,
+                color: {
+                    field: "#{3}",
+                    type: "quantitative",
+                    scale: (0, utils_1.getColorScale)("quantitative", true, true),
+                },
+            },
+        },
+        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" },
+    },
+};
+const bar_NMS = {
+    ...bar_NM,
+    encoding: {
+        ...bar_NM.encoding,
+        color: {
+            field: "#{3}",
+            type: "nominal",
+            scale: (0, utils_1.getColorScale)("nominal", true),
+        },
+    },
+};
+const bar_NMM = {
+    ...bar_NM,
+    encoding: {
+        ...bar_NM.encoding,
+        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_large,
+    bar_SMS,
+    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_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_NMM,
+    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 },
+            },
+            layer: [
+                {
+                    mark: {
+                        type: "bar",
+                    },
+                    encoding: {
+                        x: {
+                            field: { repeat: "repeat" },
+                            type: "quantitative",
+                            sort: null,
+                        },
+                        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" },
+                    },
+                },
+            ],
+        },
+    },
+    bubble_NNM: {
+        ...exports.DEFAULT_SPEC,
+        data: [],
+        mark: "circle",
+        width: 400,
+        encoding: {
+            y: {
+                field: "#{1}",
+                type: "ordinal",
+                sort: null,
+            },
+            x: {
+                field: "#{2}",
+                type: "ordinal",
+                sort: null,
+            },
+            size: {
+                field: "#{3}",
+                type: "quantitative",
+            },
+            color: { value: "#4285F4" },
+        },
+    },
+    heat_NNM: {
+        ...exports.DEFAULT_SPEC,
+        data: [],
+        mark: "bar",
+        width: 400,
+        encoding: {
+            y: {
+                field: "#{1}",
+                type: "ordinal",
+                sort: null,
+            },
+            x: {
+                field: "#{2}",
+                type: "ordinal",
+                sort: null,
+            },
+            color: {
+                field: "#{3}",
+                type: "quantitative",
+                scale: (0, utils_1.getColorScale)("quantitative", false),
+            },
+        },
+    },
+    heat_SNM: {
+        ...exports.DEFAULT_SPEC,
+        data: [],
+        mark: "bar",
+        width: 400,
+        encoding: {
+            y: {
+                field: "#{1}",
+                type: "nominal",
+                sort: null,
+            },
+            x: {
+                field: "#{2}",
+                type: "ordinal",
+                sort: null,
+            },
+            color: {
+                field: "#{3}",
+                type: "quantitative",
+                scale: (0, utils_1.getColorScale)("quantitative", false),
+            },
+        },
+    },
+    stacked_line_STM: {
+        ...exports.DEFAULT_SPEC,
+        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,
+            },
+            color: {
+                field: "#{1}",
+                type: "nominal",
+                legend: null,
+                scale: (0, utils_1.getColorScale)("nominal", false),
+            },
+            row: {
+                field: "#{1}",
+                type: "nominal",
+            },
+        },
+    },
+    grid_line_SSTM: {
+        ...exports.DEFAULT_SPEC,
+        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,
+            },
+            color: {
+                field: "#{1}",
+                type: "nominal",
+                legend: null,
+                scale: (0, utils_1.getColorScale)("nominal", false),
+            },
+            row: {
+                field: "#{1}",
+                type: "nominal",
+            },
+            column: {
+                field: "#{2}",
+                type: "nominal",
+            },
+        },
+    },
+};
+function isDataContainer(a) {
+    return Array.isArray(a) || (a !== null && typeof a === "object");
+}
+exports.isDataContainer = isDataContainer;
+class HTMLVegaSpecRenderer extends chart_1.HTMLChartRenderer {
+    constructor(document, styleDefaults, spec) {
+        super(document, styleDefaults);
+        this.spec = spec;
+    }
+    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 vega 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 vega chart.");
+    }
+    translateField(explore, fieldString) {
+        const m = fieldString.match(/#\{(?<fieldnum>\d+)\}/);
+        if (m && m.groups) {
+            return explore.intrinsicFields[parseInt(m.groups["fieldnum"]) - 1].name;
+        }
+        return fieldString;
+    }
+    translateFields(node, explore) {
+        if (Array.isArray(node)) {
+            for (const e of node) {
+                if (isDataContainer(e)) {
+                    this.translateFields(e, explore);
+                }
+            }
+        }
+        else if (node && typeof node === "object") {
+            for (const [key, value] of Object.entries(node)) {
+                if (key === "field" && typeof value === "string") {
+                    node[key] = this.translateField(explore, value);
+                }
+                else if (key === "repeat" && Array.isArray(value)) {
+                    for (const k of value.keys()) {
+                        const fieldName = value[k];
+                        if (typeof fieldName === "string") {
+                            value[k] = this.translateField(explore, fieldName);
+                        }
+                    }
+                }
+                else {
+                    if (isDataContainer(value)) {
+                        this.translateFields(value, explore);
+                    }
+                }
+            }
+        }
+    }
+    // formatData(data: QueryDataRow, metadata: StructDef): VegaData {
+    //   const ret: VegaData = [];
+    //   for (const row of QueryDataRow) {
+    //     forEach){
+    //     }
+    //   }
+    //   return ret;
+    // }
+    getVegaLiteSpec(data) {
+        if (data.isNull() || !data.isArray()) {
+            throw new Error("Expected struct value not to be null.");
+        }
+        const newSpec = (0, lodash_1.cloneDeep)(this.spec);
+        this.translateFields(newSpec, data.field);
+        const rdata = {
+            values: this.mapData(data),
+        };
+        newSpec.data = rdata;
+        return newSpec;
+    }
+}
+exports.HTMLVegaSpecRenderer = HTMLVegaSpecRenderer;
+//# sourceMappingURL=vega_spec.js.map

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { HTMLView, JSONView } from "./html/html_view";
+export type { DataStyles } from "./data_styles";