• Overview
• Row
  • Properties
• Panel
  • Properties
  • Short-hand static function
• Modal
  • Properties
  • Methods
• Tabs
  • Methods
• Inline
• Html
  • Methods
  • Usage

---

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 #

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 #

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 widgets()
    {
        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 #

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

Properties #

Note: Those above properties follows this code rules.

Methods #

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.

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 #

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 widgets()
    {
        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 widgets()
    {
        return [
            Html::h1("My dashboard"),
            Html::div([
                Html::span("A bold text")->style("font-weight:bold"),
                Html::i()->class("fa fa-users"),
            ])
        ];
    }
}

Methods #

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;
});