@malloydata/render 0.0.56-dev230710212813 → 0.0.56-dev230711015353

package/dist/html/container.d.ts

@@ -1,4 +1,4 @@
-import { Explore } from '@malloydata/malloy';
+import { Explore, Tags } from '@malloydata/malloy';
 import { StyleDefaults } from '../data_styles';
 import { ChildRenderers, RenderTree } from '../renderer';
 import { RendererOptions } from '../renderer_types';
@@ -6,5 +6,5 @@ export declare abstract class ContainerRenderer extends RenderTree {
     childRenderers: ChildRenderers;
     protected abstract childrenStyleDefaults: StyleDefaults;
     get defaultStylesForChildren(): StyleDefaults;
-    static make<Type extends ContainerRenderer>(c: new (document: Document, options: RendererOptions) => Type, document: Document, exploreField: Explore, options: RendererOptions): Type;
+    static make<Type extends ContainerRenderer>(c: new (document: Document, options: RendererOptions, tags?: Tags) => Type, document: Document, exploreField: Explore, options: RendererOptions, tags?: Tags): Type;
 }

package/dist/html/container.js

@@ -35,8 +35,8 @@ class ContainerRenderer extends renderer_1.RenderTree {
     // We can't use a normal constructor here because we need
     //  we need to be fully constructed before we construct
     //  our children.
-    static make(c, document, exploreField, options) {
-        const n = new c(document, options);
+    static make(c, document, exploreField, options, tags) {
+        const n = new c(document, options, tags);
         return n;
     }
 }

package/dist/html/html_view.js

@@ -150,24 +150,24 @@ function makeRenderer(field, document, options, styleDefaults, queryTimezone, ta
         return renderer;
     }
     if ((renderDef === null || renderDef === void 0 ? void 0 : renderDef.renderer) === 'dashboard') {
-        return makeContainerRenderer(dashboard_1.HTMLDashboardRenderer, document, isContainer(field), options);
+        return makeContainerRenderer(dashboard_1.HTMLDashboardRenderer, document, isContainer(field), options, tags);
     }
     else if ((renderDef === null || renderDef === void 0 ? void 0 : renderDef.renderer) === 'list') {
-        return makeContainerRenderer(list_1.HTMLListRenderer, document, isContainer(field), options);
+        return makeContainerRenderer(list_1.HTMLListRenderer, document, isContainer(field), options, tags);
     }
     else if ((renderDef === null || renderDef === void 0 ? void 0 : renderDef.renderer) === 'list_detail') {
-        return makeContainerRenderer(list_detail_1.HTMLListDetailRenderer, document, isContainer(field), options);
+        return makeContainerRenderer(list_detail_1.HTMLListDetailRenderer, document, isContainer(field), options, tags);
     }
     else if ((renderDef === null || renderDef === void 0 ? void 0 : renderDef.renderer) === 'table' ||
         !field.hasParentExplore() ||
         field.isExploreField()) {
-        return makeContainerRenderer(table_1.HTMLTableRenderer, document, isContainer(field), options);
+        return makeContainerRenderer(table_1.HTMLTableRenderer, document, isContainer(field), options, tags);
     }
     throw new Error(`Could not find a proper renderer for field ${field.name}`);
 }
 exports.makeRenderer = makeRenderer;
-function makeContainerRenderer(cType, document, explore, options) {
-    const c = container_1.ContainerRenderer.make(cType, document, explore, options);
+function makeContainerRenderer(cType, document, explore, options, tags) {
+    const c = container_1.ContainerRenderer.make(cType, document, explore, options, tags);
     const result = {};
     explore.intrinsicFields.forEach((field) => {
         result[field.name] = makeRenderer(field, document, options, c.defaultStylesForChildren, explore.queryTimezone, field.getTags());

package/dist/html/table.js

@@ -39,10 +39,19 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
         if (!table.isArray() && !table.isRecord()) {
             throw new Error('Invalid type for Table Renderer');
         }
-        const header = this.document.createElement('tr');
-        table.field.intrinsicFields.forEach(field => {
+        const shouldTranspose = this.tags
+            ? this.tags.getMalloyTags().properties['transpose'] === true
+            : false;
+        if (shouldTranspose && table.field.intrinsicFields.length > 20) {
+            throw new Error('Transpose limit of 20 columns exceeded.');
+        }
+        let rowIndex = 0;
+        let columnIndex = 0;
+        const cells = [];
+        cells[rowIndex] = [];
+        for (const field of table.field.intrinsicFields) {
             if ((0, tags_utils_1.isFieldHidden)(field)) {
-                return;
+                continue;
             }
             let name = (0, utils_1.formatTitle)(this.options, field, this.options.dataStyles[field.name], field.parentExplore.queryTimezone);
             const childRenderer = this.childRenderers[name];
@@ -52,13 +61,14 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
         padding: 8px;
         color: var(--malloy-title-color, #505050);
         border-bottom: 1px solid var(--malloy-border-color, #eaeaea);
-        text-align: ${isNumeric ? 'right' : 'left'};
+        text-align: ${!isNumeric || shouldTranspose ? 'left' : 'right'};
       `;
             name = name.replace(/_/g, '_​');
             headerCell.innerHTML = name;
-            header.appendChild(headerCell);
-        });
-        if (this.options.isDrillingEnabled) {
+            cells[rowIndex][columnIndex] = headerCell;
+            columnIndex++;
+        }
+        if (!shouldTranspose && this.options.isDrillingEnabled) {
             const drillHeader = this.document.createElement('th');
             drillHeader.style.cssText = `
         padding: 8px;
@@ -66,11 +76,13 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
         border-bottom: 1px solid var(--malloy-border-color, #eaeaea);
         width: 25px;
       `;
-            header.appendChild(drillHeader);
+            cells[rowIndex][columnIndex] = drillHeader;
+            columnIndex++;
         }
-        const tableBody = this.document.createElement('tbody');
+        rowIndex++;
         for (const row of table) {
-            const rowElement = this.document.createElement('tr');
+            cells[rowIndex] = [];
+            columnIndex = 0;
             for (const field of table.field.intrinsicFields) {
                 if ((0, tags_utils_1.isFieldHidden)(field)) {
                     continue;
@@ -87,9 +99,11 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
           ${isNumeric ? 'text-align: right;' : ''}
         `;
                 cellElement.appendChild(rendered);
-                rowElement.appendChild(cellElement);
+                cells[rowIndex][columnIndex] = cellElement;
+                columnIndex++;
             }
-            if (this.options.isDrillingEnabled) {
+            // 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);
@@ -106,11 +120,25 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
                         this.options.onDrill(drillQuery, drillIcon, drillFilters);
                     }
                 };
-                rowElement.appendChild(drillCell);
+                cells[rowIndex][columnIndex] = drillCell;
+                columnIndex++;
             }
-            tableBody.appendChild(rowElement);
+            rowIndex++;
         }
         const tableElement = this.document.createElement('table');
+        let tableSection = this.document.createElement('thead');
+        for (let row = 0; row < (shouldTranspose ? columnIndex : rowIndex); row++) {
+            if (row === 1) {
+                tableElement.appendChild(tableSection);
+                tableSection = this.document.createElement('tbody');
+            }
+            const currentRow = this.document.createElement('tr');
+            for (let column = 0; column < (shouldTranspose ? rowIndex : columnIndex); column++) {
+                currentRow.appendChild(shouldTranspose ? cells[column][row] : cells[row][column]);
+            }
+            tableSection.appendChild(currentRow);
+        }
+        tableElement.appendChild(tableSection);
         tableElement.style.cssText = `
       border: 1px solid var(--malloy-border-color, #eaeaea);
       vertical-align: top;
@@ -118,10 +146,6 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
       border-collapse: collapse;
       width: 100%;
     `;
-        const tableHead = this.document.createElement('thead');
-        tableHead.appendChild(header);
-        tableElement.appendChild(tableHead);
-        tableElement.appendChild(tableBody);
         return tableElement;
     }
 }

package/dist/renderer.d.ts

@@ -1,4 +1,4 @@
-import { DataColumn } from '@malloydata/malloy';
+import { DataColumn, Tags } from '@malloydata/malloy';
 import { RendererOptions } from './renderer_types';
 export declare type ChildRenderers = {
     [fieldName: string]: Renderer;
@@ -9,7 +9,8 @@ export interface Renderer {
 export declare abstract class RenderTree implements Renderer {
     protected readonly document: Document;
     protected readonly options: RendererOptions;
-    constructor(document: Document, options: RendererOptions);
+    protected readonly tags?: Tags | undefined;
+    constructor(document: Document, options: RendererOptions, tags?: Tags | undefined);
     protected abstract get childRenderers(): ChildRenderers;
     abstract render(value: DataColumn): Promise<HTMLElement>;
 }

package/dist/renderer.js

@@ -24,9 +24,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderTree = void 0;
 class RenderTree {
-    constructor(document, options) {
+    constructor(document, options, tags) {
         this.document = document;
         this.options = options;
+        this.tags = tags;
     }
 }
 exports.RenderTree = RenderTree;

package/package.json

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