feat: add ci cd files dont edit those files
This commit is contained in:
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<CChartBar
|
||||
:datasets="defaultDatasets"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartBarExample',
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<CChartBar
|
||||
:datasets="computedDatasets"
|
||||
:options="computedOptions"
|
||||
:labels="labels"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CoreUtils from '~/mixins/CoreUtils'
|
||||
|
||||
export default {
|
||||
name: 'CChartBarSimple',
|
||||
mixins: [CoreUtils],
|
||||
props: {
|
||||
datasets: Array,
|
||||
labels: [Array, String],
|
||||
options: Object,
|
||||
plugins: Array,
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'rgba(0,0,0,.2)'
|
||||
},
|
||||
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: {
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
backgroundColor: this.getColor(this.backgroundColor),
|
||||
pointHoverBackgroundColor: this.getColor(this.pointHoverBackgroundColor),
|
||||
label: this.label,
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions() {
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
computedDatasets() {
|
||||
return this.deepObjectsMerge(this.defaultDatasets, this.datasets || {})
|
||||
},
|
||||
computedOptions() {
|
||||
return this.deepObjectsMerge(this.defaultOptions, this.options || {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<CChartDoughnut
|
||||
:datasets="defaultDatasets"
|
||||
:labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartDoughnutExample',
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
backgroundColor: [
|
||||
'#41B883',
|
||||
'#E46651',
|
||||
'#00D8FF',
|
||||
'#DD1B16'
|
||||
],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:datasets="defaultDatasets"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartLineExample',
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: 'rgb(228,102,81,0.9)',
|
||||
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]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:datasets="computedDatasets"
|
||||
:options="computedOptions"
|
||||
:labels="labels"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CoreUtils from '~/mixins/CoreUtils'
|
||||
|
||||
export default {
|
||||
name: 'CChartLineSimple',
|
||||
mixins: [CoreUtils],
|
||||
props: {
|
||||
datasets: Array,
|
||||
labels: [Array, String],
|
||||
options: Object,
|
||||
plugins: Array,
|
||||
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: Boolean,
|
||||
pointHoverBackgroundColor: String
|
||||
},
|
||||
computed: {
|
||||
pointHoverColor() {
|
||||
if (this.pointHoverBackgroundColor) {
|
||||
return this.pointHoverBackgroundColor
|
||||
} else if (this.backgroundColor !== 'transparent') {
|
||||
return this.backgroundColor
|
||||
}
|
||||
return this.borderColor
|
||||
},
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
borderColor: this.getColor(this.borderColor),
|
||||
backgroundColor: this.getColor(this.backgroundColor),
|
||||
pointBackgroundColor: this.getColor(this.pointHoverColor),
|
||||
pointHoverBackgroundColor: this.getColor(this.pointHoverColor),
|
||||
label: this.label
|
||||
}
|
||||
]
|
||||
},
|
||||
pointedOptions() {
|
||||
return {
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
straightOptions() {
|
||||
return {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultOptions() {
|
||||
const options = this.pointed ? this.pointedOptions : this.straightOptions
|
||||
return Object.assign({}, options, {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
})
|
||||
},
|
||||
computedDatasets() {
|
||||
return this.deepObjectsMerge(this.defaultDatasets, this.datasets || {})
|
||||
},
|
||||
computedOptions() {
|
||||
return this.deepObjectsMerge(this.defaultOptions, this.options || {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<CChartPie
|
||||
:datasets="defaultDatasets"
|
||||
:labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartPieExample',
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
backgroundColor: [
|
||||
'#41B883',
|
||||
'#E46651',
|
||||
'#00D8FF',
|
||||
'#DD1B16'
|
||||
],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<CChartPolarArea
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
:labels="[
|
||||
'Eating', 'Drinking', 'Sleeping', 'Designing',
|
||||
'Coding', 'Cycling', 'Running'
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartPolarAreaExample',
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions () {
|
||||
return {
|
||||
aspectRatio: 1.5
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<CChartRadar
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
:labels="[
|
||||
'Eating', 'Drinking', 'Sleeping', 'Designing',
|
||||
'Coding', 'Cycling', 'Running'
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CChartRadarExample',
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
return [
|
||||
{
|
||||
label: '2019',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
borderColor: 'rgba(179,181,198,1)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
tooltipLabelColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: '2020',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
borderColor: 'rgba(255,99,132,1)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
tooltipLabelColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions() {
|
||||
return {
|
||||
aspectRatio: 1.5
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
: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']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { CChartLine } from '@coreui/vue-chartjs'
|
||||
// import { getStyle, hexToRgba } from '@coreui/utils/src'
|
||||
import CoreUtils from '~/mixins/CoreUtils'
|
||||
|
||||
function random(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'MainChartExample',
|
||||
mixins: [CoreUtils],
|
||||
computed: {
|
||||
defaultDatasets() {
|
||||
const brandSuccess = this.getStyle('success2') || '#4dbd74'
|
||||
const brandInfo = this.getStyle('info') || '#20a8d8'
|
||||
const brandDanger = this.getStyle('danger') || '#f86c6b'
|
||||
|
||||
let elements = 27
|
||||
const data1 = []
|
||||
const data2 = []
|
||||
const data3 = []
|
||||
|
||||
for (let i = 0; i <= elements; i++) {
|
||||
data1.push(random(50, 200))
|
||||
data2.push(random(80, 100))
|
||||
data3.push(65)
|
||||
}
|
||||
return [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: this.hexToRgba(brandInfo, 10),
|
||||
borderColor: brandInfo,
|
||||
pointHoverBackgroundColor: brandInfo,
|
||||
borderWidth: 2,
|
||||
data: data1
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandSuccess,
|
||||
pointHoverBackgroundColor: brandSuccess,
|
||||
borderWidth: 2,
|
||||
data: data2
|
||||
},
|
||||
{
|
||||
label: 'My Third dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandDanger,
|
||||
pointHoverBackgroundColor: brandDanger,
|
||||
borderWidth: 1,
|
||||
borderDash: [8, 5],
|
||||
data: data3
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions() {
|
||||
return {
|
||||
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
drawOnChartArea: false
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
maxTicksLimit: 5,
|
||||
stepSize: Math.ceil(250 / 5),
|
||||
max: 250
|
||||
},
|
||||
gridLines: {
|
||||
display: true
|
||||
}
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: 'admin'
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user