DrillDown

Overview #

DrillDown widget allows you to setup drill-down report easier than before. Compare to previous version, this version of drilldown is both simpler, faster and more flexible. Let get start with example of drilldown widget:

If in the former DrillDown we need to define common datasource for all levels, now it is much simpler that we can define separate datasource in each levels of drilldown.

By defining separate SQL statement in each levels of drilldown, we can make DrillDown run faster because drilldown does not need to load all data like before.

Also by defining SQL Query in each levels, we add flexibility in term of capability to add custom data for a specific level only. The flexibility in displaying drilldown level content is also improved by adding "content" property in which you can write your own content of drilldown level.

Code

DrillDown::create(array(
    "name"=>"saleReportByLocation"
    "title"=>"Sale By Location",
    "levels"=>array(
        array(
            //Level 1: Show all countries and sales with column chart
            "title"=>"All Countries",
            "widget"=>array(ColumnChart::class,array(
                "dataSource"=>function($params,$scope)
                {
                    return $this->src("mydata")->query("
                        SELECT country, sum(sale_amount) as amount
                        FROM tbl_orders
                        GROUP BY country
                    ");
                }
            ))
        ),
        array(
            //Level 2: Show all states and sale amount in a selected country
            "title"=>function($params,$scope){
                return params["country"];
            },
            "widget"=>array(ColumnChart::class,array(
                "dataSource"=>function($params,$scope)
                {
                    return $this->src("mydata")->query("
                        SELECT state, sum(sale_amount) as amount
                        FROM tbl_orders
                        WHERE country=:country
                        GROUP BY state
                    ")->params(array(
                        ":country"=>$params["country"]
                    ));
                }
            ))
        ),
        array(
            //Level 3; Show all cities in selected state and country
            "title"=>function($params,$scope){
                return $params["state"];
            },
            "widget"=>array(Table::class,array(
                "dataSource"=>function($params,$scope)
                {
                    return $this->src("mydata")->query("
                        SELECT city, sum(sale_amount) as amount
                        FROM tbl_orders
                        WHERE
                            country = :country
                            AND
                            state = :state
                        GROUP BY city
                    ")->params(array(
                        ":country"=>$params["country"],
                        ":state"=>$params["state"],
                    ));
                }
            ))
        ),
    )
));

Properties #

nametypedefaultdescription
namestring*Required Name of the drill down report or even process.
levelsarray* Required List of all levels for drill down report. See the level properties for more detail of settings on each level.
showLevelTitlebooltrueWhether title of each level is shown
btnBackmixedtrueBy default, the button Back will shown, give it value false you will off the Back button. This property can receive array() to customize cssClass and text of button "btnBack"=>array("text"=>"Go Back","class"=>"btn btn-default btn-warning")
cssmixedDefined css for the most important elements in the widgets, see the $css properties for more details.
cssClassmixedDefined css class for the most important elements in the widgets, see the $cssClass properties for more details.
titlestringTitle that is showed on top of drill-down report.
scopearray/functionSet the group of parameters which will be kept persistent during the ajax post back of drill-down.
clientEventsarrayRegister client-event, see client-event for more details.

CSS Properties #

nametypedefaultdescription
panelstringDefine css style for whole panel
headerstringDefine css style for header of panel
levelTitlestringDefine css style for section that holds titles of level
btnBackstringAdd css style for Back button
bodystringDefined css style for body

Examples

DrillDown::create(array(
    "css"=>array(
        "panel"=>"margin-top:15px;",
        "body"=>"padding:15px;"
        ...
    )
))

CssClass Properties #

nametypedefaultdescription
panelstringDefine css class for panel
headerstringDefine css class for header of panel
levelTitlestringDefine css class for section that holds titles of level
btnBackstringAdd css class for Back button
bodystringDefined css class for body

Examples

DrillDown::create(array(
    "cssClass"=>array(
        "panel"=>"panel-success", // Showing green panel, in Bootstrap 4 you can use "bg-success"
        "btnBack"=>"btn-info",
        ...
    )
));

Levels Properties #

"levels" is an array containing definition of each levels. On each levels we have

nametypedefaultdescription
titlestring/functionDefine the level title, you may define a anynomous function here to return correct header, the function take $params and $scope as parameters. $params contains the most recent selection of users while $scope is persistent variable for drilldown
widgetarrayContaining widget class name and widget parameters. Note: The detasources of widget must be defined in function with $params and $scope
contentfunctionA function with $params and $scope as two parameters. Base on those parameters, you may generate any custom content for level.

Note: Either "widget" or "content" should be used. If both of them are defined, "widget" will be used to render. In case you are using the "content", you have the power to control everything but you also need to write client events to call drilldown's next() function by yourself. If you are using "widget", things are simpler as the DrillDown will try to fill the client events for you. It supports the most used widgets, Table, Google Chart, ChartJs and DataGrid.

Below are two examples which has equivalent result

DrillDown::create(array(
    "levels"=>array(
        array(
            "title"=>function($params,$scope)
            {
                return "This level title";
            }
            "widget"=>array(Table::class,array(
                "dataSource"=>function($params,$scope)
                {
                    return $this->src('data')
                    ->query("select * from employees where office=:office")
                    ->params(array(
                        ":office"=>$params["office"]
                    ))
                }
            ))
        )
    )
));
DrillDown::create(array(
    "name"=>"myDrillDown",
    "levels"=>array(
        array(
            "title"=>function($params,$scope)
            {
                return "This level title";
            }
            "content"=>function($params,$scope)
            {
                Table::create(array(
                    "dataSource"=>$this->src('data')
                    ->query("select * from employees where office = :office")
                    ->params(array(
                        ":office"=>$params["office"]
                    )),
                    "clientEvents"=>array(
                        "rowClick"=>"function($params){
                            myDrillDown.next(emp_id:params.selectedRow['emp_id'])
                        }"
                    )
                ))
            }
        ),
        ...
    )
));