anu.js

<script>
    $(() => {
        const pivotGridChart = $('#pivotgrid-chart').dxChart({
            commonSeriesSettings: {
                type: 'bar',
            },
            tooltip: {
                enabled: true,
                customizeTooltip(args) {
                    return {
                        html: `${args.seriesName} | Total Invoice ${args.valueText}`,
                    };
                },
            },
            size: {
                height: 200,
            },
            adaptiveLayout: {
                width: 450,
            },
        }).dxChart('instance');

        const pivotGrid = $('#pivotgrid').dxPivotGrid({
            allowSortingBySummary: true,
            allowFiltering: true,
            showBorders: true,
            showColumnGrandTotals: true,
            showRowGrandTotals: true,
            showRowTotals: true,
            showColumnTotals: true,
            allowSorting: true,
            allowExpandAll: true,
            fieldChooser: {
                enabled: true,
                allowSearch:true,
                height: 400,
            },
            headerFilter: {
                search: {
                    enabled: true,
                },
                showRelevantValues: true,
                width: 300,
                height: 400,
            },
            fieldPanel: {
                visible: true,
            },
            dataSource: {
                fields: [{
                    caption: 'Warehouse',
                    width: 120,
                    dataField: 'warehouse',
                    area: 'row',
                    sortBySummaryField: 'Warehouse',
                }, {
                    caption: 'Store',
                    width: 150,
                    dataField: 'store',
                    area: 'row',
                }, {
                    dataField: 'keterangan',
                    dataType: 'keterangan',
                    area: 'column',
                }, {
                    groupName: 'keterangan',
                    visible: false,
                }, {
                    caption: 'Total Invoice',
                    dataField: 'total_invoice',
                    dataType: 'number',
                    summaryType: 'sum',
                    // format: { style: "currency", currency: "IDR"},
                    area: 'data',
                }],
                store: sales,
            },
        }).dxPivotGrid('instance');

        pivotGrid.bindChart(pivotGridChart, {
            dataFieldsDisplayMode: 'splitPanes',
            alternateDataFields: true,
        });

        function expand() {
            const dataSource = pivotGrid.getDataSource();
            dataSource.expandHeaderItem('row', ['Warehouse 1']);
        }

        setTimeout(expand, 0);
    });


    const sales = [{
        id: 10248,
        warehouse: 'Warehouse 1',
        store: 'Store 1',
        total_invoice: 20,
        keterangan: "Completed",
    },{
        id: 102489,
        warehouse: 'Warehouse 1',
        store: 'Store 1',
        total_invoice: 21,
        keterangan: "Completed",
    }, {
        id: 10249,
        warehouse: 'Warehouse 1',
        store: 'Store 2',
        total_invoice: 14,
        keterangan: "Not Completed",
    }, {
        id: 10250,
        warehouse: 'Warehouse 2',
        store: 'Store 3',
        total_invoice: 11,
        keterangan: "Canceled",
    }, {
        id: 10252,
        warehouse: 'Warehouse 3',
        store: 'Store 5',
        total_invoice: 4,
        keterangan: "Anomali Order, Please Check Tolakan!",
    }, {
        id: 10251,
        warehouse: 'Warehouse 2',
        store: 'Store 4',
        total_invoice: 2,
        keterangan: "Anomali Order, Please Check Order!",
    }];
</script>