Card

Introduction #

Card is a simple widget to show important indicator such as Month Sale, User Visits or any metrics that matter. This widget is used very much in dashboard. The KoolPHP's Card is created for this purpose.

Example:

Sample Code:

<?php
\koolreport\widgets\koolphp\Card::create(array(
    "title"=>"Month Sale",
    "value"=>11249,
    "baseValue"=>9230,
    "format"=>array(
        "value"=>array(
            "prefix"=>"$"
        )
    )
));
?>  

Trend indicator #

To show the trend indicator comparing current value with previous value, you need to enter the baseValue. The indicator on the top right will show the percentage of inclination or declination of current value compared to previous value that you enter.

Card::create(array(
    ...
    "baseValue"=>9230,
));

Calculate indicator #

By default, the indicator is calculated by percentage increased or decreased from value to baseValue. If you need to show the different between them, you can do:

Card::create(array(
    "value"=>11333,
    "baseValue"=>9230,
    "indicator"=>"different"
));

Or you may define your own function of calculation:

Card::create(array(
    "value"=>11333,
    "baseValue"=>9230,
    "indicator"=>function($value,$baseValue)
    {
        return $value-$baseValue;
    }
));

Indicator title template #

Whenever you hover your mouse to the indicator, there is a title showing this number is the result from comparison between value and baseValue. You may change this text with indicatorTitle:

Card::create(array(
    ...
    "indicatorTitle"=>"This calculation base on value of {value} and previous value of {baseValue}",
));

The {value} and {baseValue} will be replaced with real numbers.

Format number #

You can format the value as well as the indicator number

Card::create(array(
    "format"=>array(
        "value"=>array(
            "prefix"=>"$",
            "decimals"=>2,
            "thounsandSeparator"=>",",
            "decimalPoint"=>"."
        ),
        "indicator"=>array(
            "suffix"=>"%",
            "decimals"=>2,
            "thounsandSeparator"=>",",
            "decimalPoint"=>"."
        )
    )
));

Note: The format of value will used for previousNumber as well.

Format by function #

If our format number is still not enough, you may defined your own format function:

Card::create(array(
    "format"=>array(
        "value"=>function($value){
            return number_format($value);
        },
        "indicator"=>function($value)
        {
            return number_format($value);
        }
    )
));

CssStyle #

You can add css style directly to elements of the Card widget

Card::create(array (
    ...
    "cssStyle"=>array(
        "negative"=>"color:#ddd",
        "positive"=>"color:#0f0",
        "indicator"=>"font-size:16px",
        "card"=>"border-color:#999;background:yellow;",
        "value"=>"color:blue",
        "title"=>"color:green",
    )
));

CssClass #

Alternatively, you can add on css class to elements of Card widget

Card::create(array(
    ...
    "cssClass"=>array(
        "negative"=>"test-negative",
        "positive"=>"test-positive",
        "indicator"=>"test-indicator",
        "card"=>"test-card",
        "value"=>"test-value",
        "title"=>"test-title",
        "upIcon"=>"glyphicon glyphicon-heart",
        "downIcon"=>"glyphicon glyphicon-remove"
    ),
));