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

refactor: update examples

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-08-30 00:44:20 +02:00
parent e3dd33a2f8
commit 0f2cb6c1db
40 changed files with 334 additions and 754 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/charts/CChartBarExample.vue
+21 -10
View File
@@ -1,7 +1,5 @@
<template>
<CChartBar
:data="defaultData"
/>
<CChartBar :data="defaultData" />
</template>
<script>
@@ -10,18 +8,31 @@ export default {
name: 'CChartBarExample',
components: { CChartBar },
computed: {
defaultData () {
defaultData() {
return {
labels: ['months'],
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, 12]
}
]
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 12],
},
],
}
}
}
},
},
}
</script>
src/views/charts/CChartBarSimple.vue
-65
View File
@@ -1,65 +0,0 @@
<template>
<CChartBar
:data="computedData"
/>
</template>
<script>
import { CChartBar } from '@coreui/vue-chartjs'
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
export default {
name: 'CChartBarSimple',
components: { CChartBar },
props: {
...CChartBar.props,
backgroundColor: {
type: String,
default: '#f87979'
},
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: {
defaultOptions () {
return {
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
}
}
},
computedData () {
return {
labels: ['4','5','6','7','8','9','10','11','12','13','14','15'],
datasets: [
{
data: this.dataPoints,
backgroundColor: getColor(this.backgroundColor),
pointHoverBackgroundColor: getColor(this.pointHoverBackgroundColor),
label: this.label,
barPercentage: 0.5,
categoryPercentage: 1
}
],
options: this.defaultOptions
}
},
}
}
</script>
src/views/charts/CChartLineSimple.vue
-83
View File
@@ -1,83 +0,0 @@
<template>
<CChartLine
:data="computedData"
/>
</template>
<script>
import { CChartLine } from '@coreui/vue-chartjs'
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
export default {
name: 'CChartLineSimple',
components: { CChartLine },
props: {
...CChartLine.props,
borderColor: {
type: String,
default: 'rgba(255,255,255,.55)'
},
backgroundColor: {
type: String,
default: 'transparent'
},
dataPoints: {
type: Array,
default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
},
label: {
type: String,
default: 'Sales'
},
pointed: {
type: Boolean,
default: true
},
pointHoverBackgroundColor: String
},
computed: {
pointHoverColor () {
if (this.pointHoverBackgroundColor) {
return this.pointHoverBackgroundColor
} else if (this.backgroundColor !== 'transparent') {
return this.backgroundColor
}
return this.borderColor
},
computedData () {
return {
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
datasets: [
{
data: this.dataPoints,
borderColor: getColor(this.borderColor),
backgroundColor: getColor(this.backgroundColor),
pointBackgroundColor: getColor(this.pointHoverColor),
pointHoverBackgroundColor: getColor(this.pointHoverColor),
label: this.label
}
],
options: {
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
},
elements: {
line: {
borderWidth: 2
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4
}
}
}
}
},
}
}
</script>
src/views/charts/CChartLineSimplePointed.vue
-100
View File
@@ -1,100 +0,0 @@
<template>
<CChartLine
:data="computedData"
/>
</template>
<script>
import { CChartLine } from '@coreui/vue-chartjs'
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
export default {
name: 'CChartLineSimplePointed',
components: { CChartLine },
props: {
...CChartLine.props,
borderColor: {
type: String,
default: 'rgba(255,255,255,.55)'
},
backgroundColor: {
type: String,
default: 'transparent'
},
dataPoints: {
type: Array,
default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
},
label: {
type: String,
default: 'Sales'
},
pointed: {
type: Boolean,
default: true
},
pointHoverBackgroundColor: String
},
computed: {
pointHoverColor () {
if (this.pointHoverBackgroundColor) {
return this.pointHoverBackgroundColor
} else if (this.backgroundColor !== 'transparent') {
return this.backgroundColor
}
return this.borderColor
},
computedData () {
return {
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
datasets: [
{
data: this.dataPoints,
borderColor: getColor(this.borderColor),
backgroundColor: getColor(this.backgroundColor),
pointBackgroundColor: getColor(this.pointHoverColor),
pointHoverBackgroundColor: getColor(this.pointHoverColor),
label: this.label
}
],
options: {
scales: {
xAxes: [
{
offset: true,
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
}
}
}
}
},
}
}
</script>
src/views/charts/Charts.vue
+7 -29
View File
@@ -1,6 +1,6 @@
<template>
<CRow>
<CCol md="6" class="mt-4">
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>
Line Chart
@@ -10,58 +10,36 @@
</CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Bar Chart</CCardHeader>
<CCardBody><CChartBarExample/></CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Doughnut Chart</CCardHeader>
<CCardBody><CChartDoughnutExample/></CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Radar Chart</CCardHeader>
<CCardBody><CChartRadarExample/></CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Pie Chart</CCardHeader>
<CCardBody><CChartPieExample/></CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Polar Area Chart</CCardHeader>
<CCardBody><CChartPolarAreaExample/></CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCard>
<CCardHeader>Simple line chart</CCardHeader>
<CCardBody>
<CChartLineSimple border-color="success" labels="months"/>
</CCardBody>
</CCard>
</CCol>
<!--
<CCol md="6" class="mt-4">
<CCard>
<CCardHeader>Simple pointed chart</CCardHeader>
<CCardBody><CChartLineSimplePointed :pointed="true" border-color="warning"/></CCardBody>
</CCard>
</CCol>
-->
<CCol md="6" class="mt-4">
<CCard>
<CCardHeader>Simple bar chart</CCardHeader>
<CCardBody><CChartBarSimple background-color="danger"/></CCardBody>
</CCard>
</CCol>
</CRow>
</template>
@@ -73,4 +51,4 @@ export default {
...Charts
}
}
</script>
</script>
src/views/charts/index.js
+1 -7
View File
@@ -1,6 +1,3 @@
import CChartLineSimple from './CChartLineSimple'
import CChartLineSimplePointed from './CChartLineSimplePointed'
import CChartBarSimple from './CChartBarSimple'
import CChartLineExample from './CChartLineExample'
import CChartBarExample from './CChartBarExample'
import CChartDoughnutExample from './CChartDoughnutExample'
@@ -9,13 +6,10 @@ import CChartPieExample from './CChartPieExample'
import CChartPolarAreaExample from './CChartPolarAreaExample'
export {
CChartLineSimple,
CChartLineSimplePointed,
CChartBarSimple,
CChartLineExample,
CChartBarExample,
CChartDoughnutExample,
CChartRadarExample,
CChartPieExample,
CChartPolarAreaExample
}
}