refactor: update examples
This commit is contained in:
Łukasz Holeczek
@@ -0,0 +1,742 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Widgets</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="">
|
||||
<WidgetsStatsA />
|
||||
</Example>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol :xs="3">
|
||||
<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 :xs="3">
|
||||
<CWidgetStatsB
|
||||
class="mb-3"
|
||||
:progress="{ color: 'info', value: 75 }"
|
||||
text="Widget helper text"
|
||||
title="Widget title"
|
||||
value="12.124"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsB
|
||||
class="mb-3"
|
||||
:progress="{ color: 'warning', value: 75 }"
|
||||
text="Widget helper text"
|
||||
title="Widget title"
|
||||
value="$98.111,00"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsB
|
||||
class="mb-3"
|
||||
:progress="{ color: 'primary', value: 75 }"
|
||||
text="Widget helper text"
|
||||
title="Widget title"
|
||||
value="2TB"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsB
|
||||
class="mb-3"
|
||||
color="success"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
>
|
||||
<template #text>Widget helper text</template>
|
||||
<template #title>Widget title</template>
|
||||
<template #value>89.9%</template>
|
||||
</CWidgetStatsB>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsB
|
||||
class="mb-3"
|
||||
color="info"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
text="Widget helper text"
|
||||
title="Widget title"
|
||||
value="12.124"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsB
|
||||
class="mb-3"
|
||||
color="warning"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
text="Widget helper text"
|
||||
title="Widget title"
|
||||
value="$98.111,00"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsB
|
||||
class="mb-3"
|
||||
color="primary"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
text="Widget helper text"
|
||||
title="Widget title"
|
||||
value="2TB"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsE title="title" value="1,123">
|
||||
<CChart
|
||||
class="mx-auto"
|
||||
type="bar"
|
||||
style="height: 40px; width: 80px"
|
||||
:data="{
|
||||
labels: widgetStatsE.labels,
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: getStyle('--cui-danger'),
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1,
|
||||
data: [
|
||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
||||
45, 47,
|
||||
],
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="widgetStatsE.optionsBar"
|
||||
/>
|
||||
</CWidgetStatsE>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsE title="title" value="1,123">
|
||||
<CChart
|
||||
class="mx-auto"
|
||||
type="bar"
|
||||
style="height: 40px; width: 80px"
|
||||
:data="{
|
||||
labels: widgetStatsE.labels,
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: getStyle('--cui-primary'),
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1,
|
||||
data: [
|
||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
||||
45, 47,
|
||||
],
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="widgetStatsE.optionsBar"
|
||||
/>
|
||||
</CWidgetStatsE>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsE title="title" value="1,123">
|
||||
<CChart
|
||||
class="mx-auto"
|
||||
type="bar"
|
||||
style="height: 40px; width: 80px"
|
||||
:data="{
|
||||
labels: widgetStatsE.labels,
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: getStyle('--cui-warning'),
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1,
|
||||
data: [
|
||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
||||
45, 47,
|
||||
],
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="widgetStatsE.optionsBar"
|
||||
/>
|
||||
</CWidgetStatsE>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsE title="title" value="1,123">
|
||||
<CChart
|
||||
class="mx-auto"
|
||||
type="line"
|
||||
style="height: 40px; width: 80px"
|
||||
:data="{
|
||||
labels: widgetStatsE.labels,
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: getStyle('--cui-success'),
|
||||
borderWidth: 2,
|
||||
data: [
|
||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
||||
45, 47,
|
||||
],
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="widgetStatsE.optionsLine"
|
||||
/>
|
||||
</CWidgetStatsE>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsE title="title" value="1,123">
|
||||
<CChart
|
||||
class="mx-auto"
|
||||
type="line"
|
||||
style="height: 40px; width: 80px"
|
||||
:data="{
|
||||
labels: widgetStatsE.labels,
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: getStyle('--cui-warning'),
|
||||
borderWidth: 2,
|
||||
data: [
|
||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
||||
45, 47,
|
||||
],
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="widgetStatsE.optionsLine"
|
||||
/>
|
||||
</CWidgetStatsE>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsE title="title" value="1,123">
|
||||
<CChart
|
||||
class="mx-auto"
|
||||
type="line"
|
||||
style="height: 40px; width: 80px"
|
||||
:data="{
|
||||
labels: widgetStatsE.labels,
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: getStyle('--cui-info'),
|
||||
borderWidth: 2,
|
||||
data: [
|
||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
||||
45, 47,
|
||||
],
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="widgetStatsE.optionsLine"
|
||||
/>
|
||||
</CWidgetStatsE>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF color="primary" title="Title" value="$1.999,50">
|
||||
<template #icon>
|
||||
<CIcon icon="cil-settings" size="xl" />
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF color="info" title="Title" value="$1.999,50">
|
||||
<template #icon>
|
||||
<CIcon icon="cil-user" size="xl" />
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF color="warning" title="Title" value="$1.999,50">
|
||||
<template #icon>
|
||||
<CIcon icon="cil-moon" size="xl" />
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF color="danger" title="Title" value="$1.999,50">
|
||||
<template #icon>
|
||||
<CIcon icon="cil-bell" size="xl" />
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol :xs="3">
|
||||
<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-medium-emphasis"
|
||||
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 :xs="3">
|
||||
<CWidgetStatsF color="info" title="Title" value="$1.999,50">
|
||||
<template #icon>
|
||||
<CIcon icon="cil-user" size="xl" />
|
||||
</template>
|
||||
<template #footer>
|
||||
<CLink
|
||||
class="font-weight-bold font-xs text-medium-emphasis"
|
||||
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 :xs="3">
|
||||
<CWidgetStatsF color="warning" title="Title" value="$1.999,50">
|
||||
<template #icon>
|
||||
<CIcon icon="cil-moon" size="xl" />
|
||||
</template>
|
||||
<template #footer>
|
||||
<CLink
|
||||
class="font-weight-bold font-xs text-medium-emphasis"
|
||||
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 :xs="3">
|
||||
<CWidgetStatsF color="danger" title="Title" value="$1.999,50">
|
||||
<template #icon>
|
||||
<CIcon icon="cil-bell" size="xl" />
|
||||
</template>
|
||||
<template #footer>
|
||||
<CLink
|
||||
class="font-weight-bold font-xs text-medium-emphasis"
|
||||
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>
|
||||
</Example>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF
|
||||
color="primary"
|
||||
:padding="false"
|
||||
title="Title"
|
||||
value="$1.999,50"
|
||||
>
|
||||
<template #icon>
|
||||
<CIcon icon="cil-settings" size="xl" />
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF
|
||||
color="info"
|
||||
:padding="false"
|
||||
title="Title"
|
||||
value="$1.999,50"
|
||||
>
|
||||
<template #icon>
|
||||
<CIcon icon="cil-user" size="xl" />
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF
|
||||
color="warning"
|
||||
:padding="false"
|
||||
title="Title"
|
||||
value="$1.999,50"
|
||||
>
|
||||
<template #icon>
|
||||
<CIcon icon="cil-moon" size="xl" />
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF
|
||||
color="danger"
|
||||
:padding="false"
|
||||
title="Title"
|
||||
value="$1.999,50"
|
||||
>
|
||||
<template #icon>
|
||||
<CIcon icon="cil-bell" size="xl" />
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<Example href="">
|
||||
<WidgetsStatsD />
|
||||
</Example>
|
||||
<Example href="">
|
||||
<CCardGroup>
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'info', value: 75 }"
|
||||
title="Visitors"
|
||||
value="87.500"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-people" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'success', value: 75 }"
|
||||
title="New Clients"
|
||||
value="385"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-user-follow" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'warning', value: 75 }"
|
||||
title="Products sold"
|
||||
value="1238"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-basket" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'primary', value: 75 }"
|
||||
title="Returning Visitors"
|
||||
value="28%"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-chart-pie" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'danger', value: 75 }"
|
||||
title="Avg. Time"
|
||||
value="5:34:11"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-speedometer" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCardGroup>
|
||||
</Example>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'info', value: 75 }"
|
||||
title="Visitors"
|
||||
value="87.500"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-people" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'success', value: 75 }"
|
||||
title="New Clients"
|
||||
value="385"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-user-follow" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'warning', value: 75 }"
|
||||
title="Products sold"
|
||||
value="1238"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-basket" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'primary', value: 75 }"
|
||||
title="Returning Visitors"
|
||||
value="28%"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-chart-pie" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'danger', value: 75 }"
|
||||
title="Avg. Time"
|
||||
value="5:34:11"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-speedometer" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'info', value: 75 }"
|
||||
title="Comments"
|
||||
value="972"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-speech" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
color="info"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
title="Visitors"
|
||||
value="87.500"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-people" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
color="success"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
title="New Clients"
|
||||
value="385"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-user-follow" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
color="warning"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
title="Products sold"
|
||||
value="1238"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-basket" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
color="primary"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
title="Returning Visitors"
|
||||
value="28%"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-chart-pie" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
color="danger"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
title="Avg. Time"
|
||||
value="5:34:11"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-speedometer" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
color="info"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
title="Comments"
|
||||
value="972"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-speech" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getStyle } from "@coreui/utils";
|
||||
import { CChart } from "@coreui/vue-chartjs";
|
||||
import WidgetsStatsA from "./WidgetsStatsTypeA.vue";
|
||||
import WidgetsStatsD from "./WidgetsStatsTypeD.vue";
|
||||
import Example from "../../components/Example.vue";
|
||||
export default {
|
||||
name: "Widgets",
|
||||
components: {
|
||||
CChart,
|
||||
WidgetsStatsA,
|
||||
WidgetsStatsD,
|
||||
Example,
|
||||
},
|
||||
data() {
|
||||
const widgetStatsE = {
|
||||
labels: [
|
||||
"M",
|
||||
"T",
|
||||
"W",
|
||||
"T",
|
||||
"F",
|
||||
"S",
|
||||
"S",
|
||||
"M",
|
||||
"T",
|
||||
"W",
|
||||
"T",
|
||||
"F",
|
||||
"S",
|
||||
"S",
|
||||
"M",
|
||||
],
|
||||
optionsBar: {
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
optionsLine: {
|
||||
maintainAspectRatio: false,
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.4,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
getStyle,
|
||||
widgetStatsE,
|
||||
widgetProgressIconItems: [
|
||||
{ color: "primary", icon: "cil-puzzle" },
|
||||
{ color: "success", icon: "cil-speedometer" },
|
||||
{ color: "danger", icon: "cil-cursor" },
|
||||
{ color: "info", icon: "cil-drop" },
|
||||
{ color: "secondary", icon: "cil-pencil" },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol :xs="3">
|
||||
<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: '#321fdb',
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="{
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
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 :xs="3">
|
||||
<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: {
|
||||
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 :xs="3">
|
||||
<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 :xs="3">
|
||||
<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: {
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetStatsA>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChart } from "@coreui/vue-chartjs";
|
||||
export default {
|
||||
name: "WidgetsStatsA",
|
||||
components: {
|
||||
CChart,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol :sm="6" :lg="3">
|
||||
<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="options"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetStatsD>
|
||||
</CCol>
|
||||
<CCol :sm="6" :lg="3">
|
||||
<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="options"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetStatsD>
|
||||
</CCol>
|
||||
<CCol :sm="6" :lg="3">
|
||||
<CWidgetStatsD
|
||||
class="mb-4"
|
||||
style="--cui-card-cap-bg: #4875b4"
|
||||
:values="[
|
||||
{ title: 'contacts', value: '500' },
|
||||
{ title: 'feeds', value: '1.292' },
|
||||
]"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cib-linkedin" 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: [78, 81, 80, 45, 34, 12, 40],
|
||||
fill: true,
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="options"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetStatsD>
|
||||
</CCol>
|
||||
<CCol :sm="6" :lg="3">
|
||||
<CWidgetStatsD
|
||||
class="mb-4"
|
||||
color="warning"
|
||||
:values="[
|
||||
{ title: 'events', value: '12+' },
|
||||
{ title: 'meetings', value: '4' },
|
||||
]"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-calendar" 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: [35, 23, 56, 22, 97, 23, 64],
|
||||
fill: true,
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="options"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetStatsD>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChart } from "@coreui/vue-chartjs";
|
||||
export default {
|
||||
name: "WidgetsStatsD",
|
||||
components: {
|
||||
CChart,
|
||||
},
|
||||
setup() {
|
||||
const 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,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
options,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user