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

refactor: update example views

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-08-30 14:47:25 +02:00
parent a759550fb5
commit 1f5cad7f05
42 changed files with 2501 additions and 2112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/charts/CChartDoughnutExample.vue
+7 -14
View File
@@ -1,7 +1,5 @@
<template>
<CChartDoughnut
:data="defaultData"
/>
<CChartDoughnut :data="defaultData" />
</template>
<script>
@@ -10,22 +8,17 @@ export default {
name: 'CChartDoughnutExample',
components: { CChartDoughnut },
computed: {
defaultData () {
defaultData() {
return {
labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
datasets: [
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
data: [40, 20, 80, 10],
},
],
}
}
}
},
},
}
</script>
src/views/charts/CChartLineExample.vue
+8 -8
View File
@@ -1,5 +1,5 @@
<template>
<CChartLine :data="defaultData"/>
<CChartLine :data="defaultData" />
</template>
<script>
@@ -8,23 +8,23 @@ export default {
name: 'CChartLineExample',
components: { CChartLine },
computed: {
defaultData () {
defaultData() {
return {
labels: ['months', 'a', 'b', 'c', 'd'],
datasets: [
{
label: 'Data One',
backgroundColor: 'rgb(228,102,81,0.9)',
data: [30, 39, 10, 50, 30, 70, 35]
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]
}
]
data: [39, 80, 40, 35, 40, 20, 45],
},
],
}
}
}
},
},
}
</script>
src/views/charts/CChartPieExample.vue
+8 -15
View File
@@ -1,7 +1,5 @@
<template>
<CChartPie
:data="defaultData"
/>
<CChartPie :data="defaultData" />
</template>
<script>
@@ -10,22 +8,17 @@ export default {
name: 'CChartPieExample',
components: { CChartPie },
computed: {
defaultData () {
defaultData() {
return {
labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
datasets: [
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
]
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
data: [40, 20, 80, 10],
},
],
}
}
}
},
},
}
</script>
src/views/charts/CChartPolarAreaExample.vue
+18 -12
View File
@@ -1,7 +1,5 @@
<template>
<CChartPolarArea
:data="defaultData"
/>
<CChartPolarArea :data="defaultData" />
</template>
<script>
@@ -10,9 +8,17 @@ export default {
name: 'CChartPolarAreaExample',
components: { CChartPolarArea },
computed: {
defaultData () {
defaultData() {
return {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running',
],
datasets: [
{
label: 'My First dataset',
@@ -21,7 +27,7 @@ export default {
pointBorderColor: '#fff',
pointHoverBackgroundColor: 'rgba(179,181,198,1)',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40]
data: [65, 59, 90, 81, 56, 55, 40],
},
{
label: 'My Second dataset',
@@ -30,14 +36,14 @@ export default {
pointBorderColor: '#fff',
pointHoverBackgroundColor: 'rgba(255,99,132,1)',
pointHoverBorderColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100]
}
data: [28, 48, 40, 19, 96, 27, 100],
},
],
options: {
aspectRatio: 1.5
}
aspectRatio: 1.5,
},
}
},
}
},
}
</script>
</script>
src/views/charts/CChartRadarExample.vue
+19 -13
View File
@@ -1,7 +1,5 @@
<template>
<CChartRadar
:data="defaultData"
/>
<CChartRadar :data="defaultData" />
</template>
<script>
@@ -10,9 +8,17 @@ export default {
name: 'CChartRadarExample',
components: { CChartRadar },
computed: {
defaultData () {
defaultData() {
return {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running',
],
datasets: [
{
label: '2020',
@@ -23,7 +29,7 @@ export default {
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
tooltipLabelColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40]
data: [65, 59, 90, 81, 56, 55, 40],
},
{
label: '2021',
@@ -34,14 +40,14 @@ export default {
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)',
tooltipLabelColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100]
}
data: [28, 48, 40, 19, 96, 27, 100],
},
],
options: {
aspectRatio: 1.5
}
options: {
aspectRatio: 1.5,
},
}
},
}
},
}
</script>
</script>
src/views/charts/Charts.vue
+10 -12
View File
@@ -2,42 +2,40 @@
<CRow>
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>
Line Chart
</CCardHeader>
<CCardHeader> Line Chart </CCardHeader>
<CCardBody>
<CChartLineExample/>
<CChartLineExample />
</CCardBody>
</CCard>
</CCol>
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Bar Chart</CCardHeader>
<CCardBody><CChartBarExample/></CCardBody>
<CCardBody><CChartBarExample /></CCardBody>
</CCard>
</CCol>
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Doughnut Chart</CCardHeader>
<CCardBody><CChartDoughnutExample/></CCardBody>
<CCardBody><CChartDoughnutExample /></CCardBody>
</CCard>
</CCol>
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Radar Chart</CCardHeader>
<CCardBody><CChartRadarExample/></CCardBody>
<CCardBody><CChartRadarExample /></CCardBody>
</CCard>
</CCol>
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Pie Chart</CCardHeader>
<CCardBody><CChartPieExample/></CCardBody>
<CCardHeader>Pie Chart</CCardHeader>
<CCardBody><CChartPieExample /></CCardBody>
</CCard>
</CCol>
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Polar Area Chart</CCardHeader>
<CCardBody><CChartPolarAreaExample/></CCardBody>
<CCardBody><CChartPolarAreaExample /></CCardBody>
</CCard>
</CCol>
</CRow>
@@ -48,7 +46,7 @@ import * as Charts from './index.js'
export default {
name: 'Charts',
components: {
...Charts
}
...Charts,
},
}
</script>
src/views/charts/MainChartExample.vue
+23 -23
View File
@@ -10,27 +10,27 @@
</template>
<script>
import { CChart } from "@coreui/vue-chartjs";
import { getStyle, hexToRgba } from "@coreui/utils/src";
import { CChart } from '@coreui/vue-chartjs'
import { getStyle, hexToRgba } from '@coreui/utils/src'
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
return Math.floor(Math.random() * (max - min + 1) + min)
}
export default {
name: "MainChartExample",
name: 'MainChartExample',
components: {
CChart,
},
setup() {
const data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: "My First dataset",
backgroundColor: hexToRgba(getStyle("--cui-info"), 10),
borderColor: getStyle("--cui-info"),
pointHoverBackgroundColor: getStyle("--cui-info"),
label: 'My First dataset',
backgroundColor: hexToRgba(getStyle('--cui-info'), 10),
borderColor: getStyle('--cui-info'),
pointHoverBackgroundColor: getStyle('--cui-info'),
borderWidth: 2,
data: [
random(50, 200),
@@ -44,10 +44,10 @@ export default {
fill: true,
},
{
label: "My Second dataset",
backgroundColor: "transparent",
borderColor: getStyle("--cui-success"),
pointHoverBackgroundColor: getStyle("--cui-success"),
label: 'My Second dataset',
backgroundColor: 'transparent',
borderColor: getStyle('--cui-success'),
pointHoverBackgroundColor: getStyle('--cui-success'),
borderWidth: 2,
data: [
random(50, 200),
@@ -60,16 +60,16 @@ export default {
],
},
{
label: "My Third dataset",
backgroundColor: "transparent",
borderColor: getStyle("--cui-danger"),
pointHoverBackgroundColor: getStyle("--cui-danger"),
label: 'My Third dataset',
backgroundColor: 'transparent',
borderColor: getStyle('--cui-danger'),
pointHoverBackgroundColor: getStyle('--cui-danger'),
borderWidth: 1,
borderDash: [8, 5],
data: [65, 65, 65, 65, 65, 65, 65],
},
],
};
}
const options = {
maintainAspectRatio: false,
@@ -104,18 +104,18 @@ export default {
hoverBorderWidth: 3,
},
},
};
}
return {
data,
options,
};
}
},
methods: {
aa(value, value2) {
console.log(value);
console.log(value2);
console.log(value)
console.log(value2)
},
},
};
}
</script>
src/views/charts/index.js
+1 -1
View File
@@ -11,5 +11,5 @@ export {
CChartDoughnutExample,
CChartRadarExample,
CChartPieExample,
CChartPolarAreaExample
CChartPolarAreaExample,
}