Merge pull request #8988 from IgniteUI/ddincheva/percentTypeCol

Introducing percent type column

Author: zdrawku

CHANGELOG.md

@@ -10,6 +10,7 @@ All notable changes for each version of this project will be documented in this
     - Added support for exporting grouped data.
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Support for `currency` type columns is added in the grid.
+    - Support for `percent` type columns is added in the grid.
     - Added support for filtering based on the formatted cell values using the `FormattedValuesFilteringStrategy` for `IgxGrid`/`IgxHierarchicalGrid` and `TreeGridFormattedValuesFilteringStrategy` for `IgxTreeGrid`.
 - `IgxPaginator`
     - `paging` and `pagingDone` events are now emitted.
@@ -30,22 +31,27 @@ All notable changes for each version of this project will be documented in this
 - `IgxDialog`
     - The dialog content has been moved inside the dialog window container in the template. This means that if you have added something in-between the opening and closing tags of the dialog, you may have to adjust its styling a bit since that content is now rendered inside a container that has padding on it.
 - `IgxCalendar`
+    - **Breaking Change**
     - A new string enumeration `IgxCalendarView` is exported. Either the new one or the current `CalendarView` can be used. `CalendarView` will be deprecated in a future release.
     - `onSelection` is now `selected`
     - `onViewChanging` is now `viewChanging`
     - `onDateSelection` is now `dateSelection`
     - `onYearSelection` is now `yearSelection`
     - `onMonthSelection` is now `monthSelection`
 - `IgxYearsViewComponent`
+    - **Breaking Change**
     - `onSelection` is now `selected`
     - `onYearSelection` is now `yearSelection`
 - `IgxDaysViewComponent`
+    - **Breaking Change**
     - `onDateSelection` is now `dateSelection`
     - `onViewChanging` is now `viewChanging`
 - `IgxMonthsViewComponent`
+    - **Breaking Change**
     - `onSelection` is now `selected`
     - `onMonthSelection` is now `monthSelection`
 - `IgxMonthPickerComponent`
+    - **Breaking Change**
     - `onSelection` is now `selected`
 - `IgxRadioGroup`
     - Added new property `alignment` that determines the radio group alignment. Available options are `horizontal` (default) and `vertical`.

projects/igniteui-angular/src/lib/data-operations/data-util.ts

@@ -25,7 +25,8 @@ export const DataType = mkenum({
     Number: 'number',
     Boolean: 'boolean',
     Date: 'date',
-    Currency: 'currency'
+    Currency: 'currency',
+    Percent: 'percent'
 });
 export type DataType = (typeof DataType)[keyof typeof DataType];
 
@@ -219,7 +220,7 @@ export class DataUtil {
     }
 
     public static parseValue(dataType: DataType, value: any): any {
-        if (dataType === DataType.Number || dataType === DataType.Currency) {
+        if (dataType === DataType.Number || dataType === DataType.Currency || dataType === DataType.Percent) {
             value = parseFloat(value);
         }
 

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -24,6 +24,8 @@
                 ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
                 : column.dataType === 'currency'
                 ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
+                : column.dataType === 'percent'
+                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
                 : value
         "
         [row]="rowData"
@@ -39,6 +41,8 @@
                 ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
                 : column.dataType === 'currency'
                 ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
+                : column.dataType === 'percent'
+                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
                 : value
         }}</div>
     <igx-icon
@@ -54,8 +58,9 @@
     [groupName]="gridID"
     [value]="formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ?
         (value | number:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'date' ?
-        (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?
-        (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : value"
+        (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?
+        (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?
+        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value"
     [row]="rowData"
     [column]="this.column.field"
     [containerClass]="'igx-grid__td-text'"
@@ -81,6 +86,7 @@
                 [value]="editValue"
                 (input)="editValue = $event.target.value"
                 [igxFocus]="true"
+                [step]="step"
                 type="number"
             />
         </igx-input-group>
@@ -114,11 +120,25 @@
                 [value]="editValue"
                 (input)="editValue = $event.target.value"
                 [igxFocus]="true"
+                [step]="step"
                 type="number"
             />
             <igx-suffix *ngIf="!grid.currencyPositionLeft" >{{ currencyCodeSymbol }}</igx-suffix>
         </igx-input-group>
     </ng-container>
+    <ng-container *ngIf="column.dataType === 'percent'">
+        <igx-input-group displayDensity="compact">
+            <input
+                igxInput
+                [value]="editValue"
+                (input)="editValue = $event.target.value"
+                [igxFocus]="true"
+                [step]="step"
+                type="number"
+            />
+            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>
+        </igx-input-group>
+    </ng-container>
 </ng-template>
 <ng-container *ngTemplateOutlet="pinnedIndicatorTemplate; context: context">
 </ng-container>

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -27,6 +27,7 @@ import { GridSelectionMode } from './common/enums';
 import { GridType } from './common/grid.interface';
 import { ISearchInfo } from './grid/public_api';
 import { getCurrencySymbol, getLocaleCurrencyCode} from '@angular/common';
+import { DataType } from '../data-operations/data-util';
 
 /**
  * Providing reference to `IgxGridCellComponent`:
@@ -283,7 +284,12 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
 
     @HostBinding('attr.title')
     public get title() {
-        return this.editMode || this.cellTemplate ? '' : this.value;
+        return this.editMode || this.cellTemplate ? '' : this.column.dataType === DataType.Percent ?
+        this.grid.percentPipe.transform(this.value, this.column.pipeArgs.digitsInfo, this.grid.locale) :
+        this.column.dataType === DataType.Currency ?
+        this.grid.currencyPipe.transform(this.value, this.currencyCode, this.column.pipeArgs.display,
+            this.column.pipeArgs.digitsInfo, this.grid.locale) :
+        this.value;
     }
 
     @HostBinding('class.igx-grid__td--bool-true')
@@ -594,6 +600,16 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     public activeHighlightClass = 'igx-highlight__active';
 
+    /** @hidden @internal */
+    public get step(): number {
+        const digitsInfo = this.column.pipeArgs.digitsInfo;
+        if (!digitsInfo) {
+            return 1;
+        }
+        const step = +digitsInfo.substr(digitsInfo.indexOf('.') + 1, 1);
+        return 1 / (Math.pow(10, step));
+    }
+
     /** @hidden @internal */
     public get currencyCode(): string {
         return this.column.pipeArgs.currencyCode ?

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -35,7 +35,8 @@ import { IgxGridHeaderComponent } from '../headers/grid-header.component';
 import { IgxGridFilteringCellComponent } from '../filtering/base/grid-filtering-cell.component';
 import { IgxGridHeaderGroupComponent } from '../headers/grid-header-group.component';
 import { getNodeSizeViaRange } from '../../core/utils';
-import { IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand, IgxCurrencySummaryOperand } from '../summaries/grid-summary';
+import { IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand,
+    IgxCurrencySummaryOperand, IgxPercentSummaryOperand } from '../summaries/grid-summary';
 import {
     IgxCellTemplateDirective,
     IgxCellHeaderTemplateDirective,
@@ -734,7 +735,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     /**
      * @hidden
      */
-    get maxWidthPx() {
+    public get maxWidthPx() {
         const gridAvailableSize = this.grid.calcWidth;
         const isPercentageWidth = this.maxWidth && typeof this.maxWidth === 'string' && this.maxWidth.indexOf('%') !== -1;
         return isPercentageWidth ?  parseFloat(this.maxWidth) / 100 * gridAvailableSize : parseFloat(this.maxWidth);
@@ -743,7 +744,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     /**
      * @hidden
      */
-    get maxWidthPercent() {
+    public get maxWidthPercent() {
         const gridAvailableSize = this.grid.calcWidth;
         const isPercentageWidth = this.maxWidth && typeof this.maxWidth === 'string' && this.maxWidth.indexOf('%') !== -1;
         return isPercentageWidth ?  parseFloat(this.maxWidth) : parseFloat(this.maxWidth) / gridAvailableSize * 100;
@@ -752,7 +753,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     /**
      * @hidden
      */
-    get minWidthPx() {
+    public get minWidthPx() {
         const gridAvailableSize = this.grid.calcWidth;
         const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1;
         return isPercentageWidth ?  parseFloat(this.minWidth) / 100 * gridAvailableSize : parseFloat(this.minWidth);
@@ -761,7 +762,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     /**
      * @hidden
      */
-    get minWidthPercent() {
+    public get minWidthPercent() {
         const gridAvailableSize = this.grid.calcWidth;
         const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1;
         return isPercentageWidth ?  parseFloat(this.minWidth) : parseFloat(this.minWidth) / gridAvailableSize * 100;
@@ -803,7 +804,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      *
      * @memberof IgxColumnComponent
      */
-    get index(): number {
+    public get index(): number {
         return this.grid.columns.indexOf(this);
     }
 
@@ -962,7 +963,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      *
      * @memberof IgxColumnComponent
      */
-    get defaultMinWidth(): string {
+    public get defaultMinWidth(): string {
         if (!this.grid) {
             return '80';
         }
@@ -1536,6 +1537,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
                 case DataType.Currency:
                     this.summaries = IgxCurrencySummaryOperand;
                     break;
+                case DataType.Percent:
+                    this.summaries = IgxPercentSummaryOperand;
+                    break;
                 default:
                     this.summaries = IgxSummaryOperand;
                     break;
@@ -1548,6 +1552,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
                     break;
                 case DataType.Number:
                 case DataType.Currency:
+                case DataType.Percent:
                     this.filters = IgxNumberFilteringOperand.instance();
                     break;
                 case DataType.Date:

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts

@@ -165,6 +165,7 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy {
             case DataType.Boolean:
                 return this.esf.grid.resourceStrings.igx_grid_excel_boolean_filter;
             case DataType.Number:
+            case DataType.Percent:
                 return this.esf.grid.resourceStrings.igx_grid_excel_number_filter;
             case DataType.Date:
                 return this.esf.grid.resourceStrings.igx_grid_excel_date_filter;

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts

@@ -225,6 +225,7 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit {
                 return IgxBooleanFilteringOperand.instance().condition(conditionName);
             case DataType.Number:
             case DataType.Currency:
+            case DataType.Percent:
                 return IgxNumberFilteringOperand.instance().condition(conditionName);
             case DataType.Date:
                 return IgxDateFilteringOperand.instance().condition(conditionName);

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts

@@ -96,6 +96,7 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
         switch (this.column.dataType) {
             case DataType.Number:
             case DataType.Currency:
+            case DataType.Percent:
                 return 'number';
             default:
                 return 'text';

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts

@@ -247,6 +247,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         switch (this.esf.column?.dataType) {
             case DataType.Number:
             case DataType.Currency:
+            case DataType.Percent:
                 return 'number';
             default:
                 return 'text';
@@ -417,6 +418,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
                 return IgxBooleanFilteringOperand.instance().condition(conditionName);
             case DataType.Number:
             case DataType.Currency:
+            case DataType.Percent:
                 return IgxNumberFilteringOperand.instance().condition(conditionName);
             case DataType.Date:
                 return IgxDateFilteringOperand.instance().condition(conditionName);

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts

@@ -789,6 +789,11 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
                     this.column.pipeArgs.currencyCode  : getLocaleCurrencyCode(this.grid.locale),
                     this.column.pipeArgs.display, this.column.pipeArgs.digitsInfo, this.grid.locale);
         }
+        if (this.column.dataType === DataType.Percent) {
+            return this.column.formatter ?
+                applyFormatter ? this.column.formatter(element) : element :
+                this.grid.percentPipe.transform(element, this.column.pipeArgs.digitsInfo, this.grid.locale);
+            }
         return this.column.formatter && applyFormatter ?
             this.column.formatter(element) :
             element;