From 6f0612565062d50e16ff7de02ce793a0297e8475 Mon Sep 17 00:00:00 2001
From: UmakanthKaspa <kaspaumakanth1999@gmail.com>
Date: Tue, 10 Dec 2024 11:38:18 +0000
Subject: [PATCH 1/2] feat: add rotate labels feature for bar chart

---
 .../charts/components/BarChartConfigForm.vue   |  6 ++++++
 frontend/src2/charts/helpers.ts                | 18 ++++++++++++++++--
 frontend/src2/types/chart.types.ts             | 13 ++++++++++---
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/frontend/src2/charts/components/BarChartConfigForm.vue b/frontend/src2/charts/components/BarChartConfigForm.vue
index a171afb1..4a8abc8f 100644
--- 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
index 7cfaec86..97a68304 100644
--- 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
index ec661a96..a11fd205 100644
--- 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

From c5ae3d5d34be692ccce350c5922c4cf19bf4780e Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Mon, 20 Jan 2025 16:58:33 +0530
Subject: [PATCH 2/2] refactor: move label rotation to x axis config

---
 .../charts/components/BarChartConfigForm.vue  |  8 +----
 .../src2/charts/components/XAxisConfig.vue    | 19 +++++++++--
 frontend/src2/charts/helpers.ts               | 34 +++++++------------
 frontend/src2/types/chart.types.ts            |  4 +--
 4 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/frontend/src2/charts/components/BarChartConfigForm.vue b/frontend/src2/charts/components/BarChartConfigForm.vue
index 6c3686a1..3a30b0a3 100644
--- a/frontend/src2/charts/components/BarChartConfigForm.vue
+++ b/frontend/src2/charts/components/BarChartConfigForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, watchEffect } from 'vue'
 import { BarChartConfig, XAxis, YAxisBar } from '../../types/chart.types'
-import { ColumnOption, Dimension, DimensionOption } from '../../types/query.types'
+import { ColumnOption, DimensionOption } from '../../types/query.types'
 import SplitByConfig from './SplitByConfig.vue'
 import XAxisConfig from './XAxisConfig.vue'
 import YAxisConfig from './YAxisConfig.vue'
@@ -52,12 +52,6 @@ watchEffect(() => {
 			<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/components/XAxisConfig.vue b/frontend/src2/charts/components/XAxisConfig.vue
index cd870613..f0dd259a 100644
--- a/frontend/src2/charts/components/XAxisConfig.vue
+++ b/frontend/src2/charts/components/XAxisConfig.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { watchEffect } from 'vue'
 import InlineFormControlLabel from '../../components/InlineFormControlLabel.vue'
-import { AxisChartConfig, XAxis } from '../../types/chart.types'
+import { AxisChartConfig } from '../../types/chart.types'
 import { Dimension, DimensionOption } from '../../types/query.types'
 import CollapsibleSection from './CollapsibleSection.vue'
 import DimensionPicker from './DimensionPicker.vue'
@@ -33,8 +33,21 @@ watchEffect(() => {
 				:modelValue="x_axis.dimension"
 				@update:modelValue="x_axis.dimension = $event || {}"
 			/>
-			<Checkbox label="Show Axis Label" />
-			<InlineFormControlLabel v-if="false" label="Axis Label">
+			<FormControl
+				label="Rotate Values"
+				type="select"
+				v-model="x_axis.label_rotation"
+				:options="[
+					{ label: '0°', value: 0 },
+					{ label: '30°', value: 30 },
+					{ label: '45°', value: 45 },
+					{ label: '60°', value: 60 },
+					{ label: '75°', value: 75 },
+					{ label: '90°', value: 90 },
+				]"
+			/>
+			<Checkbox label="Show Axis Title" />
+			<InlineFormControlLabel v-if="false" label="Axis Title Text">
 				<FormControl />
 			</InlineFormControlLabel>
 		</div>
diff --git a/frontend/src2/charts/helpers.ts b/frontend/src2/charts/helpers.ts
index 4931e6eb..65d1da55 100644
--- a/frontend/src2/charts/helpers.ts
+++ b/frontend/src2/charts/helpers.ts
@@ -12,14 +12,14 @@ import {
 	LineChartConfig,
 	Series,
 	SeriesLine,
+	XAxis,
 } from '../types/chart.types'
 import {
-	ColumnDataType,
 	FilterRule,
 	Operation,
 	QueryResult,
 	QueryResultColumn,
-	QueryResultRow,
+	QueryResultRow
 } from '../types/query.types'
 import { getColors, getGradientColors } from './colors'
 
@@ -47,7 +47,7 @@ export function getLineChartOptions(config: LineChartConfig, result: QueryResult
 	const number_columns = _columns.filter((c) => FIELDTYPES.NUMBER.includes(c.type))
 	const show_legend = number_columns.length > 1
 
-	const xAxis = getXAxis({ column_type: config.x_axis.dimension.data_type })
+	const xAxis = getXAxis(config.x_axis)
 	const xAxisIsDate = FIELDTYPES.DATE.includes(config.x_axis.dimension.data_type)
 	const granularity = xAxisIsDate
 		? getGranularity(config.x_axis.dimension.dimension_name, config)
@@ -141,7 +141,7 @@ export function getBarChartOptions(config: BarChartConfig, result: QueryResult,
 	const number_columns = _columns.filter((c) => FIELDTYPES.NUMBER.includes(c.type))
 	const show_legend = number_columns.length > 1
 
-	const xAxis = getXAxis({ column_type: config.x_axis.dimension.data_type })
+	const xAxis = getXAxis(config.x_axis)
 	const xAxisIsDate = FIELDTYPES.DATE.includes(config.x_axis.dimension.data_type)
 	const granularity = xAxisIsDate
 		? getGranularity(config.x_axis.dimension.dimension_name, config)
@@ -152,16 +152,6 @@ 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.dimension_name])
@@ -200,8 +190,8 @@ export function getBarChartOptions(config: BarChartConfig, result: QueryResult,
 		animationDuration: 700,
 		color: colors,
 		grid: getGrid({ show_legend }),
-		xAxis: swapAxes ? yAxis : updatedXAxis,
-		yAxis: swapAxes ? updatedXAxis : yAxis,
+		xAxis: swapAxes ? yAxis : xAxis,
+		yAxis: swapAxes ? xAxis : yAxis,
 		series: number_columns.map((c, idx) => {
 			const serie = getSerie(config, c.name)
 			const is_right_axis = serie.align === 'Right'
@@ -267,11 +257,11 @@ function getSerie(config: AxisChartConfig, number_column: string): Series {
 	)
 }
 
-type XAxisCustomizeOptions = {
-	column_type?: ColumnDataType
-}
-function getXAxis(options: XAxisCustomizeOptions = {}) {
-	const xAxisIsDate = options.column_type && FIELDTYPES.DATE.includes(options.column_type)
+function getXAxis(x_axis: XAxis) {
+	const columnType = x_axis.dimension.data_type
+	const xAxisIsDate = columnType && FIELDTYPES.DATE.includes(columnType)
+	const rotation = Math.min(Math.max(x_axis.label_rotation || 0, 0), 90)
+
 	return {
 		type: xAxisIsDate ? 'time' : 'category',
 		z: 2,
@@ -282,7 +272,7 @@ function getXAxis(options: XAxisCustomizeOptions = {}) {
 		axisTick: { show: false },
 		axisLabel: {
 			show: true,
-			rotate: 0,
+			rotate: rotation,
 		},
 	}
 }
diff --git a/frontend/src2/types/chart.types.ts b/frontend/src2/types/chart.types.ts
index 9eee7d07..65d3d4bb 100644
--- a/frontend/src2/types/chart.types.ts
+++ b/frontend/src2/types/chart.types.ts
@@ -14,6 +14,7 @@ export type AxisChartConfig = {
 
 export type XAxis = {
 	dimension: Dimension
+	label_rotation?: number
 }
 
 export type YAxis = {
@@ -55,7 +56,6 @@ export type SeriesBar = Series & {
 
 export type BarChartConfig = AxisChartConfig & {
 	y_axis: YAxisBar
-	label_rotation?: number
 }
 export type LineChartConfig = AxisChartConfig & {
 	y_axis: YAxisLine
@@ -112,4 +112,4 @@ export type ChartConfig =
 	| NumberChartConfig
 	| DonutChartConfig
 	| TableChartConfig
-	| FunnelChartConfig
\ No newline at end of file
+	| FunnelChartConfig