added widgets from dashboard
This commit is contained in:
woothu
+67
-156
@@ -2,79 +2,58 @@
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card no-body class="bg-primary">
|
||||
<b-card-body class="pb-0">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</b-card-body>
|
||||
<card-line1-chart-example chartId="card-chart-01" class="chart-wrapper px-3" style="height:70px;" :height="70"/>
|
||||
</b-card>
|
||||
<widget06 cardClasses="bg-primary" header="9.823" text="Members online" chartType="chart1">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card no-body class="bg-info">
|
||||
<b-card-body class="pb-0">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right no-caret>
|
||||
<template slot="button-content">
|
||||
<i class="icon-location-pin"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</b-card-body>
|
||||
<card-line2-chart-example chartId="card-chart-02" class="chart-wrapper px-3" style="height:70px;" :height="70"/>
|
||||
</b-card>
|
||||
<widget06 cardClasses="bg-info" header="9.823" text="Members online" chartType="chart2">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right no-caret>
|
||||
<template slot="button-content">
|
||||
<i class="icon-location-pin"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card no-body class="bg-warning">
|
||||
<b-card-body class="pb-0">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</b-card-body>
|
||||
<card-line3-chart-example chartId="card-chart-03" class="chart-wrapper" style="height:70px;" height="70"/>
|
||||
</b-card>
|
||||
<widget06 cardClasses="bg-warning" header="9.823" text="Members online" chartType="chart3">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</widget06>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card no-body class="bg-danger">
|
||||
<b-card-body class="pb-0">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</b-card-body>
|
||||
<card-bar-chart-example chartId="card-chart-04" class="chart-wrapper px-3" style="height:70px;" height="70"/>
|
||||
</b-card>
|
||||
<widget06 cardClasses="bg-danger" header="9.823" text="Members online" chartType="chart4">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</widget06>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-card>
|
||||
<b-row>
|
||||
<b-col sm="5">
|
||||
@@ -124,88 +103,23 @@
|
||||
</div>
|
||||
</b-card>
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<div class="brand-card">
|
||||
<div class="brand-card-header bg-facebook">
|
||||
<i class="fa fa-facebook"></i>
|
||||
<div class="chart-wrapper">
|
||||
<social-box-chart-example chartId="box-chart-01" :data="[65, 59, 84, 84, 51, 55, 40]" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-card-body">
|
||||
<div>
|
||||
<div class="text-value">89k</div>
|
||||
<div class="text-uppercase text-muted small">friends</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-value">459</div>
|
||||
<div class="text-uppercase text-muted small">feeds</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<div class="brand-card">
|
||||
<div class="brand-card-header bg-twitter">
|
||||
<i class="fa fa-twitter"></i>
|
||||
<div class="chart-wrapper">
|
||||
<social-box-chart-example chartId="box-chart-02" :data="[1, 13, 9, 17, 34, 41, 38]" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-card-body">
|
||||
<div>
|
||||
<div class="text-value">973k</div>
|
||||
<div class="text-uppercase text-muted small">followers</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-value">1.792</div>
|
||||
<div class="text-uppercase text-muted small">tweets</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<div class="brand-card">
|
||||
<div class="brand-card-header bg-linkedin">
|
||||
<i class="fa fa-linkedin"></i>
|
||||
<div class="chart-wrapper">
|
||||
<social-box-chart-example chartId="box-chart-03" :data="[78, 81, 80, 45, 34, 12, 40]" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-card-body">
|
||||
<div>
|
||||
<div class="text-value">500+</div>
|
||||
<div class="text-uppercase text-muted small">contacts</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-value">292</div>
|
||||
<div class="text-uppercase text-muted small">feeds</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<div class="brand-card">
|
||||
<div class="brand-card-header bg-google-plus">
|
||||
<i class="fa fa-google-plus"></i>
|
||||
<div class="chart-wrapper">
|
||||
<social-box-chart-example chartId="box-chart-04" :data="[35, 23, 56, 22, 97, 23, 64]" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-card-body">
|
||||
<div>
|
||||
<div class="text-value">894</div>
|
||||
<div class="text-uppercase text-muted small">followers</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-value">92</div>
|
||||
<div class="text-uppercase text-muted small">circles</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="3" sm="6">
|
||||
<widget04 type="facebook" :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
|
||||
rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<widget04 type="twitter" :dataPoints="[1, 13, 9, 17, 34, 41, 38]"
|
||||
rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<widget04 type="linkedin" :dataPoints="[78, 81, 80, 45, 34, 12, 40]"
|
||||
rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
|
||||
</b-col>
|
||||
<b-col md="3" sm="6">
|
||||
<widget04 type="google-plus" :dataPoints="[35, 23, 56, 22, 97, 23, 64]"
|
||||
rightHeader="894" rightFooter="followers" leftHeader="92" leftFooter="circles"/>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-col md="12">
|
||||
<b-card header="Traffic & Sales">
|
||||
<b-row>
|
||||
@@ -449,26 +363,23 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CardLine1ChartExample from './dashboard/CardLine1ChartExample'
|
||||
import CardLine2ChartExample from './dashboard/CardLine2ChartExample'
|
||||
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 '@coreui/vue'
|
||||
import Widget04 from './widgets/Widget04'
|
||||
import Widget06 from './widgets/Widget06'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'dashboard',
|
||||
components: {
|
||||
Callout,
|
||||
CardLine1ChartExample,
|
||||
CardLine2ChartExample,
|
||||
CardLine3ChartExample,
|
||||
CardBarChartExample,
|
||||
MainChartExample,
|
||||
SocialBoxChartExample,
|
||||
CalloutChartExample
|
||||
CalloutChartExample,
|
||||
Widget04,
|
||||
Widget06
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<b-card :class="styleClasses">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i :class="iconClasses"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">{{header}}</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
|
||||
<b-progress height={} :variant="variant" :value="value"
|
||||
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
|
||||
</b-card>
|
||||
<b-card :class="styleClasses">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i :class="iconClasses"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">{{header}}</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
|
||||
<b-progress height={} :variant="variant" :value="value"
|
||||
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<b-card no-body :class="cardClasses">
|
||||
<b-card-body class="pb-0">
|
||||
<slot></slot>
|
||||
<h4 class="mb-0">{{header}}</h4>
|
||||
<p>{{text}}</p>
|
||||
</b-card-body>
|
||||
<card-line1-chart-example v-if="chartType == 'chart1'" chartId="card-chart-01" class="chart-wrapper px-3" style="height:70px;" :height="chartHeight"/>
|
||||
<card-line2-chart-example v-if="chartType == 'chart2'"chartId="card-chart-02" class="chart-wrapper px-3" style="height:70px;" :height="chartHeight"/>
|
||||
<card-line3-chart-example v-if="chartType == 'chart3'"chartId="card-chart-03" class="chart-wrapper" style="height:70px;" :height="chartHeight"/>
|
||||
<card-bar-chart-example v-if="chartType == 'chart4'" chartId="card-chart-04" class="chart-wrapper px-3" style="height:70px;" :height="chartHeight"/>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CardLine1ChartExample from './../dashboard/CardLine1ChartExample'
|
||||
import CardLine2ChartExample from './../dashboard/CardLine2ChartExample'
|
||||
import CardLine3ChartExample from './../dashboard/CardLine3ChartExample'
|
||||
import CardBarChartExample from './../dashboard/CardBarChartExample'
|
||||
|
||||
export default {
|
||||
components:{
|
||||
CardLine1ChartExample,
|
||||
CardLine2ChartExample,
|
||||
CardLine3ChartExample,
|
||||
CardBarChartExample
|
||||
},
|
||||
name: 'Widget06',
|
||||
data () {
|
||||
return{
|
||||
backgroundColor: '',
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
props: {
|
||||
cardClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
header: {
|
||||
type: String,
|
||||
default: 'header|string'
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'text|string'
|
||||
},
|
||||
chartType:{
|
||||
type: String,
|
||||
default: 'chart1'
|
||||
},
|
||||
chartHeight:{
|
||||
type: Number,
|
||||
default: 70
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user