Configuration

Properties

Name

Defaults

Description

datarow

0

When binding to a datatable that contains more than one row, this property specifies which row in the table to use for the binding. This is a 0 index property.

DataMap Properties

Use the datamap property to configure the data for the Count KPI. The component expects these field names in its data configuration.

Name

Defaults

Description

color

null

The CSS class name to use for the color of the API.

description

null

The description to be displayed under the numeric value

icon

null

The CSS class name(s) that will render the icon next to the label at the top of the KPI

label

null

The label to be displayed at the top the KPI

value

0

The numeric value to be displayed in the middle of the KPI

Below is an excerpt from the sample page in the Color Admin for WireBootstrap project for the Count KPI component.

const kpiProfit = new wire.colorAdmin.kpiCount().render("#kpiProfit", {
    data: this.data.dsKPI,
    datamap: { value: "Profit", color: "bg-info" },
    label: "PROFIT",
    icon: "far fa-money-bill-alt"          
});   

Note also in the example above that the component supports static settings for datamap attributes directly on the root of the configuration object. This configuration option can be used for any setting that may not need to be set dynamically based in the implementation.

Detail Properties

The following properties allow the details link at the bottom of the component to be configured.

Name

Defaults

Description

label

View Details

The label used for the details link

url

null

The URL to use when the link is selected

const kpiProfit = new wire.colorAdmin.kpiCount().render("#kpiProfit", {
   ...
   details: { label: "View Details", url: "https://server/details" }
});   

Last updated