connect line chart to backend (#15657)

https://github.com/user-attachments/assets/b797c5a8-32a8-4d3e-9fb1-7541d107a19f optimizations: before: https://github.com/user-attachments/assets/bf45a3f1-5f89-40c1-9ce4-c2d912b77d63 after: https://github.com/user-attachments/assets/61bfd603-7b63-4695-8ae8-68fe7d3bfea0
2025-11-13 17:05:08 +05:30
parent eee35e5e25
commit fddac24e7f
71 changed files with 2375 additions and 790 deletions
@@ -18,6 +18,7 @@ import { shouldHideChartSetting } from '@/command-menu/pages/page-layout/utils/s
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { BAR_CHART_MAXIMUM_NUMBER_OF_BARS } from '@/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMaximumNumberOfBars.constant';
+import { LINE_CHART_MAXIMUM_NUMBER_OF_DATA_POINTS } from '@/page-layout/widgets/graph/graphWidgetLineChart/constants/LineChartMaximumNumberOfDataPoints.constant';
 import { hasWidgetTooManyGroupsComponentState } from '@/page-layout/widgets/graph/states/hasWidgetTooManyGroupsComponentState';
 import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
@@ -89,7 +90,8 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {

    if (
      graphType !== GraphType.VERTICAL_BAR &&
-      graphType !== GraphType.HORIZONTAL_BAR
+      graphType !== GraphType.HORIZONTAL_BAR &&
+      graphType !== GraphType.LINE
    ) {
      setHasWidgetTooManyGroups(false);
    }
@@ -124,7 +126,11 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
      />
      {hasWidgetTooManyGroups && (
        <StyledSidePanelInformationBanner
-          message={t`Max ${BAR_CHART_MAXIMUM_NUMBER_OF_BARS} bars per chart. Consider adding a filter`}
+          message={
+            currentGraphType === GraphType.LINE
+              ? t`Max ${LINE_CHART_MAXIMUM_NUMBER_OF_DATA_POINTS} data points per chart. Consider adding a filter`
+              : t`Max ${BAR_CHART_MAXIMUM_NUMBER_OF_BARS} bars per chart. Consider adding a filter`
+          }
        />
      )}
      {chartSettings.map((group) => {
@@ -104,19 +104,29 @@ export const ChartGroupByFieldSelectionDropdownContentBase = <
      [subFieldNameKey]: subFieldName,
    };

-    if (
-      !isSecondaryAxis ||
-      configuration.__typename !== 'BarChartConfiguration'
-    ) {
+    if (!isSecondaryAxis) {
      return baseConfig;
    }

-    return {
-      ...baseConfig,
-      groupMode: isDefined(fieldId)
-        ? (configuration.groupMode ?? BarChartGroupMode.STACKED)
-        : null,
-    };
+    if (configuration.__typename === 'BarChartConfiguration') {
+      return {
+        ...baseConfig,
+        groupMode: isDefined(fieldId)
+          ? (configuration.groupMode ?? BarChartGroupMode.STACKED)
+          : null,
+      };
+    }
+
+    if (configuration.__typename === 'LineChartConfiguration') {
+      return {
+        ...baseConfig,
+        isStacked: isDefined(fieldId)
+          ? (configuration.isStacked ?? true)
+          : null,
+      };
+    }
+
+    return baseConfig;
  };

  const handleSelectField = (fieldMetadataItem: FieldMetadataItem) => {
@@ -56,14 +56,22 @@ export const ChartXAxisSortBySelectionDropdownContent = () => {
    closeDropdown();
  };

+  const isLineChart = configuration.__typename === 'LineChartConfiguration';
+  const availableOptions = X_SORT_BY_OPTIONS.filter((option) => {
+    if (isLineChart) {
+      return option.value !== 'VALUE_ASC' && option.value !== 'VALUE_DESC';
+    }
+    return true;
+  });
+
  return (
    <DropdownMenuItemsContainer>
      <SelectableList
        selectableListInstanceId={dropdownId}
        focusId={dropdownId}
-        selectableItemIdArray={X_SORT_BY_OPTIONS.map((option) => option.value)}
+        selectableItemIdArray={availableOptions.map((option) => option.value)}
      >
-        {X_SORT_BY_OPTIONS.map((sortOption) => (
+        {availableOptions.map((sortOption) => (
          <SelectableListItem
            key={sortOption.value}
            itemId={sortOption.value}
@@ -13,6 +13,7 @@ import { RANGE_MAX_SETTING } from '@/command-menu/pages/page-layout/constants/se
 import { RANGE_MIN_SETTING } from '@/command-menu/pages/page-layout/constants/settings/RangeMinSetting';
 import { SORT_BY_GROUP_BY_FIELD_SETTING } from '@/command-menu/pages/page-layout/constants/settings/SortByGroupByFieldSetting';
 import { SORT_BY_X_SETTING } from '@/command-menu/pages/page-layout/constants/settings/SortByXSetting';
+import { STACKED_LINES_SETTING } from '@/command-menu/pages/page-layout/constants/settings/StackedLineSettings';
 import { type ChartSettingsGroup } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup';

 export const LINE_CHART_SETTINGS: ChartSettingsGroup[] = [
@@ -42,6 +43,11 @@ export const LINE_CHART_SETTINGS: ChartSettingsGroup[] = [
  },
  {
    heading: 'Style',
-    items: [COLORS_SETTING, AXIS_NAME_SETTING, DATA_LABELS_SETTING],
+    items: [
+      COLORS_SETTING,
+      AXIS_NAME_SETTING,
+      STACKED_LINES_SETTING,
+      DATA_LABELS_SETTING,
+    ],
  },
 ];
@@ -15,6 +15,7 @@ export const CHART_CONFIGURATION_SETTING_LABELS = {
  EACH_SLICE_REPRESENTS: msg`Each slice represents`,
  AXIS_NAME: msg`Axis name`,
  STACKED_BARS: msg`Stacked bars`,
+  STACKED_LINES: msg`Stacked lines`,
  OMIT_NULL_VALUES: msg`Omit zero values`,
  MIN_RANGE: msg`Min range`,
  MAX_RANGE: msg`Max range`,
@@ -0,0 +1,12 @@
+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 { IconStack2 } from 'twenty-ui/display';
+
+export const STACKED_LINES_SETTING: ChartSettingsItem = {
+  isBoolean: true,
+  Icon: IconStack2,
+  label: CHART_CONFIGURATION_SETTING_LABELS.STACKED_LINES,
+  id: CHART_CONFIGURATION_SETTING_IDS.STACKED_LINES,
+  dependsOn: [CHART_CONFIGURATION_SETTING_IDS.GROUP_BY],
+};
@@ -159,9 +159,13 @@ export const useChartSettingsValues = ({
      case CHART_CONFIGURATION_SETTING_IDS.DATA_LABELS:
        return configuration.displayDataLabel ?? undefined;
      case CHART_CONFIGURATION_SETTING_IDS.STACKED_BARS:
-        return 'groupMode' in configuration
+        return configuration.__typename === 'BarChartConfiguration'
          ? configuration.groupMode !== 'GROUPED'
          : true;
+      case CHART_CONFIGURATION_SETTING_IDS.STACKED_LINES:
+        return configuration.__typename === 'LineChartConfiguration'
+          ? configuration.isStacked !== false
+          : true;
      case CHART_CONFIGURATION_SETTING_IDS.OMIT_NULL_VALUES:
        return 'omitNullValues' in configuration
          ? (configuration.omitNullValues ?? false)
@@ -41,6 +41,17 @@ export const useUpdateChartSettingToggle = ({
      return;
    }

+    if (settingId === CHART_CONFIGURATION_SETTING_IDS.STACKED_LINES) {
+      const isCurrentlyStacked = getChartSettingsValues(settingId);
+
+      updateCurrentWidgetConfig({
+        configToUpdate: {
+          isStacked: !isCurrentlyStacked,
+        },
+      });
+      return;
+    }
+
    const newValue = !getChartSettingsValues(settingId);

    updateCurrentWidgetConfig({
@@ -14,6 +14,7 @@ export enum CHART_CONFIGURATION_SETTING_IDS {
  EACH_SLICE_REPRESENTS = 'EACH_SLICE_REPRESENTS',
  AXIS_NAME = 'AXIS_NAME',
  STACKED_BARS = 'STACKED_BARS',
+  STACKED_LINES = 'STACKED_LINES',
  OMIT_NULL_VALUES = 'OMIT_NULL_VALUES',
  MIN_RANGE = 'MIN_RANGE',
  MAX_RANGE = 'MAX_RANGE',
@@ -25,6 +26,7 @@ export enum CHART_CONFIGURATION_SETTING_IDS {
 export const CHART_CONFIGURATION_SETTING_TO_CONFIG_KEY_MAP = {
  [CHART_CONFIGURATION_SETTING_IDS.DATA_LABELS]: 'displayDataLabel',
  [CHART_CONFIGURATION_SETTING_IDS.STACKED_BARS]: 'groupMode',
+  [CHART_CONFIGURATION_SETTING_IDS.STACKED_LINES]: 'isStacked',
  [CHART_CONFIGURATION_SETTING_IDS.OMIT_NULL_VALUES]: 'omitNullValues',
  [CHART_CONFIGURATION_SETTING_IDS.MIN_RANGE]: 'rangeMin',
  [CHART_CONFIGURATION_SETTING_IDS.MAX_RANGE]: 'rangeMax',