Vue Statistics Card - Argon

PRO

The Statistics Cards components helps you to simply create a beautiful card displaying data in an interesting way.

Mini Statistics Card

Today's Money

$53,000

+55% since yesterday

<template>
  <mini-statistics-card
   title="Today's Money"
   value="$53,000"
   description="<span
    class='text-sm font-weight-bolder text-success'
    >+55%</span> since yesterday"
   :icon="{
    component: 'ni ni-money-coins',
    background: 'bg-gradient-primary',
    shape: 'rounded-circle'
  }"
/>
</template>

<script>
import MiniStatisticsCard from '@/examples/Cards/MiniStatisticsCard.vue";
export default {
 components: {
    MiniStatisticsCard,
   },
 };
</script>

1<template>
2  <mini-statistics-card
3   title="Today's Money"
4   value="$53,000"
5   description="<span
6    class='text-sm font-weight-bolder text-success'
7    >+55%</span> since yesterday"
8   :icon="{
9    component: 'ni ni-money-coins',
10    background: 'bg-gradient-primary',
11    shape: 'rounded-circle'
12  }"
13/>
14</template>
15
16<script>
17import MiniStatisticsCard from '@/examples/Cards/MiniStatisticsCard.vue";
18export default {
19 components: {
20    MiniStatisticsCard,
21   },
22 };
23</script>

Props Information

Name	Type	Default	Description
rowReverse	boolean	false	Used to set the of the `MiniStatisticsCard` component to RTL.
title*	['String', 'Object']		`title` as an obbject allows to set the title `text` and `color`. It is a required prop.
description	'string', 'node'		Used to set description of the card.
value*	['String', 'Number', 'Object']		`value` as an Object allows to set the value `text` and the value's `color`. It is a required prop.
percentage	['String', 'Object']		`percentage` as an object allows to set the percentage `value` and percentage's `color`.
icon	['String', 'Object']		`icon` as an object allows to set the icon `component`, icon `background` color and icon `shape`.
classContent	String		`classContent` is used to apply custom classes around the content of the `MiniStatisticsCard`.

Complex Statistics Card

PRO

1600

Active Users

+3%

<template>
<complex-statistics-card
 icon="text-dark ni ni-circle-08"
 percentage="+3%"
 :count="{ number: 1600, label: 'Active Users' }"
 background-color="dark"
/>
</template>

<script>
import ComplexStatisticsCard from '@/examples/Cards/ComplexStatisticsCard.vue";

export default {
components: {
  ComplexStatisticsCard1,
  },
};
</script>

1<template>
2<complex-statistics-card
3 icon="text-dark ni ni-circle-08"
4 percentage="+3%"
5 :count="{ number: 1600, label: 'Active Users' }"
6 background-color="dark"
7/>
8</template>
9
10<script>
11import ComplexStatisticsCard from '@/examples/Cards/ComplexStatisticsCard.vue";
12
13export default {
14components: {
15  ComplexStatisticsCard1,
16  },
17};
18</script>

Props Information

Name	Type	Description
img	['String', 'Object']	`img` as an object allows to set the background image using`url` and background overlay color using `overlay` color.
icon*	['String', 'Object']	`icon` as an object allows to set the icon `component` and icon `background` color. It is a required prop.
count	Object	`count` allows to set the count's `number` and the count's `label`.
percentage	['String', 'Object']	`percentage` as an Object allows to set the percentage `label` and percentage's `color`.