Widget thống kê

Các widget thống kê cho dashboard.

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	—