Skip to content

Commit

Permalink
Merge pull request #6048 from IgniteUI/vnext
Browse files Browse the repository at this point in the history 
Updating master with changes from vnext
  • Loading branch information
@ChronosSF
ChronosSF authored Feb 10, 2025
2 parents c7b72d1 + e088ab2 commit 2553499
Show file tree
Hide file tree
Showing 106 changed files with 3,171 additions and 5,546 deletions.
13 changes: 11 additions & 2 deletions en/components/charts/types/data-pie-chart.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,15 @@ In addition to the mouse highlighting, the [`IgxDataPieChartComponent`]({environ

When these conditions are met, the values of the subset will be highlighted, while the remainder of the full set of data will be faded - effectively creating a highlight for the subset and allowing easier visualization of a subset of your data within the same control.

The following example demonstrates highlight filtering.

<code-view style="height: 600px" alt="Angular Data Pie Chart Highlight Filtering"
data-demos-base-url="{environment:dvDemosBaseUrl}"
iframe-src="{environment:dvDemosBaseUrl}/charts/data-pie-chart/highlight-filter"
github-src="charts/data-pie-chart/highlight-filter">
</code-view>


<div class="divider--half"></div>

## Angular Data Pie Chart Animation
Expand All @@ -177,8 +186,8 @@ The following sample demonstrates the usage of animation in the [`IgxDataPieChar

<code-view style="height: 600px" alt="Angular Data Pie Chart Animation"
data-demos-base-url="{environment:dvDemosBaseUrl}"
iframe-src="{environment:dvDemosBaseUrl}/charts/data-pie-chart/animation"
github-src="charts/data-pie-chart/animation">
iframe-src="{environment:dvDemosBaseUrl}/charts/data-pie-chart/animation-replay"
github-src="charts/data-pie-chart/animation-replay">
</code-view>


Expand Down
67 changes: 66 additions & 1 deletion en/components/chip.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ public chipRemoved(event: IBaseChipEventArgs) {

### Dragging

Dragging can be enabled by setting the [`draggable`]({environment:angularApiUrl}/classes/igxchipcomponent.html#removable) input to `true`. When enabled, you can click and drag the chip around.
Dragging can be enabled by setting the [`draggable`]({environment:angularApiUrl}/classes/igxchipcomponent.html#draggable) input to `true`. When enabled, you can click and drag the chip around.

```html
<igx-chip *ngFor="let chip of chipList" [id]="chip.id" [draggable]="true">
Expand Down Expand Up @@ -256,6 +256,71 @@ You can customize the `remove icon`, using the [`removeIcon`]({environment:angul
</ng-template>
```

<div class="divider"></div>

### Demo

To create the demo sample below, we will use the features above:

```html
<igx-chip
*ngFor="let chip of chipList"
[id]="chip.id"
[selectable]="true"
[removable]="true"
(remove)="chipRemoved($event)"
>
<igx-icon igxPrefix>{{chip.icon}}</igx-icon>
{{chip.text}}
</igx-chip>
```

Then, we need to add the `chipList` and the function, that handles the [`remove`]({environment:angularApiUrl}/classes/igxchipcomponent.html#remove) event:

```ts
import { IBaseChipEventArgs } from 'igniteui-angular';
// import { IBaseChipEventArgs } from '@infragistics/igniteui-angular'; for licensed package
...
public chipList = [
{
text: 'Country',
id: '1',
icon: 'place'
},
{
text: 'City',
id: '2',
icon: 'location_city'
},
{
text: 'Town',
id: '3',
icon: 'store'
},
{
text: 'First Name',
id: '4',
icon: 'person_pin'
}
];

private changeDetectionRef: any;

public chipRemoved(event: IBaseChipEventArgs) {
this.chipList = this.chipList.filter((item) => {
return item.id !== event.owner.id;
});
this.changeDetectionRef.detectChanges();
}
```
If everything went well, you should see this in your browser:


<code-view style="height: 100px; padding-top: 10px"
data-demos-base-url="{environment:demosBaseUrl}"
iframe-src="{environment:demosBaseUrl}/data-display/chip-simple" >
</code-view>

## Chip Area

The [`IgxChipsAreaComponent`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) is used when handling more complex scenarios that require interaction between chips (dragging, selection, navigation, etc.).
Expand Down
4 changes: 4 additions & 0 deletions en/components/general-changelog-dv.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ All notable changes for each version of Ignite UI for Angular are documented on
* [Ignite UI for Angular CHANGELOG.md at Github](https://github.com/IgniteUI/igniteui-angular/blob/master)

## **19.0.0 (January 2025)**

* Angular 19 support.

## **18.2.0 (December 2024)**

### igniteui-angular-charts (Charts)
Expand Down
210 changes: 108 additions & 102 deletions en/components/grids_templates/summaries.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,55 +116,6 @@ All available column data types could be found in the official [Column types top
```
}

**@@igComponent summaries** can be customized further by using the [`disabledSummaries`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disabledSummaries) property, which allows you to exclude specific summary functions for a column. This property accepts an array of strings representing the keys of the summaries to disable.

@@if (igxName === 'IgxGrid') {
For example, to disable the `count`, `min`, and `max` summaries for a `ReorderLevel` column, you can set the `disabledSummaries` property to `['count', 'min', 'max']`:

```html
<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)">
<igx-column field="ProductID" header="Product ID" width="200px" [sortable]="true"></igx-column>
<igx-column field="ProductName" header="Product Name" width="200px" [sortable]="true" [hasSummary]="true"></igx-column>
<igx-column field="ReorderLevel" width="200px" [editable]="true" [dataType]="'number'" [hasSummary]="true" [disabledSummaries]="['count', 'min', 'max']">
</igx-column>
</@@igSelector>
```
}
@@if (igxName === 'IgxTreeGrid') {
For example, to disable the `count`, `min`, and `max` summaries for a `Units` column, you can set the `disabledSummaries` property to `['count', 'min', 'max']`:

```html
<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)">
<igx-column field="ID" header="Order ID" width="200px" [sortable]="true"></igx-column>
<igx-column field="Name" header="Order Product" width="200px" [sortable]="true" [hasSummary]="true"></igx-column>
<igx-column field="Units" width="200px" [editable]="true" [dataType]="'number'" [hasSummary]="true" [disabledSummaries]="['count', 'min', 'max']">
</igx-column>
</@@igSelector>
```
}
@@if (igxName === 'IgxHierarchicalGrid') {
For example, to disable the `count`, `min`, and `max` summaries for a `Grammy Nominations` column, you can set the `disabledSummaries` property to `['count', 'min', 'max']`:

```html
<igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="false">
<igx-column field="Artist" [hasSummary]='true'></igx-column>
<igx-column field="Photo">
<ng-template igxCell let-cell="cell">
<div class="cell__inner_2">
<img [src]="cell.value" class="photo" />
</div>
</ng-template>
</igx-column>
<igx-column field="Debut" [hasSummary]='true'></igx-column>
<igx-column field="Grammy Nominations" [hasSummary]='true' [dataType]="'number'" [summaries]="mySummary" [disabledSummaries]="['count', 'min', 'max']">
</igx-column>
<igx-column field="Grammy Awards" [hasSummary]='true' [dataType]="'number'"></igx-column>
</igx-hierarchical-grid>
```
}

In this example, the numeric column will display only the remaining summaries, such as `average` and `sum`, while excluding the disabled ones. This approach ensures that you can tailor the summary results displayed for each column to better suit your application's requirements.

The other way to enable/disable summaries for a specific column or a list of columns is to use the public method [`enableSummaries`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#enableSummaries)/[`disableSummaries`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#disableSummaries) of the **@@igSelector**.

@@if (igxName === 'IgxGrid') {
Expand Down Expand Up @@ -377,59 +328,6 @@ export class HGridSummarySampleComponent implements OnInit {
```
}

**@@igComponent summaries** also support customization when using the [`disabledSummaries`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disabledSummaries) property alongside custom summaries. This property allows you to exclude specific custom summary, offering precise control over which summaries are displayed for a given column. For example, to disable a custom summary like `test` while keeping others active, you can use the `disabledSummaries` property and set it to `['test']`:

@@if (igxName === 'IgxGrid') {
```html
<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)">
<igx-column field="ProductID" width="200px" [sortable]="true">
</igx-column>
<igx-column field="ProductName" width="200px" [sortable]="true" [hasSummary]="true">
</igx-column>
<igx-column field="UnitsInStock" width="200px" [dataType]="'number'" [hasSummary]="true" [summaries]="mySummary" [disabledSummaries]="['test']" [sortable]="true">
</igx-column>
<igx-column field="ReorderLevel" width="200px" [editable]="true" [dataType]="'number'" [hasSummary]="true">
</igx-column>
</@@igSelector>
```

In this example, the `UnitsInStock` column uses the custom `MySummary` class but excludes the `test` summary function by specifying it in the `disabledSummaries` property. This configuration allows for even greater flexibility, enabling you to disable custom summaries to suit your application's specific needs.
}

@@if (igxName === 'IgxTreeGrid') {
```html
<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)">
<igx-column field="ID" header="Order ID" width="200px" [sortable]="true"></igx-column>
<igx-column field="Name" header="Order Product" width="200px" [sortable]="true" [hasSummary]="true"></igx-column>
<igx-column field="Units" [dataType]="'number'" width="200px" [editable]="true" [hasSummary]="true" [summaries]="mySummary" [disabledSummaries]="['test']">
</igx-column>
<igx-column field="UnitPrice" header="Unit Price" width="200px" [dataType]="'number'" [dataType]="'currency'" [hasSummary]="true"></igx-column>
</@@igSelector>
```

In this example, the `Units` column uses the custom `MySummary` class but excludes the `test` summary function by specifying it in the `disabledSummaries` property. This configuration allows for even greater flexibility, enabling you to disable custom summaries to suit your application's specific needs.
}

@@if (igxName === 'IgxHierarchicalGrid') {
```html
<igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="false">
<igx-column field="Artist" [hasSummary]='true'></igx-column>
<igx-column field="Photo">
<ng-template igxCell let-cell="cell">
<div class="cell__inner_2">
<img [src]="cell.value" class="photo" />
</div>
</ng-template>
</igx-column>
<igx-column field="Debut" [hasSummary]='true'></igx-column>
<igx-column field="Grammy Nominations" [hasSummary]='true' [dataType]="'number'" [summaries]="mySummary" [disabledSummaries]="['test']"></igx-column>
<igx-column field="Grammy Awards" [hasSummary]='true' [dataType]="'number'"></igx-column>
</igx-hierarchical-grid>
```

In this example, the `Grammy Nominations` column uses the custom `MySummary` class but excludes the `test` summary function by specifying it in the `disabledSummaries` property. This configuration allows for even greater flexibility, enabling you to disable custom summaries to suit your application's specific needs.
}

### Custom summaries, which access all data
Now you can access all @@igComponent data inside the custom column summary. Two additional optional parameters are introduced in the IgxSummaryOperand `operate` method.
As you can see in the code snippet below the operate method has the following three parameters:
Expand Down Expand Up @@ -534,7 +432,115 @@ When a default summary is defined, the height of the summary area is calculated

}

## Disable Summaries

The [`disabledSummaries`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#disabledSummaries) property provides precise per-column control over the Ignite UI for Angular grid summary feature. This property enables users to customize the summaries displayed for each column in the grid, ensuring that only the most relevant and meaningful data is shown. For example, you can exclude specific summary types, such as `['count', 'min', 'max']`, by specifying their summary keys in an array.

This property can also be modified **dynamically at runtime** through code, providing flexibility to adapt the grid's summaries to changing application states or user actions.

The following examples illustrate how to use the `disabledSummaries` property to manage summaries for different columns and exclude specific default and custom summary types in the Ignite UI for Angular grid:

@@if (igxName === 'IgxGrid') {
```html
<!-- default summaries -->
<igx-column
field="UnitPrice"
header="Unit Price"
dataType="number"
[hasSummary]="true"
[disabledSummaries]="['count', 'sum', 'average']"
>
</igx-column>
<!-- custom summaries -->
<igx-column
field="UnitsInStock"
header="Units In Stock"
dataType="number"
[hasSummary]="true"
[summaries]="discontinuedSummary"
[disabledSummaries]="['discontinued', 'totalDiscontinued']"
>
</igx-column>
```
For `UnitPrice`, default summaries like `count`, `sum`, and `average` are disabled, leaving others like `min` and `max` active.

For `UnitsInStock`, custom summaries such as `total` and `totalDiscontinued` are excluded using the `disabledSummaries` property.
}
@@if (igxName === 'IgxTreeGrid') {
```html
<!-- custom summaries -->
<igx-column
field="Units"
header="Units"
dataType="number"
[hasSummary]="true"
[summaries]="unitsSummary"
[disabledSummaries]="['uniqueCount', 'maxDifference']"
>
</igx-column>
<!-- default summaries -->
<igx-column
field="UnitPrice"
header="Unit Price"
dataType="number"
[hasSummary]="true"
[disabledSummaries]="['count', 'sum', 'average']"
>
</igx-column>
```
For `Units`, custom summaries such as `totalDelivered` and `totalNotDelivered` are excluded using the `disabledSummaries` property.

For `UnitPrice`, default summaries like `count`, `sum`, and `average` are disabled, leaving others like `min` and `max` active.
}
@@if (igxName === 'IgxHierarchicalGrid') {
```html
<!-- custom summaries -->
<igx-column
field="Photo"
[hasSummary]="true"
[summaries]="grammySummary"
[disabledSummaries]="['singersWithAwards', 'awards']"
>
<ng-template igxCell let-cell="cell">
<div class="cell__inner_2">
<img [src]="cell.value" class="photo" />
</div>
</ng-template>
</igx-column>
<!-- default summaries -->
<igx-column
field="GrammyNominations"
header="Grammy Nominations"
dataType="number"
[hasSummary]="true"
[disabledSummaries]="['count', 'sum', 'average']"
></igx-column>
```
For `Photo`, custom summaries such as `singersWithAwards` and `awards` are excluded using the `disabledSummaries` property.

For `GrammyNominations` default summaries like `count`, `sum`, and `average` are disabled, leaving others like `min` and `max` active.
}

At runtime, summaries can also be dynamically disabled using the `disabledSummaries` property. For example, you can set or update the property on specific columns programmatically to adapt the displayed summaries based on user actions or application state changes.

@@if (igxName === 'IgxGrid') {
<code-view style="height:850px"
data-demos-base-url="{environment:demosBaseUrl}"
iframe-src="{environment:demosBaseUrl}/grid/grid-disable-summaries" >
</code-view>
}
@@if (igxName === 'IgxTreeGrid') {
<code-view style="height:950px"
data-demos-base-url="{environment:demosBaseUrl}"
iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-disable-summaries" >
</code-view>
}
@@if (igxName === 'IgxHierarchicalGrid') {
<code-view style="height:850px"
data-demos-base-url="{environment:demosBaseUrl}"
iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-disable-summaries" >
</code-view>
}

## Formatting summaries
By default, summary results, produced by the built-in summary operands, are localized and formatted according to the grid [`locale`]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale) and column [`pipeArgs`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#pipeArgs). When using custom operands, the `locale` and `pipeArgs` are not applied. If you want to change the default appearance of the summary results, you may format them using the [`summaryFormatter`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#summaryFormatter) property.
Expand Down
9 changes: 9 additions & 0 deletions en/components/toc.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -706,15 +706,24 @@
- name: Chart Annotations
href: charts/features/chart-annotations.md
new: false
- name: Charting in Dashboards
href: dashboard-tile.md
new: true
- name: Chart Data Aggregations
href: charts/features/chart-data-aggregations.md
new: false
- name: Chart Data Filtering
href: charts/features/chart-data-filtering.md
new: true
- name: Chart Data Legend
href: charts/features/chart-data-legend.md
new: false
- name: Chart Data Tooltip
href: charts/features/chart-data-tooltip.md
new: false
- name: Chart Data Selection
href: charts/features/chart-data-selection.md
new: true
- name: Chart Highlight Filter
href: charts/features/chart-highlight-filter.md
new: false
Expand Down
Loading

0 comments on commit 2553499

Please sign in to comment.