@malloydata/render 0.0.24-dev230224011252 → 0.0.24-dev230224184907

package/dist/data_styles.d.ts

@@ -142,7 +142,7 @@ export interface CartesianChartRenderOptions extends ChartRenderOptions {
         spark_line?: boolean;
     };
 }
-export interface BarChartRenderOptions {
+export interface BarChartRenderOptions extends DataRenderOptions {
     size?: ChartSize;
 }
 export interface ScatterChartRenderOptions extends CartesianChartRenderOptions {

package/dist/html/cartesian_chart.js

@@ -44,7 +44,7 @@ class HTMLCartesianChartRenderer extends chart_1.HTMLChartRenderer {
             ? {
                 "field": colorField.name,
                 "type": colorType,
-                "axis": { "title": colorField.name },
+                "axis": { "title": (0, utils_1.formatTitle)(this.options, colorField.name) },
                 "scale": (0, utils_1.getColorScale)(colorType, mark === "bar")
             }
             : { "value": "#4285F4" };
@@ -52,14 +52,14 @@ class HTMLCartesianChartRenderer extends chart_1.HTMLChartRenderer {
             ? {
                 "field": sizeField.name,
                 "type": sizeType,
-                "axis": { "title": sizeField.name }
+                "axis": { "title": (0, utils_1.formatTitle)(this.options, sizeField.name) }
             }
             : undefined;
         const shapeDef = shapeField
             ? {
                 "field": shapeField.name,
                 "type": shapeType,
-                "axis": { "title": shapeField.name }
+                "axis": { "title": (0, utils_1.formatTitle)(this.options, shapeField.name) }
             }
             : undefined;
         const xSort = xType === "nominal" ? null : undefined;
@@ -68,13 +68,13 @@ class HTMLCartesianChartRenderer extends chart_1.HTMLChartRenderer {
             "field": xField.name,
             "type": xType,
             "sort": xSort,
-            "axis": { "title": xField.name }
+            "axis": { "title": (0, utils_1.formatTitle)(this.options, xField.name) }
         };
         const yDef = {
             "field": yField.name,
             "type": yType,
             "sort": ySort,
-            "axis": { "title": yField.name }
+            "axis": { "title": (0, utils_1.formatTitle)(this.options, yField.name) }
         };
         return {
             ...vega_spec_1.DEFAULT_SPEC,

package/dist/html/chart.d.ts

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

package/dist/html/chart.js

@@ -49,10 +49,11 @@ exports.HTMLChartRenderer = void 0;
 const lite = __importStar(require("vega-lite"));
 const vega = __importStar(require("vega"));
 class HTMLChartRenderer {
-    constructor(document, styleDefaults, options = {}) {
+    constructor(document, styleDefaults, options, chartOptions = {}) {
         this.document = document;
         this.styleDefaults = styleDefaults;
-        this.size = options.size || this.styleDefaults.size || "medium";
+        this.options = options;
+        this.size = chartOptions.size || this.styleDefaults.size || "medium";
     }
     mapData(data) {
         const mappedRows = [];

package/dist/html/container.d.ts

@@ -1,17 +1,9 @@
 import { Explore } from "@malloydata/malloy";
-import { DataStyles, StyleDefaults } from "../data_styles";
-import { DrillFunction } from "../drill";
-import { ChildRenderers, RenderTree } from "../renderer";
+import { StyleDefaults } from "../data_styles";
+import { ChildRenderers, RendererOptions, RenderTree } from "../renderer";
 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: {
-        isDrillingEnabled?: boolean;
-        onDrill?: DrillFunction;
-    }) => Type, document: Document, exploreField: Explore, options: {
-        dataStyles: DataStyles;
-        isDrillingEnabled?: boolean;
-        onDrill?: DrillFunction;
-    }): Type;
+    static make<Type extends ContainerRenderer>(c: new (document: Document, options: RendererOptions) => Type, document: Document, exploreField: Explore, options: RendererOptions): Type;
 }

package/dist/html/container.js

@@ -36,10 +36,7 @@ class ContainerRenderer extends renderer_1.RenderTree {
     //  we need to be fully constructed before we construct
     //  our children.
     static make(c, document, exploreField, options) {
-        const n = new c(document, {
-            "isDrillingEnabled": options.isDrillingEnabled,
-            "onDrill": options.onDrill
-        });
+        const n = new c(document, options);
         return n;
     }
 }

package/dist/html/dashboard.js

@@ -56,7 +56,7 @@ class HTMLDashboardRenderer extends container_1.ContainerRenderer {
                 renderedDimension.style.cssText = DIMENSION_BOX;
                 const dimensionTitle = this.document.createElement("div");
                 dimensionTitle.style.cssText = DIMENSION_TITLE;
-                dimensionTitle.appendChild(this.document.createTextNode(field.name));
+                dimensionTitle.appendChild(this.document.createTextNode((0, utils_1.formatTitle)(this.options, field.name, this.options.dataStyles[field.name])));
                 const dimensionInner = this.document.createElement("div");
                 dimensionInner.style.cssText = VERTICAL_CENTER;
                 dimensionInner.appendChild(rendered);
@@ -87,7 +87,7 @@ class HTMLDashboardRenderer extends container_1.ContainerRenderer {
                     measureBox.style.cssText = MEASURE_BOX;
                     const measureTitle = this.document.createElement("div");
                     measureTitle.style.cssText = TITLE;
-                    measureTitle.appendChild(this.document.createTextNode(field.name));
+                    measureTitle.appendChild(this.document.createTextNode((0, utils_1.formatTitle)(this.options, field.name, this.options.dataStyles[field.name])));
                     const measureInner = this.document.createElement("div");
                     measureInner.style.cssText = VERTICAL_CENTER;
                     const innerInner = this.document.createElement("div");
@@ -103,7 +103,7 @@ class HTMLDashboardRenderer extends container_1.ContainerRenderer {
                     measureBox.style.cssText = MEASURE_BOX;
                     const measureTitle = this.document.createElement("div");
                     measureTitle.style.cssText = TITLE;
-                    measureTitle.appendChild(this.document.createTextNode(field.name));
+                    measureTitle.appendChild(this.document.createTextNode((0, utils_1.formatTitle)(this.options, field.name, this.options.dataStyles[field.name])));
                     const measureInner = this.document.createElement("div");
                     measureInner.style.cssText = VERTICAL_CENTER;
                     const innerInner = this.document.createElement("div");

package/dist/html/html_view.d.ts

@@ -1,23 +1,14 @@
 import { DataArray, Explore, Field } from "@malloydata/malloy";
-import { DataStyles, StyleDefaults } from "../data_styles";
-import { Renderer } from "../renderer";
-import { DrillFunction } from "../drill";
+import { StyleDefaults } from "../data_styles";
+import { RendererOptions, Renderer } from "../renderer";
 export declare class HTMLView {
-    private readonly document;
+    private document;
     constructor(document: Document);
-    render(table: DataArray, options: {
-        dataStyles: DataStyles;
-        isDrillingEnabled?: boolean;
-        onDrill?: DrillFunction;
-    }): Promise<HTMLElement>;
+    render(table: DataArray, options: RendererOptions): Promise<HTMLElement>;
 }
 export declare class JSONView {
-    private readonly document;
+    private document;
     constructor(document: Document);
     render(table: DataArray): Promise<HTMLElement>;
 }
-export declare function makeRenderer(field: Explore | Field, document: Document, options: {
-    dataStyles: DataStyles;
-    isDrillingEnabled?: boolean;
-    onDrill?: DrillFunction;
-}, styleDefaults: StyleDefaults): Renderer;
+export declare function makeRenderer(field: Explore | Field, document: Document, options: RendererOptions, styleDefaults: StyleDefaults): Renderer;

package/dist/html/html_view.js

@@ -96,7 +96,23 @@ class JSONView {
     }
 }
 exports.JSONView = JSONView;
+const suffixMap = {
+    "_shape_map": "shape_map",
+    "_point_map": "point_map",
+    "_bar_chart": "bar_chart",
+    "_image": "image",
+    "_json": "json",
+    "_segment_map": "segment_map",
+    "_dashboard": "dashboard",
+    "_line_chart": "line_chart",
+    "_scatter_chart": "scatter_chart",
+    "_url": "link",
+    "_list": "list",
+    "_list_detail": "list_detail"
+};
 function getRendererOptions(field, dataStyles) {
+    var _a, _b, _c;
+    var _d;
     let renderer = dataStyles[field.name];
     if (!renderer) {
         for (const sourceClass of field.sourceClasses) {
@@ -105,6 +121,26 @@ function getRendererOptions(field, dataStyles) {
             }
         }
     }
+    for (const suffix in suffixMap) {
+        const { name } = field;
+        if (name.endsWith(suffix)) {
+            const label = name.slice(0, name.length - suffix.length);
+            if (renderer) {
+                (_a = renderer.renderer) !== null && _a !== void 0 ? _a : (renderer.renderer = suffixMap[suffix]);
+                (_b = renderer.data) !== null && _b !== void 0 ? _b : (renderer.data = {});
+                (_c = (_d = renderer.data).label) !== null && _c !== void 0 ? _c : (_d.label = label);
+            }
+            else {
+                renderer = {
+                    "renderer": suffixMap[suffix],
+                    "data": {
+                        label
+                    }
+                };
+            }
+            break;
+        }
+    }
     return renderer;
 }
 function isContainer(field) {
@@ -117,51 +153,44 @@ function isContainer(field) {
 }
 function makeRenderer(field, document, options, styleDefaults) {
     const renderDef = getRendererOptions(field, options.dataStyles) || {};
-    if (renderDef.renderer === "shape_map" || field.name.endsWith("_shape_map")) {
-        return new shape_map_1.HTMLShapeMapRenderer(document, styleDefaults, renderDef);
+    options.dataStyles[field.name] = renderDef;
+    if (renderDef.renderer === "shape_map") {
+        return new shape_map_1.HTMLShapeMapRenderer(document, styleDefaults, options, renderDef);
     }
-    else if (renderDef.renderer === "point_map" ||
-        field.name.endsWith("_point_map")) {
-        return new point_map_1.HTMLPointMapRenderer(document, styleDefaults);
+    else if (renderDef.renderer === "point_map") {
+        return new point_map_1.HTMLPointMapRenderer(document, styleDefaults, options, renderDef);
     }
-    else if (renderDef.renderer === "image" || field.name.endsWith("_image")) {
+    else if (renderDef.renderer === "image") {
         return new image_1.HTMLImageRenderer(document);
     }
-    else if (renderDef.renderer === "segment_map" ||
-        field.name.endsWith("_segment_map")) {
-        return new segment_map_1.HTMLSegmentMapRenderer(document, styleDefaults, renderDef);
+    else if (renderDef.renderer === "segment_map") {
+        return new segment_map_1.HTMLSegmentMapRenderer(document, styleDefaults, options, renderDef);
     }
-    else if (renderDef.renderer === "dashboard" ||
-        field.name.endsWith("_dashboard")) {
+    else if (renderDef.renderer === "dashboard") {
         return makeContainerRenderer(dashboard_1.HTMLDashboardRenderer, document, isContainer(field), options);
     }
-    else if (renderDef.renderer === "json" || field.name.endsWith("_json")) {
+    else if (renderDef.renderer === "json") {
         return new json_1.HTMLJSONRenderer(document);
     }
-    else if (renderDef.renderer === "line_chart" ||
-        field.name.endsWith("_line_chart")) {
-        return new line_chart_1.HTMLLineChartRenderer(document, styleDefaults, renderDef);
+    else if (renderDef.renderer === "line_chart") {
+        return new line_chart_1.HTMLLineChartRenderer(document, styleDefaults, options, renderDef);
     }
-    else if (renderDef.renderer === "scatter_chart" ||
-        field.name.endsWith("_scatter_chart")) {
-        return new scatter_chart_1.HTMLScatterChartRenderer(document, styleDefaults);
+    else if (renderDef.renderer === "scatter_chart") {
+        return new scatter_chart_1.HTMLScatterChartRenderer(document, styleDefaults, options, renderDef);
     }
     else if (renderDef.renderer === "bar_chart") {
-        return new bar_chart_1.HTMLBarChartRenderer(document, styleDefaults, renderDef);
-    }
-    else if (field.name.endsWith("_bar_chart")) {
-        return new bar_chart_1.HTMLBarChartRenderer(document, styleDefaults, {});
+        return new bar_chart_1.HTMLBarChartRenderer(document, styleDefaults, options, renderDef);
     }
     else if (renderDef.renderer === "vega") {
         const spec = renderDef.spec;
         if (spec) {
-            return new vega_spec_1.HTMLVegaSpecRenderer(document, styleDefaults, spec);
+            return new vega_spec_1.HTMLVegaSpecRenderer(document, styleDefaults, options, spec);
         }
         else if (renderDef.spec_name) {
             const vegaRenderer = options.dataStyles[renderDef.spec_name];
             if (vegaRenderer !== undefined && vegaRenderer.renderer === "vega") {
                 if (vegaRenderer.spec) {
-                    return new vega_spec_1.HTMLVegaSpecRenderer(document, styleDefaults, vegaRenderer.spec);
+                    return new vega_spec_1.HTMLVegaSpecRenderer(document, styleDefaults, options, vegaRenderer.spec);
                 }
                 else {
                     throw new Error(`No spec defined on ${renderDef.spec_name}`);
@@ -204,14 +233,13 @@ function makeRenderer(field, document, options, styleDefaults) {
                 field.type === malloy_1.AtomicFieldType.Boolean)) {
             return new boolean_1.HTMLBooleanRenderer(document);
         }
-        else if (renderDef.renderer === "link" || field.name.endsWith("_url")) {
+        else if (renderDef.renderer === "link") {
             return new link_1.HTMLLinkRenderer(document);
         }
-        else if (renderDef.renderer === "list" || field.name.endsWith("_list")) {
+        else if (renderDef.renderer === "list") {
             return makeContainerRenderer(list_1.HTMLListRenderer, document, isContainer(field), options);
         }
-        else if (renderDef.renderer === "list_detail" ||
-            field.name.endsWith("_list_detail")) {
+        else if (renderDef.renderer === "list_detail") {
             return makeContainerRenderer(list_detail_1.HTMLListDetailRenderer, document, isContainer(field), options);
         }
         else if (renderDef.renderer === "table" ||

package/dist/html/point_map.js

@@ -68,7 +68,7 @@ class HTMLPointMapRenderer extends chart_1.HTMLChartRenderer {
             ? {
                 "field": colorField.name,
                 "type": colorType,
-                "axis": { "title": colorField.name },
+                "axis": { "title": (0, utils_1.formatTitle)(this.options, colorField.name) },
                 "scale": (0, utils_1.getColorScale)(colorType, false)
             }
             : undefined;
@@ -76,14 +76,14 @@ class HTMLPointMapRenderer extends chart_1.HTMLChartRenderer {
             ? {
                 "field": sizeField.name,
                 "type": sizeType,
-                "axis": { "title": sizeField.name }
+                "axis": { "title": (0, utils_1.formatTitle)(this.options, sizeField.name) }
             }
             : { "value": 5 };
         const shapeDef = shapeField
             ? {
                 "field": shapeField.name,
                 "type": shapeType,
-                "axis": { "title": shapeField.name }
+                "axis": { "title": (0, utils_1.formatTitle)(this.options, shapeField.name) }
             }
             : { "value": "circle" };
         return {

package/dist/html/segment_map.js

@@ -63,7 +63,7 @@ class HTMLSegmentMapRenderer extends chart_1.HTMLChartRenderer {
             ? {
                 "field": colorField.name,
                 "type": colorType,
-                "axis": { "title": colorField.name },
+                "axis": { "title": (0, utils_1.formatTitle)(this.options, colorField.name) },
                 "scale": (0, utils_1.getColorScale)(colorType, false)
             }
             : undefined;

package/dist/html/shape_map.js

@@ -94,7 +94,7 @@ class HTMLShapeMapRenderer extends chart_1.HTMLChartRenderer {
             ? {
                 "field": colorField.name,
                 "type": colorType,
-                "axis": { "title": colorField.name },
+                "axis": { "title": (0, utils_1.formatTitle)(this.options, colorField.name) },
                 "scale": (0, utils_1.getColorScale)(colorType, false)
             }
             : undefined;

package/dist/html/table.js

@@ -40,7 +40,7 @@ class HTMLTableRenderer extends container_1.ContainerRenderer {
         }
         const header = this.document.createElement("tr");
         table.field.intrinsicFields.forEach((field) => {
-            const name = field.name;
+            const name = (0, utils_1.formatTitle)(this.options, field.name, this.options.dataStyles[field.name]);
             const childRenderer = this.childRenderers[name];
             const isNumeric = childRenderer instanceof number_1.HTMLNumberRenderer;
             const headerCell = this.document.createElement("th");

package/dist/html/utils.d.ts

@@ -1,4 +1,6 @@
 import { DateTimeframe, TimestampTimeframe } from "@malloydata/malloy";
+import { RenderDef } from "../data_styles";
+import type { RendererOptions } from "../renderer";
 export declare function getColorScale(type: "temporal" | "ordinal" | "quantitative" | "nominal" | undefined, isRectMark: boolean, hasOverlappingText?: boolean): {
     range: string[];
 } | undefined;
@@ -7,3 +9,4 @@ export declare function yieldTask(): Promise<void>;
 export declare function createErrorElement(document: Document, error: string | Error): HTMLElement;
 export declare function createNullElement(document: Document): HTMLElement;
 export declare function createDrillIcon(document: Document): HTMLElement;
+export declare function formatTitle(options: RendererOptions, name: string, renderDef?: RenderDef | undefined): string;

package/dist/html/utils.js

@@ -21,9 +21,13 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createDrillIcon = exports.createNullElement = exports.createErrorElement = exports.yieldTask = exports.timeToString = exports.getColorScale = void 0;
+exports.formatTitle = exports.createDrillIcon = exports.createNullElement = exports.createErrorElement = exports.yieldTask = exports.timeToString = exports.getColorScale = void 0;
 const malloy_1 = require("@malloydata/malloy");
+const startCase_1 = __importDefault(require("lodash/startCase"));
 function getColorScale(type, isRectMark, hasOverlappingText = false) {
     if (type === undefined) {
         return undefined;
@@ -191,4 +195,10 @@ function createDrillIcon(document) {
     return drill;
 }
 exports.createDrillIcon = createDrillIcon;
+function formatTitle(options, name, renderDef) {
+    var _a;
+    const label = ((_a = renderDef === null || renderDef === void 0 ? void 0 : renderDef.data) === null || _a === void 0 ? void 0 : _a.label) || name;
+    return options.titleCase ? (0, startCase_1.default)(label) : label;
+}
+exports.formatTitle = formatTitle;
 //# sourceMappingURL=utils.js.map

package/dist/html/vega_spec.d.ts

@@ -2,13 +2,14 @@ import * as lite from "vega-lite";
 import { DataColumn, Explore, Field } from "@malloydata/malloy";
 import { HTMLChartRenderer } from "./chart";
 import { StyleDefaults } from "../data_styles";
+import { RendererOptions } from "../renderer";
 declare type DataContainer = Array<unknown> | Record<string, unknown>;
 export declare const DEFAULT_SPEC: Partial<lite.TopLevelSpec>;
 export declare const vegaSpecs: Record<string, lite.TopLevelSpec>;
 export declare function isDataContainer(a: unknown): a is DataContainer;
 export declare class HTMLVegaSpecRenderer extends HTMLChartRenderer {
     spec: lite.TopLevelSpec;
-    constructor(document: Document, styleDefaults: StyleDefaults, spec: lite.TopLevelSpec);
+    constructor(document: Document, styleDefaults: StyleDefaults, options: RendererOptions, spec: lite.TopLevelSpec);
     getDataValue(data: DataColumn): Date | string | number | null;
     getDataType(field: Field): "ordinal" | "quantitative" | "nominal";
     translateField(explore: Explore, fieldString: string): string;

package/dist/html/vega_spec.js

@@ -422,8 +422,8 @@ function isDataContainer(a) {
 }
 exports.isDataContainer = isDataContainer;
 class HTMLVegaSpecRenderer extends chart_1.HTMLChartRenderer {
-    constructor(document, styleDefaults, spec) {
-        super(document, styleDefaults);
+    constructor(document, styleDefaults, options, spec) {
+        super(document, styleDefaults, options);
         this.spec = spec;
     }
     getDataValue(data) {

package/dist/renderer.d.ts

@@ -1,4 +1,5 @@
 import { DataColumn } from "@malloydata/malloy";
+import { DataStyles } from "./data_styles";
 import { DrillFunction } from "./drill";
 export declare type ChildRenderers = {
     [fieldName: string]: Renderer;
@@ -6,16 +7,16 @@ export declare type ChildRenderers = {
 export interface Renderer {
     render(value: DataColumn): Promise<HTMLElement>;
 }
+export interface RendererOptions {
+    dataStyles: DataStyles;
+    isDrillingEnabled?: boolean;
+    onDrill?: DrillFunction;
+    titleCase?: boolean;
+}
 export declare abstract class RenderTree implements Renderer {
     protected readonly document: Document;
-    protected readonly options: {
-        isDrillingEnabled?: boolean;
-        onDrill?: DrillFunction;
-    };
-    constructor(document: Document, options: {
-        isDrillingEnabled?: boolean;
-        onDrill?: DrillFunction;
-    });
+    protected readonly options: RendererOptions;
+    constructor(document: Document, options: RendererOptions);
     protected abstract get childRenderers(): ChildRenderers;
     abstract render(value: DataColumn): Promise<HTMLElement>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/render",
-  "version": "0.0.24-dev230224011252",
+  "version": "0.0.24-dev230224184907",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,7 +18,8 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@malloydata/malloy": "^0.0.24-dev230224011252",
+    "@malloydata/malloy": "^0.0.24-dev230224184907",
+    "lodash": "^4.17.20",
     "us-atlas": "^3.0.0",
     "vega": "^5.21.0",
     "vega-lite": "^5.2.0"