feat: refactor widget structure and add chart label type option

- Refactor widget to only contain positioning data (position_x, position_y, width, height, query_id)
- Move widget display properties (widget_type, chart_type, widget_options) to SavedQuery
- Add dashboard-widget component to handle data fetching and widget rendering
- Display widget name from saved query in widget header
- Add drag and resize support for widgets in edit mode using angular-gridster2 v20
- Add "Label Type" option for bar/line charts with "Values" and "Datetime" options
- Update all widget renderer tests to use new structure with preloaded data

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: gugu

frontend/package.json

@@ -36,7 +36,7 @@
 		"@zxcvbn-ts/core": "^3.0.4",
 		"@zxcvbn-ts/language-en": "^3.0.2",
 		"amplitude-js": "^8.21.9",
-		"angular-gridster2": "^21.0.1",
+		"angular-gridster2": "^20.0.0",
 		"angular-password-strength-meter": "npm:@eresearchqut/angular-password-strength-meter@^13.0.7",
 		"angulartics2": "^14.1.0",
 		"chart.js": "^4.5.1",

frontend/src/app/components/charts/chart-delete-dialog/chart-delete-dialog.component.spec.ts

@@ -25,6 +25,9 @@ describe('ChartDeleteDialogComponent', () => {
 		id: '1',
 		name: 'Test Query',
 		description: 'Test description',
+		widget_type: 'chart',
+		chart_type: 'bar',
+		widget_options: null,
 		query_text: 'SELECT * FROM users',
 		connection_id: 'conn-1',
 		created_at: '2024-01-01',

frontend/src/app/components/charts/chart-edit/chart-edit.component.html

@@ -84,6 +84,15 @@ <h3>Chart Preview</h3>
                         </mat-select>
                     </mat-form-field>
 
+                    <mat-form-field appearance="outline" class="chart-config-field" *ngIf="showLabelTypeOption()">
+                        <mat-label>Label Type</mat-label>
+                        <mat-select [ngModel]="labelType()" (ngModelChange)="labelType.set($event)" data-testid="label-type-select">
+                            <mat-option *ngFor="let type of labelTypes" [value]="type.value">
+                                {{ type.label }}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+
                     <mat-form-field appearance="outline" class="chart-config-field">
                         <mat-label>Value Column</mat-label>
                         <mat-select [ngModel]="valueColumn()" (ngModelChange)="valueColumn.set($event)" data-testid="value-column-select">
@@ -99,7 +108,8 @@ <h3>Chart Preview</h3>
                         [chartType]="chartType()"
                         [data]="testResults()"
                         [labelColumn]="labelColumn()"
-                        [valueColumn]="valueColumn()">
+                        [valueColumn]="valueColumn()"
+                        [labelType]="labelType()">
                     </app-chart-preview>
                 </div>
 

frontend/src/app/components/charts/chart-edit/chart-edit.component.spec.ts

@@ -46,6 +46,9 @@ describe('ChartEditComponent', () => {
 		id: '1',
 		name: 'Test Query',
 		description: 'Test description',
+		widget_type: 'chart',
+		chart_type: 'bar',
+		widget_options: { label_column: 'name', value_column: 'count' },
 		query_text: 'SELECT * FROM users',
 		connection_id: 'conn-1',
 		created_at: '2024-01-01',
@@ -228,6 +231,9 @@ describe('ChartEditComponent', () => {
 				name: 'New Query',
 				description: undefined,
 				query_text: 'SELECT 1',
+				widget_type: 'chart',
+				chart_type: 'bar',
+				widget_options: undefined,
 			});
 		});
 

frontend/src/app/components/charts/chart-edit/chart-edit.component.ts

@@ -63,6 +63,7 @@ export class ChartEditComponent implements OnInit {
 	protected chartType = signal<ChartType>('bar');
 	protected labelColumn = signal('');
 	protected valueColumn = signal('');
+	protected labelType = signal<'values' | 'datetime'>('values');
 
 	public chartTypes: { value: ChartType; label: string }[] = [
 		{ value: 'bar', label: 'Bar Chart' },
@@ -72,6 +73,13 @@ export class ChartEditComponent implements OnInit {
 		{ value: 'polarArea', label: 'Polar Area Chart' },
 	];
 
+	public labelTypes: { value: 'values' | 'datetime'; label: string }[] = [
+		{ value: 'values', label: 'Values' },
+		{ value: 'datetime', label: 'Datetime' },
+	];
+
+	protected showLabelTypeOption = computed(() => ['bar', 'line'].includes(this.chartType()));
+
 	// Use a signal for codeModel to ensure change detection works on load
 	// Only update this signal when loading a query, not during typing (to preserve cursor position)
 	protected codeModel = signal({
@@ -140,6 +148,21 @@ export class ChartEditComponent implements OnInit {
 					this.queryName.set(query.name);
 					this.queryDescription.set(query.description || '');
 					this.queryText.set(query.query_text);
+					// Load chart configuration
+					if (query.chart_type) {
+						this.chartType.set(query.chart_type);
+					}
+					if (query.widget_options) {
+						if (query.widget_options['label_column']) {
+							this.labelColumn.set(query.widget_options['label_column'] as string);
+						}
+						if (query.widget_options['value_column']) {
+							this.valueColumn.set(query.widget_options['value_column'] as string);
+						}
+						if (query.widget_options['label_type']) {
+							this.labelType.set(query.widget_options['label_type'] as 'values' | 'datetime');
+						}
+					}
 					// Set codeModel value for Monaco editor (only on load, not during typing)
 					this.codeModel.set({ language: 'sql', uri: 'query.sql', value: query.query_text });
 					// Automatically test the query to show chart preview
@@ -190,10 +213,25 @@ export class ChartEditComponent implements OnInit {
 
 		this.saving.set(true);
 
+		// Build widget_options with column selections
+		const widgetOptions: Record<string, unknown> = {};
+		if (this.labelColumn()) {
+			widgetOptions['label_column'] = this.labelColumn();
+		}
+		if (this.valueColumn()) {
+			widgetOptions['value_column'] = this.valueColumn();
+		}
+		if (this.labelType() && this.showLabelTypeOption()) {
+			widgetOptions['label_type'] = this.labelType();
+		}
+
 		const payload = {
 			name: this.queryName(),
 			description: this.queryDescription() || undefined,
 			query_text: this.queryText(),
+			widget_type: 'chart' as const,
+			chart_type: this.chartType(),
+			widget_options: Object.keys(widgetOptions).length > 0 ? widgetOptions : undefined,
 		};
 
 		if (this.isEditMode()) {

frontend/src/app/components/charts/chart-preview/chart-preview.component.ts

@@ -15,6 +15,7 @@ export class ChartPreviewComponent implements OnChanges {
 	@Input() data: Record<string, unknown>[] = [];
 	@Input() labelColumn = '';
 	@Input() valueColumn = '';
+	@Input() labelType: 'values' | 'datetime' = 'values';
 
 	public chartData: ChartData<ChartJsType> | null = null;
 	public chartOptions: ChartConfiguration['options'] = {
@@ -42,7 +43,13 @@ export class ChartPreviewComponent implements OnChanges {
 	];
 
 	ngOnChanges(changes: SimpleChanges): void {
-		if (changes['data'] || changes['labelColumn'] || changes['valueColumn'] || changes['chartType']) {
+		if (
+			changes['data'] ||
+			changes['labelColumn'] ||
+			changes['valueColumn'] ||
+			changes['chartType'] ||
+			changes['labelType']
+		) {
 			this.updateChartData();
 		}
 	}
@@ -57,7 +64,13 @@ export class ChartPreviewComponent implements OnChanges {
 			return;
 		}
 
-		const labels = this.data.map((row) => String(row[this.labelColumn] ?? ''));
+		const labels = this.data.map((row) => {
+			const val = row[this.labelColumn];
+			if (this.labelType === 'datetime' && val) {
+				return this.formatDatetime(val);
+			}
+			return String(val ?? '');
+		});
 		const values = this.data.map((row) => {
 			const val = row[this.valueColumn];
 			return typeof val === 'number' ? val : parseFloat(String(val)) || 0;
@@ -93,4 +106,23 @@ export class ChartPreviewComponent implements OnChanges {
 			};
 		}
 	}
+
+	private formatDatetime(value: unknown): string {
+		if (!value) return '';
+
+		try {
+			const date = new Date(value as string | number | Date);
+			if (isNaN(date.getTime())) {
+				return String(value);
+			}
+			// Format as localized date string
+			return date.toLocaleDateString(undefined, {
+				year: 'numeric',
+				month: 'short',
+				day: 'numeric',
+			});
+		} catch {
+			return String(value);
+		}
+	}
 }

frontend/src/app/components/charts/charts-list/charts-list.component.spec.ts

@@ -36,6 +36,9 @@ describe('ChartsListComponent', () => {
 		id: '1',
 		name: 'Test Query',
 		description: 'Test description',
+		widget_type: 'chart',
+		chart_type: 'bar',
+		widget_options: null,
 		query_text: 'SELECT * FROM users',
 		connection_id: 'conn-1',
 		created_at: '2024-01-01',