TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-31 13:41:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

remove unused components and update eslint + prettier config

Browse Source
This commit is contained in:
Mohit Panjwani
2020-03-30 11:40:45 +05:30
parent 742e1e445a
commit 25114009e3
8 changed files with 669 additions and 5193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
resources/assets/js/components/chartjs/BarChart.vue
View File

@ -1,69 +0,0 @@
<template>
<div class="graph-container">
<canvas
id="graph"
ref="graph"
/>
</div>
</template>
<script>
import Chart from 'chart.js'
export default {
props: {
labels: {
type: Array,
require: true,
default: Array
},
values: {
type: Array,
require: true,
default: Array
}
},
mounted () {
let context = this.$refs.graph.getContext('2d')
let options = {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
}
}
let data = {
labels: this.labels,
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(79, 196, 127,0.2)',
borderColor: 'rgba(79, 196, 127,1)',
borderWidth: 1,
hoverBackgroundColor: 'rgba(79, 196, 127,0.4)',
hoverBorderColor: 'rgba(79, 196, 127,1)',
data: this.values
}
]
}
this.myBarChart = new Chart(context, {
type: 'bar',
data: data,
options: options
})
},
beforeDestroy () {
this.myBarChart.destroy()
}
}
</script>
<style scoped>
.graph-container {
height: 300px;
}
</style>

71
resources/assets/js/components/chartjs/DoughnutGraph.vue
View File

@ -1,71 +0,0 @@
<template>
<div class="graph-container">
<canvas
id="graph"
ref="graph"/>
</div>
</template>
<script>
import Chart from 'chart.js'
export default {
props: {
labels: {
type: Array,
require: true,
default: Array
},
values: {
type: Array,
require: true,
default: Array
},
bgColors: {
type: Array,
require: true,
default: Array
},
hoverBgColors: {
type: Array,
require: true,
default: Array
}
},
mounted () {
let context = this.$refs.graph.getContext('2d')
let options = {
responsive: true,
maintainAspectRatio: false
}
let data = {
labels: this.labels,
datasets: [
{
data: this.values,
backgroundColor: this.bgColors,
hoverBackgroundColor: this.hoverBgColors
}
]
}
this.myDoughnutChart = new Chart(context, {
type: 'doughnut',
data: data,
options: options
})
},
beforeDestroy () {
this.myDoughnutChart.destroy()
}
}
</script>
<style scoped>
.graph-container {
height: 300px;
}
</style>

72
resources/assets/js/components/chartjs/PieChart.vue
View File

@ -1,72 +0,0 @@
<template>
<div class="graph-container">
<canvas
id="graph"
ref="graph" />
</div>
</template>
<script>
import Chart from 'chart.js'
export default {
props: {
labels: {
type: Array,
require: true,
default: Array
},
values: {
type: Array,
require: true,
default: Array
},
bgColors: {
type: Array,
require: true,
default: Array
},
hoverBgColors: {
type: Array,
require: true,
default: Array
}
},
mounted () {
let context = this.$refs.graph.getContext('2d')
let options = {
responsive: true,
maintainAspectRatio: false
}
let data = {
labels: this.labels,
datasets: [
{
data: this.values,
backgroundColor: this.bgColors,
hoverBackgroundColor: this.hoverBgColors
}
]
}
this.pieChart = new Chart(context, {
type: 'pie',
data: data,
options: options
})
},
beforeDestroy () {
this.pieChart.destroy()
}
}
</script>
<style scoped>
.graph-container {
height: 300px;
}
</style>

95
resources/assets/js/components/chartjs/SVGPieChart.vue
View File

@ -1,95 +0,0 @@
<template>
<div class="graph-container easy-pie-chart">
<svg width="100%" height="100%" viewBox="0 0 34 34" class="donut">
<circle :stroke-width="strokeWidth" class="donut-segment" cx="17" cy="17" r="15.91549430918954" fill="transparent" :stroke="strokeColor" stroke-dasharray="100 0" />
<circle :stroke-width="strokeWidth" :stroke="color" :stroke-dasharray="successProgress" class="donut-segment" cx="17" cy="17" r="15.91549430918954" fill="transparent" />
<!-- <g class="chart-text">
<text :style="'fill:' + color" x="48%" y="50%" class="chart-number" >
{{ progress }}
</text>
<text :style="'fill:' + color" x="73%" y="50%" class="chart-label" >
%
</text>
</g> -->
</svg>
</div>
</template>
<script>
export default {
props: {
values: {
type: Number,
require: true,
default: 100
},
strokeWidth: {
type: Number,
require: false,
default: 1.2
},
strokeColor: {
type: String,
require: true,
default: '#eeeeee'
},
color: {
type: String,
require: true,
default: '#007dcc'
}
},
data () {
return {
progress: 0
}
},
watch: {
values (newvalue, oldvalue) {
if (newvalue !== oldvalue) {
this.setProgress()
}
}
},
computed: {
successProgress () {
return this.progress + ' ' + (100 - this.progress)
},
remainProgress () {
return 100 - this.progress + ' ' + this.progress
},
},
mounted () {
this.setProgress()
},
methods: {
setProgress () {
let self = this
for (let i = 0; i < this.values; i++) {
setTimeout(function () {
++self.progress
}, 15 * i)
}
}
}
}
</script>
<style scoped>
.chart-text {
font: 6px "Montserrat", Arial, sans-serif;
fill: #000;
-moz-transform: translateY(0.25em);
-ms-transform: translateY(0.25em);
-webkit-transform: translateY(0.25em);
transform: translateY(0.5em);
}
.chart-number {
font-size: 8px;
line-height: 1;
text-anchor: middle;
}
.chart-label {
font-size: 5px;
text-transform: uppercase;
text-anchor: middle;
}
</style>