Dashboards & KPIs Shortcodes

Telemetry and executive analytics components including KPI metric cards, metric progress bars, status item matrices, and responsive dashboard grids.

Read Time: 2 min

The Hugo Carbon dashboard suite enables authors to construct responsive operational monitoring consoles, performance telemetry views, and status overview portals directly in Markdown.

1. KPI Metric Cards (dashboard-kpi)

The dashboard-kpi shortcode presents individual indicators with large numeric figures, trend indicators, delta percentages, and contextual badges.

Parameters

ParameterTypeDefaultDescription
titleStringRequiredMetric label
valueStringRequiredPrimary numerical figure
unitStringOptionalUnit suffix (e.g. ms, %, MB)
deltaStringOptionalChange magnitude (e.g. +14.2%)
trendString"neutral"Trend direction (up, down, neutral)
statusStringOptionalStatus badge label
statusColorString"blue"Tag colorway

Example

Origin Response Time
48ms
down
Cache Hit Ratio
99.4%
up
Bandwidth Reduction
3.2TB
up
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div class="cds--row">
  <div class="cds--col-sm-4 cds--col-md-4 cds--col-lg-4">
    {{< dashboard-kpi title="Origin Response Time" value="48" unit="ms" delta="-12%" trend="down" status="Optimal" statusColor="green" >}}
  </div>
  <div class="cds--col-sm-4 cds--col-md-4 cds--col-lg-4">
    {{< dashboard-kpi title="Cache Hit Ratio" value="99.4" unit="%" delta="+0.8%" trend="up" status="Healthy" statusColor="green" >}}
  </div>
  <div class="cds--col-sm-4 cds--col-md-4 cds--col-lg-4">
    {{< dashboard-kpi title="Bandwidth Reduction" value="3.2" unit="TB" delta="+24%" trend="up" status="Active" statusColor="blue" >}}
  </div>
</div>

2. Metric Progress Bars (dashboard-metric-bar)

The dashboard-metric-bar displays capacity, completion, or resource consumption against target limits.

Parameters

ParameterTypeDefaultDescription
labelStringRequiredMetric title
valueNumberRequiredCurrent metric value
maxNumber100Maximum possible value
unitString"%"Unit label
statusString"active"Visual status state (active, finished, error)

Example

Static Storage Quota 34%
Memory Consumption 78%
CDN Edge Cache Fill 96%

1
2
3

{{< dashboard-metric-bar label="Static Storage Quota" value="34" max="100" unit="%" status="active" >}}
{{< dashboard-metric-bar label="Memory Consumption" value="78" max="100" unit="%" status="active" >}}
{{< dashboard-metric-bar label="CDN Edge Cache Fill" value="96" max="100" unit="%" status="finished" >}}

3. Status Matrix (dashboard-status-matrix)

The dashboard-status-matrix presents operational health across distributed subsystems or service clusters.

Example

DNS Resolution (Anycast)
Operational
Hugo Pipes Asset Engine
Operational
Web Worker CSV Pipeline
Operational
MapLibre GL Vector Engine
Operational
1
2
3
4
5
6

{{< dashboard-status-matrix title="Edge Service Availability Matrix" >}}
  {{< dashboard-status-item name="DNS Resolution (Anycast)" status="Operational" statusColor="green" metric="100% SLA" >}}
  {{< dashboard-status-item name="Hugo Pipes Asset Engine" status="Operational" statusColor="green" metric="Zero Failures" >}}
  {{< dashboard-status-item name="Web Worker CSV Pipeline" status="Operational" statusColor="green" metric="18ms latency" >}}
  {{< dashboard-status-item name="MapLibre GL Vector Engine" status="Operational" statusColor="green" metric="60 FPS" >}}
{{< /dashboard-status-matrix >}}