mirror of
https://github.com/crater-invoice/crater.git
synced 2025-12-16 10:22:55 -05:00
init crater
This commit is contained in:
Mohit Panjwani
69
resources/assets/js/components/chartjs/BarChart.vue
Normal file
69
resources/assets/js/components/chartjs/BarChart.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<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
Normal file
71
resources/assets/js/components/chartjs/DoughnutGraph.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<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>
|
||||
195
resources/assets/js/components/chartjs/LineChart.vue
Normal file
195
resources/assets/js/components/chartjs/LineChart.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div class="graph-container">
|
||||
<canvas
|
||||
id="graph"
|
||||
ref="graph" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from 'chart.js'
|
||||
import Utils from '../../helpers/utilities'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
labels: {
|
||||
type: Array,
|
||||
require: true,
|
||||
default: Array
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
require: true,
|
||||
default: Array
|
||||
},
|
||||
invoices: {
|
||||
type: Array,
|
||||
require: true,
|
||||
default: Array
|
||||
},
|
||||
expenses: {
|
||||
type: Array,
|
||||
require: true,
|
||||
default: Array
|
||||
},
|
||||
receipts: {
|
||||
type: Array,
|
||||
require: true,
|
||||
default: Array
|
||||
},
|
||||
income: {
|
||||
type: Array,
|
||||
require: true,
|
||||
default: Array
|
||||
},
|
||||
formatMoney: {
|
||||
type: Function,
|
||||
require: false,
|
||||
default: Function
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
labels (val) {
|
||||
this.update()
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
let context = this.$refs.graph.getContext('2d')
|
||||
let options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
tooltips: {
|
||||
enabled: true,
|
||||
callbacks: {
|
||||
label: function (tooltipItem, data) {
|
||||
return Utils.formatGraphMoney(tooltipItem.value)
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
let data = {
|
||||
labels: this.labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Sales',
|
||||
fill: false,
|
||||
lineTension: 0.3,
|
||||
backgroundColor: 'rgba(230, 254, 249)',
|
||||
borderColor: '#040405',
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: '#040405',
|
||||
pointBackgroundColor: '#fff',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: '#040405',
|
||||
pointHoverBorderColor: 'rgba(220,220,220,1)',
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
pointHitRadius: 10,
|
||||
data: this.invoices
|
||||
},
|
||||
{
|
||||
label: 'Receipts',
|
||||
fill: false,
|
||||
lineTension: 0.3,
|
||||
backgroundColor: 'rgba(230, 254, 249)',
|
||||
borderColor: 'rgb(2, 201, 156)',
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: 'rgb(2, 201, 156)',
|
||||
pointBackgroundColor: '#fff',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: 'rgb(2, 201, 156)',
|
||||
pointHoverBorderColor: 'rgba(220,220,220,1)',
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
pointHitRadius: 10,
|
||||
data: this.receipts
|
||||
},
|
||||
{
|
||||
label: 'Expenses',
|
||||
fill: false,
|
||||
lineTension: 0.3,
|
||||
backgroundColor: 'rgba(245, 235, 242)',
|
||||
borderColor: 'rgb(255,0,0)',
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: 'rgb(255,0,0)',
|
||||
pointBackgroundColor: '#fff',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: 'rgb(255,0,0)',
|
||||
pointHoverBorderColor: 'rgba(220,220,220,1)',
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
pointHitRadius: 10,
|
||||
data: this.expenses
|
||||
},
|
||||
{
|
||||
label: 'Net Income',
|
||||
fill: false,
|
||||
lineTension: 0.3,
|
||||
backgroundColor: 'rgba(236, 235, 249)',
|
||||
borderColor: 'rgba(88, 81, 216, 1)',
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: 'rgba(88, 81, 216, 1)',
|
||||
pointBackgroundColor: '#fff',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: 'rgba(88, 81, 216, 1)',
|
||||
pointHoverBorderColor: 'rgba(220,220,220,1)',
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
pointHitRadius: 10,
|
||||
data: this.income
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
this.myLineChart = new Chart(context, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: options
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
update () {
|
||||
this.myLineChart.data.labels = this.labels
|
||||
this.myLineChart.data.datasets[0].data = this.invoices
|
||||
this.myLineChart.data.datasets[1].data = this.receipts
|
||||
this.myLineChart.data.datasets[2].data = this.expenses
|
||||
this.myLineChart.data.datasets[3].data = this.income
|
||||
this.myLineChart.update({
|
||||
lazy: true
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy () {
|
||||
this.myLineChart.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.graph-container {
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
72
resources/assets/js/components/chartjs/PieChart.vue
Normal file
72
resources/assets/js/components/chartjs/PieChart.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<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
Normal file
95
resources/assets/js/components/chartjs/SVGPieChart.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user