@malloydata/render 0.0.432 → 0.0.434

package/dist/module/plugins/combo-chart/combo-chart-plugin.d.ts

@@ -0,0 +1,15 @@
+import { RenderPluginFactory, CoreVizPluginInstance } from '../../api/plugin-types';
+import { NestField } from '../../data_tree';
+import { ComboChartSettings } from './get-combo_chart-settings';
+import { ChartDisplayConfig } from '../../component/chart/resolve-chart-display';
+export interface ComboChartPluginInstance extends CoreVizPluginInstance<ComboChartPluginMetadata> {
+    field: NestField;
+    chartDisplay: ChartDisplayConfig;
+}
+interface ComboChartPluginMetadata {
+    type: 'combo';
+    field: NestField;
+    settings: ComboChartSettings;
+}
+export declare const ComboChartPluginFactory: RenderPluginFactory<ComboChartPluginInstance>;
+export {};

package/dist/module/plugins/combo-chart/combo-chart-settings.d.ts

@@ -0,0 +1,66 @@
+import { XChannel, YChannel } from '../../component/types';
+import { JSONSchemaObject, JSONSchemaArray, JSONSchemaString, JSONSchemaNumber, JSONSchemaBoolean, JSONSchemaOneOf } from '../../api/json-schema-types';
+export declare const COMBO_MARK_TYPES: readonly ["bar", "line"];
+export type ComboMarkType = (typeof COMBO_MARK_TYPES)[number];
+export type ComboYChannel = YChannel & {
+    chart: ComboMarkType;
+    lineWidth?: number;
+    showPoints?: boolean;
+    min?: number;
+    max?: number;
+};
+export interface ComboChartSettings extends Record<string, unknown> {
+    xChannel: XChannel;
+    yChannel: ComboYChannel;
+    y2Channel: ComboYChannel;
+    interactive: boolean;
+    colorAxes: boolean;
+    disableEmbedded: boolean;
+}
+export declare const defaultComboChartSettings: ComboChartSettings;
+export interface IComboChartSettingsSchema extends JSONSchemaObject {
+    properties: {
+        xChannel: JSONSchemaObject & {
+            properties: {
+                fields: JSONSchemaArray & {
+                    items: JSONSchemaString;
+                };
+                type: JSONSchemaString;
+                independent: JSONSchemaString;
+                limit: JSONSchemaOneOf;
+            };
+        };
+        yChannel: JSONSchemaObject & {
+            properties: {
+                fields: JSONSchemaArray & {
+                    items: JSONSchemaString;
+                };
+                type: JSONSchemaString;
+                independent: JSONSchemaBoolean;
+                chart: JSONSchemaString;
+                lineWidth: JSONSchemaNumber;
+                showPoints: JSONSchemaBoolean;
+                min: JSONSchemaNumber;
+                max: JSONSchemaNumber;
+            };
+        };
+        y2Channel: JSONSchemaObject & {
+            properties: {
+                fields: JSONSchemaArray & {
+                    items: JSONSchemaString;
+                };
+                type: JSONSchemaString;
+                independent: JSONSchemaBoolean;
+                chart: JSONSchemaString;
+                lineWidth: JSONSchemaNumber;
+                showPoints: JSONSchemaBoolean;
+                min: JSONSchemaNumber;
+                max: JSONSchemaNumber;
+            };
+        };
+        interactive: JSONSchemaBoolean;
+        colorAxes: JSONSchemaBoolean;
+        disableEmbedded: JSONSchemaBoolean;
+    };
+}
+export declare const comboChartSettingsSchema: IComboChartSettingsSchema;

package/dist/module/plugins/combo-chart/generate-combo_chart-vega-spec.d.ts

@@ -0,0 +1,9 @@
+import { VegaChartProps } from '../../component/types';
+import { Config } from 'vega';
+import { RenderMetadata } from '../../component/render-result-metadata';
+import { ComboChartPluginInstance } from './combo-chart-plugin';
+/**
+ * The slice of the combo chart plugin instance the spec generator reads.
+ */
+export type ComboChartSpecInputs = Pick<ComboChartPluginInstance, 'getMetadata' | 'field' | 'chartDisplay'>;
+export declare function generateComboChartVegaSpec(metadata: RenderMetadata, plugin: ComboChartSpecInputs, vegaConfig?: Config): VegaChartProps;

package/dist/module/plugins/combo-chart/get-combo_chart-settings.d.ts

@@ -0,0 +1,5 @@
+import { Tag } from '@malloydata/malloy-tag';
+import { NestField } from '../../data_tree';
+import { ComboChartSettings } from './combo-chart-settings';
+export type { ComboChartSettings };
+export declare function getComboChartSettings(explore: NestField, tagOverride?: Tag): ComboChartSettings;

package/dist/module/plugins/combo-chart/settings-to-tag.d.ts

@@ -0,0 +1,3 @@
+import { Tag } from '@malloydata/malloy-tag';
+import { ComboChartSettings } from './combo-chart-settings';
+export declare function comboChartSettingsToTag(settings: ComboChartSettings): Tag;

package/dist/module/plugins/extract-field-name.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A chart channel's `fields` hold serialized field paths (JSON-encoded arrays).
+ * When writing them back into a tag we want the leaf field name, not the full
+ * path. Falls back to the raw string for a plain (non-JSON) value.
+ *
+ * Shared by the bar/line/combo `settings-to-tag` serializers so the extraction
+ * lives in one place.
+ */
+export declare function extractFieldName(fieldPath: string): string;

package/dist/module/plugins/index.d.ts

@@ -1,5 +1,7 @@
 export { type ILineChartSettingsSchema, lineChartSettingsSchema, defaultLineChartSettings, type LineChartSettings, } from './line-chart/line-chart-settings';
 export { type IBarChartSettingsSchema, barChartSettingsSchema, defaultBarChartSettings, type BarChartSettings, } from './bar-chart/bar-chart-settings';
 export { BarChartPluginFactory, type BarChartPluginInstance, } from './bar-chart/bar-chart-plugin';
+export { type IComboChartSettingsSchema, comboChartSettingsSchema, defaultComboChartSettings, type ComboChartSettings, } from './combo-chart/combo-chart-settings';
+export { ComboChartPluginFactory, type ComboChartPluginInstance, } from './combo-chart/combo-chart-plugin';
 export { BigValuePluginFactory, type BigValuePluginInstance, type BigValueSettings, type BigValueComparisonInfo, type ComparisonFormat, type BigValueSize, defaultBigValueSettings, bigValueSettingsSchema, type IBigValueSettingsSchema, } from './big-value';
 export { ErrorPlugin } from './error/error-plugin';

package/docs/renderer_tag_cheatsheet.md

@@ -29,6 +29,22 @@
 | `# line_chart.series.independent` | Control series legend/color sharing.       | Boolean (`true`/`false`). Overrides auto-sharing (default shares if <=20).                        | `view: my_nest is { # line_chart { series.independent } ... }`                                                                |
 | `# line_chart.title`              | Set chart title.                           | String value.                                                                                     | `view: my_view is { # line_chart { title='Trend Over Time' } ... }`                                                           |
 | `# line_chart.subtitle`           | Set chart subtitle.                        | String value.                                                                                     | `view: my_view is { # line_chart { subtitle='Daily Values' } ... }`                                                           |
+| `# combo_chart`                   | Render two measures on two independent y-axes (dual-axis). | Needs an x dimension and **two** measures. Left axis = `y`, right axis = `y2`. Defaults: `y` bars, `y2` line. The two axes are scaled independently, so where the marks cross is not meaningful. | `view: my_view is { # combo_chart { x=network y=hh_reach y2=conversion_rate } ... }`                                          |
+| `# combo_chart.y`                 | Measure(s) on the primary (left) axis.     | Field ref or array `['m1','m2']`. Auto-filled with the first measure if omitted.                  | `view: my_view is { # combo_chart { y=hh_reach } ... }`                                                                       |
+| `# combo_chart.y2`                | Measure(s) on the secondary (right) axis.  | Field ref or array. Auto-filled with the second measure if omitted.                               | `view: my_view is { # combo_chart { y2=conversion_rate } ... }`                                                               |
+| `# combo_chart.y.chart`           | Mark type for the left axis.               | `bar` or `line`. Default `bar`.                                                                   | `view: my_view is { # combo_chart { y.chart=line } ... }`                                                                     |
+| `# combo_chart.y2.chart`          | Mark type for the right axis.              | `bar` or `line`. Default `line`. Set `y.chart`/`y2.chart` to get bar-over-line or line-over-bar. Both `bar` → grouped side-by-side, not stacked. | `view: my_view is { # combo_chart { y2.chart=bar } ... }`                                                                     |
+| `# combo_chart.y2.line_width`     | Line stroke width (px) for a line axis.    | Number, default `2`. Also `y.line_width`. Ignored for bar axes.                                   | `view: my_view is { # combo_chart { y2.line_width=3 } ... }`                                                                  |
+| `# combo_chart.y2.points`         | Show/hide dots on a line axis.             | `true`/`false`; default auto (dots hidden for multi-point series). Also `y.points`. Ignored for bars. | `view: my_view is { # combo_chart { y2.points=false } ... }`                                                              |
+| `# combo_chart.y2.min` / `.y2.max`| Pin an axis's domain bounds.               | Number; either end alone. Also `y.min`/`y.max`. Pin both axes to align the crossover.                 | `view: my_view is { # combo_chart { y.min=0 y2.min=0 y2.max=100 } ... }`                                                  |
+| `# combo_chart.x`                 | Define x-axis field.                       | Assigns a field to the category axis. Auto-detected (time or first dimension) if omitted.         | `view: my_view is { # combo_chart { x=network } ... }`                                                                        |
+| `# combo_chart.x.limit`           | Limit x-axis bands.                        | Numeric value; auto-fit to plot width if unset. Notes "Showing N of M" when bands are dropped.    | `view: my_view is { # combo_chart { x.limit=20 } ... }`                                                                       |
+| `# combo_chart.color_axes`        | Tint each axis to its mark's color.        | Boolean, default `true`. Colors the axis title/ticks/line so the two scales read as separate rulers. Set `false` for neutral axes. | `view: my_view is { # combo_chart { color_axes=false } ... }`                                                                 |
+| `# combo_chart.y.independent`     | Control left-axis scale sharing.           | Boolean. Independent domains across nested chart rows.                                             | `view: my_nest is { # combo_chart { y.independent } ... }`                                                                    |
+| `# combo_chart.y2.independent`    | Control right-axis scale sharing.          | Boolean. Independent domains across nested chart rows.                                             | `view: my_nest is { # combo_chart { y2.independent } ... }`                                                                   |
+| `# combo_chart.size`              | Set preset chart size.                     | Values: `spark`, `xs`...`2xl`, or `size.width` / `size.height` in pixels.                         | `view: my_view is { # combo_chart { size=lg } ... }`                                                                          |
+| `# combo_chart.title`             | Set chart title.                           | String value.                                                                                     | `view: my_view is { # combo_chart { title='Reach vs. Rate' } ... }`                                                           |
+| `# combo_chart.subtitle`          | Set chart subtitle.                        | String value.                                                                                     | `view: my_view is { # combo_chart { subtitle='By network' } ... }`                                                            |
 | `# scatter_chart`                 | Render as scatter plot.                    | Legacy renderer. Uses field order (x, y, color, size, shape).                                     | `view: my_view is { # scatter_chart ... }`                                                                                    |
 | **Layout & Structure**            |                                            |                                                                                                   |                                                                                                                               |
 | `# dashboard`                     | Render nested views as a dashboard.        | Base tag for dashboard layout.                                                                    | `view: my_dashboard is { # dashboard nest: ... }`                                                                             |

package/docs/renderer_tags_overview.md

@@ -136,6 +136,58 @@ aggregate: daily_sales
 }
 ```
 
+### `# combo_chart`
+
+Renders two measures on two **independent** y-axes (a dual-axis chart), for the
+classic "bars + line" comparison of measures with different units or magnitudes
+(e.g. volume vs. rate, count vs. dollars). Requires an x dimension and **two**
+measures.
+
+**Properties:**
+
+- `.y`: Measure(s) on the primary (left) axis. A field ref or array `['m1','m2']`. Auto-filled with the first measure if omitted.
+  - Syntax: `# combo_chart { y=hh_reach }`
+- `.y2`: Measure(s) on the secondary (right) axis. Auto-filled with the second measure if omitted.
+  - Syntax: `# combo_chart { y2=conversion_rate }`
+- `.y.chart` / `.y2.chart`: Mark type for each axis — `bar` or `line`. Defaults: `y` is `bar`, `y2` is `line`. Assign the marks to get bar-over-line or line-over-bar. Setting **both** axes to `bar` is supported: the two groups are drawn side-by-side within each band (each keeps its own y-scale), never stacked on top of each other.
+  - Syntax: `# combo_chart { y.chart=line y2.chart=bar }`
+- `.y.line_width` / `.y2.line_width`: Stroke width in px for a line axis (default `2`). Ignored for bar axes.
+  - Syntax: `# combo_chart { y2.line_width=3 }`
+- `.y.points` / `.y2.points`: Show point markers on a line. Default is auto — dots are hidden once a series has more than one point (matching `# line_chart`), shown for a single-point series or on hover. Set `points=true` to always show dots, `points=false` to always hide them. Ignored for bar axes.
+  - Syntax: `# combo_chart { y2.points=false }`
+- `.x`, `.title`, `.subtitle`, `.size`: Similar to `# bar_chart`.
+- `.x.limit`: Cap the number of x-axis bands. A number pins it; omit for an auto limit that fits the plot width. When bands are dropped the chart notes "Showing N of M".
+  - Syntax: `# combo_chart { x.limit=20 }`
+- `.color_axes`: Whether each axis is tinted to its mark's color (default `true`). Set `false` for plain, neutral axes.
+  - Syntax: `# combo_chart { color_axes=false }`
+- `.y.independent` / `.y2.independent`: Controls each axis's domain sharing across nested charts.
+- `.y.min` / `.y.max` / `.y2.min` / `.y2.max`: Pin an axis's domain bounds. Either end can be pinned on its own; the other still comes from the data. Pinning both axes to comparable ranges is how you defuse the misleading-crossover pitfall below.
+  - Syntax: `# combo_chart { y.min=0 y2.min=0 y2.max=100 }`
+
+**Axis scaling:** each axis is scaled independently from its own measures (the
+left/bar axis includes zero). Because the two scales are independent, where the
+bars and line cross is an artifact of the chosen ranges, not the data. To keep
+this from misleading, each axis is **tinted to its mark's color** (left axis like
+the bars, right axis like the line) so the two scales read as two separate
+rulers rather than a shared one. Still: use the chart to compare *trends*, not
+absolute crossover points — or pin the axes with `y.min`/`y.max`/`y2.min`/`y2.max`
+to make the crossover meaningful.
+
+**Examples:**
+
+```
+// Smart defaults: first measure → bars (left), second → line (right)
+# combo_chart
+view: reach_and_rate is {
+  group_by: network
+  aggregate: hh_reach, conversion_rate
+}
+
+// Explicit, with swapped marks (line on left, bars on right)
+# combo_chart { x=network y=cpa y.chart=line y2=volume y2.chart=bar }
+view: cpa_and_volume is { ... }
+```
+
 ### `# scatter_chart`
 
 _Note: This currently uses the legacy renderer._

package/femto-config.motly

@@ -1,3 +1,5 @@
+# Config format: node ../../scripts/femto-build.js --help
+
 build: {
   inputs = [
     "src/**/*.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/render",
-  "version": "0.0.432",
+  "version": "0.0.434",
   "license": "MIT",
   "main": "dist/module/index.umd.js",
   "types": "dist/module/index.d.ts",
@@ -31,8 +31,8 @@
     "generate-flow": "ts-node ../../scripts/gen-flow.ts"
   },
   "dependencies": {
-    "@malloydata/malloy-interfaces": "0.0.432",
-    "@malloydata/malloy-tag": "0.0.432",
+    "@malloydata/malloy-interfaces": "0.0.434",
+    "@malloydata/malloy-tag": "0.0.434",
     "@tanstack/solid-virtual": "^3.13.33",
     "lodash": "^4.18.1",
     "luxon": "^3.7.2",
@@ -44,8 +44,8 @@
     "vega-lite": "^5.2.0"
   },
   "devDependencies": {
-    "@malloydata/db-duckdb": "0.0.432",
-    "@malloydata/malloy": "0.0.432",
+    "@malloydata/db-duckdb": "0.0.434",
+    "@malloydata/malloy": "0.0.434",
     "@storybook/addon-essentials": "^8.6.18",
     "@storybook/addon-interactions": "^8.6.18",
     "@storybook/addon-links": "^8.6.15",