Files
twenty/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/generateGroupByQueryVariablesFromPieChartConfiguration.ts
T
Raphaël Bosi 576019e465 [DASHBOARDS] Rotate ticks on bar and line charts (#16528)
## Description

3 steps depending on the widget width. From bigger to tighter space:
- Fully shown horizontal text
- Rotated text
- Rotated text with skipped ticks to avoid overlapping

Also created common files for all constants for bar and pie charts.
Since a lot of them are shared, they can be inherited from a common
file.

## Video QA


https://github.com/user-attachments/assets/fd58d412-1a8b-4bd6-a420-4c03767e98d5
2025-12-16 16:39:42 +00:00

99 lines
3.1 KiB
TypeScript

import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { GRAPH_DEFAULT_DATE_GRANULARITY } from '@/page-layout/widgets/graph/constants/GraphDefaultDateGranularity';
import { getGroupByOrderBy } from '@/page-layout/widgets/graph/utils/getGroupByOrderBy';
import { isRelationNestedFieldDateKind } from '@/page-layout/widgets/graph/utils/isRelationNestedFieldDateKind';
import {
type AggregateOrderByWithGroupByField,
type ObjectRecordOrderByForCompositeField,
type ObjectRecordOrderByForRelationField,
type ObjectRecordOrderByForScalarField,
type ObjectRecordOrderByWithGroupByDateField,
} from 'twenty-shared/types';
import { isDefined, isFieldMetadataDateKind } from 'twenty-shared/utils';
import { type PieChartConfiguration } from '~/generated/graphql';
import {
buildGroupByFieldObject,
type GroupByFieldObject,
} from './buildGroupByFieldObject';
export const generateGroupByQueryVariablesFromPieChartConfiguration = ({
objectMetadataItem,
objectMetadataItems,
chartConfiguration,
aggregateOperation,
limit,
firstDayOfTheWeek,
}: {
objectMetadataItem: ObjectMetadataItem;
objectMetadataItems: ObjectMetadataItem[];
chartConfiguration: PieChartConfiguration;
aggregateOperation?: string;
limit?: number;
firstDayOfTheWeek?: number;
}) => {
const groupByFieldId = chartConfiguration.groupByFieldMetadataId;
const groupBySubFieldName =
chartConfiguration.groupBySubFieldName ?? undefined;
const dateGranularity = chartConfiguration.dateGranularity ?? undefined;
const groupByField = objectMetadataItem.fields.find(
(field) => field.id === groupByFieldId,
);
if (!isDefined(groupByField) || !isDefined(groupByFieldId)) {
throw new Error(
`Field with id ${groupByFieldId} not found in object metadata`,
);
}
const isFieldDate = isFieldMetadataDateKind(groupByField.type);
const isNestedDate = isRelationNestedFieldDateKind({
relationField: groupByField,
relationNestedFieldName: groupBySubFieldName,
objectMetadataItems,
});
const shouldApplyDateGranularity = isFieldDate || isNestedDate;
const groupBy: Array<GroupByFieldObject> = [
buildGroupByFieldObject({
field: groupByField,
subFieldName: groupBySubFieldName,
dateGranularity: shouldApplyDateGranularity
? (dateGranularity ?? GRAPH_DEFAULT_DATE_GRANULARITY)
: undefined,
firstDayOfTheWeek,
isNestedDateField: isNestedDate,
}),
];
const orderBy: Array<
| AggregateOrderByWithGroupByField
| ObjectRecordOrderByForScalarField
| ObjectRecordOrderByWithGroupByDateField
| ObjectRecordOrderByForCompositeField
| ObjectRecordOrderByForRelationField
> = [];
if (isDefined(chartConfiguration.orderBy)) {
orderBy.push(
getGroupByOrderBy({
graphOrderBy: chartConfiguration.orderBy,
groupByField,
groupBySubFieldName,
aggregateOperation,
dateGranularity: shouldApplyDateGranularity
? (dateGranularity ?? GRAPH_DEFAULT_DATE_GRANULARITY)
: undefined,
}),
);
}
return {
groupBy,
...(orderBy.length > 0 && { orderBy }),
...(isDefined(limit) && { limit }),
};
};