diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx index 625db27b41..ba7b68a197 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx @@ -3,7 +3,6 @@ import { GraphWidgetLegend } from '@/page-layout/widgets/graph/components/GraphW import { GraphWidgetTooltip } from '@/page-layout/widgets/graph/components/GraphWidgetTooltip'; import { CustomBarItem } from '@/page-layout/widgets/graph/graphWidgetBarChart/components/CustomBarItem'; import { CustomTotalsLayer } from '@/page-layout/widgets/graph/graphWidgetBarChart/components/CustomTotalsLayer'; -import { BAR_CHART_MARGINS } from '@/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMargins'; import { useBarChartData } from '@/page-layout/widgets/graph/graphWidgetBarChart/hooks/useBarChartData'; import { useBarChartHandlers } from '@/page-layout/widgets/graph/graphWidgetBarChart/hooks/useBarChartHandlers'; import { useBarChartTheme } from '@/page-layout/widgets/graph/graphWidgetBarChart/hooks/useBarChartTheme'; @@ -14,6 +13,7 @@ import { calculateBarChartValueRange } from '@/page-layout/widgets/graph/graphWi import { calculateStackedBarChartValueRange } from '@/page-layout/widgets/graph/graphWidgetBarChart/utils/calculateStackedBarChartValueRange'; import { getBarChartAxisConfigs } from '@/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartAxisConfigs'; import { getBarChartColor } from '@/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartColor'; +import { getBarChartMargins } from '@/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartMargins'; import { createGraphColorRegistry } from '@/page-layout/widgets/graph/utils/createGraphColorRegistry'; import { formatGraphValue, @@ -210,6 +210,8 @@ export const GraphWidgetBarChart = ({ ] : undefined; + const margins = getBarChartMargins({ xAxisLabel, yAxisLabel, layout }); + return ( { if (width === 0 || data.length === 0) return []; - const horizontalMargins = BAR_CHART_MARGINS.left + BAR_CHART_MARGINS.right; + const margins = getBarChartMargins({ xAxisLabel, yAxisLabel, layout }); + + const horizontalMargins = margins.left + margins.right; const availableWidth = width - horizontalMargins; const numberOfTicks = Math.floor(availableWidth / MINIMUM_WIDTH_PER_TICK); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartAxisConfigs.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartAxisConfigs.ts index 8aa18ae5f5..86b3a37fa2 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartAxisConfigs.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartAxisConfigs.ts @@ -1,7 +1,7 @@ -import { BAR_CHART_MARGINS } from '@/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMargins'; import { type BarChartDataItem } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartDataItem'; import { computeBarChartCategoryTickValues } from '@/page-layout/widgets/graph/graphWidgetBarChart/utils/computeBarChartCategoryTickValues'; import { computeBarChartValueTickCount } from '@/page-layout/widgets/graph/graphWidgetBarChart/utils/computeBarChartValueTickCount'; +import { getBarChartMargins } from '@/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartMargins'; import { truncateTickLabel } from '@/page-layout/widgets/graph/graphWidgetBarChart/utils/truncateTickLabel'; import { formatGraphValue, @@ -42,12 +42,15 @@ export const getBarChartAxisConfigs = ({ width, data, indexBy, + xAxisLabel, + yAxisLabel, + layout, }); - const availableWidth = - width - (BAR_CHART_MARGINS.left + BAR_CHART_MARGINS.right); - const availableHeight = - height - (BAR_CHART_MARGINS.top + BAR_CHART_MARGINS.bottom); + const margins = getBarChartMargins({ xAxisLabel, yAxisLabel, layout }); + + const availableWidth = width - (margins.left + margins.right); + const availableHeight = height - (margins.top + margins.bottom); const widthPerTick = categoryTickValues.length > 0 ? availableWidth / categoryTickValues.length @@ -83,7 +86,7 @@ export const getBarChartAxisConfigs = ({ tickValues: numberOfValueTicks, legend: yAxisLabel, legendPosition: 'middle' as const, - legendOffset: -BAR_CHART_MARGINS.left + LEFT_AXIS_LEGEND_OFFSET_PADDING, + legendOffset: -margins.left + LEFT_AXIS_LEGEND_OFFSET_PADDING, format: (value: number) => truncateTickLabel( formatGraphValue(value, formatOptions ?? {}), @@ -111,7 +114,7 @@ export const getBarChartAxisConfigs = ({ tickValues: categoryTickValues, legend: xAxisLabel, legendPosition: 'middle' as const, - legendOffset: -BAR_CHART_MARGINS.left + LEFT_AXIS_LEGEND_OFFSET_PADDING, + legendOffset: -margins.left + LEFT_AXIS_LEGEND_OFFSET_PADDING, format: (value: string | number) => truncateTickLabel(String(value), MAX_LEFT_AXIS_LABEL_LENGTH), }, diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartMargins.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartMargins.ts new file mode 100644 index 0000000000..92719b8c0a --- /dev/null +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartMargins.ts @@ -0,0 +1,57 @@ +import { isDefined } from 'twenty-shared/utils'; + +const BAR_CHART_MARGINS = { + top: 20, + right: 20, + bottom: 45, + left: 65, +} as const; + +const BAR_CHART_MARGINS_WITH_BOTH_LABELS = { + top: 20, + right: 20, + bottom: 60, + left: 80, +} as const; + +const BAR_CHART_MARGINS_WITH_X_LABEL = { + top: 20, + right: 20, + bottom: 60, + left: 65, +} as const; + +const BAR_CHART_MARGINS_WITH_Y_LABEL = { + top: 20, + right: 20, + bottom: 45, + left: 80, +} as const; + +export const getBarChartMargins = ({ + xAxisLabel, + yAxisLabel, + layout, +}: { + xAxisLabel?: string; + yAxisLabel?: string; + layout: 'vertical' | 'horizontal'; +}) => { + if (isDefined(xAxisLabel) && isDefined(yAxisLabel)) { + return BAR_CHART_MARGINS_WITH_BOTH_LABELS; + } + + if (isDefined(xAxisLabel)) { + return layout === 'horizontal' + ? BAR_CHART_MARGINS_WITH_Y_LABEL + : BAR_CHART_MARGINS_WITH_X_LABEL; + } + + if (isDefined(yAxisLabel)) { + return layout === 'horizontal' + ? BAR_CHART_MARGINS_WITH_X_LABEL + : BAR_CHART_MARGINS_WITH_Y_LABEL; + } + + return BAR_CHART_MARGINS; +};