somewhere
This commit is contained in:
Swift
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<CSubheader
|
||||
class="custom-subheader px-3"
|
||||
:class="[sidebarShow ? null : 'sideBarClose', sidebarMinimize ? 'sideBarMinimized' : 'sideBarFull']"
|
||||
>
|
||||
<slot />
|
||||
</CSubheader>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
sidebarShow() {
|
||||
return this.$store.state.admin.sidebarShow
|
||||
},
|
||||
sidebarMinimize() {
|
||||
return this.$store.state.admin.sidebarMinimize
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,21 @@
|
||||
import Vue from 'vue'
|
||||
|
||||
Vue.component('RenderString', {
|
||||
props: {
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
string: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
const render = {
|
||||
template: '<div>' + this.string + '</div>',
|
||||
methods: {
|
||||
markComplete() {
|
||||
console.log('the method called')
|
||||
}
|
||||
}
|
||||
}
|
||||
return h(render)
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<CFooter :fixed="false">
|
||||
<div class="mfs-auto">
|
||||
<span class="mr-1" target="_blank">Powered by</span>
|
||||
<a href="https://negarehagency.com/" target="_blank" class="copy-right">Negareh Agency</a>
|
||||
</div>
|
||||
</CFooter>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TheFooter'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<CHeader fixed with-subheader light>
|
||||
<CToggler in-header class="ml-3 d-lg-none" @click="$store.commit('admin/toggleSidebarMobile')" />
|
||||
<CToggler in-header class="ml-3 d-md-down-none" @click="$store.commit('admin/toggleSidebarDesktop')" />
|
||||
<!-- <CHeaderBrand class="mx-auto d-lg-none" to="/">-->
|
||||
<!-- <CIcon name="logo" height="48" alt="Logo"/>-->
|
||||
<!-- </CHeaderBrand>-->
|
||||
<!-- <CHeaderNav class="d-md-down-none mr-auto">-->
|
||||
<!-- <CHeaderNavItem class="px-3">-->
|
||||
<!-- <CHeaderNavLink :to="{name: 'admin'}">-->
|
||||
<!-- صفحه اصلی-->
|
||||
<!-- </CHeaderNavLink>-->
|
||||
<!-- </CHeaderNavItem>-->
|
||||
<!-- </CHeaderNav>-->
|
||||
<CHeaderNav class="mr-4 mr-auto">
|
||||
<TheHeaderDropdownAccnt />
|
||||
</CHeaderNav>
|
||||
</CHeader>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TheHeader',
|
||||
data() {
|
||||
return {
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'صفحه اصلی',
|
||||
to: '/admin'
|
||||
},
|
||||
{
|
||||
text: 'لیست دانلود ها',
|
||||
to: { name: 'admin-downloads' }
|
||||
},
|
||||
{
|
||||
text: 'This is a span'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<CDropdown in-nav class="c-header-nav-items" placement="bottom-end" add-menu-classes="pt-0">
|
||||
<template #toggler>
|
||||
<CHeaderNavLink>
|
||||
<div class="c-avatar">
|
||||
<img src="/img/avatars/avatar.png" class="c-avatar-img" alt="" title="حساب کاربری" />
|
||||
</div>
|
||||
</CHeaderNavLink>
|
||||
</template>
|
||||
<CDropdownHeader tag="div" class="text-center" color="light">
|
||||
<strong v-if="$auth.loggedIn">{{ $auth.user.first_name }}</strong>
|
||||
</CDropdownHeader>
|
||||
|
||||
<!-- <CDropdownItem :to="{name: 'admin-users'}">-->
|
||||
<!-- <CIcon name="cil-user"/>-->
|
||||
<!-- <span>پروفایل</span>-->
|
||||
<!-- </CDropdownItem>-->
|
||||
|
||||
<CDropdownItem @click="logOut">
|
||||
<CIcon name="cil-lock-locked" />
|
||||
<span>خروج از حساب</span>
|
||||
</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TheHeaderDropdownAccnt',
|
||||
data() {
|
||||
return {
|
||||
itemsCount: 42
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
logOut() {
|
||||
this.$confirm('میخواهید از حساب کاربری خارج شوید؟', 'هشدار', {
|
||||
confirmButtonText: 'بله',
|
||||
cancelButtonText: 'لغو',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
await this.$auth.logout()
|
||||
window.location.href = '/'
|
||||
} catch (e) {
|
||||
console.log(e.response.data)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: 'عملیات لغو شد'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.c-icon {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,331 @@
|
||||
<template>
|
||||
<CSidebar
|
||||
fixed
|
||||
:minimize="minimize"
|
||||
:show="show"
|
||||
@update:show="value => $store.commit('admin/set', ['sidebarShow', value])"
|
||||
>
|
||||
<CSidebarBrand class="d-md-down-none">
|
||||
<a href="/" target="_blank">
|
||||
<logo class="c-sidebar-brand-full" size="custom-size" :height="40" name="logo" />
|
||||
<img
|
||||
src="assets/img/favicon_white.png"
|
||||
alt="logo"
|
||||
class="c-sidebar-brand-minimized"
|
||||
size="custom-size"
|
||||
:height="35"
|
||||
name="logo"
|
||||
/>
|
||||
</a>
|
||||
</CSidebarBrand>
|
||||
|
||||
<!-- <CRenderFunction flat :content-to-render="$options.nav"/>-->
|
||||
|
||||
<!-- sidebar content -->
|
||||
<CSidebarNav>
|
||||
<CSidebarNavItem name="صفحه اصلی" :to="{ name: 'admin' }" icon="cil-speedometer" />
|
||||
|
||||
<CSidebarNavDropdown
|
||||
:show="getDropdownState('adminS_WebsiteM_Dropdown')"
|
||||
name="مدیریت وبسایت"
|
||||
font-icon="fas fa-folder"
|
||||
@update:show="val => setDropdownState('adminS_WebsiteM_Dropdown', val)"
|
||||
>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('downloads')"
|
||||
name="لیست دانلود ها"
|
||||
:to="{ name: 'admin-downloads-page', params: { page: 1 } }"
|
||||
font-icon="fal fa-arrow-alt-to-bottom"
|
||||
:exact="false"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('download-categories')"
|
||||
name="دسته بندی دانلود"
|
||||
:to="{ name: 'admin-download-categories' }"
|
||||
font-icon="fal fa-arrow-alt-to-bottom"
|
||||
:exact="false"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('learning')"
|
||||
name="آموزش ها"
|
||||
:to="{ name: 'admin-learning-page', params: { page: 1 } }"
|
||||
icon="cil-chart-pie"
|
||||
:exact="false"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('warranty-terms')"
|
||||
name="شرایط گارانتی"
|
||||
:to="{ name: 'admin-warranty-terms-page', params: { page: 1 } }"
|
||||
font-icon="fal fa-file-alt"
|
||||
:exact="false"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('faq')"
|
||||
name="سوالات متداول"
|
||||
:to="{ name: 'admin-faq' }"
|
||||
font-icon="fal fa-file-alt"
|
||||
:exact="false"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('help')"
|
||||
name="راهنمای ثبت گارانتی"
|
||||
:to="{ name: 'admin-help' }"
|
||||
font-icon="fal fa-file-alt"
|
||||
exact
|
||||
/>
|
||||
</CSidebarNavDropdown>
|
||||
|
||||
<CSidebarNavDropdown
|
||||
v-if="hasPermission('downloads')"
|
||||
:show="getDropdownState('adminS_CustomerM_Dropdown')"
|
||||
name="مدیریت مشتریان"
|
||||
font-icon="fas fa-folder"
|
||||
@update:show="val => setDropdownState('adminS_CustomerM_Dropdown', val)"
|
||||
>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('contact-us')"
|
||||
name="پیام های صفحه تماس با ما"
|
||||
:to="{ name: 'admin-contact-us' }"
|
||||
font-icon="fal fa-envelope"
|
||||
:exact="false"
|
||||
:badge="unreadCuMsgs ? { text: unreadCuMsgs, color: 'danger' } : null"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('customers')"
|
||||
name="لیست مشتریان"
|
||||
:to="{ name: 'admin-customers', query: { filter: 'all' } }"
|
||||
font-icon="fal fa-list"
|
||||
:exact="false"
|
||||
:badge="newCustomers ? { text: newCustomers, color: 'danger' } : null"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('tickets')"
|
||||
name="تیکت های مشتریان"
|
||||
:to="{ name: 'admin-tickets' }"
|
||||
font-icon="fal fa-comment-alt-dots"
|
||||
:exact="false"
|
||||
:badge="unreadTickets ? { text: unreadTickets, color: 'danger' } : null"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('tickets')"
|
||||
name="ایجاد تیکت برای مشتری"
|
||||
:to="{ name: 'admin-add-tickets' }"
|
||||
font-icon="fal fa-plus"
|
||||
exact
|
||||
/>
|
||||
</CSidebarNavDropdown>
|
||||
|
||||
<CSidebarNavDropdown
|
||||
:show="getDropdownState('adminS_AgentM_Dropdown')"
|
||||
name="مدیریت نمایندگان"
|
||||
font-icon="fas fa-folder"
|
||||
@update:show="val => setDropdownState('adminS_AgentM_Dropdown', val)"
|
||||
>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('representations')"
|
||||
name="درخواست های نمایندگی"
|
||||
:to="{ name: 'admin-representations', query: { status: 'registered' } }"
|
||||
font-icon="fas fa-handshake"
|
||||
:exact="false"
|
||||
:badge="newRepresentations ? { text: newRepresentations, color: 'danger' } : null"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('agents')"
|
||||
name="لیست نمایندگان"
|
||||
:to="{ name: 'admin-agents', query: { agent: true } }"
|
||||
font-icon="fas fa-list"
|
||||
:exact="false"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('agents')"
|
||||
name="نمایندگان صلب امتیاز شده"
|
||||
:to="{ name: 'admin-agents', query: { revoked: true } }"
|
||||
font-icon="fas fa-list"
|
||||
:exact="false"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('agentsInbox')"
|
||||
name="صندوق ورودی نمایندگان"
|
||||
:to="{ name: 'admin-agentsInbox', query: { status: 'all' } }"
|
||||
font-icon="fas fa-inbox"
|
||||
:exact="false"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('piece-requests')"
|
||||
name="درخواست های قطعه"
|
||||
:to="{ name: 'admin-piece-requests', query: { status: 'sent' } }"
|
||||
font-icon="fas fa-wrench"
|
||||
:exact="false"
|
||||
:badge="newPieceRequests ? { text: newPieceRequests, color: 'danger' } : null"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('op-requests')"
|
||||
name="درخواست های قطعه داغی"
|
||||
:to="{ name: 'admin-op-requests', query: { status: 'sent' } }"
|
||||
font-icon="fas fa-backpack"
|
||||
:exact="false"
|
||||
:badge="newOldPieceRequests ? { text: newOldPieceRequests, color: 'danger' } : null"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('buffer-requests')"
|
||||
name="درخواست های کالای بافر"
|
||||
:to="{ name: 'admin-buffer-requests', query: { status: 'sent' } }"
|
||||
font-icon="fab fa-buffer"
|
||||
:exact="false"
|
||||
:badge="newBufferRequests ? { text: newBufferRequests, color: 'danger' } : null"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('guarantee-reports')"
|
||||
name="فرم های عملکرد گارانتی"
|
||||
:to="{ name: 'admin-guarantee-reports' }"
|
||||
font-icon="fas fa-file-chart-line"
|
||||
:exact="false"
|
||||
:badge="newGuaranteeReports ? { text: newGuaranteeReports, color: 'danger' } : null"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('agentReports')"
|
||||
name="گزارشات"
|
||||
:to="{ name: 'admin-agentReports' }"
|
||||
font-icon="fas fa-file-chart-pie"
|
||||
:exact="false"
|
||||
/>
|
||||
</CSidebarNavDropdown>
|
||||
|
||||
<CSidebarNavDropdown
|
||||
v-if="hasPermission('admins')"
|
||||
:show="getDropdownState('adminS_AdminsM_Dropdown')"
|
||||
name="مدیریت ادمین ها"
|
||||
font-icon="fas fa-folder"
|
||||
@update:show="val => setDropdownState('adminS_AdminsM_Dropdown', val)"
|
||||
>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('admins')"
|
||||
name="افزودن ادمین"
|
||||
:to="{ name: 'admin-admins-admin', params: { admin: 'new' } }"
|
||||
font-icon="fal fa-user"
|
||||
:exact="false"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('admins')"
|
||||
name="لیست ادمین ها"
|
||||
:to="{ name: 'admin-admins' }"
|
||||
font-icon="fal fa-list"
|
||||
:exact="false"
|
||||
/>
|
||||
</CSidebarNavDropdown>
|
||||
|
||||
<CSidebarNavDropdown
|
||||
:show="getDropdownState('adminS_AppM_Dropdown')"
|
||||
name="مدیریت اپلیکیشن"
|
||||
font-icon="fas fa-folder"
|
||||
@update:show="val => setDropdownState('adminS_AppM_Dropdown', val)"
|
||||
>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('announcements')"
|
||||
name="اعلانات مشتریان"
|
||||
:to="{ name: 'admin-announcements', query: { user: true } }"
|
||||
font-icon="fal fa-bell"
|
||||
:exact="false"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('announcements')"
|
||||
name="اطلاعیه های نمایندگان"
|
||||
:to="{ name: 'admin-announcements', query: { agent: true } }"
|
||||
font-icon="fal fa-bullhorn"
|
||||
:exact="false"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('sms')"
|
||||
name="ارسال پیامک"
|
||||
:to="{ name: 'admin-sms' }"
|
||||
font-icon="fas fa-sms"
|
||||
:exact="false"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('serials-exel')"
|
||||
name="فایل اکسل شماره سریال گارانتی"
|
||||
:to="{ name: 'admin-serials-exel', query: { type: 'guaranteeSerial' } }"
|
||||
font-icon="fal fa-file-excel"
|
||||
exact
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('serials-exel')"
|
||||
name="فایل اکسل شماره سریال کالا"
|
||||
:to="{ name: 'admin-serials-exel', query: { type: 'orginality' } }"
|
||||
font-icon="fal fa-file-excel"
|
||||
exact
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('lotteryPopUp')"
|
||||
name="دکمه قرعه کشی"
|
||||
:to="{ name: 'admin-lotteryPopUp' }"
|
||||
font-icon="fal fa-hand-pointer"
|
||||
exact
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('lottery')"
|
||||
name="قرعه کشی"
|
||||
:to="{ name: 'admin-lottery' }"
|
||||
font-icon="fal fa-calendar-check"
|
||||
:exact="false"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('surveys')"
|
||||
name="نظرسنجی"
|
||||
:to="{ name: 'admin-surveys' }"
|
||||
font-icon="fal fa-chart-bar"
|
||||
:exact="false"
|
||||
/>
|
||||
<CSidebarNavItem
|
||||
v-if="hasPermission('pieces')"
|
||||
name="لیست قطعات"
|
||||
:to="{ name: 'admin-pieces' }"
|
||||
font-icon="fas fa-wrench"
|
||||
:exact="false"
|
||||
/>
|
||||
</CSidebarNavDropdown>
|
||||
</CSidebarNav>
|
||||
<!-- sidebar content -->
|
||||
|
||||
<CSidebarMinimizer
|
||||
class="d-md-down-none"
|
||||
@click.native="$store.commit('admin/set', ['sidebarMinimize', !minimize])"
|
||||
/>
|
||||
</CSidebar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import nav from './_nav'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'TheSidebar',
|
||||
// nav,
|
||||
computed: {
|
||||
...mapState({
|
||||
show: state => state.admin.sidebarShow,
|
||||
minimize: state => state.admin.sidebarMinimize,
|
||||
unreadCuMsgs: state => state.admin.unreadCuMsgs,
|
||||
unreadTickets: state => state.admin.unreadTickets,
|
||||
newCustomers: state => state.admin.newCustomers,
|
||||
newRepresentations: state => state.admin.newRepresentations,
|
||||
newPieceRequests: state => state.admin.newPieceRequests,
|
||||
newOldPieceRequests: state => state.admin.newOldPieceRequests,
|
||||
newBufferRequests: state => state.admin.newBufferRequests,
|
||||
newGuaranteeReports: state => state.admin.newGuaranteeReports
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
hasPermission(permission) {
|
||||
if (this.$auth.loggedIn) return this.$auth.user.permissions.includes(permission)
|
||||
else return false
|
||||
},
|
||||
setDropdownState(id, state) {
|
||||
localStorage.setItem(id, state)
|
||||
},
|
||||
getDropdownState(id) {
|
||||
return localStorage.getItem(id) === 'true'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,66 @@
|
||||
export default [
|
||||
{
|
||||
_name: 'CSidebarNav',
|
||||
_children: [
|
||||
{
|
||||
_name: 'CSidebarNavItem',
|
||||
name: 'صفحه اصلی',
|
||||
to: { name: 'admin' },
|
||||
icon: 'cil-speedometer'
|
||||
},
|
||||
// {
|
||||
// _name: 'CSidebarNavTitle',
|
||||
// _children: ['مدیریت صفحات داینامیک']
|
||||
// },
|
||||
{
|
||||
_name: 'CSidebarNavDropdown',
|
||||
name: 'دانلود ها',
|
||||
// route: {name: 'admin-download'},
|
||||
fontIcon: 'fal fa-arrow-alt-to-bottom',
|
||||
items: [
|
||||
{
|
||||
name: 'لیست',
|
||||
to: { name: 'admin-downloads-page', params: { page: 1 } },
|
||||
exact: false
|
||||
},
|
||||
{
|
||||
name: 'دسته بندی ها',
|
||||
to: { name: 'admin-download-categories' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
_name: 'CSidebarNavItem',
|
||||
name: 'آموزش ها',
|
||||
to: { name: 'admin-learning-page', params: { page: 1 } },
|
||||
exact: false,
|
||||
icon: 'cil-chart-pie'
|
||||
},
|
||||
{
|
||||
_name: 'CSidebarNavItem',
|
||||
name: 'شرایط گارانتی',
|
||||
to: { name: 'admin-warranty-terms-page', params: { page: 1 } },
|
||||
exact: false,
|
||||
fontIcon: 'fal fa-file-alt'
|
||||
},
|
||||
{
|
||||
_name: 'CSidebarNavItem',
|
||||
name: 'سوالات متداول',
|
||||
to: { name: 'admin-FAQ' },
|
||||
exact: false,
|
||||
fontIcon: 'fal fa-graduation-cap'
|
||||
},
|
||||
{
|
||||
_name: 'CSidebarNavItem',
|
||||
name: 'پیام های صفحه تماس با ما',
|
||||
to: { name: 'admin-contact-us' },
|
||||
exact: false,
|
||||
badge: {
|
||||
color: 'primary'
|
||||
// text: this.computed.unreadMessages
|
||||
},
|
||||
fontIcon: 'fal fa-id-card-alt'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<CChartBar :datasets="defaultDatasets" labels="months" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartBarExample',
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,78 @@
|
||||
/* eslint-disable vue/require-default-prop */
|
||||
<template>
|
||||
<CChartBar :datasets="computedDatasets" :options="computedOptions" :labels="labels" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CoreUtils from '~/mixins/CoreUtils'
|
||||
|
||||
export default {
|
||||
name: 'CChartBarSimple',
|
||||
mixins: [CoreUtils],
|
||||
props: {
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
datasets: Array,
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
labels: [Array, String],
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
options: Object,
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
plugins: Array,
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'rgba(0,0,0,.2)'
|
||||
},
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
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: {
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
backgroundColor: this.getColor(this.backgroundColor),
|
||||
pointHoverBackgroundColor: this.getColor(this.pointHoverBackgroundColor),
|
||||
label: this.label,
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions() {
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
display: false
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: false
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computedDatasets() {
|
||||
return this.deepObjectsMerge(this.defaultDatasets, this.datasets || {})
|
||||
},
|
||||
computedOptions() {
|
||||
return this.deepObjectsMerge(this.defaultOptions, this.options || {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<CChartDoughnut :datasets="defaultDatasets" :labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartDoughnutExample',
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<CChartLine :datasets="defaultDatasets" labels="months" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartLineExample',
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
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,145 @@
|
||||
/* eslint-disable vue/require-default-prop */
|
||||
|
||||
<template>
|
||||
<CChartLine :datasets="computedDatasets" :options="computedOptions" :labels="labels" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CoreUtils from '~/mixins/CoreUtils'
|
||||
|
||||
export default {
|
||||
name: 'CChartLineSimple',
|
||||
mixins: [CoreUtils],
|
||||
props: {
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
datasets: Array,
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
labels: [Array, String],
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
options: Object,
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
plugins: Array,
|
||||
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: Boolean,
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
pointHoverBackgroundColor: String
|
||||
},
|
||||
computed: {
|
||||
pointHoverColor() {
|
||||
if (this.pointHoverBackgroundColor) {
|
||||
return this.pointHoverBackgroundColor
|
||||
} else if (this.backgroundColor !== 'transparent') {
|
||||
return this.backgroundColor
|
||||
}
|
||||
return this.borderColor
|
||||
},
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
borderColor: this.getColor(this.borderColor),
|
||||
backgroundColor: this.getColor(this.backgroundColor),
|
||||
pointBackgroundColor: this.getColor(this.pointHoverColor),
|
||||
pointHoverBackgroundColor: this.getColor(this.pointHoverColor),
|
||||
label: this.label
|
||||
}
|
||||
]
|
||||
},
|
||||
pointedOptions() {
|
||||
return {
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
straightOptions() {
|
||||
return {
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
display: false
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: false
|
||||
}
|
||||
]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultOptions() {
|
||||
const options = this.pointed ? this.pointedOptions : this.straightOptions
|
||||
return Object.assign({}, options, {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
})
|
||||
},
|
||||
computedDatasets() {
|
||||
return this.deepObjectsMerge(this.defaultDatasets, this.datasets || {})
|
||||
},
|
||||
computedOptions() {
|
||||
return this.deepObjectsMerge(this.defaultOptions, this.options || {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<CChartPie :datasets="defaultDatasets" :labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartPieExample',
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<CChartPolarArea
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
:labels="['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartPolarAreaExample',
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
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.2)',
|
||||
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]
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions() {
|
||||
return {
|
||||
aspectRatio: 1.5
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<CChartRadar
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
:labels="['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartRadarExample',
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
label: '2019',
|
||||
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: '2020',
|
||||
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]
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions() {
|
||||
return {
|
||||
aspectRatio: 1.5
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
: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'
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { CChartLine } from '@coreui/vue-chartjs'
|
||||
// import { getStyle, hexToRgba } from '@coreui/utils/src'
|
||||
import CoreUtils from '~/mixins/CoreUtils'
|
||||
|
||||
function random(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'MainChartExample',
|
||||
mixins: [CoreUtils],
|
||||
layout: 'admin',
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
const brandSuccess = this.getStyle('success2') || '#4dbd74'
|
||||
const brandInfo = this.getStyle('info') || '#20a8d8'
|
||||
const brandDanger = this.getStyle('danger') || '#f86c6b'
|
||||
|
||||
const 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: this.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,
|
||||
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>
|
||||
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<template v-if="!noCharts">
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand color="facebook" right-header="89k" right-footer="friends" left-header="459" left-footer="feeds">
|
||||
<CIcon name="cib-facebook" height="52" class="my-4" />
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
||||
label="Friends"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="twitter"
|
||||
right-header="973k"
|
||||
right-footer="followers"
|
||||
left-header="1.792"
|
||||
left-footer="tweets"
|
||||
>
|
||||
<CIcon name="cib-twitter" height="52" class="my-4" />
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[1, 13, 9, 17, 34, 41, 38]"
|
||||
label="Followers"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="linkedin"
|
||||
right-header="500+"
|
||||
right-footer="contracts"
|
||||
left-header="292"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon name="cib-linkedin" height="52" class="my-4" />
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[78, 81, 80, 45, 34, 12, 40]"
|
||||
label="Contracts"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand right-header="12" right-footer="events" left-header="4" left-footer="meetings" color="warning">
|
||||
<CIcon name="cil-calendar" height="52" class="my-4" />
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[35, 23, 56, 22, 97, 23, 64]"
|
||||
label="Followers"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
</template>
|
||||
<template v-else>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand color="facebook" right-header="89k" right-footer="friends" left-header="459" left-footer="feeds">
|
||||
<CIcon name="cib-facebook" height="56" class="my-4" />
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="twitter"
|
||||
right-header="973k"
|
||||
right-footer="followers"
|
||||
left-header="1.792"
|
||||
left-footer="tweets"
|
||||
>
|
||||
<CIcon name="cib-twitter" height="56" class="my-4" />
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="linkedin"
|
||||
right-header="500+"
|
||||
right-footer="contracts"
|
||||
left-header="292"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon name="cib-linkedin" height="56" class="my-4" />
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand right-header="12" right-footer="events" left-header="4" left-footer="meetings" color="warning">
|
||||
<CIcon name="cil-calendar" height="56" class="my-4" />
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'WidgetsBrand',
|
||||
layout: 'admin',
|
||||
props: {
|
||||
noCharts: Boolean
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.c-chart-brand {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown color="primary" header="9.823" text="Members online">
|
||||
<template #default>
|
||||
<CDropdown color="transparent p-0" placement="bottom-end">
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-settings" />
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartLineSimple
|
||||
pointed
|
||||
class="mt-3 mx-3"
|
||||
style="height: 70px"
|
||||
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
||||
point-hover-background-color="primary"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown color="info" header="9.823" text="Members online">
|
||||
<template #default>
|
||||
<CDropdown color="transparent p-0" placement="bottom-end" :caret="false">
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-location-pin" />
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartLineSimple
|
||||
pointed
|
||||
class="mt-3 mx-3"
|
||||
style="height: 70px"
|
||||
:data-points="[1, 18, 9, 17, 34, 22, 11]"
|
||||
point-hover-background-color="info"
|
||||
:options="{ elements: { line: { tension: 0.00001 } } }"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown color="warning" header="9.823" text="Members online">
|
||||
<template #default>
|
||||
<CDropdown color="transparent p-0" placement="bottom-end">
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-settings" />
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartLineSimple
|
||||
class="mt-3"
|
||||
style="height: 70px"
|
||||
background-color="rgba(255,255,255,.2)"
|
||||
:data-points="[78, 81, 80, 45, 34, 12, 40]"
|
||||
:options="{ elements: { line: { borderWidth: 2.5 } } }"
|
||||
point-hover-background-color="warning"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown color="danger" header="9.823" text="Members online">
|
||||
<template #default>
|
||||
<CDropdown color="transparent p-0" placement="bottom-end">
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-settings" />
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartBarSimple
|
||||
class="mt-3 mx-3"
|
||||
style="height: 70px"
|
||||
background-color="rgb(250, 152, 152)"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'WidgetsDropdown',
|
||||
layout: 'admin'
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user