Alexandre Ribeiro
fefb6cdb94
## Context Closes #21522 Large values in the dashboard **Number** widget are always abbreviated (e.g. `1300090` → `1.3m`) with no way to display the full number. Following a discussion with the core team who were interested in this feature (https://discordapp.com/channels/1130383047699738754/1509604545381142649) , this adds a **Format** option in the **Style** section of the Number (aggregate chart) widget, letting users choose between **Short** (abbreviated, current behavior) and **Full** (complete number with thousand separators). Only the displayed value of the Number widget is affected — axes, labels and tooltips of other chart types are intentionally left untouched. ## What's inside **Server** - New `ChartNumberFormat` GraphQL enum (`SHORT` / `FULL`), following the `AxisNameDisplay` pattern - The existing — and previously unused — `format` field on `AggregateChartConfigurationDTO` is now typed with this enum and validated with `@IsEnum` - The dashboard AI tool schema (`widget.schema.ts`) accepts the new `format` option - Regenerated GraphQL types and the `twenty-client-sdk` metadata client to reflect the enum **Front** - New **Format** setting in the Style section of the Number widget settings, with a Short/Full selection dropdown (same pattern as the Axis name setting) - `transformAggregateRawValueIntoAggregateDisplayValue` takes an optional `numberFormat`: - `FULL` → full number via `formatNumber` (currency values keep up to 2 decimals) - `SHORT` → abbreviated via `formatToShortNumber` - not set → behavior unchanged (currency short, number full), so existing widgets and the record table/board footers render exactly as before ## Screenshots | Full UI Look | <img width="1917" height="955" alt="Twenty_Showcas_FullShort" src="https://github.com/user-attachments/assets/05d05779-395d-4e1a-8ff0-964f6fbef182" /> | Menu UI Look | <img width="291" height="308" alt="Screenshot_2" src="https://github.com/user-attachments/assets/82b5a1de-32fe-46ec-a9b8-add11ab4c6cd" /> ## Tests - Extended `transformAggregateRawValueIntoAggregateDisplayValue` unit tests with SHORT/FULL cases for currency and number fields - Updated the page-layout-widget creation/update integration tests and snapshots to use `ChartNumberFormat.SHORT` <!-- This is an auto-generated description by cubic. --> <a href="https://cubic.dev/pr/twentyhq/twenty/pull/21521?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a> <!-- End of auto-generated description by cubic. --> --------- Co-authored-by: Charles Bochet <charles@twenty.com>
103 lines
2.1 KiB
TypeScript
103 lines
2.1 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
|
|
numberFormat
|
|
description
|
|
filter
|
|
prefix
|
|
suffix
|
|
timezone
|
|
firstDayOfTheWeek
|
|
}
|
|
... on IframeConfiguration {
|
|
configurationType
|
|
url
|
|
}
|
|
... on StandaloneRichTextConfiguration {
|
|
configurationType
|
|
body {
|
|
blocknote
|
|
markdown
|
|
}
|
|
}
|
|
`;
|