fix: chart dimensions when adding to dashboard from query

frontend/src/query/ChartActionButtons.vue

@@ -20,14 +20,6 @@ const dashboardOptions = computed(() => {
 
 const $notify = inject('$notify')
 function onAddToDashboard() {
-	if (query.chart.doc.chart_type == 'Auto') {
-		$notify({
-			variant: 'warning',
-			title: 'Choose a chart type',
-			message: "Chart type cannot be 'Auto' to add to dashboard",
-		})
-		return
-	}
 	showDashboardDialog.value = true
 }
 const addChartToDashboard = async () => {

frontend/src/query/resources/useQueryChart.js

@@ -46,6 +46,7 @@ export default function useQueryChart(chartName, queryTitle, queryResults) {
 	}
 
 	function _save(chartDoc) {
+		chartDoc.options.query = chart.doc.query
 		return run(() =>
 			resource.setValue.submit({
 				title: chartDoc.options.title || queryTitle,
@@ -57,12 +58,13 @@ export default function useQueryChart(chartName, queryTitle, queryResults) {
 
 	function getGuessedChart(chart_type) {
 		if (!queryResults.formattedResults.length) return
+		chart_type = chart_type || chart.doc.chart_type
 		const recommendedChart = guessChart(queryResults.formattedResults, chart_type)
 		return {
 			chart_type: recommendedChart?.type,
 			options: {
-				title: recommendedChart?.title || queryTitle,
 				...recommendedChart?.options,
+				title: recommendedChart?.options?.title || queryTitle,
 			},
 		}
 	}
@@ -81,6 +83,13 @@ export default function useQueryChart(chartName, queryTitle, queryResults) {
 	async function addToDashboard(dashboardName) {
 		if (!dashboardName || !resource.doc.name || resource.addingToDashboard) return
 		resource.addingToDashboard = true
+		if (chart.doc.chart_type == 'Auto') {
+			const guessedChart = getGuessedChart()
+			await _save({
+				chart_type: guessedChart.chart_type,
+				options: guessedChart.options,
+			})
+		}
 		await call('insights.api.dashboards.add_chart_to_dashboard', {
 			dashboard: dashboardName,
 			chart: resource.doc.name,

frontend/src/widgets/widgetDimensions.json

@@ -0,0 +1,54 @@
+{
+	"Number": {
+		"defaultWidth": 4,
+		"defaultHeight": 4
+	},
+	"Trend": {
+		"defaultWidth": 5,
+		"defaultHeight": 5
+	},
+	"Line": {
+		"defaultWidth": 10,
+		"defaultHeight": 10
+	},
+	"Scatter": {
+		"defaultWidth": 10,
+		"defaultHeight": 10
+	},
+	"Bar": {
+		"defaultWidth": 10,
+		"defaultHeight": 10
+	},
+	"Pie": {
+		"defaultWidth": 10,
+		"defaultHeight": 10
+	},
+	"Funnel": {
+		"defaultWidth": 10,
+		"defaultHeight": 10
+	},
+	"Table": {
+		"defaultWidth": 10,
+		"defaultHeight": 10
+	},
+	"Progress": {
+		"defaultWidth": 5,
+		"defaultHeight": 4
+	},
+	"Mixed Axis": {
+		"defaultWidth": 10,
+		"defaultHeight": 10
+	},
+	"Filter": {
+		"defaultWidth": 5,
+		"defaultHeight": 2
+	},
+	"Text": {
+		"defaultWidth": 8,
+		"defaultHeight": 2
+	},
+	"Pivot Table": {
+		"defaultWidth": 10,
+		"defaultHeight": 10
+	}
+}

frontend/src/widgets/widgets.js

@@ -16,6 +16,7 @@ import {
 	TrendingUp,
 } from 'lucide-vue-next'
 import { defineAsyncComponent } from 'vue'
+import widgetDimensions from './widgetDimensions.json'
 
 export const VALID_CHARTS = [
 	'Number',
@@ -38,116 +39,103 @@ const WIDGETS = {
 		component: defineAsyncComponent(() => import('./Number/Number.vue')),
 		optionsComponent: defineAsyncComponent(() => import('./Number/NumberOptions.vue')),
 		options: {},
-		defaultWidth: 4,
-		defaultHeight: 4,
+		...widgetDimensions.Number,
 	},
 	Trend: {
 		type: 'Trend',
 		icon: TrendingUp,
 		component: defineAsyncComponent(() => import('./Trend/Trend.vue')),
 		optionsComponent: defineAsyncComponent(() => import('./Trend/TrendOptions.vue')),
 		options: {},
-		defaultWidth: 5,
-		defaultHeight: 5,
+		...widgetDimensions.Trend,
 	},
 	Line: {
 		type: 'Line',
 		icon: LineChart,
 		component: defineAsyncComponent(() => import('./Line/Line.vue')),
 		optionsComponent: defineAsyncComponent(() => import('./Line/LineOptions.vue')),
 		options: {},
-		defaultWidth: 10,
-		defaultHeight: 10,
+		...widgetDimensions.Line,
 	},
 	Scatter: {
 		type: 'Scatter',
 		icon: ScatterChart,
 		component: defineAsyncComponent(() => import('./Scatter/Scatter.vue')),
 		optionsComponent: defineAsyncComponent(() => import('./Scatter/ScatterOptions.vue')),
 		options: {},
-		defaultWidth: 10,
-		defaultHeight: 10,
+		...widgetDimensions.Scatter,
 	},
 	Bar: {
 		type: 'Bar',
 		icon: BarChart3,
 		component: defineAsyncComponent(() => import('./Bar/Bar.vue')),
 		optionsComponent: defineAsyncComponent(() => import('./Bar/BarOptions.vue')),
 		options: {},
-		defaultWidth: 10,
-		defaultHeight: 10,
+		...widgetDimensions.Bar,
 	},
 	Pie: {
 		type: 'Pie',
 		icon: PieChart,
 		component: defineAsyncComponent(() => import('./Pie/Pie.vue')),
 		optionsComponent: defineAsyncComponent(() => import('./Pie/PieOptions.vue')),
 		options: {},
-		defaultWidth: 10,
-		defaultHeight: 10,
+		...widgetDimensions.Pie,
 	},
 	Funnel: {
 		type: 'Funnel',
 		icon: ListFilter,
 		component: defineAsyncComponent(() => import('./Funnel/Funnel.vue')),
 		optionsComponent: defineAsyncComponent(() => import('./Funnel/FunnelOptions.vue')),
 		options: {},
-		defaultWidth: 10,
-		defaultHeight: 10,
+		...widgetDimensions.Funnel,
 	},
 	Table: {
 		type: 'Table',
 		icon: Table,
 		component: defineAsyncComponent(() => import('./Table/Table.vue')),
 		optionsComponent: defineAsyncComponent(() => import('./Table/TableOptions.vue')),
 		options: {},
-		defaultWidth: 10,
-		defaultHeight: 10,
+		...widgetDimensions.Table,
 	},
 	Progress: {
 		type: 'Progress',
 		icon: BatteryMedium,
 		component: defineAsyncComponent(() => import('./Progress/Progress.vue')),
 		optionsComponent: defineAsyncComponent(() => import('./Progress/ProgressOptions.vue')),
 		options: {},
-		defaultWidth: 5,
-		defaultHeight: 4,
+		...widgetDimensions.Progress,
 	},
 	'Mixed Axis': {
 		type: 'Mixed Axis',
 		icon: ComboChartIcon,
 		component: defineAsyncComponent(() => import('./MixedAxis/MixedAxis.vue')),
 		optionsComponent: defineAsyncComponent(() => import('./MixedAxis/MixedAxisOptions.vue')),
 		options: {},
-		defaultWidth: 10,
-		defaultHeight: 10,
+		...widgetDimensions['Mixed Axis'],
 	},
 	Filter: {
 		type: 'Filter',
 		icon: TextCursorInput,
 		component: defineAsyncComponent(() => import('./Filter/Filter.vue')),
 		optionsComponent: defineAsyncComponent(() => import('./Filter/FilterOptions.vue')),
 		options: {},
-		defaultWidth: 5,
-		defaultHeight: 2,
+		...widgetDimensions.Filter,
 	},
 	Text: {
 		type: 'Text',
 		icon: AlignLeft,
 		component: defineAsyncComponent(() => import('./Text/Text.vue')),
 		optionsComponent: defineAsyncComponent(() => import('./Text/TextOptions.vue')),
 		options: {},
-		defaultWidth: 8,
-		defaultHeight: 2,
+		...widgetDimensions.Text,
 	},
 	'Pivot Table': {
 		type: 'Pivot Table',
 		icon: GitBranch,
 		component: defineAsyncComponent(() => import('./PivotTable/PivotTable.vue')),
 		optionsComponent: defineAsyncComponent(() => import('./PivotTable/PivotTableOptions.vue')),
 		options: {},
-		defaultWidth: 10,
-		defaultHeight: 10,
+		...widgetDimensions['Pivot Table'],
 	},
 }
 

insights/insights/doctype/insights_dashboard/utils.py

@@ -1,16 +1,26 @@
 # Copyright (c) 2022, Frappe Technologies Pvt. Ltd. and contributors
 # For license information, please see license.txt
 
+import chardet
 import frappe
 
 
+def get_frontend_file(file_path):
+    frontend_path = frappe.get_app_path("insights", "../frontend")
+    with open(frontend_path + file_path, "rb") as f:
+        data = f.read()
+        encoding = chardet.detect(data)["encoding"]
+        return data.decode(encoding)
+
+
 def guess_layout_for_chart(chart_type, dashboard):
-    # guess the width and height of the chart
-    layout = {"w": 16, "h": 10, "x": 0, "y": 0}
-    if chart_type == "Number":
-        layout["w"] = 4
-        layout["h"] = 3
-    if chart_type == "Progress":
+    file = get_frontend_file("/src/widgets/widgetDimensions.json")
+    dimensions = frappe.parse_json(file)
+    layout = {"x": 0, "y": 0}
+    if chart_type in dimensions:
+        layout["w"] = dimensions[chart_type]["defaultWidth"]
+        layout["h"] = dimensions[chart_type]["defaultHeight"]
+    else:
         layout["w"] = 4
         layout["h"] = 4