<dy-statistic>
A component for displaying statistical data with support for various data types including bandwidth, traffic, decimal numbers, percentages, durations, and currency. It can show trends by comparing current and previous values, and supports customizable icons and loading states.
Example
Loading...
<dy-statistic
style=${"width: 200px; border: 1px solid; border-radius: 4px; padding: 1em;"}
.type=${"traffic"}
.icon=${icons.forward}
.text=${"Saving"}
.value=${12000}
.prevValue=${9000}></dy-statistic> <dy-statistic
style=${"width: 200px; border: 1px solid; border-radius: 4px; padding: 1em;"}
.type=${"duration"}
.text=${"Delay"}
.neutral=${"negative"}
.value=${12}
.prevValue=${9}></dy-statistic>
API
Shadow DOM; Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type | Description |
|---|---|---|---|
neutral(neutral) |
Yes | StatisticNeutral |
|
type(type) |
Yes | StatisticType |
|
texttext |
Yes | string |
@deprecated |
header(header) |
Yes | string |
|
icon |
Yes | string | Element | DocumentFragment |
|
loading(loading) |
Yes | boolean |
|
value(value) |
Yes | number |
|
prevValue(prev-value) |
Yes | number |
Other
| Type | Value |
|---|---|
| Slot | header |