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

part 3 of on click bar to filters: add sort plus some normalizations (#16075)

Browse Source
This commit is contained in:
nitin
2025-11-26 19:48:48 +05:30
committed by GitHub
parent dc2c2c413c
commit 6fcb05d9b3
25 changed files with 942 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx
+6 -1
View File
@@ -54,7 +54,12 @@ export const ChartColorSelectionDropdownContent = () => {
const configuration = widgetInEditMode.configuration as ChartConfiguration;
if (!('color' in configuration)) {
if (
configuration.__typename !== 'BarChartConfiguration' &&
configuration.__typename !== 'LineChartConfiguration' &&
configuration.__typename !== 'GaugeChartConfiguration' &&
configuration.__typename !== 'PieChartConfiguration'
) {
return null;
}
packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useChartSettingsValues.ts
+15 -10
View File
@@ -44,6 +44,13 @@ export const useChartSettingsValues = ({
configuration.__typename === 'BarChartConfiguration' ||
configuration.__typename === 'LineChartConfiguration';
const hasColorProperty =
isBarOrLineChart ||
configuration.__typename === 'GaugeChartConfiguration' ||
configuration.__typename === 'PieChartConfiguration';
const isPieChart = configuration.__typename === 'PieChartConfiguration';
let groupByFieldXId: string | undefined;
let groupByFieldYId: string | undefined;
let groupBySubFieldNameX: CompositeFieldSubFieldName | undefined;
@@ -147,7 +154,7 @@ export const useChartSettingsValues = ({
case CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_X:
return groupBySubFieldNameXLabel ?? groupByFieldX?.label;
case CHART_CONFIGURATION_SETTING_IDS.COLORS:
return 'color' in configuration && isDefined(configuration.color)
return hasColorProperty && isDefined(configuration.color)
? capitalize(configuration.color)
: undefined;
case CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_Y:
@@ -183,8 +190,7 @@ export const useChartSettingsValues = ({
case CHART_CONFIGURATION_SETTING_IDS.GROUP_BY:
return groupByFieldY?.label;
case CHART_CONFIGURATION_SETTING_IDS.AXIS_NAME:
return 'axisNameDisplay' in configuration &&
isDefined(configuration.axisNameDisplay)
return isBarOrLineChart && isDefined(configuration.axisNameDisplay)
? getChartAxisNameDisplayOptions(configuration.axisNameDisplay)
: undefined;
case CHART_CONFIGURATION_SETTING_IDS.PRIMARY_SORT_BY:
@@ -202,32 +208,31 @@ export const useChartSettingsValues = ({
? configuration.isStacked !== false
: true;
case CHART_CONFIGURATION_SETTING_IDS.OMIT_NULL_VALUES:
return 'omitNullValues' in configuration
return isBarOrLineChart
? (configuration.omitNullValues ?? false)
: false;
case CHART_CONFIGURATION_SETTING_IDS.MIN_RANGE:
return 'rangeMin' in configuration
return isBarOrLineChart
? (configuration.rangeMin?.toString() ?? '')
: '';
case CHART_CONFIGURATION_SETTING_IDS.MAX_RANGE:
return 'rangeMax' in configuration
return isBarOrLineChart
? (configuration.rangeMax?.toString() ?? '')
: '';
case CHART_CONFIGURATION_SETTING_IDS.DATE_GRANULARITY_X:
return 'primaryAxisDateGranularity' in configuration &&
return isBarOrLineChart &&
isDefined(configuration.primaryAxisDateGranularity)
? getDateGranularityLabel(configuration.primaryAxisDateGranularity)
: undefined;
case CHART_CONFIGURATION_SETTING_IDS.DATE_GRANULARITY_Y:
return 'secondaryAxisGroupByDateGranularity' in configuration &&
return isBarOrLineChart &&
isDefined(configuration.secondaryAxisGroupByDateGranularity)
? getDateGranularityLabel(
configuration.secondaryAxisGroupByDateGranularity,
)
: undefined;
case CHART_CONFIGURATION_SETTING_IDS.DATE_GRANULARITY:
return 'dateGranularity' in configuration &&
isDefined(configuration.dateGranularity)
return isPieChart && isDefined(configuration.dateGranularity)
? getDateGranularityLabel(configuration.dateGranularity)
: undefined;
default:
packages/twenty-front/src/modules/command-menu/pages/page-layout/types/BarLineChartConvertibleFields.ts
+11
View File
@@ -0,0 +1,11 @@
import {
type GraphOrderBy,
type ObjectRecordGroupByDateGranularity,
} from '~/generated/graphql';
export type BarLineChartConvertibleFields = {
primaryAxisGroupByFieldMetadataId?: string;
primaryAxisGroupBySubFieldName?: string | null;
primaryAxisDateGranularity?: ObjectRecordGroupByDateGranularity | null;
primaryAxisOrderBy?: GraphOrderBy | null;
};
packages/twenty-front/src/modules/command-menu/pages/page-layout/types/PieChartConvertibleFields.ts
+11
View File
@@ -0,0 +1,11 @@
import {
type GraphOrderBy,
type ObjectRecordGroupByDateGranularity,
} from '~/generated/graphql';
export type PieChartConvertibleFields = {
groupByFieldMetadataId?: string;
groupBySubFieldName?: string | null;
dateGranularity?: ObjectRecordGroupByDateGranularity | null;
orderBy?: GraphOrderBy | null;
};
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/convertBarOrLineChartConfigToPieChart.ts
+13 -20
View File
@@ -1,3 +1,4 @@
import { type PieChartConvertibleFields } from '@/command-menu/pages/page-layout/types/PieChartConvertibleFields';
import {
type BarChartConfiguration,
type LineChartConfiguration,
@@ -5,26 +6,18 @@ import {
export const convertBarOrLineChartConfigToPieChart = (
configuration: BarChartConfiguration | LineChartConfiguration,
): Record<string, any> => {
const configToUpdate: Record<string, any> = {};
if ('primaryAxisGroupByFieldMetadataId' in configuration) {
configToUpdate.groupByFieldMetadataId =
configuration.primaryAxisGroupByFieldMetadataId;
): PieChartConvertibleFields => {
if (
configuration.__typename !== 'BarChartConfiguration' &&
configuration.__typename !== 'LineChartConfiguration'
) {
return {};
}
if ('primaryAxisGroupBySubFieldName' in configuration) {
configToUpdate.groupBySubFieldName =
configuration.primaryAxisGroupBySubFieldName;
}
if ('primaryAxisDateGranularity' in configuration) {
configToUpdate.dateGranularity = configuration.primaryAxisDateGranularity;
}
if ('primaryAxisOrderBy' in configuration) {
configToUpdate.orderBy = configuration.primaryAxisOrderBy;
}
return configToUpdate;
return {
groupByFieldMetadataId: configuration.primaryAxisGroupByFieldMetadataId,
groupBySubFieldName: configuration.primaryAxisGroupBySubFieldName,
dateGranularity: configuration.primaryAxisDateGranularity,
orderBy: configuration.primaryAxisOrderBy,
};
};
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart.ts
+10 -20
View File
@@ -1,27 +1,17 @@
import { type BarLineChartConvertibleFields } from '@/command-menu/pages/page-layout/types/BarLineChartConvertibleFields';
import { type PieChartConfiguration } from '~/generated/graphql';
export const convertPieChartConfigToBarOrLineChart = (
configuration: PieChartConfiguration,
): Record<string, any> => {
const configToUpdate: Record<string, any> = {};
if ('groupByFieldMetadataId' in configuration) {
configToUpdate.primaryAxisGroupByFieldMetadataId =
configuration.groupByFieldMetadataId;
): BarLineChartConvertibleFields => {
if (configuration.__typename !== 'PieChartConfiguration') {
return {};
}
if ('groupBySubFieldName' in configuration) {
configToUpdate.primaryAxisGroupBySubFieldName =
configuration.groupBySubFieldName;
}
if ('dateGranularity' in configuration) {
configToUpdate.primaryAxisDateGranularity = configuration.dateGranularity;
}
if ('orderBy' in configuration) {
configToUpdate.primaryAxisOrderBy = configuration.orderBy;
}
return configToUpdate;
return {
primaryAxisGroupByFieldMetadataId: configuration.groupByFieldMetadataId,
primaryAxisGroupBySubFieldName: configuration.groupBySubFieldName,
primaryAxisDateGranularity: configuration.dateGranularity,
primaryAxisOrderBy: configuration.orderBy,
};
};
packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isMinMaxRangeValid.ts
+8 -2
View File
@@ -9,9 +9,16 @@ export const isMinMaxRangeValid = (
newValue: number,
configuration: ChartConfiguration,
): boolean => {
const isBarOrLineChart =
configuration.__typename === 'BarChartConfiguration' ||
configuration.__typename === 'LineChartConfiguration';
if (!isBarOrLineChart) {
return true;
}
if (settingId === CHART_CONFIGURATION_SETTING_IDS.MIN_RANGE) {
if (
'rangeMax' in configuration &&
isDefined(configuration.rangeMax) &&
newValue > configuration.rangeMax
) {
@@ -21,7 +28,6 @@ export const isMinMaxRangeValid = (
if (settingId === CHART_CONFIGURATION_SETTING_IDS.MAX_RANGE) {
if (
'rangeMin' in configuration &&
isDefined(configuration.rangeMin) &&
newValue < configuration.rangeMin
) {