Metric Card

Metric display variants with average indicator.

Simple

Show simple Metrics Card

Bar Gauge

Show Bar Gauge Metrics Card with average indicator.

Charts

Show Metrics Card with Chart

APIs / Schnittstellendokumentation

MetricCard.Props

AttributeDescriptionTypeAccepted valuesDefault
titleCard/Metric Titlestring--
valueMetric Valuenumber--
unitMetric Unitstring--
widthCard Withstring-100%
...native propsHTMLAttributes'id', className', ...-

MetricCard.MetricCardBarGauge.Props[alias: MetricCard.BarGauge]

AttributeDescriptionTypeAccepted valuesDefault
valueMetric Valuenumber--
minMax Valuenumber-0
maxMin Valuenumber-100
averageAverage Value (for avg. indicator)number--
colorBar Gauge Colorstring-theme.palette.brand
...native propsHTMLAttributes'id', className', ...-

MetricCard.MetricCardFooter.Props[alias: MetricCard.Footer]

AttributeDescriptionTypeAccepted valuesDefault
valueMetric Valuenumber--
averageAverage Value (for avg. indicator)number--
unitMetric Unitstring--
labelTextOptional Label Textstring--
...native propsHTMLAttributes'id', className', ...-