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.

TypeScript
HTML
  • 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:

TypeScript
HTML
  • 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