refactor: improve responsive behavior
This commit is contained in:
mrholek
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<WidgetsStatsA />
|
<WidgetsStatsA class="mb-4" />
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol :md="12">
|
<CCol :md="12">
|
||||||
<CCard class="mb-4">
|
<CCard class="mb-4">
|
||||||
@@ -20,68 +20,46 @@
|
|||||||
aria-label="Basic outlined example"
|
aria-label="Basic outlined example"
|
||||||
>
|
>
|
||||||
<CButton color="secondary" variant="outline">Day</CButton>
|
<CButton color="secondary" variant="outline">Day</CButton>
|
||||||
<CButton color="secondary" variant="outline" active
|
<CButton color="secondary" variant="outline" active>Month</CButton>
|
||||||
>Month</CButton
|
|
||||||
>
|
|
||||||
<CButton color="secondary" variant="outline">Year</CButton>
|
<CButton color="secondary" variant="outline">Year</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow>
|
<CRow>
|
||||||
<MainChart
|
<MainChart style="height: 300px; max-height: 300px; margin-top: 40px" />
|
||||||
style="height: 300px; max-height: 300px; margin-top: 40px"
|
|
||||||
/>
|
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CRow :xs="{ cols: 1 }" :md="{ cols: 5 }" class="text-center">
|
<CRow
|
||||||
<CCol class="mb-sm-2 mb-0">
|
:xs="{ cols: 1, gutter: 4 }"
|
||||||
|
:sm="{ cols: 2 }"
|
||||||
|
:lg="{ cols: 4 }"
|
||||||
|
:xl="{ cols: 5 }"
|
||||||
|
class="mb-2 text-center"
|
||||||
|
>
|
||||||
|
<CCol>
|
||||||
<div class="text-body-secondary">Visits</div>
|
<div class="text-body-secondary">Visits</div>
|
||||||
<div class="fw-semibold">29.703 Users (40%)</div>
|
<div class="fw-semibold text-truncate">29.703 Users (40%)</div>
|
||||||
<CProgress
|
<CProgress class="mt-2" color="success" thin :precision="1" :value="40" />
|
||||||
class="mt-2"
|
|
||||||
color="success"
|
|
||||||
thin
|
|
||||||
:precision="1"
|
|
||||||
:value="40"
|
|
||||||
/>
|
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol class="mb-sm-2 mb-0 d-md-down-none">
|
<CCol>
|
||||||
<div class="text-body-secondary">Unique</div>
|
<div class="text-body-secondary">Unique</div>
|
||||||
<div class="fw-semibold">24.093 Users (20%)</div>
|
<div class="fw-semibold text-truncate">24.093 Users (20%)</div>
|
||||||
<CProgress
|
<CProgress class="mt-2" color="info" thin :precision="1" :value="20" />
|
||||||
class="mt-2"
|
|
||||||
color="info"
|
|
||||||
thin
|
|
||||||
:precision="1"
|
|
||||||
:value="20"
|
|
||||||
/>
|
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol class="mb-sm-2 mb-0">
|
<CCol>
|
||||||
<div class="text-body-secondary">Pageviews</div>
|
<div class="text-body-secondary">Pageviews</div>
|
||||||
<div class="fw-semibold">78.706 Views (60%)</div>
|
<div class="fw-semibold text-truncate">78.706 Views (60%)</div>
|
||||||
<CProgress
|
<CProgress class="mt-2" color="warning" thin :precision="1" :value="60" />
|
||||||
class="mt-2"
|
|
||||||
color="warning"
|
|
||||||
thin
|
|
||||||
:precision="1"
|
|
||||||
:value="60"
|
|
||||||
/>
|
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol class="mb-sm-2 mb-0">
|
<CCol>
|
||||||
<div class="text-body-secondary">New Users</div>
|
<div class="text-body-secondary">New Users</div>
|
||||||
<div class="fw-semibold">22.123 Users (80%)</div>
|
<div class="fw-semibold text-truncate">22.123 Users (80%)</div>
|
||||||
<CProgress
|
<CProgress class="mt-2" color="danger" thin :precision="1" :value="80" />
|
||||||
class="mt-2"
|
|
||||||
color="danger"
|
|
||||||
thin
|
|
||||||
:precision="1"
|
|
||||||
:value="80"
|
|
||||||
/>
|
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol class="mb-sm-2 mb-0 d-md-down-none">
|
<CCol class="d-none d-xl-block">
|
||||||
<div class="text-body-secondary">Bounce Rate</div>
|
<div class="text-body-secondary">Bounce Rate</div>
|
||||||
<div class="fw-semibold">Average Rate (40.15%)</div>
|
<div class="fw-semibold text-truncate">Average Rate (40.15%)</div>
|
||||||
<CProgress class="mt-2" :value="40" thin :precision="1" />
|
<CProgress class="mt-2" :value="40" thin :precision="1" />
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
@@ -89,7 +67,7 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<WidgetsStatsD />
|
<WidgetsStatsD class="mb-4" />
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol :md="12">
|
<CCol :md="12">
|
||||||
<CCard class="mb-4">
|
<CCard class="mb-4">
|
||||||
@@ -98,21 +76,15 @@
|
|||||||
<CRow>
|
<CRow>
|
||||||
<CCol :sm="12" :lg="6">
|
<CCol :sm="12" :lg="6">
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol :sm="6">
|
<CCol :xs="6">
|
||||||
<div
|
<div class="border-start border-start-4 border-start-info py-1 px-3 mb-3">
|
||||||
class="border-start border-start-4 border-start-info py-1 px-3 mb-3"
|
|
||||||
>
|
|
||||||
<div class="text-body-secondary small">New Clients</div>
|
<div class="text-body-secondary small">New Clients</div>
|
||||||
<div class="fs-5 fw-semibold">9,123</div>
|
<div class="fs-5 fw-semibold">9,123</div>
|
||||||
</div>
|
</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="6">
|
<CCol :xs="6">
|
||||||
<div
|
<div class="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
|
||||||
class="border-start border-start-4 border-start-danger py-1 px-3 mb-3"
|
<div class="text-body-secondary small">Recurring Clients</div>
|
||||||
>
|
|
||||||
<div class="text-body-secondary small">
|
|
||||||
Recurring Clients
|
|
||||||
</div>
|
|
||||||
<div class="fs-5 fw-semibold">22,643</div>
|
<div class="fs-5 fw-semibold">22,643</div>
|
||||||
</div>
|
</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -124,9 +96,7 @@
|
|||||||
class="progress-group mb-4"
|
class="progress-group mb-4"
|
||||||
>
|
>
|
||||||
<div class="progress-group-prepend">
|
<div class="progress-group-prepend">
|
||||||
<span class="text-body-secondary small">{{
|
<span class="text-body-secondary small">{{ item.title }}</span>
|
||||||
item.title
|
|
||||||
}}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress thin color="info" :value="item.value1" />
|
<CProgress thin color="info" :value="item.value1" />
|
||||||
@@ -136,29 +106,21 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="12" :lg="6">
|
<CCol :sm="12" :lg="6">
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol :sm="6">
|
<CCol :xs="6">
|
||||||
<div
|
<div class="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
|
||||||
class="border-start border-start-4 border-start-warning py-1 px-3 mb-3"
|
|
||||||
>
|
|
||||||
<div class="text-body-secondary small">Pageviews</div>
|
<div class="text-body-secondary small">Pageviews</div>
|
||||||
<div class="fs-5 fw-semibold">78,623</div>
|
<div class="fs-5 fw-semibold">78,623</div>
|
||||||
</div>
|
</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="6">
|
<CCol :xs="6">
|
||||||
<div
|
<div class="border-start border-start-4 border-start-success py-1 px-3 mb-3">
|
||||||
class="border-start border-start-4 border-start-success py-1 px-3 mb-3"
|
|
||||||
>
|
|
||||||
<div class="text-body-secondary small">Organic</div>
|
<div class="text-body-secondary small">Organic</div>
|
||||||
<div class="fs-5 fw-semibold">49,123</div>
|
<div class="fs-5 fw-semibold">49,123</div>
|
||||||
</div>
|
</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<hr class="mt-0" />
|
<hr class="mt-0" />
|
||||||
<div
|
<div v-for="item in progressGroupExample2" :key="item.title" class="progress-group">
|
||||||
v-for="item in progressGroupExample2"
|
|
||||||
:key="item.title"
|
|
||||||
class="progress-group"
|
|
||||||
>
|
|
||||||
<div class="progress-group-header">
|
<div class="progress-group-header">
|
||||||
<CIcon :icon="item.icon" class="me-2" size="lg" />
|
<CIcon :icon="item.icon" class="me-2" size="lg" />
|
||||||
<span class="title">{{ item.title }}</span>
|
<span class="title">{{ item.title }}</span>
|
||||||
@@ -171,19 +133,13 @@
|
|||||||
|
|
||||||
<div class="mb-5"></div>
|
<div class="mb-5"></div>
|
||||||
|
|
||||||
<div
|
<div v-for="item in progressGroupExample3" :key="item.title" class="progress-group">
|
||||||
v-for="item in progressGroupExample3"
|
|
||||||
:key="item.title"
|
|
||||||
class="progress-group"
|
|
||||||
>
|
|
||||||
<div class="progress-group-header">
|
<div class="progress-group-header">
|
||||||
<CIcon :icon="item.icon" class="me-2" size="lg" />
|
<CIcon :icon="item.icon" class="me-2" size="lg" />
|
||||||
<span class="title">{{ item.title }}</span>
|
<span class="title">{{ item.title }}</span>
|
||||||
<span class="ms-auto fw-semibold">
|
<span class="ms-auto fw-semibold">
|
||||||
{{ item.value }}
|
{{ item.value }}
|
||||||
<span class="text-body-secondary small"
|
<span class="text-body-secondary small">({{ item.percent }}%)</span>
|
||||||
>({{ item.percent }}%)</span
|
|
||||||
>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
@@ -194,36 +150,26 @@
|
|||||||
</CRow>
|
</CRow>
|
||||||
<br />
|
<br />
|
||||||
<CTable align="middle" class="mb-0 border" hover responsive>
|
<CTable align="middle" class="mb-0 border" hover responsive>
|
||||||
<CTableHead>
|
<CTableHead class="text-nowrap">
|
||||||
<CTableRow>
|
<CTableRow>
|
||||||
<CTableHeaderCell class="bg-body-secondary text-center">
|
<CTableHeaderCell class="bg-body-secondary text-center">
|
||||||
<CIcon name="cil-people" />
|
<CIcon name="cil-people" />
|
||||||
</CTableHeaderCell>
|
</CTableHeaderCell>
|
||||||
<CTableHeaderCell class="bg-body-secondary">
|
<CTableHeaderCell class="bg-body-secondary"> User </CTableHeaderCell>
|
||||||
User
|
|
||||||
</CTableHeaderCell>
|
|
||||||
<CTableHeaderCell class="bg-body-secondary text-center">
|
<CTableHeaderCell class="bg-body-secondary text-center">
|
||||||
Country
|
Country
|
||||||
</CTableHeaderCell>
|
</CTableHeaderCell>
|
||||||
<CTableHeaderCell class="bg-body-secondary">
|
<CTableHeaderCell class="bg-body-secondary"> Usage </CTableHeaderCell>
|
||||||
Usage
|
|
||||||
</CTableHeaderCell>
|
|
||||||
<CTableHeaderCell class="bg-body-secondary text-center">
|
<CTableHeaderCell class="bg-body-secondary text-center">
|
||||||
Payment Method
|
Payment Method
|
||||||
</CTableHeaderCell>
|
</CTableHeaderCell>
|
||||||
<CTableHeaderCell class="bg-body-secondary">
|
<CTableHeaderCell class="bg-body-secondary"> Activity </CTableHeaderCell>
|
||||||
Activity
|
|
||||||
</CTableHeaderCell>
|
|
||||||
</CTableRow>
|
</CTableRow>
|
||||||
</CTableHead>
|
</CTableHead>
|
||||||
<CTableBody>
|
<CTableBody>
|
||||||
<CTableRow v-for="item in tableExample" :key="item.name">
|
<CTableRow v-for="item in tableExample" :key="item.name">
|
||||||
<CTableDataCell class="text-center">
|
<CTableDataCell class="text-center">
|
||||||
<CAvatar
|
<CAvatar size="md" :src="item.avatar.src" :status="item.avatar.status" />
|
||||||
size="md"
|
|
||||||
:src="item.avatar.src"
|
|
||||||
:status="item.avatar.status"
|
|
||||||
/>
|
|
||||||
</CTableDataCell>
|
</CTableDataCell>
|
||||||
<CTableDataCell>
|
<CTableDataCell>
|
||||||
<div>{{ item.user.name }}</div>
|
<div>{{ item.user.name }}</div>
|
||||||
@@ -233,24 +179,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</CTableDataCell>
|
</CTableDataCell>
|
||||||
<CTableDataCell class="text-center">
|
<CTableDataCell class="text-center">
|
||||||
<CIcon
|
<CIcon size="xl" :name="item.country.flag" :title="item.country.name" />
|
||||||
size="xl"
|
|
||||||
:name="item.country.flag"
|
|
||||||
:title="item.country.name"
|
|
||||||
/>
|
|
||||||
</CTableDataCell>
|
</CTableDataCell>
|
||||||
<CTableDataCell>
|
<CTableDataCell>
|
||||||
<div class="d-flex justify-content-between align-items-baseline">
|
<div class="d-flex justify-content-between align-items-baseline">
|
||||||
<div class="fw-semibold">{{ item.usage.value }}%</div>
|
<div class="fw-semibold">{{ item.usage.value }}%</div>
|
||||||
<div class="ms-1 text-nowrap small text-body-secondary">
|
<div class="text-nowrap text-body-secondary small ms-3">
|
||||||
{{ item.usage.period }}
|
{{ item.usage.period }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<CProgress
|
<CProgress thin :color="item.usage.color" :value="item.usage.value" />
|
||||||
thin
|
|
||||||
:color="item.usage.color"
|
|
||||||
:value="item.usage.value"
|
|
||||||
/>
|
|
||||||
</CTableDataCell>
|
</CTableDataCell>
|
||||||
<CTableDataCell class="text-center">
|
<CTableDataCell class="text-center">
|
||||||
<CIcon size="xl" :name="item.payment.icon" />
|
<CIcon size="xl" :name="item.payment.icon" />
|
||||||
|
|||||||
+94
-246
@@ -1,47 +1,39 @@
|
|||||||
<template>
|
<template>
|
||||||
<CRow>
|
|
||||||
<CCol>
|
|
||||||
<CCard class="mb-4">
|
<CCard class="mb-4">
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<strong>Vue Widgets</strong>
|
<strong>Vue Widgets</strong>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<DocsExample href="">
|
<DocsExample href="components/widgets.html#widgetstatsa">
|
||||||
<WidgetsStatsA />
|
<WidgetsStatsA />
|
||||||
</DocsExample>
|
</DocsExample>
|
||||||
<DocsExample href="">
|
<DocsExample href="components/widgets.html#widgetstatsb">
|
||||||
<CRow>
|
<CRow :xs="{ gutter: 4 }">
|
||||||
<CCol :xs="12" :sm="6" :lg="3">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsB
|
<CWidgetStatsB :progress="{ color: 'success', value: 75 }">
|
||||||
class="mb-3"
|
|
||||||
:progress="{ color: 'success', value: 75 }"
|
|
||||||
>
|
|
||||||
<template #text>Widget helper text</template>
|
<template #text>Widget helper text</template>
|
||||||
<template #title>Widget title</template>
|
<template #title>Widget title</template>
|
||||||
<template #value>89.9%</template>
|
<template #value>89.9%</template>
|
||||||
</CWidgetStatsB>
|
</CWidgetStatsB>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsB
|
<CWidgetStatsB
|
||||||
class="mb-3"
|
|
||||||
:progress="{ color: 'info', value: 75 }"
|
:progress="{ color: 'info', value: 75 }"
|
||||||
text="Widget helper text"
|
text="Widget helper text"
|
||||||
title="Widget title"
|
title="Widget title"
|
||||||
value="12.124"
|
value="12.124"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsB
|
<CWidgetStatsB
|
||||||
class="mb-3"
|
|
||||||
:progress="{ color: 'warning', value: 75 }"
|
:progress="{ color: 'warning', value: 75 }"
|
||||||
text="Widget helper text"
|
text="Widget helper text"
|
||||||
title="Widget title"
|
title="Widget title"
|
||||||
value="$98.111,00"
|
value="$98.111,00"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsB
|
<CWidgetStatsB
|
||||||
class="mb-3"
|
|
||||||
:progress="{ color: 'primary', value: 75 }"
|
:progress="{ color: 'primary', value: 75 }"
|
||||||
text="Widget helper text"
|
text="Widget helper text"
|
||||||
title="Widget title"
|
title="Widget title"
|
||||||
@@ -50,23 +42,17 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</DocsExample>
|
</DocsExample>
|
||||||
<DocsExample href="">
|
<DocsExample href="components/widgets.html#widgetstatsb">
|
||||||
<CRow>
|
<CRow :xs="{ gutter: 4 }">
|
||||||
<CCol :xs="12" :sm="6" :lg="3">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsB
|
<CWidgetStatsB color="success" inverse :progress="{ value: 75 }">
|
||||||
class="mb-3"
|
|
||||||
color="success"
|
|
||||||
inverse
|
|
||||||
:progress="{ value: 75 }"
|
|
||||||
>
|
|
||||||
<template #text>Widget helper text</template>
|
<template #text>Widget helper text</template>
|
||||||
<template #title>Widget title</template>
|
<template #title>Widget title</template>
|
||||||
<template #value>89.9%</template>
|
<template #value>89.9%</template>
|
||||||
</CWidgetStatsB>
|
</CWidgetStatsB>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsB
|
<CWidgetStatsB
|
||||||
class="mb-3"
|
|
||||||
color="info"
|
color="info"
|
||||||
inverse
|
inverse
|
||||||
:progress="{ value: 75 }"
|
:progress="{ value: 75 }"
|
||||||
@@ -75,9 +61,8 @@
|
|||||||
value="12.124"
|
value="12.124"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsB
|
<CWidgetStatsB
|
||||||
class="mb-3"
|
|
||||||
color="warning"
|
color="warning"
|
||||||
inverse
|
inverse
|
||||||
:progress="{ value: 75 }"
|
:progress="{ value: 75 }"
|
||||||
@@ -86,9 +71,8 @@
|
|||||||
value="$98.111,00"
|
value="$98.111,00"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsB
|
<CWidgetStatsB
|
||||||
class="mb-3"
|
|
||||||
color="primary"
|
color="primary"
|
||||||
inverse
|
inverse
|
||||||
:progress="{ value: 75 }"
|
:progress="{ value: 75 }"
|
||||||
@@ -99,10 +83,9 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</DocsExample>
|
</DocsExample>
|
||||||
|
<DocsExample href="components/widgets.html#widgetstatse">
|
||||||
<DocsExample href="">
|
<CRow :xs="{ gutter: 4 }">
|
||||||
<CRow>
|
<CCol :sm="4" :md="3" :xl="2">
|
||||||
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
|
|
||||||
<CWidgetStatsE title="title" value="1,123">
|
<CWidgetStatsE title="title" value="1,123">
|
||||||
<CChart
|
<CChart
|
||||||
class="mx-auto"
|
class="mx-auto"
|
||||||
@@ -115,10 +98,7 @@
|
|||||||
backgroundColor: getStyle('--cui-danger'),
|
backgroundColor: getStyle('--cui-danger'),
|
||||||
borderColor: 'transparent',
|
borderColor: 'transparent',
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
data: [
|
data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
|
||||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
|
||||||
45, 47,
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}"
|
}"
|
||||||
@@ -126,7 +106,7 @@
|
|||||||
/>
|
/>
|
||||||
</CWidgetStatsE>
|
</CWidgetStatsE>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
|
<CCol :sm="4" :md="3" :xl="2">
|
||||||
<CWidgetStatsE title="title" value="1,123">
|
<CWidgetStatsE title="title" value="1,123">
|
||||||
<CChart
|
<CChart
|
||||||
class="mx-auto"
|
class="mx-auto"
|
||||||
@@ -139,10 +119,7 @@
|
|||||||
backgroundColor: getStyle('--cui-primary'),
|
backgroundColor: getStyle('--cui-primary'),
|
||||||
borderColor: 'transparent',
|
borderColor: 'transparent',
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
data: [
|
data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
|
||||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
|
||||||
45, 47,
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}"
|
}"
|
||||||
@@ -150,7 +127,7 @@
|
|||||||
/>
|
/>
|
||||||
</CWidgetStatsE>
|
</CWidgetStatsE>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
|
<CCol :sm="4" :md="3" :xl="2">
|
||||||
<CWidgetStatsE title="title" value="1,123">
|
<CWidgetStatsE title="title" value="1,123">
|
||||||
<CChart
|
<CChart
|
||||||
class="mx-auto"
|
class="mx-auto"
|
||||||
@@ -163,10 +140,7 @@
|
|||||||
backgroundColor: getStyle('--cui-warning'),
|
backgroundColor: getStyle('--cui-warning'),
|
||||||
borderColor: 'transparent',
|
borderColor: 'transparent',
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
data: [
|
data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
|
||||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
|
||||||
45, 47,
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}"
|
}"
|
||||||
@@ -174,7 +148,7 @@
|
|||||||
/>
|
/>
|
||||||
</CWidgetStatsE>
|
</CWidgetStatsE>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
|
<CCol :sm="4" :md="3" :xl="2">
|
||||||
<CWidgetStatsE title="title" value="1,123">
|
<CWidgetStatsE title="title" value="1,123">
|
||||||
<CChart
|
<CChart
|
||||||
class="mx-auto"
|
class="mx-auto"
|
||||||
@@ -187,10 +161,7 @@
|
|||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
borderColor: getStyle('--cui-success'),
|
borderColor: getStyle('--cui-success'),
|
||||||
borderWidth: 2,
|
borderWidth: 2,
|
||||||
data: [
|
data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
|
||||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
|
||||||
45, 47,
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}"
|
}"
|
||||||
@@ -198,7 +169,7 @@
|
|||||||
/>
|
/>
|
||||||
</CWidgetStatsE>
|
</CWidgetStatsE>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
|
<CCol :sm="4" :md="3" :xl="2">
|
||||||
<CWidgetStatsE title="title" value="1,123">
|
<CWidgetStatsE title="title" value="1,123">
|
||||||
<CChart
|
<CChart
|
||||||
class="mx-auto"
|
class="mx-auto"
|
||||||
@@ -211,10 +182,7 @@
|
|||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
borderColor: getStyle('--cui-warning'),
|
borderColor: getStyle('--cui-warning'),
|
||||||
borderWidth: 2,
|
borderWidth: 2,
|
||||||
data: [
|
data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
|
||||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
|
||||||
45, 47,
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}"
|
}"
|
||||||
@@ -222,7 +190,7 @@
|
|||||||
/>
|
/>
|
||||||
</CWidgetStatsE>
|
</CWidgetStatsE>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
|
<CCol :sm="4" :md="3" :xl="2">
|
||||||
<CWidgetStatsE title="title" value="1,123">
|
<CWidgetStatsE title="title" value="1,123">
|
||||||
<CChart
|
<CChart
|
||||||
class="mx-auto"
|
class="mx-auto"
|
||||||
@@ -235,10 +203,7 @@
|
|||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
borderColor: getStyle('--cui-info'),
|
borderColor: getStyle('--cui-info'),
|
||||||
borderWidth: 2,
|
borderWidth: 2,
|
||||||
data: [
|
data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
|
||||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
|
||||||
45, 47,
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}"
|
}"
|
||||||
@@ -248,30 +213,30 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</DocsExample>
|
</DocsExample>
|
||||||
<DocsExample href="">
|
<DocsExample href="components/widgets.html#widgetstatsf">
|
||||||
<CRow>
|
<CRow :xs="{ gutter: 4 }">
|
||||||
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsF color="primary" title="Title" value="$1.999,50">
|
<CWidgetStatsF color="primary" title="Title" value="$1.999,50">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<CIcon icon="cil-settings" size="xl" />
|
<CIcon icon="cil-settings" size="xl" />
|
||||||
</template>
|
</template>
|
||||||
</CWidgetStatsF>
|
</CWidgetStatsF>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsF color="info" title="Title" value="$1.999,50">
|
<CWidgetStatsF color="info" title="Title" value="$1.999,50">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<CIcon icon="cil-user" size="xl" />
|
<CIcon icon="cil-user" size="xl" />
|
||||||
</template>
|
</template>
|
||||||
</CWidgetStatsF>
|
</CWidgetStatsF>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsF color="warning" title="Title" value="$1.999,50">
|
<CWidgetStatsF color="warning" title="Title" value="$1.999,50">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<CIcon icon="cil-moon" size="xl" />
|
<CIcon icon="cil-moon" size="xl" />
|
||||||
</template>
|
</template>
|
||||||
</CWidgetStatsF>
|
</CWidgetStatsF>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsF color="danger" title="Title" value="$1.999,50">
|
<CWidgetStatsF color="danger" title="Title" value="$1.999,50">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<CIcon icon="cil-bell" size="xl" />
|
<CIcon icon="cil-bell" size="xl" />
|
||||||
@@ -280,9 +245,9 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</DocsExample>
|
</DocsExample>
|
||||||
<DocsExample href="">
|
<DocsExample href="components/widgets.html#widgetstatsf">
|
||||||
<CRow>
|
<CRow :xs="{ gutter: 4 }">
|
||||||
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsF color="primary" title="Title" value="$1.999,50">
|
<CWidgetStatsF color="primary" title="Title" value="$1.999,50">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<CIcon icon="cil-settings" size="xl" />
|
<CIcon icon="cil-settings" size="xl" />
|
||||||
@@ -295,16 +260,12 @@
|
|||||||
target="_blank"
|
target="_blank"
|
||||||
>
|
>
|
||||||
View more
|
View more
|
||||||
<CIcon
|
<CIcon icon="cil-arrow-right" class="ms-auto" width="16" />
|
||||||
icon="cil-arrow-right"
|
|
||||||
class="ms-auto"
|
|
||||||
width="16"
|
|
||||||
/>
|
|
||||||
</CLink>
|
</CLink>
|
||||||
</template>
|
</template>
|
||||||
</CWidgetStatsF>
|
</CWidgetStatsF>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsF color="info" title="Title" value="$1.999,50">
|
<CWidgetStatsF color="info" title="Title" value="$1.999,50">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<CIcon icon="cil-user" size="xl" />
|
<CIcon icon="cil-user" size="xl" />
|
||||||
@@ -317,16 +278,12 @@
|
|||||||
target="_blank"
|
target="_blank"
|
||||||
>
|
>
|
||||||
View more
|
View more
|
||||||
<CIcon
|
<CIcon icon="cil-arrow-right" class="ms-auto" width="16" />
|
||||||
icon="cil-arrow-right"
|
|
||||||
class="ms-auto"
|
|
||||||
width="16"
|
|
||||||
/>
|
|
||||||
</CLink>
|
</CLink>
|
||||||
</template>
|
</template>
|
||||||
</CWidgetStatsF>
|
</CWidgetStatsF>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsF color="warning" title="Title" value="$1.999,50">
|
<CWidgetStatsF color="warning" title="Title" value="$1.999,50">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<CIcon icon="cil-moon" size="xl" />
|
<CIcon icon="cil-moon" size="xl" />
|
||||||
@@ -339,16 +296,12 @@
|
|||||||
target="_blank"
|
target="_blank"
|
||||||
>
|
>
|
||||||
View more
|
View more
|
||||||
<CIcon
|
<CIcon icon="cil-arrow-right" class="ms-auto" width="16" />
|
||||||
icon="cil-arrow-right"
|
|
||||||
class="ms-auto"
|
|
||||||
width="16"
|
|
||||||
/>
|
|
||||||
</CLink>
|
</CLink>
|
||||||
</template>
|
</template>
|
||||||
</CWidgetStatsF>
|
</CWidgetStatsF>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsF color="danger" title="Title" value="$1.999,50">
|
<CWidgetStatsF color="danger" title="Title" value="$1.999,50">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<CIcon icon="cil-bell" size="xl" />
|
<CIcon icon="cil-bell" size="xl" />
|
||||||
@@ -361,62 +314,38 @@
|
|||||||
target="_blank"
|
target="_blank"
|
||||||
>
|
>
|
||||||
View more
|
View more
|
||||||
<CIcon
|
<CIcon icon="cil-arrow-right" class="ms-auto" width="16" />
|
||||||
icon="cil-arrow-right"
|
|
||||||
class="ms-auto"
|
|
||||||
width="16"
|
|
||||||
/>
|
|
||||||
</CLink>
|
</CLink>
|
||||||
</template>
|
</template>
|
||||||
</CWidgetStatsF>
|
</CWidgetStatsF>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</DocsExample>
|
</DocsExample>
|
||||||
<DocsExample href="">
|
<DocsExample href="components/widgets.html#widgetstatsf">
|
||||||
<CRow>
|
<CRow :xs="{ gutter: 4 }">
|
||||||
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsF
|
<CWidgetStatsF color="primary" :padding="false" title="Title" value="$1.999,50">
|
||||||
color="primary"
|
|
||||||
:padding="false"
|
|
||||||
title="Title"
|
|
||||||
value="$1.999,50"
|
|
||||||
>
|
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<CIcon icon="cil-settings" size="xl" />
|
<CIcon icon="cil-settings" size="xl" />
|
||||||
</template>
|
</template>
|
||||||
</CWidgetStatsF>
|
</CWidgetStatsF>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsF
|
<CWidgetStatsF color="info" :padding="false" title="Title" value="$1.999,50">
|
||||||
color="info"
|
|
||||||
:padding="false"
|
|
||||||
title="Title"
|
|
||||||
value="$1.999,50"
|
|
||||||
>
|
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<CIcon icon="cil-user" size="xl" />
|
<CIcon icon="cil-user" size="xl" />
|
||||||
</template>
|
</template>
|
||||||
</CWidgetStatsF>
|
</CWidgetStatsF>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsF
|
<CWidgetStatsF color="warning" :padding="false" title="Title" value="$1.999,50">
|
||||||
color="warning"
|
|
||||||
:padding="false"
|
|
||||||
title="Title"
|
|
||||||
value="$1.999,50"
|
|
||||||
>
|
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<CIcon icon="cil-moon" size="xl" />
|
<CIcon icon="cil-moon" size="xl" />
|
||||||
</template>
|
</template>
|
||||||
</CWidgetStatsF>
|
</CWidgetStatsF>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsF
|
<CWidgetStatsF color="danger" :padding="false" title="Title" value="$1.999,50">
|
||||||
color="danger"
|
|
||||||
:padding="false"
|
|
||||||
title="Title"
|
|
||||||
value="$1.999,50"
|
|
||||||
>
|
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<CIcon icon="cil-bell" size="xl" />
|
<CIcon icon="cil-bell" size="xl" />
|
||||||
</template>
|
</template>
|
||||||
@@ -424,231 +353,166 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</DocsExample>
|
</DocsExample>
|
||||||
<DocsExample href="">
|
<DocsExample href="components/widgets.html#widgetstatsd">
|
||||||
<WidgetsStatsD />
|
<WidgetsStatsD />
|
||||||
</DocsExample>
|
</DocsExample>
|
||||||
<DocsExample href="">
|
<DocsExample href="components/widgets.html#widgetstatsc">
|
||||||
<CCardGroup>
|
<CCardGroup>
|
||||||
<CWidgetStatsC
|
<CWidgetStatsC :progress="{ color: 'info', value: 75 }" title="Visitors" value="87.500">
|
||||||
class="mb-3"
|
<template #icon><CIcon icon="cil-people" height="36" /></template>
|
||||||
:progress="{ color: 'info', value: 75 }"
|
|
||||||
title="Visitors"
|
|
||||||
value="87.500"
|
|
||||||
>
|
|
||||||
<template #icon
|
|
||||||
><CIcon icon="cil-people" height="36"
|
|
||||||
/></template>
|
|
||||||
</CWidgetStatsC>
|
</CWidgetStatsC>
|
||||||
<CWidgetStatsC
|
<CWidgetStatsC
|
||||||
class="mb-3"
|
|
||||||
:progress="{ color: 'success', value: 75 }"
|
:progress="{ color: 'success', value: 75 }"
|
||||||
title="New Clients"
|
title="New Clients"
|
||||||
value="385"
|
value="385"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cil-user-follow" height="36" /></template>
|
||||||
><CIcon icon="cil-user-follow" height="36"
|
|
||||||
/></template>
|
|
||||||
</CWidgetStatsC>
|
</CWidgetStatsC>
|
||||||
<CWidgetStatsC
|
<CWidgetStatsC
|
||||||
class="mb-3"
|
|
||||||
:progress="{ color: 'warning', value: 75 }"
|
:progress="{ color: 'warning', value: 75 }"
|
||||||
title="Products sold"
|
title="Products sold"
|
||||||
value="1238"
|
value="1238"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cil-basket" height="36" /></template>
|
||||||
><CIcon icon="cil-basket" height="36"
|
|
||||||
/></template>
|
|
||||||
</CWidgetStatsC>
|
</CWidgetStatsC>
|
||||||
<CWidgetStatsC
|
<CWidgetStatsC
|
||||||
class="mb-3"
|
|
||||||
:progress="{ color: 'primary', value: 75 }"
|
:progress="{ color: 'primary', value: 75 }"
|
||||||
title="Returning Visitors"
|
title="Returning Visitors"
|
||||||
value="28%"
|
value="28%"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cil-chart-pie" height="36" /></template>
|
||||||
><CIcon icon="cil-chart-pie" height="36"
|
|
||||||
/></template>
|
|
||||||
</CWidgetStatsC>
|
</CWidgetStatsC>
|
||||||
<CWidgetStatsC
|
<CWidgetStatsC
|
||||||
class="mb-3"
|
|
||||||
:progress="{ color: 'danger', value: 75 }"
|
:progress="{ color: 'danger', value: 75 }"
|
||||||
title="Avg. Time"
|
title="Avg. Time"
|
||||||
value="5:34:11"
|
value="5:34:11"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cil-speedometer" height="36" /></template>
|
||||||
><CIcon icon="cil-speedometer" height="36"
|
|
||||||
/></template>
|
|
||||||
</CWidgetStatsC>
|
</CWidgetStatsC>
|
||||||
</CCardGroup>
|
</CCardGroup>
|
||||||
</DocsExample>
|
</DocsExample>
|
||||||
<DocsExample href="">
|
<DocsExample href="components/widgets.html#widgetstatsc">
|
||||||
<CRow>
|
<CRow :xs="{ gutter: 4 }">
|
||||||
<CCol :sm="4" :md="3" :lg="2">
|
<CCol :xs="6" :lg="4" :xxl="2">
|
||||||
<CWidgetStatsC
|
<CWidgetStatsC :progress="{ color: 'info', value: 75 }" title="Visitors" value="87.500">
|
||||||
class="mb-3"
|
<template #icon><CIcon icon="cil-people" height="36" /></template>
|
||||||
:progress="{ color: 'info', value: 75 }"
|
|
||||||
title="Visitors"
|
|
||||||
value="87.500"
|
|
||||||
>
|
|
||||||
<template #icon
|
|
||||||
><CIcon icon="cil-people" height="36"
|
|
||||||
/></template>
|
|
||||||
</CWidgetStatsC>
|
</CWidgetStatsC>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="4" :md="3" :lg="2">
|
<CCol :xs="6" :lg="4" :xxl="2">
|
||||||
<CWidgetStatsC
|
<CWidgetStatsC
|
||||||
class="mb-3"
|
|
||||||
:progress="{ color: 'success', value: 75 }"
|
:progress="{ color: 'success', value: 75 }"
|
||||||
title="New Clients"
|
title="New Clients"
|
||||||
value="385"
|
value="385"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cil-user-follow" height="36" /></template>
|
||||||
><CIcon icon="cil-user-follow" height="36"
|
|
||||||
/></template>
|
|
||||||
</CWidgetStatsC>
|
</CWidgetStatsC>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="4" :md="3" :lg="2">
|
<CCol :xs="6" :lg="4" :xxl="2">
|
||||||
<CWidgetStatsC
|
<CWidgetStatsC
|
||||||
class="mb-3"
|
|
||||||
:progress="{ color: 'warning', value: 75 }"
|
:progress="{ color: 'warning', value: 75 }"
|
||||||
title="Products sold"
|
title="Products sold"
|
||||||
value="1238"
|
value="1238"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cil-basket" height="36" /></template>
|
||||||
><CIcon icon="cil-basket" height="36"
|
|
||||||
/></template>
|
|
||||||
</CWidgetStatsC>
|
</CWidgetStatsC>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="4" :md="3" :lg="2">
|
<CCol :xs="6" :lg="4" :xxl="2">
|
||||||
<CWidgetStatsC
|
<CWidgetStatsC
|
||||||
class="mb-3"
|
|
||||||
:progress="{ color: 'primary', value: 75 }"
|
:progress="{ color: 'primary', value: 75 }"
|
||||||
title="Returning Visitors"
|
title="Returning Visitors"
|
||||||
value="28%"
|
value="28%"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cil-chart-pie" height="36" /></template>
|
||||||
><CIcon icon="cil-chart-pie" height="36"
|
|
||||||
/></template>
|
|
||||||
</CWidgetStatsC>
|
</CWidgetStatsC>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="4" :md="3" :lg="2">
|
<CCol :xs="6" :lg="4" :xxl="2">
|
||||||
<CWidgetStatsC
|
<CWidgetStatsC
|
||||||
class="mb-3"
|
|
||||||
:progress="{ color: 'danger', value: 75 }"
|
:progress="{ color: 'danger', value: 75 }"
|
||||||
title="Avg. Time"
|
title="Avg. Time"
|
||||||
value="5:34:11"
|
value="5:34:11"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cil-speedometer" height="36" /></template>
|
||||||
><CIcon icon="cil-speedometer" height="36"
|
|
||||||
/></template>
|
|
||||||
</CWidgetStatsC>
|
</CWidgetStatsC>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="4" :md="3" :lg="2">
|
<CCol :xs="6" :lg="4" :xxl="2">
|
||||||
<CWidgetStatsC
|
<CWidgetStatsC :progress="{ color: 'info', value: 75 }" title="Comments" value="972">
|
||||||
class="mb-3"
|
<template #icon><CIcon icon="cil-speech" height="36" /></template>
|
||||||
:progress="{ color: 'info', value: 75 }"
|
|
||||||
title="Comments"
|
|
||||||
value="972"
|
|
||||||
>
|
|
||||||
<template #icon
|
|
||||||
><CIcon icon="cil-speech" height="36"
|
|
||||||
/></template>
|
|
||||||
</CWidgetStatsC>
|
</CWidgetStatsC>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</DocsExample>
|
</DocsExample>
|
||||||
<DocsExample href="">
|
<DocsExample href="components/widgets.html#widgetstatsc">
|
||||||
<CRow>
|
<CRow :xs="{ gutter: 4 }">
|
||||||
<CCol :sm="4" :md="3" :lg="2">
|
<CCol :xs="6" :lg="4" :xxl="2">
|
||||||
<CWidgetStatsC
|
<CWidgetStatsC
|
||||||
class="mb-3"
|
|
||||||
color="info"
|
color="info"
|
||||||
inverse
|
inverse
|
||||||
:progress="{ value: 75 }"
|
:progress="{ value: 75 }"
|
||||||
title="Visitors"
|
title="Visitors"
|
||||||
value="87.500"
|
value="87.500"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cil-people" height="36" /></template>
|
||||||
><CIcon icon="cil-people" height="36"
|
|
||||||
/></template>
|
|
||||||
</CWidgetStatsC>
|
</CWidgetStatsC>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="4" :md="3" :lg="2">
|
<CCol :xs="6" :lg="4" :xxl="2">
|
||||||
<CWidgetStatsC
|
<CWidgetStatsC
|
||||||
class="mb-3"
|
|
||||||
color="success"
|
color="success"
|
||||||
inverse
|
inverse
|
||||||
:progress="{ value: 75 }"
|
:progress="{ value: 75 }"
|
||||||
title="New Clients"
|
title="New Clients"
|
||||||
value="385"
|
value="385"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cil-user-follow" height="36" /></template>
|
||||||
><CIcon icon="cil-user-follow" height="36"
|
|
||||||
/></template>
|
|
||||||
</CWidgetStatsC>
|
</CWidgetStatsC>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="4" :md="3" :lg="2">
|
<CCol :xs="6" :lg="4" :xxl="2">
|
||||||
<CWidgetStatsC
|
<CWidgetStatsC
|
||||||
class="mb-3"
|
|
||||||
color="warning"
|
color="warning"
|
||||||
inverse
|
inverse
|
||||||
:progress="{ value: 75 }"
|
:progress="{ value: 75 }"
|
||||||
title="Products sold"
|
title="Products sold"
|
||||||
value="1238"
|
value="1238"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cil-basket" height="36" /></template>
|
||||||
><CIcon icon="cil-basket" height="36"
|
|
||||||
/></template>
|
|
||||||
</CWidgetStatsC>
|
</CWidgetStatsC>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="4" :md="3" :lg="2">
|
<CCol :xs="6" :lg="4" :xxl="2">
|
||||||
<CWidgetStatsC
|
<CWidgetStatsC
|
||||||
class="mb-3"
|
|
||||||
color="primary"
|
color="primary"
|
||||||
inverse
|
inverse
|
||||||
:progress="{ value: 75 }"
|
:progress="{ value: 75 }"
|
||||||
title="Returning Visitors"
|
title="Returning Visitors"
|
||||||
value="28%"
|
value="28%"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cil-chart-pie" height="36" /></template>
|
||||||
><CIcon icon="cil-chart-pie" height="36"
|
|
||||||
/></template>
|
|
||||||
</CWidgetStatsC>
|
</CWidgetStatsC>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="4" :md="3" :lg="2">
|
<CCol :xs="6" :lg="4" :xxl="2">
|
||||||
<CWidgetStatsC
|
<CWidgetStatsC
|
||||||
class="mb-3"
|
|
||||||
color="danger"
|
color="danger"
|
||||||
inverse
|
inverse
|
||||||
:progress="{ value: 75 }"
|
:progress="{ value: 75 }"
|
||||||
title="Avg. Time"
|
title="Avg. Time"
|
||||||
value="5:34:11"
|
value="5:34:11"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cil-speedometer" height="36" /></template>
|
||||||
><CIcon icon="cil-speedometer" height="36"
|
|
||||||
/></template>
|
|
||||||
</CWidgetStatsC>
|
</CWidgetStatsC>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :sm="4" :md="3" :lg="2">
|
<CCol :xs="6" :lg="4" :xxl="2">
|
||||||
<CWidgetStatsC
|
<CWidgetStatsC
|
||||||
class="mb-3"
|
|
||||||
color="info"
|
color="info"
|
||||||
inverse
|
inverse
|
||||||
:progress="{ value: 75 }"
|
:progress="{ value: 75 }"
|
||||||
title="Comments"
|
title="Comments"
|
||||||
value="972"
|
value="972"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cil-speech" height="36" /></template>
|
||||||
><CIcon icon="cil-speech" height="36"
|
|
||||||
/></template>
|
|
||||||
</CWidgetStatsC>
|
</CWidgetStatsC>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</DocsExample>
|
</DocsExample>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -665,23 +529,7 @@ export default {
|
|||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const widgetStatsE = {
|
const widgetStatsE = {
|
||||||
labels: [
|
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
|
||||||
'M',
|
|
||||||
'T',
|
|
||||||
'W',
|
|
||||||
'T',
|
|
||||||
'F',
|
|
||||||
'S',
|
|
||||||
'S',
|
|
||||||
'M',
|
|
||||||
'T',
|
|
||||||
'W',
|
|
||||||
'T',
|
|
||||||
'F',
|
|
||||||
'S',
|
|
||||||
'S',
|
|
||||||
'M',
|
|
||||||
],
|
|
||||||
optionsBar: {
|
optionsBar: {
|
||||||
maintainAspectRatio: false,
|
maintainAspectRatio: false,
|
||||||
plugins: {
|
plugins: {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<CRow>
|
<CRow :xs="{ gutter: 4 }">
|
||||||
<CCol :xs="12" :sm="6" :lg="3">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsA class="mb-4" color="primary">
|
<CWidgetStatsA color="primary">
|
||||||
<template #value
|
<template #value
|
||||||
>26K
|
>26K
|
||||||
<span class="fs-6 fw-normal">
|
<span class="fs-6 fw-normal">
|
||||||
@@ -99,8 +99,8 @@
|
|||||||
</template>
|
</template>
|
||||||
</CWidgetStatsA>
|
</CWidgetStatsA>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsA class="mb-4" color="info">
|
<CWidgetStatsA color="info">
|
||||||
<template #value
|
<template #value
|
||||||
>$6.200
|
>$6.200
|
||||||
<span class="fs-6 fw-normal">
|
<span class="fs-6 fw-normal">
|
||||||
@@ -197,8 +197,8 @@
|
|||||||
</template>
|
</template>
|
||||||
</CWidgetStatsA>
|
</CWidgetStatsA>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsA class="mb-4" color="warning">
|
<CWidgetStatsA color="warning">
|
||||||
<template #value
|
<template #value
|
||||||
>2.49%
|
>2.49%
|
||||||
<span class="fs-6 fw-normal">
|
<span class="fs-6 fw-normal">
|
||||||
@@ -281,8 +281,8 @@
|
|||||||
</template>
|
</template>
|
||||||
</CWidgetStatsA>
|
</CWidgetStatsA>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsA class="mb-4" color="danger">
|
<CWidgetStatsA color="danger">
|
||||||
<template #value
|
<template #value
|
||||||
>44K
|
>44K
|
||||||
<span class="fs-6 fw-normal">
|
<span class="fs-6 fw-normal">
|
||||||
|
|||||||
@@ -1,31 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<CRow>
|
<CRow :xs="{ gutter: 4 }">
|
||||||
<CCol :xs="12" :sm="6" :lg="3">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsD
|
<CWidgetStatsD
|
||||||
class="mb-4"
|
|
||||||
style="--cui-card-cap-bg: #3b5998"
|
style="--cui-card-cap-bg: #3b5998"
|
||||||
:values="[
|
:values="[
|
||||||
{ title: 'friends', value: '89K' },
|
{ title: 'friends', value: '89K' },
|
||||||
{ title: 'feeds', value: '459' },
|
{ title: 'feeds', value: '459' },
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cib-facebook" height="52" class="my-4 text-white" /></template>
|
||||||
><CIcon icon="cib-facebook" height="52" class="my-4 text-white"
|
|
||||||
/></template>
|
|
||||||
<template #chart>
|
<template #chart>
|
||||||
<CChart
|
<CChart
|
||||||
class="position-absolute w-100 h-100"
|
class="position-absolute w-100 h-100"
|
||||||
type="line"
|
type="line"
|
||||||
:data="{
|
:data="{
|
||||||
labels: [
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
'January',
|
|
||||||
'February',
|
|
||||||
'March',
|
|
||||||
'April',
|
|
||||||
'May',
|
|
||||||
'June',
|
|
||||||
'July',
|
|
||||||
],
|
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
backgroundColor: 'rgba(255,255,255,.1)',
|
backgroundColor: 'rgba(255,255,255,.1)',
|
||||||
@@ -42,32 +31,21 @@
|
|||||||
</template>
|
</template>
|
||||||
</CWidgetStatsD>
|
</CWidgetStatsD>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsD
|
<CWidgetStatsD
|
||||||
class="mb-4"
|
|
||||||
style="--cui-card-cap-bg: #00aced"
|
style="--cui-card-cap-bg: #00aced"
|
||||||
:values="[
|
:values="[
|
||||||
{ title: 'followers', value: '973k' },
|
{ title: 'followers', value: '973k' },
|
||||||
{ title: 'tweets', value: '1.792' },
|
{ title: 'tweets', value: '1.792' },
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cib-twitter" height="52" class="my-4 text-white" /></template>
|
||||||
><CIcon icon="cib-twitter" height="52" class="my-4 text-white"
|
|
||||||
/></template>
|
|
||||||
<template #chart>
|
<template #chart>
|
||||||
<CChart
|
<CChart
|
||||||
class="position-absolute w-100 h-100"
|
class="position-absolute w-100 h-100"
|
||||||
type="line"
|
type="line"
|
||||||
:data="{
|
:data="{
|
||||||
labels: [
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
'January',
|
|
||||||
'February',
|
|
||||||
'March',
|
|
||||||
'April',
|
|
||||||
'May',
|
|
||||||
'June',
|
|
||||||
'July',
|
|
||||||
],
|
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
backgroundColor: 'rgba(255,255,255,.1)',
|
backgroundColor: 'rgba(255,255,255,.1)',
|
||||||
@@ -84,32 +62,21 @@
|
|||||||
</template>
|
</template>
|
||||||
</CWidgetStatsD>
|
</CWidgetStatsD>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsD
|
<CWidgetStatsD
|
||||||
class="mb-4"
|
|
||||||
style="--cui-card-cap-bg: #4875b4"
|
style="--cui-card-cap-bg: #4875b4"
|
||||||
:values="[
|
:values="[
|
||||||
{ title: 'contacts', value: '500' },
|
{ title: 'contacts', value: '500' },
|
||||||
{ title: 'feeds', value: '1.292' },
|
{ title: 'feeds', value: '1.292' },
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cib-linkedin" height="52" class="my-4 text-white" /></template>
|
||||||
><CIcon icon="cib-linkedin" height="52" class="my-4 text-white"
|
|
||||||
/></template>
|
|
||||||
<template #chart>
|
<template #chart>
|
||||||
<CChart
|
<CChart
|
||||||
class="position-absolute w-100 h-100"
|
class="position-absolute w-100 h-100"
|
||||||
type="line"
|
type="line"
|
||||||
:data="{
|
:data="{
|
||||||
labels: [
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
'January',
|
|
||||||
'February',
|
|
||||||
'March',
|
|
||||||
'April',
|
|
||||||
'May',
|
|
||||||
'June',
|
|
||||||
'July',
|
|
||||||
],
|
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
backgroundColor: 'rgba(255,255,255,.1)',
|
backgroundColor: 'rgba(255,255,255,.1)',
|
||||||
@@ -126,32 +93,21 @@
|
|||||||
</template>
|
</template>
|
||||||
</CWidgetStatsD>
|
</CWidgetStatsD>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :xs="12" :sm="6" :lg="3">
|
<CCol :sm="6" :xl="4" :xxl="3">
|
||||||
<CWidgetStatsD
|
<CWidgetStatsD
|
||||||
class="mb-4"
|
|
||||||
color="warning"
|
color="warning"
|
||||||
:values="[
|
:values="[
|
||||||
{ title: 'events', value: '12+' },
|
{ title: 'events', value: '12+' },
|
||||||
{ title: 'meetings', value: '4' },
|
{ title: 'meetings', value: '4' },
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<template #icon
|
<template #icon><CIcon icon="cil-calendar" height="52" class="my-4 text-white" /></template>
|
||||||
><CIcon icon="cil-calendar" height="52" class="my-4 text-white"
|
|
||||||
/></template>
|
|
||||||
<template #chart>
|
<template #chart>
|
||||||
<CChart
|
<CChart
|
||||||
class="position-absolute w-100 h-100"
|
class="position-absolute w-100 h-100"
|
||||||
type="line"
|
type="line"
|
||||||
:data="{
|
:data="{
|
||||||
labels: [
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
'January',
|
|
||||||
'February',
|
|
||||||
'March',
|
|
||||||
'April',
|
|
||||||
'May',
|
|
||||||
'June',
|
|
||||||
'July',
|
|
||||||
],
|
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
backgroundColor: 'rgba(255,255,255,.1)',
|
backgroundColor: 'rgba(255,255,255,.1)',
|
||||||
|
|||||||
Reference in New Issue
Block a user