Raphaël Bosi
c531cfe0a4
## Description SELECT fields have a defined option order that users expect to see reflected in charts. This PR allows sorting by that position and also enables custom manual ordering. ## Video QA ### Reordering on primary axis https://github.com/user-attachments/assets/994f515e-19cb-4a5e-b745-e8c77e92ae0b ### Reordering on secondary axis https://github.com/user-attachments/assets/444c16f2-1920-4dc4-8b42-312d520ab43b Note: The colors in the graph will match the colors of the select options, but this will be done in another PR <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Introduces new sort modes and UI for chart groupings, with full FE/BE support and updated GraphQL schema. > > - Extend `GraphOrderBy` with `FIELD_POSITION_ASC/DESC` and `MANUAL`; add corresponding fields in configs: `primaryAxisManualSortOrder`, `secondaryAxisManualSortOrder`, and `manualSortOrder` (pie) > - New UI: dropdown options filtered by field type, icons, and a draggable submenu (`ChartManualSortSubMenuContent`) to reorder select options; integrates with widget edit flow > - Sorting logic added/refactored: `sortChartData`, `sortByManualOrder`, `sortBySelectOptionPosition`, `sortLineChartSeries`, plus updates to bar/line/pie transformers to honor new modes and manual orders > - Default behaviors: select fields default to `FIELD_POSITION_ASC`; query variable builders skip `orderBy` when using manual/position sorts > - Update GraphQL generated types/fragments/queries and backend DTOs/schemas to persist new fields; add tests for sorting utilities and snapshots; add sorting icons in `twenty-ui` > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 78c9b56c0f1f2d45f7f8b270bb59ca599a005abe. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY --> --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com> Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
114 lines
2.3 KiB
TypeScript
114 lines
2.3 KiB
TypeScript
export const WIDGET_CONFIGURATION_GQL_FIELDS = `
|
|
... on BarChartConfiguration {
|
|
configurationType
|
|
aggregateFieldMetadataId
|
|
aggregateOperation
|
|
primaryAxisGroupByFieldMetadataId
|
|
primaryAxisGroupBySubFieldName
|
|
primaryAxisDateGranularity
|
|
primaryAxisOrderBy
|
|
primaryAxisManualSortOrder
|
|
secondaryAxisGroupByFieldMetadataId
|
|
secondaryAxisGroupBySubFieldName
|
|
secondaryAxisGroupByDateGranularity
|
|
secondaryAxisOrderBy
|
|
secondaryAxisManualSortOrder
|
|
omitNullValues
|
|
axisNameDisplay
|
|
displayDataLabel
|
|
displayLegend
|
|
rangeMin
|
|
rangeMax
|
|
color
|
|
description
|
|
filter
|
|
groupMode
|
|
layout
|
|
isCumulative
|
|
timezone
|
|
firstDayOfTheWeek
|
|
}
|
|
... on LineChartConfiguration {
|
|
configurationType
|
|
aggregateFieldMetadataId
|
|
aggregateOperation
|
|
primaryAxisGroupByFieldMetadataId
|
|
primaryAxisGroupBySubFieldName
|
|
primaryAxisDateGranularity
|
|
primaryAxisOrderBy
|
|
primaryAxisManualSortOrder
|
|
secondaryAxisGroupByFieldMetadataId
|
|
secondaryAxisGroupBySubFieldName
|
|
secondaryAxisGroupByDateGranularity
|
|
secondaryAxisOrderBy
|
|
secondaryAxisManualSortOrder
|
|
omitNullValues
|
|
axisNameDisplay
|
|
displayDataLabel
|
|
displayLegend
|
|
rangeMin
|
|
rangeMax
|
|
color
|
|
description
|
|
filter
|
|
isStacked
|
|
isCumulative
|
|
timezone
|
|
firstDayOfTheWeek
|
|
}
|
|
... on PieChartConfiguration {
|
|
configurationType
|
|
groupByFieldMetadataId
|
|
aggregateFieldMetadataId
|
|
aggregateOperation
|
|
groupBySubFieldName
|
|
dateGranularity
|
|
orderBy
|
|
manualSortOrder
|
|
displayDataLabel
|
|
showCenterMetric
|
|
displayLegend
|
|
color
|
|
description
|
|
filter
|
|
timezone
|
|
firstDayOfTheWeek
|
|
}
|
|
... on AggregateChartConfiguration {
|
|
configurationType
|
|
aggregateFieldMetadataId
|
|
aggregateOperation
|
|
label
|
|
displayDataLabel
|
|
format
|
|
description
|
|
filter
|
|
prefix
|
|
suffix
|
|
timezone
|
|
firstDayOfTheWeek
|
|
}
|
|
... on GaugeChartConfiguration {
|
|
configurationType
|
|
aggregateFieldMetadataId
|
|
aggregateOperation
|
|
displayDataLabel
|
|
color
|
|
description
|
|
filter
|
|
timezone
|
|
firstDayOfTheWeek
|
|
}
|
|
... on IframeConfiguration {
|
|
configurationType
|
|
url
|
|
}
|
|
... on StandaloneRichTextConfiguration {
|
|
configurationType
|
|
body {
|
|
blocknote
|
|
markdown
|
|
}
|
|
}
|
|
`;
|