Skip to content

Commit d9b23b5

Browse files
bosiraphaelNotYen
bosiraphael
authored and
NotYen
committed
Fix horizontal bar chart spacing between ticks (twentyhq#15702)
This PR fixes a bug where the spacing between ticks on the Y axis was adjusted according to the width of the widget where it should have been adjusted according to the height. Same for the X axis. **Before**: Works for the vertical layout but not for the horizontal layout https://github.com/user-attachments/assets/f0b94103-1ba6-4dbe-bbc6-c47541c1b5fa **After**: Works for both https://github.com/user-attachments/assets/165faada-2943-4e05-92d6-a31def569500 (cherry picked from commit ea56586)
1 parent ac48fbd commit d9b23b5

19 files changed

+252
-95
lines changed

‎packages/twenty-front/src/modules/page-layout/widgets/graph/components/__stories__/GraphWidgetBarChart.stories.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { type Meta, type StoryObj } from '@storybook/react';
22

33
import { GraphWidgetBarChart } from '@/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart';
4+
import { BarChartLayout } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartLayout';
45
import { CatalogDecorator, ComponentDecorator } from 'twenty-ui/testing';
56

67
const meta: Meta<typeof GraphWidgetBarChart> = {
@@ -276,7 +277,7 @@ export const Horizontal: Story = {
276277
],
277278
indexBy: 'product',
278279
keys: ['score'],
279-
layout: 'horizontal',
280+
layout: BarChartLayout.HORIZONTAL,
280281
showLegend: false,
281282
showGrid: true,
282283
xAxisLabel: 'Score',

‎packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/CustomBarItem.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { BAR_CHART_HOVER_BRIGHTNESS } from '@/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartHoverBrightness';
22
import { BAR_CHART_MAXIMUM_WIDTH } from '@/page-layout/widgets/graph/graphWidgetBarChart/constants/MaximumBarWidth';
3+
import { BarChartLayout } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartLayout';
34
import { type BarDatum, type BarItemProps } from '@nivo/bar';
45
import { Text } from '@nivo/text';
56
import { useTheme } from '@nivo/theming';
@@ -15,7 +16,7 @@ type CustomBarItemProps<D extends BarDatum> = BarItemProps<D> & {
1516
groupMode?: 'grouped' | 'stacked';
1617
data?: readonly D[];
1718
indexBy?: string;
18-
layout?: 'vertical' | 'horizontal';
19+
layout?: BarChartLayout;
1920
chartId?: string;
2021
};
2122

@@ -63,7 +64,7 @@ export const CustomBarItem = <D extends BarDatum>({
6364
groupMode = 'grouped',
6465
data: chartData,
6566
indexBy,
66-
layout = 'vertical',
67+
layout = BarChartLayout.VERTICAL,
6768
chartId,
6869
}: CustomBarItemProps<D>) => {
6970
const theme = useTheme();
@@ -158,7 +159,7 @@ export const CustomBarItem = <D extends BarDatum>({
158159
barData.indexValue,
159160
]);
160161

161-
const isHorizontal = layout === 'horizontal';
162+
const isHorizontal = layout === BarChartLayout.HORIZONTAL;
162163
const clipPathId = `round-corner-${chartId ?? 'chart'}-${barData.index}-${
163164
seriesIndex >= 0 ? seriesIndex : 'x'
164165
}`;

‎packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/CustomTotalsLayer.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { type BarChartDataItem } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartDataItem';
2+
import { BarChartLayout } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartLayout';
23
import { useTheme } from '@emotion/react';
34
import { type BarCustomLayerProps, type ComputedBarDatum } from '@nivo/bar';
45
import { animated } from '@react-spring/web';
@@ -10,7 +11,7 @@ type CustomTotalsLayerProps = Pick<
1011
> & {
1112
formatValue?: (value: number) => string;
1213
offset?: number;
13-
layout?: 'vertical' | 'horizontal';
14+
layout?: BarChartLayout;
1415
groupMode?: 'grouped' | 'stacked';
1516
omitNullValues?: boolean;
1617
};
@@ -137,12 +138,12 @@ export const CustomTotalsLayer = ({
137138
bars,
138139
formatValue,
139140
offset = 0,
140-
layout = 'vertical',
141+
layout = BarChartLayout.VERTICAL,
141142
groupMode = 'grouped',
142143
omitNullValues = false,
143144
}: CustomTotalsLayerProps) => {
144145
const theme = useTheme();
145-
const isVertical = layout === 'vertical';
146+
const isVertical = layout === BarChartLayout.VERTICAL;
146147

147148
const labels =
148149
groupMode === 'stacked'

‎packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { useBarChartHandlers } from '@/page-layout/widgets/graph/graphWidgetBarC
99
import { useBarChartTheme } from '@/page-layout/widgets/graph/graphWidgetBarChart/hooks/useBarChartTheme';
1010
import { useBarChartTooltip } from '@/page-layout/widgets/graph/graphWidgetBarChart/hooks/useBarChartTooltip';
1111
import { type BarChartDataItem } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartDataItem';
12+
import { BarChartLayout } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartLayout';
1213
import { type BarChartSeries } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartSeries';
1314
import { calculateBarChartValueRange } from '@/page-layout/widgets/graph/graphWidgetBarChart/utils/calculateBarChartValueRange';
1415
import { calculateStackedBarChartValueRange } from '@/page-layout/widgets/graph/graphWidgetBarChart/utils/calculateStackedBarChartValueRange';
@@ -40,7 +41,7 @@ type GraphWidgetBarChartProps = {
4041
xAxisLabel?: string;
4142
yAxisLabel?: string;
4243
id: string;
43-
layout?: 'vertical' | 'horizontal';
44+
layout?: BarChartLayout;
4445
groupMode?: 'grouped' | 'stacked';
4546
seriesLabels?: Record<string, string>;
4647
rangeMin?: number;
@@ -69,7 +70,7 @@ export const GraphWidgetBarChart = ({
6970
xAxisLabel,
7071
yAxisLabel,
7172
id,
72-
layout = 'vertical',
73+
layout = BarChartLayout.VERTICAL,
7374
groupMode,
7475
seriesLabels,
7576
rangeMin,
@@ -201,7 +202,7 @@ export const GraphWidgetBarChart = ({
201202
const zeroMarker = hasNegativeValues
202203
? [
203204
{
204-
axis: (layout === 'vertical' ? 'y' : 'x') as 'y' | 'x',
205+
axis: (layout === BarChartLayout.VERTICAL ? 'y' : 'x') as 'y' | 'x',
205206
value: 0,
206207
lineStyle: {
207208
stroke: theme.border.color.medium,
@@ -250,10 +251,10 @@ export const GraphWidgetBarChart = ({
250251
axisRight={null}
251252
axisBottom={axisBottomConfig}
252253
axisLeft={axisLeftConfig}
253-
enableGridX={layout === 'horizontal' && showGrid}
254-
enableGridY={layout === 'vertical' && showGrid}
255-
gridXValues={layout === 'horizontal' ? 5 : undefined}
256-
gridYValues={layout === 'vertical' ? 5 : undefined}
254+
enableGridX={layout === BarChartLayout.HORIZONTAL && showGrid}
255+
enableGridY={layout === BarChartLayout.VERTICAL && showGrid}
256+
gridXValues={layout === BarChartLayout.HORIZONTAL ? 5 : undefined}
257+
gridYValues={layout === BarChartLayout.VERTICAL ? 5 : undefined}
257258
enableLabel={false}
258259
labelSkipWidth={12}
259260
innerPadding={

‎packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMinTickSpacingHeightRatio.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const BAR_CHART_MIN_TICK_SPACING_HEIGHT_RATIO = 2.5;

‎packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMinimumWidthPerTick.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const BAR_CHART_MINIMUM_WIDTH_PER_TICK = 100;

‎packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/hooks/useGraphBarChartWidgetData.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
22
import { type BarChartDataItem } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartDataItem';
3+
import { type BarChartLayout } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartLayout';
34
import { type BarChartSeries } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartSeries';
45
import { useGraphWidgetGroupByQuery } from '@/page-layout/widgets/graph/hooks/useGraphWidgetGroupByQuery';
56
import { transformGroupByDataToBarChartData } from '@/page-layout/widgets/graph/utils/transformGroupByDataToBarChartData';
@@ -19,7 +20,7 @@ type UseGraphBarChartWidgetDataResult = {
1920
xAxisLabel?: string;
2021
yAxisLabel?: string;
2122
showDataLabels: boolean;
22-
layout?: 'vertical' | 'horizontal';
23+
layout?: BarChartLayout;
2324
loading: boolean;
2425
error?: Error;
2526
hasTooManyGroups: boolean;

‎packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartLayout.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export enum BarChartLayout {
2+
VERTICAL = 'vertical',
3+
HORIZONTAL = 'horizontal',
4+
}

‎packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/__tests__/calculateBarChartEndLineCoordinates.test.ts‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { type ComputedBarDatum } from '@nivo/bar';
21
import { type BarChartDataItem } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartDataItem';
2+
import { BarChartLayout } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartLayout';
3+
import { type ComputedBarDatum } from '@nivo/bar';
34
import { calculateBarChartEndLineCoordinates } from '../calculateBarChartEndLineCoordinates';
45
describe('calculateBarChartEndLineCoordinates', () => {
56
const createMockBar = (
@@ -26,7 +27,10 @@ describe('calculateBarChartEndLineCoordinates', () => {
2627
describe('vertical layout', () => {
2728
it('should calculate horizontal line coordinates at the top of vertical bars', () => {
2829
const mockBar = createMockBar();
29-
const result = calculateBarChartEndLineCoordinates(mockBar, 'vertical');
30+
const result = calculateBarChartEndLineCoordinates(
31+
mockBar,
32+
BarChartLayout.VERTICAL,
33+
);
3034
expect(result).toEqual({
3135
x1: 100,
3236
x2: 140,
@@ -38,7 +42,7 @@ describe('calculateBarChartEndLineCoordinates', () => {
3842
const barAtOrigin = createMockBar({ x: 0, y: 0 });
3943
const result = calculateBarChartEndLineCoordinates(
4044
barAtOrigin,
41-
'vertical',
45+
BarChartLayout.VERTICAL,
4246
);
4347
expect(result).toEqual({
4448
x1: 0,
@@ -51,7 +55,7 @@ describe('calculateBarChartEndLineCoordinates', () => {
5155
const negativeBar = createMockBar({ x: -50, y: -20 });
5256
const result = calculateBarChartEndLineCoordinates(
5357
negativeBar,
54-
'vertical',
58+
BarChartLayout.VERTICAL,
5559
);
5660
expect(result).toEqual({
5761
x1: -50,
@@ -64,7 +68,10 @@ describe('calculateBarChartEndLineCoordinates', () => {
6468
describe('horizontal layout', () => {
6569
it('should calculate vertical line coordinates at the end of horizontal bars', () => {
6670
const mockBar = createMockBar();
67-
const result = calculateBarChartEndLineCoordinates(mockBar, 'horizontal');
71+
const result = calculateBarChartEndLineCoordinates(
72+
mockBar,
73+
BarChartLayout.HORIZONTAL,
74+
);
6875
expect(result).toEqual({
6976
x1: 140,
7077
x2: 140,
@@ -74,7 +81,10 @@ describe('calculateBarChartEndLineCoordinates', () => {
7481
});
7582
it('should handle bars with different dimensions', () => {
7683
const wideBar = createMockBar({ width: 100, height: 20 });
77-
const result = calculateBarChartEndLineCoordinates(wideBar, 'horizontal');
84+
const result = calculateBarChartEndLineCoordinates(
85+
wideBar,
86+
BarChartLayout.HORIZONTAL,
87+
);
7888
expect(result).toEqual({
7989
x1: 200,
8090
x2: 200,
@@ -84,7 +94,10 @@ describe('calculateBarChartEndLineCoordinates', () => {
8494
});
8595
it('should handle very thin bars', () => {
8696
const thinBar = createMockBar({ width: 1, height: 200 });
87-
const result = calculateBarChartEndLineCoordinates(thinBar, 'horizontal');
97+
const result = calculateBarChartEndLineCoordinates(
98+
thinBar,
99+
BarChartLayout.HORIZONTAL,
100+
);
88101
expect(result).toEqual({
89102
x1: 101,
90103
x2: 101,

‎packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/utils/calculateBarChartEndLineCoordinates.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { type BarChartDataItem } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartDataItem';
2+
import { BarChartLayout } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartLayout';
23
import { type ComputedBarDatum } from '@nivo/bar';
34

45
export const calculateBarChartEndLineCoordinates = (
56
bar: ComputedBarDatum<BarChartDataItem>,
6-
layout: 'vertical' | 'horizontal',
7+
layout: BarChartLayout,
78
) => {
8-
if (layout === 'vertical') {
9+
if (layout === BarChartLayout.VERTICAL) {
910
return {
1011
x1: bar.x,
1112
x2: bar.x + bar.width,

0 commit comments

Comments
 (0)