Files
twenty/packages/twenty-front/src/modules/page-layout/widgets/graph/hooks/useGraphWidgetGroupByQuery.ts
T
Raphaël Bosi fdb4e4ef10 [DASHBOARDS] Use a time scale when the primary axis is a date on the Bar Chart (#15932)
Closes https://github.com/twentyhq/core-team-issues/issues/1891

Create empty buckets according to the date granularity

Video QA:


https://github.com/user-attachments/assets/86c0f817-35b3-4bab-b093-d11491684b82

Note: We would also need to create empty buckets for cyclic
granularities (DAY_OF_THE_WEEK, MONTH_OF_THE_YEAR, QUARTER_OF_THE_YEAR).
TODO:
- Always order the cyclic granularities Monday -> Sunday (take
firstDayOfTheWeek into account), January -> December, Q1 -> Q4. For now
they are returned by the backend in alphabetical order, which doesn't
make much sense
- Remove the translation into the user's locale of these granularities
from the backend because otherwise we can't reconstruct the missing days
or month in the frontend since they will be translated

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2025-11-21 10:24:19 +01:00

81 lines
2.4 KiB
TypeScript

import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
import { getAvailableAggregationsFromObjectFields } from '@/object-record/utils/getAvailableAggregationsFromObjectFields';
import { useGraphWidgetQueryCommon } from '@/page-layout/widgets/graph/hooks/useGraphWidgetQueryCommon';
import { type GroupByChartConfiguration } from '@/page-layout/widgets/graph/types/GroupByChartConfiguration';
import { generateGroupByQuery } from '@/page-layout/widgets/graph/utils/generateGroupByQuery';
import { generateGroupByQueryVariablesFromChartConfiguration } from '@/page-layout/widgets/graph/utils/generateGroupByQueryVariablesFromChartConfiguration';
import { useQuery } from '@apollo/client';
import { useMemo } from 'react';
import { DEFAULT_NUMBER_OF_GROUPS_LIMIT } from 'twenty-shared/constants';
import { isDefined } from 'twenty-shared/utils';
export const useGraphWidgetGroupByQuery = ({
objectMetadataItemId,
configuration,
limit = DEFAULT_NUMBER_OF_GROUPS_LIMIT,
}: {
objectMetadataItemId: string;
configuration: GroupByChartConfiguration;
limit?: number;
}) => {
const { objectMetadataItem, aggregateField, gqlOperationFilter } =
useGraphWidgetQueryCommon({
objectMetadataItemId,
configuration,
});
if (!isDefined(aggregateField)) {
throw new Error('Aggregate field not found');
}
const availableAggregations = useMemo(
() =>
getAvailableAggregationsFromObjectFields(
objectMetadataItem.readableFields,
),
[objectMetadataItem.readableFields],
);
const aggregateOperation =
availableAggregations[aggregateField.name]?.[
configuration.aggregateOperation
];
if (!isDefined(aggregateOperation)) {
throw new Error('Aggregate operation not found');
}
const groupByQueryVariables =
generateGroupByQueryVariablesFromChartConfiguration({
objectMetadataItem,
chartConfiguration: configuration,
aggregateOperation: aggregateOperation,
limit,
});
const variables = {
...groupByQueryVariables,
filter: gqlOperationFilter,
};
const query = generateGroupByQuery({
objectMetadataItem,
aggregateOperations: [aggregateOperation],
});
const apolloCoreClient = useApolloCoreClient();
const { data, loading, error, refetch } = useQuery(query, {
client: apolloCoreClient,
variables,
});
return {
data,
loading,
error,
refetch,
aggregateOperation: aggregateOperation,
};
};