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

Fix and improve chart type selection (#16033)

Browse Source 
The new version of the side panel is smaller so it introduced a
regression on the chart type selection because there was not enough
space for all the chart types to fit with the label.

This PR removes the label to gain some space and display the chart type
label in a tooltip.

## Before

<img width="834" height="1406" alt="CleanShot 2025-11-24 at 17 33 45@2x"
src="https://github.com/user-attachments/assets/76bbea54-af16-4643-9de6-ab3da6741e11"
/>


## After

### Without disabled charts


https://github.com/user-attachments/assets/74d62b86-e440-41f5-a3e6-c5754940c28e

### With disabled charts


https://github.com/user-attachments/assets/f4ce3a3a-5dee-4f41-8b96-5f671794197d
This commit is contained in:
Raphaël Bosi
2025-11-24 17:44:28 +01:00
committed by GitHub
parent d526b07078
commit 86aff36035
5 changed files with 92 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartTypeSelectionSection.tsx
+4 -3
View File
@@ -47,17 +47,18 @@ export const ChartTypeSelectionSection = ({
return (
<MenuPicker
id={graphType}
selected={currentGraphType === graphType}
key={graphType}
icon={GRAPH_TYPE_INFORMATION[graphType].icon}
onClick={() => {
setCurrentGraphType(graphType);
}}
label={
isDisabled ? t`Soon` : t(GRAPH_TYPE_INFORMATION[graphType].label)
}
showLabel
disabled={isDisabled}
tooltipContent={
isDisabled ? t`Soon` : t(GRAPH_TYPE_INFORMATION[graphType].label)
}
/>
);
})}
packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/GraphTypeInformation.ts
+6 -6
View File
@@ -26,32 +26,32 @@ export const GRAPH_TYPE_INFORMATION: Record<
}
> = {
[GraphType.VERTICAL_BAR]: {
label: msg`Vertical`,
label: msg`Vertical Bar Chart`,
icon: IconChartBar,
settings: getBarChartSettings(GraphType.VERTICAL_BAR),
},
[GraphType.HORIZONTAL_BAR]: {
label: msg`Horizontal`,
label: msg`Horizontal Bar Chart`,
icon: IconChartBarHorizontal,
settings: getBarChartSettings(GraphType.HORIZONTAL_BAR),
},
[GraphType.PIE]: {
label: msg`Pie`,
label: msg`Pie Chart`,
icon: IconChartPie,
settings: PIE_CHART_SETTINGS,
},
[GraphType.LINE]: {
label: msg`Line`,
label: msg`Line Chart`,
icon: IconChartLine,
settings: LINE_CHART_SETTINGS,
},
[GraphType.AGGREGATE]: {
label: msg`Aggregate`,
label: msg`Aggregate Chart`,
icon: IconSum,
settings: AGGREGATE_CHART_SETTINGS,
},
[GraphType.GAUGE]: {
label: msg`Gauge`,
label: msg`Gauge Chart`,
icon: IconGauge,
settings: GAUGE_CHART_SETTINGS,
},