-
Notifications
You must be signed in to change notification settings - Fork 160
fix(pivot-grid): fix date format based on the localization #17256
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: 21.2.x
Are you sure you want to change the base?
Changes from all commits
f054eb5
e86ce0f
b2b689e
440d496
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -139,13 +139,38 @@ export class IgxPivotDateDimension implements IPivotDimension { | |
| this.enabled = inBaseDimension.enabled; | ||
| this.displayName = inBaseDimension.displayName || this.resourceStrings.igx_grid_pivot_date_dimension_total; | ||
|
|
||
| const baseDimension = options.fullDate ? inBaseDimension : null; | ||
| // When fullDate is enabled, attach a locale-aware formatter unless the user has | ||
| // already supplied their own formatter on inBaseDimension. | ||
| // The memberFunction (if any) is kept intact via the spread — the formatter is | ||
| // a separate display-only concern and should not be gated on memberFunction. | ||
| let baseDimension: IPivotDimension = null; | ||
| if (options.fullDate) { | ||
| if (inBaseDimension.formatter) { | ||
| // User supplied their own formatter — use the dimension as-is. | ||
| baseDimension = inBaseDimension; | ||
| } else { | ||
| // No user-supplied formatter: create a new dimension object with a locale-aware | ||
| // formatter that shows dates in short-date format. | ||
| baseDimension = { | ||
| ...inBaseDimension, | ||
| formatter: (value: any) => { | ||
| const hasValue = value !== null && value !== undefined && value !== ''; | ||
| const dateValue = hasValue ? getDateFormatter().createDateFromValue(value) : null; | ||
| if (dateValue) { | ||
| return getDateFormatter().formatDateTime(dateValue, undefined, { dateStyle: 'short' }); | ||
| } | ||
| return hasValue ? String(value) : ''; | ||
| } | ||
| }; | ||
| } | ||
| } | ||
|
Comment on lines
+147
to
+166
|
||
|
|
||
| const monthDimensionDef: IPivotDimension = { | ||
| memberName: 'Months', | ||
| memberFunction: (rec) => { | ||
| const recordValue = PivotUtil.extractValueFromDimension(inBaseDimension, rec); | ||
| const dateValue = recordValue ? getDateFormatter().createDateFromValue(recordValue) : null; | ||
| return recordValue ? getDateFormatter().formatDateTime(dateValue, undefined, { month: 'long'}) : rec['Months']; | ||
| const dateValue = (recordValue != null && recordValue !== '') ? getDateFormatter().createDateFromValue(recordValue) : null; | ||
| return (recordValue != null && recordValue !== '') ? getDateFormatter().formatDateTime(dateValue, undefined, { month: 'long'}) : rec['Months']; | ||
| }, | ||
| enabled: true, | ||
| childLevel: baseDimension | ||
|
|
@@ -156,8 +181,8 @@ export class IgxPivotDateDimension implements IPivotDimension { | |
| memberName: 'Quarters', | ||
| memberFunction: (rec) => { | ||
| const recordValue = PivotUtil.extractValueFromDimension(inBaseDimension, rec); | ||
| const dateValue = recordValue ? getDateFormatter().createDateFromValue(recordValue) : null; | ||
| return recordValue ? `Q` + Math.ceil((dateValue.getMonth() + 1) / 3) : rec['Quarters']; | ||
| const dateValue = (recordValue != null && recordValue !== '') ? getDateFormatter().createDateFromValue(recordValue) : null; | ||
| return (recordValue != null && recordValue !== '') ? `Q` + Math.ceil((dateValue.getMonth() + 1) / 3) : rec['Quarters']; | ||
| }, | ||
| enabled: true, | ||
| childLevel: monthDimension | ||
|
|
@@ -168,8 +193,8 @@ export class IgxPivotDateDimension implements IPivotDimension { | |
| memberName: 'Years', | ||
| memberFunction: (rec) => { | ||
| const recordValue = PivotUtil.extractValueFromDimension(inBaseDimension, rec); | ||
| const dateValue = recordValue ? getDateFormatter().createDateFromValue(recordValue) : null; | ||
| return recordValue ? dateValue.getFullYear().toString() : rec['Years']; | ||
| const dateValue = (recordValue != null && recordValue !== '') ? getDateFormatter().createDateFromValue(recordValue) : null; | ||
| return (recordValue != null && recordValue !== '') ? dateValue.getFullYear().toString() : rec['Years']; | ||
| }, | ||
| enabled: true, | ||
| childLevel: quarterDimension | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -1245,7 +1245,8 @@ describe('IgxPivotGrid #pivotGrid', () => { | |
| // check rows | ||
| const rows = pivotGrid.rowList.toArray(); | ||
| expect(rows.length).toBe(5); | ||
| const expectedHeaders = ['All Periods', '2021', 'Q4', 'December', '12/08/2021']; | ||
| const formattedDate = Intl.DateTimeFormat(undefined, { dateStyle: 'short' }).format(new Date(2021, 11, 8)); | ||
| const expectedHeaders = ['All Periods', '2021', 'Q4', 'December', formattedDate]; | ||
|
Comment on lines
+1248
to
+1249
|
||
| const rowHeaders = fixture.debugElement.queryAll( | ||
| By.directive(IgxPivotRowDimensionHeaderComponent)); | ||
| const rowDimensionHeaders = rowHeaders.map(x => x.componentInstance.column.header); | ||
|
|
||
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
|
|
@@ -183,7 +183,11 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon | |||||||
|
|
||||||||
| protected extractFromDimension(dim: IPivotDimension, rowData: IPivotGridGroupRecord) { | ||||||||
| const field = dim.memberName; | ||||||||
| const header = rowData?.dimensionValues.get(field); | ||||||||
| const rawHeader = rowData?.dimensionValues.get(field); | ||||||||
| let header = rawHeader; | ||||||||
| if (dim.formatter != null) { | ||||||||
| header = dim.formatter(rawHeader) ?? rawHeader; | ||||||||
|
||||||||
| header = dim.formatter(rawHeader) ?? rawHeader; | |
| const formatter = dim.formatter as (value: any, dimension?: IPivotDimension, record?: IPivotGridGroupRecord) => any; | |
| header = formatter(rawHeader, dim, rowData) ?? rawHeader; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
getDateFormatter()is called twice per formatted cell. Ifformatteris invoked frequently (row header rendering/virtualization), this adds avoidable overhead. Capture the formatter instance once in the closure (or outside the callback) and reuse it for bothcreateDateFromValueandformatDateTime.