- content_for(:title, 'Statistiques')
- content_for :footer do
  = render partial: "root/footer"

.statistiques
  -# Load Chartkick lazily, by using our React lazy-loader.
  -# (Chartkick itself doesn't use React though)
  = react_component('Chartkick')

  %h1.new-h1 Statistiques

  .stat-cards
    .stat-card.stat-card-half.big-number-card.pull-left
      %span.big-number-card-title.long-title TOTAL DÉMARCHES DÉMAT. OU EN COURS DE DÉMAT.
      %span.big-number-card-number
        = number_with_delimiter(@procedures_numbers[:total])
      %span.big-number-card-detail
        #{number_with_delimiter(@procedures_numbers[:last_30_days_count])} (#{@procedures_numbers[:evolution]} %) sur les 30 derniers jours

    .stat-card.stat-card-half.big-number-card.pull-left
      %span.big-number-card-title TOTAL DOSSIERS DÉPOSÉS
      %span.big-number-card-number
        = number_with_delimiter(@dossiers_numbers[:total])
      %span.big-number-card-detail
        #{number_with_delimiter(@dossiers_numbers[:last_30_days_count])} (#{@dossiers_numbers[:evolution]} %) sur les 30 derniers jours

    .stat-card.stat-card-half.pull-left
      %span.stat-card-title
        Satisfaction usager

      .chart-container
        .chart
          = area_chart @satisfaction_usagers,
            stacked: true,
            suffix: ' %',
            max: 100,
            library: { plotOptions: { series: { marker: { enabled: true }}}},
            colors: ["#C31C25", "#F5962A", "#25B177"]

    .stat-card.stat-card-half.pull-left
      %span.stat-card-title
        Pourcentage de contact utilisateur

      .chart-container
        .chart
          = line_chart @contact_percentage

      .stat-card-details
        Nombre de réponses envoyées via HelpScout
        \/ nombre de dossiers déposés

    .stat-card.stat-card-half.pull-left
      %span.stat-card-title
        Répartition des dossiers

      .chart-container
        .chart
          = pie_chart @dossiers_states_for_pie,
            colors: ["rgba(222, 238, 265, 1)", "rgba(191, 220, 249, 1)", "rgba(113, 176, 239, 1)", "rgba(61, 149, 236, 1)"]

    .stat-card.stat-card-half.pull-left
      %ul.segmented-control.pull-right
        %li.segmented-control-item.segmented-control-item-active{ data: { 'toggle-chart': '.monthly-procedures-chart' } }
          Par mois
        %li.segmented-control-item{ data: { 'toggle-chart': '.cumulative-procedures-chart' } }
          Cumul
      %span.stat-card-title.pull-left Démarches dématérialisées
      .clearfix

      .chart-container
        .chart.monthly-procedures-chart
          = column_chart @procedures_in_the_last_4_months
        .chart.cumulative-procedures-chart.hidden
          = area_chart @procedures_cumulative

    .stat-card.stat-card-half.pull-left
      %ul.segmented-control.pull-right
        %li.segmented-control-item.segmented-control-item-active{ data: { 'toggle-chart': '.monthly-dossiers-chart' } }
          Par mois
        %li.segmented-control-item{ data: { 'toggle-chart': '.cumulative-dossiers-chart' } }
          Cumul
      %span.stat-card-title.pull-left Dossiers déposés
      .clearfix

      .chart-container
        .chart.monthly-dossiers-chart
          = column_chart @dossiers_in_the_last_4_months
        .chart.cumulative-dossiers-chart.hidden
          = area_chart @dossiers_cumulative

    - if administration_signed_in?
      .stat-card.stat-card-half.pull-left
        %span.stat-card-title Temps de traitement moyen d'un dossier

        .chart-container
          .chart
            = line_chart @dossier_instruction_mean_time,
              :ytitle => "Jours"

      .stat-card.stat-card-half.pull-left
        %span.stat-card-title Temps de remplissage moyen d'un dossier

        .chart-container
          .chart
            = line_chart @dossier_filling_mean_time,
              :ytitle => "Minutes"

    .clearfix

  - if administration_signed_in?
    %h2.new-h2 Téléchargement

    = link_to "Télécharger les statistiques (CSV)", stats_download_path(format: :csv), class: 'button secondary'