jQuery 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
index.js
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 }
];
$(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>Vue
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>React
App.js
import Sankey from 'devextreme-react/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 function App() {
return (
<Sankey
dataSource={sankeyDataSource}
/>
);
}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
const 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>Vue
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
App.js
import Sankey from 'devextreme-react/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 function App() {
return (
<Sankey
dataSource={sankeyDataSource}
/>
);
}See Also
Feedback