feat: add size property to bar and line chart plugins

packages/malloy-render/src/plugins/bar-chart/bar-chart-settings.ts

@@ -23,6 +23,16 @@ export interface BarChartSettings extends Record<string, unknown> {
   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',

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,
   };
 }

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;
 }

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,
   };
 }

packages/malloy-render/src/plugins/line-chart/line-chart-settings.ts

@@ -24,6 +24,15 @@ export interface LineChartSettings extends Record<string, unknown> {
   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',

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;
 }