Sousmargot/src/components/hightlights.vue

<template>
<div class="hightlights"> 
    <div class="hightlight boxed">
        <ul>
            <li>{{ ca }} €</li>
            <li>CA</li>
        </ul>
    </div>
    <div class="hightlight boxed">
        <ul>
            <li>{{ caMean }} €</li>
            <li>CA moyen</li>
        </ul>
    </div>
    <!--
    <div class="hightlight boxed">
        <ul>
            <li>{{ caTheo }}</li>
            <li>CA des séances effectuées</li>
        </ul>
    </div>
    -->
    <div class="hightlight boxed">
        <ul>
            <li>{{ caUnFactured }} €</li>
            <li>Non facturé</li>
        </ul>
    </div>
    <div class="hightlight boxed">
        <ul>
            <li>{{ remuneration }} €</li>
            <li>Rémunération</li>
        </ul>
    </div>
    <div class="hightlight boxed">
        <ul>
            <li>{{ remunerationMean }} €</li>
            <li>Rémunération moyenne</li>
        </ul>
    </div>
    <!--
    <div class="hightlight boxed">
        <ul>
            <li>{{ retrocession }}</li>
            <li>Rétrocession</li>
        </ul>
    </div>
    <div class="hightlight boxed">
        <ul>
            <li>{{ retrocessionMean }}</li>
            <li>Rétrocession moyenne</li>
        </ul>
    </div>
    <div class="hightlight boxed">
        <ul>
            <li>{{ caPro }}</li>
            <li> CA pour la partie pro ({{ caProPercentage*100}}% du CA)</li>
        </ul>
    </div>
    <div class="hightlight boxed">
        <ul>
            <li>{{ caPerso }}</li>
            <li> CA pour la partie perso</li>
        </ul>
    </div>
    -->
    <div class="hightlight boxed">
        <ul>
            <li>{{ caPersoUntouch }} €</li>
            <li> CA perso non utilisé pour se rémunérer</li>
        </ul>
    </div>
</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { caTotal,
    caMean,
    caTheo,
    remuneration,
    remunerationMean,
    retrocession,
    retrocessionMean,
    caPro,
    caPerso,
    caPersoUntouch 
} from '../lib/months'

export default {
    name: 'Hightlights',
    components: {
        },
    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()},
        caTheo: function () {return caTheo(this.months).toLocaleString()},
        caUnFactured: function () {return (caTheo(this.months) - caTotal(this.months)).toLocaleString()},
        remuneration: function () {return remuneration(this.months).toLocaleString()},
        remunerationMean: function () {return remunerationMean(this.months).toLocaleString()},
        retrocession: function () {return retrocession(this.months).toLocaleString()},
        retrocessionMean: function () {return retrocessionMean(this.months).toLocaleString()},
        caPro: function () {return caPro(this.months, this.caProPercentage).toLocaleString()},
        caPerso: function () {return caPerso(this.months, this.caProPercentage).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>