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

feat: replace charts with charts built on coreui-vue-chartjs library

Browse Source
This commit is contained in:
woothu
2019-04-15 15:09:35 +02:00
parent d938bd4b9b
commit 4663251573
29 changed files with 788 additions and 814 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -1
View File
@@ -15,7 +15,8 @@
},
"dependencies": {
"@coreui/coreui": "^2.1.6",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.0",
"@coreui/coreui-vue-chartjs": "file:../coreui-vue-chartjs",
"@coreui/icons": "0.3.0",
"@coreui/vue": "../coreui-vue",
"babel-polyfill": "^6.26.0",
src/views/Charts.vue
+12 -26
View File
@@ -1,57 +1,43 @@
<template>
<div class="animated fadeIn">
<CCardGroup columns class="card-columns">
<CCardGroup columns class="card-columns cols-2">
<CCard headerHtml="Line Chart" bodyWrapper>
<LineExample/>
<CChartLineExample/>
</CCard>
<CCard headerHtml="Bar Chart" bodyWrapper>
<BarExample/>
<CChartBarExample/>
</CCard>
<CCard headerHtml="Doughnut Chart" bodyWrapper>
<DoughnutExample/>
<CChartDoughnutExample/>
</CCard>
<CCard headerHtml="Radar Chart" bodyWrapper>
<RadarExample/>
<CChartRadarExample/>
</CCard>
<CCard headerHtml="Pie Chart" bodyWrapper>
<PieExample/>
<CChartPieExample/>
</CCard>
<CCard headerHtml="Polar Area Chart" bodyWrapper>
<PolarAreaExample/>
<CChartPolarAreaExample/>
</CCard>
<CCard headerHtml="Simple line chart" bodyWrapper>
<CSimpleLineChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='success'/>
<CChartLineSimple borderColor="success" labels="months"/>
</CCard>
<CCard headerHtml="Simple pointed chart" bodyWrapper>
<CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:80px' label='Members' pointHoverColor='warning' borderColor='warning'/>
<CChartLineSimple pointed borderColor="warning"/>
</CCard>
<CCard headerHtml="Simple bar chart" bodyWrapper>
<CSimpleBarChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='danger'/>
<CChartBarSimple backgroundColor="danger"/>
</CCard>
</CCardGroup>
</div>
</template>
<script>
import BarExample from './charts/BarExample'
import LineExample from './charts/LineExample'
import DoughnutExample from './charts/DoughnutExample'
import RadarExample from './charts/RadarExample'
import PieExample from './charts/PieExample'
import PolarAreaExample from './charts/PolarAreaExample'
import * as Charts from './charts/index.js'
export default {
name: 'Charts',
components: {
BarExample,
LineExample,
DoughnutExample,
RadarExample,
PieExample,
PolarAreaExample
...Charts
}
}
</script>
src/views/Dashboard.vue
+27 -16
View File
@@ -23,7 +23,7 @@
</CButtonGroup>
</CCol>
</CRow>
<MainChartExample style="height:300px;margin-top:40px;" height="300"></MainChartExample>
<MainChartExample style="height:300px;margin-top:40px;"/>
</CCardBody>
<CCardFooter>
<CRow class="text-center">
@@ -66,19 +66,29 @@
<CCallout variant="info">
<small class="text-muted">New Clients</small><br>
<strong class="h4">9,123</strong>
<div :style="{ top: '-10px'}">
<!--<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
</div>
</CCallout>
<!-- <CCallout variant="info" class="d-inline">
<div class="d-inline">
<small class="text-muted">New Clients</small><br>
<strong class="h4">9,123</strong>
</div>
<div class="d-inline">
<CChartLineSimple
:data="[35, 23, 56, 22, 97, 23, 64]"
borderColor="info"
style="width:80px !important"
:options="{ maintainAspectRatio: true, aspectRatio: 3 }"
/>
</div>
</CCallout> -->
</CCol>
<CCol sm="6">
<CCallout variant="danger">
<small class="text-muted">Recurring Clients</small><br>
<strong class="h4">22,643</strong>
<div :style="{ top: '-10px'}">
<!-- <div :style="{ top: '-10px'}">
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
</div>
</div> -->
</CCallout>
</CCol>
</CRow>
@@ -176,18 +186,18 @@
<CCallout variant="warning">
<small class="text-muted">Pageviews</small><br>
<strong class="h4">78,623</strong>
<div :style="{ top: '-10px'}">
<!-- <div :style="{ top: '-10px'}">
<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
</div>
</div> -->
</CCallout>
</CCol>
<CCol sm="6">
<CCallout variant="success">
<small class="text-muted">Organic</small><br>
<strong class="h4">49,123</strong>
<div :style="{ top: '-10px'}">
<!-- <div :style="{ top: '-10px'}">
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
</div>
</div> -->
</CCallout>
</CCol>
</CRow>
@@ -333,20 +343,21 @@
</template>
<script>
import MainChartExample from './dashboard/MainChartExample'
import MainChartExample from './charts/MainChartExample'
import WidgetsDropdown from './widgets/WidgetsDropdown'
import WidgetsSocial from './widgets/WidgetsSocial'
import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
import CalloutChartExample from './dashboard/CalloutChartExample'
import CalloutChartExample from './charts/CalloutChartExample'
import CChartLineSimple from './charts/CChartLineSimple'
export default {
name: 'Dashboard',
components: {
MainChartExample,
SocialBoxChartExample,
CalloutChartExample,
WidgetsDropdown,
WidgetsSocial
WidgetsSocial,
CChartLineSimple
},
data: function () {
return {
src/views/charts/BarExample.vue
-40
View File
@@ -1,40 +0,0 @@
<script>
import { Bar } from '@coreui/vue/src/extends/BaseCharts'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
export default {
name: 'BarExample',
extends: Bar,
mounted () {
// Overwriting base render method with actual data.
this.renderChart(
{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: 'GitHub Commits',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
}
]
},
{
responsive: true,
maintainAspectRatio: true,
tooltips: {
enabled: false,
custom: CustomTooltips,
intersect: true,
mode: 'index',
position: 'nearest',
callbacks: {
labelColor: function (tooltipItem, chart) {
return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].backgroundColor }
}
}
}
}
)
}
}
</script>
src/views/charts/CChartBarExample.vue
+27
View File
@@ -0,0 +1,27 @@
<template>
<CChartBar
:datasets="defaultDatasets"
labels="months"
/>
</template>
<script>
import { customTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
import { CChartBar } from '@coreui/coreui-vue-chartjs'
export default {
name: 'CChartBarExample',
components: { CChartBar },
computed: {
defaultDatasets () {
return [
{
label: 'GitHub Commits',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
}
]
}
}
}
</script>
src/views/charts/CChartBarSimple.vue
+69
View File
@@ -0,0 +1,69 @@
<template>
<CChartBar
:datasets="computedDatasets"
:options="computedOptions"
:labels="labels"
/>
</template>
<script>
import { CChartBar } from '@coreui/coreui-vue-chartjs'
import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
export default {
name: 'CChartBarSimple',
components: { CChartBar },
props: {
...CChartBar.props,
backgroundColor: {
type: String,
default: 'rgba(0,0,0,.2)'
},
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: getColor(this.backgroundColor),
pointHoverBackgroundColor: getColor(this.pointHoverBackgroundColor),
label: this.label
}
]
},
defaultOptions () {
return {
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
display: false,
categoryPercentage: 1,
barPercentage: 0.5
}],
yAxes: [{
display: false
}]
}
}
},
computedDatasets () {
return deepObjectsMerge(this.defaultDatasets, this.datasets || {})
},
computedOptions () {
return deepObjectsMerge(this.defaultOptions, this.options || {})
}
}
}
</script>
src/views/charts/CChartDoughnutExample.vue
+30
View File
@@ -0,0 +1,30 @@
<template>
<CChartDoughnut
:datasets="defaultDatasets"
:labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
/>
</template>
<script>
import { CChartDoughnut } from '@coreui/coreui-vue-chartjs'
export default {
name: 'CChartDoughnutExample',
components: { CChartDoughnut },
computed: {
defaultDatasets () {
return [
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
]
}
}
}
</script>
src/views/charts/CChartLineExample.vue
+32
View File
@@ -0,0 +1,32 @@
<template>
<CChartLine
:datasets="defaultDatasets"
labels="months"
/>
</template>
<script>
import { customTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
import { CChartLine } from '@coreui/coreui-vue-chartjs'
export default {
name: 'CChartLineExample',
components: { CChartLine },
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>
src/views/charts/CChartLineSimple.vue
+125
View File
@@ -0,0 +1,125 @@
<template>
<CChartLine
:datasets="computedDatasets"
:options="computedOptions"
:labels="labels"
/>
</template>
<script>
import { CChartLine } from '@coreui/coreui-vue-chartjs'
import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
export default {
name: 'CChartLineSimple',
components: { CChartLine },
props: {
...CChartLine.props,
borderColor: {
type: String,
default: 'rgba(255,255,255,.55)'
},
backgroundColor: {
type: String,
default: 'transparent'
},
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,
borderColor: getColor(this.borderColor),
backgroundColor: getColor(this.backgroundColor),
pointHoverBackgroundColor: getColor(this.pointHoverBackgroundColor),
label: this.label
}
]
},
pointedOptions () {
return {
scales: {
xAxes: [
{
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 deepObjectsMerge(this.defaultDatasets, this.datasets || {})
},
computedOptions () {
return deepObjectsMerge(this.defaultOptions, this.options || {})
}
}
}
</script>
src/views/charts/CChartPieExample.vue
+30
View File
@@ -0,0 +1,30 @@
<template>
<CChartPie
:datasets="defaultDatasets"
:labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
/>
</template>
<script>
import { CChartPie } from '@coreui/coreui-vue-chartjs'
export default {
name: 'CChartPieExample',
components: { CChartPie },
computed: {
defaultDatasets () {
return [
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
]
}
}
}
</script>
src/views/charts/CChartPolarAreaExample.vue
+49
View File
@@ -0,0 +1,49 @@
<template>
<CChartPolarArea
:datasets="defaultDatasets"
:options="defaultOptions"
:labels="[
'Eating', 'Drinking', 'Sleeping', 'Designing',
'Coding', 'Cycling', 'Running'
]"
/>
</template>
<script>
import { customTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
import { CChartPolarArea } from '@coreui/coreui-vue-chartjs'
export default {
name: 'CChartPolarAreaExample',
components: { CChartPolarArea },
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>
src/views/charts/RadarExample.vue → src/views/charts/CChartRadarExample.vue
+24 -21
View File
@@ -1,13 +1,24 @@
<template>
<CChartRadar
:datasets="defaultDatasets"
:options="defaultOptions"
:labels="[
'Eating', 'Drinking', 'Sleeping', 'Designing',
'Coding', 'Cycling', 'Running'
]"
/>
</template>
<script>
import { Radar } from '@coreui/vue/src/extends/BaseCharts'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
import { customTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
import { CChartRadar } from '@coreui/coreui-vue-chartjs'
export default {
extends: Radar,
mounted () {
this.renderChart({
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
name: 'CChartRadarExample',
components: { CChartRadar },
computed: {
defaultDatasets () {
return [
{
label: '2017',
backgroundColor: 'rgba(179,181,198,0.2)',
@@ -16,6 +27,7 @@ export default {
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
tooltipLabelColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40]
},
{
@@ -26,25 +38,16 @@ export default {
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)',
tooltipLabelColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100]
}
]
}, {
responsive: true,
maintainAspectRatio: true,
tooltips: {
enabled: false,
custom: CustomTooltips,
intersect: true,
mode: 'index',
position: 'nearest',
callbacks: {
labelColor: function (tooltipItem, chart) {
return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
},
defaultOptions () {
return {
aspectRatio: 1.5
}
}
}
})
}
}
</script>
src/views/charts/CalloutChartExample.vue
+75
View File
@@ -0,0 +1,75 @@
<template>
<CChartLine
:datasets="defaultDatasets"
:options="defaultOptions"
:labels="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']"
/>
</template>
<script>
import { CChartLine } from '@coreui/coreui-vue-chartjs'
import { customTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
import { getColor } from '@coreui/coreui/dist/js/coreui-utilities'
export default {
components: {
CChartLine
},
props: ['data', 'borderColor'],
computed: {
defaultDatasets () {
return [
{
backgroundColor: 'transparent',
borderColor: getColor(this.borderColor) || '#c2cfd6',
data: this.data
}
]
},
defaultOptions () {
return {
tooltips: {
enabled: false,
custom: customTooltips,
intersect: true,
mode: 'index',
position: 'nearest',
callbacks: {
labelColor: function (tooltipItem, chart) {
return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].backgroundColor }
}
}
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
},
elements: {
line: {
borderWidth: 2
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3
}
},
legend: {
display: false
}
}
}
},
methods: {
getVariant (val, el) {
return val[0] === '#' ? val : getStyle(`--${val}`, el)
}
}
}
</script>
src/views/charts/DoughnutExample.vue
-24
View File
@@ -1,24 +0,0 @@
<script>
import { Doughnut } from '@coreui/vue/src/extends/BaseCharts'
export default {
name: 'DoughnutExample',
extends: Doughnut,
mounted () {
this.renderChart({
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
]
}, {responsive: true, maintainAspectRatio: true})
}
}
</script>
src/views/charts/LineExample.vue
-48
View File
@@ -1,48 +0,0 @@
<script>
import { Line } from '@coreui/vue/src/extends/BaseCharts'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
import { hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
export default {
components: {
hexToRgba,
CustomTooltips
},
extends: Line,
mounted () {
this.renderChart(
{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Data One',
backgroundColor: hexToRgba('#E46651', 90),
data: [30, 39, 10, 50, 30, 70, 35]
},
{
label: 'Data Two',
backgroundColor: hexToRgba('#00D8FF', 90),
data: [39, 80, 40, 35, 40, 20, 45]
}
]
},
{
responsive: true,
maintainAspectRatio: true,
tooltips: {
enabled: false,
custom: CustomTooltips,
intersect: true,
mode: 'index',
position: 'nearest',
callbacks: {
labelColor: function (tooltipItem, chart) {
return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].backgroundColor }
}
}
}
}
)
}
}
</script>
src/views/charts/MainChartExample.vue
+191
View File
@@ -0,0 +1,191 @@
<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/coreui-vue-chartjs'
import { getColor, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
import { customTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
function random (min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
export default {
components: {
CChartLine
},
computed: {
defaultDatasets () {
const brandSuccess = getColor('success') || '#4dbd74'
const brandInfo = getColor('info') || '#20a8d8'
const brandDanger = getColor('danger') || '#f86c6b'
let 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: hexToRgba(brandInfo, 10),
borderColor: brandInfo,
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: data1
},
{
label: 'My Second dataset',
backgroundColor: 'transparent',
borderColor: brandSuccess,
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: data2
},
{
label: 'My Third dataset',
backgroundColor: 'transparent',
borderColor: brandDanger,
pointHoverBackgroundColor: '#fff',
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
}
}
}
}
},
// mounted () {
// const brandSuccess = getStyle('--success') || '#4dbd74'
// const brandInfo = getStyle('--info') || '#20a8d8'
// const brandDanger = getStyle('--danger') || '#f86c6b'
//
// let 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)
// }
// this.renderChart({
// datasets: [
// {
// label: 'My First dataset',
// backgroundColor: hexToRgba(brandInfo, 10),
// borderColor: brandInfo,
// pointHoverBackgroundColor: '#fff',
// borderWidth: 2,
// data: data1
// },
// {
// label: 'My Second dataset',
// backgroundColor: 'transparent',
// borderColor: brandSuccess,
// pointHoverBackgroundColor: '#fff',
// borderWidth: 2,
// data: data2
// },
// {
// label: 'My Third dataset',
// backgroundColor: 'transparent',
// borderColor: brandDanger,
// pointHoverBackgroundColor: '#fff',
// borderWidth: 1,
// borderDash: [8, 5],
// data: data3
// }
// ]
// }, {
// tooltips: {
// enabled: false,
// custom: CustomTooltips,
// intersect: true,
// mode: 'index',
// position: 'nearest',
// callbacks: {
// labelColor: function (tooltipItem, chart) {
// return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
// }
// }
// },
// 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>
src/views/charts/PieExample.vue
-23
View File
@@ -1,23 +0,0 @@
<script>
import { Pie } from '@coreui/vue/src/extends/BaseCharts'
export default {
extends: Pie,
mounted () {
this.renderChart({
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
]
}, {responsive: true, maintainAspectRatio: true})
}
}
</script>
src/views/charts/PolarAreaExample.vue
-48
View File
@@ -1,48 +0,0 @@
<script>
import { PolarArea } from '@coreui/vue/src/extends/BaseCharts'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
export default {
extends: PolarArea,
mounted () {
this.renderChart({
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(179,181,198,0.2)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
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: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100]
}
]
}, {
responsive: true,
maintainAspectRatio: false,
tooltips: {
enabled: false,
custom: CustomTooltips,
intersect: true,
mode: 'index',
position: 'nearest',
callbacks: {
labelColor: function (tooltipItem, chart) {
return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].backgroundColor }
}
}
}
})
}
}
</script>
src/views/charts/index.js
+19
View File
@@ -0,0 +1,19 @@
import CChartLineSimple from './CChartLineSimple'
import CChartBarSimple from './CChartBarSimple'
import CChartLineExample from './CChartLineExample'
import CChartBarExample from './CChartBarExample'
import CChartDoughnutExample from './CChartDoughnutExample'
import CChartRadarExample from './CChartRadarExample'
import CChartPieExample from './CChartPieExample'
import CChartPolarAreaExample from './CChartPolarAreaExample'
export {
CChartLineSimple,
CChartBarSimple,
CChartLineExample,
CChartBarExample,
CChartDoughnutExample,
CChartRadarExample,
CChartPieExample,
CChartPolarAreaExample
}
src/views/dashboard/CalloutChartExample.vue
-67
View File
@@ -1,67 +0,0 @@
<script>
import { Line } from '@coreui/vue/src/extends/BaseCharts'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
export default {
components: {
CustomTooltips
},
extends: Line,
props: ['data', 'height', 'width', 'variant'],
mounted () {
this.renderChart({
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets: [
{
backgroundColor: 'transparent',
borderColor: this.getVariant(this.variant) || '#c2cfd6',
data: this.data
}
]
}, {
responsive: true,
tooltips: {
enabled: false,
custom: CustomTooltips,
intersect: true,
mode: 'index',
position: 'nearest',
callbacks: {
labelColor: function (tooltipItem, chart) {
return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
}
}
},
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
}
})
},
methods: {
getVariant (val, el) {
return val[0] === '#' ? val : getStyle(`--${val}`, el)
}
}
}
</script>
src/views/dashboard/CardBarChartExample.vue
-45
View File
@@ -1,45 +0,0 @@
<script>
import { Bar } from '@coreui/vue/src/extends/BaseCharts'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
export default {
extends: Bar,
props: ['height'],
mounted () {
const datasets4 = [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,255,255,.3)',
borderColor: 'transparent',
data: [78, 81, 80, 45, 34, 12, 40, 75, 34, 89, 32, 68, 54, 72, 18, 98]
}
]
this.renderChart(
{
labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
datasets: datasets4
},
{
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/CardLine1ChartExample.vue
-72
View File
@@ -1,72 +0,0 @@
<script>
import { Line } from '@coreui/vue/src/extends/BaseCharts'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
export default {
extends: Line,
props: ['height', 'width'],
mounted () {
const brandPrimary = getStyle('--primary') || '#20a8d8'
const datasets1 = [
{
label: 'My First dataset',
backgroundColor: brandPrimary,
borderColor: 'rgba(255,255,255,.55)',
data: [65, 59, 84, 84, 51, 55, 40]
}
]
this.renderChart(
{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
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: {
borderWidth: 1
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4
}
}
}
)
}
}
</script>
src/views/dashboard/CardLine2ChartExample.vue
-73
View File
@@ -1,73 +0,0 @@
<script>
import { Line } from '@coreui/vue/src/extends/BaseCharts'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
export default {
extends: Line,
props: ['height', 'width'],
mounted () {
const brandInfo = getStyle('--light-blue') || '#63c2de'
const datasets2 = [
{
label: 'My First dataset',
backgroundColor: brandInfo,
borderColor: 'rgba(255,255,255,.55)',
data: [1, 18, 9, 17, 34, 22, 11]
}
]
this.renderChart(
{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: datasets2
},
{
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, datasets2[0].data) - 5,
max: Math.max.apply(Math, datasets2[0].data) + 5
}
}
]
},
elements: {
line: {
tension: 0.00001,
borderWidth: 1
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4
}
}
}
)
}
}
</script>
src/views/dashboard/CardLine3ChartExample.vue
-53
View File
@@ -1,53 +0,0 @@
<script>
import { Line } from '@coreui/vue/src/extends/BaseCharts'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
export default {
extends: Line,
props: ['height', 'width'],
mounted () {
const datasets3 = [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,255,255,.2)',
borderColor: 'rgba(255,255,255,.55)',
data: [78, 81, 80, 45, 34, 12, 40]
}
]
this.renderChart(
{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: datasets3
},
{
tooltips: {
enabled: false,
custom: CustomTooltips
},
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/MainChartExample.vue
-103
View File
@@ -1,103 +0,0 @@
<script>
import { Line } from '@coreui/vue/src/extends/BaseCharts'
import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
function random (min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
export default {
extends: Line,
props: ['height'],
mounted () {
const brandSuccess = getStyle('--success') || '#4dbd74'
const brandInfo = getStyle('--info') || '#20a8d8'
const brandDanger = getStyle('--danger') || '#f86c6b'
let 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)
}
this.renderChart({
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'],
datasets: [
{
label: 'My First dataset',
backgroundColor: hexToRgba(brandInfo, 10),
borderColor: brandInfo,
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: data1
},
{
label: 'My Second dataset',
backgroundColor: 'transparent',
borderColor: brandSuccess,
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: data2
},
{
label: 'My Third dataset',
backgroundColor: 'transparent',
borderColor: brandDanger,
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
borderDash: [8, 5],
data: data3
}
]
}, {
tooltips: {
enabled: false,
custom: CustomTooltips,
intersect: true,
mode: 'index',
position: 'nearest',
callbacks: {
labelColor: function (tooltipItem, chart) {
return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
}
}
},
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>
src/views/dashboard/SocialBoxChartExample.vue
-70
View File
@@ -1,70 +0,0 @@
<script>
import { Line } from '@coreui/vue/src/extends/BaseCharts'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
export default {
name: 'SocialBoxChartExample',
extends: Line,
props: {
data: {
type: Array,
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: this.labels,
datasets: [
{
label: this.label,
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: this.data
}
]
}, {
tooltips: {
enabled: false,
custom: CustomTooltips
},
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
},
elements: {
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3
}
}
})
}
}
</script>
src/views/widgets/Widgets.vue
+17 -26
View File
@@ -264,70 +264,58 @@
<CRow>
<CCol sm="6" lg="3">
<CWidgetSmallText rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CSimpleBarChart style="height:40px"
:data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
label="Sales"
/>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetSmallText>
</CCol>
<CCol sm="6" lg="3">
<CWidgetSmallText variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CSimpleBarChart style="height:40px" chartId="CWidgetSmallText_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetSmallText>
</CCol>
<CCol sm="6" lg="3">
<CWidgetSmallText variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CSimpleBarChart style="height:40px" chartId="CWidgetSmallText_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetSmallText>
</CCol>
<CCol sm="6" lg="3">
<CWidgetSmallText variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CSimpleBarChart style="height:40px" chartId="CWidgetSmallText_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetSmallText>
</CCol>
</CRow>
<CRow>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CSimpleLineChart style="height:40px" chartId="CWidgetSimple_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='danger'/>
<CChartLineSimple style="height:40px" borderColor="danger"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CSimpleLineChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='primary'/>
<CChartLineSimple style="height:40px" borderColor="primary"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CSimpleLineChart style="height:40px"
:data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
label="Sales"
borderColor="success"
/>
<CChartLineSimple style="height:40px" borderColor="success"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CSimpleBarChart style="height:40px" chartId="CWidgetSimple_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='danger'/>
<CChartBarSimple style="height:40px" backgroundColor="danger"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CSimpleBarChart style="height:40px" chartId="CWidgetSimple_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='primary'/>
<CChartBarSimple style="height:40px" backgroundColor="primary"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header='title' text='1,123'>
<CSimpleBarChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='success'/>
<CChartBarSimple style="height:40px" backgroundColor="success"/>
</CWidgetSimple>
</CCol>
</CRow>
@@ -337,10 +325,13 @@
<script>
import WidgetsSocial from './WidgetsSocial'
import WidgetsDropdown from './WidgetsDropdown'
import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
export default {
name: 'Widgets',
components: {
CChartLineSimple,
CChartBarSimple,
WidgetsSocial,
WidgetsDropdown
}
src/views/widgets/WidgetsDropdown.vue
+29 -28
View File
@@ -15,13 +15,14 @@
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
<CSimplePointedChart
<CChartLineSimple
pointed
class="px-3"
:data="[65, 59, 84, 84, 51, 55, 40]"
:labels="months"
style="height:70px"
:dataPoints="[65, 59, 84, 84, 51, 55, 40]"
backgroundColor="primary"
label="Members"
pointHoverColor="primary"
labels="months"
/>
</CWidgetDropdown>
</CCol>
@@ -41,14 +42,15 @@
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
<CSimplePointedChart
<CChartLineSimple
pointed
class="px-3"
:data="[1, 18, 9, 17, 34, 22, 11]"
:labels="months"
style="height:70px"
label="Members"
:dataPoints="[1, 18, 9, 17, 34, 22, 11]"
backgroundColor="info"
:options="{ elements: { line: { tension: 0.00001 }}}"
pointHoverColor="info"
label="Members"
labels="months"
/>
</CWidgetDropdown>
</CCol>
@@ -72,16 +74,14 @@
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
<CSimpleLineChart
chartId="CWidgetDropdown_3"
:data="[78, 81, 80, 45, 34, 12, 40]"
:labels="months"
<CChartLineSimple
style="height:70px"
color="rgba(255,255,255,.2)"
label="Members"
backgroundColor="rgba(255,255,255,.2)"
:dataPoints="[78, 81, 80, 45, 34, 12, 40]"
:options="{ elements: { line: { borderWidth: 2.5 }}}"
pointHoverColor="warning"
pointHoverBackgroundColor="warning"
label="Members"
labels="months"
/>
</CWidgetDropdown>
</CCol>
@@ -105,13 +105,11 @@
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
<CSimpleBarChart
chartId="CWidgetDropdown_4"
:data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
label="Members"
color="rgb(250, 152, 152)"
<CChartBarSimple
style="height:70px"
backgroundColor="rgb(250, 152, 152)"
label="Members"
labels="months"
/>
</CWidgetDropdown>
</CCol>
@@ -119,12 +117,15 @@
</template>
<script>
import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
export default {
name: 'WidgetsDropdown',
data () {
return {
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
}
}
// data () {
// return {
// months: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
// }
// },
components: { CChartLineSimple, CChartBarSimple }
}
</script>
src/views/widgets/WidgetsSocial.vue
+26 -26
View File
@@ -1,6 +1,6 @@
<template functional>
<template>
<CRow>
<template v-if="!props.noCharts">
<template v-if="!noCharts">
<CCol md="3" sm="6">
<CWidgetSocial
variant="facebook"
@@ -9,13 +9,12 @@
leftHeader="459"
leftFooter="feeds"
>
<CSimpleLineChart
chartId="facebook"
:data="[65, 59, 84, 84, 51, 55, 40]"
label="Friends"
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
<CChartLineSimple
style="height:100px"
color="rgba(255,255,255,.1)"
backgroundColor="rgba(255,255,255,.1)"
:dataPoints="[65, 59, 84, 84, 51, 55, 40]"
label="Friends"
labels="months"
/>
</CWidgetSocial>
</CCol>
@@ -27,13 +26,12 @@
leftHeader="1.792"
leftFooter="tweets"
>
<CSimpleLineChart
chartId="twitter"
:data="[1, 13, 9, 17, 34, 41, 38]"
label="Followers"
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
<CChartLineSimple
style="height:100px"
color="rgba(255,255,255,.1)"
backgroundColor="rgba(255,255,255,.1)"
:dataPoints="[1, 13, 9, 17, 34, 41, 38]"
label="Followers"
labels="months"
/>
</CWidgetSocial>
</CCol>
@@ -45,13 +43,12 @@
leftHeader="292"
leftFooter="feeds"
>
<CSimpleLineChart
chartId="linkedIn"
:data="[78, 81, 80, 45, 34, 12, 40]"
label="Contracts"
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
<CChartLineSimple
style="height:100px"
color="rgba(255,255,255,.1)"
backgroundColor="rgba(255,255,255,.1)"
:dataPoints="[78, 81, 80, 45, 34, 12, 40]"
label="Contracts"
labels="months"
/>
</CWidgetSocial>
</CCol>
@@ -63,13 +60,12 @@
leftHeader="92"
leftFooter="circles"
>
<CSimpleLineChart
chartId="google-plus"
:data="[35, 23, 56, 22, 97, 23, 64]"
label="Followers"
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
<CChartLineSimple
style="height:100px"
color="rgba(255,255,255,.1)"
backgroundColor="rgba(255,255,255,.1)"
:dataPoints="[35, 23, 56, 22, 97, 23, 64]"
label="Followers"
labels="months"
/>
</CWidgetSocial>
</CCol>
@@ -117,8 +113,12 @@
</template>
<script>
import { CChartLineSimple } from '../charts/index.js'
export default {
name: 'WidgetsSocial',
components: {
CChartLineSimple
},
props: {
noCharts: Boolean
}