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 configuration property to configure the data for the Compare KPI. The component expects these field names in its data configuration.

Name	Defaults	Description
value	0	The numeric value to be displayed in the KPI
label	null	The label to be displayed at the top of the KPI
cssIcon	null	The CSS class name(s) that will render the icon next to the label at the top of the KPI
valueChange	0	The change value at the bottom of the KPI. This is a benchmark value against which the value is compared.
lblChange	null	The label for the change or benchmark value
goodChange	true	Boolean that determines whether the valueChange compared to the value is positive.

Below is an excerpt from the sample page in the Gentelella for WireBootstrap project for the Compare KPI component. Note, goodChange is not specified so in this example, it will default to true.

const kpi = new wire.gentelella.kpiCompare().render("#kpi", {
   ...
   cssIcon: "fa fa-trophy",
   lblChange: "Sales From Last Week",
   datamap: {value: "Sales", label: "Product", valueChange: "SalesOverLastWeek" }
});

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.