clawd.fr/website
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

switched semantic lib for fomantic

Browse Source
This commit is contained in:
Adrien W
2025-09-19 12:02:46 +02:00
parent b56a9f5940
commit d08005e23c
371 changed files with 209499 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

512
finances.php
View File

@@ -30,39 +30,80 @@ $currentPage = $pages['finances'];
</div>
<a name="recettes"></a>
<div class="ui container borderless center aligned">
<h1>FINANCES</h1>
<h4>C.A. par produit et bénéfices</h4>
<p>Voici dans le détail le chiffre d'affaires mensuel de chaque produit depuis le début de l'activité.<br>Le bénéfice net mensuel correspond au C.A. brut minoré des charges sociales (URSSAF: 22.2%) et fixes (serveur principalement: 121€/mois).</p>
<h4>Chiffre d'affaires par produit</h4>
<p>Chiffre d'affaires mensuel de chaque produit depuis le début de l'activité.</p>
</div>
<a name="recettes"></a>
<div class="ui vertical stripe segment">
<div class="ui top aligned container">
<div class="row">
<div class="wide column">
<div id="recettes" style="width: 1000px; height: 600px;"></div>
<div id="recettes" class="ui fluid" style="min-height: 600px;"></div>
</div>
</div>
</div>
</div>
<a name="tarifs"></a>
<div class="ui container borderless center aligned">
<h4>Répartition tarif libre</h4>
<p></p>
<h4>Répartition tarifs et clients</h4>
<p>Représentation du choix de chaque client dans la fourchette proposée de tarif: minimum/correct/généreux/maximum. <br>La valeur numéraire du tarif final n'est pas prise en compte, seulement le palier choisi.<br>Répartition des clients par type.</p>
</div>
<a name="recettes"></a>
<div class="ui vertical stripe segment">
<div class="ui top aligned container">
<div class="ui two column top aligned container doubling stackable grid">
<div class="row">
<div class="wide column">
<div id="tarifs" style="width: 1000px; height: 600px;"></div>
<div class="column">
<div id="tarifs" class="ui fluid" style="min-height: 400px;"></div>
</div>
<div class="column">
<div id="clients" class="ui fluid" style="min-height: 400px;"></div>
</div>
</div>
</div>
</div>
<a name="benefice"></a>
<div class="ui container borderless center aligned">
<h4>Bénéfice mensuel et cumulé</h4>
<p>Le bénéfice net mensuel correspond au C.A. brut minoré des charges sociales (URSSAF: 22.2%) et fixes (serveurs, noms de domaine, sauvegardes hors-site).</p>
</div>
<div class="ui vertical stripe segment">
<div class="ui top aligned container">
<div class="row">
<div class="wide column">
<div id="benefices" class="ui fluid" style="min-height: 600px;"></div>
</div>
</div>
</div>
</div>
<a name="utilisateurs"></a>
<div class="ui container borderless center aligned">
<h4>Utilisateurs</h4>
<p>
<ul>
<li>Nombre d'utilisateurs Nextcloud: ~80</li>
<li>Volume de données sur Nextcloud: ~650Go</li>
<li>Nombre de noms de domaines hébergés: ~25</li>
<li>Volume des sauvegardes hors-site: ~850Go</li>
</ul>
</p>
</div>
<div class="ui vertical stripe segment">
<div class="ui top aligned container">
<div class="row">
<div class="wide column">
<div id="benefices" class="ui fluid" style="min-height: 600px;"></div>
</div>
</div>
</div>
</div>
<?php include 'includes/_footer.php'; ?>
</div>
@@ -71,51 +112,47 @@ $currentPage = $pages['finances'];
var recettesDom = document.getElementById('recettes');
var recettesChart = echarts.init(recettesDom);
window.addEventListener('resize', function() {
recettesChart.resize();
});
var recettesOption;
recettesOption = {
dataset: {
source: [
['produit', 'Septembre 2021', 'Octobre 2021', 'Novembre 2021', 'Décembre 2021', 'Janvier 2022', 'Février 2022', 'Mars 2022', 'Avril 2022', 'Mai 2022', 'Juin 2022', 'Juillet 2022', 'Août 2022', 'Septembre 2022', 'Octobre 2022', 'Novembre 2022', 'Décembre 2022', 'Janvier 2023', 'Février 2023', 'Mars 2023', 'Avril 2023', 'Mai 2023', 'Juin 2023', 'Juillet 2023', 'Août 2023', 'Septembre 2023', 'Octobre 2023', 'Novembre 2023', 'Décembre 2023'],
// ['Total', 24,24,24,54,54,179,183,183,187,187,211,256,259,259,297,297,301,304,308,314,298,402,411,387],
['VPS', 24,24,24,24,24,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,105,105,105,105,105],
['Nextcloud', 0,0,0,30,30,50,50,50,50,50,74,74,77,77,91,91,95,95,95,95,79,79,78,78,78,93,89,89],
['Web', 0,0,0,0,0,0,4,4,8,8,8,18,18,18,34,34,34,34,38,42,42,42,45,45,48,53,69,69],
['Autres', 0,0,0,0,0,0,0,0,0,0,0,35,35,35,35,35,35,35,35,35,35,35,35,35,35,40,40,40],
['E-mail', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,11,11,13,13,13,20,20,20,40,40,40],
['Dédié', 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,104,104,104,104,214,214,214],
// ['Bénéfice net', -102,-102,-102,-79,-79,17,20,20,24,24,42,77,80,80,109,109,112,115,118,122,110,191,198,179],
]
},
title: {
// text: 'C.A. par produit'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
// type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Total', 'VPS', 'Nextcloud', 'Web', 'Autres', 'E-mail', 'Dédié', 'Bénéfice net', 'Bénéfice cumulé'],
selected: {
'Total': true,
'Nextcloud': true,
'Web': true,
'E-mail': true,
'VPS': true,
'Dédié': true,
'Autres': true,
'Bénéfice net': true,
'Bénéfice cumulé': false,
}
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
legend: {},
toolbox: {},
// xAxis: { type: 'category' },
// yAxis: { gridIndex: 0 },
grid: { top: '55%' },
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Septembre 2021', 'Octobre 2021', 'Novembre 2021', 'Décembre 2021', 'Janvier 2022', 'Février 2022', 'Mars 2022', 'Avril 2022', 'Mai 2022', 'Juin 2022', 'Juillet 2022', 'Août 2022', 'Septembre 2022', 'Octobre 2022', 'Novembre 2022', 'Décembre 2022', 'Janvier 2023', 'Février 2023', 'Mars 2023', 'Avril 2023', 'Mai 2023', 'Juin 2023', 'Juillet 2023', 'Août 2023']
boundaryGap: true,
data: ['Septembre 2021', 'Octobre 2021', 'Novembre 2021', 'Décembre 2021', 'Janvier 2022', 'Février 2022', 'Mars 2022', 'Avril 2022', 'Mai 2022', 'Juin 2022', 'Juillet 2022', 'Août 2022', 'Septembre 2022', 'Octobre 2022', 'Novembre 2022', 'Décembre 2022', 'Janvier 2023', 'Février 2023', 'Mars 2023', 'Avril 2023', 'Mai 2023', 'Juin 2023', 'Juillet 2023', 'Août 2023', 'Septembre 2023', 'Octobre 2023', 'Novembre 2023', 'Décembre 2023']
}
],
yAxis: [
@@ -124,130 +161,131 @@ $currentPage = $pages['finances'];
}
],
series: [
// {
// type: 'line',
// label: {
// show: true,
// position: 'top'
// },
// },
{
name: 'Total',
type: 'line',
stack: 'produits',
areaStyle: {},
emphasis: {
focus: 'series'
},
seriesLayoutBy: 'row',
},
{
type: 'line',
stack: 'produits',
areaStyle: {},
emphasis: {
focus: 'series'
},
seriesLayoutBy: 'row',
},
{
type: 'line',
stack: 'produits',
areaStyle: {},
emphasis: {
focus: 'series'
},
seriesLayoutBy: 'row',
},
{
type: 'line',
stack: 'produits',
areaStyle: {},
emphasis: {
focus: 'series'
},
seriesLayoutBy: 'row',
},
{
type: 'line',
stack: 'produits',
areaStyle: {},
emphasis: {
focus: 'series'
},
seriesLayoutBy: 'row',
},
{
type: 'line',
stack: 'produits',
areaStyle: {},
emphasis: {
focus: 'series'
},
seriesLayoutBy: 'row',
},
// {
// type: 'line',
// smooth: true,
// areaStyle: {
// opacity: 0
// },
// emphasis: {
// focus: 'series'
// },
// seriesLayoutBy: 'row',
// },
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
emphasis: {
focus: 'self'
},
label: {
show: true,
position: 'top'
formatter: '{b}: {@2012} ({d}%)'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [24,24,24,54,54,179,183,183,187,187,211,256,259,259,297,297,301,304,308,314,298,402,411,387]
},
{
name: 'VPS',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [24,24,24,24,24,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,105]
},
{
name: 'Nextcloud',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [0,0,0,30,30,50,50,50,50,50,74,74,77,77,91,91,95,95,95,95,79,79,78,78]
},
{
name: 'Web',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [0,0,0,0,0,0,4,4,8,8,8,18,18,18,34,34,34,34,38,42,42,42,45,45]
},
{
name: 'Autres',
type: 'line',
stack: 'Total',
// label: {
// show: true,
// position: 'top'
// },
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [0,0,0,0,0,0,0,0,0,0,0,35,35,35,35,35,35,35,35,35,35,35,35,35]
},
{
name: 'E-mail',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,11,11,13,13,13,20,20]
},
{
name: 'Dédié',
type: 'line',
stack: 'Total',
// label: {
// show: true,
// position: 'top'
// },
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,104,104,104]
},
{
name: 'Bénéfice net',
type: 'line',
smooth: true,
// stack: 'Total',
// label: {
// show: true,
// position: 'top'
// },
areaStyle: {
opacity: 0
},
emphasis: {
focus: 'series'
},
data: [-102,-102,-102,-79,-79,17,20,20,24,24,42,77,80,80,109,109,112,115,118,122,110,191,198,179]
},
{
name: 'Bénéfice cumulé',
type: 'line',
smooth: true,
// stack: 'Total',
// label: {
// show: true,
// position: 'top'
// },
areaStyle: {
opacity: 0
},
emphasis: {
focus: 'series'
},
data: [-102,-205,-308,-387,-466,-449,-428,-407,-383,-358,-316,-238,-158,-78,31,141,253,368,487,610,720,911,1110,1289]
encode: {
itemName: 'produit',
value: 'Novembre 2023',
tooltip: 'Novembre 2023'
}
}
]
};
// recettesChart.on('updateAxisPointer', function (event) {
// console.log(event);
// });
recettesChart.on('updateAxisPointer', function (event) {
const xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
const dimension = xAxisInfo.value + 1;
// console.log(dimension);
recettesChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
recettesChart.setOption(recettesOption);
recettesOption && recettesChart.setOption(recettesOption);
var tarifsDom = document.getElementById('tarifs');
var tarifsChart = echarts.init(tarifsDom);
window.addEventListener('resize', function() {
tarifsChart.resize();
});
var tarifsOption;
tarifsOption = {
@@ -276,13 +314,13 @@ $currentPage = $pages['finances'];
}
},
data: [
{ value: 3, name: 'minimum' },
{ value: 10, name: 'correct' },
{ value: 4, name: 'minimum' },
{ value: 12, name: 'correct' },
{ value: 3, name: 'généreux' },
{ value: 0, name: 'maximum' },
{
// make an record to fill the bottom 50%
value: 16,
value: 17,
itemStyle: {
// stop the chart from rendering this piece
color: 'none',
@@ -301,6 +339,176 @@ $currentPage = $pages['finances'];
tarifsOption && tarifsChart.setOption(tarifsOption);
var clientsDom = document.getElementById('clients');
var clientsChart = echarts.init(clientsDom);
window.addEventListener('resize', function() {
clientsChart.resize();
});
var clientsOption;
clientsOption = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center',
// doesn't perfectly work with our tricks, disable it
selectedMode: false
},
series: [
{
name: 'Type de client',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '70%'],
// adjust the start angle
startAngle: 180,
label: {
show: true,
formatter(param) {
// correct the percentage
return param.name + ' (' + param.percent * 2 + '%)';
}
},
data: [
{ value: 2, name: 'Entreprise Individuelle' },
{ value: 7, name: 'Personne Physique' },
{ value: 10, name: 'Association' },
{
// make an record to fill the bottom 50%
value: 17,
itemStyle: {
// stop the chart from rendering this piece
color: 'none',
decal: {
symbol: 'none'
}
},
label: {
show: false
}
}
]
}
]
};
clientsOption && clientsChart.setOption(clientsOption);
var beneficesDom = document.getElementById('benefices');
var beneficesChart = echarts.init(beneficesDom);
window.addEventListener('resize', function() {
beneficesChart.resize();
});
var beneficesOption;
beneficesOption = {
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
// type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
xAxis: {
type: 'category',
data: ['Septembre 2021', 'Octobre 2021', 'Novembre 2021', 'Décembre 2021', 'Janvier 2022', 'Février 2022', 'Mars 2022', 'Avril 2022', 'Mai 2022', 'Juin 2022', 'Juillet 2022', 'Août 2022', 'Septembre 2022', 'Octobre 2022', 'Novembre 2022', 'Décembre 2022', 'Janvier 2023', 'Février 2023', 'Mars 2023', 'Avril 2023', 'Mai 2023', 'Juin 2023', 'Juillet 2023', 'Août 2023', 'Septembre 2023', 'Octobre 2023', 'Novembre 2023', 'Décembre 2023', 'Janvier 2024', 'Février 2024', 'Mars 2024', 'Avril 2024', 'Mai 2024', 'Juin 2024', 'Juillet 2024', 'Août 2024', 'Septembre 2024', 'Octobre 2024', 'Novembre 2024', 'Décembre 2024']
},
yAxis: {
type: 'value',
name: '',
// min: -500,
// max: 1300,
interval: 200,
axisLabel: {
formatter: '{value} €'
}
},
series: [
{
name: 'Bénéfice net mensuel',
data: [{value: -102, itemStyle: {color: '#A90000'}},
{value: -102, itemStyle: {color: '#A90000'}},
{value: -102, itemStyle: {color: '#A90000'}},
{value: -79, itemStyle: {color: '#A90000'}},
{value: -79, itemStyle: {color: '#A90000'}},
{value: 17},
{value: 20},
{value: 20},
{value: 24},
{value: 24},
{value: 42},
{value: 77},
{value: 80},
{value: 80},
{value: 109},
{value: 109},
{value: 112},
{value: 115},
{value: 118},
{value: 122},
{value: 110},
{value: 191},
{value: 198},
{value: 179},
{value: 182},
{value: 209},
{value: 218},
{value: 218}],
type: 'bar',
colorBy: 'series'
},
{
name: 'Bénéfice net cumulé',
data: [{value: -102, itemStyle: {color: '#A90000'}},
{value: -205, itemStyle: {color: '#A90000'}},
{value: -308, itemStyle: {color: '#A90000'}},
{value: -387, itemStyle: {color: '#A90000'}},
{value: -466, itemStyle: {color: '#A90000'}},
{value: -449, itemStyle: {color: '#A90000'}},
{value: -428, itemStyle: {color: '#A90000'}},
{value: -407, itemStyle: {color: '#A90000'}},
{value: -383, itemStyle: {color: '#A90000'}},
{value: -358, itemStyle: {color: '#A90000'}},
{value: -316, itemStyle: {color: '#A90000'}},
{value: -238, itemStyle: {color: '#A90000'}},
{value: -158, itemStyle: {color: '#A90000'}},
{value: -78, itemStyle: {color: '#A90000'}},
{value: 31},
{value: 141},
{value: 253},
{value: 368},
{value: 487},
{value: 610},
{value: 720},
{value: 911},
{value: 1110},
{value: 1289},
{value: 1472},
{value: 1681},
{value: 1900},
{value: 2118},],
type: 'line'
}
]
};
beneficesOption && beneficesChart.setOption(beneficesOption);
</script>
</body>