Files
twenty/packages/twenty-server/test/integration/constants/widget-configuration-test-data.constants.ts
T
Alexandre Ribeiro fefb6cdb94 feat(page-layout): add number format option to aggregate chart widget (#21521)
## 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>
2026-06-13 23:32:41 +02:00

223 lines
8.8 KiB
TypeScript

import { AggregateOperations } from 'twenty-shared/types';
import { type AggregateChartConfigurationDTO } from 'src/engine/metadata-modules/page-layout-widget/dtos/aggregate-chart-configuration.dto';
import { type BarChartConfigurationDTO } from 'src/engine/metadata-modules/page-layout-widget/dtos/bar-chart-configuration.dto';
import { type IframeConfigurationDTO } from 'src/engine/metadata-modules/page-layout-widget/dtos/iframe-configuration.dto';
import { type LineChartConfigurationDTO } from 'src/engine/metadata-modules/page-layout-widget/dtos/line-chart-configuration.dto';
import { type PieChartConfigurationDTO } from 'src/engine/metadata-modules/page-layout-widget/dtos/pie-chart-configuration.dto';
import { type StandaloneRichTextConfigurationDTO } from 'src/engine/metadata-modules/page-layout-widget/dtos/standalone-rich-text-configuration.dto';
import { AxisNameDisplay } from 'src/engine/metadata-modules/page-layout-widget/enums/axis-name-display.enum';
import { BarChartLayout } from 'src/engine/metadata-modules/page-layout-widget/enums/bar-chart-layout.enum';
import { ChartNumberFormat } from 'src/engine/metadata-modules/page-layout-widget/enums/chart-number-format.enum';
import { GraphOrderBy } from 'src/engine/metadata-modules/page-layout-widget/enums/graph-order-by.enum';
import { WidgetConfigurationType } from 'src/engine/metadata-modules/page-layout-widget/enums/widget-configuration-type.type';
// Hardcoded UUIDs for unit tests only (no DB lookup needed)
const UNIT_TEST_FIELD_METADATA_ID_1 = '20202020-1111-4111-a111-111111111111';
const UNIT_TEST_FIELD_METADATA_ID_2 = '20202020-2222-4222-a222-222222222222';
const UNIT_TEST_FIELD_METADATA_ID_3 = '20202020-3333-4333-a333-333333333333';
// --- Static configs (no field metadata IDs) ---
export const TEST_IFRAME_CONFIG: IframeConfigurationDTO = {
configurationType: WidgetConfigurationType.IFRAME,
url: 'https://example.com/dashboard',
};
export const TEST_IFRAME_CONFIG_ALTERNATIVE: IframeConfigurationDTO = {
configurationType: WidgetConfigurationType.IFRAME,
url: 'https://app.twenty.com/analytics',
};
export const TEST_STANDALONE_RICH_TEXT_CONFIG: StandaloneRichTextConfigurationDTO =
{
configurationType: WidgetConfigurationType.STANDALONE_RICH_TEXT,
body: {
blocknote:
'{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hello world"}]}]}',
markdown: '# Hello world',
},
};
export const TEST_STANDALONE_RICH_TEXT_CONFIG_MINIMAL: StandaloneRichTextConfigurationDTO =
{
configurationType: WidgetConfigurationType.STANDALONE_RICH_TEXT,
body: {
blocknote:
'{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Simple text"}]}]}',
markdown: null,
},
};
// --- Invalid configs (for failure test cases) ---
export const INVALID_STANDALONE_RICH_TEXT_CONFIG_MISSING_BODY = {};
export const INVALID_STANDALONE_RICH_TEXT_CONFIG_BODY_WRONG_TYPE = {
body: 'not an object',
};
export const INVALID_STANDALONE_RICH_TEXT_CONFIG_INVALID_SUBFIELDS = {
configurationType: WidgetConfigurationType.STANDALONE_RICH_TEXT,
body: {
blocknote: 'valid',
markdown: 'valid',
invalidField: 'should not be here',
},
};
export const INVALID_IFRAME_CONFIG_BAD_URL = {
url: 'not-a-valid-url',
};
export const INVALID_IFRAME_CONFIG_EMPTY_URL = {
url: '',
};
export const INVALID_NUMBER_CHART_CONFIG_MISSING_FIELDS = {
configurationType: WidgetConfigurationType.AGGREGATE_CHART,
};
export const INVALID_NUMBER_CHART_CONFIG_BAD_UUID = {
configurationType: WidgetConfigurationType.AGGREGATE_CHART,
aggregateFieldMetadataId: 'not-a-uuid',
aggregateOperation: AggregateOperations.COUNT,
};
export const INVALID_VERTICAL_BAR_CHART_CONFIG_MISSING_GROUP_BY = {
configurationType: WidgetConfigurationType.BAR_CHART,
aggregateFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_1,
aggregateOperation: AggregateOperations.SUM,
};
export const INVALID_HORIZONTAL_BAR_CHART_CONFIG_MISSING_GROUP_BY = {
configurationType: WidgetConfigurationType.BAR_CHART,
aggregateFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_1,
aggregateOperation: AggregateOperations.SUM,
};
// --- Unit-test-only graph configs (with hardcoded UUIDs, for validation tests) ---
export const TEST_NUMBER_CHART_CONFIG: AggregateChartConfigurationDTO = {
configurationType: WidgetConfigurationType.AGGREGATE_CHART,
aggregateFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_1,
aggregateOperation: AggregateOperations.COUNT,
label: 'Total Records',
description: 'Count of all records',
numberFormat: ChartNumberFormat.SHORT,
displayDataLabel: true,
};
export const TEST_NUMBER_CHART_CONFIG_MINIMAL: AggregateChartConfigurationDTO =
{
configurationType: WidgetConfigurationType.AGGREGATE_CHART,
aggregateFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_1,
aggregateOperation: AggregateOperations.SUM,
displayDataLabel: false,
};
export const TEST_VERTICAL_BAR_CHART_CONFIG: BarChartConfigurationDTO = {
configurationType: WidgetConfigurationType.BAR_CHART,
layout: BarChartLayout.VERTICAL,
aggregateFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_1,
aggregateOperation: AggregateOperations.SUM,
primaryAxisGroupByFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_2,
primaryAxisOrderBy: GraphOrderBy.FIELD_ASC,
displayDataLabel: true,
axisNameDisplay: AxisNameDisplay.NONE,
color: 'red',
description: 'Monthly revenue breakdown',
omitNullValues: true,
rangeMin: 0,
rangeMax: 100000,
};
export const TEST_VERTICAL_BAR_CHART_CONFIG_MINIMAL: BarChartConfigurationDTO =
{
configurationType: WidgetConfigurationType.BAR_CHART,
layout: BarChartLayout.VERTICAL,
aggregateFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_1,
aggregateOperation: AggregateOperations.COUNT,
primaryAxisGroupByFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_2,
primaryAxisOrderBy: GraphOrderBy.VALUE_DESC,
displayDataLabel: false,
axisNameDisplay: AxisNameDisplay.NONE,
};
export const TEST_HORIZONTAL_BAR_CHART_CONFIG: BarChartConfigurationDTO = {
configurationType: WidgetConfigurationType.BAR_CHART,
layout: BarChartLayout.HORIZONTAL,
aggregateFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_1,
aggregateOperation: AggregateOperations.SUM,
primaryAxisGroupByFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_2,
primaryAxisOrderBy: GraphOrderBy.FIELD_ASC,
displayDataLabel: true,
axisNameDisplay: AxisNameDisplay.NONE,
color: 'blue',
description: 'Horizontal revenue breakdown',
omitNullValues: true,
rangeMin: 0,
rangeMax: 100000,
};
export const TEST_HORIZONTAL_BAR_CHART_CONFIG_MINIMAL: BarChartConfigurationDTO =
{
configurationType: WidgetConfigurationType.BAR_CHART,
layout: BarChartLayout.HORIZONTAL,
aggregateFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_1,
aggregateOperation: AggregateOperations.COUNT,
primaryAxisGroupByFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_2,
primaryAxisOrderBy: GraphOrderBy.VALUE_DESC,
displayDataLabel: false,
axisNameDisplay: AxisNameDisplay.NONE,
};
export const TEST_LINE_CHART_CONFIG: LineChartConfigurationDTO = {
configurationType: WidgetConfigurationType.LINE_CHART,
aggregateFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_1,
aggregateOperation: AggregateOperations.AVG,
primaryAxisGroupByFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_2,
primaryAxisOrderBy: GraphOrderBy.FIELD_ASC,
secondaryAxisGroupByFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_3,
secondaryAxisOrderBy: GraphOrderBy.FIELD_DESC,
displayDataLabel: true,
axisNameDisplay: AxisNameDisplay.NONE,
color: 'cyan',
description: 'Trend over time',
omitNullValues: false,
rangeMin: -100,
rangeMax: 100,
};
export const TEST_LINE_CHART_CONFIG_MINIMAL: LineChartConfigurationDTO = {
configurationType: WidgetConfigurationType.LINE_CHART,
aggregateFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_1,
aggregateOperation: AggregateOperations.MAX,
primaryAxisGroupByFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_2,
primaryAxisOrderBy: GraphOrderBy.VALUE_ASC,
displayDataLabel: false,
axisNameDisplay: AxisNameDisplay.NONE,
};
export const TEST_PIE_CHART_CONFIG: PieChartConfigurationDTO = {
configurationType: WidgetConfigurationType.PIE_CHART,
groupByFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_1,
aggregateFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_2,
aggregateOperation: AggregateOperations.SUM,
orderBy: GraphOrderBy.VALUE_DESC,
displayDataLabel: true,
displayLegend: true,
showCenterMetric: true,
color: 'yellow',
description: 'Distribution by category',
};
export const TEST_PIE_CHART_CONFIG_MINIMAL: PieChartConfigurationDTO = {
configurationType: WidgetConfigurationType.PIE_CHART,
groupByFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_1,
aggregateFieldMetadataId: UNIT_TEST_FIELD_METADATA_ID_2,
aggregateOperation: AggregateOperations.COUNT,
orderBy: GraphOrderBy.FIELD_ASC,
displayDataLabel: false,
};