diff --git a/docs/angular/src/content/en/components/pivotGrid/pivot-grid.mdx b/docs/angular/src/content/en/components/pivotGrid/pivot-grid.mdx
index 364cd14a2c..f729d3ed0e 100644
--- a/docs/angular/src/content/en/components/pivotGrid/pivot-grid.mdx
+++ b/docs/angular/src/content/en/components/pivotGrid/pivot-grid.mdx
@@ -49,11 +49,11 @@ import { IgxPivotGridModule } from 'igniteui-angular/grids/pivot-grid';
// import { IgxPivotGridModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
- imports: [
- ...
- IgxPivotGridModule,
- ...
- ]
+ imports: [
+ ...
+ IgxPivotGridModule,
+ ...
+ ]
})
export class AppModule {}
```
@@ -67,18 +67,18 @@ import { IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular/grids/pivot-grid';
// import { IGX_PIVOT_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
- selector: 'app-home',
- template: `
-
-
- `,
- styleUrls: ['home.component.scss'],
- standalone: true,
- imports: [IGX_PIVOT_GRID_DIRECTIVES]
- /* or imports: [IgxPivotGridComponent] */
+ selector: 'app-home',
+ template: `
+
+
+ `,
+ styleUrls: ['home.component.scss'],
+ standalone: true,
+ imports: [IGX_PIVOT_GRID_DIRECTIVES]
+ /* or imports: [IgxPivotGridComponent] */
})
export class HomeComponent {
- public data: Transaction [];
+ public data: Transaction [];
}
```
@@ -112,17 +112,16 @@ The dimensions can be reordered or moved from one area to another via their corr
A dimension can also describe an expandable hierarchy via the `childLevel` property, for example:
```typescript
- {
- memberFunction: () => 'All',
- memberName: 'AllProducts',
- enabled: true,
- childLevel: {
- memberFunction: (data) => data.ProductCategory,
- memberName: 'ProductCategory',
- enabled: true
- }
- }
-
+{
+ memberFunction: () => 'All',
+ memberName: 'AllProducts',
+ enabled: true,
+ childLevel: {
+ memberFunction: (data) => data.ProductCategory,
+ memberName: 'ProductCategory',
+ enabled: true
+ }
+}
```
In this case the dimension renders an expander in the related section of the grid (row or column) and allows the children to be expanded or collapsed as part of the hierarchy. By default the row dimensions are initially expanded. This behavior can be controlled with the `defaultExpandState` `@Input` of the pivot grid.
@@ -131,37 +130,36 @@ In this case the dimension renders an expander in the related section of the gri
As part of the pivot grid some additional predefined dimensions are exposed for easier configuration:
-- `IgxPivotDateDimension`
- Can be used for date fields. Describes the following hierarchy by default:
- - All Periods
- - Years
- - Quarters
- - Months
- - Full Date
+`IgxPivotDateDimension` can be used for date fields. Describes the following hierarchy by default:
+
+- All Periods
+- Years
+- Quarters
+- Months
+- Full Date
It can be set for rows or columns, for example:
```typescript
public pivotConfigHierarchy: IPivotConfiguration = {
- rows: [
- new IgxPivotDateDimension({ memberName: 'Date', enabled: true });
- ]
+ rows: [
+ new IgxPivotDateDimension({ memberName: 'Date', enabled: true });
+ ]
}
```
It also allows for further customization via the second option parameter in order to enable or disable a particular part of the hierarchy, for example:
```typescript
- new IgxPivotDateDimension({ memberName: 'Date', enabled: true }, {
- total: true,
- years: true,
- months: true,
- fullDate: true,
- quarters: false
+new IgxPivotDateDimension({ memberName: 'Date', enabled: true }, {
+ total: true,
+ years: true,
+ months: true,
+ fullDate: true,
+ quarters: false
});
```
-
### Values configuration
A value configuration requires a `member` that matches a field from the provided `data`, or it can define either via an `aggregatorName` or custom `aggregator` function for more complex scenarios.
@@ -173,53 +171,53 @@ The `member` needs to be unique. In case you need different value aggregations f
Out of the box, there are 4 predefined aggregations that can be used depending on the data type of the data field:
- `IgxPivotNumericAggregate` - for numeric fields.
- Contains the following aggregation functions: `SUM`, `AVG`, `MIN`, `MAX`, `COUNT`.
+ Contains the following aggregation functions: `SUM`, `AVG`, `MIN`, `MAX`, `COUNT`.
- `IgxPivotDateAggregate` - for date fields.
- Contains the following aggregation functions: `LATEST`, `EARLIEST`, `COUNT`.
+ Contains the following aggregation functions: `LATEST`, `EARLIEST`, `COUNT`.
- `IgxPivotTimeAggregate` - for time fields.
- Contains the following aggregation functions: `LATEST`, `EARLIEST`, `COUNT`.
+ Contains the following aggregation functions: `LATEST`, `EARLIEST`, `COUNT`.
- `IgxPivotAggregate` - for any other data types. This is the base aggregation.
- Contains the following aggregation functions: `COUNT`.
+ Contains the following aggregation functions: `COUNT`.
The current aggregation function can be changed at runtime using the value chip's drop-down. By default, it displays a list of available aggregations based on the field's data type. A custom list of aggregations can also be set via the `aggregateList` property, for example:
```typescript
public pivotConfigHierarchy: IPivotConfiguration = {
- values: [
- {
- member: 'AmountOfSale',
- displayName: 'Amount of Sale',
- aggregate: {
- key: 'SUM',
- aggregator: IgxTotalSaleAggregate.totalSale,
- label: 'Sum of Sale'
- },
- aggregateList: [{
- key: 'SUM',
- aggregator: IgxTotalSaleAggregate.totalSale,
- label: 'Sum of Sale'
- }, {
- key: 'MIN',
- aggregator: IgxTotalSaleAggregate.totalMin,
- label: 'Minimum of Sale'
- }, {
- key: 'MAX',
- aggregator: IgxTotalSaleAggregate.totalMax,
- label: 'Maximum of Sale'
- }]
- }
- ]
+ values: [
+ {
+ member: 'AmountOfSale',
+ displayName: 'Amount of Sale',
+ aggregate: {
+ key: 'SUM',
+ aggregator: IgxTotalSaleAggregate.totalSale,
+ label: 'Sum of Sale'
+ },
+ aggregateList: [{
+ key: 'SUM',
+ aggregator: IgxTotalSaleAggregate.totalSale,
+ label: 'Sum of Sale'
+ }, {
+ key: 'MIN',
+ aggregator: IgxTotalSaleAggregate.totalMin,
+ label: 'Minimum of Sale'
+ }, {
+ key: 'MAX',
+ aggregator: IgxTotalSaleAggregate.totalMax,
+ label: 'Maximum of Sale'
+ }]
+ }
+ ]
}
public static totalSale: PivotAggregation = (members, data: any) =>
- data.reduce((accumulator, value) => accumulator + value.UnitPrice * value.UnitsSold, 0);
+ data.reduce((accumulator, value) => accumulator + value.UnitPrice * value.UnitsSold, 0);
public static totalMin: PivotAggregation = (members, data: any) => {
- return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.min(a, b));
+ return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.min(a, b));
};
public static totalMax: PivotAggregation = (members, data: any) => {
- return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.max(a,b));
+ return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.max(a,b));
};
```
@@ -239,44 +237,42 @@ The `enable` property controls if a given `IPivotDimension` or `IPivotValue` is
Let's take a look at a basic pivot configuration:
```typescript
- public pivotConfigHierarchy: IPivotConfiguration = {
- columns: [
- {
-
- memberName: 'Product',
- memberFunction: (data) => data.Product.Name,
- enabled: true
- }
-
- ],
- rows: [
- {
- memberName: 'Seller',
- memberFunction: (data) => data.Seller.Name,
- enabled: true,
- }
- ],
- values: [
- {
- member: 'NumberOfUnits',
- aggregate: {
- aggregator: IgxPivotNumericAggregate.sum,
- key: 'sum',
- label: 'Sum'
- },
- enabled: true
- },
- {
- member: 'AmountOfSale',
- aggregate: {
- aggregatorName: 'SUM',
- key: 'sum',
- label: 'Sum'
- },
- enabled: true
- }
- ]
- };
+public pivotConfigHierarchy: IPivotConfiguration = {
+ columns: [
+ {
+ memberName: 'Product',
+ memberFunction: (data) => data.Product.Name,
+ enabled: true
+ }
+ ],
+ rows: [
+ {
+ memberName: 'Seller',
+ memberFunction: (data) => data.Seller.Name,
+ enabled: true,
+ }
+ ],
+ values: [
+ {
+ member: 'NumberOfUnits',
+ aggregate: {
+ aggregator: IgxPivotNumericAggregate.sum,
+ key: 'sum',
+ label: 'Sum'
+ },
+ enabled: true
+ },
+ {
+ member: 'AmountOfSale',
+ aggregate: {
+ aggregatorName: 'SUM',
+ key: 'sum',
+ label: 'Sum'
+ },
+ enabled: true
+ }
+ ]
+};
```
This configuration defines 1 row, 1 column and 1 aggregation that sums the values of each dimension groups.
@@ -285,25 +281,23 @@ The members match fields available in the provided data source:
```typescript
public data = [
[
- {
- Product: {
- Name: 'Clothing',
- UnitPrice: '12.814860936633712'
- },
- Seller: {
- Name: 'Stanley Brooker',
- City: 'Seattle'
- },
- Date: '2007-01-01T00:00:00',
- Value: '94.2652032683907',
- NumberOfUnits: '282'
+ {
+ Product: {
+ Name: 'Clothing',
+ UnitPrice: '12.814860936633712'
},
- //...
+ Seller: {
+ Name: 'Stanley Brooker',
+ City: 'Seattle'
+ },
+ Date: '2007-01-01T00:00:00',
+ Value: '94.2652032683907',
+ NumberOfUnits: '282'
+ },
+ //...
];
-
```
-
Resulting in the following view, which groups the Product Categories unique columns, Sellers Names in unique rows and displays the related aggregations for the number of units in the related cells:
@@ -330,6 +324,63 @@ The `autoGenerateConfig` property automatically generates dimensions and values
This feature allows developers to quickly create a pivot view without manually specifying dimensions and values. With a pivot selector next to the pivot grid, users can enable and reorder dimensions and values as needed.
+## Styling
+
+The Pivot Grid can be styled through the [`Ignite UI for Angular Theme Library`](/themes/sass/component-themes). The grid's exposes a wide variety of properties, which allows the customization of all the pivot grid's features.
+
+### Importing global theme
+
+To get started with styling the Pivot Grid, you first need to import the `index` file, where all the theme functions and component mixins are located:
+
+```scss
+@use "igniteui-angular/theming" as *;
+
+// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
+// @import '~igniteui-angular/lib/core/styles/themes/index';
+```
+
+### Defining custom theme
+
+Next you need to create a custom theme, the easiest and recommended way to style the `igx-pivot-grid` is to use the and provide just the three main colors: `background`, `foreground`, and `accent-color`.
+
+
+There is no specific `sass` pivot grid function.
+
+
+These are the core theme properties. When you set them, all grid parts and internal components derive their colors from those values, resulting in a consistent appearance throughout the entire grid. Nested components such as buttons, icons, inputs, dropdowns, checkboxes, scrollbars, chips, and other helper components also derive their styling tokens from the main for a unified look.
+
+```scss
+$background: #292826;
+$foreground: #eeece1;
+$accent: #ffcd0f;
+
+$custom-grid: grid-theme(
+ $background: $background,
+ $foreground: $foreground,
+ $accent-color: $accent,
+);
+```
+
+
+Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them.
+
+
+### Applying the custom theme
+
+The last step is to **include** the component theme in our application.
+
+```scss
+igx-pivot-grid {
+ @include tokens($custom-grid);
+}
+```
+
+### Demo
+
+
+
+There are also additional parameters in the that you can use if you want more specific customizations.
+
## Known Issues and Limitations
| Limitation | Description |
@@ -342,6 +393,7 @@ This feature allows developers to quickly create a pivot view without manually s
## API References
-
-
+-
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx
index 5c4e68e7c0..7703db1603 100644
--- a/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx
+++ b/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx
@@ -29,9 +29,6 @@ The following is an {Platform} Pivot Grid example in combination with the {Platf
-
-
-
## Getting Started With {Platform} Pivot Grid
The {Platform} {PivotGridName} can be configured via the property.
@@ -80,7 +77,6 @@ A filter can also be defined via the **filters** configuration property. It can
Each basic dimension configuration requires a that matches a field from the provided **data**.
-
Multiple sibling dimensions can be defined, which creates a more complex nested group in the related row or column dimension area.
The dimensions can be reordered or moved from one area to another via their corresponding chips using drag & drop.
@@ -88,18 +84,15 @@ The dimensions can be reordered or moved from one area to another via their corr
A dimension can also describe an expandable hierarchy via the property, for example:
-
-
```tsx
const dimension: IgrPivotDimension = {
- memberName: "AllProducts",
- enabled: true,
- childLevel: {
- memberName: "ProductCategory",
- enabled: true
- }
+ memberName: "AllProducts",
+ enabled: true,
+ childLevel: {
+ memberName: "ProductCategory",
+ enabled: true
+ }
};
-
```
@@ -107,32 +100,31 @@ const dimension: IgrPivotDimension = {
```typescript
- {
- memberFunction: () => 'All',
- memberName: 'AllProducts',
- enabled: true,
- childLevel: {
- memberFunction: (data) => data.ProductCategory,
- memberName: 'ProductCategory',
- enabled: true
- }
- }
+{
+ memberFunction: () => 'All',
+ memberName: 'AllProducts',
+ enabled: true,
+ childLevel: {
+ memberFunction: (data) => data.ProductCategory,
+ memberName: 'ProductCategory',
+ enabled: true
+ }
+}
```
-
```razor
@code {
- var pivotConfiguration = new IgbPivotConfiguration();
- pivotConfiguration.Rows.Add(new IgbPivotDimension()
- {
- MemberName = "Product",
- Enabled = true,
- Name = "pivotDimension1",
- ChildLevel = new IgbPivotDimension() { MemberName = "Country", Enabled = true, Name = "pivotDimension2" }
- });
+ var pivotConfiguration = new IgbPivotConfiguration();
+ pivotConfiguration.Rows.Add(new IgbPivotDimension()
+ {
+ MemberName = "Product",
+ Enabled = true,
+ Name = "pivotDimension1",
+ ChildLevel = new IgbPivotDimension() { MemberName = "Country", Enabled = true, Name = "pivotDimension2" }
+ });
}
```
@@ -141,52 +133,49 @@ In this case the dimension renders an expander in the related section of the gri
### Predefined Dimensions
-As part of the Pivot Grid some additional predefined dimensions are exposed for easier configuration:
--
- Can be used for date fields. Describes the following hierarchy by default:
- - All Periods
- - Years
- - Quarters
- - Months
- - Full Date
+As part of the Pivot Grid some additional predefined dimensions are exposed for easier configuration.
+
+ can be used for date fields. Describes the following hierarchy by default:
+
+- All Periods
+- Years
+- Quarters
+- Months
+- Full Date
It can be set for rows or columns, for example:
-
```ts
-
const pivotConfiguration: IgrPivotConfiguration = {
- columns: [
- new IgrPivotDateDimension({
- enabled: true,
- memberName: "Date",
- })
- ]
+ columns: [
+ new IgrPivotDateDimension({
+ enabled: true,
+ memberName: "Date",
+ })
+ ]
};
```
-
```typescript
public pivotConfigHierarchy: IPivotConfiguration = {
- rows: [
- new IgxPivotDateDimension({ memberName: 'Date', enabled: true });
- ]
+ rows: [
+ new IgxPivotDateDimension({ memberName: 'Date', enabled: true });
+ ]
}
```
-
```typescript
public pivotConfigHierarchy: IgcPivotConfiguration = {
- rows: [
- new IgcPivotDateDimension({ memberName: 'Date', enabled: true });
- ]
+ rows: [
+ new IgcPivotDateDimension({ memberName: 'Date', enabled: true });
+ ]
}
```
@@ -195,13 +184,13 @@ public pivotConfigHierarchy: IgcPivotConfiguration = {
```razor
@code {
- IgbPivotDateDimension dateDim = new IgbPivotDateDimension();
- dateDim.BaseDimension = new IgbPivotDimension()
- {
- MemberName = "Date",
- Enabled = true
- };
- _config.Rows.Add(dateDim);
+ IgbPivotDateDimension dateDim = new IgbPivotDateDimension();
+ dateDim.BaseDimension = new IgbPivotDimension()
+ {
+ MemberName = "Date",
+ Enabled = true
+ };
+ _config.Rows.Add(dateDim);
}
```
@@ -210,45 +199,42 @@ public pivotConfigHierarchy: IgcPivotConfiguration = {
It also allows for further customization via the second option parameter in order to enable or disable a particular part of the hierarchy, for example:
-
```typescript
- new IgxPivotDateDimension({ memberName: 'Date', enabled: true }, {
- total: true,
- years: true,
- months: true,
- fullDate: true,
- quarters: false
+new IgxPivotDateDimension({ memberName: 'Date', enabled: true }, {
+ total: true,
+ years: true,
+ months: true,
+ fullDate: true,
+ quarters: false
});
```
-
```tsx
- new IgrPivotDateDimension({
- enabled: true,
- memberName: "Date",
+new IgrPivotDateDimension({
+ enabled: true,
+ memberName: "Date",
}, {
- total: true,
- years: true,
- months: true,
- fullDate: true,
- quarters: false
+ total: true,
+ years: true,
+ months: true,
+ fullDate: true,
+ quarters: false
});
```
-
```typescript
- new IgcPivotDateDimension({ memberName: 'Date', enabled: true }, {
- total: true,
- years: true,
- months: true,
- fullDate: true,
- quarters: false
+new IgcPivotDateDimension({ memberName: 'Date', enabled: true }, {
+ total: true,
+ years: true,
+ months: true,
+ fullDate: true,
+ quarters: false
});
```
@@ -257,20 +243,20 @@ It also allows for further customization via the second option parameter in orde
```razor
@code {
- IgbPivotDateDimension dateDim = new IgbPivotDateDimension();
- dateDim.BaseDimension = new IgbPivotDimension()
- {
- MemberName = "Date",
- Enabled = true
- };
- dateDim.Options = new IgbPivotDateDimensionOptions()
- {
- Years = true,
- Months = true,
- FullDate = true,
- Quarters = true
- };
- _config.Rows.Add(dateDim);
+ IgbPivotDateDimension dateDim = new IgbPivotDateDimension();
+ dateDim.BaseDimension = new IgbPivotDimension()
+ {
+ MemberName = "Date",
+ Enabled = true
+ };
+ dateDim.Options = new IgbPivotDateDimensionOptions()
+ {
+ Years = true,
+ Months = true,
+ FullDate = true,
+ Quarters = true
+ };
+ _config.Rows.Add(dateDim);
}
```
@@ -280,143 +266,140 @@ It also allows for further customization via the second option parameter in orde
A value configuration requires a **member** that matches a field from the provided **data**, or it can define a custom **aggregator** function for more complex custom scenarios. Out of the box, there are 4 predefined aggregations that can be used depending on the data type of the data field:
- `PivotNumericAggregate` - for numeric fields.
- Contains the following aggregation functions: `SUM`, `AVG`, `MIN`, `MAX`, `COUNT`.
+ Contains the following aggregation functions: `SUM`, `AVG`, `MIN`, `MAX`, `COUNT`.
- `PivotDateAggregate` - for date fields.
- Contains the following aggregation functions: `LATEST`, `EARLIEST`, `COUNT`.
+ Contains the following aggregation functions: `LATEST`, `EARLIEST`, `COUNT`.
- `PivotTimeAggregate` - for time fields.
- Contains the following aggregation functions: `LATEST`, `EARLIEST`, `COUNT`.
+ Contains the following aggregation functions: `LATEST`, `EARLIEST`, `COUNT`.
- `PivotAggregate` - for any other data types. This is the base aggregation.
- Contains the following aggregation functions: `COUNT`.
+ Contains the following aggregation functions: `COUNT`.
The current aggregation function can be changed at runtime using the value chip's drop-down. By default, it displays a list of available aggregations based on the field's data type. A custom list of aggregations can also be set via the property, for example:
-
```typescript
const totalSale = (members: any, data: any) => data.reduce((accumulator:any, value: any) => accumulator + value.UnitPrice * value.UnitsSold, 0);
const totalMin = (members: any, data: any) => {
- return data.map((x:any) => x.UnitPrice * x.UnitsSold).reduce((a:number, b:number) => Math.min(a, b));
+ return data.map((x:any) => x.UnitPrice * x.UnitsSold).reduce((a:number, b:number) => Math.min(a, b));
};
const totalMax = (members: any, data: any) => {
- return data.map((x:any) => x.UnitPrice * x.UnitsSold).reduce((a:number, b:number) => Math.max(a,b));
+ return data.map((x:any) => x.UnitPrice * x.UnitsSold).reduce((a:number, b:number) => Math.max(a,b));
};
const pivotConfiguration: IgrPivotConfiguration = {
- values: [
- {
- enabled: true,
- member: "AmountofSale",
- displayName: "Amount of Sale",
- aggregate: {
- aggregatorName: "SUM",
- key: "SUM",
- label: "Sum of Sale",
- },
- aggregateList: [{
- key: 'SUM',
- aggregator: totalSale,
- label: 'Sum of Sale'
- }, {
- key: 'MIN',
- aggregator: totalMin,
- label: 'Minimum of Sale'
- }, {
- key: 'MAX',
- aggregator: totalMax,
- label: 'Maximum of Sale'
- }]
- }
- ]
+ values: [
+ {
+ enabled: true,
+ member: "AmountofSale",
+ displayName: "Amount of Sale",
+ aggregate: {
+ aggregatorName: "SUM",
+ key: "SUM",
+ label: "Sum of Sale",
+ },
+ aggregateList: [{
+ key: 'SUM',
+ aggregator: totalSale,
+ label: 'Sum of Sale'
+ }, {
+ key: 'MIN',
+ aggregator: totalMin,
+ label: 'Minimum of Sale'
+ }, {
+ key: 'MAX',
+ aggregator: totalMax,
+ label: 'Maximum of Sale'
+ }]
+ }
+ ]
};
```
-
```typescript
public pivotConfigHierarchy: IPivotConfiguration = {
- values: [
- {
- member: 'AmountOfSale',
- displayName: 'Amount of Sale',
- aggregate: {
- key: 'SUM',
- aggregator: IgxTotalSaleAggregate.totalSale,
- label: 'Sum of Sale'
- },
- aggregateList: [{
- key: 'SUM',
- aggregator: IgxTotalSaleAggregate.totalSale,
- label: 'Sum of Sale'
- }, {
- key: 'MIN',
- aggregator: IgxTotalSaleAggregate.totalMin,
- label: 'Minimum of Sale'
- }, {
- key: 'MAX',
- aggregator: IgxTotalSaleAggregate.totalMax,
- label: 'Maximum of Sale'
- }]
- }
- ]
+ values: [
+ {
+ member: 'AmountOfSale',
+ displayName: 'Amount of Sale',
+ aggregate: {
+ key: 'SUM',
+ aggregator: IgxTotalSaleAggregate.totalSale,
+ label: 'Sum of Sale'
+ },
+ aggregateList: [{
+ key: 'SUM',
+ aggregator: IgxTotalSaleAggregate.totalSale,
+ label: 'Sum of Sale'
+ }, {
+ key: 'MIN',
+ aggregator: IgxTotalSaleAggregate.totalMin,
+ label: 'Minimum of Sale'
+ }, {
+ key: 'MAX',
+ aggregator: IgxTotalSaleAggregate.totalMax,
+ label: 'Maximum of Sale'
+ }]
+ }
+ ]
}
public static totalSale: PivotAggregation = (members, data: any) =>
- data.reduce((accumulator, value) => accumulator + value.UnitPrice * value.UnitsSold, 0);
+ data.reduce((accumulator, value) => accumulator + value.UnitPrice * value.UnitsSold, 0);
public static totalMin: PivotAggregation = (members, data: any) => {
- return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.min(a, b));
+ return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.min(a, b));
};
public static totalMax: PivotAggregation = (members, data: any) => {
- return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.max(a,b));
+ return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.max(a,b));
};
```
-
```typescript
public pivotConfigHierarchy: IgcPivotConfiguration = {
- values: [
- {
- member: 'AmountOfSale',
- displayName: 'Amount of Sale',
- aggregate: {
- key: 'SUM',
- aggregator: IgcTotalSaleAggregate.totalSale,
- label: 'Sum of Sale'
- },
- aggregateList: [{
- key: 'SUM',
- aggregator: IgcTotalSaleAggregate.totalSale,
- label: 'Sum of Sale'
- }, {
- key: 'MIN',
- aggregator: IgcTotalSaleAggregate.totalMin,
- label: 'Minimum of Sale'
- }, {
- key: 'MAX',
- aggregator: IgcTotalSaleAggregate.totalMax,
- label: 'Maximum of Sale'
- }]
- }
- ]
+ values: [
+ {
+ member: 'AmountOfSale',
+ displayName: 'Amount of Sale',
+ aggregate: {
+ key: 'SUM',
+ aggregator: IgcTotalSaleAggregate.totalSale,
+ label: 'Sum of Sale'
+ },
+ aggregateList: [{
+ key: 'SUM',
+ aggregator: IgcTotalSaleAggregate.totalSale,
+ label: 'Sum of Sale'
+ }, {
+ key: 'MIN',
+ aggregator: IgcTotalSaleAggregate.totalMin,
+ label: 'Minimum of Sale'
+ }, {
+ key: 'MAX',
+ aggregator: IgcTotalSaleAggregate.totalMax,
+ label: 'Maximum of Sale'
+ }]
+ }
+ ]
}
public static totalSale: PivotAggregation = (members, data: any) =>
- data.reduce((accumulator, value) => accumulator + value.UnitPrice * value.UnitsSold, 0);
+ data.reduce((accumulator, value) => accumulator + value.UnitPrice * value.UnitsSold, 0);
public static totalMin: PivotAggregation = (members, data: any) => {
- return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.min(a, b));
+ return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.min(a, b));
};
public static totalMax: PivotAggregation = (members, data: any) => {
- return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.max(a,b));
+ return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.max(a,b));
};
```
@@ -425,19 +408,19 @@ public static totalMax: PivotAggregation = (members, data: any) => {
```razor
@code {
- IgbPivotConfiguration pivotConfiguration1 = new IgbPivotConfiguration();
- IgbPivotValue pivotValue = new IgbPivotValue()
- {
- Member = "Sales",
- Name = "pivotValue1",
- DisplayName = "Amount of Sales",
- Enabled = true,
- Aggregate = new IgbPivotAggregator() { Key = "sum", AggregatorName = PivotAggregationType.SUM, Label = "Sum of Sales" }
- };
- pivotValue.AggregateList.Add(new IgbPivotAggregator() { Key = "sum", AggregatorName = PivotAggregationType.SUM, Label = "Sum of Sales" });
- pivotValue.AggregateList.Add(new IgbPivotAggregator() { Key = "min", AggregatorName = PivotAggregationType.MIN, Label = "Minimum of Sales" });
- pivotValue.AggregateList.Add(new IgbPivotAggregator() { Key = "max", AggregatorName = PivotAggregationType.MAX, Label = "Maximum of Sales" });
- pivotConfiguration1.Values.Add(pivotValue);
+ IgbPivotConfiguration pivotConfiguration1 = new IgbPivotConfiguration();
+ IgbPivotValue pivotValue = new IgbPivotValue()
+ {
+ Member = "Sales",
+ Name = "pivotValue1",
+ DisplayName = "Amount of Sales",
+ Enabled = true,
+ Aggregate = new IgbPivotAggregator() { Key = "sum", AggregatorName = PivotAggregationType.SUM, Label = "Sum of Sales" }
+ };
+ pivotValue.AggregateList.Add(new IgbPivotAggregator() { Key = "sum", AggregatorName = PivotAggregationType.SUM, Label = "Sum of Sales" });
+ pivotValue.AggregateList.Add(new IgbPivotAggregator() { Key = "min", AggregatorName = PivotAggregationType.MIN, Label = "Minimum of Sales" });
+ pivotValue.AggregateList.Add(new IgbPivotAggregator() { Key = "max", AggregatorName = PivotAggregationType.MAX, Label = "Maximum of Sales" });
+ pivotConfiguration1.Values.Add(pivotValue);
```
@@ -454,162 +437,148 @@ The `Enable` property controls if a given or <
Let's take a look at a basic pivot configuration:
-
-
```tsx
const pivotConfiguration1: IgrPivotConfiguration = {
- columns: [
- new IgrPivotDateDimension({
- enabled: true,
- memberName: "Date",
- })
- ],
- rows: [
- {
- enabled: true,
- memberName: "SellerCity"
- },
- {
- enabled: true,
- memberName: "ProductName"
- }
- ],
- filters: [
- {
- enabled: true,
- memberName: "SellerName"
- }
- ],
- values: [
- {
- member: "ProductUnitPrice",
- displayName: "Amount of Sale",
- dataType: "currency",
- enabled: true,
- aggregate: {
- aggregatorName: "SUM",
- key: "SUM",
- label: "Sum of Sale",
- }
- }
- ]
+ columns: [
+ new IgrPivotDateDimension({
+ enabled: true,
+ memberName: "Date",
+ })
+ ],
+ rows: [
+ {
+ enabled: true,
+ memberName: "SellerCity"
+ },
+ {
+ enabled: true,
+ memberName: "ProductName"
+ }
+ ],
+ filters: [
+ {
+ enabled: true,
+ memberName: "SellerName"
+ }
+ ],
+ values: [
+ {
+ member: "ProductUnitPrice",
+ displayName: "Amount of Sale",
+ dataType: "currency",
+ enabled: true,
+ aggregate: {
+ aggregatorName: "SUM",
+ key: "SUM",
+ label: "Sum of Sale",
+ }
+ }
+ ]
};
```
-
-
```typescript
- public pivotConfigHierarchy: IPivotConfiguration = {
- columns: [
- {
-
- memberName: 'Product',
- memberFunction: (data) => data.Product.Name,
- enabled: true
- }
-
- ],
- rows: [
- {
- memberName: 'Seller',
- memberFunction: (data) => data.Seller.Name,
- enabled: true,
- }
- ],
- values: [
- {
- member: 'NumberOfUnits',
- aggregate: {
- aggregator: IgxPivotNumericAggregate.sum,
- key: 'sum',
- label: 'Sum'
- },
- enabled: true
-
- }
- ]
- };
+public pivotConfigHierarchy: IPivotConfiguration = {
+ columns: [
+ {
+ memberName: 'Product',
+ memberFunction: (data) => data.Product.Name,
+ enabled: true
+ }
+ ],
+ rows: [
+ {
+ memberName: 'Seller',
+ memberFunction: (data) => data.Seller.Name,
+ enabled: true,
+ }
+ ],
+ values: [
+ {
+ member: 'NumberOfUnits',
+ aggregate: {
+ aggregator: IgxPivotNumericAggregate.sum,
+ key: 'sum',
+ label: 'Sum'
+ },
+ enabled: true
+ }
+ ]
+};
```
-
```typescript
- public pivotConfigHierarchy: IgcPivotConfiguration = {
- columns: [
- {
-
- memberName: 'ProductName',
- memberFunction: (data) => data.ProductName,
- enabled: true
- },
- {
-
- memberName: 'SellerCity',
- memberFunction: (data) => data.SellerCity,
- enabled: true
- }
-
-
- ],
- rows: [
- {
- memberName: 'SellerName',
- memberFunction: (data) => data.SellerName,
- enabled: true,
- }
- ],
- values: [
- {
- member: 'AmountofSale',
- displayName: "Amount of Sale",
- aggregate: {
- aggregator: IgcPivotNumericAggregate.sum,
- key: 'SUM',
- label: 'Sum of Sale'
- },
- enabled: true
-
- }
- ]
- };
+public pivotConfigHierarchy: IgcPivotConfiguration = {
+ columns: [
+ {
+ memberName: 'ProductName',
+ memberFunction: (data) => data.ProductName,
+ enabled: true
+ },
+ {
+ memberName: 'SellerCity',
+ memberFunction: (data) => data.SellerCity,
+ enabled: true
+ }
+ ],
+ rows: [
+ {
+ memberName: 'SellerName',
+ memberFunction: (data) => data.SellerName,
+ enabled: true,
+ }
+ ],
+ values: [
+ {
+ member: 'AmountofSale',
+ displayName: "Amount of Sale",
+ aggregate: {
+ aggregator: IgcPivotNumericAggregate.sum,
+ key: 'SUM',
+ label: 'Sum of Sale'
+ },
+ enabled: true
+ }
+ ]
+};
```
```csharp
- IgbPivotConfiguration pivotConfiguration = new IgbPivotConfiguration();
- pivotConfiguration.Rows.Add(new IgbPivotDimension()
- {
- MemberName = "SellerName",
- Enabled = true,
- Name = "pivotDimension1"
- });
- pivotConfiguration.Columns.Add(new IgbPivotDimension()
- {
- MemberName = "ProductName",
- Enabled = true,
- Name = "pivotDimension2"
- });
- pivotConfiguration.Columns.Add(new IgbPivotDimension()
- {
- MemberName = "SellerCity",
- Enabled = true,
- Name = "pivotDimension2"
- });
- pivotConfiguration.Values.Add(new IgbPivotValue()
- {
- Member = "AmountofSale",
- Name = "pivotValue1",
- Enabled = true,
- Aggregate = new IgbPivotAggregator() { Key = "SUM", AggregatorName = PivotAggregationType.SUM, Label = "Sum" }
- });
-}
+IgbPivotConfiguration pivotConfiguration = new IgbPivotConfiguration();
+pivotConfiguration.Rows.Add(new IgbPivotDimension()
+ {
+ MemberName = "SellerName",
+ Enabled = true,
+ Name = "pivotDimension1"
+ });
+pivotConfiguration.Columns.Add(new IgbPivotDimension()
+ {
+ MemberName = "ProductName",
+ Enabled = true,
+ Name = "pivotDimension2"
+ });
+pivotConfiguration.Columns.Add(new IgbPivotDimension()
+ {
+ MemberName = "SellerCity",
+ Enabled = true,
+ Name = "pivotDimension2"
+ });
+pivotConfiguration.Values.Add(new IgbPivotValue()
+ {
+ Member = "AmountofSale",
+ Name = "pivotValue1",
+ Enabled = true,
+ Aggregate = new IgbPivotAggregator() { Key = "SUM", AggregatorName = PivotAggregationType.SUM, Label = "Sum" }
+ });
```
@@ -621,15 +590,15 @@ The members match fields available in the provided data source:
```typescript
public data = [
[
- {
- ProductName: `Clothing`,
- ProductUnitPrice: 12.8,
- SellerName: `Stanley Brooker`,
- SellerCity: `Seattle`,
- Date: `2007-01-01T00:00:00`,
- Value: 94.4,
- NumberOfUnits: 282
- },
+ {
+ ProductName: `Clothing`,
+ ProductUnitPrice: 12.8,
+ SellerName: `Stanley Brooker`,
+ SellerCity: `Seattle`,
+ Date: `2007-01-01T00:00:00`,
+ Value: 94.4,
+ NumberOfUnits: 282
+ },
];
```
@@ -639,16 +608,16 @@ public data = [
```csharp
public PivotDataFlat()
{
- this.Add(new PivotDataFlatItem()
- {
- ProductName = @"Clothing",
- ProductUnitPrice = 12.8,
- SellerName = @"Stanley Brooker",
- SellerCity = @"Seattle",
- Date = @"2007-01-01T00:00:00",
- Value = 94.4,
- NumberOfUnits = 282
- });
+ this.Add(new PivotDataFlatItem()
+ {
+ ProductName = @"Clothing",
+ ProductUnitPrice = 12.8,
+ SellerName = @"Stanley Brooker",
+ SellerCity = @"Seattle",
+ Date = @"2007-01-01T00:00:00",
+ Value = 94.4,
+ NumberOfUnits = 282
+ });
```
@@ -686,15 +655,15 @@ A more detailed view of how they are used can be seen bellow in example data, wh
```json
[
- {
- ProductCategory: 'All', AllProducts: 'All Products', All: 1000, 'All-Bulgaria': 774, 'All-USA': 829, 'All-Uruguay': 524,
- AllProducts_records: [
- { ProductCategory: 'Clothing', 'All-Bulgaria': 774, 'All-USA': 296, 'All-Uruguay': 456 },
- { ProductCategory: 'Bikes', 'All-Uruguay': 68 },
- { ProductCategory: 'Accessories', 'All-USA': 293 },
- { ProductCategory: 'Components', 'All-USA': 240 }
- ]
- }
+ {
+ ProductCategory: 'All', AllProducts: 'All Products', All: 1000, 'All-Bulgaria': 774, 'All-USA': 829, 'All-Uruguay': 524,
+ AllProducts_records: [
+ { ProductCategory: 'Clothing', 'All-Bulgaria': 774, 'All-USA': 296, 'All-Uruguay': 456 },
+ { ProductCategory: 'Bikes', 'All-Uruguay': 68 },
+ { ProductCategory: 'Accessories', 'All-USA': 293 },
+ { ProductCategory: 'Components', 'All-USA': 240 }
+ ]
+ }
];
```
@@ -711,12 +680,12 @@ The default values are:
```typescript
{
- aggregations: 'aggregations',
- records: 'records',
- children: 'children',
- level: 'level',
- rowDimensionSeparator: '_',
- columnDimensionSeparator: '-'
+ aggregations: 'aggregations',
+ records: 'records',
+ children: 'children',
+ level: 'level',
+ rowDimensionSeparator: '_',
+ columnDimensionSeparator: '-'
};
```
@@ -725,14 +694,14 @@ The default values are:
```razor
@code {
- {
- aggregations: 'aggregations',
- records: 'records',
- children: 'children',
- level: 'level',
- rowDimensionSeparator: '_',
- columnDimensionSeparator: '-'
- };
+ {
+ aggregations: 'aggregations',
+ records: 'records',
+ children: 'children',
+ level: 'level',
+ rowDimensionSeparator: '_',
+ columnDimensionSeparator: '-'
+ };
}
```
@@ -743,25 +712,44 @@ If you have data field values that contain the default keys, make sure to change
-
When overriding the in Blazor, currently you will need to define all other keys, since assigning a new PivotKeys object, it replaces completely the default ones:
```razor
@code {
- var pivotConfiguration = new IgbPivotConfiguration();
- pivotConfiguration.PivotKeys = new IgbPivotKeys()
- {
- Aggregations = "aggregations",
- Records = "records",
- Children = "children",
- Level = "level",
- RowDimensionSeparator = "_",
- ColumnDimensionSeparator = "^"
- };
+ var pivotConfiguration = new IgbPivotConfiguration();
+ pivotConfiguration.PivotKeys = new IgbPivotKeys()
+ {
+ Aggregations = "aggregations",
+ Records = "records",
+ Children = "children",
+ Level = "level",
+ RowDimensionSeparator = "_",
+ ColumnDimensionSeparator = "^"
+ };
}
```
+
+## Styling
+
+The {Platform} Pivot Grid shares the same [CSS properties](../grid/theming-grid) as the base Grid. To style it, simply set the desired property values and scope them to the Pivot Grid component.
+
+```css
+igc-pivot-grid {
+ --header-background: #3b3a3a;
+ --header-text-color: #ffcd0f;
+ --content-background: #494949;
+ --content-text-color: #ffcd0f;
+ --row-odd-background: #494949;
+ --row-even-background: #494949;
+ --row-hover-background: #3b3a3a;
+ --row-hover-text-color: #ffcd0f;
+}
+```
+
+
+
## Known Issues and Limitations
|Limitation|Description|