Skip to content

Commit c50be95

Browse files
hibunohibuno
committed
Restructure filename & directory
1 parent e5866a8 commit c50be95

20 files changed

+5332
-0
lines changed

‎components/charts/BarExample.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script>
2+
import { Bar } from 'vue-chartjs'
3+
4+
export default {
5+
extends: Bar,
6+
mounted () {
7+
// Overwriting base render method with actual data.
8+
this.renderChart({
9+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
10+
datasets: [
11+
{
12+
label: 'GitHub Commits',
13+
backgroundColor: '#f87979',
14+
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
15+
}
16+
]
17+
})
18+
}
19+
}
20+
</script>

‎components/charts/DoughnutExample.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script>
2+
import { Doughnut } from 'vue-chartjs'
3+
4+
export default {
5+
extends: Doughnut,
6+
mounted () {
7+
this.renderChart({
8+
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
9+
datasets: [
10+
{
11+
backgroundColor: [
12+
'#41B883',
13+
'#E46651',
14+
'#00D8FF',
15+
'#DD1B16'
16+
],
17+
data: [40, 20, 80, 10]
18+
}
19+
]
20+
}, {responsive: true, maintainAspectRatio: false})
21+
}
22+
}
23+
</script>

‎components/charts/LineExample.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script>
2+
import { Line } from 'vue-chartjs'
3+
4+
export default {
5+
extends: Line,
6+
mounted () {
7+
this.renderChart({
8+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
9+
datasets: [
10+
{
11+
label: 'Data One',
12+
backgroundColor: '#f87979',
13+
data: [40, 39, 10, 40, 39, 80, 40]
14+
}
15+
]
16+
}, {responsive: true, maintainAspectRatio: false})
17+
}
18+
}
19+
</script>

‎components/charts/PieExample.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script>
2+
import { Pie } from 'vue-chartjs'
3+
4+
export default {
5+
extends: Pie,
6+
mounted () {
7+
this.renderChart({
8+
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
9+
datasets: [
10+
{
11+
backgroundColor: [
12+
'#41B883',
13+
'#E46651',
14+
'#00D8FF',
15+
'#DD1B16'
16+
],
17+
data: [40, 20, 80, 10]
18+
}
19+
]
20+
}, {responsive: true, maintainAspectRatio: false})
21+
}
22+
}
23+
</script>

‎components/charts/PolarAreaExample.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script>
2+
import { PolarArea } from 'vue-chartjs'
3+
4+
export default {
5+
extends: PolarArea,
6+
mounted () {
7+
this.renderChart({
8+
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
9+
datasets: [
10+
{
11+
label: 'My First dataset',
12+
backgroundColor: 'rgba(179,181,198,0.2)',
13+
pointBackgroundColor: 'rgba(179,181,198,1)',
14+
pointBorderColor: '#fff',
15+
pointHoverBackgroundColor: '#fff',
16+
pointHoverBorderColor: 'rgba(179,181,198,1)',
17+
data: [65, 59, 90, 81, 56, 55, 40]
18+
},
19+
{
20+
label: 'My Second dataset',
21+
backgroundColor: 'rgba(255,99,132,0.2)',
22+
pointBackgroundColor: 'rgba(255,99,132,1)',
23+
pointBorderColor: '#fff',
24+
pointHoverBackgroundColor: '#fff',
25+
pointHoverBorderColor: 'rgba(255,99,132,1)',
26+
data: [28, 48, 40, 19, 96, 27, 100]
27+
}
28+
]
29+
}, {responsive: true, maintainAspectRatio: false})
30+
}
31+
}
32+
</script>

‎components/charts/RadarExample.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script>
2+
import { Radar } from 'vue-chartjs'
3+
4+
export default {
5+
extends: Radar,
6+
mounted () {
7+
this.renderChart({
8+
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
9+
datasets: [
10+
{
11+
label: 'My First dataset',
12+
backgroundColor: 'rgba(179,181,198,0.2)',
13+
borderColor: 'rgba(179,181,198,1)',
14+
pointBackgroundColor: 'rgba(179,181,198,1)',
15+
pointBorderColor: '#fff',
16+
pointHoverBackgroundColor: '#fff',
17+
pointHoverBorderColor: 'rgba(179,181,198,1)',
18+
data: [65, 59, 90, 81, 56, 55, 40]
19+
},
20+
{
21+
label: 'My Second dataset',
22+
backgroundColor: 'rgba(255,99,132,0.2)',
23+
borderColor: 'rgba(255,99,132,1)',
24+
pointBackgroundColor: 'rgba(255,99,132,1)',
25+
pointBorderColor: '#fff',
26+
pointHoverBackgroundColor: '#fff',
27+
pointHoverBorderColor: 'rgba(255,99,132,1)',
28+
data: [28, 48, 40, 19, 96, 27, 100]
29+
}
30+
]
31+
}, {responsive: true, maintainAspectRatio: false})
32+
}
33+
}
34+
</script>

‎components/dashboard/CalloutChartExample.vue‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<script>
2+
import { Line } from 'vue-chartjs'
3+
4+
// const brandPrimary = '#20a8d8'
5+
// const brandSuccess = '#4dbd74'
6+
// const brandInfo = '#63c2de'
7+
// const brandWarning = '#f8cb00'
8+
// const brandDanger = '#f86c6b'
9+
10+
export default {
11+
extends: Line,
12+
props: ['data', 'height', 'width', 'variant'],
13+
mounted () {
14+
this.renderChart({
15+
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
16+
datasets: [
17+
{
18+
backgroundColor: 'transparent',
19+
borderColor: this.variant ? this.variant : '#c2cfd6',
20+
data: this.data
21+
}
22+
]
23+
}, {
24+
responsive: true,
25+
maintainAspectRatio: true,
26+
scales: {
27+
xAxes: [{
28+
display: false
29+
}],
30+
yAxes: [{
31+
display: false
32+
}]
33+
},
34+
elements: {
35+
line: {
36+
borderWidth: 2
37+
},
38+
point: {
39+
radius: 0,
40+
hitRadius: 10,
41+
hoverRadius: 4,
42+
hoverBorderWidth: 3
43+
}
44+
},
45+
legend: {
46+
display: false
47+
}
48+
})
49+
}
50+
}
51+
</script>

‎components/dashboard/CardBarChartExample.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script>
2+
import { Bar } from 'vue-chartjs'
3+
4+
const datasets = [
5+
{
6+
label: 'My First dataset',
7+
backgroundColor: 'rgba(255,255,255,.3)',
8+
borderColor: 'transparent',
9+
data: [78, 81, 80, 45, 34, 12, 40, 75, 34, 89, 32, 68, 54, 72, 18, 98]
10+
}
11+
]
12+
13+
export default {
14+
extends: Bar,
15+
props: ['height'],
16+
mounted () {
17+
this.renderChart({
18+
labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
19+
datasets: datasets
20+
}, {
21+
maintainAspectRatio: false,
22+
legend: {
23+
display: false
24+
},
25+
scales: {
26+
xAxes: [{
27+
display: false,
28+
categoryPercentage: 1,
29+
barPercentage: 0.5
30+
}],
31+
yAxes: [{
32+
display: false
33+
}]
34+
}
35+
})
36+
}
37+
}
38+
</script>

‎components/dashboard/CardLine1ChartExample.vue‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<script>
2+
import { Line } from 'vue-chartjs'
3+
4+
const brandPrimary = '#20a8d8'
5+
const datasets = [
6+
{
7+
label: 'My First dataset',
8+
backgroundColor: brandPrimary,
9+
borderColor: 'rgba(255,255,255,.55)',
10+
data: [65, 59, 84, 84, 51, 55, 40]
11+
}
12+
]
13+
14+
export default {
15+
extends: Line,
16+
props: ['height'],
17+
mounted () {
18+
this.renderChart({
19+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
20+
datasets: datasets
21+
}, {
22+
maintainAspectRatio: false,
23+
legend: {
24+
display: false
25+
},
26+
scales: {
27+
xAxes: [{
28+
gridLines: {
29+
color: 'transparent',
30+
zeroLineColor: 'transparent'
31+
},
32+
ticks: {
33+
fontSize: 2,
34+
fontColor: 'transparent'
35+
}
36+
}],
37+
yAxes: [{
38+
display: false,
39+
ticks: {
40+
display: false,
41+
min: Math.min.apply(Math, datasets[0].data) - 5,
42+
max: Math.max.apply(Math, datasets[0].data) + 5
43+
}
44+
}]
45+
},
46+
elements: {
47+
line: {
48+
borderWidth: 1
49+
},
50+
point: {
51+
radius: 4,
52+
hitRadius: 10,
53+
hoverRadius: 4
54+
}
55+
}
56+
})
57+
}
58+
}
59+
</script>

‎components/dashboard/CardLine2ChartExample.vue‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<script>
2+
import { Line } from 'vue-chartjs'
3+
4+
const brandInfo = '#63c2de'
5+
const datasets = [
6+
{
7+
label: 'My First dataset',
8+
backgroundColor: brandInfo,
9+
borderColor: 'rgba(255,255,255,.55)',
10+
data: [1, 18, 9, 17, 34, 22, 11]
11+
}
12+
]
13+
14+
export default {
15+
extends: Line,
16+
props: ['height'],
17+
mounted () {
18+
this.renderChart({
19+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
20+
datasets: datasets
21+
}, {
22+
maintainAspectRatio: false,
23+
legend: {
24+
display: false
25+
},
26+
scales: {
27+
xAxes: [{
28+
gridLines: {
29+
color: 'transparent',
30+
zeroLineColor: 'transparent'
31+
},
32+
ticks: {
33+
fontSize: 2,
34+
fontColor: 'transparent'
35+
}
36+
37+
}],
38+
yAxes: [{
39+
display: false,
40+
ticks: {
41+
display: false,
42+
min: Math.min.apply(Math, datasets[0].data) - 5,
43+
max: Math.max.apply(Math, datasets[0].data) + 5
44+
}
45+
}]
46+
},
47+
elements: {
48+
line: {
49+
tension: 0.00001,
50+
borderWidth: 1
51+
},
52+
point: {
53+
radius: 4,
54+
hitRadius: 10,
55+
hoverRadius: 4
56+
}
57+
}
58+
})
59+
}
60+
}
61+
</script>

0 commit comments

Comments
 (0)