React Funnel - ArrayStore

If you want to extend the functionality of a JavaScript array, place it into an ArrayStore. It provides an interface for loading and editing data, and allows you to handle data-related events.

jQuery
index.js
const fruits = [
    { fruit: 'Apples', count: 10 },
    { fruit: 'Oranges', count: 12 },
    { fruit: 'Lemons', count: 15 },
    { fruit: 'Pears', count: 20 },
    { fruit: 'Pineapples', count: 3 }
];

$(function() {
    $("#funnelContainer").dxFunnel({
        dataSource: new DevExpress.data.DataSource({
            store: {
                type: 'array',
                data: fruits,
                onLoaded: function () {
                    // Event handling commands go here
                }
            },
            paginate: false
        }),
        argumentField: 'fruit',
        valueField: 'count'
    });
});
Angular
app.component.ts
app.component.html
app.module.ts
import { Component } from '@angular/core';
import DataSource from 'devextreme/data/data_source';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    fruits = [
        { fruit: 'Apples', count: 10 },
        { fruit: 'Oranges', count: 12 },
        { fruit: 'Lemons', count: 15 },
        { fruit: 'Pears', count: 20 },
        { fruit: 'Pineapples', count: 3 }
    ];
    funnelDataSource = new DataSource({
        store: {
            type: 'array',
            data: this.fruits,
            onLoaded: function () {
                // Event handling commands go here
            }
        },
        paginate: false
    });
}
<dx-funnel
    [dataSource]="funnelDataSource"
    argumentField="fruit"
    valueField="count">
</dx-funnel>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxFunnelModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFunnelModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
     <DxFunnel
        :data-source="funnelDataSource"
        argument-field="fruit"
        value-field="count"
    />
</template>

<script>
import DxFunnel from 'devextreme-vue/funnel';
import DataSource from 'devextreme/data/data_source';

const fruits = [
    { fruit: 'Apples', count: 10 },
    { fruit: 'Oranges', count: 12 },
    { fruit: 'Lemons', count: 15 },
    { fruit: 'Pears', count: 20 },
    { fruit: 'Pineapples', count: 3 }
];

const funnelDataSource = new DataSource({
    store: {
        type: 'array',
        data: fruits,
        onLoaded: function () {
            // Event handling commands go here
        }
    },
    paginate: false
});

export default {
    components: {
        DxFunnel
    },
    data() {
        return {
            funnelDataSource
        }
    }
}
</script>
React
App.js
import Funnel from 'devextreme-react/funnel';
import DataSource from 'devextreme/data/data_source';

const fruits = [
    { fruit: 'Apples', count: 10 },
    { fruit: 'Oranges', count: 12 },
    { fruit: 'Lemons', count: 15 },
    { fruit: 'Pears', count: 20 },
    { fruit: 'Pineapples', count: 3 }
];

const funnelDataSource = new DataSource({
    store: {
        type: 'array',
        data: fruits,
        onLoaded: function () {
            // Event handling commands go here
        }
    },
    paginate: false
});

export default function App() {
    return (
        <Funnel
            dataSource={funnelDataSource}
            argumentField="fruit"
            valueField="count"
        />
    );
}

As you may notice, in the previous code, the ArrayStore is not declared explicilty. Instead, it is wrapped in the DataSource instance. That is because the Funnel requires pagination to be off in order to prevent data from partitioning. Other than that, the DataSource provides wide data-processing capabilities. For example, it can map objects from the array that underlies the ArrayStore, as shown in the following code.

jQuery
index.js
const fruits = [
    { apples: 10 },
    { oranges: 12 },
    { lemons: 15 },
    { pears: 20 },
    { pineapples: 3 }
];

$(function() {
    $("#funnelContainer").dxFunnel({
        dataSource: new DevExpress.data.DataSource({
            store: {
                type: 'array',
                data: fruits
            },
            map: function (item) {
                const fruitName = Object.keys(item)[0];
                return {
                    fruit: fruitName.charAt(0).toUpperCase() + fruitName.slice(1),
                    count: item[fruitName]
                }
            },
            paginate: false
        }),
        argumentField: 'fruit',
        valueField: 'count'
    });
});
Angular
app.component.ts
app.component.html
app.module.ts
import { Component } from '@angular/core';
import DataSource from 'devextreme/data/data_source';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    fruits = [
        { apples: 10 },
        { oranges: 12 },
        { lemons: 15 },
        { pears: 20 },
        { pineapples: 3 }
    ];
    funnelDataSource = new DataSource({
        store: {
            type: 'array',
            data: this.fruits
        },
        map: function (item) {
            const fruitName = Object.keys(item)[0];
            return {
                fruit: fruitName.charAt(0).toUpperCase() + fruitName.slice(1),
                count: item[fruitName]
            }
        },
        paginate: false
    });
}
<dx-funnel
    [dataSource]="funnelDataSource"
    argumentField="fruit"
    valueField="count">
</dx-funnel>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxFunnelModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFunnelModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
     <DxFunnel
        :data-source="funnelDataSource"
        argument-field="fruit"
        value-field="count"
    />
</template>

<script>
import DxFunnel from 'devextreme-vue/funnel';
import DataSource from 'devextreme/data/data_source';

const fruits = [
    { apples: 10 },
    { oranges: 12 },
    { lemons: 15 },
    { pears: 20 },
    { pineapples: 3 }
];

const funnelDataSource = new DataSource({
    store: {
        type: 'array',
        data: fruits
    },
    map: function (item) {
        const fruitName = Object.keys(item)[0];
        return {
            fruit: fruitName.charAt(0).toUpperCase() + fruitName.slice(1),
            count: item[fruitName]
        }
    },
    paginate: false
});

export default {
    components: {
        DxFunnel
    },
    data() {
        return {
            funnelDataSource
        }
    }
}
</script>
React
App.js
import Funnel from 'devextreme-react/funnel';
import DataSource from 'devextreme/data/data_source';

const fruits = [
    { apples: 10 },
    { oranges: 12 },
    { lemons: 15 },
    { pears: 20 },
    { pineapples: 3 }
];

const funnelDataSource = new DataSource({
    store: {
        type: 'array',
        data: fruits
    },
    map: function (item) {
        const fruitName = Object.keys(item)[0];
        return {
            fruit: fruitName.charAt(0).toUpperCase() + fruitName.slice(1),
            count: item[fruitName]
        }
    },
    paginate: false
});

export default function App() {
    return (
        <Funnel
            dataSource={funnelDataSource}
            argumentField="fruit"
            valueField="count"
        />
    );
}
NOTE
Even if you have passed a JavaScript array to the dataSource property, the Funnel automatically places it into an ArrayStore wrapped into the DataSource that you can get with the getDataSource() method.
See Also