Hhristov/fix pivot grid date localization 21.2.x#17255
Closed
Hhristov/fix pivot grid date localization 21.2.x#17255
Conversation
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…-21.2.x feat(badge): update badge example and styles for avatar integration
Co-authored-by: Copilot <copilot@github.com>
…sign skill (#17248) Co-authored-by: Konstantin Dinev <kdinev@infragistics.com>
Hristo313
added
❌ status: awaiting-test
Contributor
There was a problem hiding this comment.
Pull request overview
This PR addresses Pivot Grid date localization by introducing a display-only formatter for pivot dimensions and applying a locale-aware short-date formatter for the predefined date dimension leaf level. It also expands Copilot skill documentation, including MCP setup guidance and new/updated skill reference content.
Changes:
- Add
IPivotDimension.formatterand apply it when rendering pivot row dimension header text. - Make predefined
IgxPivotDateDimensionleaf dates render in locale-aware short-date format and adjust the related spec. - Update/extend Copilot skills documentation (new MCP setup reference, new “Generate From Image Design” skill entry, multiple reference “Overview” sections, and badge/avatar examples).
Reviewed changes
Copilot reviewed 20 out of 20 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| skills/igniteui-angular-generate-from-image-design/references/gotchas.md | Updates dark-theme grid guidance to use component token theming workflow. |
| skills/igniteui-angular-generate-from-image-design/SKILL.md | Updates theming application guidance to use @include tokens(...). |
| skills/igniteui-angular-components/references/mcp-setup.md | Adds editor-specific setup steps for the Ignite UI CLI MCP server. |
| skills/igniteui-angular-components/references/layout.md | Adds an “Overview” section and MCP doc lookup guidance. |
| skills/igniteui-angular-components/references/layout-manager.md | Adds an “Overview” section and MCP doc lookup guidance. |
| skills/igniteui-angular-components/references/form-controls.md | Adds an “Overview” section and MCP doc lookup guidance. |
| skills/igniteui-angular-components/references/feedback.md | Adds an “Overview” section and MCP doc lookup guidance. |
| skills/igniteui-angular-components/references/directives.md | Adds an “Overview” section and MCP doc lookup guidance. |
| skills/igniteui-angular-components/references/data-display.md | Adds an “Overview” section; updates avatar+badge example and badge type naming. |
| skills/igniteui-angular-components/references/charts.md | Expands overview to emphasize MCP doc lookup for details. |
| skills/igniteui-angular-components/SKILL.md | Adds prerequisites + MCP setup instructions and links to the new setup reference. |
| projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-content.component.ts | Applies a dimension-level formatter when building row dimension header columns. |
| projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts | Updates expectation to use locale-aware short-date formatting. |
| projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts | Adds IPivotDimension.formatter API documentation. |
| projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts | Adds default locale-aware formatter for full-date leaf dimension in IgxPivotDateDimension. |
| projects/igniteui-angular/badge/src/badge/badge.component.ts | Updates JSDoc example for badge usage with avatars. |
| README.md | Adds the “Generate From Image Design” skill entry to the skills table. |
| AGENTS.md | Updates skills listing to include “Generate From Image Design”. |
| .github/copilot-instructions.md | Adds the new skill to the Copilot skills list. |
| .github/AGENTS-README.md | Adds the new skill to internal skill lists and descriptions. |
| | Components | [`skills/igniteui-angular-components/SKILL.md`](skills/igniteui-angular-components/SKILL.md) | UI Components (form controls, layout, data display, feedback/overlays, directives — Input Group, Combo, Select, Date/Time Pickers, Calendar, Tabs, Stepper, Accordion, List, Card, Dialog, Snackbar, Button, Ripple, Tooltip, Drag and Drop, Layout Manager, Dock Manager and Charts (Area Chart, Bar Chart, Column Chart, Stock/Financial Chart, Pie Chart)) | | ||
| | Data Grids | [`skills/igniteui-angular-grids/SKILL.md`](skills/igniteui-angular-grids/SKILL.md) | Data Grids (grid type selection, column config, sorting, filtering, selection, editing, grouping, paging, remote data, state persistence, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) | | ||
| | Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`](skills/igniteui-angular-theming/SKILL.md) | Theming & Styling (includes MCP server setup) | | ||
| | Generate From Image Design | [`skills/igniteui-angular-generate-from-image-design/SKILL.md`](skills/igniteui-angular-generate-from-image-design/SKILL.md) | Build Angular views from screenshots, mockups, and wireframes using Ignite UI components, theming MCP tools, and image-to-layout/component mapping guidance | |
Comment on lines
+142
to
+165
| // When fullDate is enabled and the user has not provided a custom memberFunction, | ||
| // attach a locale-aware formatter so the leaf date values are displayed in | ||
| // short-date format instead of the raw data string. | ||
| // When the user provides their own memberFunction, the dimension is used as-is | ||
| // (spread-create is skipped) to avoid overriding the user's intended formatting. | ||
| let baseDimension: IPivotDimension = null; | ||
| if (options.fullDate) { | ||
| if (inBaseDimension.memberFunction) { | ||
| // User supplied a custom memberFunction — preserve it without adding a formatter. | ||
| baseDimension = inBaseDimension; | ||
| } else { | ||
| // No custom memberFunction: create a new dimension object with a locale-aware | ||
| // formatter that shows dates in short-date format. | ||
| baseDimension = { | ||
| ...inBaseDimension, | ||
| formatter: (value: any) => { | ||
| const dateValue = (value !== null && value !== undefined && value !== '') | ||
| ? getDateFormatter().createDateFromValue(value) | ||
| : null; | ||
| return dateValue | ||
| ? getDateFormatter().formatDateTime(dateValue, undefined, { dateStyle: 'short' }) | ||
| : value; | ||
| } | ||
| }; |
Comment on lines
+143
to
+155
| /** | ||
| * Optional function to format the display value of a dimension cell. | ||
| * Unlike `memberFunction`, this does not affect the data key used for grouping or sorting — | ||
| * it is applied only when rendering the dimension header text. | ||
| * When set, the return value of this function is shown instead of the raw dimension value. | ||
| * | ||
| * @example | ||
| * ```typescript | ||
| * // Display dates in a locale-aware short date format. | ||
| * { memberName: 'Date', enabled: true, formatter: (value) => new Date(value).toLocaleDateString() } | ||
| * ``` | ||
| */ | ||
| formatter?: (value: any) => string; |
| background: <resolved-surface-token>; | ||
| } | ||
| } | ||
| @include tokens($custom-grid-theme); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #
Description
Motivation / Context
Type of Change (check all that apply):
Component(s) / Area(s) Affected:
How Has This Been Tested?
Test Configuration:
Screenshots / Recordings
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)