Vue Sankey - 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 UI component requires disabled pagination to prevent data from partitioning.

jQuery
JavaScript
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
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:

jQuery
JavaScript
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
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