Connect the bar chart to the group by resolver (#14885)

Closes https://github.com/twentyhq/core-team-issues/issues/1535 Video QA: https://github.com/user-attachments/assets/153fa3f1-08d9-4952-9456-635c602e1f57 https://github.com/user-attachments/assets/d3111afb-4c84-4f57-8a56-5cf666748c86 There are still some formatting and design issues (the labels which are on top of each other and the values which should be formatted) that will be fixed in a future PR --------- Co-authored-by: ehconitin <nitinkoche03@gmail.com>
2025-10-09 14:54:33 +02:00
parent 973b4fef90
commit 875dc1a6b8
50 changed files with 1653 additions and 70 deletions
@@ -0,0 +1,60 @@
+import { ChartSkeletonLoader } from '@/page-layout/widgets/graph/components/ChartSkeletonLoader';
+import { useGraphBarChartWidgetData } from '@/page-layout/widgets/graph/graphWidgetBarChart/hooks/useGraphBarChartWidgetData';
+import { lazy, Suspense } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+import {
+  type BarChartConfiguration,
+  type PageLayoutWidget,
+} from '~/generated/graphql';
+
+const GraphWidgetBarChart = lazy(() =>
+  import(
+    '@/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart'
+  ).then((module) => ({
+    default: module.GraphWidgetBarChart,
+  })),
+);
+
+export const GraphWidgetBarChartRenderer = ({
+  widget,
+}: {
+  widget: PageLayoutWidget;
+}) => {
+  const {
+    data,
+    indexBy,
+    keys,
+    series,
+    xAxisLabel,
+    yAxisLabel,
+    showDataLabels,
+    loading,
+    error,
+  } = useGraphBarChartWidgetData({
+    objectMetadataItemId: widget.objectMetadataId,
+    configuration: widget.configuration as BarChartConfiguration,
+  });
+
+  if (loading) {
+    return <ChartSkeletonLoader />;
+  }
+
+  if (isDefined(error)) {
+    return <div>Error: {error.message}</div>;
+  }
+
+  return (
+    <Suspense fallback={<ChartSkeletonLoader />}>
+      <GraphWidgetBarChart
+        data={data}
+        series={series}
+        indexBy={indexBy}
+        keys={keys}
+        xAxisLabel={xAxisLabel}
+        yAxisLabel={yAxisLabel}
+        showValues={showDataLabels}
+        id={widget.id}
+      />
+    </Suspense>
+  );
+};
@@ -36,6 +36,7 @@ export const useBarChartData = ({
    () => new Map<string, BarChartSeries>(series?.map((s) => [s.key, s]) || []),
    [series],
  );
+
  const barConfigs = useMemo((): BarChartConfig[] => {
    return data.flatMap((dataPoint, dataIndex) => {
      const indexValue = dataPoint[indexBy];
@@ -0,0 +1,60 @@
+import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
+import { type BarChartDataItem } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartDataItem';
+import { type BarChartSeries } from '@/page-layout/widgets/graph/graphWidgetBarChart/types/BarChartSeries';
+import { useGraphWidgetGroupByQuery } from '@/page-layout/widgets/graph/hooks/useGraphWidgetGroupByQuery';
+import { transformGroupByDataToBarChartData } from '@/page-layout/widgets/graph/utils/transformGroupByDataToBarChartData';
+import { useMemo } from 'react';
+import { type BarChartConfiguration } from '~/generated/graphql';
+
+type UseGraphBarChartWidgetDataProps = {
+  objectMetadataItemId: string;
+  configuration: BarChartConfiguration;
+};
+
+type UseGraphBarChartWidgetDataResult = {
+  data: BarChartDataItem[];
+  indexBy: string;
+  keys: string[];
+  series: BarChartSeries[];
+  xAxisLabel?: string;
+  yAxisLabel?: string;
+  showDataLabels: boolean;
+  loading: boolean;
+  error?: Error;
+};
+
+export const useGraphBarChartWidgetData = ({
+  objectMetadataItemId,
+  configuration,
+}: UseGraphBarChartWidgetDataProps): UseGraphBarChartWidgetDataResult => {
+  const { objectMetadataItem } = useObjectMetadataItemById({
+    objectId: objectMetadataItemId,
+  });
+
+  const {
+    data: groupByData,
+    loading,
+    error,
+    aggregateOperation,
+  } = useGraphWidgetGroupByQuery({
+    objectMetadataItemId,
+    configuration,
+  });
+
+  const transformedData = useMemo(
+    () =>
+      transformGroupByDataToBarChartData({
+        groupByData,
+        objectMetadataItem,
+        configuration,
+        aggregateOperation,
+      }),
+    [groupByData, objectMetadataItem, configuration, aggregateOperation],
+  );
+
+  return {
+    ...transformedData,
+    loading,
+    error,
+  };
+};