SimpleCard

Overview #

GaugeCard is a beautiful card useful to show the progress or percent of completion compared to the goal. The card use an impressive gauge chart to show result.

Sample Code #

    <?php
    \koolreport\amazing\GaugeCard::create(array(
        "title"=>"Revenue",
        "value"=>7500,
        "preset"=>"success",
        "baseValue"=>10000,
        "format"=>array(
            "value"=>array(
                "prefix"=>"$"
            )
        )
    ));
    ?>

Properties #

Nametypedefaultdescription
titlestringThe title of the card
valuenumberThe value that you need to show
formatarrayContain settings for formatting the value
presetstring"primary"The preset appearance for card, accept "primary", "info", "warning", "danger"
cssClassarrayContain settings for css class
cssStylearrayContain settings for css style
indicatorarraySettings for indicator
gaugearraySettings for indicator

Format #

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

SimpleCard::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:

Nametypedefaultdescription
cardstringSet extra css class for card
titlestringSet css class for title
valuestringSet css class for value
iconstringSet css class for icon

|indicator|string||Set css class for icon| |upIcon|string||Set css class for icon| |downIcon|string||Set css class for icon| |positive|string||Set css class for icon| |negative|string||Set css class for icon|

Example:

SimpleCard::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:

Nametypedefaultdescription
cardstringCss style for card
titlestringCss style for card title
valuestringCss style for card value
iconstringCss style for card icon
indicatorstringSet css style for indicator group
positivestringSet css style for positive indicator value
negativestringCss for negative indicator value

Example:

<?php
\koolreport\amazing\GaugeCard::create(array(
    "title"=>"Revenue",
    "value"=>7500,
    "preset"=>"success",
    "baseValue"=>10000,
    "format"=>array(
        "value"=>array(
            "prefix"=>"$"
        )
    ),
    "withoutLoader"=>true,
));
?>

Indicator #

Nametypedefaultdescription
methodstring/functionThe 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
titlestring"Compared to {baseValue}"Title of the indicator
thresholdnumber0The positive indicator will be active if indicator value is greater than threshold

Example:

GaugeCard::create(array(
    "indicator"=>array(
        "method"=>"perentChange",
        "title"=>"Compared to {baseValue}",
        "threshold"=>50,
    )
));
GaugeCard::create(array(
    "indicator"=>array(
        "method"=>function($value,$baseValue){
            return ($value-$baseValue)*100/$baseValue;
        },
    )
));

Gauge chart settings #

You may put extra settings for gauge chart

GaugeCard::create(array(
    ...
    "gauge"=>array(
        "angle"=> 0.15, // The span of the gauge arc
        "lineWidth"=> 0.44, // The line thickness
        "radiusScale"=> 1, // Relative radius
        "pointer"=> array(
            "length": 0.6, // // Relative to gauge radius
            "strokeWidth": 0.035, // The thickness
            "color": '#000000' // Fill color
        ),
        "limitMax"=> false,     // If false, max value increases automatically if value > maxValue
        "limitMin"=> false,     // If true, the min value of the gauge will be fixed
        "colorStart"=> '#6FADCF',   // Colors
        "colorStop"=> '#8FC0DA',    // just experiment with them
        "strokeColor"=> '#E0E0E0',  // to see which ones work best for you
        "generateGradient"=> true,
        "highDpiSupport"=> true,     // High resolution support
    )
));