# Vue Widgets Components

## WidgetStatsA

```html
<template>
  <CRow>
    <CCol :sm="6">
      <CWidgetStatsA class="mb-3" color="primary">
        <template #value
          >26K
          <span class="fs-6 fw-normal"> (-12.4% <CIcon icon="cil-arrow-bottom" />) </span>
        </template>
        <template #title>Users</template>
        <template #action>
          <CDropdown placement="bottom-end">
            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
              <CIcon icon="cil-options" class="text-high-emphasis-inverse" />
            </CDropdownToggle>
            <CDropdownMenu>
              <CDropdownItem href="#">Action</CDropdownItem>
              <CDropdownItem href="#">Another action</CDropdownItem>
              <CDropdownItem href="#">Something else here</CDropdownItem>
            </CDropdownMenu>
          </CDropdown>
        </template>
        <template #chart>
          <CChart
            type="line"
            class="mt-3 mx-3"
            style="height: 70px"
            :data="{
              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
              datasets: [
                {
                  label: 'My First dataset',
                  backgroundColor: 'transparent',
                  borderColor: 'rgba(255,255,255,.55)',
                  pointBackgroundColor: '#5856d6',
                  data: [65, 59, 84, 84, 51, 55, 40],
                },
              ],
            }"
            :options="{
              plugins: {
                legend: {
                  display: false,
                },
              },
              maintainAspectRatio: false,
              scales: {
                x: {
                  border: {
                    display: false,
                  },
                  grid: {
                    display: false,
                    drawBorder: false,
                  },
                  ticks: {
                    display: false,
                  },
                },
                y: {
                  min: 30,
                  max: 89,
                  display: false,
                  grid: {
                    display: false,
                  },
                  ticks: {
                    display: false,
                  },
                },
              },
              elements: {
                line: {
                  borderWidth: 1,
                  tension: 0.4,
                },
                point: {
                  radius: 4,
                  hitRadius: 10,
                  hoverRadius: 4,
                },
              },
            }"
          />
        </template>
      </CWidgetStatsA>
    </CCol>
    <CCol :sm="6">
      <CWidgetStatsA class="mb-3" color="info">
        <template #value
          >$6.200
          <span class="fs-6 fw-normal"> (40.9% <CIcon icon="cil-arrow-top" />) </span>
        </template>
        <template #title>Income</template>
        <template #action>
          <CDropdown placement="bottom-end">
            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
              <CIcon icon="cil-options" class="text-high-emphasis-inverse" />
            </CDropdownToggle>
            <CDropdownMenu>
              <CDropdownItem href="#">Action</CDropdownItem>
              <CDropdownItem href="#">Another action</CDropdownItem>
              <CDropdownItem href="#">Something else here</CDropdownItem>
            </CDropdownMenu>
          </CDropdown>
        </template>
        <template #chart>
          <CChart
            type="line"
            class="mt-3 mx-3"
            style="height: 70px"
            :data="{
              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
              datasets: [
                {
                  label: 'My First dataset',
                  backgroundColor: 'transparent',
                  borderColor: 'rgba(255,255,255,.55)',
                  pointBackgroundColor: '#39f',
                  data: [1, 18, 9, 17, 34, 22, 11],
                },
              ],
            }"
            :options="{
              plugins: {
                legend: {
                  display: false,
                },
              },
              maintainAspectRatio: false,
              scales: {
                x: {
                  border: {
                    display: false,
                  },
                  grid: {
                    display: false,
                    drawBorder: false,
                  },
                  ticks: {
                    display: false,
                  },
                },
                y: {
                  min: -9,
                  max: 39,
                  display: false,
                  grid: {
                    display: false,
                  },
                  ticks: {
                    display: false,
                  },
                },
              },
              elements: {
                line: {
                  borderWidth: 1,
                },
                point: {
                  radius: 4,
                  hitRadius: 10,
                  hoverRadius: 4,
                },
              },
            }"
          />
        </template>
      </CWidgetStatsA>
    </CCol>
    <CCol :sm="6">
      <CWidgetStatsA class="mb-3" color="warning">
        <template #value
          >2.49%
          <span class="fs-6 fw-normal"> (84.7% <CIcon icon="cil-arrow-top" />) </span>
        </template>
        <template #title>Conversion Rate</template>
        <template #action>
          <CDropdown placement="bottom-end">
            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
              <CIcon icon="cil-options" class="text-high-emphasis-inverse" />
            </CDropdownToggle>
            <CDropdownMenu>
              <CDropdownItem href="#">Action</CDropdownItem>
              <CDropdownItem href="#">Another action</CDropdownItem>
              <CDropdownItem href="#">Something else here</CDropdownItem>
            </CDropdownMenu>
          </CDropdown>
        </template>
        <template #chart>
          <CChart
            type="line"
            class="mt-3"
            style="height: 70px"
            :data="{
              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
              datasets: [
                {
                  label: 'My First dataset',
                  backgroundColor: 'rgba(255,255,255,.2)',
                  borderColor: 'rgba(255,255,255,.55)',
                  data: [78, 81, 80, 45, 34, 12, 40],
                  fill: true,
                },
              ],
            }"
            :options="{
              plugins: {
                legend: {
                  display: false,
                },
              },
              maintainAspectRatio: false,
              scales: {
                x: {
                  display: false,
                },
                y: {
                  display: false,
                },
              },
              elements: {
                line: {
                  borderWidth: 2,
                  tension: 0.4,
                },
                point: {
                  radius: 0,
                  hitRadius: 10,
                  hoverRadius: 4,
                },
              },
            }"
          />
        </template>
      </CWidgetStatsA>
    </CCol>
    <CCol :sm="6">
      <CWidgetStatsA class="mb-3" color="danger">
        <template #value
          >44K
          <span class="fs-6 fw-normal"> (-23.6% <CIcon icon="cil-arrow-bottom" />) </span>
        </template>
        <template #title>Sessions</template>
        <template #action>
          <CDropdown placement="bottom-end">
            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
              <CIcon icon="cil-options" class="text-high-emphasis-inverse" />
            </CDropdownToggle>
            <CDropdownMenu>
              <CDropdownItem href="#">Action</CDropdownItem>
              <CDropdownItem href="#">Another action</CDropdownItem>
              <CDropdownItem href="#">Something else here</CDropdownItem>
            </CDropdownMenu>
          </CDropdown>
        </template>
        <template #chart>
          <CChart
            type="bar"
            class="mt-3 mx-3"
            style="height: 70px"
            :data="{
              labels: [
                'January',
                'February',
                'March',
                'April',
                'May',
                'June',
                'July',
                'August',
                'September',
                'October',
                'November',
                'December',
                'January',
                'February',
                'March',
                'April',
              ],
              datasets: [
                {
                  label: 'My First dataset',
                  backgroundColor: 'rgba(255,255,255,.2)',
                  borderColor: 'rgba(255,255,255,.55)',
                  data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
                  barPercentage: 0.6,
                },
              ],
            }"
            :options="{
              maintainAspectRatio: false,
              plugins: {
                legend: {
                  display: false,
                },
              },
              scales: {
                x: {
                  grid: {
                    display: false,
                    drawTicks: false,
                  },
                  ticks: {
                    display: false,
                  },
                },
                y: {
                  border: {
                    display: false,
                  },
                  grid: {
                    display: false,
                    drawBorder: false,
                    drawTicks: false,
                  },
                  ticks: {
                    display: false,
                  },
                },
              },
            }"
          />
        </template>
      </CWidgetStatsA>
    </CCol>
  </CRow>
</template>

<script setup>
import {
  CRow,
  CCol,
  CWidgetStatsA,
  CDropdown,
  CDropdownToggle,
  CDropdownMenu,
  CDropdownItem,
} from '@coreui/vue'
import { CIcon } from '@coreui/icons-vue'
import { CChart } from '@coreui/vue-chartjs'
</script>
```
  
</Example>

## WidgetStatsB

```html
<template>
  <CRow>
    <CCol :sm="6">
      <CWidgetStatsB class="mb-3" :progress="{ color: 'success', value: 75 }">
        <template #text>Widget helper text</template>
        <template #title>Widget title</template>
        <template #value>89.9%</template>
      </CWidgetStatsB>
    </CCol>
    <CCol :sm="6">
      <CWidgetStatsB
        class="mb-3"
        color="primary"
        inverse
        :progress="{ value: 75 }"
        text="Widget helper text"
        title="Widget title"
        value="12.124"
      />
    </CCol>
  </CRow>
</template>

<script setup>
import { CRow, CCol, CWidgetStatsB } from '@coreui/vue'
</script>
```
  
</Example>

## WidgetStatsC

```html
<template>
  <CRow>
    <CCol :sm="6">
      <CWidgetStatsC
        class="mb-3"
        value="87.500"
        :progress="{ color: 'info', value: 75 }"
        title="Visitors"
      >
        <template #icon><CIcon icon="cil-people" height="36" /></template>
        <template #title>Visitors</template>
      </CWidgetStatsC>
    </CCol>
    <CCol :sm="6">
      <CWidgetStatsC
        class="mb-3"
        inverse
        color="info"
        value="385"
        :progress="{ value: 75 }"
        title="New clients"
      >
        <template #icon><CIcon icon="cil-user-follow" height="36" /></template>
      </CWidgetStatsC>
    </CCol>
  </CRow>
</template>

<script setup>
import { CRow, CCol, CWidgetStatsC } from '@coreui/vue'
import { CIcon } from '@coreui/icons-vue'
</script>
```
  
</Example>

## WidgetStatsD

```html
<template>
  <CRow>
    <CCol :sm="6">
      <CWidgetStatsD
        class="mb-4"
        style="--cui-card-cap-bg: #3b5998"
        :values="[
          { title: 'friends', value: '89K' },
          { title: 'feeds', value: '459' },
        ]"
      >
        <template #icon>
          <CIcon icon="cib-facebook" height="52" class="my-4 text-white" />
        </template>
        <template #chart>
          <CChart
            class="position-absolute w-100 h-100"
            type="line"
            :data="{
              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
              datasets: [
                {
                  backgroundColor: 'rgba(255,255,255,.1)',
                  borderColor: 'rgba(255,255,255,.55)',
                  pointHoverBackgroundColor: '#fff',
                  borderWidth: 2,
                  data: [65, 59, 84, 84, 51, 55, 40],
                  fill: true,
                },
              ],
            }"
            :options="{
              elements: {
                line: {
                  tension: 0.4,
                },
                point: {
                  radius: 0,
                  hitRadius: 10,
                  hoverRadius: 4,
                  hoverBorderWidth: 3,
                },
              },
              maintainAspectRatio: false,
              plugins: {
                legend: {
                  display: false,
                },
              },
              scales: {
                x: {
                  display: false,
                },
                y: {
                  display: false,
                },
              },
            }"
          />
        </template>
      </CWidgetStatsD>
    </CCol>
    <CCol :sm="6">
      <CWidgetStatsD
        class="mb-4"
        style="--cui-card-cap-bg: #00aced"
        :values="[
          { title: 'followers', value: '973k' },
          { title: 'tweets', value: '1.792' },
        ]"
      >
        <template #icon>
          <CIcon icon="cib-twitter" height="52" class="my-4 text-white" />
        </template>
        <template #chart>
          <CChart
            class="position-absolute w-100 h-100"
            type="line"
            :data="{
              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
              datasets: [
                {
                  backgroundColor: 'rgba(255,255,255,.1)',
                  borderColor: 'rgba(255,255,255,.55)',
                  pointHoverBackgroundColor: '#fff',
                  borderWidth: 2,
                  data: [1, 13, 9, 17, 34, 41, 38],
                  fill: true,
                },
              ],
            }"
            :options="{
              elements: {
                line: {
                  tension: 0.4,
                },
                point: {
                  radius: 0,
                  hitRadius: 10,
                  hoverRadius: 4,
                  hoverBorderWidth: 3,
                },
              },
              maintainAspectRatio: false,
              plugins: {
                legend: {
                  display: false,
                },
              },
              scales: {
                x: {
                  display: false,
                },
                y: {
                  display: false,
                },
              },
            }"
          />
        </template>
      </CWidgetStatsD>
    </CCol>
  </CRow>
</template>

<script setup>
import { CRow, CCol, CWidgetStatsD } from '@coreui/vue'
import { CIcon } from '@coreui/icons-vue'
import { CChart } from '@coreui/vue-chartjs'
</script>
```
  
</Example>

## WidgetStatsE

```html
<template>
  <CRow>
    <CCol :sm="6">
      <CWidgetStatsE>
        <template #chart>
          <CChart
            class="mx-auto"
            type="bar"
            style="height: 40px; width: 80px"
            :data="{
              labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
              datasets: [
                {
                  backgroundColor: '#321fdb',
                  borderColor: 'transparent',
                  borderWidth: 1,
                  data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
                },
              ],
            }"
            :options="{
              maintainAspectRatio: false,
              plugins: {
                legend: {
                  display: false,
                },
              },
              scales: {
                x: {
                  display: false,
                },
                y: {
                  display: false,
                },
              },
            }"
          />
        </template>
        <template #title>title</template>
        <template #value>1,123</template>
      </CWidgetStatsE>
    </CCol>
    <CCol :sm="6">
      <CWidgetStatsE title="title" value="1,123">
        <template #chart>
          <CChart
            class="mx-auto"
            type="line"
            style="height: 40px; width: 80px"
            :data="{
              labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
              datasets: [
                {
                  backgroundColor: 'transparent',
                  borderColor: '#321fdb',
                  borderWidth: 2,
                  data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
                },
              ],
            }"
            :options="{
              maintainAspectRatio: false,
              elements: {
                line: {
                  tension: 0.4,
                },
                point: {
                  radius: 0,
                },
              },
              plugins: {
                legend: {
                  display: false,
                },
              },
              scales: {
                x: {
                  display: false,
                },
                y: {
                  display: false,
                },
              },
            }"
          />
        </template>
      </CWidgetStatsE>
    </CCol>
  </CRow>
</template>

<script setup>
import { CRow, CCol, CWidgetStatsE } from '@coreui/vue'
import { CChart } from '@coreui/vue-chartjs'
</script>
```
  
</Example>

## WidgetStatsF

```html
<template>
  <CRow>
    <CCol :sm="6">
      <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
        <template #icon>
          <CIcon icon="cil-settings" size="xl" />
        </template>
      </CWidgetStatsF>
    </CCol>
    <CCol :sm="6">
      <CWidgetStatsF color="info" title="Title" value="$1.999,50">
        <template #icon>
          <CIcon icon="cil-settings" size="xl" />
        </template>
      </CWidgetStatsF>
    </CCol>
  </CRow>
</template>

<script setup>
import { CRow, CCol, CWidgetStatsF } from '@coreui/vue'
import { CIcon } from '@coreui/icons-vue'
</script>
```
  
</Example>

```html
<template>
  <CRow>
    <CCol :sm="6">
      <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
        <template #icon>
          <CIcon icon="cil-settings" size="xl" />
        </template>
        <template #footer>
          <CLink
            class="font-weight-bold font-xs text-body-secondary"
            href="https://coreui.io/"
            rel="noopener norefferer"
            target="_blank"
          >
            View more
            <CIcon icon="cil-arrow-right" class="ms-auto" width="16" />
          </CLink>
        </template>
      </CWidgetStatsF>
    </CCol>
    <CCol :sm="6">
      <CWidgetStatsF color="info" title="Title" value="$1.999,50">
        <template #icon>
          <CIcon icon="cil-settings" size="xl" />
        </template>
        <template #footer>
          <CLink
            class="font-weight-bold font-xs text-body-secondary"
            href="https://coreui.io/"
            rel="noopener norefferer"
            target="_blank"
          >
            View more
            <CIcon icon="cil-arrow-right" class="ms-auto" width="16" />
          </CLink>
        </template>
      </CWidgetStatsF>
    </CCol>
  </CRow>
</template>

<script setup>
import { CRow, CCol, CWidgetStatsF, CLink } from '@coreui/vue'
import { CIcon } from '@coreui/icons-vue'
</script>
```
  
</Example>