Extjs pivotgrid's depth data structure

Question

Firstly take a look at the data I'm trying to show on the pivotgrid:https://api.myjson.com/bins/1a46si, as you can see the items should be nested based on "L1~L8", and the value it should display on the aggregate is the "SUM". As an example, a "L1" item will have a value on L1, but L2~L8 will be empty, and its sum value is the sum of all its "children" (this calc is already being sent from the server, so the pivot grid only need to show it).

Right now im doing it like this:

        {
        xtype: 'pivotgrid',
        scrollable: 'both',
        matrix: {
            compactViewColumnWidth: 600,
            textGrandTotalTpl: 'Value',
            textRowLabels: 'Name',
            viewLayoutType: 'compact',
            store: 'myPivotStore',
            leftAxis: [
                {
                    dataIndex: 'NAME_L1'
                },
                {
                    dataIndex: 'NAME_L2'
                },
                {
                    dataIndex: 'NAME_L3'
                },
                {
                    dataIndex: 'NAME_L4'
                },
                {
                    dataIndex: 'NAME_L5'
                },
                {
                    dataIndex: 'NAME_L6'
                },
                {
                    dataIndex: 'NAME_L7'
                },
                {
                    dataIndex: 'NAME_L8'
                }
            ],
            aggregate: {
                dataIndex: 'SUM'
            }
        }
    }

The problem is that the pivot grid is showing these data that don't have any value on L2~L8 as '(blank)', another problem is the aggregate summing its children, I already tried to get the SUM value of the record with a custom aggregator but I can't find the right record which corresponds to the current aggregate.

fiddle example: https://fiddle.sencha.com/#view/editor&fiddle/2qrf

Image result:

Do I need to change the way I'm mapping the model? Sorry if I wasn't clear enough.