[DASHBOARDS] Add prefix and suffix setting to the aggregate chart

packages/twenty-front/src/generated-metadata/graphql.ts

@@ -151,6 +151,8 @@ export type AggregateChartConfiguration = {
   format?: Maybe<Scalars['String']>;
   graphType: GraphType;
   label?: Maybe<Scalars['String']>;
+  prefix?: Maybe<Scalars['String']>;
+  suffix?: Maybe<Scalars['String']>;
   timezone?: Maybe<Scalars['String']>;
 };
 

packages/twenty-front/src/generated/graphql.ts

@@ -151,6 +151,8 @@ export type AggregateChartConfiguration = {
   format?: Maybe<Scalars['String']>;
   graphType: GraphType;
   label?: Maybe<Scalars['String']>;
+  prefix?: Maybe<Scalars['String']>;
+  suffix?: Maybe<Scalars['String']>;
   timezone?: Maybe<Scalars['String']>;
 };
 

packages/twenty-front/src/modules/command-menu/components/CommandMenuItemTextInput.tsx

@@ -0,0 +1,65 @@
+import { TextInput } from '@/ui/input/components/TextInput';
+import styled from '@emotion/styled';
+import { useState } from 'react';
+import { Key } from 'ts-key-enum';
+
+type CommandMenuItemTextInputProps = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+};
+
+const StyledRightAlignedTextInput = styled(TextInput)`
+  input {
+    :focus {
+      color: ${({ theme }) => theme.font.color.primary};
+    }
+    color: ${({ theme }) => theme.font.color.tertiary};
+    text-align: right;
+  }
+`;
+
+export const CommandMenuItemTextInput = ({
+  value,
+  onChange,
+  placeholder,
+}: CommandMenuItemTextInputProps) => {
+  const [draftValue, setDraftValue] = useState(value);
+
+  const handleChange = (text: string) => {
+    setDraftValue(text);
+  };
+
+  const handleCommit = () => {
+    onChange(draftValue);
+  };
+
+  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+    event.target.select();
+  };
+
+  const handleBlur = () => {
+    handleCommit();
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === Key.Enter || event.key === Key.Escape) {
+      event.stopPropagation();
+      handleCommit();
+    } else {
+      event.stopPropagation();
+    }
+  };
+
+  return (
+    <StyledRightAlignedTextInput
+      value={draftValue}
+      sizeVariant="sm"
+      onChange={handleChange}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      placeholder={placeholder}
+    />
+  );
+};

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

@@ -11,6 +11,7 @@ import { useChartSettingsValues } from '@/command-menu/pages/page-layout/hooks/u
 import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
 import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
 import { useUpdateChartSettingInput } from '@/command-menu/pages/page-layout/hooks/useUpdateChartSettingInput';
+import { useUpdateChartSettingTextInput } from '@/command-menu/pages/page-layout/hooks/useUpdateChartSettingTextInput';
 import { useUpdateChartSettingToggle } from '@/command-menu/pages/page-layout/hooks/useUpdateChartSettingToggle';
 import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
 import { useGetConfigToUpdateAfterGraphTypeChange } from '@/command-menu/pages/page-layout/hooks/useUpdateGraphTypeConfig';
@@ -68,6 +69,9 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
 
   const { updateChartSettingInput } = useUpdateChartSettingInput(pageLayoutId);
 
+  const { updateChartSettingTextInput } =
+    useUpdateChartSettingTextInput(pageLayoutId);
+
   const { getConfigToUpdateAfterGraphTypeChange } =
     useGetConfigToUpdateAfterGraphTypeChange({
       pageLayoutId,
@@ -188,6 +192,10 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
                   updateChartSettingInput(item.id, value);
                 };
 
+                const handleItemTextInputChange = (value: string) => {
+                  updateChartSettingTextInput(item.id, value);
+                };
+
                 const handleItemDropdownOpen = () => {
                   openDropdown({
                     dropdownComponentInstanceIdFromProps: item.id,
@@ -208,6 +216,7 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
                     getChartSettingsValues={getChartSettingsValues}
                     onToggleChange={handleItemToggleChange}
                     onInputChange={handleItemInputChange}
+                    onTextInputChange={handleItemTextInputChange}
                     onDropdownOpen={handleItemDropdownOpen}
                     onFilterClick={handleFilterClick}
                   />

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/chart-settings/ChartSettingItem.tsx

@@ -1,6 +1,7 @@
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { CommandMenuItemDropdown } from '@/command-menu/components/CommandMenuItemDropdown';
 import { CommandMenuItemNumberInput } from '@/command-menu/components/CommandMenuItemNumberInput';
+import { CommandMenuItemTextInput } from '@/command-menu/components/CommandMenuItemTextInput';
 import { CommandMenuItemToggle } from '@/command-menu/components/CommandMenuItemToggle';
 import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
 import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
@@ -20,6 +21,7 @@ type ChartSettingItemProps = {
   ) => boolean | string | undefined;
   onToggleChange: () => void;
   onInputChange: (value: number | null) => void;
+  onTextInputChange: (value: string) => void;
   onDropdownOpen: () => void;
   onFilterClick: () => void;
 };
@@ -30,6 +32,7 @@ export const ChartSettingItem = ({
   getChartSettingsValues,
   onToggleChange,
   onInputChange,
+  onTextInputChange,
   onDropdownOpen,
   onFilterClick,
 }: ChartSettingItemProps) => {
@@ -51,7 +54,7 @@ export const ChartSettingItem = ({
     );
   }
 
-  if (isDefined(item.isInput)) {
+  if (isDefined(item.isNumberInput)) {
     const settingValue = getChartSettingsValues(item.id);
     const stringValue = isString(settingValue) ? settingValue : '';
 
@@ -85,6 +88,30 @@ export const ChartSettingItem = ({
     );
   }
 
+  if (isDefined(item.isTextInput)) {
+    const settingValue = getChartSettingsValues(item.id);
+    const stringValue = isString(settingValue) ? settingValue : '';
+
+    return (
+      <SelectableListItem key={item.id} itemId={item.id}>
+        <CommandMenuItem
+          id={item.id}
+          label={t(item.label)}
+          Icon={item.Icon}
+          RightComponent={
+            <CommandMenuItemTextInput
+              value={stringValue}
+              onChange={onTextInputChange}
+              placeholder={
+                item.inputPlaceholder ? t(item.inputPlaceholder) : undefined
+              }
+            />
+          }
+        />
+      </SelectableListItem>
+    );
+  }
+
   if (item.isBoolean) {
     return (
       <SelectableListItem

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

@@ -2,6 +2,8 @@ import { CHART_SETTINGS_HEADINGS } from '@/command-menu/pages/page-layout/consta
 import { CHART_DATA_SOURCE_SETTING } from '@/command-menu/pages/page-layout/constants/settings/ChartDataSourceSetting';
 import { DATA_DISPLAY_AGGREGATE_SETTING } from '@/command-menu/pages/page-layout/constants/settings/DataDisplayAggregateSetting';
 import { FILTER_SETTING } from '@/command-menu/pages/page-layout/constants/settings/FilterSetting';
+import { PREFIX_SETTING } from '@/command-menu/pages/page-layout/constants/settings/PrefixSetting';
+import { SUFFIX_SETTING } from '@/command-menu/pages/page-layout/constants/settings/SuffixSetting';
 import { type ChartSettingsGroup } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup';
 
 export const AGGREGATE_CHART_SETTINGS: ChartSettingsGroup[] = [
@@ -13,4 +15,8 @@ export const AGGREGATE_CHART_SETTINGS: ChartSettingsGroup[] = [
       DATA_DISPLAY_AGGREGATE_SETTING,
     ],
   },
+  {
+    heading: CHART_SETTINGS_HEADINGS.STYLE,
+    items: [PREFIX_SETTING, SUFFIX_SETTING],
+  },
 ];

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

@@ -24,4 +24,6 @@ export const CHART_CONFIGURATION_SETTING_LABELS = {
   DATE_GRANULARITY_Y: msg`Date granularity`,
   DATE_GRANULARITY: msg`Date granularity`,
   SHOW_LEGEND: msg`Legend`,
+  PREFIX: msg`Prefix`,
+  SUFFIX: msg`Suffix`,
 };

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

@@ -0,0 +1,14 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/command-menu/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup';
+import { msg } from '@lingui/core/macro';
+import { IconCaretLeft } from 'twenty-ui/display';
+
+export const PREFIX_SETTING: ChartSettingsItem = {
+  isBoolean: false,
+  Icon: IconCaretLeft,
+  label: CHART_CONFIGURATION_SETTING_LABELS.PREFIX,
+  id: CHART_CONFIGURATION_SETTING_IDS.PREFIX,
+  isTextInput: true,
+  inputPlaceholder: msg`unit`,
+};

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

@@ -9,6 +9,6 @@ export const RANGE_MAX_SETTING: ChartSettingsItem = {
   Icon: IconMathMax,
   label: CHART_CONFIGURATION_SETTING_LABELS.MAX_RANGE,
   id: CHART_CONFIGURATION_SETTING_IDS.MAX_RANGE,
-  isInput: true,
+  isNumberInput: true,
   inputPlaceholder: msg`Max`,
 };

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

@@ -9,6 +9,6 @@ export const RANGE_MIN_SETTING: ChartSettingsItem = {
   Icon: IconMathMin,
   label: CHART_CONFIGURATION_SETTING_LABELS.MIN_RANGE,
   id: CHART_CONFIGURATION_SETTING_IDS.MIN_RANGE,
-  isInput: true,
+  isNumberInput: true,
   inputPlaceholder: msg`Min`,
 };

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

@@ -0,0 +1,14 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/command-menu/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup';
+import { msg } from '@lingui/core/macro';
+import { IconCaretRight } from 'twenty-ui/display';
+
+export const SUFFIX_SETTING: ChartSettingsItem = {
+  isBoolean: false,
+  Icon: IconCaretRight,
+  label: CHART_CONFIGURATION_SETTING_LABELS.SUFFIX,
+  id: CHART_CONFIGURATION_SETTING_IDS.SUFFIX,
+  isTextInput: true,
+  inputPlaceholder: msg`unit`,
+};

packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useChartSettingsValues.ts

@@ -245,6 +245,14 @@ export const useChartSettingsValues = ({
         return isBarOrLineChart || isPieChart
           ? (configuration.displayLegend ?? true)
           : true;
+      case CHART_CONFIGURATION_SETTING_IDS.PREFIX:
+        return configuration.__typename === 'AggregateChartConfiguration'
+          ? (configuration.prefix ?? '')
+          : '';
+      case CHART_CONFIGURATION_SETTING_IDS.SUFFIX:
+        return configuration.__typename === 'AggregateChartConfiguration'
+          ? (configuration.suffix ?? '')
+          : '';
       default:
         return '';
     }

packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateChartSettingTextInput.ts

@@ -0,0 +1,23 @@
+import { type CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
+import { getConfigKeyFromSettingId } from '@/command-menu/pages/page-layout/utils/getConfigKeyFromSettingId';
+import { useUpdateCurrentWidgetConfig } from './useUpdateCurrentWidgetConfig';
+
+export const useUpdateChartSettingTextInput = (pageLayoutId: string) => {
+  const { updateCurrentWidgetConfig } =
+    useUpdateCurrentWidgetConfig(pageLayoutId);
+
+  const updateChartSettingTextInput = (
+    settingId: CHART_CONFIGURATION_SETTING_IDS,
+    value: string,
+  ) => {
+    const configKey = getConfigKeyFromSettingId(settingId);
+
+    updateCurrentWidgetConfig({
+      configToUpdate: {
+        [configKey]: value,
+      },
+    });
+  };
+
+  return { updateChartSettingTextInput };
+};

packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartConfigurationSettingIds.ts

@@ -23,6 +23,8 @@ export enum CHART_CONFIGURATION_SETTING_IDS {
   DATE_GRANULARITY_Y = 'DATE_GRANULARITY_Y',
   DATE_GRANULARITY = 'DATE_GRANULARITY',
   SHOW_LEGEND = 'SHOW_LEGEND',
+  PREFIX = 'PREFIX',
+  SUFFIX = 'SUFFIX',
 }
 
 export const CHART_CONFIGURATION_SETTING_TO_CONFIG_KEY_MAP = {
@@ -39,4 +41,6 @@ export const CHART_CONFIGURATION_SETTING_TO_CONFIG_KEY_MAP = {
     'secondaryAxisGroupByDateGranularity',
   [CHART_CONFIGURATION_SETTING_IDS.DATE_GRANULARITY]: 'dateGranularity',
   [CHART_CONFIGURATION_SETTING_IDS.SHOW_LEGEND]: 'displayLegend',
+  [CHART_CONFIGURATION_SETTING_IDS.PREFIX]: 'prefix',
+  [CHART_CONFIGURATION_SETTING_IDS.SUFFIX]: 'suffix',
 } as const;

packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartSettingsGroup.ts

@@ -17,6 +17,7 @@ export type ChartSettingsItem = {
   dependsOn?: CHART_CONFIGURATION_SETTING_IDS[];
   DropdownContent?: ComponentType;
   dropdownWidth?: number;
-  isInput?: boolean;
+  isNumberInput?: boolean;
+  isTextInput?: boolean;
   inputPlaceholder?: MessageDescriptor;
 };