DevExtreme Angular - ArrayStore
You can place a JavaScript array in an ArrayStore to extend its functionality. The ArrayStore provides an interface for loading and editing data, and allows you to handle data-related events. You should declare the ArrayStore inside the DataSource configuration object because the Sankey widget requires disabled pagination to prevent data from partitioning.
- import { DxSankeyModule } from "devextreme-angular";
- import DataSource from "devextreme/data/data_source";
- import "devextreme/data/array_store";
- // ...
- export class AppComponent {
- sankeyData: Array<{ source: string, target: string, weight: number }> = [
- { source: "Brazil", target: "Spain", weight: 4 },
- { source: "Brazil", target: "Portugal", weight: 5 },
- { source: "Brazil", target: "England", weight: 2 },
- { source: "Canada", target: "Portugal", weight: 2 },
- { source: "Canada", target: "England", weight: 1 },
- { source: "Mexico", target: "Portugal", weight: 9 },
- { source: "Mexico", target: "Spain", weight: 5 }
- ];
- sankeyDataSource: DataSource = new DataSource({
- store: {
- type: "array",
- data: this.sankeyData,
- onLoaded: () => {
- // Event handling commands go here
- }
- },
- paginate: false
- });
- }
- @NgModule({
- imports: [
- // ...
- DxSankeyModule
- ],
- // ...
- })
- <dx-sankey
- [dataSource]="sankeyDataSource">
- </dx-sankey>
The DataSource can also be used for data processing. In the following example, it is used to map an array of arrays provided originally to a Sankey-supported array of objects:
- import { DxSankeyModule } from "devextreme-angular";
- import DataSource from "devextreme/data/data_source";
- // ...
- export class AppComponent {
- sankeyArray: Array<any> = [
- [ "Brazil", "Spain", 4 ],
- [ "Brazil", "Portugal", 5 ],
- [ "Brazil", "England", 2 ],
- [ "Canada", "Portugal", 2 ],
- [ "Canada", "England", 1 ],
- [ "Mexico", "Portugal", 9 ],
- [ "Mexico", "Spain", 5 ]
- ];
- sankeyDataSource: DataSource = new DataSource({
- store: this.sankeyArray,
- map: (item) => {
- return {
- source: item[0],
- target: item[1],
- weight: item[2]
- }
- },
- paginate: false
- });
- }
- @NgModule({
- imports: [
- // ...
- DxSankeyModule
- ],
- // ...
- })
- <dx-sankey
- [dataSource]="sankeyDataSource">
- </dx-sankey>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.