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={() => {}}
       />
 

packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/GraphTypeInformation.ts

@@ -7,12 +7,12 @@ import { type ChartSettingsGroup } from '@/command-menu/pages/page-layout/types/
 import { type MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import {
+  Icon123,
   IconChartBar,
   IconChartLine,
   IconChartPie,
   type IconComponent,
   IconGauge,
-  IconNumber,
 } from 'twenty-ui/display';
 import { GraphType } from '~/generated-metadata/graphql';
 
@@ -25,27 +25,27 @@ export const GRAPH_TYPE_INFORMATION: Record<
   }
 > = {
   [GraphType.BAR]: {
-    label: msg`Bar Chart`,
+    label: msg`Bar`,
     icon: IconChartBar,
     settings: BAR_CHART_SETTINGS,
   },
   [GraphType.PIE]: {
-    label: msg`Pie Chart`,
+    label: msg`Pie`,
     icon: IconChartPie,
     settings: PIE_CHART_SETTINGS,
   },
   [GraphType.LINE]: {
-    label: msg`Line Chart`,
+    label: msg`Line`,
     icon: IconChartLine,
     settings: LINE_CHART_SETTINGS,
   },
   [GraphType.NUMBER]: {
-    label: msg`Number Chart`,
-    icon: IconNumber,
+    label: msg`Number`,
+    icon: Icon123,
     settings: NUMBER_CHART_SETTINGS,
   },
   [GraphType.GAUGE]: {
-    label: msg`Gauge Chart`,
+    label: msg`Gauge`,
     icon: IconGauge,
     settings: GAUGE_CHART_SETTINGS,
   },

packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx

@@ -2,7 +2,7 @@ import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { type IconComponent } from '@ui/display';
 
-const StyledMenuItemPicker = styled.button<{
+const StyledMenuPicker = styled.button<{
   selected: boolean;
   disabled: boolean;
 }>`
@@ -28,14 +28,10 @@ const StyledMenuItemPicker = styled.button<{
   ${({ theme, selected, disabled }) => {
     if (disabled) {
       return css`
-        background: inherit;
+        background: ${theme.background.secondary};
         border-color: ${theme.border.color.medium};
-        color: ${theme.font.color.tertiary};
+        color: ${theme.font.color.extraLight};
         cursor: default;
-
-        &:hover {
-          background: inherit;
-        }
       `;
     }
 
@@ -89,7 +85,7 @@ const StyledLabel = styled.div<{
   ${({ theme, selected, disabled }) => {
     if (disabled) {
       return css`
-        color: ${theme.font.color.tertiary};
+        color: ${theme.font.color.extraLight};
       `;
     }
 
@@ -129,7 +125,7 @@ export const MenuPicker = ({
   const theme = useTheme();
 
   return (
-    <StyledMenuItemPicker
+    <StyledMenuPicker
       selected={selected}
       disabled={disabled}
       onClick={onClick}
@@ -148,6 +144,6 @@ export const MenuPicker = ({
           {label}
         </StyledLabel>
       )}
-    </StyledMenuItemPicker>
+    </StyledMenuPicker>
   );
 };