React 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.

App.vue


<template>
     <DxSankey
        :data-source="sankeyDataSource"
    />
</template>
 
<script>
import DxSankey from 'devextreme-vue/sankey';
import DataSource from 'devextreme/data/data_source';
 
const 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 }
];
 
const sankeyDataSource = new DataSource({
    store: {
        type: 'array',
        data: sankeyData,
        onLoaded: function () {
            // Event handling commands go here
        }
    },
    paginate: false
});
 
export default {
    components: {
        DxSankey
    },
    data() {
        return {
            sankeyDataSource
        }
    }
}
</script>

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:

App.vue


<template>
     <DxSankey
        :data-source="sankeyDataSource"
    />
</template>
 
<script>
import DxSankey from 'devextreme-vue/sankey';
import DataSource from 'devextreme/data/data_source';
 
const sankeyArray = [
    [ "Brazil", "Spain", 4 ],
    [ "Brazil", "Portugal", 5 ],
    [ "Brazil", "England", 2 ],
    [ "Canada", "Portugal", 2 ],
    [ "Canada", "England", 1 ],
    [ "Mexico", "Portugal", 9 ],
    [ "Mexico", "Spain", 5 ]
];
 
const sankeyDataSource = new DataSource({
    store: {
        type: 'array',
        data: sankeyArray
    },
    map: (item) => {
        return {
            source: item[0],
            target: item[1],
            weight: item[2]
        }
    },
    paginate: false
});
 
export default {
    components: {
        DxSankey
    },
    data() {
        return {
            sankeyDataSource
        }
    }
}
</script>

React Sankey - ArrayStore

See Also