From 7034dc706b7e67b43ef6d51d980a2c694daf9630 Mon Sep 17 00:00:00 2001 From: Speros Kokenes Date: Fri, 18 Jul 2025 13:32:49 -0400 Subject: [PATCH 1/2] feat(render): add size property to bar and line chart plugins MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds support for the size property in bar and line chart visualization tags. Users can now specify chart sizes using either presets or custom dimensions: - Preset sizes: xs, sm, md, lg, xl, 2xl (e.g., # viz=bar { size=lg }) - Custom dimensions: width and height (e.g., # viz=line { size.width=400 size.height=200 }) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../plugins/bar-chart/bar-chart-settings.ts | 35 +++++++++++++++++++ .../bar-chart/get-bar_chart-settings.ts | 16 +++++++++ .../line-chart/get-line_chart-settings.ts | 16 +++++++++ .../plugins/line-chart/line-chart-settings.ts | 35 +++++++++++++++++++ 4 files changed, 102 insertions(+) diff --git a/packages/malloy-render/src/plugins/bar-chart/bar-chart-settings.ts b/packages/malloy-render/src/plugins/bar-chart/bar-chart-settings.ts index 3e8ccef174..d0a045ffbc 100644 --- a/packages/malloy-render/src/plugins/bar-chart/bar-chart-settings.ts +++ b/packages/malloy-render/src/plugins/bar-chart/bar-chart-settings.ts @@ -23,6 +23,14 @@ export interface BarChartSettings extends Record { interactive: boolean; hideReferences: boolean; disableEmbedded: boolean; + size?: + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | '2xl' + | {width: number; height: number}; } // Default settings object @@ -84,6 +92,7 @@ export interface IBarChartSettingsSchema extends JSONSchemaObject { interactive: JSONSchemaBoolean; hideReferences: JSONSchemaBoolean; disableEmbedded: JSONSchemaBoolean; + size?: JSONSchemaOneOf; }; } @@ -232,6 +241,32 @@ export const barChartSettingsSchema: IBarChartSettingsSchema = { type: 'boolean', default: false, }, + size: { + title: 'Chart Size', + description: + 'Size preset (xs, sm, md, lg, xl, 2xl) or custom dimensions with width and height', + type: 'oneOf', + oneOf: [ + { + type: 'string', + enum: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'], + }, + { + type: 'object', + properties: { + width: { + type: 'number', + minimum: 1, + }, + height: { + type: 'number', + minimum: 1, + }, + }, + required: ['width', 'height'], + }, + ], + }, }, required: [ 'xChannel', diff --git a/packages/malloy-render/src/plugins/bar-chart/get-bar_chart-settings.ts b/packages/malloy-render/src/plugins/bar-chart/get-bar_chart-settings.ts index 3602549385..65c7324daf 100644 --- a/packages/malloy-render/src/plugins/bar-chart/get-bar_chart-settings.ts +++ b/packages/malloy-render/src/plugins/bar-chart/get-bar_chart-settings.ts @@ -41,6 +41,21 @@ export function getBarChartSettings( vizTag.text('size') === 'spark' || normalizedTag.text('size') === 'spark'; const hideReferences = isSpark; + // Parse size property + let size: BarChartSettings['size']; + if (vizTag.has('size')) { + const sizeText = vizTag.text('size'); + if (sizeText && ['xs', 'sm', 'md', 'lg', 'xl', '2xl'].includes(sizeText)) { + size = sizeText as 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; + } + } else if (vizTag.has('size', 'width') && vizTag.has('size', 'height')) { + const width = vizTag.numeric('size', 'width'); + const height = vizTag.numeric('size', 'height'); + if (width !== undefined && height !== undefined) { + size = {width: width, height: height}; + } + } + // X-axis independence let xIndependent: boolean | 'auto' = defaultBarChartSettings.xChannel.independent; @@ -255,5 +270,6 @@ export function getBarChartSettings( interactive, hideReferences, disableEmbedded, + size, }; } diff --git a/packages/malloy-render/src/plugins/line-chart/get-line_chart-settings.ts b/packages/malloy-render/src/plugins/line-chart/get-line_chart-settings.ts index 2de2eba078..8a31524aaf 100644 --- a/packages/malloy-render/src/plugins/line-chart/get-line_chart-settings.ts +++ b/packages/malloy-render/src/plugins/line-chart/get-line_chart-settings.ts @@ -169,6 +169,21 @@ export function getLineChartSettings( const mode: 'yoy' | 'normal' = (vizTag.text('mode') as 'yoy' | 'normal') ?? defaultLineChartSettings.mode; + // Parse size property + let size: LineChartSettings['size']; + if (vizTag.has('size')) { + const sizeText = vizTag.text('size'); + if (sizeText && ['xs', 'sm', 'md', 'lg', 'xl', '2xl'].includes(sizeText)) { + size = sizeText as 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; + } + } else if (vizTag.has('size', 'width') && vizTag.has('size', 'height')) { + const width = vizTag.numeric('size', 'width'); + const height = vizTag.numeric('size', 'height'); + if (width !== undefined && height !== undefined) { + size = {width: width, height: height}; + } + } + const xChannel: Channel = { fields: [], type: mergedDefaults.xChannel.type, @@ -351,5 +366,6 @@ export function getLineChartSettings( interactive, disableEmbedded, mode, + size, }; } diff --git a/packages/malloy-render/src/plugins/line-chart/line-chart-settings.ts b/packages/malloy-render/src/plugins/line-chart/line-chart-settings.ts index 1a5e15078d..0b0e88e666 100644 --- a/packages/malloy-render/src/plugins/line-chart/line-chart-settings.ts +++ b/packages/malloy-render/src/plugins/line-chart/line-chart-settings.ts @@ -24,6 +24,14 @@ export interface LineChartSettings extends Record { interactive: boolean; disableEmbedded: boolean; mode?: 'yoy' | 'normal'; + size?: + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | '2xl' + | {width: number; height: number}; } // Plugin options interface for JavaScript API @@ -90,6 +98,7 @@ export interface ILineChartSettingsSchema extends JSONSchemaObject { interactive: JSONSchemaBoolean; disableEmbedded: JSONSchemaBoolean; mode: JSONSchemaString; + size?: JSONSchemaOneOf; }; } @@ -240,6 +249,32 @@ export const lineChartSettingsSchema: ILineChartSettingsSchema = { enum: ['normal', 'yoy'], default: 'normal', }, + size: { + title: 'Chart Size', + description: + 'Size preset (xs, sm, md, lg, xl, 2xl) or custom dimensions with width and height', + type: 'oneOf', + oneOf: [ + { + type: 'string', + enum: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'], + }, + { + type: 'object', + properties: { + width: { + type: 'number', + minimum: 1, + }, + height: { + type: 'number', + minimum: 1, + }, + }, + required: ['width', 'height'], + }, + ], + }, }, required: [ 'xChannel', From 49b5a3f96d1f4cd8e2b31cd443a51af7a11792be Mon Sep 17 00:00:00 2001 From: Will Scullin Date: Fri, 18 Jul 2025 14:59:40 -0700 Subject: [PATCH 2/2] feat(render): Add tag support and default --- .../src/plugins/bar-chart/bar-chart-settings.ts | 5 ++++- .../src/plugins/bar-chart/get-bar_chart-settings.ts | 2 +- .../src/plugins/bar-chart/settings-to-tag.ts | 9 +++++++++ .../src/plugins/line-chart/get-line_chart-settings.ts | 2 +- .../src/plugins/line-chart/line-chart-settings.ts | 4 +++- .../src/plugins/line-chart/settings-to-tag.ts | 9 +++++++++ 6 files changed, 27 insertions(+), 4 deletions(-) diff --git a/packages/malloy-render/src/plugins/bar-chart/bar-chart-settings.ts b/packages/malloy-render/src/plugins/bar-chart/bar-chart-settings.ts index d0a045ffbc..248d62e9fc 100644 --- a/packages/malloy-render/src/plugins/bar-chart/bar-chart-settings.ts +++ b/packages/malloy-render/src/plugins/bar-chart/bar-chart-settings.ts @@ -24,6 +24,8 @@ export interface BarChartSettings extends Record { hideReferences: boolean; disableEmbedded: boolean; size?: + | 'fill' + | 'spark' | 'xs' | 'sm' | 'md' @@ -55,6 +57,7 @@ export const defaultBarChartSettings: BarChartSettings = { interactive: true, hideReferences: false, disableEmbedded: false, + size: 'fill', }; // Specific typed interface for the bar chart schema @@ -249,7 +252,7 @@ export const barChartSettingsSchema: IBarChartSettingsSchema = { oneOf: [ { type: 'string', - enum: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'], + enum: ['fill', 'spark', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'], }, { type: 'object', diff --git a/packages/malloy-render/src/plugins/bar-chart/get-bar_chart-settings.ts b/packages/malloy-render/src/plugins/bar-chart/get-bar_chart-settings.ts index 65c7324daf..6df63232bf 100644 --- a/packages/malloy-render/src/plugins/bar-chart/get-bar_chart-settings.ts +++ b/packages/malloy-render/src/plugins/bar-chart/get-bar_chart-settings.ts @@ -42,7 +42,7 @@ export function getBarChartSettings( const hideReferences = isSpark; // Parse size property - let size: BarChartSettings['size']; + let size: BarChartSettings['size'] = defaultBarChartSettings.size; if (vizTag.has('size')) { const sizeText = vizTag.text('size'); if (sizeText && ['xs', 'sm', 'md', 'lg', 'xl', '2xl'].includes(sizeText)) { diff --git a/packages/malloy-render/src/plugins/bar-chart/settings-to-tag.ts b/packages/malloy-render/src/plugins/bar-chart/settings-to-tag.ts index 3e3a1c2661..7e7cfb18b0 100644 --- a/packages/malloy-render/src/plugins/bar-chart/settings-to-tag.ts +++ b/packages/malloy-render/src/plugins/bar-chart/settings-to-tag.ts @@ -101,5 +101,14 @@ export function barChartSettingsToTag(settings: BarChartSettings): Tag { ); } + if (settings.size) { + if (typeof settings.size === 'object') { + tag.set(['viz', 'size', 'width'], settings.size.width); + tag.set(['viz', 'size', 'height'], settings.size.height); + } else { + tag.set(['viz', 'size'], settings.size); + } + } + return tag; } diff --git a/packages/malloy-render/src/plugins/line-chart/get-line_chart-settings.ts b/packages/malloy-render/src/plugins/line-chart/get-line_chart-settings.ts index 8a31524aaf..86b7811ae6 100644 --- a/packages/malloy-render/src/plugins/line-chart/get-line_chart-settings.ts +++ b/packages/malloy-render/src/plugins/line-chart/get-line_chart-settings.ts @@ -170,7 +170,7 @@ export function getLineChartSettings( (vizTag.text('mode') as 'yoy' | 'normal') ?? defaultLineChartSettings.mode; // Parse size property - let size: LineChartSettings['size']; + let size: LineChartSettings['size'] = defaultLineChartSettings.size; if (vizTag.has('size')) { const sizeText = vizTag.text('size'); if (sizeText && ['xs', 'sm', 'md', 'lg', 'xl', '2xl'].includes(sizeText)) { diff --git a/packages/malloy-render/src/plugins/line-chart/line-chart-settings.ts b/packages/malloy-render/src/plugins/line-chart/line-chart-settings.ts index 0b0e88e666..ecb287a7e1 100644 --- a/packages/malloy-render/src/plugins/line-chart/line-chart-settings.ts +++ b/packages/malloy-render/src/plugins/line-chart/line-chart-settings.ts @@ -25,6 +25,7 @@ export interface LineChartSettings extends Record { disableEmbedded: boolean; mode?: 'yoy' | 'normal'; size?: + | 'fill' | 'xs' | 'sm' | 'md' @@ -61,6 +62,7 @@ export const defaultLineChartSettings: LineChartSettings = { interactive: true, disableEmbedded: false, mode: 'normal', + size: 'fill', }; // Specific typed interface for the line chart schema @@ -257,7 +259,7 @@ export const lineChartSettingsSchema: ILineChartSettingsSchema = { oneOf: [ { type: 'string', - enum: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'], + enum: ['fill', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'], }, { type: 'object', diff --git a/packages/malloy-render/src/plugins/line-chart/settings-to-tag.ts b/packages/malloy-render/src/plugins/line-chart/settings-to-tag.ts index 08466b0825..28a5fd431f 100644 --- a/packages/malloy-render/src/plugins/line-chart/settings-to-tag.ts +++ b/packages/malloy-render/src/plugins/line-chart/settings-to-tag.ts @@ -94,5 +94,14 @@ export function lineChartSettingsToTag(settings: LineChartSettings): Tag { ); } + if (settings.size) { + if (typeof settings.size === 'object') { + tag.set(['viz', 'size', 'width'], settings.size.width); + tag.set(['viz', 'size', 'height'], settings.size.height); + } else { + tag.set(['viz', 'size'], settings.size); + } + } + return tag; }