ProgressCard

Overview #

ProgressCard is a beautiful card useful to show the progress or percent of completion compared to the goal.

Sample Code #

<?php
\koolreport\amazing\ProgressCard::create(array(
    "title"=>"April 2018",
    "infoText"=>"The sale on April 2018 has completed {indicatorValue} of revenue target.",
    "value"=>7500,
    "preset"=>"info",
    "baseValue"=>10000,
    "format"=>array(
        "value"=>array(
            "prefix"=>"$"
        ),
        "indicator"=>array(
            "decimals"=>0
        )
    ),
    "cssClass"=>array(
        "icon"=>"fa fa-euro"
    ),
));
?>

Properties #

Name	type	default	description
`title`	string		The title of the card
`infoText`	string		The title of the card
`value`	number		The value that you need to show
`baseValue`	number		The base value used to calculate indicator
`format`	array		Contain settings for formatting the value
`preset`	string	`"primary"`	The preset appearance for card, accept `"primary"`, `"info"`, `"warning"`, `"danger"`
`cssClass`	array		Contain settings for css class
`cssStyle`	array		Contain settings for css style
`indicator`	array		Settings for indicator
`href`	string/function		Set an url or an action for card when it is clicked

Format #

There are number of settings to format the value and indicator of card:

ProgressCard::create(array(
    ...
    "format"=>array(
        "value"=>array(
            "decimals"=>2,              // Number of decimals to show
            "decimalPoint"=>".",        // Decimal point character 
            "thounsandSeparator"=>",",  // Thousand separator
            "prefix"=>"$",              // Prefix
            "suffix"=>"USD"             // Suffix
        ),
        "indicator"=>array(
            "decimals"=>2,              // Number of decimals to show
            "decimalPoint"=>".",        // Decimal point character 
            "thounsandSeparator"=>",",  // Thousand separator
            "prefix"=>"$",              // Prefix
            "suffix"=>"USD"             // Suffix
        ),
    )
))

cssClass #

There are number of sub settings for cssClass:

Name	type	description
`card`	string	Set extra css class for card
`title`	string	Set css class for title
`infoText`	string	Css class for card infoText
`value`	string	Set css class for value
`icon`	string	Set css class for icon
`progress`	string	Set css class for progress bar

Example:

ProgressCard::create(array(
    "cssClass"=>array(
        "card"=>"my-own-card-class",
        "tittle"=>"font-bold",
        "value"=>"big-font",
        "icon"=>"fa fa-dollar"
    )
));

Notice: The "icon" property can be used to set the icon using font-awesome or simpleline icon.

cssStyle #

Alternative to set the cssClass, you may directly set the css style to the card element:

Name	type	description
`card`	string	Css style for card
`title`	string	Css style for card title
`infoText`	string	Css style for card infoText
`value`	string	Css style for card value
`icon`	string	Css style for card icon
`progress`	string	Set css style for progress bar

Example:

    <?php
    \koolreport\amazing\ProgressCard::create(array(
        "title"=>"April 2018",
        "infoText"=>"The sale on April 2018 has completed {indicatorValue} of revenue target.",
        "value"=>7500,
        "preset"=>"info",
        "baseValue"=>10000,
        "format"=>array(
            "value"=>array(
                "prefix"=>"$"
            ),
            "indicator"=>array(
                "decimals"=>0
            )
        ),
        "cssClass"=>array(
            "icon"=>"fa fa-euro"
        ),
    ));
    ?>

Indicator #

Name	type	default	description
`method`	string/function		The method to used to calculate indicator, it accept string and anonymous function. Allow values are `"percentChange"`, `"percentComplete"`, `"different"` or custom function `function($value,$baseValue){}`. Inside custom function, you should return the calculated value of indicator
`title`	string	"Compared to {baseValue}"	Title of the indicator
`threshold`	number	0	The positive indicator will be active if indicator value is greater than threshold

Example:

ProgressCard::create(array(
    "indicator"=>array(
        "method"=>"perentChange",
        "title"=>"Compared to {baseValue}",
        "threshold"=>50,
    )
));

ProgressCard::create(array(
    "indicator"=>array(
        "method"=>function($value,$baseValue){
            return ($value-$baseValue)*100/$baseValue;
        },
    )
));

href #

Set a url link #

The same as you set href in an <a> element in html, you may set "href" property for the ProgressCard so that users will be directed to new url location when they click the card. This is extremely useful when you want to show details of data to user after view the summarization on card.

ProgressCard::create(array(
    "href"=>"http://example.com/defails"
));

Set a javascript function #

ProgressCard::create(array(
    "href"=>"function(){
        alert('click on card');
    }"
));

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.