diff --git a/frontend/src2/charts/components/BarChartConfigForm.vue b/frontend/src2/charts/components/BarChartConfigForm.vue index 201699ef..c19afd85 100644 --- a/frontend/src2/charts/components/BarChartConfigForm.vue +++ b/frontend/src2/charts/components/BarChartConfigForm.vue @@ -52,6 +52,12 @@ watchEffect(() => { + diff --git a/frontend/src2/charts/helpers.ts b/frontend/src2/charts/helpers.ts index 2ddf6f0e..3315ed7e 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 1776bec7..ddb7671b 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 DonutChartConfig = { 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 = { enable_color_scale?: boolean } -export type ChartConfig = LineChartConfig | BarChartConfig | NumberChartConfig | DonutChartConfig | TableChartConfig | FunnelChartConfig +export type ChartConfig = + | LineChartConfig + | BarChartConfig + | NumberChartConfig + | DonutChartConfig + | TableChartConfig + | FunnelChartConfig \ No newline at end of file