feat: add rotate labels feature for bar chart

frappe · Dec 10, 2024 · 6f06125 · 6f06125
1 parent d6a0bdf
commit 6f06125
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/frontend/src2/charts/components/BarChartConfigForm.vue b/frontend/src2/charts/components/BarChartConfigForm.vue
@@ -52,6 +52,12 @@ const hasAxisSplit = computed(() => {
 			<Checkbox label="Normalize" v-model="(y_axis as YAxisBar).normalize" />
 		</template>
 	</YAxisConfig>
+	<FormControl
+		v-model="config.label_rotation"
+		label="Rotate Labels (degrees)"
+		type="number"
+		placeholder="0"
+	/>
 
 	<SplitByConfig v-model="config.split_by" :dimensions="props.dimensions" />
 </template>
diff --git a/frontend/src2/charts/helpers.ts b/frontend/src2/charts/helpers.ts
@@ -148,6 +148,16 @@ export function getBarChartOptions(config: BarChartConfig, result: QueryResult,
 	const hasRightAxis = config.y_axis.series.some((s) => s.align === 'Right')
 	const yAxis = !hasRightAxis ? [leftYAxis] : [leftYAxis, rightYAxis]
 
+	const labelRotation = Math.max(0, Math.min(config.label_rotation || 0, 90))
+
+	const updatedXAxis = {
+		...xAxis,
+		axisLabel: {
+			...(xAxis.axisLabel || {}),
+			rotate: labelRotation,
+		},
+	}
+
 	const sortedRows = xAxisIsDate
 		? _rows.sort((a, b) => {
 				const a_date = new Date(a[config.x_axis.dimension_name])
@@ -186,8 +196,8 @@ export function getBarChartOptions(config: BarChartConfig, result: QueryResult,
 		animationDuration: 700,
 		color: colors,
 		grid: getGrid({ show_legend }),
-		xAxis: swapAxes ? yAxis : xAxis,
-		yAxis: swapAxes ? xAxis : yAxis,
+		xAxis: swapAxes ? yAxis : updatedXAxis,
+		yAxis: swapAxes ? updatedXAxis : yAxis,
 		series: number_columns.map((c, idx) => {
 			const serie = getSerie(config, c.name)
 			const is_right_axis = serie.align === 'Right'
@@ -266,6 +276,10 @@ function getXAxis(options: XAxisCustomizeOptions = {}) {
 		splitLine: { show: false },
 		axisLine: { show: true },
 		axisTick: { show: false },
+		axisLabel: {
+			show: true,
+			rotate: 0,
+		},
 	}
 }
 

diff --git a/frontend/src2/types/chart.types.ts b/frontend/src2/types/chart.types.ts
@@ -1,4 +1,4 @@
-import { Dimension, Measure } from "./query.types"
+import { Dimension, Measure } from './query.types'
 
 export const AXIS_CHARTS = ['Bar', 'Line', 'Row']
 export type AxisChartType = (typeof AXIS_CHARTS)[number]
@@ -51,6 +51,7 @@ export type SeriesBar = Series & {
 
 export type BarChartConfig = AxisChartConfig & {
 	y_axis: YAxisBar
+	label_rotation?: number
 }
 export type LineChartConfig = AxisChartConfig & {
 	y_axis: YAxisLine
@@ -83,7 +84,7 @@ export type DountChartConfig = {
 	label_column: Dimension
 	value_column: Measure
 	legend_position?: 'top' | 'bottom' | 'left' | 'right'
-	show_inline_labels?: boolean;
+	show_inline_labels?: boolean
 }
 export type FunnelChartConfig = {
 	label_column: Dimension
@@ -100,4 +101,10 @@ export type TableChartConfig = {
 	conditional_formatting?: boolean
 }
 
-export type ChartConfig = LineChartConfig | BarChartConfig | NumberChartConfig | DountChartConfig | TableChartConfig | FunnelChartConfig
+export type ChartConfig =
+	| LineChartConfig
+	| BarChartConfig
+	| NumberChartConfig
+	| DountChartConfig
+	| TableChartConfig
+	| FunnelChartConfig