React Sankey - Update Data

DevExtreme DataSource

NOTE
This technique requires the key specified in the store.

To get the DataSource instance, call the Sankey's getDataSource() method:

App.vue
  • <template>
  •     <DxSankey :ref="sankeyRefKey">
  •         <!-- ... -->
  •     </DxSankey>
  • </template>
  •  
  • <script>
  • import DxSankey from 'devextreme-vue/sankey';
  •  
  • const sankeyRefKey = "my-sankey";
  •  
  • export default {
  •     components: {
  •         DxSankey
  •     },
  •     data() {
  •         return {
  •             sankeyRefKey
  •         }
  •     },
  •     methods: {
  •         getDataSource: function() {
  •             return this.sankey.getDataSource();
  •         }
  •     },
  •     computed: {
  •         sankey: function() {
  •             return this.$refs[sankeyRefKey].instance;
  •         }
  •     }
  • }
  • </script>

Then, access the underlying store with the store() method, and call the store's push(changes) method to modify data. The Sankey will be updated automatically.

JavaScript
  • getDataSource().store().push([
  •     { type: "update", key: "Oranges", data: { count: 10 } },
  •     { type: "remove", key: "Apples" }
  • ]);
See Also

JavaScript Array

Bind the dataSource property to an array using one-way binding. Now, whenever an item is added or removed from the array, the Sankey is updated accordingly.