houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Dashboards] Fix chart axis label behavior (#17011)

Browse Source 
- Axis labels now respect `axisNameDisplay` config when chart has no
data (previously always showed both) - fixed for bar and line charts
- Horizontal bar charts now correctly map axis settings to visual
positions:
    - "X axis" setting → bottom axis (value)
    - "Y axis" setting → left axis (category)
    
video QA



https://github.com/user-attachments/assets/5bf32294-9a5e-4aa6-b3fd-0d4e33608d14
This commit is contained in:
nitin
2026-01-08 18:04:39 +05:30
committed by GitHub
parent 7a8f795dce
commit 7fff8c8234
2 changed files with 24 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/transformGroupByDataToBarChartData.ts
+24 -23
View File
@@ -95,35 +95,36 @@ export const transformGroupByDataToBarChartData = ({
const queryResultGqlFieldName =
getGroupByQueryResultGqlFieldName(objectMetadataItem);
const rawResults = groupByData?.[queryResultGqlFieldName];
const hasNoData =
!isDefined(groupByData) ||
!isDefined(rawResults) ||
!Array.isArray(rawResults) ||
rawResults.length === 0;
const showXAxis =
hasNoData ||
configuration.axisNameDisplay === AxisNameDisplay.X ||
configuration.axisNameDisplay === AxisNameDisplay.BOTH;
const showYAxis =
hasNoData ||
configuration.axisNameDisplay === AxisNameDisplay.Y ||
configuration.axisNameDisplay === AxisNameDisplay.BOTH;
const xAxisLabel =
showXAxis && isDefined(groupByFieldX) ? groupByFieldX.label : undefined;
const yAxisLabel =
showYAxis && isDefined(aggregateField)
? `${getAggregateOperationLabel(configuration.aggregateOperation)} of ${aggregateField.label}`
: undefined;
const layout =
configuration.layout === BarChartLayout.HORIZONTAL
? BarChartLayout.HORIZONTAL
: BarChartLayout.VERTICAL;
const isHorizontal = layout === BarChartLayout.HORIZONTAL;
const showCategoryLabel = isHorizontal
? configuration.axisNameDisplay === AxisNameDisplay.Y ||
configuration.axisNameDisplay === AxisNameDisplay.BOTH
: configuration.axisNameDisplay === AxisNameDisplay.X ||
configuration.axisNameDisplay === AxisNameDisplay.BOTH;
const showValueLabel = isHorizontal
? configuration.axisNameDisplay === AxisNameDisplay.X ||
configuration.axisNameDisplay === AxisNameDisplay.BOTH
: configuration.axisNameDisplay === AxisNameDisplay.Y ||
configuration.axisNameDisplay === AxisNameDisplay.BOTH;
const xAxisLabel =
showCategoryLabel && isDefined(groupByFieldX)
? groupByFieldX.label
: undefined;
const yAxisLabel =
showValueLabel && isDefined(aggregateField)
? `${getAggregateOperationLabel(configuration.aggregateOperation)} of ${aggregateField.label}`
: undefined;
if (!isDefined(groupByData)) {
return {
...EMPTY_BAR_CHART_RESULT,
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/utils/transformGroupByDataToLineChartData.ts
-7
View File
@@ -82,19 +82,12 @@ export const transformGroupByDataToLineChartData = ({
const queryResultGqlFieldName =
getGroupByQueryResultGqlFieldName(objectMetadataItem);
const rawResults = groupByData?.[queryResultGqlFieldName];
const hasNoData =
!isDefined(groupByData) ||
!isDefined(rawResults) ||
!Array.isArray(rawResults) ||
rawResults.length === 0;
const showXAxis =
hasNoData ||
configuration.axisNameDisplay === AxisNameDisplay.X ||
configuration.axisNameDisplay === AxisNameDisplay.BOTH;
const showYAxis =
hasNoData ||
configuration.axisNameDisplay === AxisNameDisplay.Y ||
configuration.axisNameDisplay === AxisNameDisplay.BOTH;