Updates on chart selection (#14943)

- Updated the disabled design
- Disabled the 3 charts which won't be released this sprint
- Updated the icon of the number chart
- Added labels

Before:
<img width="1004" height="388" alt="CleanShot 2025-10-07 at 15 40 31@2x"
src="https://github.com/user-attachments/assets/d2cf86a4-faca-4333-a03b-cc95afbd07ad"
/>

After:
<img width="1002" height="412" alt="CleanShot 2025-10-07 at 15 46 21@2x"
src="https://github.com/user-attachments/assets/780e9bcb-32d7-41dc-b281-f7b2248b8f5d"
/>

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartTypeSelectionSection.tsx

@@ -7,9 +7,15 @@ import { MenuPicker } from 'twenty-ui/navigation';
 
 const graphTypeOptions = [
   GraphType.BAR,
+  GraphType.NUMBER,
+  GraphType.PIE,
+  GraphType.LINE,
+  GraphType.GAUGE,
+];
+
+const disabledGraphTypeOptions = [
   GraphType.PIE,
   GraphType.LINE,
-  GraphType.NUMBER,
   GraphType.GAUGE,
 ];
 
@@ -30,18 +36,25 @@ export const ChartTypeSelectionSection = ({
 }: ChartTypeSelectionSectionProps) => {
   return (
     <StyledChartTypeSelectionContainer>
-      {graphTypeOptions.map((graphType) => (
-        <MenuPicker
-          selected={currentGraphType === graphType}
-          key={graphType}
-          icon={GRAPH_TYPE_INFORMATION[graphType].icon}
-          onClick={() => {
-            setCurrentGraphType(graphType);
-          }}
-          label={t(GRAPH_TYPE_INFORMATION[graphType].label)}
-          showLabel={false}
-        />
-      ))}
+      {graphTypeOptions.map((graphType) => {
+        const isDisabled = disabledGraphTypeOptions.includes(graphType);
+
+        return (
+          <MenuPicker
+            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}
+          />
+        );
+      })}
     </StyledChartTypeSelectionContainer>
   );
 };

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphTypeSelect.tsx

@@ -36,6 +36,7 @@ export const CommandMenuPageLayoutGraphTypeSelect = () => {
   }
 
   const currentGraphType = widgetInEditMode.configuration.graphType;
+  const graphTypeLabel = t(GRAPH_TYPE_INFORMATION[currentGraphType].label);
 
   return (
     <>
@@ -43,7 +44,7 @@ export const CommandMenuPageLayoutGraphTypeSelect = () => {
         Icon={GRAPH_TYPE_INFORMATION[currentGraphType].icon}
         iconColor={theme.font.color.tertiary}
         initialTitle={t`Chart`}
-        headerType={t(GRAPH_TYPE_INFORMATION[currentGraphType].label)}
+        headerType={t`${graphTypeLabel} Chart`}
         onTitleChange={() => {}}
       />