Containers

Overview #

The container widgets provide the layout or container for other widgets. Container is also widget so a container can be contained in another container.

Row #

Row container is the most basic layout for other widgets. KoolReport Dashboard is built based on Bootstrap so the Row container is wrapped php class for Row in bootstrap. View more about Bootstrap Grid system.

Example

use \koolreport\dashboard\containers\Row;

class IncomeBoard extends Dashboard
{
    protected function widgets()
    {
        return [
            // We would like to put IncomDetailTable adjacent to IncomeChartByMonth
            // Both of them shares half of space
            Row::create()->sub([
                IncomeChartByMonth::create()->width(1/2),
                IncomeDetailTable::create()->width(1/2)
            ])
        ];
    }
}

Properties #

Nametypedescription
breakPointstringSet break point for row, default is "md", accepting values "sm","md","lg"
cssClassstringSet css class for row
cssStylestringSet css style for row

Note: Those above properties follows this code rules.

Panel #

Panel provide a separate section to display inner widgets

Example:

use \koolreport\dashboard\containers\Panel;

class IncomeBoard extends Dashboard
{
    protected function widgets()
    {
        return [
            //We would like to put IncomeChart inside a panel.
            Panel::create()->header("Income Chart")->type("primary")->sub([
                IncomeChartByMonth::create(),
            ])
        ];
    }
}

Properties #

Nametypedescription
typestringAccept values "primary","danger","warning","info","secondary","gray"
cssClassstringSet css class for panel
headerstringSet the header title of panel
headerCssClassstringSet css class for header
footerstringSet text/html for footer
footerCssClassstringSet css class for footer

Note: Those above properties follows this code rules.

Modal can help widgets hide from view and show them when needed.

Example:

use \koolreport\dashboard\containers\Modal;

class IncomeBoard extends Dashboard
{
    protected function widgets()
    {
        return [
            Button::create()->text("Open Modal")->onClick(function(){
                return Modal::show("myModal")
            }),

            Modal::create("myModal")
            ->title("Income Status")
            ->showCloseIcon(true)
            ->type("primary")
            ->size("md")
            ->open(false)
            ->centered(false)
            ->footer([
                Button::create()->text("Cancel")->onClick(function(){
                    return Modal::hide("myModal");
                })
            ])
            ->animation("fade")
        ];
    }
}
Nametypedescription
animationstringSet the open animation of modal, accept values "fade","none"
centeredbooleanSet where Modal is open in center
footerarrayList of widget to be put at bottom, normally are list of button to close or confirm action
titlestringSet title of modal
openbooleanSet whether modal is open from server-side, set it to true will result in modal is open automatically at client-side
showCloseIconbooleanSet whether to show the close button icon of top right of modal
sizestringSet the size of modal, accepting values "sm","md","lg"
typestringAccept values "primary","danger","warning","info","secondary","gray"

Note: Those above properties follows this code rules.

There are two built-in static functions to control open and close of Modal at client-side, this static function will return javascript code. You can use those static function inside onClick() of Button widget to open/close Modal.

Namedescription
show(string $name)Return javascript function to open Modal with specific name
hide(string $name)Return javascript function to hide Modal with specific name

Example:

Button::create()->text("Open Modal")
->onClick(function(){
    return Modal::show("myModal");
})


Button::create()->text("Open Modal")
->onClick(function(){
    return Modal::hide("myModal");
})

Tabs #

Tabs is another useful container which you can use to organize your widgets.

Example:

use \koolreport\dashboard\containers\Tabs;

class MyDashboard extends Dashboard
{
    protected function widgets()
    {
        return [
            Tabs::create()
            ->addTab("Income",[
                IncomeColumnChart::create(),
                IncomeDetailTable::create(),
            ],true)
            ->addTab("Tax",[
                TaxSummary::create(),
                TaxTable::create(),
            ])
        ];
    }
}

Methods #

Nametypedescription
addTab(string $text, array $subs[, bool $active])Add a tab to tabs collection, $text is the name of tab (accept html), $subs is array of widgets you want to put inside tab and optional $active if you want to set the tab active

Inline #

Inline is an simple containers that used to put widget adjacent to each other without making new line

Example:

use \koolreport\dashboard\containers\Inline;

class MyDashboard extends Dashboard
{
    protected function widgets()
    {
        return [
            Inline::create()->sub([
                Text::create()->text("We use"),
                Text::create()->text("Inline"),
                Text::create()->text("to remove breakline"),
            ])
        ];
    }
}

Get started with KoolReport

KoolReport will help you to construct good php data report by gathering your data from multiple sources, transforming them into valuable insights, and finally visualizing them in stunning charts and graphs.