@malloydata/render 0.0.1

package/README.md

@@ -0,0 +1,7 @@
+# Malloy
+
+Malloy is an experimental language for describing data relationships and transformations. It is both a semantic modeling language and a querying language that runs queries against a relational database. Malloy currently connects to BigQuery and Postgres, and natively supports DuckDB. We've built a Visual Studio Code extension to facilitate building Malloy data models, querying and transforming data, and creating simple visualizations and dashboards.
+
+## This package
+
+This package provides a simple mechanism to render charts based on results from using the `malloydata/malloy` library. See [here](https://github.com/looker-open-source/malloy/blob/main/packages/malloy/README.md) for additional information.

package/dist/data_styles.d.ts

@@ -0,0 +1,181 @@
+import * as lite from "vega-lite";
+export declare type DataStyles = {
+    [fieldName: string]: RenderDef;
+};
+export declare type ChartSize = "small" | "medium" | "large";
+export declare type RenderDef = ({
+    renderer?: undefined;
+} & DataRenderOptions) | ({
+    renderer: "table";
+} & TableRenderOptions) | ({
+    renderer: "dashboard";
+} & DashboardRenderOptions) | ({
+    renderer: "text";
+} & TextRenderOptions) | ({
+    renderer: "currency";
+} & CurrencyRenderOptions) | ({
+    renderer: "image";
+} & ImageRenderOptions) | ({
+    renderer: "time";
+} & TimeRenderOptions) | ({
+    renderer: "json";
+} & JSONRenderOptions) | ({
+    renderer: "single_value";
+} & SingleValueRenderOptions) | ({
+    renderer: "list";
+} & ListRenderOptions) | ({
+    renderer: "list_detail";
+} & ListDetailRenderOptions) | ({
+    renderer: "cartesian_chart";
+} & CartesianChartRenderOptions) | ({
+    renderer: "bar_chart";
+} & BarChartRenderOptions) | ({
+    renderer: "scatter_chart";
+} & ScatterChartRenderOptions) | ({
+    renderer: "line_chart";
+} & LineChartRenderOptions) | ({
+    renderer: "point_map";
+} & PointMapRenderOptions) | ({
+    renderer: "segment_map";
+} & SegmentMapRenderOptions) | ({
+    renderer: "shape_map";
+} & ShapeMapRenderOptions) | ({
+    renderer: "number";
+} & NumberRenderOptions) | ({
+    renderer: "percent";
+} & PercentRenderOptions) | ({
+    renderer: "boolean";
+} & BooleanRenderOptions) | ({
+    renderer: "spark_line";
+} & SparkLineRenderOptions) | ({
+    renderer: "bytes";
+} & BytesRenderOptions) | ({
+    renderer: "link";
+} & LinkRenderOptions) | ({
+    renderer: "vega";
+} & VegaRenderOptions);
+export interface DataRenderOptions {
+    data?: {
+        color?: string;
+        label?: string;
+    };
+    sheet?: DataStyles;
+}
+export declare type StyleDefaults = {
+    size?: ChartSize;
+};
+export interface TableRenderOptions extends DataRenderOptions {
+    table?: {
+        pivot?: string | string[];
+    };
+}
+export interface DashboardRenderOptions extends DataRenderOptions {
+    dashboard?: Record<string, unknown>;
+}
+export interface TextRenderOptions extends DataRenderOptions {
+    text?: {
+        italic?: boolean;
+    };
+}
+export interface BytesRenderOptions extends TextRenderOptions {
+    bytes?: Record<string, unknown>;
+}
+export interface CurrencyRenderOptions extends TextRenderOptions {
+    currency?: {
+        unit?: "dollars" | "pounds";
+    };
+}
+export interface TimeRenderOptions extends TextRenderOptions {
+    time?: Record<string, unknown>;
+}
+export interface NumberRenderOptions extends TextRenderOptions {
+    number?: Record<string, unknown>;
+}
+export interface ImageRenderOptions extends TextRenderOptions {
+    border?: boolean;
+}
+export interface PercentRenderOptions extends TextRenderOptions {
+    percent?: Record<string, unknown>;
+}
+export interface BooleanRenderOptions extends TextRenderOptions {
+    boolean?: Record<string, unknown>;
+}
+export interface JSONRenderOptions extends DataRenderOptions {
+    json?: Record<string, unknown>;
+}
+export interface LinkRenderOptions extends DataRenderOptions {
+    link?: Record<string, unknown>;
+}
+export interface VegaRenderOptions extends DataRenderOptions {
+    spec?: lite.TopLevelSpec;
+    spec_name?: string;
+}
+export interface SingleValueRenderOptions extends DataRenderOptions {
+    single_value?: Record<string, unknown>;
+}
+export interface ListRenderOptions extends DataRenderOptions {
+    list?: {
+        separator?: string;
+        value?: string;
+    };
+}
+export interface ListDetailRenderOptions extends DataRenderOptions {
+    list?: {
+        separator?: string;
+        value?: string;
+        detail?: string;
+    };
+}
+export interface ChartRenderOptions extends DataRenderOptions {
+    size?: ChartSize;
+    chart?: {
+        color?: string;
+        shape?: string;
+    };
+}
+export interface CartesianChartRenderOptions extends ChartRenderOptions {
+    chart?: {
+        x_axis?: string;
+        y_axis?: string;
+        color?: string;
+        shape?: string;
+        spark_line?: boolean;
+    };
+}
+export interface BarChartRenderOptions {
+    size?: ChartSize;
+}
+export interface ScatterChartRenderOptions extends CartesianChartRenderOptions {
+    scatter_chart?: Record<string, unknown>;
+}
+export interface LineChartRenderOptions extends CartesianChartRenderOptions {
+    line_chart?: Record<string, unknown>;
+}
+export interface SparkLineRenderOptions extends LineChartRenderOptions {
+    spark_line?: Record<string, unknown>;
+}
+export interface PointMapRenderOptions extends ChartRenderOptions {
+    chart?: {
+        latitude?: string;
+        longitude?: string;
+        color?: string;
+        shape?: string;
+    };
+}
+export interface SegmentMapRenderOptions extends ChartRenderOptions {
+    chart?: {
+        latitude1?: string;
+        longitude1?: string;
+        latitude2?: string;
+        longitude2?: string;
+        color?: string;
+        shape?: string;
+    };
+}
+export interface ShapeMapRenderOptions extends ChartRenderOptions {
+    chart?: {
+        region?: string;
+        color?: string;
+        shape?: string;
+    };
+}

package/dist/data_styles.js

@@ -0,0 +1,15 @@
+"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 });
+//# sourceMappingURL=data_styles.js.map

package/dist/drill.d.ts

@@ -0,0 +1,10 @@
+import { DataArrayOrRecord, Explore } from "@malloydata/malloy";
+export declare function getDrillFilters(data: DataArrayOrRecord): {
+    formattedFilters: string[];
+    source: Explore | undefined;
+};
+export declare function getDrillQuery(data: DataArrayOrRecord): {
+    drillQuery: string;
+    drillFilters: string[];
+};
+export declare type DrillFunction = (drillQuery: string, target: HTMLElement, drillFilters: string[]) => void;

package/dist/drill.js

@@ -0,0 +1,103 @@
+"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.getDrillQuery = exports.getDrillFilters = void 0;
+const malloy_1 = require("@malloydata/malloy");
+const utils_1 = require("./html/utils");
+function filterQuote(s) {
+    return `'${s.replace("'", "\\'")}'`;
+}
+function timestampToDateFilter(key, value, timeframe) {
+    const adjustedTimeframe = timeframe === malloy_1.TimestampTimeframe.Minute
+        ? malloy_1.TimestampTimeframe.Second
+        : timeframe || malloy_1.TimestampTimeframe.Second;
+    const filterValue = "@" + (0, utils_1.timeToString)(value, adjustedTimeframe);
+    return { key, value: filterValue };
+}
+function getTableFilters(table) {
+    const filters = [];
+    for (const f of table.field.filters || []) {
+        if (!f.aggregate) {
+            filters.push({ key: f.code, value: undefined });
+        }
+    }
+    return filters;
+}
+function getRowFilters(row) {
+    const filters = [];
+    const dimensions = row.field.intrinsicFields.filter((field) => field.isAtomicField() && field.sourceWasDimension());
+    for (const dim of dimensions) {
+        const cell = row.cell(dim);
+        // if we have an expression, use it instead of the name of the field.
+        const key = dim.isAtomicField() || dim.isQueryField() ? dim.expression : undefined;
+        if (key && !cell.isArray()) {
+            if (cell.isNull()) {
+                filters.push({ key, value: "null" });
+            }
+            else if (cell.isString()) {
+                filters.push({ key, value: filterQuote(cell.value) });
+            }
+            else if (cell.isNumber() || cell.isBoolean()) {
+                filters.push({ key, value: cell.value.toString() });
+            }
+            else if (cell.isTimestamp() || cell.isDate()) {
+                filters.push(timestampToDateFilter(key, cell.value, cell.field.timeframe));
+            }
+        }
+    }
+    return filters;
+}
+function getFilters(data) {
+    if (data.isRecord()) {
+        return getRowFilters(data);
+    }
+    else {
+        return getTableFilters(data);
+    }
+}
+function getDrillFilters(data) {
+    const filters = [];
+    let current = data;
+    while (current.parent) {
+        filters.push(...getFilters(current));
+        current = current.parent;
+    }
+    filters.push(...getFilters(current));
+    const source = current.field.parentExplore;
+    const formattedFilters = [];
+    for (const { key, value } of filters) {
+        if (value !== undefined) {
+            formattedFilters.push(`${key}: ${value}`);
+        }
+        else {
+            formattedFilters.push(key);
+        }
+    }
+    // TODO HACK: some filters get duplicated by the language, and this
+    //      is a workaround until that is fixed
+    const dedupedFilters = formattedFilters.filter((filter, index) => formattedFilters.find((otherFilter, otherIndex) => otherFilter === filter && index < otherIndex) === undefined);
+    return { formattedFilters: dedupedFilters, source };
+}
+exports.getDrillFilters = getDrillFilters;
+function getDrillQuery(data) {
+    const { formattedFilters, source } = getDrillFilters(data);
+    let ret = `query: ${(source === null || source === void 0 ? void 0 : source.name) || '"unable to compute source"'} `;
+    if (formattedFilters.length) {
+        ret += `{ \n  where: \n    ${formattedFilters.join(",\n    ")}\n  \n}\n`;
+    }
+    const drillQuery = ret + "-> ";
+    return { drillQuery, drillFilters: formattedFilters };
+}
+exports.getDrillQuery = getDrillQuery;
+//# sourceMappingURL=drill.js.map

package/dist/html/bar_chart.d.ts

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

package/dist/html/bar_chart.js

@@ -0,0 +1,48 @@
+"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.HTMLBarChartRenderer = void 0;
+const cartesian_chart_1 = require("./cartesian_chart");
+class HTMLBarChartRenderer extends cartesian_chart_1.HTMLCartesianChartRenderer {
+    getMark() {
+        return "bar";
+    }
+    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 bar 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 bar chart.");
+        }
+    }
+}
+exports.HTMLBarChartRenderer = HTMLBarChartRenderer;
+//# sourceMappingURL=bar_chart.js.map

package/dist/html/boolean.d.ts

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

package/dist/html/boolean.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.HTMLBooleanRenderer = void 0;
+const text_1 = require("./text");
+class HTMLBooleanRenderer extends text_1.HTMLTextRenderer {
+    getText(data) {
+        if (data.isNull()) {
+            return null;
+        }
+        return `${data.boolean.value}`;
+    }
+}
+exports.HTMLBooleanRenderer = HTMLBooleanRenderer;
+//# sourceMappingURL=boolean.js.map

package/dist/html/bytes.d.ts

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

package/dist/html/bytes.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.HTMLBytesRenderer = void 0;
+const text_1 = require("./text");
+class HTMLBytesRenderer extends text_1.HTMLTextRenderer {
+    getText(data) {
+        if (data.isNull()) {
+            return null;
+        }
+        return data.bytes.value.toString("base64");
+    }
+}
+exports.HTMLBytesRenderer = HTMLBytesRenderer;
+//# sourceMappingURL=bytes.js.map

package/dist/html/cartesian_chart.d.ts

@@ -0,0 +1,7 @@
+import { DataArray } from "@malloydata/malloy";
+import * as lite from "vega-lite";
+import { HTMLChartRenderer } from "./chart";
+export declare abstract class HTMLCartesianChartRenderer extends HTMLChartRenderer {
+    abstract getMark(): "bar" | "line" | "point";
+    getVegaLiteSpec(data: DataArray): lite.TopLevelSpec;
+}

package/dist/html/cartesian_chart.js

@@ -0,0 +1,88 @@
+"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.HTMLCartesianChartRenderer = void 0;
+const chart_1 = require("./chart");
+const utils_1 = require("./utils");
+const vega_spec_1 = require("./vega_spec");
+class HTMLCartesianChartRenderer extends chart_1.HTMLChartRenderer {
+    getVegaLiteSpec(data) {
+        const fields = data.field.intrinsicFields;
+        const xField = fields[0];
+        const yField = fields[1];
+        const colorField = fields[2];
+        const sizeField = fields[3];
+        const shapeField = fields[4];
+        const xType = this.getDataType(xField);
+        const yType = this.getDataType(yField);
+        const colorType = colorField ? this.getDataType(colorField) : undefined;
+        const sizeType = sizeField ? this.getDataType(sizeField) : undefined;
+        const shapeType = shapeField ? this.getDataType(shapeField) : undefined;
+        const mark = this.getMark();
+        const colorDef = colorField !== undefined
+            ? {
+                field: colorField.name,
+                type: colorType,
+                axis: { title: colorField.name },
+                scale: (0, utils_1.getColorScale)(colorType, mark === "bar"),
+            }
+            : { value: "#4285F4" };
+        const sizeDef = sizeField
+            ? {
+                field: sizeField.name,
+                type: sizeType,
+                axis: { title: sizeField.name },
+            }
+            : undefined;
+        const shapeDef = shapeField
+            ? {
+                field: shapeField.name,
+                type: shapeType,
+                axis: { title: shapeField.name },
+            }
+            : undefined;
+        const xSort = xType === "nominal" ? null : undefined;
+        const ySort = yType === "nominal" ? null : undefined;
+        const xDef = {
+            field: xField.name,
+            type: xType,
+            sort: xSort,
+            axis: { title: xField.name },
+        };
+        const yDef = {
+            field: yField.name,
+            type: yType,
+            sort: ySort,
+            axis: { title: yField.name },
+        };
+        return {
+            ...vega_spec_1.DEFAULT_SPEC,
+            ...this.getSize(),
+            data: {
+                values: this.mapData(data),
+            },
+            mark,
+            encoding: {
+                x: xDef,
+                y: yDef,
+                size: sizeDef,
+                color: colorDef,
+                shape: shapeDef,
+            },
+            background: "transparent",
+        };
+    }
+}
+exports.HTMLCartesianChartRenderer = HTMLCartesianChartRenderer;
+//# sourceMappingURL=cartesian_chart.js.map

package/dist/html/chart.d.ts

@@ -0,0 +1,21 @@
+import * as lite from "vega-lite";
+import { DataArray, DataColumn, Field } from "@malloydata/malloy";
+import { Renderer } from "../renderer";
+import { ChartRenderOptions, StyleDefaults } from "../data_styles";
+export declare abstract class HTMLChartRenderer implements Renderer {
+    protected readonly document: Document;
+    protected styleDefaults: StyleDefaults;
+    size: string;
+    abstract getDataType(field: Field): "temporal" | "ordinal" | "quantitative" | "nominal";
+    abstract getDataValue(value: DataColumn): Date | string | number | null | undefined;
+    mapData(data: DataArray): {
+        [p: string]: string | number | Date | undefined | null;
+    }[];
+    getSize(): {
+        height: number;
+        width: number;
+    };
+    constructor(document: Document, styleDefaults: StyleDefaults, options?: ChartRenderOptions);
+    abstract getVegaLiteSpec(data: DataArray): lite.TopLevelSpec;
+    render(table: DataColumn): Promise<HTMLElement>;
+}

package/dist/html/chart.js

@@ -0,0 +1,105 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLChartRenderer = void 0;
+const lite = __importStar(require("vega-lite"));
+const vega = __importStar(require("vega"));
+class HTMLChartRenderer {
+    constructor(document, styleDefaults, options = {}) {
+        this.document = document;
+        this.styleDefaults = styleDefaults;
+        this.size = options.size || this.styleDefaults.size || "medium";
+    }
+    mapData(data) {
+        const mappedRows = [];
+        for (const row of data) {
+            const mappedRow = {};
+            for (const field of data.field.intrinsicFields) {
+                mappedRow[field.name] = this.getDataValue(row.cell(field));
+            }
+            mappedRows.push(mappedRow);
+        }
+        return mappedRows;
+    }
+    getSize() {
+        if (this.size === "large") {
+            return { height: 350, width: 500 };
+        }
+        else {
+            return { height: 175, width: 250 };
+        }
+    }
+    async render(table) {
+        if (!table.isArray()) {
+            throw new Error("Invalid type for chart renderer");
+        }
+        const spec = this.getVegaLiteSpec(table);
+        const vegaspec = lite.compile(spec, {
+            logger: {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                level(newLevel) {
+                    if (newLevel !== undefined) {
+                        return this;
+                    }
+                    return 0;
+                },
+                info() {
+                    return this;
+                },
+                error() {
+                    return this;
+                },
+                warn() {
+                    return this;
+                },
+                debug() {
+                    return this;
+                },
+            },
+        }).spec;
+        const view = new vega.View(vega.parse(vegaspec), {
+            renderer: "none",
+        });
+        view.logger().level(-1);
+        const element = this.document.createElement("div");
+        element.innerHTML = await view.toSVG();
+        return element;
+    }
+}
+exports.HTMLChartRenderer = HTMLChartRenderer;
+//# sourceMappingURL=chart.js.map