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 #
Name | type | description |
---|---|---|
breakPoint | string | Set break point for row, default is "md" , accepting values "sm" ,"md" ,"lg" |
cssClass | string | Set css class for row |
cssStyle | string | Set 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 #
Name | type | description |
---|---|---|
type | string | Accept values "primary" ,"danger" ,"warning" ,"info" ,"secondary" ,"gray" |
cssClass | string | Set css class for panel |
header | string | Set the header title of panel |
headerCssClass | string | Set css class for header |
footer | string | Set text/html for footer |
footerCssClass | string | Set css class for footer |
Note: Those above properties follows this code rules.
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")
->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 #
Name | type | description |
---|---|---|
animation | string | Set the open animation of modal, accept values "fade" ,"none" |
centered | boolean | Set where Modal is open in center |
footer | array | List of widget to be put at bottom, normally are list of button to close or confirm action |
title | string | Set title of modal |
open | boolean | Set whether modal is open from server-side, set it to true will result in modal is open automatically at client-side |
showCloseIcon | boolean | Set whether to show the close button icon of top right of modal |
size | string | Set the size of modal, accepting values "sm" ,"md" ,"lg" |
type | string | Accept values "primary" ,"danger" ,"warning" ,"info" ,"secondary" ,"gray" |
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.
Name | description |
---|---|
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 #
Name | type | description |
---|---|---|
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.