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

Graph margins vary depending on presence of labels (#15559)

Browse Source 
https://github.com/user-attachments/assets/3c27fa7b-78a3-49eb-9795-53571662cf12

---------

Co-authored-by: Raphaël Bosi <71827178+bosiraphael@users.noreply.github.com>
This commit is contained in:
Marie
2025-11-03 17:06:41 +01:00
committed by GitHub
parent 06feee91f0
commit d72aae86cb
5 changed files with 81 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx
+4 -2
View File
@@ -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 (
<StyledContainer id={id}>
<GraphWidgetChartContainer
@@ -229,7 +231,7 @@ export const GraphWidgetBarChart = ({
data={data}
keys={keys}
indexBy={indexBy}
margin={BAR_CHART_MARGINS}
margin={margins}
padding={0.3}
groupMode={groupMode}
layout={layout}
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMargins.ts
-6
View File
@@ -1,6 +0,0 @@
export const BAR_CHART_MARGINS = {
top: 20,
right: 20,
bottom: 60,
left: 80,
} as const;
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/computeBarChartCategoryTickValues.ts
+10 -2
View File
@@ -1,5 +1,5 @@
import { BAR_CHART_MARGINS } from '@/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMargins';
import { type BarChartDataItem } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartDataItem';
import { getBarChartMargins } from '@/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartMargins';
const MINIMUM_WIDTH_PER_TICK = 100;
@@ -7,14 +7,22 @@ export const computeBarChartCategoryTickValues = ({
width,
data,
indexBy,
xAxisLabel,
yAxisLabel,
layout,
}: {
width: number;
data: BarChartDataItem[];
indexBy: string;
layout: 'vertical' | 'horizontal';
xAxisLabel?: string;
yAxisLabel?: string;
}): (string | number)[] => {
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);
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartAxisConfigs.ts
+10 -7
View File
@@ -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),
},
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/getBarChartMargins.ts
+57
View File
@@ -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;
};