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
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>