minor changes
This commit is contained in:
@@ -11,7 +11,12 @@ export default {
|
||||
},
|
||||
{
|
||||
title: true,
|
||||
name: 'UI elements'
|
||||
name: 'UI elements',
|
||||
class: '',
|
||||
wrapper: {
|
||||
element: '',
|
||||
attributes: {}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Components',
|
||||
@@ -63,7 +68,11 @@ export default {
|
||||
{
|
||||
name: 'Font Awesome',
|
||||
url: '/icons/font-awesome',
|
||||
icon: 'icon-star'
|
||||
icon: 'icon-star',
|
||||
badge: {
|
||||
variant: 'secondary',
|
||||
text: '4.7'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Simple Line Icons',
|
||||
@@ -77,7 +86,7 @@ export default {
|
||||
url: '/widgets',
|
||||
icon: 'icon-calculator',
|
||||
badge: {
|
||||
variant: 'danger',
|
||||
variant: 'primary',
|
||||
text: 'NEW'
|
||||
}
|
||||
},
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<ul class="nav">
|
||||
<li class="nav-item" v-for="(item, index) in navItems">
|
||||
<template v-if="item.title">
|
||||
<SidebarNavTitle :name="item.name"/>
|
||||
<SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
|
||||
</template>
|
||||
<template v-else-if="item.divider">
|
||||
<li class="divider"></li>
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
<template>
|
||||
<li class="nav-title">
|
||||
{{name}}
|
||||
<li class="nav-title" v-bind:class="classes">
|
||||
<template v-if="wrapper && wrapper.element">
|
||||
<component v-bind:is="wrapper.element" v-bind="wrapper.attributes">
|
||||
{{name}}
|
||||
</component>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{name}}
|
||||
</template>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
@@ -10,6 +17,14 @@ export default {
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
classes: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
wrapper: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -207,12 +207,18 @@
|
||||
<Callout variant="info">
|
||||
<small class="text-muted">New Clients</small><br>
|
||||
<strong class="h4">9,123</strong>
|
||||
<div class="chart-wrapper" style="width:60%">
|
||||
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<Callout variant="danger">
|
||||
<small class="text-muted">Recuring Clients</small><br>
|
||||
<small class="text-muted">Recurring Clients</small><br>
|
||||
<strong class="h4">22,643</strong>
|
||||
<div class="chart-wrapper" style="width:60%">
|
||||
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#f86c6b" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
@@ -292,12 +298,18 @@
|
||||
<Callout variant="warning">
|
||||
<small class="text-muted">Pageviews</small><br>
|
||||
<strong class="h4">78,623</strong>
|
||||
<div class="chart-wrapper" style="width:60%">
|
||||
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<Callout variant="success">
|
||||
<small class="text-muted">Organic</small><br>
|
||||
<strong class="h4">49,123</strong>
|
||||
<div class="chart-wrapper" style="width:60%">
|
||||
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80px" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
@@ -363,12 +375,18 @@
|
||||
<Callout>
|
||||
<small class="text-muted">CTR</small><br>
|
||||
<strong class="h4">23%</strong>
|
||||
<div class="chart-wrapper" style="width:60%">
|
||||
<callout-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" width="80px" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<Callout variant="primary">
|
||||
<small class="text-muted">Bounce Rate</small><br>
|
||||
<strong class="h4">5%</strong>
|
||||
<div class="chart-wrapper" style="width:60%">
|
||||
<callout-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" variant="#20a8d8" width="80px" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
@@ -534,6 +552,7 @@ import CardLine3ChartExample from './dashboard/CardLine3ChartExample'
|
||||
import CardBarChartExample from './dashboard/CardBarChartExample'
|
||||
import MainChartExample from './dashboard/MainChartExample'
|
||||
import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
|
||||
import CalloutChartExample from './dashboard/CalloutChartExample'
|
||||
import { Callout } from '../components/'
|
||||
|
||||
export default {
|
||||
@@ -545,7 +564,8 @@ export default {
|
||||
CardLine3ChartExample,
|
||||
CardBarChartExample,
|
||||
MainChartExample,
|
||||
SocialBoxChartExample
|
||||
SocialBoxChartExample,
|
||||
CalloutChartExample
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
// const brandPrimary = '#20a8d8'
|
||||
// const brandSuccess = '#4dbd74'
|
||||
// const brandInfo = '#63c2de'
|
||||
// const brandWarning = '#f8cb00'
|
||||
// const brandDanger = '#f86c6b'
|
||||
|
||||
export default Line.extend({
|
||||
props: ['data', 'height', 'width', 'variant'],
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.variant ? this.variant : '#c2cfd6',
|
||||
data: this.data
|
||||
}
|
||||
]
|
||||
}, {
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -2155,7 +2155,7 @@
|
||||
<div class="row text-center">
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
|
||||
<i class="fa fa-circle-o-notch fa-lg mt-4"></i><br>circle-o-notch
|
||||
<i class="fa fa-circle-o-notch fa-lg mt-4 fa-spin"></i><br>circle-o-notch
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
|
||||
|
||||
Reference in New Issue
Block a user