MetricCard presents one dashboard number.

Public API

Function	ui.MetricCard
Props	ui.MetricCardProps
Use for	Dashboard metrics, counters, and summarized state.

Example

Go API

import (
  gx "github.com/busdk/bus-gx/pkg/gx"
  ui "github.com/busdk/bus-ui/pkg/ui"
)

node := ui.MetricCard(ui.MetricCardProps{
  Title:  "Ready files",
  Value:  "12",
  Detail: "3 waiting for review",
  Status: ui.MetricCardStatusSuccess,
})

html, err := gx.RenderHTML(node)

In .gx source, a direct wrapper can set the fixed status value while exposing the readable fields as attributes.

In .gx source, a metric card is compact article markup with label and value props.

.gx source

package surfaceui

import gx "github.com/busdk/bus-gx/pkg/gx"

type MetricCardProps struct {
  Label string
  Value string
}

func MetricCard(props MetricCardProps) gx.Node {
  return <article class="metric-card">
  <p><Text value={props.Label}></Text></p>
  <strong><Text value={props.Value}></Text></strong>
</article>
}

var metric = <MetricCard label={"Accepted rows"} value={"12"}></MetricCard>