From ce51e24dd8cee55c0bb108e4b3fc017268bd1cd9 Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Thu, 30 Jul 2026 10:27:14 +0200 Subject: [PATCH 1/2] Use display value for echart axis labels Replace raw cell `.value` with `getCellValueForDisplay()` when building axis labels in kup-echart, so formatted/display values are shown instead of raw data. --- .../src/components/kup-data-table/readme.md | 11 +++++ .../src/components/kup-echart/kup-echart.tsx | 15 +++++-- .../src/components/kup-echart/readme.md | 42 +++++++++---------- 3 files changed, 43 insertions(+), 25 deletions(-) diff --git a/packages/ketchup/src/components/kup-data-table/readme.md b/packages/ketchup/src/components/kup-data-table/readme.md index b3ef37b9b1..227dcfaa87 100644 --- a/packages/ketchup/src/components/kup-data-table/readme.md +++ b/packages/ketchup/src/components/kup-data-table/readme.md @@ -180,6 +180,17 @@ Type: `Promise` +### `copyCellValueInColumn() => Promise` + +Copies the value of the currently focused cell to all visible rows in the same column. +Only cell types included in TypesToDuplicate are supported. + +#### Returns + +Type: `Promise` + + + ### `defaultSortingFunction(columns: KupDataColumn[], receivingColumnIndex: number, sortedColumnIndex: number, useNewObject?: boolean) => Promise` diff --git a/packages/ketchup/src/components/kup-echart/kup-echart.tsx b/packages/ketchup/src/components/kup-echart/kup-echart.tsx index 14b2662759..1ea47227d4 100644 --- a/packages/ketchup/src/components/kup-echart/kup-echart.tsx +++ b/packages/ketchup/src/components/kup-echart/kup-echart.tsx @@ -32,7 +32,10 @@ import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declaration import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations'; import { getProps, setProps } from '../../utils/utils'; import { componentWrapperId } from '../../variables/GenericVariables'; -import { getColumnByName } from '../../utils/cell-utils'; +import { + getCellValueForDisplay, + getColumnByName, +} from '../../utils/cell-utils'; import { KupDataColumn, KupDataDataset, @@ -858,9 +861,10 @@ export class KupEchart { for (let i = 0; i < dataset.rows.length; i++) { const cells = dataset.rows[i].cells; const treatedCells: KupDataRowCells = {}; - const title = getColumnByName(dataset.columns, this.axis).title; + const column = getColumnByName(dataset.columns, this.axis); + const title = column.title; treatedCells[title] = cells[this.axis]; - x.push(treatedCells[title].value); + x.push(getCellValueForDisplay(column, treatedCells[title])); } } return x; @@ -935,7 +939,10 @@ export class KupEchart { return y; } for (const row of this.data.rows) { - const title = row.cells[this.axis]?.value ?? '[not found]'; + const axisCell = row.cells[this.axis]; + const title = axisCell + ? getCellValueForDisplay(column, axisCell) + : '[not found]'; for (const key of Object.keys(row.cells)) { if ( !this.series || diff --git a/packages/ketchup/src/components/kup-echart/readme.md b/packages/ketchup/src/components/kup-echart/readme.md index dab1e0f757..4af313cc1b 100644 --- a/packages/ketchup/src/components/kup-echart/readme.md +++ b/packages/ketchup/src/components/kup-echart/readme.md @@ -5,27 +5,27 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -| `axis` | `axis` | Sets the axis of the chart. | `string` | `''` | -| `axisYMax` | `axis-y-max` | Maximum for the y Axis. | `string` | `null` | -| `axisYMin` | `axis-y-min` | Minimum for the y Axis. | `string` | `null` | -| `chartTitle` | -- | Title of the graph. | `KupEchartTitle` | `null` | -| `colors` | -- | Overrides theme's colors. | `string[]` | `[]` | -| `consistencyCheck` | `consistency-check` | When true, performs checks in order to properly initialize props which could be missing (i.e.: axis). For performances purposes, this prop will run only once when the component is initially created. | `boolean` | `false` | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | The actual data of the chart. | `KupDataDataset` | `null` | -| `legend` | `legend` | Sets the position of the legend. Supported values: bottom, left, right, top, hidden. Keep in mind that legend types are tied to chart types, some combinations might not work. | `KupEchartLegendPlacement.BOTTOM \| KupEchartLegendPlacement.HIDDEN \| KupEchartLegendPlacement.LEFT \| KupEchartLegendPlacement.RIGHT \| KupEchartLegendPlacement.TOP` | `KupEchartLegendPlacement.RIGHT` | -| `map` | `map` | Choose which map you want to view, supported values: "europe", "africa", "asia", "oceania", "america", "italy" and "world". It's possible to supply a custom JSON too. | `Feature \| FeatureCollection \| GeometryCollection \| LineString \| MultiLineString \| MultiPoint \| MultiPolygon \| Point \| Polygon \| string` | `null` | -| `multipleYAxes` | `multiple-y-axes` | Multiple axes for y | `string` | `null` | -| `series` | -- | The data series to be displayed. They must be of the same type. | `string[]` | `[]` | -| `showMarks` | `show-marks` | Displays the numerical values. | `boolean` | `false` | -| `sizeX` | `size-x` | The width of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.). | `string` | `'100%'` | -| `sizeY` | `size-y` | The height of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.). | `string` | `'100%'` | -| `stacked` | `stacked` | Displays the data columns of an object on top of each other. | `boolean` | `false` | -| `types` | -- | The type of the chart. Supported formats: Bar, Gaussian, Line, Pie, Map and Scatter. | `KupEchartTypes[]` | `[KupEchartTypes.LINE]` | -| `xAxis` | -- | Customization options for the x Axis. | `AxisBaseOptionCommon & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; }` | `null` | -| `yAxis` | -- | Customization options for the y Axis. | `AxisBaseOptionCommon & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; }` | `null` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | +| `axis` | `axis` | Sets the axis of the chart. | `string` | `''` | +| `axisYMax` | `axis-y-max` | Maximum for the y Axis. | `string` | `null` | +| `axisYMin` | `axis-y-min` | Minimum for the y Axis. | `string` | `null` | +| `chartTitle` | -- | Title of the graph. | `KupEchartTitle` | `null` | +| `colors` | -- | Overrides theme's colors. | `string[]` | `[]` | +| `consistencyCheck` | `consistency-check` | When true, performs checks in order to properly initialize props which could be missing (i.e.: axis). For performances purposes, this prop will run only once when the component is initially created. | `boolean` | `false` | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | The actual data of the chart. | `KupDataDataset` | `null` | +| `legend` | `legend` | Sets the position of the legend. Supported values: bottom, left, right, top, hidden. Keep in mind that legend types are tied to chart types, some combinations might not work. | `KupEchartLegendPlacement.BOTTOM \| KupEchartLegendPlacement.HIDDEN \| KupEchartLegendPlacement.LEFT \| KupEchartLegendPlacement.RIGHT \| KupEchartLegendPlacement.TOP` | `KupEchartLegendPlacement.RIGHT` | +| `map` | `map` | Choose which map you want to view, supported values: "europe", "africa", "asia", "oceania", "america", "italy" and "world". It's possible to supply a custom JSON too. | `Feature \| FeatureCollection \| GeometryCollection \| LineString \| MultiLineString \| MultiPoint \| MultiPolygon \| Point \| Polygon \| string` | `null` | +| `multipleYAxes` | `multiple-y-axes` | Multiple axes for y | `string` | `null` | +| `series` | -- | The data series to be displayed. They must be of the same type. | `string[]` | `[]` | +| `showMarks` | `show-marks` | Displays the numerical values. | `boolean` | `false` | +| `sizeX` | `size-x` | The width of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.). | `string` | `'100%'` | +| `sizeY` | `size-y` | The height of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.). | `string` | `'100%'` | +| `stacked` | `stacked` | Displays the data columns of an object on top of each other. | `boolean` | `false` | +| `types` | -- | The type of the chart. Supported formats: Bar, Gaussian, Line, Pie, Map and Scatter. | `KupEchartTypes[]` | `[KupEchartTypes.LINE]` | +| `xAxis` | -- | Customization options for the x Axis. | `CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; } \| ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "xAxis"; }` | `null` | +| `yAxis` | -- | Customization options for the y Axis. | `CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| LogAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| TimeAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; } \| ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { mainType?: "yAxis"; }` | `null` | ## Events From ca48dfc8b80b10f8559441ef900bebeff30959ba Mon Sep 17 00:00:00 2001 From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com> Date: Thu, 30 Jul 2026 10:29:42 +0200 Subject: [PATCH 2/2] Update unit-test.yaml --- .github/workflows/unit-test.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/unit-test.yaml b/.github/workflows/unit-test.yaml index cfefae36d5..d675a6423d 100644 --- a/.github/workflows/unit-test.yaml +++ b/.github/workflows/unit-test.yaml @@ -17,10 +17,10 @@ jobs: group: generate-docs-${{ github.workflow }}-${{ github.ref }} cancel-in-progress: true steps: - - uses: actions/checkout@v5 + - uses: actions/checkout@v5 - name: Setup Node.js - uses: actions/setup-node@v5 + uses: actions/setup-node@v5 with: node-version: '22.16.0' cache: 'yarn'