Update chart limit error message (#16133)

## Description - Display days, weeks, months or years instead of bars in the error message - Update the banner position - Add translations on section titles ## Before <img width="824" height="1378" alt="CleanShot 2025-11-27 at 14 51 40@2x" src="https://github.com/user-attachments/assets/b2d7d1e6-e6d9-419b-8d7a-21f43e951898" /> ## After <img width="832" height="1382" alt="CleanShot 2025-11-27 at 14 51 15@2x" src="https://github.com/user-attachments/assets/fe66d202-71be-45dc-8dff-502946e33aac" />
2025-11-27 15:32:12 +01:00
parent d217767600
commit ec53302ba8
12 changed files with 194 additions and 57 deletions
@@ -0,0 +1,52 @@
+import { getDateGranularityPluralLabel } from '@/command-menu/pages/page-layout/utils/getDateGranularityPluralLabel';
+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 { PIE_CHART_MAXIMUM_NUMBER_OF_SLICES } from '@/page-layout/widgets/graph/graphWidgetPieChart/constants/PieChartMaximumNumberOfSlices.constant';
+import { t } from '@lingui/core/macro';
+import { type ObjectRecordGroupByDateGranularity } from 'twenty-shared/types';
+import { isDefined } from 'twenty-shared/utils';
+
+import { GraphType } from '~/generated/graphql';
+
+type GetChartLimitMessageParams = {
+  graphType: GraphType;
+  isPrimaryAxisDate: boolean;
+  primaryAxisDateGranularity:
+    | ObjectRecordGroupByDateGranularity
+    | null
+    | undefined;
+};
+
+export const getChartLimitMessage = ({
+  graphType,
+  isPrimaryAxisDate,
+  primaryAxisDateGranularity,
+}: GetChartLimitMessageParams): string => {
+  const maxItems =
+    graphType === GraphType.LINE
+      ? LINE_CHART_MAXIMUM_NUMBER_OF_DATA_POINTS
+      : graphType === GraphType.VERTICAL_BAR ||
+          graphType === GraphType.HORIZONTAL_BAR
+        ? BAR_CHART_MAXIMUM_NUMBER_OF_BARS
+        : PIE_CHART_MAXIMUM_NUMBER_OF_SLICES;
+
+  if (isPrimaryAxisDate && isDefined(primaryAxisDateGranularity)) {
+    const granularityLabel = getDateGranularityPluralLabel(
+      primaryAxisDateGranularity,
+    );
+    return t`Undisplayed data: max ${maxItems} ${granularityLabel} per chart.`;
+  }
+
+  if (graphType === GraphType.LINE) {
+    return t`Undisplayed data: max ${maxItems} data points per chart.`;
+  }
+
+  if (
+    graphType === GraphType.VERTICAL_BAR ||
+    graphType === GraphType.HORIZONTAL_BAR
+  ) {
+    return t`Undisplayed data: max ${maxItems} bars per chart.`;
+  }
+
+  return t`Undisplayed data: max ${maxItems} slices per chart.`;
+};