sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: new widget charts

Browse Source
This commit is contained in:
woothu
2018-10-12 17:33:30 +02:00
parent ceee8b07ca
commit 44a6c93642
11 changed files with 185 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/mixins/charts/chartMixins.js
+54
View File
@@ -0,0 +1,54 @@
import { deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
import getColor from '@coreui/coreui/js/src/utilities/get-color'
const generatedLabels = {
computed:{
generatedLabels() {
if(this.labels !== undefined)
return this.labels
let labels = [];
for(let i=1; i<=this.data.length; i++)
labels.push('')
return labels
},
},
}
const generatedBackgroundColor = {
computed:{
generatedBackgroundColor(){
return getColor(this.backgroundColor)
},
},
}
const generatedBorderColor = {
computed:{
generatedBorderColor(){
return getColor(this.borderColor)
},
},
}
const generatedPointHoverBackgroundColor = {
computed:{
generatedPointHoverBackgroundColor () {
if(this.$options.propsData.pointHoverBackgroundColor === undefined)
return this.generatedBorderColor
return getColor(this.pointHoverBackgroundColor)
},
},
}
const generatedOptions = {
computed:{
generatedOptions () {
if(this.$options.propsData.options !== undefined)
deepObjectsMerge(this.finalOptions, this.options)
return this.finalOptions
},
},
}
export{
generatedLabels,
generatedBackgroundColor,
generatedBorderColor,
generatedPointHoverBackgroundColor,
generatedOptions
}
src/views/Dashboard.vue
+1
View File
@@ -155,6 +155,7 @@
</widget04>
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col md="12">
<b-card header="Traffic &amp; Sales">
<b-row>
src/views/Widgets.vue
+31 -20
View File
@@ -107,25 +107,29 @@
<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'
<line-chart1 chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
</widget04>
</b-col>
<b-col md="3" sm="6">
<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'
<line-chart1 chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
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'
<line-chart1 chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
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'
<line-chart1 chartId="google-plus" :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
</widget04>
</b-col>
@@ -194,7 +198,7 @@
<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'/>
style='height:70px' label='Members' pointHoverBackgroundColor='primary'/>
</template>
</widget06>
</b-col>
@@ -212,9 +216,10 @@
</b-dropdown>
</template>
<template slot='chart'>
<line-chart2 chartId="widget06_2" slot='chart' class='px-3' :data='[1, 18, 9, 17, 34, 22, 11]'
<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'/>
style='height:70px' label='Members' :options='{elements: {line: {tension: 0.00001}}}'
pointHoverBackgroundColor='info'/>
</template>
</widget06>
</b-col>
@@ -234,7 +239,8 @@
<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'/>
style='height:70px' backgroundColor ='rgba(255,255,255,.2)' label='Members'
:options="{elements: {line: {borderWidth: 2.5}}}" pointHoverBackgroundColor='warning'/>
</template>
</widget06>
</b-col>
@@ -253,7 +259,7 @@
</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'/>
label='Members' backgroundColor='rgb(250, 152, 152)' style='height:70px' />
</template>
</widget06>
</b-col>
@@ -262,58 +268,63 @@
<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)'/>
<bar-chart1 style="height:40px" chartId="widget07_bar1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</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)'/>
<bar-chart1 style="height:40px" chartId="widget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</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)'/>
<bar-chart1 style="height:40px" chartId="widget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</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'/>
<bar-chart1 style="height:40px" chartId="widget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</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)'/>
<line-chart1 style="height:40px" chartId="widget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='danger'/>
</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)'/>
<line-chart1 style="height:40px" chartId="widget08_2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='primary'/>
</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)'/>
<line-chart1 style="height:40px" chartId="widget08_3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='success'/>
</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)'/>
<bar-chart1 style="height:40px" chartId="widget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' backgroundColor='danger'/>
</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)'/>
<bar-chart1 style="height:40px" chartId="widget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' backgroundColor='primary'/>
</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)'/>
<bar-chart1 style="height:40px" chartId="widget08_6" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' backgroundColor='success'/>
</widget08>
</b-col>
</b-row>
src/views/charts/BarExample.vue
+1
View File
@@ -3,6 +3,7 @@ import { Bar } from 'vue-chartjs'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
export default {
// name: 'BarExample',
extends: Bar,
mounted () {
// Overwriting base render method with actual data.
src/views/charts/DoughnutExample.vue
+1
View File
@@ -2,6 +2,7 @@
import { Doughnut } from 'vue-chartjs'
export default {
name: 'DoughnutExample',
extends: Doughnut,
mounted () {
this.renderChart({
src/views/dashboard/BarChart1.vue
+29 -23
View File
@@ -1,9 +1,12 @@
<script>
import { Bar } from 'vue-chartjs'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
import { generatedLabels, generatedBackgroundColor,generatedBorderColor, generatedOptions } from '@/mixins/charts/chartMixins'
export default {
name: 'BarChart',
extends: Bar,
mixins: [generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedOptions],
props: {
data: {
type: Array,
@@ -17,33 +20,19 @@ export default {
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: 'rgba(255,255,255,.55)'
},
backgroundColor:{
type: String,
default: 'rgba(255,255,255,.3)'
default: 'rgba(0,0,0,.2)'
},
pointHoverBackgroundColor: String,
},
mounted () {
const dataset = [
{
label: this.label,
backgroundColor: this.backgroundColor,
borderColor: 'transparent',
data: this.data
}
]
this.renderChart(
{
labels: this.labels,
datasets: dataset
},
{
labels: Array,
options:Object,
finalOptions:{
type: Object,
default: () => ({
tooltips: {
enabled: false,
custom: CustomTooltips
@@ -62,7 +51,24 @@ export default {
display: false
}]
}
})
}
},
mounted () {
const dataset = [
{
label: this.label,
backgroundColor: this.generatedBackgroundColor,
borderColor: this.generatedBorderColor,
data: this.data
}
]
this.renderChart(
{
labels: this.generatedLabels,
datasets: dataset
},
this.generatedOptions
)
}
}
src/views/dashboard/LineChart1.vue
+32 -38
View File
@@ -1,11 +1,12 @@
<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)'
import { generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions } from '@/mixins/charts/chartMixins'
export default {
name: 'LineChart1',
extends: Line,
mixins: [generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions],
props: {
data: {
type: Array,
@@ -19,53 +20,28 @@ export default {
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
default: 'rgba(255,255,255,.55)'
},
labels: Array,
backgroundColor:{
type: String,
default: 'transparent'
},
pointHoverBackgroundColor: String,
pointHoverBackgroundColor:{
type: String,
default: 'transparent'
},
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
},
{
options:Object,
finalOptions:{
type: Object,
default: () => ({
tooltips: {
enabled: false,
custom: CustomTooltips
},
// responsive: true,
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
@@ -88,8 +64,26 @@ export default {
hoverRadius: 4
}
}
})
}
},
mounted () {
const datasets = [
{
label: this.label,
borderColor: this.generatedBorderColor,
backgroundColor: this.generatedBackgroundColor,
pointHoverBackgroundColor: this.generatedPointHoverBackgroundColor,
data: this.data
}
]
this.renderChart(
{
labels: this.generatedLabels,
datasets: datasets
},
this.generatedOptions
)
}
},
}
</script>
src/views/dashboard/LineChart2.vue
+32 -38
View File
@@ -1,11 +1,12 @@
<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)'
import { generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions } from '@/mixins/charts/chartMixins'
export default {
name: 'LineChart2',
extends: Line,
mixins: [generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions],
props: {
data: {
type: Array,
@@ -19,48 +20,24 @@ export default {
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
default: 'rgba(255,255,255,.55)'
},
labels: Array,
backgroundColor:{
type: String,
default: 'transparent'
},
pointHoverBackgroundColor: String,
pointHoverBackgroundColor:{
type: String,
default: 'transparent'
},
options:Object,
},
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
},
{
finalOptions () {
return{
tooltips: {
enabled: false,
custom: CustomTooltips
@@ -87,15 +64,14 @@ export default {
display: false,
ticks: {
display: false,
min: Math.min.apply(Math, datasets1[0].data) - 5,
max: Math.max.apply(Math, datasets1[0].data) + 5
min: Math.min.apply(Math, this.data) - 5,
max: Math.max.apply(Math, this.data) + 5
}
}
]
},
elements: {
line: {
tension: 0.00001,
borderWidth: 1
},
point: {
@@ -105,6 +81,24 @@ export default {
}
}
}
}
},
mounted () {
const datasets1 = [
{
label: this.label,
borderColor: this.generatedBorderColor,
backgroundColor: this.generatedBackgroundColor,
pointHoverBackgroundColor: this.generatedPointHoverBackgroundColor,
data: this.data
}
]
this.renderChart(
{
labels: this.generatedLabels,
datasets: datasets1
},
this.generatedOptions
)
}
}
src/views/widgets/Widget08.vue
+1 -1
View File
@@ -12,7 +12,7 @@
<script>
export default {
name: 'Widget07',
name: 'Widget08',
props: {
cardClasses: {
type: String,
tests/unit/theme/ColorTheme.spec.js
+1 -1
View File
@@ -1,5 +1,5 @@
import Vue from 'vue'
import { shallowMount, mount } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'
import Component from '@/views/theme/ColorTheme'
tests/unit/theme/ColorView.spec.js
+1 -1
View File
@@ -1,5 +1,5 @@
import Vue from 'vue'
import { shallowMount, mount } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'
import Component from '@/views/theme/ColorView'