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

    <a name="recettes"></a>
    <div class="ui container borderless center aligned">
        <h1>FINANCES</h1>
        <h4>Chiffre d'affaires par produit</h4>
        <p>Chiffre d'affaires mensuel de chaque produit depuis le début de l'activité.</p>
    </div>

    <div class="ui vertical stripe segment">
        <div class="ui top aligned container">
            <div class="row">
                <div class="wide column">
                    <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 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>

    <div class="ui vertical stripe segment">
        <div class="ui  two column top aligned container doubling stackable grid">
            <div class="row">
                <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>
<?php include 'includes/_assetsLate.php'; ?>
<script type="text/javascript">

    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',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {},
        toolbox: {},
        // xAxis: { type: 'category' },
        // yAxis: { gridIndex: 0 },
        grid: { top: '55%' },
        xAxis: [
            {
                type: 'category',
                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: [
            {
                type: 'value'
            }
        ],
        series: [
            // {
            //     type: 'line',
            //     label: {
            //         show: true,
            //         position: 'top'
            //     },
            // },
            {
                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: {
                    formatter: '{b}: {@2012} ({d}%)'
                },
                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 = {
        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: 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: 17,
                        itemStyle: {
                            // stop the chart from rendering this piece
                            color: 'none',
                            decal: {
                                symbol: 'none'
                            }
                        },
                        label: {
                            show: false
                        }
                    }
                ]
            }
        ]
    };

    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>

</html>
