@malloydata/render 0.0.116-dev240104000530 → 0.0.116-dev240104225124

package/dist/component/bar-chart.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+import './vega-chart';
+import { DataArray } from '@malloydata/malloy';
+import { RenderResultMetadata } from './render-result-metadata';
+export declare class BarChart extends LitElement {
+    data: DataArray;
+    metadata: RenderResultMetadata;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/component/bar-chart.js

@@ -0,0 +1,130 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarChart = void 0;
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files
+ * (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge,
+ * publish, distribute, sublicense, and/or sell copies of the Software,
+ * and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+require("./vega-chart");
+const context_1 = require("@lit/context");
+const result_context_1 = require("./result-context");
+const chart_settings_1 = require("./chart-settings");
+const vega_lite_base_spec_1 = require("./vega-lite-base-spec");
+const util_1 = require("./util");
+let BarChart = class BarChart extends lit_1.LitElement {
+    render() {
+        const field = this.data.field;
+        const keys = field.allFields;
+        const { tag } = field.tagParse();
+        const isSpark = tag.text('size') === 'spark';
+        const chartSettings = (0, chart_settings_1.getChartSettings)(field, this.metadata);
+        const records = [];
+        for (const rec of this.data) {
+            const record = {};
+            const xValue = rec.cell(chartSettings.xField.name).value;
+            const yValue = rec.cell(chartSettings.yField.name).value;
+            if ((0, util_1.valueIsString)(chartSettings.xField, xValue)) {
+                record.barDim = xValue;
+            }
+            if ((0, util_1.valueIsNumber)(chartSettings.yField, yValue)) {
+                record.sizeMeasure = yValue;
+            }
+            records.push(record);
+        }
+        const spec = (0, vega_lite_base_spec_1.baseSpec)();
+        spec.data = {
+            values: records,
+        };
+        spec.layer = [
+            {
+                mark: {
+                    type: 'bar',
+                    width: { 'band': 0.8 },
+                    cornerRadiusEnd: 0,
+                },
+                encoding: {
+                    x: {
+                        field: 'barDim',
+                        type: 'nominal',
+                        sort: null, // Uses the sort order of underlying data
+                        axis: {
+                            labelAngle: chartSettings.xAxis.labelAngle,
+                            maxExtent: chartSettings.xAxis.height,
+                            labelLimit: chartSettings.xAxis.labelSize,
+                            title: keys[0].name,
+                        },
+                        scale: {},
+                    },
+                    y: {
+                        field: 'sizeMeasure',
+                        type: 'quantitative',
+                        scale: {
+                            domain: chartSettings.yScale.domain,
+                        },
+                        axis: {
+                            maxExtent: chartSettings.yAxis.width,
+                            labelLimit: chartSettings.yAxis.width + 10,
+                            tickCount: chartSettings.yAxis.tickCount,
+                            title: keys[1].name,
+                        },
+                    },
+                    // TODO: fill color from theme
+                    fill: { value: '#53B2C8' },
+                },
+            },
+        ];
+        if (isSpark) {
+            spec.padding = 0;
+            spec.layer[0].encoding.y.axis = null;
+        }
+        else {
+            spec.padding = chartSettings.padding;
+        }
+        return (0, lit_1.html) `<div style="">
+      <malloy-vega-chart
+        .spec="${spec}"
+        type="vega-lite"
+        width="${chartSettings.plotWidth}"
+        height="${chartSettings.plotHeight}"
+      ></malloy-vega-chart>
+    </div>`;
+    }
+};
+exports.BarChart = BarChart;
+__decorate([
+    (0, decorators_js_1.property)({ attribute: false })
+], BarChart.prototype, "data", void 0);
+__decorate([
+    (0, context_1.consume)({ context: result_context_1.resultContext }),
+    (0, decorators_js_1.property)({ attribute: false })
+], BarChart.prototype, "metadata", void 0);
+exports.BarChart = BarChart = __decorate([
+    (0, decorators_js_1.customElement)('malloy-bar-chart')
+], BarChart);
+//# sourceMappingURL=bar-chart.js.map

package/dist/component/chart-settings.d.ts

@@ -0,0 +1,30 @@
+import { ExploreField, Field } from '@malloydata/malloy';
+import { RenderResultMetadata } from './render-result-metadata';
+export type ChartSettings = {
+    plotWidth: number;
+    plotHeight: number;
+    xAxis: {
+        labelAngle: number;
+        labelSize: number;
+        height: number;
+        titleSize: number;
+    };
+    yAxis: {
+        width: number;
+        tickCount?: number;
+    };
+    yScale: {
+        domain: number[];
+    };
+    xField: Field;
+    yField: Field;
+    padding: {
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+    };
+    totalWidth: number;
+    totalHeight: number;
+};
+export declare function getChartSettings(field: ExploreField, metadata: RenderResultMetadata): ChartSettings;

package/dist/component/chart-settings.js

@@ -0,0 +1,152 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files
+ * (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge,
+ * publish, distribute, sublicense, and/or sell copies of the Software,
+ * and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getChartSettings = void 0;
+const vega_1 = require("vega");
+const util_1 = require("./util");
+// Later should depend on chart type?
+const CHART_SIZES = {
+    'spark': [180, 1], // row height
+    'xs': [170, 2], // 2x row height
+    'sm': [216, 3], // 3x row height
+    'md': [256, 4], // 4x row height
+    'lg': [472, 7], // 7x row height
+    'xl': [508, 10], // 10x row height
+    '2xl': [730, 14], // 14x row height
+};
+// TODO: read from theme CSS
+const ROW_HEIGHT = 28;
+function getChartSettings(field, metadata) {
+    // TODO: improve logic for field extraction
+    const xField = field.allFields.at(0);
+    const yField = field.allFields.at(1);
+    const { tag } = field.tagParse();
+    let chartWidth = 0, chartHeight = 0;
+    const customWidth = tag.numeric('size', 'width');
+    const customHeight = tag.numeric('size', 'height');
+    let presetSize = tag.text('size');
+    if (customWidth && customHeight) {
+        chartWidth = customWidth;
+        chartHeight = customHeight;
+    }
+    else {
+        presetSize = presetSize || 'md';
+        [chartWidth, chartHeight] = CHART_SIZES[presetSize];
+        chartHeight = chartHeight * ROW_HEIGHT;
+    }
+    let xAxisHeight = 0;
+    let yAxisWidth = 0;
+    let labelAngle = -90;
+    let labelSize = 0;
+    let xTitleSize = 0;
+    const hasXAxis = presetSize !== 'spark';
+    const hasYAxis = presetSize !== 'spark';
+    const exploreMetadata = metadata.fields[(0, util_1.getFieldKey)(field)];
+    let topPadding = presetSize !== 'spark' ? ROW_HEIGHT - 1 : 0; // Subtract 1 to account for top border
+    let yTickCount;
+    const yKey = (0, util_1.getFieldKey)(yField);
+    const maxVal = metadata.fields[yKey].max;
+    const yScale = (0, vega_1.scale)('linear')()
+        .domain([0, maxVal])
+        .nice()
+        .range([chartHeight, 0]);
+    const yDomain = yScale.domain();
+    if (hasYAxis) {
+        const maxAxisVal = yScale.domain().at(1);
+        const l = (0, vega_1.locale)();
+        const formatted = l.format(',')(maxAxisVal);
+        const yTitleSize = 31; // Estimate for now, can be dynamic later
+        const yLabelOffset = 5;
+        yAxisWidth =
+            (0, util_1.getTextWidth)(formatted, 'Inter, sans-serif 12px') +
+                yLabelOffset +
+                yTitleSize;
+        // Check whether we need to adjust axis values manually
+        const noOfTicks = Math.ceil(chartHeight / 40);
+        const ticks = yScale.ticks(noOfTicks);
+        if (ticks.at(-1) < maxAxisVal) {
+            const offRatio = (maxAxisVal - ticks.at(-1)) / maxAxisVal;
+            // adjust chart height
+            const newChartHeight = chartHeight / (1 - offRatio);
+            // adjust chart padding
+            topPadding = topPadding - (newChartHeight - chartHeight);
+            chartHeight = newChartHeight;
+            // Hardcode # of ticks, or the resize could make room for more ticks and then screw things up
+            yTickCount = noOfTicks;
+        }
+    }
+    if (hasXAxis) {
+        // TODO: add type checking here for axis. for now assume number, string
+        const xKey = (0, util_1.getFieldKey)(xField);
+        const maxString = metadata.fields[xKey].maxString;
+        const maxStringSize = (0, util_1.getTextWidth)(maxString, 'Inter, sans-serif 12px');
+        const X_AXIS_THRESHOLD = 0.3;
+        const minBottomPadding = 15;
+        xTitleSize = 22 + minBottomPadding;
+        xAxisHeight = Math.min(maxStringSize, X_AXIS_THRESHOLD * chartHeight);
+        labelSize = xAxisHeight;
+        const xSpacePerLabel = (chartWidth - yAxisWidth) / exploreMetadata.maxRecordCt;
+        if (xSpacePerLabel > xAxisHeight) {
+            labelAngle = 0;
+            labelSize = xSpacePerLabel;
+        }
+    }
+    // Additional xTitle padding to snap to row height grid
+    const totalSize = chartHeight + xAxisHeight + xTitleSize;
+    const roundedUpRowHeight = Math.ceil(totalSize / ROW_HEIGHT) * ROW_HEIGHT;
+    xTitleSize += roundedUpRowHeight - totalSize;
+    return {
+        plotWidth: chartWidth,
+        plotHeight: chartHeight,
+        xAxis: {
+            labelAngle,
+            labelSize,
+            height: xAxisHeight,
+            titleSize: xTitleSize,
+        },
+        yAxis: {
+            width: yAxisWidth,
+            tickCount: yTickCount,
+        },
+        yScale: {
+            domain: yDomain,
+        },
+        padding: {
+            top: topPadding,
+            left: yAxisWidth,
+            bottom: xAxisHeight + xTitleSize,
+            right: 0,
+        },
+        xField,
+        yField,
+        get totalWidth() {
+            return this.plotWidth + this.padding.left + this.padding.right;
+        },
+        get totalHeight() {
+            return this.plotHeight + this.padding.top + this.padding.bottom;
+        },
+    };
+}
+exports.getChartSettings = getChartSettings;
+//# sourceMappingURL=chart-settings.js.map

package/dist/component/render-result-metadata.d.ts

@@ -5,6 +5,8 @@ export interface FieldRenderMetadata {
     max: number | null;
     minString: string | null;
     maxString: string | null;
+    values: Set<string>;
+    maxRecordCt: number | null;
 }
 export interface RenderResultMetadata {
     fields: Record<string, FieldRenderMetadata>;

package/dist/component/render-result-metadata.js

@@ -26,10 +26,10 @@ exports.getResultMetadata = void 0;
 const util_1 = require("./util");
 function getResultMetadata(result) {
     const fieldKeyMap = new WeakMap();
-    const getFieldKey = (f) => {
+    const getCachedFieldKey = (f) => {
         if (fieldKeyMap.has(f))
             return fieldKeyMap.get(f);
-        const fieldKey = JSON.stringify(f.fieldPath);
+        const fieldKey = (0, util_1.getFieldKey)(f);
         fieldKeyMap.set(f, fieldKey);
         return fieldKey;
     };
@@ -38,27 +38,28 @@ function getResultMetadata(result) {
     };
     function initFieldMeta(e) {
         for (const f of e.allFields) {
-            if (f.isAtomicField()) {
-                const fieldKey = getFieldKey(f);
-                metadata.fields[fieldKey] = {
-                    field: f,
-                    min: null,
-                    max: null,
-                    minString: null,
-                    maxString: null,
-                };
-            }
-            else if (f.isExploreField()) {
+            const fieldKey = getCachedFieldKey(f);
+            metadata.fields[fieldKey] = {
+                field: f,
+                min: null,
+                max: null,
+                minString: null,
+                maxString: null,
+                values: new Set(),
+                maxRecordCt: null,
+            };
+            if (f.isExploreField()) {
                 initFieldMeta(f);
             }
         }
     }
-    const populateFieldMeta = (data, metadata) => {
-        var _a, _b;
+    const populateFieldMeta = (data, metadata, cb) => {
+        var _a, _b, _c;
         for (const row of data) {
+            cb === null || cb === void 0 ? void 0 : cb(row);
             for (const f of data.field.allFields) {
                 const value = f.isAtomicField() ? row.cell(f).value : undefined;
-                const fieldKey = getFieldKey(f);
+                const fieldKey = (0, util_1.getFieldKey)(f);
                 const fieldMeta = metadata.fields[fieldKey];
                 if ((0, util_1.valueIsNumber)(f, value)) {
                     const n = value;
@@ -67,6 +68,7 @@ function getResultMetadata(result) {
                 }
                 else if ((0, util_1.valueIsString)(f, value)) {
                     const s = value;
+                    fieldMeta.values.add(s);
                     if (!fieldMeta.minString || fieldMeta.minString.length > s.length)
                         fieldMeta.minString = s;
                     if (!fieldMeta.maxString || fieldMeta.maxString.length < s.length)
@@ -74,7 +76,9 @@ function getResultMetadata(result) {
                 }
                 else if (f.isExploreField()) {
                     const data = row.cell(f);
-                    populateFieldMeta(data, metadata);
+                    let recordCt = 0;
+                    populateFieldMeta(data, metadata, () => recordCt++);
+                    fieldMeta.maxRecordCt = Math.max((_c = fieldMeta.maxRecordCt) !== null && _c !== void 0 ? _c : recordCt, recordCt);
                 }
             }
         }

package/dist/component/render.d.ts

@@ -1,6 +1,7 @@
 import { Result } from '@malloydata/malloy';
 import { LitElement, PropertyValues } from 'lit';
 import './table';
+import './bar-chart';
 import { RenderResultMetadata } from './render-result-metadata';
 export declare class MalloyRender extends LitElement {
     static styles: import("lit").CSSResult;

package/dist/component/render.js

@@ -32,6 +32,7 @@ exports.MalloyRender = void 0;
 const lit_1 = require("lit");
 const decorators_js_1 = require("lit/decorators.js");
 require("./table");
+require("./bar-chart");
 const context_1 = require("@lit/context");
 const result_context_1 = require("./result-context");
 const render_result_metadata_1 = require("./render-result-metadata");

package/dist/component/table-layout.d.ts

@@ -0,0 +1,11 @@
+import { FieldRenderMetadata, RenderResultMetadata } from './render-result-metadata';
+import { ChartSettings } from './chart-settings';
+type LayoutEntry = {
+    metadata: FieldRenderMetadata;
+    width: number;
+    height: number | null;
+    chartSettings: ChartSettings | null;
+};
+export type TableLayout = Record<string, LayoutEntry>;
+export declare function getTableLayout(metadata: RenderResultMetadata): TableLayout;
+export {};

package/dist/component/table-layout.js

@@ -0,0 +1,83 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files
+ * (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge,
+ * publish, distribute, sublicense, and/or sell copies of the Software,
+ * and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTableLayout = void 0;
+const util_1 = require("./util");
+const render_numeric_field_1 = require("./render-numeric-field");
+const chart_settings_1 = require("./chart-settings");
+const MIN_COLUMN_WIDTH = 32;
+const MAX_COLUMN_WIDTH = 384;
+const COLUMN_BUFFER = 12;
+// TODO: get from theme
+const ROW_HEIGHT = 28;
+function getTableLayout(metadata) {
+    const layout = {};
+    for (const [key, fieldMeta] of Object.entries(metadata.fields)) {
+        const field = fieldMeta.field;
+        const layoutEntry = {
+            metadata: fieldMeta,
+            width: getColumnWidth(field, metadata),
+            height: null,
+            chartSettings: null,
+        };
+        const { tag } = field.tagParse();
+        if (tag.has('bar') && field.isExploreField()) {
+            layoutEntry.chartSettings = (0, chart_settings_1.getChartSettings)(field, metadata);
+            layoutEntry.width = layoutEntry.chartSettings.totalWidth;
+            layoutEntry.height = layoutEntry.chartSettings.totalHeight;
+        }
+        else if (field.isAtomicField()) {
+            layoutEntry.height = ROW_HEIGHT;
+        }
+        layout[key] = layoutEntry;
+    }
+    return layout;
+}
+exports.getTableLayout = getTableLayout;
+function getColumnWidth(f, metadata) {
+    const fieldKey = (0, util_1.getFieldKey)(f);
+    const fieldMeta = metadata.fields[fieldKey];
+    let width = 0;
+    if (f.isAtomicField()) {
+        // TODO: get font styles from theme
+        const font = `12px Inter, sans-serif`;
+        const titleWidth = (0, util_1.getTextWidth)(f.name, font);
+        if (f.isAtomicField() && f.isString()) {
+            width =
+                Math.max((0, util_1.getTextWidth)(fieldMeta.maxString, font), titleWidth) +
+                    COLUMN_BUFFER;
+        }
+        else if (f.isAtomicField() && f.isNumber()) {
+            const formattedValue = (0, render_numeric_field_1.renderNumericField)(f, fieldMeta.max);
+            width =
+                Math.max((0, util_1.getTextWidth)(formattedValue, font), titleWidth) +
+                    COLUMN_BUFFER;
+        }
+        else
+            width = 130;
+        width = (0, util_1.clamp)(MIN_COLUMN_WIDTH, MAX_COLUMN_WIDTH, width);
+    }
+    return width;
+}
+//# sourceMappingURL=table-layout.js.map

package/dist/component/table.d.ts

@@ -1,9 +1,10 @@
-import { DataArray, Field } from '@malloydata/malloy';
-import { LitElement, TemplateResult } from 'lit';
+import { DataArray } from '@malloydata/malloy';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import { RenderResultMetadata } from './render-result-metadata';
+import { TableLayout } from './table-layout';
 type TableContext = {
     root: boolean;
-    widthCache: Map<Field, number>;
+    layout: TableLayout;
 };
 export declare class Table extends LitElement {
     static styles: import("lit").CSSResult;
@@ -19,12 +20,11 @@ export declare class Table extends LitElement {
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     private renderHeader;
     private renderField;
-    private getCellFontStyling;
-    private measuringCanvas;
     private getColumnWidth;
     private getContentStyle;
     private renderCell;
     private renderFieldContent;
+    willUpdate(changedProperties: PropertyValues<this>): void;
     render(): TemplateResult<1>;
 }
 declare global {

package/dist/component/table.js

@@ -36,9 +36,7 @@ const context_1 = require("@lit/context");
 const util_1 = require("./util");
 const render_numeric_field_1 = require("./render-numeric-field");
 const result_context_1 = require("./result-context");
-const MIN_COLUMN_WIDTH = 32;
-const MAX_COLUMN_WIDTH = 384;
-const COLUMN_BUFFER = 12;
+const table_layout_1 = require("./table-layout");
 const tableContext = (0, context_1.createContext)('table');
 let Table = class Table extends lit_1.LitElement {
     constructor() {
@@ -46,20 +44,19 @@ let Table = class Table extends lit_1.LitElement {
         this.rowLimit = Infinity;
         this.pinnedHeader = false;
         this._scrolling = false;
-        this.measuringCanvas = document.createElement('canvas');
     }
     connectedCallback() {
         super.connectedCallback();
         if (typeof this.parentCtx === 'undefined') {
             this.ctx = {
                 root: true,
-                widthCache: new Map(),
+                layout: {},
             };
         }
         else {
             this.ctx = {
                 root: false,
-                widthCache: this.parentCtx.widthCache,
+                layout: this.parentCtx.layout,
             };
         }
     }
@@ -89,6 +86,7 @@ let Table = class Table extends lit_1.LitElement {
       ${this.renderCell(f, f.name, {
             hideStartGutter,
             hideEndGutter,
+            isHeader: true,
         })}
     </th>`;
     }
@@ -101,49 +99,23 @@ let Table = class Table extends lit_1.LitElement {
       ${this.renderFieldContent(row, f)}
     </td>`;
     }
-    getCellFontStyling() {
-        const rootStyle = getComputedStyle(this);
-        const fontFamily = rootStyle
-            .getPropertyValue('--malloy-render--font-family')
-            .trim();
-        const fontSize = rootStyle
-            .getPropertyValue('--malloy-render--table-font-size')
-            .trim();
-        return {
-            fontFamily,
-            fontSize,
-        };
-    }
     getColumnWidth(f) {
-        const fieldKey = JSON.stringify(f.fieldPath);
-        const fieldMeta = this.metadata.fields[fieldKey];
-        let width = this.ctx.widthCache.get(f);
-        if (typeof width === 'undefined') {
-            const fontStyles = this.getCellFontStyling();
-            const font = `${fontStyles.fontSize} ${fontStyles.fontFamily}`;
-            const titleWidth = (0, util_1.getTextWidth)(f.name, font, this.measuringCanvas);
-            if (f.isAtomicField() && f.isString()) {
-                width =
-                    Math.max((0, util_1.getTextWidth)(fieldMeta.maxString, font, this.measuringCanvas), titleWidth) + COLUMN_BUFFER;
-            }
-            else if (f.isAtomicField() && f.isNumber()) {
-                const formattedValue = (0, render_numeric_field_1.renderNumericField)(f, fieldMeta.max);
-                width =
-                    Math.max((0, util_1.getTextWidth)(formattedValue, font, this.measuringCanvas), titleWidth) + COLUMN_BUFFER;
-            }
-            else
-                width = 130;
-            width = (0, util_1.clamp)(MIN_COLUMN_WIDTH, MAX_COLUMN_WIDTH, width);
-            this.ctx.widthCache.set(f, width);
-        }
-        return width;
+        const key = (0, util_1.getFieldKey)(f);
+        return this.ctx.layout[key].width;
     }
-    getContentStyle(f) {
-        if (f.isAtomicField()) {
-            const width = this.getColumnWidth(f);
-            return `width: ${width}px; min-width: ${width}px; max-width: ${width}px;`;
+    getContentStyle(f, isHeader = false) {
+        const width = this.getColumnWidth(f);
+        let style = '';
+        if (isHeader)
+            return style;
+        if (typeof width !== 'undefined') {
+            style += `width: ${width}px; min-width: ${width}px; max-width: ${width}px;`;
+        }
+        const height = this.ctx.layout[(0, util_1.getFieldKey)(f)].height;
+        if (typeof height === 'number') {
+            style += `height: ${height}px;`;
         }
-        return '';
+        return style;
     }
     renderCell(f, value, options) {
         return (0, lit_1.html) `<div class="cell-wrapper">
@@ -155,7 +127,7 @@ let Table = class Table extends lit_1.LitElement {
       ></div>
       <div
         class="cell-content"
-        style="${this.getContentStyle(f)}"
+        style="${this.getContentStyle(f, options.isHeader)}"
         title="${value}"
       >
         ${value}
@@ -170,28 +142,45 @@ let Table = class Table extends lit_1.LitElement {
     }
     renderFieldContent(row, f) {
         var _a;
-        if (f.isExploreField()) {
+        const renderAs = (0, util_1.shouldRenderAs)(f);
+        // Render nested tables without gutters
+        if (renderAs === 'table') {
             return (0, lit_1.html) `<malloy-table
         .data=${row.cell(f)}
         .pinnedHeader=${(_a = this.pinnedHeader) !== null && _a !== void 0 ? _a : false}
         .rowLimit=${this.pinnedHeader ? 1 : Infinity}
       ></malloy-table>`;
         }
-        let value = row.cell(f).value;
+        const resultCellValue = row.cell(f).value;
+        let renderValue = '';
         if (this.pinnedHeader)
-            value = '';
-        else if ((0, util_1.valueIsNumber)(f, value)) {
+            renderValue = '';
+        else if (renderAs === 'bar-chart') {
+            renderValue = (0, lit_1.html) `<malloy-bar-chart
+        .data=${row.cell(f)}
+      ></malloy-bar-chart>`;
+        }
+        else if ((0, util_1.valueIsNumber)(f, resultCellValue)) {
             // TS doesn't support typeguards for multiple parameters, so unfortunately have to assert AtomicField here. https://github.com/microsoft/TypeScript/issues/26916
-            value = (0, render_numeric_field_1.renderNumericField)(f, value);
+            renderValue = (0, render_numeric_field_1.renderNumericField)(f, resultCellValue);
+        }
+        else if (resultCellValue === null) {
+            renderValue = '∅';
         }
-        else if (value === null) {
-            value = '∅';
+        else if ((0, util_1.valueIsString)(f, resultCellValue)) {
+            renderValue = resultCellValue;
         }
-        return this.renderCell(f, value, {
+        return this.renderCell(f, renderValue, {
             hideStartGutter: (0, util_1.isFirstChild)(f),
             hideEndGutter: (0, util_1.isLastChild)(f),
+            isHeader: false,
         });
     }
+    willUpdate(changedProperties) {
+        if (this.ctx.root && changedProperties.has('data')) {
+            this.ctx.layout = (0, table_layout_1.getTableLayout)(this.metadata);
+        }
+    }
     render() {
         const fields = this.data.field.allFields;
         const headers = fields.map(f => this.renderHeader(f));
@@ -307,15 +296,15 @@ Table.styles = (0, lit_1.css) `
     }
 
     .cell-wrapper {
-      height: var(--malloy-render--table-row-height);
+      // height: var(--malloy-render--table-row-height);
       display: flex;
-      align-items: center;
+      align-items: start;
       overflow: hidden;
     }
 
     .cell-content {
       border-top: var(--malloy-render--table-border);
-      height: var(--malloy-render--table-row-height);
+      height: 100%;
       line-height: var(--malloy-render--table-row-height);
       flex: 1;
       overflow: hidden;

package/dist/component/util.d.ts

@@ -5,3 +5,5 @@ export declare function valueIsNumber(f: Field, v: unknown): v is number;
 export declare function valueIsString(f: Field, s: unknown): s is string;
 export declare function getTextWidth(text: string, font: string, canvasToUse?: HTMLCanvasElement): number;
 export declare function clamp(s: number, e: number, v: number): number;
+export declare function shouldRenderAs(f: Field): "table" | "cell" | "bar-chart";
+export declare function getFieldKey(f: Field): string;

package/dist/component/util.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.clamp = exports.getTextWidth = exports.valueIsString = exports.valueIsNumber = exports.isFirstChild = exports.isLastChild = void 0;
+exports.getFieldKey = exports.shouldRenderAs = exports.clamp = exports.getTextWidth = exports.valueIsString = exports.valueIsNumber = exports.isFirstChild = exports.isLastChild = void 0;
 function getLocationInParent(f) {
     var _a;
     const parent = f.parentExplore;
@@ -36,4 +36,18 @@ function clamp(s, e, v) {
     return Math.max(s, Math.min(e, v));
 }
 exports.clamp = clamp;
+function shouldRenderAs(f) {
+    if (f.isAtomicField())
+        return 'cell';
+    const { tag } = f.tagParse();
+    if (tag.has('bar'))
+        return 'bar-chart';
+    else
+        return 'table';
+}
+exports.shouldRenderAs = shouldRenderAs;
+function getFieldKey(f) {
+    return JSON.stringify(f.fieldPath);
+}
+exports.getFieldKey = getFieldKey;
 //# sourceMappingURL=util.js.map

package/dist/component/vega-chart.d.ts

@@ -0,0 +1,15 @@
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
+import { VegaJSON } from './vega-types';
+export declare class VegaChart extends LitElement {
+    static styles: import("lit").CSSResult;
+    spec: VegaJSON;
+    type: 'vega' | 'vega-lite';
+    width?: number;
+    height?: number;
+    private el;
+    private view;
+    setupView(): void;
+    firstUpdated(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    render(): TemplateResult;
+}

package/dist/component/vega-chart.js

@@ -0,0 +1,105 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files
+ * (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge,
+ * publish, distribute, sublicense, and/or sell copies of the Software,
+ * and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VegaChart = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const vega_1 = require("vega");
+const vega_lite_1 = require("vega-lite");
+const vega_types_1 = require("./vega-types");
+let VegaChart = class VegaChart extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'vega';
+        this.el = null;
+        this.view = null;
+    }
+    setupView() {
+        if (this.view)
+            this.view.finalize();
+        const vegaspec = this.type === 'vega-lite'
+            ? (0, vega_lite_1.compile)((0, vega_types_1.asVegaLiteSpec)(this.spec)).spec
+            : (0, vega_types_1.asVegaSpec)(this.spec);
+        this.view = new vega_1.View((0, vega_1.parse)(vegaspec))
+            .initialize(this.el)
+            .renderer('svg')
+            .hover();
+        if (this.width)
+            this.view.width(this.width);
+        if (this.height)
+            this.view.height(this.height);
+        this.view.run();
+    }
+    firstUpdated() {
+        this.el = this.shadowRoot.getElementById('vis');
+        this.setupView();
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('spec') || changedProperties.has('type')) {
+            if (this.el)
+                this.setupView();
+        }
+        else {
+            if ((changedProperties.has('width') || changedProperties.has('height')) &&
+                this.view) {
+                if (this.width)
+                    this.view.width(this.width);
+                if (this.height)
+                    this.view.height(this.height);
+                this.view.run();
+            }
+        }
+    }
+    render() {
+        return (0, lit_1.html) ` <div id="vis"></div> `;
+    }
+};
+exports.VegaChart = VegaChart;
+VegaChart.styles = (0, lit_1.css) `
+    #vis > svg {
+      display: block;
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)({ attribute: false })
+], VegaChart.prototype, "spec", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], VegaChart.prototype, "type", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Number })
+], VegaChart.prototype, "width", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Number })
+], VegaChart.prototype, "height", void 0);
+exports.VegaChart = VegaChart = __decorate([
+    (0, decorators_js_1.customElement)('malloy-vega-chart')
+], VegaChart);
+//# sourceMappingURL=vega-chart.js.map

package/dist/component/vega-lite-base-spec.d.ts

@@ -0,0 +1,2 @@
+import { VegaJSON } from './vega-types';
+export declare const baseSpec: () => VegaJSON;

package/dist/component/vega-lite-base-spec.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.baseSpec = void 0;
+const grayMedium = '#727883';
+const gridGray = '#E5E7EB';
+const baseSpec = () => ({
+    $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+    config: {
+        axisY: {
+            gridColor: gridGray,
+            tickColor: gridGray,
+            domain: false,
+            labelFont: 'Inter, sans-serif',
+            labelFontSize: 10,
+            labelFontWeight: 'normal',
+            labelColor: grayMedium,
+            labelPadding: 5,
+            titleColor: grayMedium,
+            titleFont: 'Inter, sans-serif',
+            titleFontSize: 12,
+            titleFontWeight: 'bold',
+            titlePadding: 10,
+            labelOverlap: false,
+        },
+        axisX: {
+            gridColor: gridGray,
+            tickColor: gridGray,
+            tickSize: 0,
+            domain: false,
+            labelFont: 'Inter, sans-serif',
+            labelFontSize: 10,
+            labelFontWeight: 'normal',
+            labelPadding: 5,
+            labelColor: grayMedium,
+            titleColor: grayMedium,
+            titleFont: 'Inter, sans-serif',
+            titleFontSize: 12,
+            titleFontWeight: 'bold',
+            titlePadding: 10,
+        },
+        view: {
+            strokeWidth: 0,
+        },
+    },
+    params: [],
+    padding: 0,
+    autosize: {
+        type: 'none',
+        resize: true,
+        contains: 'content',
+    },
+    // for vega-lite, if width/height is not specificed in spec it will try to autosize. Set values to prevent
+    width: 1,
+    height: 1,
+    data: {
+        values: [],
+    },
+    layer: [],
+});
+exports.baseSpec = baseSpec;
+//# sourceMappingURL=vega-lite-base-spec.js.map

package/dist/component/vega-types.d.ts

@@ -0,0 +1,10 @@
+/// <reference path="../../src/vega.d.ts" />
+import { Spec } from 'vega';
+import { TopLevelSpec } from 'vega-lite';
+/**
+ * TODO: create vega-lite-types package that exports types from vega-lite
+ * Because vega-lite typings are not available today, we are forced to use any
+ * */
+export type VegaJSON = any;
+export declare function asVegaSpec(v: VegaJSON): Spec;
+export declare function asVegaLiteSpec(v: VegaJSON): TopLevelSpec;

package/dist/component/vega-types.js

@@ -0,0 +1,34 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files
+ * (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge,
+ * publish, distribute, sublicense, and/or sell copies of the Software,
+ * and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.asVegaLiteSpec = exports.asVegaSpec = void 0;
+function asVegaSpec(v) {
+    return v;
+}
+exports.asVegaSpec = asVegaSpec;
+function asVegaLiteSpec(v) {
+    return v;
+}
+exports.asVegaLiteSpec = asVegaLiteSpec;
+//# sourceMappingURL=vega-types.js.map

package/dist/stories/bars.stories.d.ts

@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/html';
+import './themes.css';
+import '../component/render';
+declare const meta: Meta;
+export default meta;
+export declare const Products2Column: {
+    args: {
+        source: string;
+        view: string;
+    };
+};
+export declare const Nested: {
+    args: {
+        source: string;
+        view: string;
+    };
+};
+export declare const Sparks: {
+    args: {
+        source: string;
+        view: string;
+    };
+};

package/dist/stories/bars.stories.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sparks = exports.Nested = exports.Products2Column = void 0;
+const bars_malloy_raw_1 = __importDefault(require("./static/bars.malloy?raw"));
+const util_1 = require("./util");
+require("./themes.css");
+require("../component/render");
+const meta = {
+    title: 'Malloy Next/Bars',
+    render: ({ classes }, context) => {
+        const parent = document.createElement('div');
+        parent.style.height = '1000px';
+        parent.style.position = 'relative';
+        const el = document.createElement('malloy-render');
+        if (classes)
+            el.classList.add(classes);
+        el.result = context.loaded['result'];
+        parent.appendChild(el);
+        return parent;
+    },
+    loaders: [(0, util_1.createLoader)(bars_malloy_raw_1.default)],
+    argTypes: {},
+};
+exports.default = meta;
+exports.Products2Column = {
+    args: {
+        source: 'products',
+        view: 'category_bar',
+    },
+};
+exports.Nested = {
+    args: {
+        source: 'products',
+        view: 'nested',
+    },
+};
+exports.Sparks = {
+    args: {
+        source: 'products',
+        view: 'sparks',
+    },
+};
+//# sourceMappingURL=bars.stories.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/render",
-  "version": "0.0.116-dev240104000530",
+  "version": "0.0.116-dev240104225124",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@lit/context": "^1.1.0",
-    "@malloydata/malloy": "^0.0.116-dev240104000530",
+    "@malloydata/malloy": "^0.0.116-dev240104225124",
     "@types/luxon": "^2.4.0",
     "lit": "^3.0.2",
     "lodash": "^4.17.20",