Feat: split stats in 2 components caOnPeriod and caRepartition

This commit is contained in:
Bertrand Benjamin 2021-08-12 06:15:36 +02:00
parent ed90959687
commit 2212ff4afe
6 changed files with 259 additions and 9 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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(

View File

@ -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;
}

View File

@ -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>