KpiTile

A KPI tile for highlighting one key metric with label, value and supporting context.

Import

import { KpiTile } from "@schukai/monster/source/components/data/kpi-tile.mjs";

Source

View source code

Package

@schukai/monster

Since

4.38.0

Introduction

The Monster KpiTile presents a key performance indicator as a focused dashboard tile. Use it when one value, label and supporting context should stand out clearly in reporting or monitoring views.

When to use KpiTile

Use it for dashboard summaries: KPI tiles work well in overview boards and operational home screens.
Use it when one metric deserves visual emphasis: The tile format creates a stronger focal point than plain text.
Do not use it for dense analytical breakdowns: Detailed comparisons still belong in charts or tables.

Tile Simple

The following example shows a simple control that displays values – nothing more, nothing less.

Javascript

// import "@schukai/monster/source/components/data/kpi-tile.mjs";<script type="module">import "@schukai/monster/source/components/data/kpi-tile.mjs";</script>

HTML

<monster-kpi-tile
  data-monster-option-values-top="Sales"
  data-monster-option-values-bottom="2023"
  data-monster-option-values-main="1500,00"
  data-monster-option-values-small="USD"
>
</monster-kpi-tile>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Tile With Labels

This example uses all available value areas of the tile. The KPI stays visually dominant while the top and bottom labels add context.

Javascript

// import "@schukai/monster/source/components/data/kpi-tile.mjs";<script type="module">import "@schukai/monster/source/components/data/kpi-tile.mjs";</script>

HTML

<monster-kpi-tile
  data-monster-option-values-top="Conversion"
  data-monster-option-values-main="12,4"
  data-monster-option-values-small="%"
  data-monster-option-values-bottom="Compared to previous week"
>
</monster-kpi-tile>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The monster-kpi-tile component renders its structure inside the Shadow DOM. This keeps internal markup and styles isolated from the surrounding page and gives the tile a predictable appearance.

Value Areas

The component template is intentionally small. It exposes separate regions for the top label, main KPI, supporting unit or hint text, and a bottom caption. This allows a consistent information hierarchy without extra wrapper markup.

Customizing With Parts

You can adapt the visual appearance through exported parts instead of modifying the internal template. The component exposes these part names:

control: Outer wrapper of the tile.
top: Optional headline above the main value.
main: Primary KPI value.
divider: Divider area between the main and secondary values.
small: Supporting text such as a unit.
bottom: Additional caption below the KPI.


monster-kpi-tile::part(control) {
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
    padding: 1rem;
}

monster-kpi-tile::part(main) {
    font-size: 2rem;
    color: #153a5b;
}

HTML Structure

<monster-kpi-tile></monster-kpi-tile>

JavaScript Initialization

const element = document.createElement('monster-kpi-tile');
document.body.appendChild(element);

Exported

KpiTile

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

object

templates

templates.main

string

undefined

The main template for the KPI Tile control.

object

values

values.main

string

The main value displayed in the tile.

values.small

string

The small value displayed in the tile.

values.top

string

The top value displayed in the tile.

values.bottom

string

The bottom value displayed in the tile.

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Static methods

[instanceSymbol]()4.38.0

A KPI Tile Control

getCSSStyleSheet()

getTag()

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.