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 content()
    {
        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
subarraySet list of sub widgets
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 content()
    {
        return [
            //We would like to put IncomeChart inside a panel.
            Panel::create()->header("Income Chart")->type("primary")->sub([
                IncomeChartByMonth::create(),
            ])
        ];
    }
}

Properties #

Nametypedescription
subarraySet list of sub widgets
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
menuarrayProvide list of menu items for panel
menuIconarraySet menu icon, default is "fas fa-chevron-circle-down"

Note: Those above properties follows this code rules.

More example:

use \koolreport\dashboard\Dashboard;
use \koolreport\dashboard\containers\Panel;
use \koolreport\dashboard\menu\MenuItem;

class SaleBoard extends Dashboard
{
    protected function content()
    {
        return [
            Panel::create()
            ->header("Panel title")
            ->type("info")
            ->sub([
                SaleColumnChart::create()
            ])
            ->menuIcon("fas fa-chevron-circle-down")
            ->menu([
                "Show details"=>MenuItem::create()
                                ->onClick(Client::widget("SaleColumnChart")->showDetail()),
                "Simple link"=>MenuItem::create()
                    ->href("https://www.anywebsite.com")
                    ->target("_blank"),

                "With Icon and Badge"=>MenuItem::create()
                    ->href("https://www.example.com")
                    ->icon("fa fa-book")
                    ->badge(["NEW","danger"]),
                
                "Execute javascript"=>MenuItem::create()
                    ->onClick("alert('hola')"),
                
                "Load Dashboard"=>MenuItem::create()
                    ->onClick(Client::dashboard("MarketingBoard")->load()),

                "Disabled Item"=>MenuItem::create()->disabled(true),

            ])
        ];
    }
}

Short-hand static function #

The short-hand make you create faster Panel with type.

Panel::primary([
    LineChart::create();
]);

Panel::success([
    LineChart::create();
]);

...

The panel support primary(), info(), success(), danger(), warning(), secondary() methods.

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

Example:

use \koolreport\dashboard\containers\Modal;

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

            Modal::create("myModal")
            ->sub([
                MyTable::create()
            ])
            ->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
subarraySet list of sub widgets
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"
onShowstringGet/set the client-side javascript to run when Modal is about to show
onShownstringGet/set the client-side javascript to run when Modal is fully shown
onHidestringGet/set the client-side javascript to run when Modal is about to hide
onHiddenstringGet/set the client-side javascript to run when Modal is fully hidden

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 content()
    {
        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
add($tab)Add a tab
cssStyleGet/set css style of Tabs
cssClassGet/set css class of Tabs

Advanced example to add tab

return [
    Tabs::create()
        ->add(
            Tabs::tab([
                IncomeColumnChart::create(),
                IncomeDetailTable::create(),
            ])
            ->title("Income")
            ->icon("fa fa-dollar")
            ->onShow("console.log('show')")
            ->onShown("console.log('shown')")
            ->onHide("console.log('hide')")
            ->onHidden("console.log('hidden')")
        )
];

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;
use \koolreport\dashboard\widgets\Text;

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

Html #

Html is a special wrapper for all html elements. You can use Html to create any elements that you like. Here is an example of how to add Html to your dashboard:

Example:

<?php

use \koolreport\dashboard\Dashboard;
use \koolreport\dashboard\containers\Html;

class MyDashboard extends Dashboard
{
    protected function content()
    {
        return [
            Html::h1("My dashboard"),
            Html::div([
                Html::span("A bold text")->style("font-weight:bold"),
                Html::i()->class("fa fa-users"),
            ])
        ];
    }
}

Methods #

Namedescription
static create(string $tag)A static function to create any html tag
attr()Return all attributes of html in associate array
attr(string $key)Return value of attribute with $key
attr(array $list)Assign attribute list
attr(string $key, mixed $value)Assign $value to attribute with $key
attr(string $key, function $func)Provide an anonymous function to calculate the value for attribute $key
sub()Return all subordinate elements
sub(array $childs)Assign subordinate elements
sub(string $text)Add text to subordinate list
sub(function $func)Provide anonymous function that provides list of sub elements
raw(bool $isRaw)Set whether text inside tag render as raw html or text
raw()Return whether text is rendered as raw html

Usage #

Simple usage to create tag, Html will take function name as the tag name

Html::div()

If your tag is customized and could not represent by function name, use create() method

Html::create("custom-tag")

Create a tag with any attributes

Html::div()->style("width:100px;height:50px;")->class("amazing")

Alternatively, you can use attr() method to set attributes with any custom attribute name

Html::div()
->attr("style","width:100px")
->attr("class","amazing")

Or you can set attributes by array

Html::div()
->attr([
    "style"=>"width:100px",
    "class"=>"amazing"
])

Adding sub elements, you do:

Html::div([
    Html::span("text")
]);

Or you can use sub() method to add sub elements:

Html::div()->sub([
    Html::span("text")
]);

A versatile way to create element:

Html::create("love-tag")
->attr([
    "style"=>"width:100px",
    "class"=>"amazing",
])
->sub([
    Html::i()->class("fa fa-heart"),
    "I love you"
])

By default, text input into tag will be escaped. If you want the text to rendered as raw html, you do:

Html::div("<b>Render in bold</b>")->raw(true)

Html is very flexible, you can use function to return sub elements

$ul = Html::ul(function(){
    $lis = [];
    for($i=0;$i<3;$i++) {
        array_push($lis, Html::li("Item $i"));
    }
    return $lis;
});

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.