feat: Display total value in the center of Donut chart based on legen…

…d placement (top, bottom, left, right).
frappe · Jan 16, 2025 · 6e90bb9 · 6e90bb9
1 parent a599c27
commit 6e90bb9
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 21 deletions.
diff --git a/frontend/src2/charts/components/DonutChartConfigForm.vue b/frontend/src2/charts/components/DonutChartConfigForm.vue
@@ -58,6 +58,7 @@ const discrete_dimensions = computed(() =>
 					{ label: 'Left', value: 'left' },
 					{ label: 'Right', value: 'right' },
 				]"
+				:value="config.legend_position || 'bottom'"
 			/>
 			<Checkbox v-model="config.show_inline_labels" label="Inline Labels" />
 			<Checkbox v-model="config.show_total_in_center" label="Show Total in Center" />

diff --git a/frontend/src2/charts/helpers.ts b/frontend/src2/charts/helpers.ts
@@ -404,7 +404,7 @@ export function getDonutChartOptions(config: DonutChartConfig, result: QueryResu
 				return `${formatNumber(value, 2)} (${percent.toFixed(0)}%)`
 			},
 		},
-		graphic: config.show_total_in_center ? getTotalGraphic(total) : undefined,
+		graphic: config.show_total_in_center ? getTotalGraphic(total,legend_position,show_inline_labels) : undefined,
 	}
 }
 
@@ -617,25 +617,48 @@ function getLegend(show_legend = true) {
 	}
 }
 
-function getTotalGraphic(total:number) {
-    return {
-        elements: [
-            {
-                type: 'text',
-                left: 'center',
-                top: 'center',
-                style: {
-                    text: `Total\n${formatNumber(total, 2)}`,
-                    fontSize: 18,
-                    fontWeight: 'bold',
-                    textAlign: 'center',
-                    lineHeight: 24,
-                    fill: '#333',
-                },
-            },
-        ],
-    }
-}
+function getTotalGraphic(total: number, legend_position: DonutChartConfig['legend_position'], show_inline_labels: boolean) {
+
+	const positions: Record<DonutChartConfig['legend_position'], [string, string]> = {
+	  left: ['65%', '46%'],
+	  right: ['31%', '46%'],
+	  top: ['48%', '50%'],
+	  bottom: ['48%', '40%'],
+	};
+
+	const [left, top] = show_inline_labels ? ['center', 'center'] : positions[legend_position];
+
+	return {
+		elements: [
+		  {
+			type: 'text',
+			left,
+			top,
+			style: {
+			  text: `${formatNumber(total, 2)}`,
+			  fontSize: 20,
+			  fontWeight: 'bold',
+			  textAlign: 'center',
+			  lineHeight: 24,
+			  fill: '#333',
+			},
+		  },
+		  {
+			type: 'text',
+			left,
+			top:  (parseFloat(top) + 5).toString() + '%',
+			style: {
+			  text: 'TOTAL',
+			  fontSize: 22,
+			  fontWeight: 'normal',
+			  textAlign: 'center',
+			  lineHeight: 24,
+			  fill: '#A0A0A0',
+			},
+		  },
+		],
+	  };
+  }
 
 export function getDrillDownQuery(
 	operations: Operation[],

diff --git a/frontend/src2/types/chart.types.ts b/frontend/src2/types/chart.types.ts
@@ -82,7 +82,7 @@ export type NumberColumnOptions = {
 export type DonutChartConfig = {
 	label_column: Dimension
 	value_column: Measure
-	legend_position?: 'top' | 'bottom' | 'left' | 'right'
+	legend_position: 'top' | 'bottom' | 'left' | 'right'
 	show_inline_labels?: boolean
 	show_total_in_center?: boolean
 	max_slices?: number