Vue Sankey - MongoDB Service

Use the third-party devextreme-query-mongodb extension to query data from MongoDB. This extension implements data processing on a server according to the DevExtreme UI components' protocol. To access the server from the client, configure the CustomStore as described in the Custom Sources article or use the createStore method. This method is a part of the DevExtreme.AspNet.Data extension. The following code shows how to use this method:

jQuery
index.js
$(function() {
    const serviceUrl = "https://url/to/my/service";

    $("#sankeyContainer").dxSankey({
        dataSource: DevExpress.data.AspNet.createStore({
            key: ['from', 'to'],
            loadUrl: serviceUrl
        }),
        // ...
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-sankey [dataSource]="store">
    <!-- ... -->
</dx-sankey>
import { Component } from '@angular/core';
import CustomStore from 'devextreme/data/custom_store';
import { createStore } from "devextreme-aspnet-data-nojquery";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    store: CustomStore;
    constructor() {
        const serviceUrl = "https://url/to/my/service";
        this.store = createStore({
            key: ['from', 'to'],
            loadUrl: serviceUrl
        });
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxSankeyModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxSankeyModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxSankey :data-source="store">
        <!-- ... -->
    </DxSankey>
</template>

<script>
import DxSankey from 'devextreme-vue/sankey';
import { createStore } from "devextreme-aspnet-data-nojquery";

const serviceUrl = "https://url/to/my/service";

const store = createStore({
    key: ['from', 'to'],
    loadUrl: serviceUrl
});

export default {
    components: {
        DxSankey
    },
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
import Sankey from 'devextreme-react/sankey';
import { createStore } from "devextreme-aspnet-data-nojquery";

const serviceUrl = "https://url/to/my/service";

const store = createStore({
    key: ['from', 'to'],
    loadUrl: serviceUrl
});

export default function App() {
    return (
        <Sankey dataSource={store}>
            {/* ... */}
        </Sankey>
    );
}

See this series of blog posts for more information on how to use DevExtreme UI components in applications with MongoDB.