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

  %h1.new-h1= title
  .stat-cards
    - if @usual_traitement_time.present?
      .stat-card.big-number-card
        %span.big-number-card-title TEMPS DE TRAITEMENT USUEL
        %span.big-number-card-number
          = distance_of_time_in_words(@usual_traitement_time)
        %span.big-number-card-detail
          #{ProcedureStatsConcern::USUAL_TRAITEMENT_TIME_PERCENTILE}% des demandes des #{ProcedureStatsConcern::NB_DAYS_RECENT_DOSSIERS} derniers jours ont été traitées en moins de #{distance_of_time_in_words(@usual_traitement_time)}.

  .stat-cards
    .stat-card.stat-card-half.pull-left
      %span.stat-card-title TEMPS DE TRAITEMENT
      .chart-container
        .chart
          - colors = %w(#C3D9FF #0069CC #1C7EC9) # from _colors.scss
          = column_chart @usual_traitement_time_by_month, ytitle: "Nb Jours", legend: "bottom", label: "Temps de traitement entre le passage en instruction et la réponse (accepté, refusé, ou classé sans suite) pour 90% des dossiers"

    .stat-card.stat-card-half.pull-left
      %span.stat-card-title AVANCÉE DES DOSSIERS
      .chart-container
        .chart
          = area_chart @dossiers_funnel

  .stat-cards
    .stat-card.stat-card-half.pull-left
      %span.stat-card-title TAUX D’ACCEPTATION
      .chart-container
        .chart
          - colors = %w(#C3D9FF #0069CC #1C7EC9) # from _colors.scss
          = pie_chart @termines_states, colors: colors

    .stat-card.stat-card-half.pull-left
      %span.stat-card-title RÉPARTITION PAR SEMAINE
      .chart-container
        .chart
          = line_chart @termines_by_week, colors: ["#387EC3", "#AE2C2B", "#FAD859"]