houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create typeguards for widget configurations (#16627)

Browse Source 
We checked for widget types by doing `configuration?.__typename ===
'LineChartConfiguration'` which made the code difficult to read.

In this PR, I introduce type guards for each widget type.

Note: the configuration type is `WidgetConfiguration |
FieldsConfiguration` for now but should be changed to
`WidgetConfiguration` when @Devessier adds FieldsConfiguration to the
backend type `WidgetConfiguration`.
This commit is contained in:
Raphaël Bosi
2025-12-17 17:48:34 +01:00
committed by GitHub
parent a560e8ac83
commit b0e256221a
40 changed files with 530 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx
+16 -14
View File
@@ -20,6 +20,8 @@ import { t } from '@lingui/core/macro';
import { isFieldMetadataDateKind } from 'twenty-shared/utils';
import { assertChartWidgetOrThrow } from '@/command-menu/pages/page-layout/utils/assertChartWidgetOrThrow';
import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration';
import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { GraphType } from '~/generated/graphql';
@@ -101,13 +103,13 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
.map((item) => item.id),
);
const primaryAxisFieldMetadataId =
configuration.__typename === 'BarChartConfiguration' ||
configuration.__typename === 'LineChartConfiguration'
? configuration.primaryAxisGroupByFieldMetadataId
: configuration.__typename === 'PieChartConfiguration'
? configuration.groupByFieldMetadataId
: null;
const primaryAxisFieldMetadataId = isBarOrLineChartConfiguration(
configuration,
)
? configuration.primaryAxisGroupByFieldMetadataId
: isPieChartConfiguration(configuration)
? configuration.groupByFieldMetadataId
: null;
const primaryAxisField = objectMetadataItem?.fields?.find(
(field) => field.id === primaryAxisFieldMetadataId,
@@ -115,13 +117,13 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
const isPrimaryAxisDate = isFieldMetadataDateKind(primaryAxisField?.type);
const primaryAxisDateGranularity =
configuration.__typename === 'BarChartConfiguration' ||
configuration.__typename === 'LineChartConfiguration'
? configuration.primaryAxisDateGranularity
: configuration.__typename === 'PieChartConfiguration'
? configuration.dateGranularity
: null;
const primaryAxisDateGranularity = isBarOrLineChartConfiguration(
configuration,
)
? configuration.primaryAxisDateGranularity
: isPieChartConfiguration(configuration)
? configuration.dateGranularity
: null;
const bannerTargetHeading =
currentGraphType === GraphType.PIE
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectableListItem.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration';
import { type ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations';
import { convertExtendedAggregateOperationToAggregateOperation } from '@/object-record/utils/convertExtendedAggregateOperationToAggregateOperation';
import { DASHBOARD_AGGREGATE_OPERATION_RATIO } from '@/page-layout/widgets/graph/constants/DashboardAggregateOperationRatio';
@@ -52,7 +53,7 @@ export const ChartAggregateOperationSelectableListItem = ({
configuration.aggregateOperation;
const isCurrentlyRatio =
configuration?.__typename === 'AggregateChartConfiguration' &&
isAggregateChartConfiguration(configuration) &&
isDefined(configuration.ratioAggregateConfig);
if (!isExtendedAggregateOperation(operation)) {
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx
+12 -15
View File
@@ -3,6 +3,9 @@ import { ChartRatioAggregateOperationSelectableListItem } from '@/command-menu/p
import { ChartRatioOptionValueSelectionDropdownContent } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionValueSelectionDropdownContent';
import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration';
import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration';
import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { DateAggregateOperations } from '@/object-record/record-table/constants/DateAggregateOperations';
import { getAvailableAggregateOperationsForFieldMetadataType } from '@/object-record/record-table/record-table-footer/utils/getAvailableAggregateOperationsForFieldMetadataType';
@@ -22,7 +25,6 @@ import { t } from '@lingui/core/macro';
import { useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { IconChevronLeft } from 'twenty-ui/display';
import { GraphType } from '~/generated/graphql';
import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
export const ChartAggregateOperationSelectionDropdownContent = ({
@@ -38,18 +40,20 @@ export const ChartAggregateOperationSelectionDropdownContent = ({
const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
const configuration = widgetInEditMode?.configuration;
const isAggregateChart = isAggregateChartConfiguration(configuration);
if (
widgetInEditMode?.configuration?.__typename !== 'BarChartConfiguration' &&
widgetInEditMode?.configuration?.__typename !== 'LineChartConfiguration' &&
widgetInEditMode?.configuration?.__typename !==
'AggregateChartConfiguration' &&
widgetInEditMode?.configuration?.__typename !== 'PieChartConfiguration'
!isBarOrLineChartConfiguration(configuration) &&
!isAggregateChart &&
!isPieChartConfiguration(configuration)
) {
throw new Error('Invalid configuration type');
}
const sourceObjectMetadataItem = objectMetadataItems.find(
(item) => item.id === widgetInEditMode.objectMetadataId,
(item) => item.id === widgetInEditMode?.objectMetadataId,
);
const selectedField = sourceObjectMetadataItem?.fields.find(
@@ -60,13 +64,6 @@ export const ChartAggregateOperationSelectionDropdownContent = ({
DropdownComponentInstanceContext,
);
const isAggregateChart =
widgetInEditMode.configuration.graphType === GraphType.AGGREGATE;
const isAggregateOrGaugeChart =
isAggregateChart ||
widgetInEditMode.configuration.graphType === GraphType.GAUGE;
const availableAggregateOperations: AggregateChartOperation[] = selectedField
? isAggregateChart
? getAvailableAggregateOperationsForAggregateChart({
@@ -80,7 +77,7 @@ export const ChartAggregateOperationSelectionDropdownContent = ({
const filteredAggregateOperations = availableAggregateOperations.filter(
(operation) => {
return (
isAggregateOrGaugeChart ||
isAggregateChart ||
(operation !== DateAggregateOperations.EARLIEST &&
operation !== DateAggregateOperations.LATEST)
);
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAxisNameSelectionDropdownContent.tsx
+2 -4
View File
@@ -2,6 +2,7 @@ import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pa
import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
import { getChartAxisNameDisplayOptions } from '@/command-menu/pages/page-layout/utils/getChartAxisNameDisplayOptions';
import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
@@ -17,10 +18,7 @@ export const ChartAxisNameSelectionDropdownContent = () => {
const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
if (
widgetInEditMode?.configuration?.__typename !== 'BarChartConfiguration' &&
widgetInEditMode?.configuration?.__typename !== 'LineChartConfiguration'
) {
if (!isBarOrLineChartConfiguration(widgetInEditMode?.configuration)) {
throw new Error('Invalid configuration type');
}
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx
+8 -5
View File
@@ -4,6 +4,10 @@ import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pa
import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration';
import { isGaugeChartConfiguration } from '@/command-menu/pages/page-layout/utils/isGaugeChartConfiguration';
import { isIframeConfiguration } from '@/command-menu/pages/page-layout/utils/isIframeConfiguration';
import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
@@ -48,17 +52,16 @@ export const ChartColorSelectionDropdownContent = () => {
return null;
}
if (widgetInEditMode.configuration?.__typename === 'IframeConfiguration') {
if (isIframeConfiguration(widgetInEditMode.configuration)) {
throw new Error('Invalid configuration type');
}
const configuration = widgetInEditMode.configuration as ChartConfiguration;
if (
configuration.__typename !== 'BarChartConfiguration' &&
configuration.__typename !== 'LineChartConfiguration' &&
configuration.__typename !== 'GaugeChartConfiguration' &&
configuration.__typename !== 'PieChartConfiguration'
!isBarOrLineChartConfiguration(configuration) &&
!isGaugeChartConfiguration(configuration) &&
!isPieChartConfiguration(configuration)
) {
return null;
}
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent.tsx
+14 -16
View File
@@ -3,6 +3,9 @@ import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/h
import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
import { getDateGranularityLabel } from '@/command-menu/pages/page-layout/utils/getDateGranularityLabel';
import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration';
import { isChartConfiguration } from '@/command-menu/pages/page-layout/utils/isChartConfiguration';
import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
@@ -28,15 +31,11 @@ const getCurrentDateGranularity = ({
}) => {
const defaultGranularity = ObjectRecordGroupByDateGranularity.DAY;
if (configuration?.__typename === 'PieChartConfiguration') {
if (isPieChartConfiguration(configuration)) {
return configuration.dateGranularity || defaultGranularity;
}
const isBarOrLineChart =
configuration?.__typename === 'BarChartConfiguration' ||
configuration?.__typename === 'LineChartConfiguration';
if (!isBarOrLineChart) {
if (!isBarOrLineChartConfiguration(configuration)) {
return defaultGranularity;
}
@@ -55,23 +54,22 @@ export const ChartDateGranularitySelectionDropdownContent = ({
const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
if (
!isDefined(axis) &&
widgetInEditMode?.configuration?.__typename !== 'PieChartConfiguration'
) {
const configuration = widgetInEditMode?.configuration;
if (!isChartConfiguration(configuration)) {
throw new Error('Invalid configuration type');
}
if (
isDefined(axis) &&
widgetInEditMode?.configuration?.__typename !== 'BarChartConfiguration' &&
widgetInEditMode?.configuration?.__typename !== 'LineChartConfiguration'
) {
if (!isDefined(axis) && !isPieChartConfiguration(configuration)) {
throw new Error('Invalid configuration type');
}
if (isDefined(axis) && !isBarOrLineChartConfiguration(configuration)) {
throw new Error('Invalid configuration type');
}
const currentDateGranularity = getCurrentDateGranularity({
configuration: widgetInEditMode?.configuration as ChartConfiguration,
configuration,
axis: axis as 'primary' | 'secondary',
});
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx
+6 -4
View File
@@ -1,6 +1,9 @@
import { ChartAggregateOperationSelectionDropdownContent } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent';
import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration';
import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration';
import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { isFieldRelation } from '@/object-record/record-field/ui/types/guards/isFieldRelation';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -29,10 +32,9 @@ export const ChartFieldSelectionForAggregateOperationDropdownContent = () => {
const configuration = widgetInEditMode?.configuration;
if (
configuration?.__typename !== 'BarChartConfiguration' &&
configuration?.__typename !== 'LineChartConfiguration' &&
configuration?.__typename !== 'AggregateChartConfiguration' &&
configuration?.__typename !== 'PieChartConfiguration'
!isBarOrLineChartConfiguration(configuration) &&
!isAggregateChartConfiguration(configuration) &&
!isPieChartConfiguration(configuration)
) {
throw new Error('Invalid configuration type');
}
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioAggregateOperationSelectableListItem.tsx
+2 -2
View File
@@ -1,5 +1,6 @@
import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration';
import { DASHBOARD_AGGREGATE_OPERATION_RATIO } from '@/page-layout/widgets/graph/constants/DashboardAggregateOperationRatio';
import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
@@ -29,8 +30,7 @@ export const ChartRatioAggregateOperationSelectableListItem = ({
);
const isCurrentlyRatio =
widgetInEditMode?.configuration?.__typename ===
'AggregateChartConfiguration' &&
isAggregateChartConfiguration(widgetInEditMode?.configuration) &&
isDefined(widgetInEditMode.configuration.ratioAggregateConfig);
const isFocused = selectedItemId === DASHBOARD_AGGREGATE_OPERATION_RATIO;
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionBooleanSelectableListItem.tsx
+6 -5
View File
@@ -1,6 +1,7 @@
import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration';
import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
@@ -35,11 +36,11 @@ export const ChartRatioOptionBooleanSelectableListItem = ({
dropdownId,
);
const currentRatioConfig =
widgetInEditMode?.configuration?.__typename ===
'AggregateChartConfiguration'
? widgetInEditMode.configuration.ratioAggregateConfig
: undefined;
const currentRatioConfig = isAggregateChartConfiguration(
widgetInEditMode?.configuration,
)
? widgetInEditMode.configuration.ratioAggregateConfig
: undefined;
const isSelected = currentRatioConfig?.optionValue === optionValue;
const isFocused = selectedItemId === optionValue;
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionSelectSelectableListItem.tsx
+6 -5
View File
@@ -1,6 +1,7 @@
import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration';
import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
@@ -37,11 +38,11 @@ export const ChartRatioOptionSelectSelectableListItem = ({
dropdownId,
);
const currentRatioConfig =
widgetInEditMode?.configuration?.__typename ===
'AggregateChartConfiguration'
? widgetInEditMode.configuration.ratioAggregateConfig
: undefined;
const currentRatioConfig = isAggregateChartConfiguration(
widgetInEditMode?.configuration,
)
? widgetInEditMode.configuration.ratioAggregateConfig
: undefined;
const isSelected = currentRatioConfig?.optionValue === optionValue;
const isFocused = selectedItemId === optionValue;
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionValueSelectionDropdownContent.tsx
+2 -4
View File
@@ -2,6 +2,7 @@ import { ChartRatioOptionBooleanSelectableListItem } from '@/command-menu/pages/
import { ChartRatioOptionSelectSelectableListItem } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionSelectSelectableListItem';
import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
@@ -41,10 +42,7 @@ export const ChartRatioOptionValueSelectionDropdownContent = ({
DropdownComponentInstanceContext,
);
if (
widgetInEditMode?.configuration?.__typename !==
'AggregateChartConfiguration'
) {
if (!isAggregateChartConfiguration(widgetInEditMode?.configuration)) {
return null;
}
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortByGroupByFieldDropdownContent.tsx
+4 -4
View File
@@ -3,6 +3,7 @@ import { useGraphGroupBySortOptionLabels } from '@/command-menu/pages/page-layou
import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
@@ -22,10 +23,9 @@ export const ChartSortByGroupByFieldDropdownContent = () => {
const configuration = widgetInEditMode?.configuration;
if (
configuration?.__typename !== 'BarChartConfiguration' &&
configuration?.__typename !== 'LineChartConfiguration'
) {
const isBarOrLineChart = isBarOrLineChartConfiguration(configuration);
if (!isBarOrLineChart) {
throw new Error('Invalid configuration type');
}
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortBySelectionDropdownContent.tsx
+8 -9
View File
@@ -3,6 +3,9 @@ import { useGraphXSortOptionLabels } from '@/command-menu/pages/page-layout/hook
import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
import { isBarChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarChartConfiguration';
import { isLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isLineChartConfiguration';
import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { isRelationNestedFieldDateKind } from '@/page-layout/widgets/graph/utils/isRelationNestedFieldDateKind';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -27,11 +30,11 @@ export const ChartSortBySelectionDropdownContent = () => {
const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
const configuration = widgetInEditMode?.configuration;
if (
configuration?.__typename !== 'BarChartConfiguration' &&
configuration?.__typename !== 'LineChartConfiguration' &&
configuration?.__typename !== 'PieChartConfiguration'
) {
const isPieChart = isPieChartConfiguration(configuration);
const isLineChart = isLineChartConfiguration(configuration);
const isBarChart = isBarChartConfiguration(configuration);
if (!isBarChart && !isLineChart && !isPieChart) {
throw new Error('Invalid configuration type');
}
@@ -62,10 +65,6 @@ export const ChartSortBySelectionDropdownContent = () => {
(item) => item.id === widgetInEditMode.objectMetadataId,
);
const isPieChart = configuration.__typename === 'PieChartConfiguration';
const isLineChart = configuration.__typename === 'LineChartConfiguration';
const isBarChart = configuration.__typename === 'BarChartConfiguration';
let currentOrderBy: GraphOrderBy | undefined;
let groupByFieldMetadataId: string | undefined;
let groupBySubFieldName: string | null | undefined;
packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateGraphTypeConfig.ts
+4 -4
View File
@@ -3,6 +3,8 @@ import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/
import { convertAggregateOperationForDateField } from '@/command-menu/pages/page-layout/utils/convertAggregateOperationForDateField';
import { convertBarOrLineChartConfigToPieChart } from '@/command-menu/pages/page-layout/utils/convertBarOrLineChartConfigToPieChart';
import { convertPieChartConfigToBarOrLineChart } from '@/command-menu/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart';
import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration';
import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
@@ -109,10 +111,8 @@ export const useGetConfigToUpdateAfterGraphTypeChange = ({
graphType === GraphType.HORIZONTAL_BAR ||
graphType === GraphType.LINE;
const wasBarOrLineChart =
currentConfiguration.__typename === 'BarChartConfiguration' ||
currentConfiguration.__typename === 'LineChartConfiguration';
const wasPieChart =
currentConfiguration.__typename === 'PieChartConfiguration';
isBarOrLineChartConfiguration(currentConfiguration);
const wasPieChart = isPieChartConfiguration(currentConfiguration);
if (isPieChart && wasBarOrLineChart) {
configToUpdate = {
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isAggregateChartConfiguration.test.ts
+31
View File
@@ -0,0 +1,31 @@
import {
type AggregateChartConfiguration,
type BarChartConfiguration,
} from '~/generated/graphql';
import { isAggregateChartConfiguration } from '../isAggregateChartConfiguration';
describe('isAggregateChartConfiguration', () => {
it('should return true for AggregateChartConfiguration', () => {
const configuration = {
__typename: 'AggregateChartConfiguration',
} as AggregateChartConfiguration;
expect(isAggregateChartConfiguration(configuration)).toBe(true);
});
it('should return false for BarChartConfiguration', () => {
const configuration = {
__typename: 'BarChartConfiguration',
} as BarChartConfiguration;
expect(isAggregateChartConfiguration(configuration)).toBe(false);
});
it('should return false for null', () => {
expect(isAggregateChartConfiguration(null)).toBe(false);
});
it('should return false for undefined', () => {
expect(isAggregateChartConfiguration(undefined)).toBe(false);
});
});
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isBarChartConfiguration.test.ts
+31
View File
@@ -0,0 +1,31 @@
import {
type BarChartConfiguration,
type LineChartConfiguration,
} from '~/generated/graphql';
import { isBarChartConfiguration } from '../isBarChartConfiguration';
describe('isBarChartConfiguration', () => {
it('should return true for BarChartConfiguration', () => {
const configuration = {
__typename: 'BarChartConfiguration' as const,
} as BarChartConfiguration;
expect(isBarChartConfiguration(configuration)).toBe(true);
});
it('should return false for LineChartConfiguration', () => {
const configuration = {
__typename: 'LineChartConfiguration' as const,
} as LineChartConfiguration;
expect(isBarChartConfiguration(configuration)).toBe(false);
});
it('should return false for null', () => {
expect(isBarChartConfiguration(null)).toBe(false);
});
it('should return false for undefined', () => {
expect(isBarChartConfiguration(undefined)).toBe(false);
});
});
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isBarOrLineChartConfiguration.test.ts
+40
View File
@@ -0,0 +1,40 @@
import {
type BarChartConfiguration,
type LineChartConfiguration,
type PieChartConfiguration,
} from '~/generated/graphql';
import { isBarOrLineChartConfiguration } from '../isBarOrLineChartConfiguration';
describe('isBarOrLineChartConfiguration', () => {
it('should return true for BarChartConfiguration', () => {
const configuration = {
__typename: 'BarChartConfiguration',
} as BarChartConfiguration;
expect(isBarOrLineChartConfiguration(configuration)).toBe(true);
});
it('should return true for LineChartConfiguration', () => {
const configuration = {
__typename: 'LineChartConfiguration',
} as LineChartConfiguration;
expect(isBarOrLineChartConfiguration(configuration)).toBe(true);
});
it('should return false for PieChartConfiguration', () => {
const configuration = {
__typename: 'PieChartConfiguration',
} as PieChartConfiguration;
expect(isBarOrLineChartConfiguration(configuration)).toBe(false);
});
it('should return false for null', () => {
expect(isBarOrLineChartConfiguration(null)).toBe(false);
});
it('should return false for undefined', () => {
expect(isBarOrLineChartConfiguration(undefined)).toBe(false);
});
});
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isChartConfiguration.test.ts
+76
View File
@@ -0,0 +1,76 @@
import {
type AggregateChartConfiguration,
type BarChartConfiguration,
type GaugeChartConfiguration,
type IframeConfiguration,
type LineChartConfiguration,
type PieChartConfiguration,
type StandaloneRichTextConfiguration,
} from '~/generated/graphql';
import { isChartConfiguration } from '../isChartConfiguration';
describe('isChartConfiguration', () => {
it('should return true for BarChartConfiguration', () => {
const configuration = {
__typename: 'BarChartConfiguration',
} as BarChartConfiguration;
expect(isChartConfiguration(configuration)).toBe(true);
});
it('should return true for LineChartConfiguration', () => {
const configuration = {
__typename: 'LineChartConfiguration',
} as LineChartConfiguration;
expect(isChartConfiguration(configuration)).toBe(true);
});
it('should return true for PieChartConfiguration', () => {
const configuration = {
__typename: 'PieChartConfiguration',
} as PieChartConfiguration;
expect(isChartConfiguration(configuration)).toBe(true);
});
it('should return true for AggregateChartConfiguration', () => {
const configuration = {
__typename: 'AggregateChartConfiguration',
} as AggregateChartConfiguration;
expect(isChartConfiguration(configuration)).toBe(true);
});
it('should return true for GaugeChartConfiguration', () => {
const configuration = {
__typename: 'GaugeChartConfiguration',
} as GaugeChartConfiguration;
expect(isChartConfiguration(configuration)).toBe(true);
});
it('should return false for IframeConfiguration', () => {
const configuration = {
__typename: 'IframeConfiguration',
} as IframeConfiguration;
expect(isChartConfiguration(configuration)).toBe(false);
});
it('should return false for StandaloneRichTextConfiguration', () => {
const configuration = {
__typename: 'StandaloneRichTextConfiguration',
} as StandaloneRichTextConfiguration;
expect(isChartConfiguration(configuration)).toBe(false);
});
it('should return false for null', () => {
expect(isChartConfiguration(null)).toBe(false);
});
it('should return false for undefined', () => {
expect(isChartConfiguration(undefined)).toBe(false);
});
});
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isGaugeChartConfiguration.test.ts
+31
View File
@@ -0,0 +1,31 @@
import {
type BarChartConfiguration,
type GaugeChartConfiguration,
} from '~/generated/graphql';
import { isGaugeChartConfiguration } from '../isGaugeChartConfiguration';
describe('isGaugeChartConfiguration', () => {
it('should return true for GaugeChartConfiguration', () => {
const configuration = {
__typename: 'GaugeChartConfiguration',
} as GaugeChartConfiguration;
expect(isGaugeChartConfiguration(configuration)).toBe(true);
});
it('should return false for BarChartConfiguration', () => {
const configuration = {
__typename: 'BarChartConfiguration',
} as BarChartConfiguration;
expect(isGaugeChartConfiguration(configuration)).toBe(false);
});
it('should return false for null', () => {
expect(isGaugeChartConfiguration(null)).toBe(false);
});
it('should return false for undefined', () => {
expect(isGaugeChartConfiguration(undefined)).toBe(false);
});
});
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isIframeConfiguration.test.ts
+31
View File
@@ -0,0 +1,31 @@
import {
type BarChartConfiguration,
type IframeConfiguration,
} from '~/generated/graphql';
import { isIframeConfiguration } from '../isIframeConfiguration';
describe('isIframeConfiguration', () => {
it('should return true for IframeConfiguration', () => {
const configuration = {
__typename: 'IframeConfiguration',
} as IframeConfiguration;
expect(isIframeConfiguration(configuration)).toBe(true);
});
it('should return false for BarChartConfiguration', () => {
const configuration = {
__typename: 'BarChartConfiguration',
} as BarChartConfiguration;
expect(isIframeConfiguration(configuration)).toBe(false);
});
it('should return false for null', () => {
expect(isIframeConfiguration(null)).toBe(false);
});
it('should return false for undefined', () => {
expect(isIframeConfiguration(undefined)).toBe(false);
});
});
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isLineChartConfiguration.test.ts
+31
View File
@@ -0,0 +1,31 @@
import {
type BarChartConfiguration,
type LineChartConfiguration,
} from '~/generated/graphql';
import { isLineChartConfiguration } from '../isLineChartConfiguration';
describe('isLineChartConfiguration', () => {
it('should return true for LineChartConfiguration', () => {
const configuration = {
__typename: 'LineChartConfiguration',
} as LineChartConfiguration;
expect(isLineChartConfiguration(configuration)).toBe(true);
});
it('should return false for BarChartConfiguration', () => {
const configuration = {
__typename: 'BarChartConfiguration',
} as BarChartConfiguration;
expect(isLineChartConfiguration(configuration)).toBe(false);
});
it('should return false for null', () => {
expect(isLineChartConfiguration(null)).toBe(false);
});
it('should return false for undefined', () => {
expect(isLineChartConfiguration(undefined)).toBe(false);
});
});
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isPieChartConfiguration.test.ts
+31
View File
@@ -0,0 +1,31 @@
import {
type BarChartConfiguration,
type PieChartConfiguration,
} from '~/generated/graphql';
import { isPieChartConfiguration } from '../isPieChartConfiguration';
describe('isPieChartConfiguration', () => {
it('should return true for PieChartConfiguration', () => {
const configuration = {
__typename: 'PieChartConfiguration',
} as PieChartConfiguration;
expect(isPieChartConfiguration(configuration)).toBe(true);
});
it('should return false for BarChartConfiguration', () => {
const configuration = {
__typename: 'BarChartConfiguration',
} as BarChartConfiguration;
expect(isPieChartConfiguration(configuration)).toBe(false);
});
it('should return false for null', () => {
expect(isPieChartConfiguration(null)).toBe(false);
});
it('should return false for undefined', () => {
expect(isPieChartConfiguration(undefined)).toBe(false);
});
});
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/buildChartGroupByFieldConfigUpdate.ts
+6 -3
View File
@@ -1,5 +1,8 @@
import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
import { isBarChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarChartConfiguration';
import { isFieldOrRelationNestedFieldDateKind } from '@/command-menu/pages/page-layout/utils/isFieldOrNestedFieldDateKind';
import { isLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isLineChartConfiguration';
import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { ObjectRecordGroupByDateGranularity } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
@@ -37,9 +40,9 @@ export const buildChartGroupByFieldConfigUpdate = <
[subFieldNameKey]: subFieldName,
};
const isBarChart = configuration.__typename === 'BarChartConfiguration';
const isLineChart = configuration.__typename === 'LineChartConfiguration';
const isPieChart = configuration.__typename === 'PieChartConfiguration';
const isBarChart = isBarChartConfiguration(configuration);
const isLineChart = isLineChartConfiguration(configuration);
const isPieChart = isPieChartConfiguration(configuration);
if (isPrimaryAxis) {
const existingOrderBy =
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart.ts
+2 -1
View File
@@ -1,10 +1,11 @@
import { type BarLineChartConvertibleFields } from '@/command-menu/pages/page-layout/types/BarLineChartConvertibleFields';
import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration';
import { type PieChartConfiguration } from '~/generated/graphql';
export const convertPieChartConfigToBarOrLineChart = (
configuration: PieChartConfiguration,
): BarLineChartConvertibleFields => {
if (configuration.__typename !== 'PieChartConfiguration') {
if (!isPieChartConfiguration(configuration)) {
return {};
}
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isAggregateChartConfiguration.ts
+11
View File
@@ -0,0 +1,11 @@
import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
import {
type AggregateChartConfiguration,
type WidgetConfiguration,
} from '~/generated/graphql';
export const isAggregateChartConfiguration = (
configuration: WidgetConfiguration | FieldsConfiguration | null | undefined,
): configuration is AggregateChartConfiguration => {
return configuration?.__typename === 'AggregateChartConfiguration';
};
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isBarChartConfiguration.ts
+11
View File
@@ -0,0 +1,11 @@
import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
import {
type BarChartConfiguration,
type WidgetConfiguration,
} from '~/generated/graphql';
export const isBarChartConfiguration = (
configuration: WidgetConfiguration | FieldsConfiguration | null | undefined,
): configuration is BarChartConfiguration => {
return configuration?.__typename === 'BarChartConfiguration';
};
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration.ts
+18
View File
@@ -0,0 +1,18 @@
import {
type BarChartConfiguration,
type LineChartConfiguration,
type WidgetConfiguration,
} from '~/generated/graphql';
import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
import { isBarChartConfiguration } from './isBarChartConfiguration';
import { isLineChartConfiguration } from './isLineChartConfiguration';
export const isBarOrLineChartConfiguration = (
configuration: WidgetConfiguration | FieldsConfiguration | null | undefined,
): configuration is BarChartConfiguration | LineChartConfiguration => {
return (
isBarChartConfiguration(configuration) ||
isLineChartConfiguration(configuration)
);
};
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isChartConfiguration.ts
+21
View File
@@ -0,0 +1,21 @@
import { type WidgetConfiguration } from '~/generated/graphql';
import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration';
import { isBarChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarChartConfiguration';
import { isGaugeChartConfiguration } from '@/command-menu/pages/page-layout/utils/isGaugeChartConfiguration';
import { isLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isLineChartConfiguration';
import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration';
import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
export const isChartConfiguration = (
configuration: WidgetConfiguration | FieldsConfiguration | null | undefined,
): configuration is ChartConfiguration => {
return (
isBarChartConfiguration(configuration) ||
isLineChartConfiguration(configuration) ||
isPieChartConfiguration(configuration) ||
isAggregateChartConfiguration(configuration) ||
isGaugeChartConfiguration(configuration)
);
};
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isGaugeChartConfiguration.ts
+11
View File
@@ -0,0 +1,11 @@
import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
import {
type GaugeChartConfiguration,
type WidgetConfiguration,
} from '~/generated/graphql';
export const isGaugeChartConfiguration = (
configuration: WidgetConfiguration | FieldsConfiguration | null | undefined,
): configuration is GaugeChartConfiguration => {
return configuration?.__typename === 'GaugeChartConfiguration';
};
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isIframeConfiguration.ts
+11
View File
@@ -0,0 +1,11 @@
import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
import {
type IframeConfiguration,
type WidgetConfiguration,
} from '~/generated/graphql';
export const isIframeConfiguration = (
configuration: WidgetConfiguration | FieldsConfiguration | null | undefined,
): configuration is IframeConfiguration => {
return configuration?.__typename === 'IframeConfiguration';
};
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isLineChartConfiguration.ts
+11
View File
@@ -0,0 +1,11 @@
import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
import {
type LineChartConfiguration,
type WidgetConfiguration,
} from '~/generated/graphql';
export const isLineChartConfiguration = (
configuration: WidgetConfiguration | FieldsConfiguration | null | undefined,
): configuration is LineChartConfiguration => {
return configuration?.__typename === 'LineChartConfiguration';
};
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isMinMaxRangeValid.ts
+2 -5
View File
@@ -1,5 +1,6 @@
import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration';
import { isDefined } from 'twenty-shared/utils';
export const isMinMaxRangeValid = (
@@ -9,11 +10,7 @@ export const isMinMaxRangeValid = (
newValue: number,
configuration: ChartConfiguration,
): boolean => {
const isBarOrLineChart =
configuration.__typename === 'BarChartConfiguration' ||
configuration.__typename === 'LineChartConfiguration';
if (!isBarOrLineChart) {
if (!isBarOrLineChartConfiguration(configuration)) {
return true;
}
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isPieChartConfiguration.ts
+11
View File
@@ -0,0 +1,11 @@
import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
import {
type PieChartConfiguration,
type WidgetConfiguration,
} from '~/generated/graphql';
export const isPieChartConfiguration = (
configuration: WidgetConfiguration | FieldsConfiguration | null | undefined,
): configuration is PieChartConfiguration => {
return configuration?.__typename === 'PieChartConfiguration';
};
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/shouldHideChartSetting.ts
+7 -17
View File
@@ -1,6 +1,8 @@
import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
import { type ChartSettingsItem } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup';
import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration';
import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { isFieldRelation } from '@/object-record/record-field/ui/types/guards/isFieldRelation';
import { isRelationNestedFieldDateKind } from '@/page-layout/widgets/graph/utils/isRelationNestedFieldDateKind';
@@ -54,11 +56,7 @@ export const shouldHideChartSetting = (
if (isDefined(configuration) && isDefined(objectMetadataItem)) {
if (item.id === CHART_CONFIGURATION_SETTING_IDS.DATE_GRANULARITY_X) {
const isBarOrLineChart =
configuration.__typename === 'BarChartConfiguration' ||
configuration.__typename === 'LineChartConfiguration';
if (isBarOrLineChart) {
if (isBarOrLineChartConfiguration(configuration)) {
return shouldHideDateGranularityBasedOnFieldType(
configuration.primaryAxisGroupByFieldMetadataId,
configuration.primaryAxisGroupBySubFieldName,
@@ -69,11 +67,7 @@ export const shouldHideChartSetting = (
}
if (item.id === CHART_CONFIGURATION_SETTING_IDS.DATE_GRANULARITY_Y) {
const isBarOrLineChart =
configuration.__typename === 'BarChartConfiguration' ||
configuration.__typename === 'LineChartConfiguration';
if (isBarOrLineChart) {
if (isBarOrLineChartConfiguration(configuration)) {
return shouldHideDateGranularityBasedOnFieldType(
configuration.secondaryAxisGroupByFieldMetadataId,
configuration.secondaryAxisGroupBySubFieldName,
@@ -84,7 +78,7 @@ export const shouldHideChartSetting = (
}
if (item.id === CHART_CONFIGURATION_SETTING_IDS.DATE_GRANULARITY) {
if (configuration.__typename === 'PieChartConfiguration') {
if (isPieChartConfiguration(configuration)) {
return shouldHideDateGranularityBasedOnFieldType(
configuration.groupByFieldMetadataId,
configuration.groupBySubFieldName,
@@ -95,11 +89,7 @@ export const shouldHideChartSetting = (
}
if (item.id === CHART_CONFIGURATION_SETTING_IDS.CUMULATIVE) {
const isBarOrLineChart =
configuration.__typename === 'BarChartConfiguration' ||
configuration.__typename === 'LineChartConfiguration';
if (isBarOrLineChart) {
if (isBarOrLineChartConfiguration(configuration)) {
return shouldHideDateGranularityBasedOnFieldType(
configuration.primaryAxisGroupByFieldMetadataId,
configuration.primaryAxisGroupBySubFieldName,
@@ -110,7 +100,7 @@ export const shouldHideChartSetting = (
}
if (item.id === CHART_CONFIGURATION_SETTING_IDS.SHOW_LEGEND) {
if (configuration.__typename === 'PieChartConfiguration') {
if (isPieChartConfiguration(configuration)) {
return false;
}
}
packages/twenty-front/src/modules/page-layout/utils/__tests__/createDefaultGraphWidget.test.ts
+2 -1
View File
@@ -1,3 +1,4 @@
import { isBarChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarChartConfiguration';
import {
AggregateOperations,
AxisNameDisplay,
@@ -96,7 +97,7 @@ describe('createDefaultGraphWidget', () => {
});
expect(widget.configuration?.__typename).toBe('BarChartConfiguration');
if (widget.configuration?.__typename === 'BarChartConfiguration') {
if (isBarChartConfiguration(widget.configuration)) {
expect(widget.configuration.graphType).toBe(GraphType.HORIZONTAL_BAR);
}
});
packages/twenty-front/src/modules/page-layout/widgets/graph/hooks/useGraphWidgetGroupByQuery.ts
+2 -8
View File
@@ -1,3 +1,4 @@
import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration';
import { useDateTimeFormat } from '@/localization/hooks/useDateTimeFormat';
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
@@ -14,7 +15,6 @@ import { isDefined } from 'twenty-shared/utils';
import {
type BarChartConfiguration,
type LineChartConfiguration,
type PieChartConfiguration,
} from '~/generated/graphql';
export const useGraphWidgetGroupByQuery = ({
@@ -57,13 +57,7 @@ export const useGraphWidgetGroupByQuery = ({
throw new Error('Aggregate operation not found');
}
const isPieChart = (
config: GroupByChartConfiguration,
): config is PieChartConfiguration => {
return config.__typename === 'PieChartConfiguration';
};
const groupByQueryVariables = isPieChart(configuration)
const groupByQueryVariables = isPieChartConfiguration(configuration)
? generateGroupByQueryVariablesFromPieChartConfiguration({
objectMetadataItem,
objectMetadataItems,
packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertAggregateChartWidget.ts
+2 -1
View File
@@ -1,3 +1,4 @@
import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { assertIsDefinedOrThrow } from 'twenty-shared/utils';
import { type AggregateChartConfiguration } from '~/generated/graphql';
@@ -16,7 +17,7 @@ export const assertAggregateChartWidgetOrThrow: AssertAggregateChartWidgetOrThro
new Error('Widget objectMetadataId is required'),
);
if (widget.configuration?.__typename !== 'AggregateChartConfiguration') {
if (!isAggregateChartConfiguration(widget.configuration)) {
throw new Error(
`Expected AggregateChartConfiguration but got ${widget.configuration?.__typename}`,
);
packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertBarChartWidget.ts
+2 -1
View File
@@ -1,3 +1,4 @@
import { isBarChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarChartConfiguration';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { assertIsDefinedOrThrow } from 'twenty-shared/utils';
import { type BarChartConfiguration } from '~/generated/graphql';
@@ -17,7 +18,7 @@ export const assertBarChartWidgetOrThrow: AssertBarChartWidgetOrThrow = (
new Error('Widget objectMetadataId is required'),
);
if (widget.configuration?.__typename !== 'BarChartConfiguration') {
if (!isBarChartConfiguration(widget.configuration)) {
throw new Error(
`Expected BarChartConfiguration but got ${widget.configuration?.__typename}`,
);
packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertPieChartWidget.ts
+2 -1
View File
@@ -1,3 +1,4 @@
import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { assertIsDefinedOrThrow } from 'twenty-shared/utils';
import { type PieChartConfiguration } from '~/generated/graphql';
@@ -17,7 +18,7 @@ export const assertPieChartWidgetOrThrow: AssertPieChartWidgetOrThrow = (
new Error('Widget objectMetadataId is required'),
);
if (widget.configuration?.__typename !== 'PieChartConfiguration') {
if (!isPieChartConfiguration(widget.configuration)) {
throw new Error(
`Expected PieChartConfiguration but got ${widget.configuration?.__typename}`,
);
packages/twenty-front/src/modules/page-layout/widgets/graph/utils/normalizeChartConfigurationFields.ts
+4 -5
View File
@@ -1,3 +1,5 @@
import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration';
import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration';
import {
type BarChartConfiguration,
type GraphOrderBy,
@@ -19,10 +21,7 @@ export const normalizeChartConfigurationFields = (
| LineChartConfiguration
| PieChartConfiguration,
): NormalizedChartConfigurationFields => {
if (
configuration.__typename === 'BarChartConfiguration' ||
configuration.__typename === 'LineChartConfiguration'
) {
if (isBarOrLineChartConfiguration(configuration)) {
return {
groupByFieldMetadataId: configuration.primaryAxisGroupByFieldMetadataId,
groupBySubFieldName: configuration.primaryAxisGroupBySubFieldName,
@@ -31,7 +30,7 @@ export const normalizeChartConfigurationFields = (
};
}
if (configuration.__typename === 'PieChartConfiguration') {
if (isPieChartConfiguration(configuration)) {
return {
groupByFieldMetadataId: configuration.groupByFieldMetadataId,
groupBySubFieldName: configuration.groupBySubFieldName,