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

refactor: chart examples

Browse Source 
- add: getStyle()
- minor fixes
This commit is contained in:
xidedix
2018-04-10 17:11:00 +02:00
parent 6c463c7584
commit 0db334e66f
10 changed files with 60 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2
View File
@@ -5,6 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>CoreUI - Open Source Bootstrap Admin Template</title>
<link rel="shortcut icon" href="./favicon.ico">
</head>
<!-- BODY options, add following classes to body to change options
scss/vendors/_variables.scss
Vendored
+5 -5
View File
@@ -1,7 +1,7 @@
// Override Boostrap variables
@import "../variables";
@import "node_modules/@coreui/coreui/scss/bootstrap-variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/@coreui/coreui/scss/variables";
@import "~@coreui/coreui/scss/bootstrap-variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~@coreui/coreui/scss/variables";
src/views/Dashboard.vue
+7 -6
View File
@@ -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="100"/>
<social-box-chart-example :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="100"/>
<social-box-chart-example :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="100"/>
<social-box-chart-example :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="100"/>
<social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" height="90"/>
</div>
</div>
<div class="brand-card-body">
@@ -216,7 +216,8 @@
<small class="text-muted">New Clients</small><br>
<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="#20a8d8" width="80" height="30" />-->
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
</div>
</Callout>
</b-col>
@@ -225,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="#f86c6b" width="80" height="30" />
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
</div>
</Callout>
</b-col>
src/views/Widgets.vue
+4 -4
View File
@@ -234,7 +234,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="100"/>
<social-box-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" height="90"/>
</div>
</div>
<div class="brand-card-body">
@@ -254,7 +254,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="100"/>
<social-box-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" height="90"/>
</div>
</div>
<div class="brand-card-body">
@@ -274,7 +274,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="100"/>
<social-box-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" height="90"/>
</div>
</div>
<div class="brand-card-body">
@@ -294,7 +294,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="100"/>
<social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" height="90"/>
</div>
</div>
<div class="brand-card-body">
src/views/dashboard/CalloutChartExample.vue
+10 -1
View File
@@ -1,5 +1,6 @@
<script>
import { Line } from 'vue-chartjs'
import { getStyle } from '@coreui/coreui/js/src/utilities'
// const brandPrimary = '#20a8d8'
// const brandSuccess = '#4dbd74'
@@ -8,6 +9,9 @@ import { Line } from 'vue-chartjs'
// const brandDanger = '#f86c6b'
export default {
components: {
getStyle
},
extends: Line,
props: ['data', 'height', 'width', 'variant'],
mounted () {
@@ -16,7 +20,7 @@ export default {
datasets: [
{
backgroundColor: 'transparent',
borderColor: this.variant ? this.variant : '#c2cfd6',
borderColor: this.getVariant(this.variant) || '#c2cfd6',
data: this.data
}
]
@@ -46,6 +50,11 @@ export default {
display: false
}
})
},
methods: {
getVariant (val, el) {
return val[0] === '#' ? val : getStyle(`--${val}`, el)
}
}
}
</script>
src/views/dashboard/CardLine1ChartExample.vue
+8 -5
View File
@@ -1,8 +1,11 @@
<script>
import { Line } from 'vue-chartjs'
// import { getStyle } from '@coreui/coreui/js/src/utilities'
const brandPrimary = '#20a8d8'
const datasets = [
// const brandPrimary = getStyle('--primary')
const datasets1 = [
{
label: 'My First dataset',
backgroundColor: brandPrimary,
@@ -13,11 +16,11 @@ const datasets = [
export default {
extends: Line,
props: ['height'],
props: ['height', 'width'],
mounted () {
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: datasets
datasets: datasets1
}, {
maintainAspectRatio: false,
legend: {
@@ -38,8 +41,8 @@ export default {
display: false,
ticks: {
display: false,
min: Math.min.apply(Math, datasets[0].data) - 5,
max: Math.max.apply(Math, datasets[0].data) + 5
min: Math.min.apply(Math, datasets1[0].data) - 5,
max: Math.max.apply(Math, datasets1[0].data) + 5
}
}]
},
src/views/dashboard/CardLine2ChartExample.vue
+8 -5
View File
@@ -1,8 +1,11 @@
<script>
import { Line } from 'vue-chartjs'
// import { getStyle } from '@coreui/coreui/js/src/utilities'
const brandInfo = '#63c2de'
const datasets = [
// const brandInfo = getStyle('--light-blue')
const datasets2 = [
{
label: 'My First dataset',
backgroundColor: brandInfo,
@@ -13,11 +16,11 @@ const datasets = [
export default {
extends: Line,
props: ['height'],
props: ['height', 'width'],
mounted () {
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: datasets
datasets: datasets2
}, {
maintainAspectRatio: false,
legend: {
@@ -39,8 +42,8 @@ export default {
display: false,
ticks: {
display: false,
min: Math.min.apply(Math, datasets[0].data) - 5,
max: Math.max.apply(Math, datasets[0].data) + 5
min: Math.min.apply(Math, datasets2[0].data) - 5,
max: Math.max.apply(Math, datasets2[0].data) + 5
}
}]
},
src/views/dashboard/CardLine3ChartExample.vue
+1 -1
View File
@@ -12,7 +12,7 @@ const datasets = [
export default {
extends: Line,
props: ['height'],
props: ['height', 'width'],
mounted () {
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
src/views/dashboard/MainChartExample.vue
+15 -14
View File
@@ -1,10 +1,11 @@
<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'
// const brandSuccess = '#4dbd74'
// const brandInfo = '#63c2de'
// const brandDanger = '#f86c6b'
function convertHex (hex, opacity) {
hex = hex.replace('#', '')
@@ -12,8 +13,8 @@ function convertHex (hex, opacity) {
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 result
// const result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')'
return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`
}
function random (min, max) {
@@ -24,12 +25,12 @@ export default {
extends: Line,
props: ['height'],
mounted () {
var elements = 27
var data1 = []
var data2 = []
var data3 = []
let elements = 27
const data1 = []
const data2 = []
const data3 = []
for (var i = 0; i <= elements; i++) {
for (let i = 0; i <= elements; i++) {
data1.push(random(50, 200))
data2.push(random(80, 100))
data3.push(65)
@@ -39,8 +40,8 @@ export default {
datasets: [
{
label: 'My First dataset',
backgroundColor: convertHex(brandInfo, 10),
borderColor: brandInfo,
backgroundColor: convertHex(getStyle('--info'), 10),
borderColor: getStyle('--info'),
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: data1
@@ -48,7 +49,7 @@ export default {
{
label: 'My Second dataset',
backgroundColor: 'transparent',
borderColor: brandSuccess,
borderColor: getStyle('--success'),
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: data2
@@ -56,7 +57,7 @@ export default {
{
label: 'My Third dataset',
backgroundColor: 'transparent',
borderColor: brandDanger,
borderColor: getStyle('--danger'),
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
borderDash: [8, 5],
static/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB