feat: add charts
This commit is contained in:
Marcin Michałek
+6
-6
@@ -147,12 +147,12 @@ export default [
|
||||
// }
|
||||
]
|
||||
},
|
||||
// {
|
||||
// _name: 'CNavItem',
|
||||
// name: 'Charts',
|
||||
// to: '/charts',
|
||||
// icon: 'cil-chart-pie'
|
||||
// },
|
||||
{
|
||||
_name: 'CNavItem',
|
||||
name: 'Charts',
|
||||
to: '/charts',
|
||||
icon: 'cil-chart-pie'
|
||||
},
|
||||
{
|
||||
_name: 'CNavGroup',
|
||||
name: 'Icons',
|
||||
|
||||
@@ -168,6 +168,11 @@ const routes = [
|
||||
*/
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/charts",
|
||||
name: "Charts",
|
||||
component: () => import("@/views/charts/Charts.vue"),
|
||||
},
|
||||
{
|
||||
path: "/icons",
|
||||
name: "Icons",
|
||||
|
||||
+490
-2
@@ -1,5 +1,493 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<h1>Dashboard</h1>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol md="12">
|
||||
<CCard>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm="5">
|
||||
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
|
||||
<div class="small text-muted">November 2017</div>
|
||||
</CCol>
|
||||
<CCol sm="7" class="d-none d-md-block">
|
||||
<CButton color="primary" class="float-right">
|
||||
<CIcon name="cil-cloud-download"/>
|
||||
</CButton>
|
||||
<CButtonGroup class="float-right mr-3">
|
||||
<CButton
|
||||
color="outline-secondary"
|
||||
v-for="(value, key) in ['Day', 'Month', 'Year']"
|
||||
:key="key"
|
||||
class="mx-0"
|
||||
:pressed="value === selected ? true : false"
|
||||
@click="selected = value"
|
||||
>
|
||||
{{value}}
|
||||
</CButton>
|
||||
</CButtonGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<MainChartExample style="height:300px;max-height:300px;margin-top:40px;"/>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<CCard>
|
||||
<CCardBody>
|
||||
<CRow class="text-center">
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||
<div class="text-muted">Visits</div>
|
||||
<strong>29.703 Users (40%)</strong>
|
||||
<CProgress
|
||||
class="progress-xs mt-2"
|
||||
:precision="1"
|
||||
color="success"
|
||||
:value="40"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
|
||||
<div class="text-muted">Unique</div>
|
||||
<strong>24.093 Users (20%)</strong>
|
||||
<CProgress
|
||||
class="progress-xs mt-2"
|
||||
:precision="1"
|
||||
color="info"
|
||||
:value="20"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||
<div class="text-muted">Pageviews</div>
|
||||
<strong>78.706 Views (60%)</strong>
|
||||
<CProgress
|
||||
class="progress-xs mt-2"
|
||||
:precision="1"
|
||||
color="warning"
|
||||
:value="60"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||
<div class="text-muted">New Users</div>
|
||||
<strong>22.123 Users (80%)</strong>
|
||||
<CProgress
|
||||
class="progress-xs mt-2"
|
||||
:precision="1"
|
||||
color="danger"
|
||||
:value="80"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
|
||||
<div class="text-muted">Bounce Rate</div>
|
||||
<strong>Average Rate (40.15%)</strong>
|
||||
<CProgress
|
||||
class="progress-xs mt-2"
|
||||
:precision="1"
|
||||
:value="40"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Traffic & Sales
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm="12" lg="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<CCallout color="info">
|
||||
<small class="text-muted">New Clients</small><br>
|
||||
<strong class="h4">9,123</strong>
|
||||
</CCallout>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CCallout color="danger">
|
||||
<small class="text-muted">Recurring Clients</small><br>
|
||||
<strong class="h4">22,643</strong>
|
||||
</CCallout>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<hr class="mt-0">
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
Monday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
color="info"
|
||||
:value="34"
|
||||
/>
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
color="danger"
|
||||
:value="78"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
Tuesday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="56"
|
||||
color="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="94"
|
||||
color="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
Wednesday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="12"
|
||||
color="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="67"
|
||||
color="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
Thursday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="43"
|
||||
color="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="91"
|
||||
color="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
Friday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="22"
|
||||
color="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="73"
|
||||
color="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
Saturday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="53"
|
||||
color="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="82"
|
||||
color="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
Sunday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="9"
|
||||
color="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="69"
|
||||
color="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legend text-center">
|
||||
<small>
|
||||
<sup><CBadge shape="pill" color="info"> </CBadge></sup>
|
||||
New clients
|
||||
|
||||
<sup><CBadge shape="pill" color="danger"> </CBadge></sup>
|
||||
Recurring clients
|
||||
</small>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol sm="12" lg="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<CCallout color="warning">
|
||||
<small class="text-muted">Pageviews</small><br>
|
||||
<strong class="h4">78,623</strong>
|
||||
</CCallout>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CCallout color="success">
|
||||
<small class="text-muted">Organic</small><br>
|
||||
<strong class="h4">49,123</strong>
|
||||
</CCallout>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<hr class="mt-0">
|
||||
<ul class="horizontal-bars type-2">
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon name="cil-user" class="progress-group-icon"/>
|
||||
<span class="title">Male</span>
|
||||
<span class="ml-auto font-weight-bold">43%</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="43"
|
||||
color="warning"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-5">
|
||||
<div class="progress-group-header">
|
||||
<CIcon name="cil-user-female" class="progress-group-icon"/>
|
||||
<span class="title">Female</span>
|
||||
<span class="ml-auto font-weight-bold">37%</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="37"
|
||||
color="warning"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon name="cil-globe-alt" class="progress-group-icon"/>
|
||||
<span class="title">Organic Search</span>
|
||||
<span class="ml-auto font-weight-bold">
|
||||
191,235 <span class="text-muted small">(56%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="56"
|
||||
color="success"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon
|
||||
name="cib-facebook"
|
||||
height="17"
|
||||
class="progress-group-icon"
|
||||
/>
|
||||
<span class="title">Facebook</span>
|
||||
<span class="ml-auto font-weight-bold">
|
||||
51,223 <span class="text-muted small">(15%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="15"
|
||||
color="success"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon
|
||||
name="cib-twitter"
|
||||
height="17"
|
||||
class="progress-group-icon"
|
||||
/>
|
||||
<span class="title">Twitter</span>
|
||||
<span class="ml-auto font-weight-bold">
|
||||
37,564 <span class="text-muted small">(11%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="11"
|
||||
color="success"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon
|
||||
name="cib-linkedin"
|
||||
height="17"
|
||||
class="progress-group-icon"
|
||||
/>
|
||||
<span class="title">LinkedIn</span>
|
||||
<span class="ml-auto font-weight-bold">
|
||||
27,319 <span class="text-muted small"> (8%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="8"
|
||||
color="success"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider text-center">
|
||||
<CButton color="link" size="sm" class="text-muted">
|
||||
<CIcon name="cil-options"/>
|
||||
</CButton>
|
||||
</div>
|
||||
</ul>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<br/>
|
||||
<CDataTable
|
||||
class="mb-0 table-outline"
|
||||
hover
|
||||
:items="tableItems"
|
||||
:fields="tableFields"
|
||||
head-color="light"
|
||||
no-sorting
|
||||
>
|
||||
</CDataTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MainChartExample from './charts/MainChartExample'
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
MainChartExample,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selected: 'Month',
|
||||
tableItems: [
|
||||
{
|
||||
avatar: { url: 'img/avatars/1.jpg', status: 'success' },
|
||||
user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'USA', flag: 'cif-us' },
|
||||
usage: { value: 50, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
|
||||
activity: '10 sec ago'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'img/avatars/2.jpg', status: 'danger' },
|
||||
user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'Brazil', flag: 'cif-br' },
|
||||
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Visa', icon: 'cib-cc-visa' },
|
||||
activity: '5 minutes ago'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'img/avatars/3.jpg', status: 'warning' },
|
||||
user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'India', flag: 'cif-in' },
|
||||
usage: { value: 74, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Stripe', icon: 'cib-stripe' },
|
||||
activity: '1 hour ago'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'img/avatars/4.jpg', status: '' },
|
||||
user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'France', flag: 'cif-fr' },
|
||||
usage: { value: 98, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'PayPal', icon: 'cib-paypal' },
|
||||
activity: 'Last month'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'img/avatars/5.jpg', status: 'success' },
|
||||
user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'Spain', flag: 'cif-es' },
|
||||
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Google Wallet', icon: 'cib-google-pay' },
|
||||
activity: 'Last week'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'img/avatars/6.jpg', status: 'danger' },
|
||||
user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'Poland', flag: 'cif-pl' },
|
||||
usage: { value: 43, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Amex', icon: 'cib-cc-amex' },
|
||||
activity: 'Last week'
|
||||
}
|
||||
],
|
||||
tableFields: [
|
||||
{ key: 'avatar', label: '', _classes: 'text-center' },
|
||||
{ key: 'user' },
|
||||
{ key: 'country', _classes: 'text-center' },
|
||||
{ key: 'usage' },
|
||||
{ key: 'payment', label: 'Payment method', _classes: 'text-center' },
|
||||
{ key: 'activity' },
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
color (value) {
|
||||
let $color
|
||||
if (value <= 25) {
|
||||
$color = 'info'
|
||||
} else if (value > 25 && value <= 50) {
|
||||
$color = 'success'
|
||||
} else if (value > 50 && value <= 75) {
|
||||
$color = 'warning'
|
||||
} else if (value > 75 && value <= 100) {
|
||||
$color = 'danger'
|
||||
}
|
||||
return $color
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -6,8 +6,142 @@
|
||||
<strong>Vue Widgets</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Simple Widgets</h4>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol class="mt-4" md="4">
|
||||
<CWidgetSimple title="Lorem" value="3,141"/>
|
||||
</CCol>
|
||||
<CCol class="mt-4" md="4">
|
||||
<CWidgetSimple title="Ipsum" value="5,926"/>
|
||||
</CCol>
|
||||
<CCol class="mt-4" md="4">
|
||||
<CWidgetSimple title="Dolor" value="5,358"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol class="mt-4" md="6">
|
||||
<CWidgetSimple title="Lorem" value="3,141"/>
|
||||
</CCol>
|
||||
<CCol class="mt-4" md="6">
|
||||
<CWidgetSimple title="Ipsum" value="5,926"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Brand Widgets</h4>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol class="mt-4" md="4">
|
||||
<CWidgetBrand color="primary" :values="[['Lorem', '3,141'], ['Dolor', '5,926']]"/>
|
||||
</CCol>
|
||||
<CCol class="mt-4" md="4">
|
||||
<CWidgetBrand color="success" :values="[['Lorem', '3,141'], ['Dolor', '5,926']]"/>
|
||||
</CCol>
|
||||
<CCol class="mt-4" md="4">
|
||||
<CWidgetBrand color="danger" :values="[['Lorem', '3,141'], ['Dolor', '5,926']]"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol class="mt-4" md="6">
|
||||
<CWidgetBrand color="info" :values="[['Lorem', '3,141'], ['Dolor', '5,926']]"/>
|
||||
</CCol>
|
||||
<CCol class="mt-4" md="6">
|
||||
<CWidgetBrand color="secondary" :values="[['Lorem', '3,141'], ['Dolor', '5,926']]"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Dropdown Widgets</h4>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol class="mt-4" v-for="(item, index) in ['primary', 'success', 'danger', 'info', 'secondary']" :md="index<3 ? 4 : 6">
|
||||
<CWidgetDropdown :color="item">
|
||||
<template #value>
|
||||
3,141
|
||||
</template>
|
||||
<template #change>
|
||||
Dolor emit
|
||||
</template>
|
||||
<template #title>
|
||||
<p>Lorem ipsum</p>
|
||||
</template>
|
||||
<template #action>
|
||||
<CDropdown>
|
||||
<CDropdownToggle :color="item" class="text-white">Dropdown Button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Brand Widgets</h4>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol class="mt-4" md="4">
|
||||
<CWidgetIcon color="primary" title="Lorem ipsum" value="3,141">
|
||||
<template #default>
|
||||
<CIcon name="cil-puzzle" size="lg"/>
|
||||
</template>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol class="mt-4" md="4">
|
||||
<CWidgetIcon color="success" title="Lorem ipsum" value="5,926">
|
||||
<template #default>
|
||||
<CIcon name="cil-speedometer" size="lg"/>
|
||||
</template>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol class="mt-4" md="4">
|
||||
<CWidgetIcon color="danger" title="Lorem ipsum" value="5,358">
|
||||
<template #default>
|
||||
<CIcon name="cil-cursor" size="lg"/>
|
||||
</template>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol class="mt-4" md="6">
|
||||
<CWidgetIcon color="info" title="Lorem ipsum" value="3,141">
|
||||
<template #default>
|
||||
<CIcon name="cil-drop" size="lg"/>
|
||||
</template>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol class="mt-4" md="6">
|
||||
<CWidgetIcon color="secondary" title="Lorem ipsum" value="5,926">
|
||||
<template #default>
|
||||
<CIcon name="cil-pencil" size="lg"/>
|
||||
</template>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Progress Widgets</h4>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol class="mt-4" v-for="(item, index) in ['primary', 'success', 'danger', 'info', 'secondary']" :md="index<3 ? 4 : 6">
|
||||
<CWidgetProgress :color="item" progressValue="70" text="Lorem ipsum" title="Dolor cet emit" value="3,141" inverse/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Progress Icon Widgets</h4>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol class="mt-4" v-for="(item, index) in widgetProgressIconItems" :md="index<3 ? 4 : 6">
|
||||
<CWidgetProgressIcon :color="item.color" progressValue="70" text="Lorem ipsum" title="Dolor cet emit" value="3,141" inverse>
|
||||
<template #icon>
|
||||
<CIcon :name="item.icon" size="lg"/>
|
||||
</template>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
@@ -18,5 +152,16 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "Widgets",
|
||||
data: function(){
|
||||
return {
|
||||
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,27 @@
|
||||
<template>
|
||||
<CChartBar
|
||||
:data="defaultData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartBar } from '@coreui/vue-chartjs'
|
||||
export default {
|
||||
name: 'CChartBarExample',
|
||||
components: { CChartBar },
|
||||
computed: {
|
||||
defaultData () {
|
||||
return {
|
||||
labels: ['months'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<CChartBar
|
||||
:data="computedData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartBar } from '@coreui/vue-chartjs'
|
||||
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
|
||||
export default {
|
||||
name: 'CChartBarSimple',
|
||||
components: { CChartBar },
|
||||
props: {
|
||||
...CChartBar.props,
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: '#f87979'
|
||||
},
|
||||
pointHoverBackgroundColor: String,
|
||||
dataPoints: {
|
||||
type: Array,
|
||||
default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'Sales'
|
||||
},
|
||||
pointed: Boolean
|
||||
},
|
||||
computed: {
|
||||
defaultOptions () {
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
computedData () {
|
||||
return {
|
||||
labels: ['4','5','6','7','8','9','10','11','12','13','14','15'],
|
||||
datasets: [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
backgroundColor: getColor(this.backgroundColor),
|
||||
pointHoverBackgroundColor: getColor(this.pointHoverBackgroundColor),
|
||||
label: this.label,
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 1
|
||||
}
|
||||
],
|
||||
options: this.defaultOptions
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<CChartDoughnut
|
||||
:data="defaultData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartDoughnut } from '@coreui/vue-chartjs'
|
||||
export default {
|
||||
name: 'CChartDoughnutExample',
|
||||
components: { CChartDoughnut },
|
||||
computed: {
|
||||
defaultData () {
|
||||
return {
|
||||
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: [
|
||||
'#41B883',
|
||||
'#E46651',
|
||||
'#00D8FF',
|
||||
'#DD1B16'
|
||||
],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<CChartLine :data="defaultData"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLine } from '@coreui/vue-chartjs'
|
||||
export default {
|
||||
name: 'CChartLineExample',
|
||||
components: { CChartLine },
|
||||
computed: {
|
||||
defaultData () {
|
||||
return {
|
||||
labels: ['months', 'a', 'b', 'c', 'd'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: 'rgb(228,102,81,0.9)',
|
||||
data: [30, 39, 10, 50, 30, 70, 35]
|
||||
},
|
||||
{
|
||||
label: 'Data Two',
|
||||
backgroundColor: 'rgb(0,216,255,0.9)',
|
||||
data: [39, 80, 40, 35, 40, 20, 45]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:data="computedData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLine } from '@coreui/vue-chartjs'
|
||||
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
|
||||
export default {
|
||||
name: 'CChartLineSimple',
|
||||
components: { CChartLine },
|
||||
props: {
|
||||
...CChartLine.props,
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: 'rgba(255,255,255,.55)'
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
dataPoints: {
|
||||
type: Array,
|
||||
default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'Sales'
|
||||
},
|
||||
pointed: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
pointHoverBackgroundColor: String
|
||||
},
|
||||
computed: {
|
||||
pointHoverColor () {
|
||||
if (this.pointHoverBackgroundColor) {
|
||||
return this.pointHoverBackgroundColor
|
||||
} else if (this.backgroundColor !== 'transparent') {
|
||||
return this.backgroundColor
|
||||
}
|
||||
return this.borderColor
|
||||
},
|
||||
computedData () {
|
||||
return {
|
||||
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
|
||||
datasets: [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
borderColor: getColor(this.borderColor),
|
||||
backgroundColor: getColor(this.backgroundColor),
|
||||
pointBackgroundColor: getColor(this.pointHoverColor),
|
||||
pointHoverBackgroundColor: getColor(this.pointHoverColor),
|
||||
label: this.label
|
||||
}
|
||||
],
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:data="computedData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLine } from '@coreui/vue-chartjs'
|
||||
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
|
||||
export default {
|
||||
name: 'CChartLineSimplePointed',
|
||||
components: { CChartLine },
|
||||
props: {
|
||||
...CChartLine.props,
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: 'rgba(255,255,255,.55)'
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
dataPoints: {
|
||||
type: Array,
|
||||
default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'Sales'
|
||||
},
|
||||
pointed: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
pointHoverBackgroundColor: String
|
||||
},
|
||||
computed: {
|
||||
pointHoverColor () {
|
||||
if (this.pointHoverBackgroundColor) {
|
||||
return this.pointHoverBackgroundColor
|
||||
} else if (this.backgroundColor !== 'transparent') {
|
||||
return this.backgroundColor
|
||||
}
|
||||
return this.borderColor
|
||||
},
|
||||
computedData () {
|
||||
return {
|
||||
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
|
||||
datasets: [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
borderColor: getColor(this.borderColor),
|
||||
backgroundColor: getColor(this.backgroundColor),
|
||||
pointBackgroundColor: getColor(this.pointHoverColor),
|
||||
pointHoverBackgroundColor: getColor(this.pointHoverColor),
|
||||
label: this.label
|
||||
}
|
||||
],
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
offset: true,
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: Math.min.apply(Math, this.dataPoints) - 5,
|
||||
max: Math.max.apply(Math, this.dataPoints) + 5
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<CChartPie
|
||||
:data="defaultData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartPie } from '@coreui/vue-chartjs'
|
||||
export default {
|
||||
name: 'CChartPieExample',
|
||||
components: { CChartPie },
|
||||
computed: {
|
||||
defaultData () {
|
||||
return {
|
||||
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: [
|
||||
'#41B883',
|
||||
'#E46651',
|
||||
'#00D8FF',
|
||||
'#DD1B16'
|
||||
],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<CChartPolarArea
|
||||
:data="defaultData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartPolarArea } from '@coreui/vue-chartjs'
|
||||
export default {
|
||||
name: 'CChartPolarAreaExample',
|
||||
components: { CChartPolarArea },
|
||||
computed: {
|
||||
defaultData () {
|
||||
return {
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(179,181,198,0.5)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'rgba(255,99,132,0.5)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
],
|
||||
options: {
|
||||
aspectRatio: 1.5
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<CChartRadar
|
||||
:data="defaultData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartRadar } from '@coreui/vue-chartjs'
|
||||
export default {
|
||||
name: 'CChartRadarExample',
|
||||
components: { CChartRadar },
|
||||
computed: {
|
||||
defaultData () {
|
||||
return {
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [
|
||||
{
|
||||
label: '2020',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
borderColor: 'rgba(179,181,198,1)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
tooltipLabelColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: '2021',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
borderColor: 'rgba(255,99,132,1)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
tooltipLabelColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
],
|
||||
options: {
|
||||
aspectRatio: 1.5
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Line Chart
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartLineExample/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>Bar Chart</CCardHeader>
|
||||
<CCardBody><CChartBarExample/></CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>Doughnut Chart</CCardHeader>
|
||||
<CCardBody><CChartDoughnutExample/></CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>Radar Chart</CCardHeader>
|
||||
<CCardBody><CChartRadarExample/></CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>Pie Chart</CCardHeader>
|
||||
<CCardBody><CChartPieExample/></CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>Polar Area Chart</CCardHeader>
|
||||
<CCardBody><CChartPolarAreaExample/></CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>Simple line chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartLineSimple border-color="success" labels="months"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<!--
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>Simple pointed chart</CCardHeader>
|
||||
<CCardBody><CChartLineSimplePointed :pointed="true" border-color="warning"/></CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
-->
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>Simple bar chart</CCardHeader>
|
||||
<CCardBody><CChartBarSimple background-color="danger"/></CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Charts from './index.js'
|
||||
export default {
|
||||
name: 'Charts',
|
||||
components: {
|
||||
...Charts
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="chart-container" style="position: relative; height:100px;">
|
||||
<CChartLine :data="defaultData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLine } from '@coreui/vue-chartjs'
|
||||
import { getStyle, hexToRgba } from '@coreui/utils/src'
|
||||
function random (min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
export default {
|
||||
name: 'MainChartExample',
|
||||
components: {
|
||||
CChartLine
|
||||
},
|
||||
computed: {
|
||||
defaultData () {
|
||||
return {
|
||||
labels: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
|
||||
datasets: this.defaultDatasets,
|
||||
options: this.defaultOptions
|
||||
}
|
||||
},
|
||||
defaultDatasets () {
|
||||
const brandSuccess = getStyle('success2') || '#4dbd74'
|
||||
const brandInfo = getStyle('info') || '#20a8d8'
|
||||
const brandDanger = getStyle('danger') || '#f86c6b'
|
||||
let elements = 27
|
||||
const data1 = []
|
||||
const data2 = []
|
||||
const data3 = []
|
||||
for (let i = 0; i <= elements; i++) {
|
||||
data1.push(random(50, 200))
|
||||
data2.push(random(80, 100))
|
||||
data3.push(65)
|
||||
}
|
||||
return [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: hexToRgba(brandInfo, 10),
|
||||
borderColor: brandInfo,
|
||||
pointHoverBackgroundColor: brandInfo,
|
||||
borderWidth: 2,
|
||||
data: data1
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandSuccess,
|
||||
pointHoverBackgroundColor: brandSuccess,
|
||||
borderWidth: 2,
|
||||
data: data2
|
||||
},
|
||||
{
|
||||
label: 'My Third dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandDanger,
|
||||
pointHoverBackgroundColor: brandDanger,
|
||||
borderWidth: 1,
|
||||
borderDash: [8, 5],
|
||||
data: data3
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions () {
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 30,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
drawOnChartArea: false
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
maxTicksLimit: 5,
|
||||
stepSize: Math.ceil(250 / 5),
|
||||
max: 250
|
||||
},
|
||||
gridLines: {
|
||||
display: true
|
||||
}
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.chart-wrapper canvas{
|
||||
max-height: 288px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,21 @@
|
||||
import CChartLineSimple from './CChartLineSimple'
|
||||
import CChartLineSimplePointed from './CChartLineSimplePointed'
|
||||
import CChartBarSimple from './CChartBarSimple'
|
||||
import CChartLineExample from './CChartLineExample'
|
||||
import CChartBarExample from './CChartBarExample'
|
||||
import CChartDoughnutExample from './CChartDoughnutExample'
|
||||
import CChartRadarExample from './CChartRadarExample'
|
||||
import CChartPieExample from './CChartPieExample'
|
||||
import CChartPolarAreaExample from './CChartPolarAreaExample'
|
||||
|
||||
export {
|
||||
CChartLineSimple,
|
||||
CChartLineSimplePointed,
|
||||
CChartBarSimple,
|
||||
CChartLineExample,
|
||||
CChartBarExample,
|
||||
CChartDoughnutExample,
|
||||
CChartRadarExample,
|
||||
CChartPieExample,
|
||||
CChartPolarAreaExample
|
||||
}
|
||||
Reference in New Issue
Block a user