fix(pivot-grid): fix date format based on the localization#17246
fix(pivot-grid): fix date format based on the localization#17246Copilot wants to merge 20 commits into
Conversation
…format
When IgxPivotDateDimension is used with fullDate enabled and no
custom memberFunction, attach a locale-aware formatter that formats
leaf-level date values using {dateStyle: 'short'} via Intl.DateTimeFormat.
The formatter is added to a new optional IPivotDimension.formatter
property and applied in the row dimension rendering layer only,
so data keys, sorting, and filtering are unaffected.
Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular/sessions/0e38c414-30cb-4920-a7ea-3bc9882a866b
Co-authored-by: Hristo313 <57346540+Hristo313@users.noreply.github.com>
Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular/sessions/0e38c414-30cb-4920-a7ea-3bc9882a866b Co-authored-by: Hristo313 <57346540+Hristo313@users.noreply.github.com>
…assertion Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular/sessions/0e38c414-30cb-4920-a7ea-3bc9882a866b Co-authored-by: Hristo313 <57346540+Hristo313@users.noreply.github.com>
|
@copilot Fix the failing tests |
The failing test is unrelated to this PR's changes. The failure is in This is a timing-sensitive virtual scrolling test in the
None of those files are in the |
There was a problem hiding this comment.
Pull request overview
This PR adds a display-only formatting hook for pivot dimensions and uses it to localize leaf-level fullDate values produced by IgxPivotDateDimension, so row headers show locale-aware short dates instead of raw ISO strings.
Changes:
- Added optional
formattertoIPivotDimensionfor display-only header formatting. - Wrapped the
fullDateleaf dimension inIgxPivotDateDimensionwith a locale-aware short-date formatter (when no custommemberFunctionis provided). - Applied
dim.formatterwhen extracting row dimension header text and updated a related spec assertion to be locale-independent.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-content.component.ts | Applies IPivotDimension.formatter to row header text before creating the header column. |
| projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts | Updates expected leaf date header assertion to use Intl.DateTimeFormat output. |
| projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts | Introduces formatter?: (value) => ... to IPivotDimension with docs. |
| projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts | Adds default localized formatter for fullDate leaf dimension when no custom memberFunction exists. |
|
@copilot Fix the comments |
… date parsing Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular/sessions/fc2cee95-07d2-43e3-873c-8aafce84bc93 Co-authored-by: Hristo313 <57346540+Hristo313@users.noreply.github.com>
…escing Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular/sessions/fc2cee95-07d2-43e3-873c-8aafce84bc93 Co-authored-by: Hristo313 <57346540+Hristo313@users.noreply.github.com>
All four review comments addressed in commits
|
There was a problem hiding this comment.
Pull request overview
Adds a display-only formatting hook to pivot dimensions and wires it into both row and column dimension header rendering, enabling locale-aware display of leaf-level date dimension values (e.g., short dates) without changing grouping/sorting keys.
Changes:
- Introduces optional
IPivotDimension.formattercallback for display-only header text formatting (row + column headers). - Adds a default locale-aware short-date formatter for the
fullDateleaf level inIgxPivotDateDimension(when no custommemberFunctionis provided) and fixes date guards to handle epoch0. - Updates the pivot grid spec assertion to expect locale-aware short-date output for the leaf date header.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-content.component.ts |
Applies dim.formatter (with nullish fallback) when building row dimension header columns. |
projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts |
Applies dim.formatter to column dimension headers and extracts raw header values using parent.field for stability. |
projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts |
Adds the IPivotDimension.formatter API (doc + Blazor/C# interop annotations). |
projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts |
Adds default short-date formatter for fullDate leaf dimension and fixes date guards to handle falsy date values like 0. |
projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts |
Updates expected leaf date header assertion to match locale-aware short-date formatting. |
|
Seems like the date dimension related items are one cycle behind. I used the configuration from the logged issue and changed the locale of the samples, the date values are not reflecting the current localization seems like they require detectChanges(): |
|
Also introducing new property requires adding it to the Changelog and I guess we should count this as new functionally and maybe add it to master only? |
|
@copilot fix the comments |
… locale change and add CHANGELOG entry Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular/sessions/6927bc1b-5a3d-48bc-a8ba-94843c57edca Co-authored-by: Hristo313 <57346540+Hristo313@users.noreply.github.com>
Fixed in
Added a CHANGELOG entry in Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Adds a display-only
headerFormatterhook toIPivotDimensionand uses it to localize the leaf-levelfullDatevalues produced byIgxPivotDateDimension, so both row and column dimension headers show locale-aware short dates instead of raw ISO strings. Also fixes date dimension headers being one cycle behind after a locale change.Changes Made
IPivotDimension.headerFormatter— new optional callback(value: any, dimension?, rowData?) => string | null | undefinedfor display-only dimension header formatting; returningnull/undefinedfalls back to the raw value. Annotated withcsTreatAsEvent+blazorOnlyScriptfor Blazor/C# interop consistency.IgxPivotDateDimension— attaches a locale-aware{ dateStyle: 'short' }formatter to thefullDateleaf dimension when no custommemberFunctionis provided. All date dimension levels (Months, Quarters, Years, fullDate) now use a consistentrecordValue != null && recordValue !== ''guard instead of truthy checks, so epoch-0 timestamps are handled correctly.pivot-row-dimension-content.component.ts— appliesdim.headerFormatter(rawHeader) ?? rawHeaderwhen building row dimension header columns.pivot-grid.component.ts— appliesdim.headerFormatter(rawHeader) ?? rawHeaderincreateColumnForDimensionso column dimension headers are also formatted. Raw header extraction usesparent.fieldinstead ofparent.headerfor stable value extraction regardless of whether a parent column has a formatter. Fixed theonResourceChangeHandlecallback to usenotifyDimensionChange(true)instead ofsetupColumns(), which additionally incrementspipeTriggerand callscdr.detectChanges()synchronously so dimension headers update immediately when the locale changes (the callback fires outside Angular's zone, makingmarkForCheck()alone insufficient).pivot-grid.spec.ts— updated leaf date header assertion to useIntl.DateTimeFormatlocale-aware output and replaced ambiguousnew Date('12/08/2021')with unambiguousnew Date(2021, 11, 8).CHANGELOG.md— added entry documenting the newIPivotDimension.headerFormatterproperty and the locale update fix.Notes
headerFormatterapplies consistently to both row and column dimension header text; returningnull/undefinedfalls back to the raw value.detectChanges()call.