[Dashboards] add hide empty category option for pie charts (#16550)

closes
https://discord.com/channels/1130383047699738754/1445403391722520677


https://github.com/user-attachments/assets/980225a8-153e-4b49-89f7-5944227c8fdb


toggle label ie `Hide empty category` -- debatable

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/hooks/usePieChartCenterMetricData.ts

@@ -39,6 +39,22 @@ export const usePieChartCenterMetricData = ({
     configuration,
   });
 
+  const groupByField = objectMetadataItem.fields.find(
+    (field) => field.id === configuration.groupByFieldMetadataId,
+  );
+
+  const centerMetricFilter = useMemo(() => {
+    if (!configuration.hideEmptyCategory || !groupByField) {
+      return gqlOperationFilter;
+    }
+
+    const notNullFilter = { [groupByField.name]: { is: 'NOT_NULL' as const } };
+
+    return isDefined(gqlOperationFilter)
+      ? { and: [gqlOperationFilter, notNullFilter] }
+      : notNullFilter;
+  }, [gqlOperationFilter, configuration.hideEmptyCategory, groupByField]);
+
   const centerMetricAggregateOperation =
     configuration.aggregateOperation as AggregateOperations;
 
@@ -58,7 +74,7 @@ export const usePieChartCenterMetricData = ({
   const { data: centerMetricData } = useAggregateRecords({
     objectNameSingular: objectMetadataItem.nameSingular,
     recordGqlFieldsAggregate,
-    filter: gqlOperationFilter,
+    filter: centerMetricFilter,
     skip,
   });
 

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/utils/transformGroupByDataToPieChartData.ts

@@ -82,8 +82,14 @@ export const transformGroupByDataToPieChartData = ({
       ? (configuration.dateGranularity ?? undefined)
       : undefined;
 
+  const filteredResults = configuration.hideEmptyCategory
+    ? rawResults.filter((result) =>
+        isDefined(result.groupByDimensionValues?.[0]),
+      )
+    : rawResults;
+
   // TODO: Add a limit to the query instead of slicing here (issue: twentyhq/core-team-issues#1600)
-  const limitedResults = rawResults.slice(
+  const limitedResults = filteredResults.slice(
     0,
     PIE_CHART_MAXIMUM_NUMBER_OF_SLICES,
   );
@@ -122,7 +128,8 @@ export const transformGroupByDataToPieChartData = ({
   return {
     data,
     showLegend,
-    hasTooManyGroups: rawResults.length > PIE_CHART_MAXIMUM_NUMBER_OF_SLICES,
+    hasTooManyGroups:
+      filteredResults.length > PIE_CHART_MAXIMUM_NUMBER_OF_SLICES,
     formattedToRawLookup,
   };
 };