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..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 @@ -23,6 +23,16 @@ export interface BarChartSettings extends Record { interactive: boolean; hideReferences: boolean; disableEmbedded: boolean; + size?: + | 'fill' + | 'spark' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | '2xl' + | {width: number; height: number}; } // Default settings object @@ -47,6 +57,7 @@ export const defaultBarChartSettings: BarChartSettings = { interactive: true, hideReferences: false, disableEmbedded: false, + size: 'fill', }; // Specific typed interface for the bar chart schema @@ -84,6 +95,7 @@ export interface IBarChartSettingsSchema extends JSONSchemaObject { interactive: JSONSchemaBoolean; hideReferences: JSONSchemaBoolean; disableEmbedded: JSONSchemaBoolean; + size?: JSONSchemaOneOf; }; } @@ -232,6 +244,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: ['fill', 'spark', '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..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 @@ -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'] = defaultBarChartSettings.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/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 2de2eba078..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 @@ -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'] = defaultLineChartSettings.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..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 @@ -24,6 +24,15 @@ export interface LineChartSettings extends Record { interactive: boolean; disableEmbedded: boolean; mode?: 'yoy' | 'normal'; + size?: + | 'fill' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | '2xl' + | {width: number; height: number}; } // Plugin options interface for JavaScript API @@ -53,6 +62,7 @@ export const defaultLineChartSettings: LineChartSettings = { interactive: true, disableEmbedded: false, mode: 'normal', + size: 'fill', }; // Specific typed interface for the line chart schema @@ -90,6 +100,7 @@ export interface ILineChartSettingsSchema extends JSONSchemaObject { interactive: JSONSchemaBoolean; disableEmbedded: JSONSchemaBoolean; mode: JSONSchemaString; + size?: JSONSchemaOneOf; }; } @@ -240,6 +251,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: ['fill', '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/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; }