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

refactor(charts): add CustomTooltips, add chartId prop

Browse Source
This commit is contained in:
xidedix
2018-05-25 17:47:07 +02:00
parent 4aa02846e3
commit c4d5ff886c
16 changed files with 371 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/utils/getStyle.js
+10
View File
@@ -0,0 +1,10 @@
// todo
// temp getStyle fix for IE
const getStyle = (prop, node) => {
const root = node || document.querySelector(':root')
const value = window.getComputedStyle(root).getPropertyValue(prop).trim()
// console.log('utils/getStyle', value)
return value
}
export default getStyle
src/views/Charts.vue
+7 -7
View File
@@ -1,34 +1,34 @@
<template>
<div class="animated fadeIn">
<b-card-group columns class="card-columns cols-2">
<b-card-group columns class="card-columns">
<b-card header="Line Chart">
<div class="chart-wrapper">
<line-example/>
<line-example chartId="chart-line-01"/>
</div>
</b-card>
<b-card header="Bar Chart">
<div class="chart-wrapper">
<bar-example/>
<bar-example chartId="chart-bar-01"/>
</div>
</b-card>
<b-card header="Doughnut Chart">
<div class="chart-wrapper">
<doughnut-example/>
<doughnut-example chartId="chart-doughnut-01"/>
</div>
</b-card>
<b-card header="Radar Chart">
<div class="chart-wrapper">
<radar-example/>
<radar-example chartId="chart-radar-01"/>
</div>
</b-card>
<b-card header="Pie Chart">
<div class="chart-wrapper">
<pie-example/>
<pie-example chartId="chart-pie-01"/>
</div>
</b-card>
<b-card header="Polar Area Chart">
<div class="chart-wrapper">
<polar-area-example/>
<polar-area-example chartId="chart-polar-area-01"/>
</div>
</b-card>
</b-card-group>
src/views/Dashboard.vue
+13 -13
View File
@@ -16,7 +16,7 @@
<h4 class="mb-0">9.823</h4>
<p>Members online</p>
</b-card-body>
<card-line1-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
<card-line1-chart-example chartId="card-chart-01" class="chart-wrapper px-3" style="height:70px;" height="70"/>
</b-card>
</b-col>
<b-col sm="6" lg="3">
@@ -34,7 +34,7 @@
<h4 class="mb-0">9.823</h4>
<p>Members online</p>
</b-card-body>
<card-line2-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
<card-line2-chart-example chartId="card-chart-02" class="chart-wrapper px-3" style="height:70px;" height="70"/>
</b-card>
</b-col>
<b-col sm="6" lg="3">
@@ -52,7 +52,7 @@
<h4 class="mb-0">9.823</h4>
<p>Members online</p>
</b-card-body>
<card-line3-chart-example class="chart-wrapper" style="height:70px;" height="70"/>
<card-line3-chart-example chartId="card-chart-03" class="chart-wrapper" style="height:70px;" height="70"/>
</b-card>
</b-col>
<b-col sm="6" lg="3">
@@ -70,7 +70,7 @@
<h4 class="mb-0">9.823</h4>
<p>Members online</p>
</b-card-body>
<card-bar-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
<card-bar-chart-example chartId="card-chart-04" class="chart-wrapper px-3" style="height:70px;" height="70"/>
</b-card>
</b-col>
</b-row>
@@ -92,7 +92,7 @@
</b-button-toolbar>
</b-col>
</b-row>
<main-chart-example class="chart-wrapper" style="height:300px;margin-top:40px;" height="300"></main-chart-example>
<main-chart-example chartId="main-chart-01" class="chart-wrapper" style="height:300px;margin-top:40px;" height="300"></main-chart-example>
<div slot="footer">
<b-row class="text-center">
<b-col class="mb-sm-2 mb-0">
@@ -129,7 +129,7 @@
<div class="brand-card-header bg-facebook">
<i class="fa fa-facebook"></i>
<div class="chart-wrapper">
<social-box-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" height="90"/>
<social-box-chart-example chartId="box-chart-01" :data="[65, 59, 84, 84, 51, 55, 40]" height="90"/>
</div>
</div>
<div class="brand-card-body">
@@ -149,7 +149,7 @@
<div class="brand-card-header bg-twitter">
<i class="fa fa-twitter"></i>
<div class="chart-wrapper">
<social-box-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" height="90"/>
<social-box-chart-example chartId="box-chart-02" :data="[1, 13, 9, 17, 34, 41, 38]" height="90"/>
</div>
</div>
<div class="brand-card-body">
@@ -169,7 +169,7 @@
<div class="brand-card-header bg-linkedin">
<i class="fa fa-linkedin"></i>
<div class="chart-wrapper">
<social-box-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" height="90"/>
<social-box-chart-example chartId="box-chart-03" :data="[78, 81, 80, 45, 34, 12, 40]" height="90"/>
</div>
</div>
<div class="brand-card-body">
@@ -189,7 +189,7 @@
<div class="brand-card-header bg-google-plus">
<i class="fa fa-google-plus"></i>
<div class="chart-wrapper">
<social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" height="90"/>
<social-box-chart-example chartId="box-chart-04" :data="[35, 23, 56, 22, 97, 23, 64]" height="90"/>
</div>
</div>
<div class="brand-card-body">
@@ -217,7 +217,7 @@
<strong class="h4">9,123</strong>
<div class="chart-wrapper" :style="{ top: '-10px'}">
<!--<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
<callout-chart-example chartId="callout-chart-01" :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
</div>
</Callout>
</b-col>
@@ -226,7 +226,7 @@
<small class="text-muted">Recurring Clients</small><br>
<strong class="h4">22,643</strong>
<div class="chart-wrapper" :style="{ top: '-10px'}">
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
<callout-chart-example chartId="callout-chart-02" :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
</div>
</Callout>
</b-col>
@@ -326,7 +326,7 @@
<small class="text-muted">Pageviews</small><br>
<strong class="h4">78,623</strong>
<div class="chart-wrapper" :style="{ top: '-10px'}">
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
<callout-chart-example chartId="callout-chart-03" :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
</div>
</Callout>
</b-col>
@@ -335,7 +335,7 @@
<small class="text-muted">Organic</small><br>
<strong class="h4">49,123</strong>
<div class="chart-wrapper" :style="{ top: '-10px'}">
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
<callout-chart-example chartId="callout-chart-04" :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
</div>
</Callout>
</b-col>
src/views/charts/BarExample.vue
+21 -2
View File
@@ -1,11 +1,13 @@
<script>
import { Bar } from 'vue-chartjs'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
export default {
extends: Bar,
mounted () {
// Overwriting base render method with actual data.
this.renderChart({
this.renderChart(
{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
@@ -14,7 +16,24 @@ export default {
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/DoughnutExample.vue
+1 -1
View File
@@ -17,7 +17,7 @@ export default {
data: [40, 20, 80, 10]
}
]
}, {responsive: true, maintainAspectRatio: false})
}, {responsive: true, maintainAspectRatio: true})
}
}
</script>
src/views/charts/LineExample.vue
+33 -4
View File
@@ -1,19 +1,48 @@
<script>
import { Line } from 'vue-chartjs'
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({
this.renderChart(
{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 39, 10, 40, 39, 80, 40]
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: false})
},
{
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/PieExample.vue
+1 -1
View File
@@ -17,7 +17,7 @@ export default {
data: [40, 20, 80, 10]
}
]
}, {responsive: true, maintainAspectRatio: false})
}, {responsive: true, maintainAspectRatio: true})
}
}
</script>
src/views/charts/PolarAreaExample.vue
+17 -1
View File
@@ -1,5 +1,6 @@
<script>
import { PolarArea } from 'vue-chartjs'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
export default {
extends: PolarArea,
@@ -26,7 +27,22 @@ export default {
data: [28, 48, 40, 19, 96, 27, 100]
}
]
}, {responsive: true, maintainAspectRatio: false})
}, {
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/RadarExample.vue
+19 -3
View File
@@ -1,5 +1,6 @@
<script>
import { Radar } from 'vue-chartjs'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
export default {
extends: Radar,
@@ -8,7 +9,7 @@ export default {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: 'My First dataset',
label: '2017',
backgroundColor: 'rgba(179,181,198,0.2)',
borderColor: 'rgba(179,181,198,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
@@ -18,7 +19,7 @@ export default {
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
label: '2018',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
pointBackgroundColor: 'rgba(255,99,132,1)',
@@ -28,7 +29,22 @@ export default {
data: [28, 48, 40, 19, 96, 27, 100]
}
]
}, {responsive: true, maintainAspectRatio: false})
}, {
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 }
}
}
}
})
}
}
</script>
src/views/dashboard/CalloutChartExample.vue
+16 -8
View File
@@ -1,16 +1,12 @@
<script>
import { Line } from 'vue-chartjs'
import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
// const brandPrimary = '#20a8d8'
// const brandSuccess = '#4dbd74'
// const brandInfo = '#63c2de'
// const brandWarning = '#f8cb00'
// const brandDanger = '#f86c6b'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
// import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
import getStyle from '../../utils/getStyle'
export default {
components: {
getStyle
CustomTooltips
},
extends: Line,
props: ['data', 'height', 'width', 'variant'],
@@ -26,6 +22,18 @@ export default {
]
}, {
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: [{
src/views/dashboard/CardBarChartExample.vue
+17 -10
View File
@@ -1,7 +1,12 @@
<script>
import { Bar } from 'vue-chartjs'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
const datasets = [
export default {
extends: Bar,
props: ['height'],
mounted () {
const datasets4 = [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,255,255,.3)',
@@ -9,15 +14,16 @@ const datasets = [
data: [78, 81, 80, 45, 34, 12, 40, 75, 34, 89, 32, 68, 54, 72, 18, 98]
}
]
export default {
extends: Bar,
props: ['height'],
mounted () {
this.renderChart({
this.renderChart(
{
labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
datasets: datasets
}, {
datasets: datasets4
},
{
tooltips: {
enabled: false,
custom: CustomTooltips
},
maintainAspectRatio: false,
legend: {
display: false
@@ -32,7 +38,8 @@ export default {
display: false
}]
}
})
}
)
}
}
</script>
src/views/dashboard/CardLine1ChartExample.vue
+26 -15
View File
@@ -1,10 +1,14 @@
<script>
import { Line } from 'vue-chartjs'
// import { getStyle } from '@coreui/coreui/js/src/utilities'
const brandPrimary = '#20a8d8'
// const brandPrimary = getStyle('--primary')
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
// import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
import getStyle from '../../utils/getStyle'
export default {
extends: Line,
props: ['height', 'width'],
mounted () {
const brandPrimary = getStyle('--primary') || '#20a8d8'
const datasets1 = [
{
label: 'My First dataset',
@@ -14,20 +18,23 @@ const datasets1 = [
}
]
export default {
extends: Line,
props: ['height', 'width'],
mounted () {
this.renderChart({
this.renderChart(
{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: datasets1
}, {
},
{
tooltips: {
enabled: false,
custom: CustomTooltips
},
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
xAxes: [
{
gridLines: {
color: 'transparent',
zeroLineColor: 'transparent'
@@ -36,15 +43,18 @@ export default {
fontSize: 2,
fontColor: 'transparent'
}
}],
yAxes: [{
}
],
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: {
@@ -56,7 +66,8 @@ export default {
hoverRadius: 4
}
}
})
}
)
}
}
</script>
src/views/dashboard/CardLine2ChartExample.vue
+26 -16
View File
@@ -1,10 +1,14 @@
<script>
import { Line } from 'vue-chartjs'
// import { getStyle } from '@coreui/coreui/js/src/utilities'
const brandInfo = '#63c2de'
// const brandInfo = getStyle('--light-blue')
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
// import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
import getStyle from '../../utils/getStyle'
export default {
extends: Line,
props: ['height', 'width'],
mounted () {
const brandInfo = getStyle('--light-blue') || '#63c2de'
const datasets2 = [
{
label: 'My First dataset',
@@ -14,20 +18,23 @@ const datasets2 = [
}
]
export default {
extends: Line,
props: ['height', 'width'],
mounted () {
this.renderChart({
this.renderChart(
{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: datasets2
}, {
},
{
tooltips: {
enabled: false,
custom: CustomTooltips
},
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
xAxes: [
{
gridLines: {
color: 'transparent',
zeroLineColor: 'transparent'
@@ -36,16 +43,18 @@ export default {
fontSize: 2,
fontColor: 'transparent'
}
}],
yAxes: [{
}
],
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: {
@@ -58,7 +67,8 @@ export default {
hoverRadius: 4
}
}
})
}
)
}
}
</script>
src/views/dashboard/CardLine3ChartExample.vue
+17 -10
View File
@@ -1,7 +1,12 @@
<script>
import { Line } from 'vue-chartjs'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
const datasets = [
export default {
extends: Line,
props: ['height', 'width'],
mounted () {
const datasets3 = [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,255,255,.2)',
@@ -9,15 +14,16 @@ const datasets = [
data: [78, 81, 80, 45, 34, 12, 40]
}
]
export default {
extends: Line,
props: ['height', 'width'],
mounted () {
this.renderChart({
this.renderChart(
{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: datasets
}, {
datasets: datasets3
},
{
tooltips: {
enabled: false,
custom: CustomTooltips
},
maintainAspectRatio: false,
legend: {
display: false
@@ -40,7 +46,8 @@ export default {
hoverRadius: 4
}
}
})
}
)
}
}
</script>
src/views/dashboard/MainChartExample.vue
+25 -21
View File
@@ -1,21 +1,9 @@
<script>
import { Line } from 'vue-chartjs'
import { getStyle } from '@coreui/coreui/js/src/utilities'
// const brandPrimary = '#20a8d8'
// const brandSuccess = '#4dbd74'
// const brandInfo = '#63c2de'
// const brandDanger = '#f86c6b'
function convertHex (hex, opacity) {
hex = hex.replace('#', '')
const r = parseInt(hex.substring(0, 2), 16)
const g = parseInt(hex.substring(2, 4), 16)
const b = parseInt(hex.substring(4, 6), 16)
// const result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')'
return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`
}
// import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
import { hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
import getStyle from '../../utils/getStyle'
function random (min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
@@ -25,6 +13,10 @@ 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 = []
@@ -36,12 +28,12 @@ export default {
data3.push(65)
}
this.renderChart({
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S'],
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: convertHex(getStyle('--info'), 10),
borderColor: getStyle('--info'),
backgroundColor: hexToRgba(brandInfo, 10),
borderColor: brandInfo,
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: data1
@@ -49,7 +41,7 @@ export default {
{
label: 'My Second dataset',
backgroundColor: 'transparent',
borderColor: getStyle('--success'),
borderColor: brandSuccess,
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: data2
@@ -57,7 +49,7 @@ export default {
{
label: 'My Third dataset',
backgroundColor: 'transparent',
borderColor: getStyle('--danger'),
borderColor: brandDanger,
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
borderDash: [8, 5],
@@ -65,6 +57,18 @@ export default {
}
]
}, {
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
src/views/dashboard/SocialBoxChartExample.vue
+5
View File
@@ -1,5 +1,6 @@
<script>
import { Line } from 'vue-chartjs'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
export default {
extends: Line,
@@ -26,6 +27,10 @@ export default {
}
]
}, {
tooltips: {
enabled: false,
custom: CustomTooltips
},
responsive: true,
maintainAspectRatio: false,
legend: {