• Overview
• Properties
  • CSS Properties
  • CssClass Properties
  • Levels Properties

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 #

CSS Properties #

Examples

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

CssClass Properties #

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

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'])
                        }"
                    )
                ))
            }
        ),
        ...
    )
));