Data Visualisation

Vue Metric Card Component

<DomMetricCard>

A formatted measurement, explicit comparison, and optional sparkline for reporting dashboards.

Revenue, churn, and zero values

Monthly revenue

£31,200

+28.4%vs previous period

Churn rate

1.8%

-12%vs August

Failed payments

-100%vs last week

ReportingMetrics.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { DomMetricCard } from '@getdom/studio';
const revenue = [{ date: 'Apr', value: 18200 }, { date: 'May', value: 22400 }, { date: 'Jun', value: 19800 }, { date: 'Jul', value: 26800 }, { date: 'Aug', value: 24300 }, { date: 'Sep', value: 31200 }];
</script>
<template>
	<div class="grid w-full gap-4 sm:grid-cols-2 xl:grid-cols-3">
		<DomMetricCard label="Monthly revenue" :value="31200" format="currency" :change="0.284" :rows="revenue" color="chart-1" />
		<DomMetricCard label="Churn rate" :value="0.018" format="percent" :change="-0.12" trend="down-good" comparison-label="vs August" />
		<DomMetricCard label="Failed payments" :value="0" :change="-1" trend="down-good" comparison-label="vs last week" />
	</div>
</template>

Working with your data

Records stay in your application. Select events return the original row and index. Use stable series keys and explicit colours when coordinating several charts.

Explore Data Visualisation

Reference

Props

Control props

Name	Type	TS	Default	Description
`label`	string	string	'Revenue'	Metric name.
`value`	number	number	—	Current value. Null is unavailable; zero remains zero.
`format`	'number' \| 'compact' \| 'currency' \| 'percent'	string	'number'	—
`currency`	string	string	'GBP'	—
`locale`	string	string	'en-GB'	—
`change`	number	number	—	Relative change as a fraction, e.g. 0.12 for +12%. Calculated by the application.
`comparisonLabel`	string	string	'vs previous period'	—
`trend`	'up-good' \| 'down-good' \| 'neutral'	string	'up-good'	Whether an increase or decrease represents improvement.
`loading`	boolean	boolean	false	—
`rows`	array	Array<unknown>	[]	Optional sparkline records.
`xKey`	string	string	'date'	—
`valueKey`	string	string	'value'	—
`color`	string	string	'primary'	—

Auto-generated from Metric card.props and inline _edit hints.