danak/asan-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

somewhere

Browse Source
This commit is contained in:
Swift
2023-08-17 13:05:51 +03:30
parent 30c7eb0e7b
commit 53843207cc
429 changed files with 117489 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/admin/charts/CChartBarExample.vue
+20
View File
@@ -0,0 +1,20 @@
<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>
components/admin/charts/CChartBarSimple.vue
+78
View File
@@ -0,0 +1,78 @@
/* eslint-disable vue/require-default-prop */
<template>
<CChartBar :datasets="computedDatasets" :options="computedOptions" :labels="labels" />
</template>
<script>
import CoreUtils from '~/mixins/CoreUtils'
export default {
name: 'CChartBarSimple',
mixins: [CoreUtils],
props: {
// eslint-disable-next-line vue/require-default-prop
datasets: Array,
// eslint-disable-next-line vue/require-default-prop
labels: [Array, String],
// eslint-disable-next-line vue/require-default-prop
options: Object,
// eslint-disable-next-line vue/require-default-prop
plugins: Array,
backgroundColor: {
type: String,
default: 'rgba(0,0,0,.2)'
},
// eslint-disable-next-line vue/require-default-prop
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>
components/admin/charts/CChartDoughnutExample.vue
+19
View File
@@ -0,0 +1,19 @@
<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>
components/admin/charts/CChartLineExample.vue
+25
View File
@@ -0,0 +1,25 @@
<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>
components/admin/charts/CChartLineSimple.vue
+145
View File
@@ -0,0 +1,145 @@
/* eslint-disable vue/require-default-prop */
<template>
<CChartLine :datasets="computedDatasets" :options="computedOptions" :labels="labels" />
</template>
<script>
import CoreUtils from '~/mixins/CoreUtils'
export default {
name: 'CChartLineSimple',
mixins: [CoreUtils],
props: {
// eslint-disable-next-line vue/require-default-prop
datasets: Array,
// eslint-disable-next-line vue/require-default-prop
labels: [Array, String],
// eslint-disable-next-line vue/require-default-prop
options: Object,
// eslint-disable-next-line vue/require-default-prop
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,
// eslint-disable-next-line vue/require-default-prop
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>
components/admin/charts/CChartPieExample.vue
+19
View File
@@ -0,0 +1,19 @@
<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>
components/admin/charts/CChartPolarAreaExample.vue
+42
View File
@@ -0,0 +1,42 @@
<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>
components/admin/charts/CChartRadarExample.vue
+46
View File
@@ -0,0 +1,46 @@
<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>
components/admin/charts/MainChartExample.vue
+135
View File
@@ -0,0 +1,135 @@
<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],
layout: 'admin',
computed: {
defaultDatasets() {
const brandSuccess = this.getStyle('success2') || '#4dbd74'
const brandInfo = this.getStyle('info') || '#20a8d8'
const brandDanger = this.getStyle('danger') || '#f86c6b'
const 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
}
}
}
}
}
}
</script>