{% extends "agenda_culturel/page.html" %}

{% load utils_extra %}
{% load static %}

{% block title %}{% block og_title %}Statistiques{% endblock %}{% endblock %}

{% load cat_extra %}
{% block entete_header %}
    {% css_categories %}
    <script src="{% static 'js/d3.v7.min.js' %}"></script>
    <script src="{% static 'cal-heatmap/cal-heatmap.min.js' %}"></script>
    <script src="{% static 'cal-heatmap/plugins/CalendarLabel.min.js' %}"></script>
    <script src="{% static 'js/popper.min.js' %}"></script>
    <script src="{% static 'cal-heatmap/plugins/Tooltip.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'cal-heatmap/cal-heatmap.css' %}">

{% endblock %}

{% block content %}
<article>
    <header><h1>Statistiques</h1></header>
    <p>On retrouve sur cette page une synthèse des événements publiés sur l'agenda culturel pommes de lune.</p>

    <h2>Par date de l'événement</h2>
    <p>Pour chaque date, on retrouve le nombre d'événements qui débutent à cette date (sauf événements récurrents).</p>
    <div class="large-table">
        <div id="cal-heatmap-startday"></div>
    </div>


    <h2>Par jour de création sur l'agenda</h2>
    <p>Pour chaque date, on retrouve le nombre d'événements qui ont été créé ce jour-là, par import automatique ou par création manuelle.
        Ce nombre ne tient pas en compte les événements qui sont des doublons d'événements déjà importés, ni des événements que l'équipe de
        modération a choisi de ne pas conserver.
    </p>
    <div class="large-table">
        <div id="cal-heatmap-creation"></div>
    </div>

    <h2>Par ville</h2>
    <p>Nombre d'événements référencés par ville.</p>
    <ul>
        {% for v in nb_by_city %}
            <li><strong>{{ v.city }}&nbsp;:</strong> {{ v.total }}</li>
        {% endfor %}
    </ul>
</article>
<script>
    // prepare data
    const data_startday = [
    {% for s in  stats_by_startday %}
        {% if not forloop.first %}, {% endif %}
        {date: new Date('{{ s.day.isoformat }}'), value: {{ s.total}}}
    {% endfor %}
    ];
    const data_creation = [
    {% for s in  stats_by_creation %}
        {% if not forloop.first %}, {% endif %}
        {date: new Date('{{ s.day.isoformat }}'), value: {{ s.total}}}
    {% endfor %}
    ];

    // define parameters
    const tooltip = {text: function (timestamp, value, dayjsDate) {
        if (value != null)
            return `${dayjsDate.format('DD/MM/YYYY')}: ${value}`;
        else
            return `${dayjsDate.format('DD/MM/YYYY')}`;
    }};
    const calendarlabel = { position: 'left', key: 'left', text: () => ['lun', '', 'mer', '', 'ven', '', 'dim'] };

    // set options
    var options = {
        date: { 
            locale: 'fr',
            start: new Date("{{ first_by_startday.isoformat }}"),    
            highlight: new Date()
         },
        domain: {
            type: "month",
            label: {text: 'MMM YY'},
            padding: [3, 3, 3, 3]
        },
        subDomain: {
            type: "day",
            width: 20,
            height: 20,
            radius: 2,
            label : function (timestamp, value) { if (value == null) return ''; else return `${value}`; }
        },
        data: {
            source: data_startday,
            defaultValue: null,
            x: "date",
            y: "value"
        },
        theme: (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? "dark" : "light",
        itemSelector: '#cal-heatmap-startday',
        animationDuration: 0
    };

    // create first heatmap
    const cal_startday = new CalHeatmap();
    cal_startday.paint(options, [
        [CalendarLabel, calendarlabel],
        [Tooltip, tooltip]
    ]);

    // create second heatmap
    options.itemSelector = '#cal-heatmap-creation';
    options.date.start =  new Date("{{ first_by_creation.isoformat }}");
    options.data.source = data_creation;
    const cal_creation = new CalHeatmap();
    cal_creation.paint(options, [
        [CalendarLabel, calendarlabel],
        [Tooltip, tooltip]
    ]);

    cal_startday.on('click', (event, timestamp, value) => {
        const d = new Date(timestamp);
        const url = "{% url 'day_view' 0 0 0 %}".replace("/0/", "/" + d.getFullYear() + "/").replace("/0/", "/" + (d.getMonth() + 1) + "/").replace("/0/", "/" + d.getDate() + "/");
        window.location = url;
    });
    
</script>
{% endblock %}

