.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= t('.usual_processing_time')
        %span.big-number-card-number
          = distance_of_time_in_words(@usual_traitement_time)
        %span.big-number-card-detail
          = t('.processing_time_description', percentile: ProcedureStatsConcern::USUAL_TRAITEMENT_TIME_PERCENTILE, span: ProcedureStatsConcern::NB_DAYS_RECENT_DOSSIERS, days: distance_of_time_in_words(@usual_traitement_time))

  .stat-cards
    .stat-card.stat-card-half.pull-left
      %span.stat-card-title= t('.processing_time')
      .stat-card-details= t('.since_procedure_creation')
      .chart-container
        .chart
          - colors = %w(#C3D9FF #0069CC #1C7EC9) # from _colors.scss
          = column_chart @usual_traitement_time_by_month, ytitle: t('.nb_days'), legend: "bottom", label: t('.processing_time_graph_description')

    .stat-card.stat-card-half.pull-left
      %span.stat-card-title= t('.status_evolution')
      .stat-card-details= t('.status_evolution_details')
      .chart-container
        .chart
          = area_chart @dossiers_funnel, ytitle: t('.dossiers_count'), label: t('.dossiers_count')

  .stat-cards
    .stat-card.stat-card-half.pull-left
      %span.stat-card-title= t('.acceptance_rate')
      .stat-card-details= t('.acceptance_rate_details')
      .chart-container
        .chart
          = pie_chart @termines_states,
            code: true,
            colors: %w(#387EC3 #AE2C2B #FAD859),
            label: t('.rate'),
            suffix: '%',
            library: { plotOptions: { pie: {  dataLabels: { enabled: true, format: '{point.name} : {point.percentage: .1f}%' } } } }


    .stat-card.stat-card-half.pull-left
      %span.stat-card-title= t('.weekly_distribution')
      .stat-card-details= t('.weekly_distribution_details')
      .chart-container
        .chart
          = line_chart @termines_by_week, colors: ["#387EC3", "#AE2C2B", "#FAD859"], ytitle: t('.dossiers_count')