sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

Added widget charts, chart extracted from widgets.

Browse Source
This commit is contained in:
woothu
2018-10-11 12:34:59 +02:00
parent 2023248ee2
commit 364c951ef2
26 changed files with 785 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Dashboard.vue
+87 -45
View File
@@ -3,54 +3,81 @@
<b-row>
<b-col sm="6" lg="3">
<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>
<template slot='dropdown'>
<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>
</template>
<template slot='chart'>
<line-chart2 chartId="widget06_1" slot='chart' class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:70px' label='Members'/>
</template>
</widget06>
</b-col>
<b-col sm="6" lg="3">
<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>
<template slot='dropdown'>
<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>
</template>
<template slot='chart'>
<line-chart2 chartId="widget06_2" slot='chart' class='px-3' :data='[1, 18, 9, 17, 34, 22, 11]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:70px' label='Members'/>
</template>
</widget06>
</b-col>
<b-col sm="6" lg="3">
<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>
<template slot='dropdown'>
<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>
</template>
<template slot='chart'>
<line-chart1 chartId="widget06_3" slot='chart' :data='[78, 81, 80, 45, 34, 12, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:70px' backgroundColor ='rgba(255,255,255,.2)' label='Members'/>
</template>
</widget06>
</b-col>
<b-col sm="6" lg="3">
<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>
<template name='dropdown'>
<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>
</template>
<template name='chart'>
<bar-chart1 chartId="widget06_4" slot='chart' :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Members' backgroundColor='rgb(250, 152, 152)' style='height:70px'/>
</template>
</widget06>
</b-col>
</b-row>
@@ -104,20 +131,28 @@
</b-card>
<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"/>
<widget04 type="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
<line-chart1 chartId="facebook" :data='[0, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 70]' label='Friends'
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
</widget04>
</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"/>
<widget04 type="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
<line-chart1 chartId="twitter" :data='[5, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 72]' label='Followers'
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
</widget04>
</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"/>
<widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
<line-chart1 chartId="linkedIn" :data='[15, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 71]' label='Contracts'
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
</widget04>
</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"/>
<widget04 type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
<line-chart1 chartId="google-plus" :data='[10, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 74]' label='Followers'
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
</widget04>
</b-col>
</b-row><!--/.row-->
<b-col md="12">
@@ -369,6 +404,10 @@ import CalloutChartExample from './dashboard/CalloutChartExample'
import { Callout } from '@coreui/vue'
import Widget04 from './widgets/Widget04'
import Widget06 from './widgets/Widget06'
import LineChart1 from './dashboard/LineChart1'
import LineChart2 from './dashboard/LineChart2'
import BarChart1 from './dashboard/BarChart1'
export default {
@@ -379,7 +418,10 @@ export default {
SocialBoxChartExample,
CalloutChartExample,
Widget04,
Widget06
Widget06,
LineChart1,
LineChart2,
BarChart1
},
data: function () {
return {
src/views/Widgets.vue
+203 -16
View File
@@ -1,5 +1,5 @@
<template>
<div class="animated fadeIn">
<div class="animated fadeIn" @dblclick="copyTry($event)">
<b-row>
<b-col sm="6" lg="3">
<widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
@@ -79,35 +79,55 @@
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col cols="12" sm="6" lg="3">
<b-col cols="12" sm="6" lg="4">
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<b-col cols="12" sm="6" lg="4">
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<b-col cols="12" sm="6" lg="4">
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<widget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger px-5"/>
</b-col>
</b-row><!--/.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"/>
<widget04 type="facebook" 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"/>
<widget04 type="twitter" 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"/>
<widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
</b-col>
<b-col md="3" sm="6" class="codeContainer" data-code="<widget04 type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'/>">
<widget04 type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'/>
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col md="3" sm="6">
<widget04 type="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
<line-chart1 chartId="facebook" :data='[0, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 70]' label='Friends'
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
</widget04>
</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"/>
<widget04 type="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
<line-chart1 chartId="twitter" :data='[5, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 72]' label='Followers'
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
</widget04>
</b-col>
<b-col md="3" sm="6">
<widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
<line-chart1 chartId="linkedIn" :data='[15, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 71]' label='Contracts'
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
</widget04>
</b-col>
<b-col md="3" sm="6">
<widget04 type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
<line-chart1 chartId="google-plus" :data='[10, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 74]' label='Followers'
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
</widget04>
</b-col>
</b-row><!--/.row-->
<b-card-group class="mb-4">
@@ -157,6 +177,146 @@
<widget05 iconClasses="icon-speech" header="972" text="Comments" variant="background-info"/>
</b-col>
</b-row>
<b-row>
<b-col sm="6" lg="3">
<widget06 cardClasses="bg-primary" header="9.823" text="Members online" chartType="chart1">
<template slot='dropdown'>
<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>
</template>
<template slot='chart'>
<line-chart2 chartId="widget06_1" slot='chart' class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:70px' label='Members'/>
</template>
</widget06>
</b-col>
<b-col sm="6" lg="3">
<widget06 cardClasses="bg-info" header="9.823" text="Members online" chartType="chart2">
<template slot='dropdown'>
<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>
</template>
<template slot='chart'>
<line-chart2 chartId="widget06_2" slot='chart' class='px-3' :data='[1, 18, 9, 17, 34, 22, 11]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:70px' label='Members'/>
</template>
</widget06>
</b-col>
<b-col sm="6" lg="3">
<widget06 cardClasses="bg-warning" header="9.823" text="Members online" chartType="chart3">
<template slot='dropdown'>
<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>
</template>
<template slot='chart'>
<line-chart1 chartId="widget06_3" slot='chart' :data='[78, 81, 80, 45, 34, 12, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:70px' backgroundColor ='rgba(255,255,255,.2)' label='Members'/>
</template>
</widget06>
</b-col>
<b-col sm="6" lg="3">
<widget06 cardClasses="bg-danger" header="9.823" text="Members online" chartType="chart4">
<template name='dropdown'>
<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>
</template>
<template name='chart'>
<bar-chart1 chartId="widget06_4" slot='chart' :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Members' backgroundColor='rgb(250, 152, 152)' style='height:70px'/>
</template>
</widget06>
</b-col>
</b-row>
<b-row>
<b-col sm="6" lg="3">
<widget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<line-chart1 style="height:40px" chartId="widget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<bar-chart1 style="height:40px" chartId="widget07_bar1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgba(0,0,0,.2)'/>
</widget07>
</b-col>
<b-col sm="6" lg="3">
<widget07 cardClasses='bg-success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<line-chart1 style="height:40px" chartId="widget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<bar-chart1 style="height:40px" chartId="widget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgba(0,0,0,.2)'/>
</widget07>
</b-col>
<b-col sm="6" lg="3">
<widget07 cardClasses='bg-danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<line-chart1 style="height:40px" chartId="widget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<bar-chart1 style="height:40px" chartId="widget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgba(0,0,0,.2)'/>
</widget07>
</b-col>
<b-col sm="6" lg="3">
<widget07 cardClasses='bg-warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<line-chart1 style="height:40px" chartId="widget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<bar-chart1 style="height:40px" chartId="widget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgba(0,0,0,.2)'
pointHoverBackgroundColor='#FFC107'/>
</widget07>
</b-col>
</b-row>
<b-row>
<b-col sm="4" lg="2">
<widget08 header='title' text='1,123'>
<line-chart1 style="height:40px" chartId="widget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' borderColor='rgb(248, 108, 107, 1)'/>
</widget08>
</b-col>
<b-col sm="4" lg="2">
<widget08 header='title' text='1,123'>
<line-chart1 style="height:40px" chartId="widget08_2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' borderColor='rgb(32, 168, 216, 1)'/>
</widget08>
</b-col>
<b-col sm="4" lg="2">
<widget08 header='title' text='1,123'>
<line-chart1 style="height:40px" chartId="widget08_3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' borderColor='rgb(77, 189, 116)'/>
</widget08>
</b-col>
<b-col sm="4" lg="2">
<widget08 header='title' text='1,123'>
<bar-chart1 style="height:40px" chartId="widget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgb(248, 108, 107, 1)'/>
</widget08>
</b-col>
<b-col sm="4" lg="2">
<widget08 header='title' text='1,123'>
<bar-chart1 style="height:40px" chartId="widget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgb(32, 168, 216, 1)'/>
</widget08>
</b-col>
<b-col sm="4" lg="2">
<widget08 header='title' text='1,123'>
<bar-chart1 style="height:40px" chartId="widget08_6" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgb(77, 189, 116)'/>
</widget08>
</b-col>
</b-row>
</div>
</template>
@@ -166,6 +326,13 @@ import Widget02 from './widgets/Widget02'
import Widget03 from './widgets/Widget03'
import Widget04 from './widgets/Widget04'
import Widget05 from './widgets/Widget05'
import Widget06 from './widgets/Widget06'
import Widget07 from './widgets/Widget07'
import Widget08 from './widgets/Widget08'
import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
import LineChart1 from './dashboard/LineChart1'
import LineChart2 from './dashboard/LineChart2'
import BarChart1 from './dashboard/BarChart1'
export default {
name: 'Widgets',
@@ -174,7 +341,27 @@ export default {
Widget02,
Widget03,
Widget04,
Widget05
Widget05,
Widget06,
Widget07,
Widget08,
SocialBoxChartExample,
LineChart1,
LineChart2,
BarChart1,
},
methods:{
copyTry:function($event){
var componentCode = $event.target.closest('.col-md-3').getAttribute('data-code')
if(componentCode)
console.log(componentCode)
const el = document.createElement('textarea');
el.value = componentCode;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
},
}
}
</script>
src/views/dashboard/BarChart1.vue
+69
View File
@@ -0,0 +1,69 @@
<script>
import { Bar } from 'vue-chartjs'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
export default {
extends: Bar,
props: {
data: {
type: Array,
default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
},
height: {
type: Number,
default: 40
},
label:{
type: String,
default: 'label|string'
},
labels:{
type: Array,
default () {
return(['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'])
}
},
backgroundColor:{
type: String,
default: 'rgba(255,255,255,.3)'
},
pointHoverBackgroundColor: String,
},
mounted () {
const dataset = [
{
label: this.label,
backgroundColor: this.backgroundColor,
borderColor: 'transparent',
data: this.data
}
]
this.renderChart(
{
labels: this.labels,
datasets: dataset
},
{
tooltips: {
enabled: false,
custom: CustomTooltips
},
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
display: false,
categoryPercentage: 1,
barPercentage: 0.5
}],
yAxes: [{
display: false
}]
}
}
)
}
}
</script>
src/views/dashboard/LineChart1.vue
+95
View File
@@ -0,0 +1,95 @@
<script>
import { Line } from 'vue-chartjs'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
const defaultBorderColor = 'rgba(255,255,255,.55)'
export default {
extends: Line,
props: {
data: {
type: Array,
default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
},
height: {
type: Number,
default: 40
},
label:{
type: String,
default: 'label|string'
},
labels:{
type: Array,
default () {
return(['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'])
}
},
borderColor:{
type: String,
default: defaultBorderColor
},
backgroundColor:{
type: String,
default: 'transparent'
},
pointHoverBackgroundColor: String,
},
computed:{
hoverBackgroundColor () {
if(this.pointHoverBackgroundColor !== undefined)
return this.pointHoverBackgroundColor
if(this.borderColor !== defaultBorderColor)
return this.borderColor
return 'transparent'
}
},
mounted () {
const datasets1 = [
{
label: this.label,
borderColor: this.borderColor,
backgroundColor: this.backgroundColor,
pointHoverBackgroundColor: this.hoverBackgroundColor,
data: this.data
}
]
this.renderChart(
{
labels: this.labels,
datasets: datasets1
},
{
tooltips: {
enabled: false,
custom: CustomTooltips
},
// responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
},
elements: {
line: {
borderWidth: 2
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4
}
}
}
)
}
}
</script>
src/views/dashboard/LineChart2.vue
+111
View File
@@ -0,0 +1,111 @@
<script>
import { Line } from 'vue-chartjs'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
const defaultBorderColor = 'rgba(255,255,255,.55)'
export default {
extends: Line,
props: {
data: {
type: Array,
default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
},
height: {
type: Number,
default: 40
},
label:{
type: String,
default: 'label|string'
},
labels:{
type: Array,
default () {
return(['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'])
}
},
borderColor:{
type: String,
default: defaultBorderColor
},
backgroundColor:{
type: String,
default: 'transparent'
},
pointHoverBackgroundColor: String,
},
computed:{
hoverBackgroundColor () {
if(this.pointHoverBackgroundColor !== undefined)
return this.pointHoverBackgroundColor
if(this.borderColor !== defaultBorderColor)
return this.borderColor
return 'transparent'
}
},
mounted () {
const datasets1 = [
{
label: this.label,
borderColor: this.borderColor,
backgroundColor: this.backgroundColor,
pointHoverBackgroundColor: this.hoverBackgroundColor,
data: this.data
}
]
this.renderChart(
{
labels: this.labels,
datasets: datasets1
},
{
tooltips: {
enabled: false,
custom: CustomTooltips
},
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
color: 'transparent',
zeroLineColor: 'transparent'
},
ticks: {
fontSize: 2,
fontColor: 'transparent'
}
}
],
yAxes: [
{
display: false,
ticks: {
display: false,
min: Math.min.apply(Math, datasets1[0].data) - 5,
max: Math.max.apply(Math, datasets1[0].data) + 5
}
}
]
},
elements: {
line: {
tension: 0.00001,
borderWidth: 1
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4
}
}
}
)
}
}
</script>
src/views/dashboard/SocialBoxChartExample.vue
+13 -2
View File
@@ -7,18 +7,29 @@ export default {
props: {
data: {
type: Array,
default: () => [0, 22, 34, 46, 58, 70, 46]
default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
},
height: {
type: String,
default: '100'
},
label:{
type: String,
default: 'label|string'
},
labels:{
type: Array,
default () {
return(['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'])
}
}
},
mounted () {
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
labels: this.labels,
datasets: [
{
label: this.label,
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
src/views/widgets/Widget01.md
+17
View File
@@ -0,0 +1,17 @@
### Widget01
This widget style can be configured by changing variant property, which name is one of standard bootstrap classes (i.e. success, info, warning, danger). If you want to change background color of widget instead of changing progress bar style add background- prefix to class (i.e. 'background-success').
Value is the procentage value of displayed progress-bar.
prop | default
--- | ---
variant | `''`
value | `25`
header| `'header:string'`
text | `'text:string'`
footer | `'footer:string'`
#### Example:
> <widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
> variant="info" :value="30"/>
src/views/widgets/Widget01.vue
+3 -3
View File
@@ -26,11 +26,11 @@ export default {
props: {
header: {
type: String,
default: 'header|string'
default: 'header:string'
},
text: {
type: String,
default: 'text|string'
default: 'text:string'
},
variant: {
type: String,
@@ -38,7 +38,7 @@ export default {
},
footer: {
type: String,
default: 'footer|string'
default: 'footer:string'
},
value: {
type: Number,
src/views/widgets/Widget02.md
+14
View File
@@ -0,0 +1,14 @@
### Widget02
This widget can be display with or without link. If you want to display link set showLink property to true.
prop | default
--- | ---
iconClasses | `'fa fa-cogs bg-primary'`
showLink | `true`
header| `'header:string'`
text | `'text:string'`
link | `'#'`
#### Example:
> <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"
:showLink="true" link="#"/>
src/views/widgets/Widget02.vue
+2 -2
View File
@@ -21,11 +21,11 @@ export default {
},
header: {
type: String,
default: 'header|string'
default: 'header:string'
},
text: {
type: String,
default: 'text|string'
default: 'text:string'
},
showLink: {
type: Boolean,
src/views/widgets/Widget03.md
+11
View File
@@ -0,0 +1,11 @@
### Widget03
This widget style depends classes attached to iconClasses property. If you want to get diffrent size of icon block just add padding utility classes (i.e. 'px-5').
prop | default
--- | ---
iconClasses | `'fa fa-cogs bg-primary'`
header| `'header:string'`
text | `'text:string'`
#### Example:
> <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
src/views/widgets/Widget03.vue
+2 -2
View File
@@ -18,11 +18,11 @@ export default {
},
header: {
type: String,
default: 'header|string'
default: 'header:string'
},
text: {
type: String,
default: 'text|string'
default: 'text:string'
},
}
}
src/views/widgets/Widget04.md
+17
View File
@@ -0,0 +1,17 @@
### Widget04
This widget style depends on type property which defines which social widget background color and icon will be used (i.e facebook, twitter, linkedin, google-plus). Inside component there is slot for placing data chart.
prop | default
--- | ---
type | `facebook`
rightHeader | `'rightHeader:string'`
rightFooter | `'rightFooter:string'`
leftHeader | `'leftHeader:string'`
leftFooter | `'leftFooter:string'`
#### Example:
> <widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
> <line-chart1 chartId="linkedIn" :data='[15, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 71]'
> label='Contracts' style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
> </widget04>
src/views/widgets/Widget04.vue
+6 -16
View File
@@ -1,9 +1,9 @@
<template>
<div class="brand-card">
<div :class="'bg-' + type" class="brand-card-header bg-facebook">
<div :class="'bg-' + type" class="brand-card-header">
<i class="fa" :class="'fa-'+ type"></i>
<div class="chart-wrapper">
<social-box-chart-example :data="dataPoints" />
<slot></slot>
</div>
</div>
<div class="brand-card-body">
@@ -20,38 +20,28 @@
</template>
<script>
import SocialBoxChartExample from './../dashboard/SocialBoxChartExample'
export default {
name: 'Widget04',
components: {
SocialBoxChartExample
},
props: {
type: {
type: String,
default: 'facebook'
},
dataPoints: {
type: Array,
default: [65, 59, 84, 84, 51, 55, 40]
},
rightHeader: {
type: String,
default: 'rightHeader|string'
default: 'rightHeader:string'
},
rightFooter: {
type: String,
default: 'rightFooter|string'
default: 'rightFooter:string'
},
leftHeader: {
type: String,
default: 'leftHeader|string'
default: 'leftHeader:string'
},
leftFooter: {
type: String,
default: 'leftFooter|string'
default: 'leftFooter:string'
},
}
}
src/views/widgets/Widget05.md
+15
View File
@@ -0,0 +1,15 @@
### Widget05
This widget style can be configured by changing variant property, which name is one of standard bootstrap classes (i.e. success, info, warning, danger). If you want to change background color of widget instead of changing progress bar style add background- prefix to class (i.e. 'background-success').
Value is the procentage value of displayed progress-bar.
prop | default
--- | ---
variant | `success`
value | `30`
iconClasses | `icon-people`
header| `header:string`
text | `text:string`
> <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>
src/views/widgets/Widget05.vue
+2 -2
View File
@@ -32,11 +32,11 @@ export default {
},
header: {
type: String,
default: 'header|string'
default: 'header:string'
},
text: {
type: String,
default: 'text|string'
default: 'text:string'
},
variant: {
type: String,
src/views/widgets/Widget06.md
+21
View File
@@ -0,0 +1,21 @@
### Widget06
This widget can style is defined by cardClasses.
prop | default
--- | ---
cardClasses | `''`
header| `header:string`
text | `text:string`
> <widget06 cardClasses="bg-primary" header="9.823" text="Members online">
<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>
src/views/widgets/Widget06.vue
+4 -26
View File
@@ -1,30 +1,16 @@
<template>
<b-card no-body :class="cardClasses">
<b-card-body class="pb-0">
<slot></slot>
<slot name='dropdown'></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"/>
<slot name='chart'></slot>
</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{
@@ -40,19 +26,11 @@ export default {
},
header: {
type: String,
default: 'header|string'
default: 'header:string'
},
text: {
type: String,
default: 'text|string'
},
chartType:{
type: String,
default: 'chart1'
},
chartHeight:{
type: Number,
default: 70
default: 'text:string'
},
}
}
src/views/widgets/Widget07.vue
+47
View File
@@ -0,0 +1,47 @@
<template>
<div class="card">
<div :class="cardClasses" class="card-header">
<div class="font-weight-bold">
<span>{{rightHeader}}</span>
<span class="float-right">{{leftHeader}}</span>
</div>
<div>
<span>
<small>{{rightFooter}}</small>
</span>
<span class="float-right">
<small>{{leftFooter}}</small>
</span>
</div>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'Widget07',
props: {
cardClasses: {
type: String,
default: 'bg-primary'
},
rightHeader: {
type: String,
default: 'rightHeader:string'
},
rightFooter: {
type: String,
default: 'rightFooter:string'
},
leftHeader: {
type: String,
default: 'leftHeader:string'
},
leftFooter: {
type: String,
default: 'leftFooter:string'
},
}
}
</script>
src/views/widgets/Widget08.vue
+31
View File
@@ -0,0 +1,31 @@
<template>
<div class="card">
<div class="card-body text-center">
<div class="text-muted small text-uppercase font-weight-bold">{{header}}</div>
<div class="h2 py-3">{{text}}</div>
<!-- <div class="chart-wrapper"> -->
<slot></slot>
<!-- </div> -->
</div>
</div>
</template>
<script>
export default {
name: 'Widget07',
props: {
cardClasses: {
type: String,
default: 'bg-primary'
},
header: {
type: String,
default: 'header:string'
},
text: {
type: String,
default: 'text:string'
},
}
}
</script>