DevExtreme React - 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.
jQuery
var sankeyData = [ { 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 } ]; $(function() { $("#sankeyContainer").dxSankey({ dataSource: new DevExpress.data.DataSource({ store: { type: "array", data: sankeyData, onLoaded: function() { // Event handling commands go here } }, paginate: false }) }); });
Angular
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:
jQuery
var sankeyArray = [ [ "Brazil", "Spain", 4 ], [ "Brazil", "Portugal", 5 ], [ "Brazil", "England", 2 ], [ "Canada", "Portugal", 2 ], [ "Canada", "England", 1 ], [ "Mexico", "Portugal", 9 ], [ "Mexico", "Spain", 5 ] ]; $(function() { $("#sankeyContainer").dxSankey({ dataSource: new DevExpress.data.DataSource({ store: sankeyArray, map: function(item) { return { source: item[0], target: item[1], weight: item[2] } }, paginate: false }) }); });
Angular
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.