@malloydata/render 0.0.58-dev230714185813 → 0.0.58-dev230715003933

package/dist/html/table.d.ts

@@ -1,7 +1,15 @@
-import { DataColumn } from '@malloydata/malloy';
+import { DataColumn, Field, Tags } from '@malloydata/malloy';
 import { StyleDefaults } from '../data_styles';
 import { ContainerRenderer } from './container';
+import { Renderer } from '../renderer';
 export declare class HTMLTableRenderer extends ContainerRenderer {
     protected childrenStyleDefaults: StyleDefaults;
     render(table: DataColumn): Promise<HTMLElement>;
+    generatePivotedCells(table: DataColumn, shouldTranspose: boolean): Promise<Map<string, Map<string, HTMLTableCellElement>>>;
+    generateNoValueCell(table: DataColumn, field: Field, shouldTranspose: boolean): HTMLTableCellElement;
+    tagIsPresent(tags: Tags | undefined, tag: string): boolean;
+    createCellAndRender(childRenderer: Renderer, value: DataColumn, shouldTranspose: boolean): Promise<HTMLTableCellElement>;
+    createHeaderCell(field: Field, shouldTranspose: boolean): HTMLTableCellElement;
+    createCell(childRenderer: Renderer, shouldTranspose: boolean): HTMLTableCellElement;
+    renderChild(value: DataColumn): Promise<HTMLElement>;
 }

package/dist/html/table.js

@@ -28,6 +28,25 @@ const container_1 = require("./container");
 const number_1 = require("./number");
 const utils_1 = require("./utils");
 const tags_utils_1 = require("../tags_utils");
+class PivotedField {
+    constructor(parentField, values) {
+        this.parentField = parentField;
+        this.values = values;
+        this.key = JSON.stringify({
+            parentField: this.parentField.name,
+            values: this.values.filter(v => (v.isScalar() ? v.key : '')),
+        });
+    }
+}
+class PivotedColumnField {
+    constructor(pivotedField, field) {
+        this.pivotedField = pivotedField;
+        this.field = field;
+    }
+    isPivotedColumnField() {
+        return this instanceof PivotedColumnField;
+    }
+}
 class HTMLTableRenderer extends container_1.ContainerRenderer {
     constructor() {
         super(...arguments);
@@ -36,37 +55,69 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
         };
     }
     async render(table) {
+        var _a;
         if (!table.isArray() && !table.isRecord()) {
             throw new Error('Invalid type for Table Renderer');
         }
-        const shouldTranspose = this.tags
-            ? this.tags.getMalloyTags().properties['transpose'] === true
-            : false;
+        const shouldTranspose = this.tagIsPresent(this.tags, 'transpose');
         if (shouldTranspose && table.field.intrinsicFields.length > 20) {
             throw new Error('Transpose limit of 20 columns exceeded.');
         }
         let rowIndex = 0;
         let columnIndex = 0;
-        const cells = [];
+        let cells = [];
         cells[rowIndex] = [];
+        const columnFields = [];
+        let pivotDepth = 0;
         for (const field of table.field.intrinsicFields) {
             if ((0, tags_utils_1.isFieldHidden)(field)) {
                 continue;
             }
-            let name = (0, utils_1.formatTitle)(this.options, field, this.options.dataStyles[field.name], field.parentExplore.queryTimezone);
-            const childRenderer = this.childRenderers[name];
-            const isNumeric = childRenderer instanceof number_1.HTMLNumberRenderer;
-            const headerCell = this.document.createElement('th');
-            headerCell.style.cssText = `
-        padding: 8px;
-        color: var(--malloy-title-color, #505050);
-        border-bottom: 1px solid var(--malloy-border-color, #eaeaea);
-        text-align: ${!isNumeric || shouldTranspose ? 'left' : 'right'};
-      `;
-            name = name.replace(/_/g, '_​');
-            headerCell.innerHTML = name;
-            cells[rowIndex][columnIndex] = headerCell;
-            columnIndex++;
+            const childRenderer = this.childRenderers[field.name];
+            const shouldPivot = childRenderer instanceof HTMLTableRenderer &&
+                this.tagIsPresent(childRenderer.tags, 'pivot');
+            if (shouldPivot) {
+                const pivotedFields = new Map();
+                let dimensions = undefined;
+                let nonDimensions = [];
+                for (const row of table) {
+                    const dc = row.cell(field);
+                    if (!dc.isArray() && !dc.isRecord()) {
+                        throw new Error(`Cannot pivot field ${field.name}.`);
+                    }
+                    if (!dimensions) {
+                        const fieldi = dc.field;
+                        dimensions = fieldi.dimensions;
+                        nonDimensions = fieldi.allFields.filter(f => dimensions.indexOf(f) < 0);
+                        if (nonDimensions.length === 0) {
+                            throw new Error(`Can not pivot ${field.name} since all of its fields are dimensions.`);
+                        }
+                    }
+                    for (const innerRow of dc) {
+                        const pivotedField = new PivotedField(field, dimensions.map(d => innerRow.cell(d)));
+                        const pfKey = pivotedField.key;
+                        if (!pivotedFields[pfKey]) {
+                            pivotedFields.set(pfKey, pivotedField);
+                        }
+                    }
+                }
+                for (const pf of pivotedFields) {
+                    for (const nonDimension of nonDimensions) {
+                        columnFields.push(new PivotedColumnField(pf[1], nonDimension));
+                        cells[rowIndex][columnIndex] = childRenderer.createHeaderCell(nonDimension, shouldTranspose);
+                        columnIndex++;
+                    }
+                }
+                pivotDepth = Math.max(pivotDepth, dimensions.length);
+            }
+            else {
+                cells[rowIndex][columnIndex] = this.createHeaderCell(field, shouldTranspose);
+                columnFields.push(field);
+                columnIndex++;
+            }
+        }
+        if (pivotDepth > 0 && columnFields.length > 30) {
+            throw new Error('Pivot limit of 30 columns exceeded.');
         }
         if (!shouldTranspose && this.options.isDrillingEnabled) {
             const drillHeader = this.document.createElement('th');
@@ -80,55 +131,109 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
             columnIndex++;
         }
         rowIndex++;
-        for (const row of table) {
-            cells[rowIndex] = [];
-            columnIndex = 0;
-            for (const field of table.field.intrinsicFields) {
-                if ((0, tags_utils_1.isFieldHidden)(field)) {
-                    continue;
+        const pivotHeaderCells = [];
+        for (let r = 0; r < pivotDepth; r++) {
+            const row = [];
+            let lastPivotedColumnHash = null;
+            for (const field of columnFields) {
+                if (field instanceof PivotedColumnField) {
+                    const headerCell = this.document.createElement('th');
+                    headerCell.style.cssText = `
+              padding: 8px;
+              color: var(--malloy-title-color, #505050);
+              border-bottom: 1px solid var(--malloy-border-color, #eaeaea);
+            `;
+                    const pfKey = field.pivotedField.key;
+                    const valueIndex = field.pivotedField.values.length - pivotDepth + r;
+                    if (lastPivotedColumnHash !== pfKey && valueIndex >= 0) {
+                        const value = field.pivotedField.values[valueIndex];
+                        headerCell.appendChild(await this.childRenderers[field.pivotedField.parentField.name].renderChild(value));
+                        lastPivotedColumnHash = pfKey;
+                    }
+                    row.push(headerCell);
                 }
-                const childRenderer = this.childRenderers[field.name];
-                const isNumeric = childRenderer instanceof number_1.HTMLNumberRenderer;
-                await (0, utils_1.yieldTask)();
-                const rendered = await childRenderer.render(row.cell(field));
-                const cellElement = this.document.createElement('td');
-                cellElement.style.cssText = `
-          padding: ${childRenderer instanceof HTMLTableRenderer ? '0' : '8px'};
-          vertical-align: top;
+                else {
+                    const headerCell = this.document.createElement('th');
+                    headerCell.style.cssText = `
+          padding: 8px;
+          color: var(--malloy-title-color, #505050);
           border-bottom: 1px solid var(--malloy-border-color, #eaeaea);
-          ${isNumeric || shouldTranspose ? 'text-align: right;' : ''}
         `;
-                cellElement.appendChild(rendered);
-                cells[rowIndex][columnIndex] = cellElement;
-                columnIndex++;
+                    row.push(headerCell);
+                }
             }
-            // TODO(figutierrez): Deal with drill when transpose is on.
-            if (!shouldTranspose && this.options.isDrillingEnabled) {
-                const drillCell = this.document.createElement('td');
-                const drillIcon = (0, utils_1.createDrillIcon)(this.document);
-                drillCell.appendChild(drillIcon);
-                drillCell.style.cssText = `
+            pivotHeaderCells.push(row);
+            rowIndex++;
+        }
+        cells = [...pivotHeaderCells, ...cells];
+        try {
+            for (const row of table) {
+                cells[rowIndex] = [];
+                columnIndex = 0;
+                let currentPivotedFieldKey = '';
+                let pivotedCells = new Map();
+                for (const field of columnFields) {
+                    if (field instanceof PivotedColumnField) {
+                        const childRenderer = this.childRenderers[field.pivotedField.parentField.name];
+                        const childTableRecord = row.cell(field.pivotedField.parentField);
+                        await (0, utils_1.yieldTask)();
+                        if (field.pivotedField.key !== currentPivotedFieldKey) {
+                            pivotedCells = await childRenderer.generatePivotedCells(childTableRecord, shouldTranspose);
+                            currentPivotedFieldKey = field.pivotedField.key;
+                        }
+                        const pfKey = field.pivotedField.key;
+                        if (pivotedCells.has(pfKey) &&
+                            ((_a = pivotedCells.get(pfKey)) === null || _a === void 0 ? void 0 : _a.has(field.field.name))) {
+                            cells[rowIndex][columnIndex] = pivotedCells
+                                .get(pfKey)
+                                .get(field.field.name);
+                        }
+                        else {
+                            cells[rowIndex][columnIndex] = childRenderer.generateNoValueCell(childTableRecord, field.field, shouldTranspose);
+                        }
+                        columnIndex++;
+                        // back
+                    }
+                    else {
+                        if ((0, tags_utils_1.isFieldHidden)(field)) {
+                            continue;
+                        }
+                        const childRenderer = this.childRenderers[field.name];
+                        cells[rowIndex][columnIndex] = await this.createCellAndRender(childRenderer, row.cell(field), shouldTranspose);
+                        columnIndex++;
+                    }
+                }
+                // TODO(figutierrez): Deal with drill when transpose is on.
+                if (!shouldTranspose && this.options.isDrillingEnabled) {
+                    const drillCell = this.document.createElement('td');
+                    const drillIcon = (0, utils_1.createDrillIcon)(this.document);
+                    drillCell.appendChild(drillIcon);
+                    drillCell.style.cssText = `
           padding: 8px;
           vertical-align: top;
           border-bottom: 1px solid var(--malloy-border-color, #eaeaea);
           width: 25px;
           cursor: pointer
         `;
-                drillCell.onclick = () => {
-                    if (this.options.onDrill) {
-                        const { drillQuery, drillFilters } = (0, drill_1.getDrillQuery)(row);
-                        this.options.onDrill(drillQuery, drillIcon, drillFilters);
-                    }
-                };
-                cells[rowIndex][columnIndex] = drillCell;
-                columnIndex++;
+                    drillCell.onclick = () => {
+                        if (this.options.onDrill) {
+                            const { drillQuery, drillFilters } = (0, drill_1.getDrillQuery)(row);
+                            this.options.onDrill(drillQuery, drillIcon, drillFilters);
+                        }
+                    };
+                    cells[rowIndex][columnIndex] = drillCell;
+                    columnIndex++;
+                }
+                rowIndex++;
             }
-            rowIndex++;
+        }
+        catch (e) {
+            throw new Error(`${e.toString()} ${e.stack}`);
         }
         const tableElement = this.document.createElement('table');
         let tableSection = this.document.createElement('thead');
         for (let row = 0; row < (shouldTranspose ? columnIndex : rowIndex); row++) {
-            if (row === 1) {
+            if (row === 1 + pivotDepth) {
                 tableElement.appendChild(tableSection);
                 tableSection = this.document.createElement('tbody');
             }
@@ -148,6 +253,68 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
     `;
         return tableElement;
     }
+    async generatePivotedCells(table, shouldTranspose) {
+        const result = new Map();
+        if (!table.isArray() && !table.isRecord()) {
+            throw new Error(`Could not pivot ${table.field.name}`);
+        }
+        const dimensions = table.field.dimensions;
+        for (const row of table) {
+            const pf = new PivotedField(table.field, dimensions.map(f => row.cell(f.name)));
+            const renderedCells = new Map();
+            for (const nonDimension of table.field.allFields.filter(f => dimensions.indexOf(f) < 0)) {
+                const childRenderer = this.childRenderers[nonDimension.name];
+                renderedCells.set(nonDimension.name, await this.createCellAndRender(childRenderer, row.cell(nonDimension.name), shouldTranspose));
+            }
+            result.set(pf.key, renderedCells);
+        }
+        return result;
+    }
+    generateNoValueCell(table, field, shouldTranspose) {
+        if (!table.isArray() && !table.isRecord()) {
+            throw new Error(`Could not pivot ${table.field.name}`);
+        }
+        const cell = this.createCell(this.childRenderers[field.name], shouldTranspose);
+        cell.innerHTML = '-';
+        return cell;
+    }
+    tagIsPresent(tags, tag) {
+        return tags ? tags.getMalloyTags().properties[tag] === true : false;
+    }
+    async createCellAndRender(childRenderer, value, shouldTranspose) {
+        const cell = this.createCell(childRenderer, shouldTranspose);
+        cell.appendChild(await childRenderer.render(value));
+        return cell;
+    }
+    createHeaderCell(field, shouldTranspose) {
+        let name = (0, utils_1.formatTitle)(this.options, field, this.options.dataStyles[field.name], field.parentExplore.queryTimezone);
+        const isNumeric = this.childRenderers[field.name] instanceof number_1.HTMLNumberRenderer;
+        const headerCell = this.document.createElement('th');
+        headerCell.style.cssText = `
+      padding: 8px;
+      color: var(--malloy-title-color, #505050);
+      border-bottom: 1px solid var(--malloy-border-color, #eaeaea);
+      text-align: ${isNumeric || shouldTranspose ? 'right' : 'left'};
+    `;
+        name = name.replace(/_/g, '_&#8203;');
+        headerCell.innerHTML = name;
+        return headerCell;
+    }
+    createCell(childRenderer, shouldTranspose) {
+        const isNumeric = childRenderer instanceof number_1.HTMLNumberRenderer;
+        (0, utils_1.yieldTask)();
+        const cellElement = this.document.createElement('td');
+        cellElement.style.cssText = `
+      padding: ${childRenderer instanceof HTMLTableRenderer ? '0' : '8px'};
+      vertical-align: top;
+      border-bottom: 1px solid var(--malloy-border-color, #eaeaea);
+      ${isNumeric || shouldTranspose ? 'text-align: right;' : ''}
+    `;
+        return cellElement;
+    }
+    async renderChild(value) {
+        return this.childRenderers[value.field.name].render(value);
+    }
 }
 exports.HTMLTableRenderer = HTMLTableRenderer;
 //# sourceMappingURL=table.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/render",
-  "version": "0.0.58-dev230714185813",
+  "version": "0.0.58-dev230715003933",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,7 +18,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@malloydata/malloy": "^0.0.58-dev230714185813",
+    "@malloydata/malloy": "^0.0.58-dev230715003933",
     "@types/luxon": "^2.4.0",
     "lodash": "^4.17.20",
     "luxon": "^2.4.0",