Adrien W
2 years ago
parent
e5f52873e6
commit
b95f14567a
File diff suppressed because one or more lines are too long
@ -0,0 +1,307 @@
|
|||||||
|
<?php
|
||||||
|
require_once 'includes/_config.php';
|
||||||
|
$currentPage = $pages['finances'];
|
||||||
|
|
||||||
|
?><!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<?php include 'includes/_meta.php'; ?>
|
||||||
|
<meta name="description" content="clawd.fr Hébergeur engagé et transparent" />
|
||||||
|
<link rel="canonical" href="https://clawd.fr/finance" />
|
||||||
|
<title>clawd.fr - Hébergeur engagé et transparent</title>
|
||||||
|
|
||||||
|
<?php include 'includes/_assets.php'; ?>
|
||||||
|
<script src="dist/library/echarts.custom.1.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body class="clawd">
|
||||||
|
|
||||||
|
<?php include 'includes/_menus.php'; ?>
|
||||||
|
|
||||||
|
<!-- Page Contents -->
|
||||||
|
<div class="pusher">
|
||||||
|
<div class="ui inverted vertical masthead center aligned segment">
|
||||||
|
|
||||||
|
<?php include 'includes/_mainmenu.php'; ?>
|
||||||
|
|
||||||
|
<div class="ui text container">
|
||||||
|
<h1 class="ui header clawdlogo">CLAWD.FR</h1>
|
||||||
|
<h2>HÉBERGEUR ENGAGÉ</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ui container borderless center aligned">
|
||||||
|
<h4>Répartition tarif libre</h4>
|
||||||
|
<p></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="tarifs" style="width: 1000px; height: 600px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<?php include 'includes/_footer.php'; ?>
|
||||||
|
</div>
|
||||||
|
<?php include 'includes/_assetsLate.php'; ?>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
var recettesDom = document.getElementById('recettes');
|
||||||
|
var recettesChart = echarts.init(recettesDom);
|
||||||
|
var recettesOption;
|
||||||
|
|
||||||
|
recettesOption = {
|
||||||
|
title: {
|
||||||
|
// text: 'C.A. par produit'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
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
|
||||||
|
},
|
||||||
|
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']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
|
||||||
|
{
|
||||||
|
name: 'Total',
|
||||||
|
type: 'line',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
|
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]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
recettesOption && recettesChart.setOption(recettesOption);
|
||||||
|
|
||||||
|
|
||||||
|
var tarifsDom = document.getElementById('tarifs');
|
||||||
|
var tarifsChart = echarts.init(tarifsDom);
|
||||||
|
var tarifsOption;
|
||||||
|
|
||||||
|
tarifsOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: '5%',
|
||||||
|
left: 'center',
|
||||||
|
// doesn't perfectly work with our tricks, disable it
|
||||||
|
selectedMode: false
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Tarif choisi',
|
||||||
|
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: 3, name: 'minimum' },
|
||||||
|
{ value: 10, name: 'correct' },
|
||||||
|
{ value: 3, name: 'généreux' },
|
||||||
|
{ value: 0, name: 'maximum' },
|
||||||
|
{
|
||||||
|
// make an record to fill the bottom 50%
|
||||||
|
value: 16,
|
||||||
|
itemStyle: {
|
||||||
|
// stop the chart from rendering this piece
|
||||||
|
color: 'none',
|
||||||
|
decal: {
|
||||||
|
symbol: 'none'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
tarifsOption && tarifsChart.setOption(tarifsOption);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue