Compare commits
1 Commits
710015a37b
...
passleouin
| Author | SHA1 | Date | |
|---|---|---|---|
| 7a1004a8f6 |
@@ -1,5 +0,0 @@
|
||||
"eslint.validate": [
|
||||
"javascript",
|
||||
"javascriptreact",
|
||||
"vue"
|
||||
]
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
},
|
||||
"main": "background.js",
|
||||
"dependencies": {
|
||||
"chart.js": "2.9.4",
|
||||
"core-js": "^3.6.5",
|
||||
"date-fns": "^2.23.0",
|
||||
"papaparse": "^5.3.1",
|
||||
|
||||
@@ -1,36 +1,54 @@
|
||||
<template>
|
||||
<div class="toolbar">
|
||||
<button v-show='!addingMonth' @click='toggleAdding'>
|
||||
Ajouter {{ formatedDate }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="boxed-green month-presentation" id="new-month" v-show='addingMonth'>
|
||||
<div id="create-month" >
|
||||
<div class="month-presentation" id="new-month">
|
||||
<div class="date">
|
||||
<div class="month">
|
||||
{{ theMonth }}
|
||||
<input type="month" v-model="monthDate">
|
||||
</div>
|
||||
<div class="year">
|
||||
{{ theYear }}
|
||||
<div class="datas">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="ca-theo">CA théorique</label>
|
||||
<input type="number" v-model.number="monthCopy.ca_theo" id="ca-theo" class="value" >
|
||||
</li>
|
||||
<li>
|
||||
<label for="ca-retro">CA rétrocession</label>
|
||||
<input type="number" v-model.number="monthCopy.ca_retro" id="ca-retro" class="value" >
|
||||
</li>
|
||||
<li>
|
||||
<label for="ca-react">CA réactualisé</label>
|
||||
<input type="number" v-model.number="monthCopy.ca_react" id="ca-react" class="value" >
|
||||
</li>
|
||||
<li>
|
||||
<label for="nbr-seances">Nombre de séances effectuées</label>
|
||||
<input type="number" v-model.number="monthCopy.nbr_seances" id="nbr-seances" class="value" >
|
||||
</li>
|
||||
<li>
|
||||
<label for="retro">Montant de la rétrocession</label>
|
||||
<input type="number" v-model.number="monthCopy.retro" id="retro" class="value" >
|
||||
</li>
|
||||
<li>
|
||||
<label for="remuneration">Rémunération effectuée</label>
|
||||
<input type="number" v-model.number="monthCopy.remuneration" id="remuneration" class="value">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button class="validate" @click="save"> Valider </button>
|
||||
<button class="cancel" @click="cancel"> Annuler </button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="datas">
|
||||
<li v-for="cara in monthDesc" :key='cara.name'>
|
||||
<label :for='cara.name'>{{ cara.desc }}</label>
|
||||
<input type="number" v-model.number="monthCopy[cara.name]" id="cara.name" class="value">
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
import { parseISO, addMonths, format } from 'date-fns'
|
||||
import frLocal from 'date-fns/locale/fr'
|
||||
const today = new Date();
|
||||
function formatDate(date) {
|
||||
var y = ''+date.getFullYear()
|
||||
var m = ''+(date.getMonth()+1)
|
||||
if (m.length < 2) { m = '0'+m}
|
||||
return [y, m].join('-')
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'NewMonth',
|
||||
@@ -40,61 +58,28 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
monthDate: new Date(),
|
||||
monthDate: formatDate(today),
|
||||
monthCopy: Object,
|
||||
addingMonth: false,
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.monthCopy = this.theEmptyMonth
|
||||
},
|
||||
watch: {
|
||||
lastMonthDate: function () {
|
||||
if (this.lastMonthDate) {
|
||||
this.monthDate = addMonths(parseISO(this.lastMonthDate, "yyyy-MM", new Date()), 1)
|
||||
} else {
|
||||
this.monthDate = new Date()
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('travail', {
|
||||
'theEmptyMonth': 'TheEmptyMonth',
|
||||
'lastMonthDate': 'lastMonthDate',
|
||||
}),
|
||||
...mapGetters('config', {
|
||||
'monthDesc': 'monthDesc',
|
||||
}),
|
||||
formatedDate: function () {
|
||||
return format(this.monthDate, "MMMM YYY", {locale: frLocal} )
|
||||
},
|
||||
theMonth: function () {
|
||||
return format(this.monthDate, "MMM", {locale: frLocal})
|
||||
},
|
||||
theYear: function () {
|
||||
return format(this.monthDate, "YYY", {locale: frLocal})
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions('travail', {
|
||||
'createMonth': 'createMonth',
|
||||
}),
|
||||
...mapActions('config', {
|
||||
'writeData': 'writeData',
|
||||
}),
|
||||
toggleAdding: function () {
|
||||
this.addingMonth = !this.addingMonth
|
||||
},
|
||||
save: function () {
|
||||
console.log("save")
|
||||
console.log(this.monthCopy)
|
||||
this.createMonth({date: format(this.monthDate, "yyyy-MM"), month: this.monthCopy})
|
||||
this.toggleAdding()
|
||||
this.writeData()
|
||||
this.createMonth({date: this.monthDate, month: this.monthCopy})
|
||||
},
|
||||
cancel: function () {
|
||||
this.toggleAdding()
|
||||
this.monthCopy = this.theEmptyMonth
|
||||
},
|
||||
},
|
||||
@@ -104,8 +89,13 @@ export default {
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.month-presentation {
|
||||
display: grid;
|
||||
grid-template-columns: 140px 1fr;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
background-color: palegreen;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.month-presentation > * {
|
||||
margin: 20px;
|
||||
@@ -129,13 +119,12 @@ export default {
|
||||
}
|
||||
li {
|
||||
margin: 3px;
|
||||
width: 30%;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.value {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.toolbar {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,40 +1,52 @@
|
||||
<template>
|
||||
<div class="month-presentation">
|
||||
<div class="date">
|
||||
<div class="month">
|
||||
{{ theMonth }}
|
||||
</div>
|
||||
<div class="year">
|
||||
{{ theYear }}
|
||||
</div>
|
||||
<div>
|
||||
<button class="edit" @click="toggleEdit" v-show="!editing"> Mettre à jour </button>
|
||||
<button class="validate" @click="save" v-show="editing"> Valider </button>
|
||||
<button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
|
||||
</div>
|
||||
{{ TheDate }}
|
||||
</div>
|
||||
<div id="display">
|
||||
<ul v-show="!editing">
|
||||
<li v-for="cara in monthDesc" :key='cara.name'>
|
||||
<label :for='cara.name'>{{ cara.desc }}</label>
|
||||
<span class="value" >{{ TheMonth.[cara.name] ?? "∅"}} {{cara.unit}}</span>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="ca-theo">CA "Séances effectuées"</label>
|
||||
<span class="value" v-show="!editing">{{ TheMonth.ca_theo ?? "∅"}}€</span>
|
||||
<input type="number" v-model.number="monthCopy.ca_theo" id="ca-theo" class="value" v-show="editing">
|
||||
</li>
|
||||
<li>
|
||||
<label for="ca-retro">CA "Séances facturées"</label>
|
||||
<span class="value" v-show="!editing">{{ TheMonth.ca_retro ?? "∅"}}€</span>
|
||||
<input type="number" v-model.number="monthCopy.ca_retro" id="ca-retro" class="value" v-show="editing">
|
||||
</li>
|
||||
<li>
|
||||
<label for="ca-react">CA "Séances facturées" réactualisé</label>
|
||||
<span class="value" v-show="!editing">{{ TheMonth.ca_react ?? "∅"}}€</span>
|
||||
<input type="number" v-model.number="monthCopy.ca_react" id="ca-react" class="value" v-show="editing">
|
||||
</li>
|
||||
<li>
|
||||
<label for="nbr-seances">Nombre de séances effectuées</label>
|
||||
<span class="value" v-show="!editing">{{ TheMonth.nbr_seances ?? "∅"}}</span>
|
||||
<input type="number" v-model.number="monthCopy.nbr_seances" id="nbr-seances" class="value" v-show="editing">
|
||||
</li>
|
||||
<li>
|
||||
<label for="retro">Montant de la rétrocession</label>
|
||||
<span class="value" v-show="!editing">{{ TheMonth.retro ?? "∅"}}€</span>
|
||||
<input type="number" v-model.number="monthCopy.retro" id="retro" class="value" v-show="editing">
|
||||
</li>
|
||||
<li>
|
||||
<label for="remuneration">Rémunération </label>
|
||||
<span class="value" v-show="!editing">{{ TheMonth.remuneration ?? "∅"}}€</span>
|
||||
<input type="number" v-model.number="monthCopy.remuneration" id="remuneration" class="value" v-show="editing">
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-show="editing">
|
||||
<li v-for="cara in monthDesc" :key='cara.name'>
|
||||
<label :for='cara.name'>{{ cara.desc }}</label>
|
||||
<input type="number" v-model.number="monthCopy[cara.name]" id="cara.name" class="value">
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="edit" @click="toggleEdit" v-show="!editing"> Éditer </button>
|
||||
<button class="validate" @click="save" v-show="editing"> Valider </button>
|
||||
<button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import { parseISO, format } from 'date-fns'
|
||||
import frLocal from 'date-fns/locale/fr'
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
name: 'MonthPresentation',
|
||||
props: {
|
||||
@@ -53,32 +65,19 @@ export default {
|
||||
this.monthCopy = {...this.TheMonth}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('config', {
|
||||
'monthDesc': 'monthHightlightDesc',
|
||||
}),
|
||||
rawDate: function () {
|
||||
return parseISO(this.TheDate, "yyyy-MM", new Date())
|
||||
},
|
||||
theMonth: function () {
|
||||
return format(this.rawDate, "MMM", {locale: frLocal})
|
||||
},
|
||||
theYear: function () {
|
||||
return format(this.rawDate, "YYY", )
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions('travail', {
|
||||
'updateMonth': 'updateMonth',
|
||||
}),
|
||||
...mapActions('config', {
|
||||
'writeData': 'writeData',
|
||||
'loadData': 'loadData',
|
||||
}),
|
||||
toggleEdit: function () {
|
||||
this.editing = !this.editing
|
||||
},
|
||||
save: function () {
|
||||
this.updateMonth({date: this.TheDate, month: {...this.monthCopy}})
|
||||
this.writeData()
|
||||
this.toggleEdit()
|
||||
},
|
||||
cancel: function () {
|
||||
@@ -92,20 +91,21 @@ export default {
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.month-presentation {
|
||||
display: grid;
|
||||
grid-template-columns: 140px 1fr;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
background-color: mintcream;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.month-presentation > * {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 1em;
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
border-right: 1px solid black;
|
||||
}
|
||||
.month{
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
ul {
|
||||
@@ -128,10 +128,4 @@ export default {
|
||||
.novisible {
|
||||
display: None;
|
||||
}
|
||||
button {
|
||||
margin-top: 5px;
|
||||
padding: 4px;
|
||||
font-size: 0.8em;
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
<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 {
|
||||
ca,
|
||||
caPersoUntouch,
|
||||
sum,
|
||||
mean,
|
||||
} from '../lib/months'
|
||||
import RevenusChart from '../components/graphs/RevenusChart.vue'
|
||||
|
||||
export default {
|
||||
name: 'caOnPeriod',
|
||||
components: {
|
||||
RevenusChart: RevenusChart,
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('travail', {
|
||||
months: "months",
|
||||
}),
|
||||
ca: function () {return sum(Object.values(this.months).map(a => ca(a))).toLocaleString()},
|
||||
caMean: function () {return mean(Object.values(this.months).map(a => ca(a))).toLocaleString()},
|
||||
remuneration: function () {return sum(Object.values(this.months).map(a => a.remuneration)).toLocaleString()},
|
||||
caPersoUntouch: function () {return sum(Object.values(this.months).map(a => caPersoUntouch(a))).toLocaleString()},
|
||||
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,61 +0,0 @@
|
||||
<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>{{ retrocession }} €</li>
|
||||
<li>Rétrocession</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="hightlight boxed">
|
||||
<ul>
|
||||
<li>{{ notInvoiced }} €</li>
|
||||
<li>Non facturé</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<repartition-chart/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import {
|
||||
sum,
|
||||
notInvoiced,
|
||||
} from '../lib/months'
|
||||
import RepartitionChart from './graphs/RepartitionChart.vue'
|
||||
|
||||
export default {
|
||||
name: 'caRepartition',
|
||||
components: {
|
||||
RepartitionChart: RepartitionChart,
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('travail', {
|
||||
months: "months",
|
||||
}),
|
||||
caTheo: function () {return sum(Object.values(this.months).map(a => a.caTheo)).toLocaleString()},
|
||||
retrocession: function () {return sum(Object.values(this.months).map(a => a.retro)).toLocaleString()},
|
||||
notInvoiced: function () {return sum(Object.values(this.months).map(a => notInvoiced(a))).toLocaleString()},
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hightlights{
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<canvas id="repartition-chart"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from 'chart.js'
|
||||
import { mapGetters } from 'vuex'
|
||||
import {
|
||||
notInvoiced,
|
||||
caPro,
|
||||
caPersoUntouch,
|
||||
sum,
|
||||
} 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: [
|
||||
sum(Object.values(this.months).map(a => caPro(a))),
|
||||
sum(Object.values(this.months).map(a => notInvoiced(a))),
|
||||
sum(Object.values(this.months).map(a => a.retro)),
|
||||
sum(Object.values(this.months).map(a => a.remuneration)),
|
||||
sum(Object.values(this.months).map(a => caPersoUntouch(a))),
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
legend: {position: 'right'},
|
||||
}
|
||||
}
|
||||
return datas
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
mounted() {
|
||||
const ctx = document.getElementById('repartition-chart');
|
||||
new Chart(ctx, this.graphDatas);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<canvas id="revenus-chart"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from 'chart.js'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { ca, caPersoUntouch, sum } from '../../lib/months'
|
||||
|
||||
export default {
|
||||
name: 'RevenusChart',
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
months: function () {
|
||||
const ctx = document.getElementById('revenus-chart');
|
||||
new Chart(ctx, this.graphDatas);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('config', {
|
||||
caProPercentage: 'caProPercentage',
|
||||
}),
|
||||
...mapGetters('travail', {
|
||||
months: "months",
|
||||
}),
|
||||
graphDatas: function () {
|
||||
var datas = {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels: Object.keys(this.months),
|
||||
datasets: [
|
||||
{
|
||||
type: "bar",
|
||||
label: "Difference CA perso et remuneration",
|
||||
data: Object.values(this.months).map(a => caPersoUntouch(a)),
|
||||
backgroundColor: "red",
|
||||
borderColor: "light-red",
|
||||
borderWidth: 3
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
label: "CA",
|
||||
data: Object.values(this.months).map(a => ca(a)),
|
||||
backgroundColor: "rgba(54,73,93,.5)",
|
||||
borderColor: "#36495d",
|
||||
borderWidth: 3
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
label: "Banque",
|
||||
data: this.untouchEvo,
|
||||
backgroundColor: "rgba(71, 183,132,.5)",
|
||||
borderColor: "#47b784",
|
||||
borderWidth: 3
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
lineTension: 1,
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
padding: 25
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
return datas
|
||||
},
|
||||
untouchEvo: function () {
|
||||
const cumulativeArray = (arr => value => {arr.push(value); return [...arr];})([]);
|
||||
return Object.values(this.months)
|
||||
.map(cumulativeArray)
|
||||
.map(a => sum(a.map(m => caPersoUntouch(m))))
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
mounted() {
|
||||
const ctx = document.getElementById('revenus-chart');
|
||||
new Chart(ctx, this.graphDatas);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,92 +1,58 @@
|
||||
<template>
|
||||
<div class="hightlights">
|
||||
<div class="hightlight boxed">
|
||||
<div id="hightlights">
|
||||
<div class="hightlight">
|
||||
<ul>
|
||||
<li>{{ ca }} €</li>
|
||||
<li>{{ ca }}</li>
|
||||
<li>CA</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="hightlight boxed">
|
||||
<div class="hightlight">
|
||||
<ul>
|
||||
<li>{{ caMean }} €</li>
|
||||
<li>{{ caMean }}</li>
|
||||
<li>CA moyen</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--
|
||||
<div class="hightlight boxed">
|
||||
<div class="hightlight">
|
||||
<ul>
|
||||
<li>{{ caTheo }}</li>
|
||||
<li>CA des séances effectuées</li>
|
||||
</ul>
|
||||
</div>
|
||||
-->
|
||||
<div class="hightlight boxed">
|
||||
<div class="hightlight">
|
||||
<ul>
|
||||
<li>{{ caUnFactured }} €</li>
|
||||
<li>{{ caTheo - ca }}</li>
|
||||
<li>Non facturé</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="hightlight boxed">
|
||||
<div class="hightlight">
|
||||
<ul>
|
||||
<li>{{ remuneration }} €</li>
|
||||
<li>{{ remuneration }}</li>
|
||||
<li>Rémunération</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="hightlight boxed">
|
||||
<div class="hightlight">
|
||||
<ul>
|
||||
<li>{{ remunerationMean }} €</li>
|
||||
<li>{{ remunerationMean }}</li>
|
||||
<li>Rémunération moyenne</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--
|
||||
<div class="hightlight boxed">
|
||||
<div class="hightlight">
|
||||
<ul>
|
||||
<li>{{ retrocession }}</li>
|
||||
<li>Rétrocession</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="hightlight boxed">
|
||||
<div class="hightlight">
|
||||
<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: {
|
||||
@@ -95,26 +61,15 @@ export default {
|
||||
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 () {
|
||||
ca: "ca",
|
||||
caMean: "caMean",
|
||||
caTheo: "caTheo",
|
||||
remuneration: "remuneration",
|
||||
remunerationMean: "remunerationMean",
|
||||
retrocession: "retrocession",
|
||||
retrocessionMean: "retrocessionMean",
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
@@ -122,27 +77,4 @@ export default {
|
||||
</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>
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
<template>
|
||||
<h1>Sous Margot</h1>
|
||||
<!--
|
||||
<nav>
|
||||
<router-link to="/"> Home </router-link>
|
||||
<router-link to="/config"> Config </router-link>
|
||||
</nav>
|
||||
-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -18,4 +15,7 @@ export default {
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
nav {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
// Function on a month
|
||||
export function ca(month) {
|
||||
// Extract the CA of the month
|
||||
if (month.caReact) {
|
||||
return month.caReact
|
||||
} else {
|
||||
return month.caRetro
|
||||
}
|
||||
}
|
||||
|
||||
export function notInvoiced (month) {
|
||||
// Compute how much has not been invoiced
|
||||
return month.caTheo - ca(month)
|
||||
}
|
||||
|
||||
export function caPro (month) {
|
||||
// Compute the part of the CA to go pro usage
|
||||
return ca(month) * month.proPercentage / 100
|
||||
}
|
||||
|
||||
export function caPerso (month) {
|
||||
// Compute the part of the CA to go personnal usage
|
||||
return ca(month) * (1 - month.proPercentage / 100)
|
||||
}
|
||||
|
||||
export function caPersoUntouch (month) {
|
||||
// Compute the part of the CA to go personnal usage
|
||||
return caPerso(month) - month.remuneration
|
||||
}
|
||||
|
||||
|
||||
// Function on an array of month
|
||||
|
||||
|
||||
export function sum (array) {
|
||||
// sum the array
|
||||
return array.reduce((acc, v)=> acc + v, 0)
|
||||
}
|
||||
|
||||
export function mean(array) {
|
||||
console.log(array)
|
||||
return Math.floor(array.reduce((acc, v)=> acc + v, 0) / array.length)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import path from 'path'
|
||||
import Papa from 'papaparse'
|
||||
import { writeFile } from 'fs'
|
||||
|
||||
const config = {
|
||||
namespaced: true,
|
||||
@@ -8,74 +7,12 @@ const config = {
|
||||
return {
|
||||
//userDir: '~/.config/sousmargot/',
|
||||
userDir: './userDir/',
|
||||
dataFile: 'datas.csv',
|
||||
caProPercentage: 0.5,
|
||||
monthDesc : [
|
||||
{
|
||||
color: '',
|
||||
desc: 'CA "scéances effectuées"',
|
||||
type: 'base',
|
||||
name: 'caTheo',
|
||||
unit: '€',
|
||||
hightlight: true,
|
||||
},
|
||||
{
|
||||
color: '',
|
||||
desc: 'CA "Séances facturées"',
|
||||
type: 'base',
|
||||
name: 'caRetro',
|
||||
unit: '€',
|
||||
hightlight: false,
|
||||
},
|
||||
{
|
||||
color: '',
|
||||
desc: 'CA "Séances facturées" réactualisé',
|
||||
type: 'base',
|
||||
name: 'caReact',
|
||||
unit: '€',
|
||||
hightlight: true,
|
||||
},
|
||||
{
|
||||
color: '',
|
||||
desc: 'Nombre de séances effectuées',
|
||||
type: 'base',
|
||||
name: 'sessionQty',
|
||||
unit: '',
|
||||
hightlight: false,
|
||||
},
|
||||
{
|
||||
color: '',
|
||||
desc: 'Montant de la rétrocession',
|
||||
type: 'base',
|
||||
name: 'retro',
|
||||
unit: '€',
|
||||
hightlight: false,
|
||||
},
|
||||
{
|
||||
color: '',
|
||||
desc: 'Rémuneration',
|
||||
type: 'base',
|
||||
name: 'remuneration',
|
||||
unit: '€',
|
||||
hightlight: true,
|
||||
},
|
||||
{
|
||||
color: '',
|
||||
desc: 'Pourcentage du CA pour la partie pro',
|
||||
type: 'base',
|
||||
name: 'proPercentage',
|
||||
unit: '%',
|
||||
hightlight: false,
|
||||
},
|
||||
],
|
||||
dataFile: 'datas.csv'
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
userDir (state) { return state.userDir },
|
||||
dataFilePath (state) { return path.join(state.userDir, state.dataFile) },
|
||||
monthDesc (state) { return state.monthDesc },
|
||||
monthHightlightDesc (state) { return state.monthDesc.filter(a => a.hightlight) },
|
||||
caProPercentage (state) { return state.caProPercentage },
|
||||
},
|
||||
mutations: {
|
||||
},
|
||||
@@ -84,20 +21,22 @@ const config = {
|
||||
// load config file at ~/.config/sousmargot/config.json
|
||||
return context.state.userDir
|
||||
},
|
||||
loadData (context) {
|
||||
// load data in userDir on dataFile
|
||||
console.log("Loading data")
|
||||
console.log(context.getters.dataFilePath)
|
||||
},
|
||||
writeData (context) {
|
||||
// overwrite the dataFile with months datas
|
||||
console.log("Writing data")
|
||||
console.log(context.getters.dataFilePath)
|
||||
const months = context.rootGetters['travail/monthsAll']
|
||||
const unpackMonths = Object.keys(months).map(k => {return { ...months[k], date: k}})
|
||||
const csv = Papa.unparse(unpackMonths)
|
||||
writeFile(context.getters.dataFilePath, csv, (err) => {
|
||||
if (err) {
|
||||
console.log(err)
|
||||
} else {
|
||||
console.log("Datas sauvegardées")
|
||||
}
|
||||
})
|
||||
console.log(Object.keys(months).map(k => {return { ...months[k], date: k}}))
|
||||
const csv = Papa.unparse(context.rootGetters['travail/monthsAll'])
|
||||
console.log(csv)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default config
|
||||
|
||||
|
||||
@@ -1,21 +1,73 @@
|
||||
import { readFile } from 'fs'
|
||||
import Papa from 'papaparse'
|
||||
|
||||
function monthCA(month) {
|
||||
if (month.ca_react) {
|
||||
return month.ca_react
|
||||
} else {
|
||||
return month.ca_retro
|
||||
}
|
||||
}
|
||||
|
||||
const travail = {
|
||||
namespaced: true,
|
||||
state() {
|
||||
return {
|
||||
empty: {
|
||||
caTheo: null, // ca théorique basé sur les séances effectuées
|
||||
sessionQty: null, // Nombre de séances effectuées sur le mois
|
||||
caRetro: null, // ca au moment de la rétrocession
|
||||
caReact: null, // ca réactualisé
|
||||
ca_theo: null, // ca théorique basé sur les séances effectuées
|
||||
nbr_seances: null, // Nombre de séances effectuées sur le mois
|
||||
ca_retro: null, // ca au moment de la rétrocession
|
||||
ca_react: null, // ca réactualisé
|
||||
retro: 0, // montant de la rétrocession
|
||||
remuneration: 0, // rémunération décidée
|
||||
proPercentage: 50, // Pourcentage du CA pour la partie pro
|
||||
},
|
||||
months: {
|
||||
"2021-01": {
|
||||
ca_theo: null, // ca théorique basé sur les séances effectuées
|
||||
nbr_seances: null, // Nombre de séances effectuées sur le mois
|
||||
ca_retro: 6747, // ca au moment de la rétrocession
|
||||
ca_react: null, // ca réactualisé
|
||||
retro: 893, // montant de la rétrocession
|
||||
remuneration: 2000, // rémunération décidée
|
||||
},
|
||||
"2021-02": {
|
||||
ca_theo: null, // ca théorique basé sur les séances effectuées
|
||||
nbr_seances: null, // Nombre de séances effectuées sur le mois
|
||||
ca_retro: 5183, // ca au moment de la rétrocession
|
||||
ca_react: null, // ca réactualisé
|
||||
retro: 665, // montant de la rétrocession
|
||||
remuneration: 1500, // rémunération décidée
|
||||
},
|
||||
"2021-03": {
|
||||
ca_theo: null, // ca théorique basé sur les séances effectuées
|
||||
nbr_seances: null, // Nombre de séances effectuées sur le mois
|
||||
ca_retro: 7088, // ca au moment de la rétrocession
|
||||
ca_react: null, // ca réactualisé
|
||||
retro: 855, // montant de la rétrocession
|
||||
remuneration: 2000, // rémunération décidée
|
||||
},
|
||||
"2021-04": {
|
||||
ca_theo: null, // ca théorique basé sur les séances effectuées
|
||||
nbr_seances: null, // Nombre de séances effectuées sur le mois
|
||||
ca_retro: 4194, // ca au moment de la rétrocession
|
||||
ca_react: 5630, // ca réactualisé
|
||||
retro: 627, // montant de la rétrocession
|
||||
remuneration: 2000, // rémunération décidée
|
||||
},
|
||||
"2021-05": {
|
||||
ca_theo: null, // ca théorique basé sur les séances effectuées
|
||||
nbr_seances: null, // Nombre de séances effectuées sur le mois
|
||||
ca_retro: 5564, // ca au moment de la rétrocession
|
||||
ca_react: 6335, // ca réactualisé
|
||||
retro: 699, // montant de la rétrocession
|
||||
remuneration: 2800, // rémunération décidée
|
||||
},
|
||||
"2021-06": {
|
||||
ca_theo: null, // ca théorique basé sur les séances effectuées
|
||||
nbr_seances: null, // Nombre de séances effectuées sur le mois
|
||||
ca_retro: 5442, // ca au moment de la rétrocession
|
||||
ca_react: 6335, // ca réactualisé
|
||||
retro: 638, // montant de la rétrocession
|
||||
remuneration: 2800, // rémunération décidée
|
||||
},
|
||||
},
|
||||
range: {
|
||||
start: "2021-01",
|
||||
@@ -34,19 +86,14 @@ const travail = {
|
||||
// Get all the months
|
||||
return Object.keys(state.months).sort().reverse()
|
||||
},
|
||||
lastMonthDate(state) {
|
||||
// Return the date of the last registered month
|
||||
return Object.keys(state.months).sort().reverse()[0]
|
||||
},
|
||||
months: (state, getters) => {
|
||||
// Get in range months
|
||||
const a = Object.keys(state.months)
|
||||
return Object.keys(state.months)
|
||||
.filter(a => getters.MonthsDate.includes(a))
|
||||
.reduce((acc, v) => {
|
||||
acc[v] = state.months[v];
|
||||
return acc;
|
||||
}, {})
|
||||
return a
|
||||
},
|
||||
monthsAll: (state) => {
|
||||
// Get in range months
|
||||
@@ -59,16 +106,63 @@ const travail = {
|
||||
// Amount of mounts
|
||||
return Object.keys(getters.months).length
|
||||
},
|
||||
ca: (state, getters) => {
|
||||
// Total CA (ca_react if sets, ca_retro otherwise)
|
||||
return Object.values(getters.months).map(a => monthCA(a)).reduce(
|
||||
(acc, v) => acc + v,
|
||||
0
|
||||
)
|
||||
},
|
||||
caMean: (state, getters) => {
|
||||
// Mean of CA
|
||||
return Math.floor(Object.values(state.months).map(a => monthCA(a)).reduce(
|
||||
(acc, v) => acc + v,
|
||||
0
|
||||
) / getters.count)
|
||||
},
|
||||
caTheo: (state, getters) => {
|
||||
// Total theorical CA
|
||||
return Object.values(getters.months).map(a => a.ca_theo).reduce(
|
||||
(acc, v) => acc + v,
|
||||
0
|
||||
)
|
||||
},
|
||||
remuneration: (state, getters) => {
|
||||
// Total remuneration
|
||||
return Object.values(getters.months).map(a => a.remuneration).reduce(
|
||||
(acc, v) => acc + v,
|
||||
0
|
||||
)
|
||||
},
|
||||
remunerationMean: (state, getters) => {
|
||||
// Mean of remuneration
|
||||
return Math.floor(Object.values(getters.months).map(a => a.remuneration).reduce(
|
||||
(acc, v) => acc + v,
|
||||
0
|
||||
) / getters.count)
|
||||
},
|
||||
retrocession: (state, getters) => {
|
||||
// Total retrocession
|
||||
return Object.values(getters.months)
|
||||
.map(a => a.retro)
|
||||
.reduce(
|
||||
(acc, v) => acc + v,
|
||||
0
|
||||
)
|
||||
},
|
||||
retrocessionMean: (state, getters) => {
|
||||
// Mean of retrocession
|
||||
return Math.floor(
|
||||
Object.values(getters.months)
|
||||
.map(a => a.retro)
|
||||
.reduce(
|
||||
(acc, v) => acc + v,
|
||||
0
|
||||
) / getters.count
|
||||
)
|
||||
},
|
||||
},
|
||||
mutations: {
|
||||
cleanMonths (state) {
|
||||
// erase months
|
||||
state.months = []
|
||||
},
|
||||
importMonths(state, months) {
|
||||
// overwrite months
|
||||
state.months = months
|
||||
},
|
||||
updateMonth(state, { date, month }) {
|
||||
state.months[date] = month
|
||||
},
|
||||
@@ -80,23 +174,6 @@ const travail = {
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
cleanMonths (context) {
|
||||
context.commit("cleanMonths")
|
||||
},
|
||||
loadMonths (context) {
|
||||
// import all months from storage
|
||||
readFile(context.rootGetters["config/dataFilePath"], (err, data) => {
|
||||
if (err) throw err;
|
||||
const months = Papa.parse(data.toString(), {header: true, dynamicTyping:true, skipEmptyLines:true})
|
||||
.data
|
||||
.reduce(
|
||||
(acc, el) => {
|
||||
acc[el.date] = el;
|
||||
return acc
|
||||
}, {})
|
||||
context.commit("importMonths", months)
|
||||
})
|
||||
},
|
||||
updateMonth(context, { date, month }) {
|
||||
// update month's datas
|
||||
if (date in context.state.months) {
|
||||
@@ -108,7 +185,9 @@ const travail = {
|
||||
createMonth(context, { date, month }) {
|
||||
// Create a new month
|
||||
if (!(date in context.state.months)) {
|
||||
console.log(date)
|
||||
context.commit('createMonth', { date, month })
|
||||
console.log(context.state.months)
|
||||
} else {
|
||||
console.log("This month already exists")
|
||||
}
|
||||
|
||||
@@ -1,88 +1,27 @@
|
||||
body {
|
||||
background-color: whitesmoke;
|
||||
|
||||
.actions {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
button {
|
||||
color: black;
|
||||
padding: 4px;
|
||||
box-shadow: 1px 1px 2px gray;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
margin-top: 5px;
|
||||
font-size: 0.8em;
|
||||
width: auto;
|
||||
transition: all 0.2s ease-out;
|
||||
color: black;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: black;
|
||||
color: white;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.validate {
|
||||
border: 2px solid green;
|
||||
color: green;
|
||||
}
|
||||
.validate:hover {
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
.cancel {
|
||||
border: 2px solid red;
|
||||
color: red;
|
||||
}
|
||||
.cancel:hover {
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
.edit {
|
||||
border: 2px solid orange;
|
||||
color: orange;
|
||||
}
|
||||
.edit:hover {
|
||||
background-color: orange;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.boxed {
|
||||
box-shadow: 2px 2px 5px gray;
|
||||
border-left: 1rem solid black;
|
||||
border-radius: 10px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.boxed-green {
|
||||
box-shadow: 2px 2px 5px gray;
|
||||
border-left: 1rem solid green;
|
||||
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: 2rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.hightlight > ul :last-child{
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,19 @@
|
||||
<template>
|
||||
<h1>Home</h1>
|
||||
<button @click="writeData" ></button>
|
||||
<section id="selector">
|
||||
<month-selector>
|
||||
</month-selector>
|
||||
</section>
|
||||
<div id="content">
|
||||
<section id="months">
|
||||
<create-month/>
|
||||
<months-list/>
|
||||
<h2> Mois </h2>
|
||||
<create-month></create-month>
|
||||
<months-list></months-list>
|
||||
</section>
|
||||
<section id="stats">
|
||||
<ca-on-period/>
|
||||
<ca-repartition/>
|
||||
<h2>Résumé</h2>
|
||||
<highlights></highlights>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
@@ -15,15 +22,15 @@
|
||||
import { mapActions } from 'vuex'
|
||||
import MonthsList from '../components/MonthsUl.vue'
|
||||
import CreateMonth from '../components/CreateMonth.vue'
|
||||
import caOnPeriod from '../components/caOnPeriod.vue'
|
||||
import caRepartition from '../components/caRepartition.vue'
|
||||
import MonthSelector from '../components/monthSelector.vue'
|
||||
import Highlights from '../components/hightlights.vue'
|
||||
export default {
|
||||
name: 'home',
|
||||
components: {
|
||||
MonthsList: MonthsList,
|
||||
CreateMonth: CreateMonth,
|
||||
caOnPeriod: caOnPeriod,
|
||||
caRepartition: caRepartition,
|
||||
MonthSelector: MonthSelector,
|
||||
highlights: Highlights,
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
@@ -31,28 +38,28 @@ export default {
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
...mapActions('travail', {
|
||||
'loadMonths': 'loadMonths',
|
||||
...mapActions('config', {
|
||||
'loadData': 'loadData',
|
||||
'writeData': 'writeData',
|
||||
}),
|
||||
},
|
||||
mounted () {
|
||||
this.loadMonths()
|
||||
this.loadData()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#content {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(580px, 2fr) minmax(450px, 1fr);
|
||||
grid-template-areas:
|
||||
"stats months";
|
||||
gap: 1em;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
background-color: red;
|
||||
margin: 0;
|
||||
}
|
||||
#stats {
|
||||
grid-area: stats;
|
||||
#content > * {
|
||||
margin: 10px;
|
||||
}
|
||||
#months {
|
||||
grid-area: months;
|
||||
flex-basis: 60%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1 @@
|
||||
caTheo,sessionQty,caRetro,caReact,retro,remuneration,date,proPercentage
|
||||
7000,,6747,,893,2000,2021-01,50
|
||||
5200,,5183,,665,1500,2021-02,50
|
||||
7100,,7088,,855,2000,2021-03,50
|
||||
5700,,4194,5630,627,2000,2021-04,50
|
||||
6500,,5564,6335,699,2800,2021-05,50
|
||||
6725,235,5442,6376,638,2800,2021-06,50
|
||||
2176,81,1274,,172,2000,2021-07,50
|
||||
ca_theo, nbr_seances, ca_retro, ca_react, retro, remuneration,
|
||||
|
||||
|
30
yarn.lock
30
yarn.lock
@@ -2774,29 +2774,6 @@ chardet@^0.7.0:
|
||||
resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz"
|
||||
integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
|
||||
|
||||
chart.js@2.9.4:
|
||||
version "2.9.4"
|
||||
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
|
||||
integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
|
||||
dependencies:
|
||||
chartjs-color "^2.1.0"
|
||||
moment "^2.10.2"
|
||||
|
||||
chartjs-color-string@^0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
|
||||
integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
|
||||
dependencies:
|
||||
color-name "^1.0.0"
|
||||
|
||||
chartjs-color@^2.1.0:
|
||||
version "2.4.1"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
|
||||
integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
|
||||
dependencies:
|
||||
chartjs-color-string "^0.6.0"
|
||||
color-convert "^1.9.3"
|
||||
|
||||
check-types@^8.0.3:
|
||||
version "8.0.3"
|
||||
resolved "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz"
|
||||
@@ -3010,7 +2987,7 @@ collection-visit@^1.0.0:
|
||||
map-visit "^1.0.0"
|
||||
object-visit "^1.0.0"
|
||||
|
||||
color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
|
||||
color-convert@^1.9.0, color-convert@^1.9.1:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
|
||||
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
|
||||
@@ -6746,11 +6723,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
|
||||
resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
|
||||
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
|
||||
|
||||
moment@^2.10.2:
|
||||
version "2.29.1"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
|
||||
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
|
||||
|
||||
move-concurrently@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz"
|
||||
|
||||
Reference in New Issue
Block a user