Feat: split stats in 2 components caOnPeriod and caRepartition
This commit is contained in:
parent
ed90959687
commit
2212ff4afe
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="hightlights">
|
||||
<div class="hightlight boxed">
|
||||
<ul>
|
||||
<li>{{ ca }} €</li>
|
||||
<li>CA</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="hightlight boxed">
|
||||
<ul>
|
||||
<li>{{ remuneration }} €</li>
|
||||
<li>Rémunération</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="hightlight boxed">
|
||||
<ul>
|
||||
<li>{{ caPersoUntouch }} €</li>
|
||||
<li>13e mois</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<revenus-chart/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { caTotal,
|
||||
caMean,
|
||||
remuneration,
|
||||
caPersoUntouch
|
||||
} from '../lib/months'
|
||||
import RevenusChart from '../components/graphs/RevenusChart.vue'
|
||||
|
||||
export default {
|
||||
name: 'caOnPeriod',
|
||||
components: {
|
||||
RevenusChart: RevenusChart,
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('config', {
|
||||
caProPercentage: 'caProPercentage',
|
||||
}),
|
||||
...mapGetters('travail', {
|
||||
months: "months",
|
||||
}),
|
||||
ca: function () {return caTotal(this.months).toLocaleString()},
|
||||
caMean: function () {return caMean(this.months).toLocaleString()},
|
||||
remuneration: function () {return remuneration(this.months).toLocaleString()},
|
||||
caPersoUntouch: function () {return caPersoUntouch(this.months, this.caProPercentage).toLocaleString()},
|
||||
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hightlights {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 20px;
|
||||
}
|
||||
.hightlight > ul{
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
.hightlight > ul > li {
|
||||
margin: 5px;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.hightlight > ul :first-child{
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.hightlight > ul :last-child{
|
||||
text-align: end;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<div class="hightlights">
|
||||
<div class="hightlight boxed">
|
||||
<ul>
|
||||
<li>{{ caTheo }} €</li>
|
||||
<li>CA "séances effectuées"</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="hightlight boxed">
|
||||
<ul>
|
||||
<li>{{ notInvoiced }} €</li>
|
||||
<li>Non facturé</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="hightlight boxed">
|
||||
<ul>
|
||||
<li>{{ retrocession }} €</li>
|
||||
<li>Rétrocession</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<repartition-chart/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import {
|
||||
caTheo,
|
||||
notInvoiced,
|
||||
retrocession,
|
||||
} from '../lib/months'
|
||||
import RepartitionChart from './graphs/RepartitionChart.vue'
|
||||
|
||||
export default {
|
||||
name: 'caRepartition',
|
||||
components: {
|
||||
RepartitionChart: RepartitionChart,
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('config', {
|
||||
caProPercentage: 'caProPercentage',
|
||||
}),
|
||||
...mapGetters('travail', {
|
||||
months: "months",
|
||||
}),
|
||||
caTheo: function () {return caTheo(this.months).toLocaleString()},
|
||||
notInvoiced: function () {return notInvoiced(this.months).toLocaleString()},
|
||||
retrocession: function () {return retrocession(this.months).toLocaleString()},
|
||||
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hightlights{
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<div>
|
||||
<canvas id="repartition-chart"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from 'chart.js'
|
||||
import { mapGetters } from 'vuex'
|
||||
import {
|
||||
notInvoiced,
|
||||
caPro,
|
||||
remuneration,
|
||||
retrocession,
|
||||
caPersoUntouch,
|
||||
} from '../../lib/months'
|
||||
|
||||
export default {
|
||||
name: 'RepartitionChart',
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
months: function () {
|
||||
const ctx = document.getElementById('repartition-chart');
|
||||
new Chart(ctx, this.graphDatas);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('config', {
|
||||
caProPercentage: 'caProPercentage',
|
||||
}),
|
||||
...mapGetters('travail', {
|
||||
months: "months",
|
||||
}),
|
||||
graphDatas: function () {
|
||||
var datas = {
|
||||
type: "pie",
|
||||
data: {
|
||||
labels: ['Partie pro', 'Non facturé', 'Retrocession', 'Salaire', '13e mois'],
|
||||
datasets: [
|
||||
{
|
||||
label: "Difference CA perso et remuneration",
|
||||
data: [
|
||||
caPro(this.months, this.caProPercentage),
|
||||
notInvoiced(this.months),
|
||||
retrocession(this.months),
|
||||
remuneration(this.months),
|
||||
caPersoUntouch(this.months, this.caProPercentage),
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
legend: {position: 'right'},
|
||||
}
|
||||
}
|
||||
return datas
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
mounted() {
|
||||
const ctx = document.getElementById('repartition-chart');
|
||||
new Chart(ctx, this.graphDatas);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -22,10 +22,10 @@ export function caTotal (months) {
|
|||
}
|
||||
|
||||
export function caMean (months) {
|
||||
// Mean of CA
|
||||
return Math.floor(caTotal(months) / count(months))
|
||||
}
|
||||
|
||||
|
||||
export function caTheo (months) {
|
||||
// Total theorical CA
|
||||
return Object.values(months).map(a => a.ca_theo).reduce(
|
||||
|
|
@ -34,6 +34,11 @@ export function caTheo (months) {
|
|||
)
|
||||
}
|
||||
|
||||
export function notInvoiced (months) {
|
||||
// Total of not invoiced sessions
|
||||
return caTheo(months) - caTotal(months)
|
||||
}
|
||||
|
||||
export function remuneration (months) {
|
||||
// Total remuneration
|
||||
return Object.values(months).map(a => a.remuneration).reduce(
|
||||
|
|
|
|||
|
|
@ -55,3 +55,29 @@ button:hover {
|
|||
border-radius: 10px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.hightlights {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 20px;
|
||||
}
|
||||
.hightlight > ul{
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
padding-inline-start: 0;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
.hightlight > ul > li {
|
||||
margin: 5px;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.hightlight > ul :first-child{
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.hightlight > ul :last-child{
|
||||
text-align: end;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
<months-list/>
|
||||
</section>
|
||||
<section id="stats">
|
||||
<highlights/>
|
||||
<revenus-chart/>
|
||||
<ca-on-period/>
|
||||
<ca-repartition/>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -19,16 +19,16 @@ import { mapActions } from 'vuex'
|
|||
import MonthsList from '../components/MonthsUl.vue'
|
||||
import CreateMonth from '../components/CreateMonth.vue'
|
||||
import MonthSelector from '../components/monthSelector.vue'
|
||||
import Highlights from '../components/hightlights.vue'
|
||||
import RevenusChart from '../components/graphs/RevenusChart.vue'
|
||||
import caOnPeriod from '../components/caOnPeriod.vue'
|
||||
import caRepartition from '../components/caRepartition.vue'
|
||||
export default {
|
||||
name: 'home',
|
||||
components: {
|
||||
MonthsList: MonthsList,
|
||||
CreateMonth: CreateMonth,
|
||||
MonthSelector: MonthSelector,
|
||||
highlights: Highlights,
|
||||
RevenusChart: RevenusChart,
|
||||
caOnPeriod: caOnPeriod,
|
||||
caRepartition: caRepartition,
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
|
|
@ -60,8 +60,6 @@ export default {
|
|||
#content > * {
|
||||
margin: 20px;
|
||||
}
|
||||
#months {
|
||||
}
|
||||
#stats {
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue