Widget thống kê

Các widget thống kê cho dashboard: InfoBox có icon và chân thẻ, StatBox có xu hướng và thanh tiến trình, ColorBox và StatsRow cho các con số chính.

InfoBox, StatBox, ColorBox, StatsRow

InfoBox, StatBox, ColorBox, StatsRow

Vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-md-6 thl-col-lg-3"><ThlInfoBox icon="circle-check" value="154" title="Orders" color="primary" /></div>
  <div class="thl-col-12 thl-col-md-6 thl-col-lg-3"><ThlInfoBox icon="message-square" value="68" title="Comments" color="danger" filled /></div>
  <div class="thl-col-12 thl-col-md-6 thl-col-lg-3"><ThlStatBox title="Revenue" value="$9,345" icon="dollar-sign" color="success" trend="up" delta="+12%" :progress="72" /></div>
  <div class="thl-col-12 thl-col-md-6 thl-col-lg-3"><ThlColorBox color="purple" icon="users" label="New clients" value="581" /></div>
  <div class="thl-col-12"><ThlCard><ThlStatsRow :items="[{ label: 'Sales', value: '12,545' }, { label: 'Orders', value: '2,135' }, { label: 'Revenue', value: '$98,760' }]" /></ThlCard></div>
</div>

React

<InfoBox icon="circle-check" value="154" title="Orders" footer={<>Target <Label color="success" rounded>300</Label></>} />
<StatBox title="Revenue" value="$9,345" icon="dollar-sign" color="success" trend="up" delta="+12%" progress={72} />
<ColorBox color="purple" icon="users" label="New clients" value="581" />
<StatsRow items={[{ label: 'Sales', value: '12,545' }, { label: 'Orders', value: '2,135' }]} />

Angular

<thl-info-box icon="circle-check" value="154" title="Orders" />
<thl-stat-box title="Revenue" value="$9,345" icon="dollar-sign" color="success" trend="up" delta="+12%" [progress]="72" />
<thl-color-box color="purple" icon="users" label="New clients" value="581" />
<thl-stats-row [items]="[{ label: 'Sales', value: '12,545' }]" />

API

InfoBox

<ThlInfoBox> · import { ThlInfoBox } from '@thl-ui/vue'

Prop	Kiểu	Mặc định
icon	string	—
value	any	—
title	string	—
color	string	"primary"
filled	boolean	—
soft	boolean	—

Slot: footer

StatBox

<ThlStatBox> · import { ThlStatBox } from '@thl-ui/vue'

Prop	Kiểu	Mặc định
title	string	—
value	any	—
icon	string	—
color	string	"primary"
trend	string	—
delta	string	—
progress	number	—

Slot: default

ColorBox

<ThlColorBox> · import { ThlColorBox } from '@thl-ui/vue'

Prop	Kiểu	Mặc định
color	string	"primary"
icon	string	—
label	string	—
value	any	—

Slot: default

StatsRow

<ThlStatsRow> · import { ThlStatsRow } from '@thl-ui/vue'

Prop	Kiểu	Mặc định
items*	array	—