@malloydata/render 0.0.60-dev230718174455 → 0.0.60

package/dist/html/table.d.ts

@@ -1,4 +1,4 @@
-import { DataColumn, Field } from '@malloydata/malloy';
+import { DataColumn, Field, SortableField } from '@malloydata/malloy';
 import { StyleDefaults } from '../data_styles';
 import { ContainerRenderer } from './container';
 import { Renderer } from '../renderer';
@@ -6,12 +6,13 @@ export declare class HTMLTableRenderer extends ContainerRenderer {
     protected childrenStyleDefaults: StyleDefaults;
     render(table: DataColumn): Promise<HTMLElement>;
     calculatePivotDimensions(table: DataColumn): {
-        dimensions: Field[];
-        nonDimensions: Field[];
+        dimensions: SortableField[];
+        nonDimensions: SortableField[];
     };
     generatePivotedCells(table: DataColumn, shouldTranspose: boolean): Promise<Map<string, Map<string, HTMLTableCellElement>>>;
     generateNoValueCell(field: Field, shouldTranspose: boolean): HTMLTableCellElement;
     createCellAndRender(childRenderer: Renderer, value: DataColumn, shouldTranspose: boolean): Promise<HTMLTableCellElement>;
+    createEmptyHeaderCell(): HTMLTableCellElement;
     createHeaderCell(field: Field, shouldTranspose: boolean): HTMLTableCellElement;
     createCell(childRenderer: Renderer, shouldTranspose: boolean): HTMLTableCellElement;
     renderChild(value: DataColumn): Promise<HTMLElement>;

package/dist/html/table.js

@@ -29,13 +29,18 @@ const number_1 = require("./number");
 const utils_1 = require("./utils");
 const tags_utils_1 = require("../tags_utils");
 class PivotedField {
-    constructor(parentField, values) {
+    constructor(parentField, values, span) {
         this.parentField = parentField;
         this.values = values;
+        this.span = span;
         this.key = JSON.stringify({
             parentField: this.parentField.name,
-            values: this.values.filter(v => (v.isScalar() ? v.key : '')),
+            values: this.values.map(v => (v.isScalar() ? v.key : '')),
         });
+        this.fieldValueMap = new Map();
+        for (const value of this.values) {
+            this.fieldValueMap.set(value.field.name, value);
+        }
     }
 }
 class PivotedColumnField {
@@ -56,6 +61,9 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
     }
     async render(table) {
         var _a;
+        if (table.isNull()) {
+            return this.document.createElement('span');
+        }
         if (!table.isArray() && !table.isRecord()) {
             throw new Error('Invalid type for Table Renderer');
         }
@@ -94,7 +102,7 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
                         nonDimensions = dimensionsResult.nonDimensions;
                     }
                     for (const innerRow of dc) {
-                        const pivotedField = new PivotedField(field, dimensions.map(d => innerRow.cell(d)));
+                        const pivotedField = new PivotedField(field, dimensions.map(d => innerRow.cell(d.field)), nonDimensions.length);
                         const pfKey = pivotedField.key;
                         if (!pivotedFields[pfKey]) {
                             pivotedFields.set(pfKey, pivotedField);
@@ -104,10 +112,26 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
                 if (!dimensions) {
                     throw new Error(`Could not pivot ${field.name}, no data found.`);
                 }
-                for (const pf of pivotedFields) {
+                const sortedPivotedFields = Array.from(pivotedFields.values()).sort((a, b) => {
+                    for (const d of dimensions) {
+                        const aValue = a.fieldValueMap.get(d.field.name);
+                        const bValue = b.fieldValueMap.get(d.field.name);
+                        if ((aValue === null || aValue === void 0 ? void 0 : aValue.isScalar()) &&
+                            (bValue === null || bValue === void 0 ? void 0 : bValue.isScalar()) &&
+                            typeof aValue === typeof bValue) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            const compValue = aValue.compareTo(bValue);
+                            if (compValue !== 0) {
+                                return d.dir !== 'desc' ? compValue : -compValue;
+                            }
+                        }
+                    }
+                    return 0;
+                });
+                for (const pf of sortedPivotedFields) {
                     for (const nonDimension of nonDimensions) {
-                        columnFields.push(new PivotedColumnField(pf[1], nonDimension));
-                        cells[rowIndex][columnIndex] = childRenderer.createHeaderCell(nonDimension, shouldTranspose);
+                        columnFields.push(new PivotedColumnField(pf, nonDimension.field));
+                        cells[rowIndex][columnIndex] = childRenderer.createHeaderCell(nonDimension.field, shouldTranspose);
                         columnIndex++;
                     }
                 }
@@ -140,29 +164,37 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
             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) {
+                    if (valueIndex < 0) {
+                        row.push(this.createEmptyHeaderCell());
+                    }
+                    else if (lastPivotedColumnHash !== pfKey) {
+                        const headerCell = this.document.createElement('th');
+                        if (!shouldTranspose) {
+                            headerCell.colSpan = field.pivotedField.span;
+                        }
+                        else {
+                            headerCell.rowSpan = field.pivotedField.span;
+                        }
+                        headerCell.style.cssText = `
+                padding: 8px;
+                color: var(--malloy-title-color, #505050);
+                border-bottom: 1px solid var(--malloy-border-color, #eaeaeb);
+                text-align: left;
+              `;
                         const value = field.pivotedField.values[valueIndex];
+                        headerCell.appendChild(this.document.createTextNode(`${value.field.name}: `));
                         headerCell.appendChild(await this.childRenderers[field.pivotedField.parentField.name].renderChild(value));
                         lastPivotedColumnHash = pfKey;
+                        row.push(headerCell);
+                    }
+                    else {
+                        row.push(undefined);
                     }
-                    row.push(headerCell);
                 }
                 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);
-        `;
-                    row.push(headerCell);
+                    row.push(this.createEmptyHeaderCell());
                 }
             }
             pivotHeaderCells.push(row);
@@ -215,7 +247,7 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
           vertical-align: top;
           border-bottom: 1px solid var(--malloy-border-color, #eaeaea);
           width: 25px;
-          cursor: pointer
+          cursor: pointer;
         `;
                 drillCell.onclick = () => {
                     if (this.options.onDrill) {
@@ -237,7 +269,10 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
             }
             const currentRow = this.document.createElement('tr');
             for (let column = 0; column < (shouldTranspose ? rowIndex : columnIndex); column++) {
-                currentRow.appendChild(shouldTranspose ? cells[column][row] : cells[row][column]);
+                const cell = shouldTranspose ? cells[column][row] : cells[row][column];
+                if (cell) {
+                    currentRow.appendChild(cell);
+                }
             }
             tableSection.appendChild(currentRow);
         }
@@ -258,10 +293,11 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
         let dimensions = undefined;
         const userSpecifiedDimensions = (0, utils_1.parseCommaSeparatedParameterTagValue)(this.tags, 'pivot_dimensions');
         if (userSpecifiedDimensions) {
-            dimensions = table.field.allFields.filter(f => userSpecifiedDimensions.indexOf(f.name) >= 0);
+            dimensions = table.field.allFieldsWithOrder.filter(f => userSpecifiedDimensions.indexOf(f.field.name) >= 0);
             if (dimensions.length !== userSpecifiedDimensions.length) {
                 for (const dim of userSpecifiedDimensions) {
-                    if (table.field.allFields.filter(f => f.name === dim).length === 0) {
+                    if (table.field.allFieldsWithOrder.filter(f => f.field.name === dim)
+                        .length === 0) {
                         throw new Error(`Could not pivot ${table.field.name} since ${dim} is not a valid field.`);
                     }
                 }
@@ -270,7 +306,7 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
         else {
             dimensions = table.field.dimensions;
         }
-        const nonDimensions = table.field.allFields.filter(f => dimensions.indexOf(f) < 0);
+        const nonDimensions = table.field.allFieldsWithOrder.filter(f => dimensions.indexOf(f) < 0);
         if (nonDimensions.length === 0) {
             throw new Error(`Can not pivot ${table.field.name} since all of its fields are dimensions.`);
         }
@@ -284,13 +320,13 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
         if (!table.isArray() && !table.isRecord()) {
             throw new Error(`Could not pivot ${table.field.name}`);
         }
-        const { dimensions } = this.calculatePivotDimensions(table);
+        const { dimensions, nonDimensions } = this.calculatePivotDimensions(table);
         for (const row of table) {
-            const pf = new PivotedField(table.field, dimensions.map(f => row.cell(f.name)));
+            const pf = new PivotedField(table.field, dimensions.map(f => row.cell(f.field.name)), nonDimensions.length);
             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));
+            for (const nonDimension of table.field.allFieldsWithOrder.filter(f => dimensions.indexOf(f) < 0)) {
+                const childRenderer = this.childRenderers[nonDimension.field.name];
+                renderedCells.set(nonDimension.field.name, await this.createCellAndRender(childRenderer, row.cell(nonDimension.field.name), shouldTranspose));
             }
             if (result.has(pf.key)) {
                 throw new Error(`Can not pivot ${table.field.name} dimensions lead to non unique pivots.`);
@@ -309,6 +345,15 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
         cell.appendChild(await childRenderer.render(value));
         return cell;
     }
+    createEmptyHeaderCell() {
+        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);
+    `;
+        return headerCell;
+    }
     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;

package/package.json

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