style(stats): better responsive & dark theme for procedure stats

app/assets/stylesheets/stats.scss

@@ -1,78 +1,8 @@
-@import "colors";
-@import "constants";
-
-$dark-grey: #333333;
-$light-grey: #999999;
-
-$default-space: 15px;
-
-$new-h1-margin-bottom: 4 * $default-space;
-$new-h2-margin-bottom: 3 * $default-space;
-
-.new-h1,
-.new-h2 {
-  color: $dark-grey;
-  text-align: center;
-  font-weight: bold;
-}
-
 .new-h1 {
   margin-bottom: 3.75rem;
   font-size: 2.5rem;
 }
 
-.new-h2 {
-  margin-bottom: $new-h2-margin-bottom;
-  font-size: 36px;
-}
-
-$statistiques-padding-top: $default-space * 2;
-
-.statistiques {
-  width: 1040px;
-  margin: 0 auto;
-  padding-top: $statistiques-padding-top;
-}
-
-.stat-cards {
-  .stat-card:nth-of-type(even) {
-    margin-right: 0px;
-  }
-}
-
-$stat-card-margin-bottom: 3 * $default-space;
-
-.stat-card {
-  padding: 15px;
-  margin-bottom: $stat-card-margin-bottom;
-  border-radius: 5px;
-  box-shadow: none;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-}
-
-$stat-card-half-horizontal-spacing: 4 * $default-space;
-
-.stat-card-half {
-  width: calc((100% - #{$stat-card-half-horizontal-spacing}) / 2);
-  margin-right: $stat-card-half-horizontal-spacing;
-}
-
-.stat-card-title {
-  color: $dark-grey;
-  font-size: 26px;
-  font-weight: bold;
-  width: 200px;
-  text-transform: uppercase;
-}
-
-.stat-card-details {
-  font-size: 13px;
-  font-style: italic;
-}
-
-$segmented-control-item-horizontal-padding: $default-space;
-$segmented-control-item-border-radius: 0.25rem;
-
 .chart-container {
   margin-top: 36px;
 }
@@ -81,26 +11,6 @@ $segmented-control-item-border-radius: 0.25rem;
   width: 100%;
 }
 
-$big-number-card-padding: 2 * $segmented-control-item-border-radius;
-
-.big-number-card {
-  padding: $big-number-card-padding $segmented-control-item-horizontal-padding;
-}
-
-.big-number-card-title {
-  display: block;
-  text-align: center;
-  margin: 0 auto;
-  margin-bottom: 20px;
-  color: $light-grey;
-  text-transform: uppercase;
-
-  &.long-title {
-    margin-left: -30px;
-    margin-right: -30px;
-  }
-}
-
 .big-number-card-number {
   display: block;
   text-align: center;
@@ -110,10 +20,3 @@ $big-number-card-padding: 2 * $segmented-control-item-border-radius;
   color: var(--text-title-blue-france);
   white-space: nowrap;
 }
-
-.big-number-card-detail {
-  display: block;
-  margin-top: $default-padding;
-  text-align: center;
-  color: $blue-france-500;
-}

app/views/shared/procedures/_stats.html.haml

@@ -1,45 +1,56 @@
-.statistiques{ 'data-controller': 'chartkick' }
+.fr-container.fr-my-4w
-  %h1.new-h1= title
+  %h1= title
-  .stat-cards
+  .fr-grid-row.fr-grid-row--gutters
     - if @usual_traitement_time.present?
-      .stat-card.big-number-card
+      .fr-col-xs-12
-        %span.big-number-card-title= t('.usual_processing_time')
+        .fr-callout
+          %h2.fr-callout__title= t('.usual_processing_time')
           = render Procedure::EstimatedDelayComponent.new(procedure: @procedure)
 
-  .stat-cards
+    .fr-col-xs-12.fr-col-sm-12.fr-col-lg-6
-    .stat-card.stat-card-half.pull-left
+      .fr-callout{ data: { controller: 'chartkick' } }
-      %span.stat-card-title= t('.processing_time')
+        %h2.fr-callout__title= t('.processing_time')
-      .stat-card-details= t('.since_procedure_creation')
+        %p.fr-callout__text.fr-text--md= t('.since_procedure_creation')
+
+        .chart-container
+          .chart-procedures-chart{ data: { 'chartkick-target': 'chart' }}
+            = column_chart @usual_traitement_time_by_month,
+              library: Chartkick.options[:default_library_config],
+              ytitle: t('.nb_days'), legend: "bottom", label: t('.processing_time_graph_description')
+
+    .fr-col-xs-12.fr-col-sm-12.fr-col-lg-6
+      .fr-callout
+        %h2.fr-callout__title= t('.status_evolution')
+        %p.fr-callout__text.fr-text--md= t('.status_evolution_details')
+
         .chart-container
           .chart
-          - colors = %w(#C3D9FF #0069CC #1C7EC9) # from _colors.scss
+            = area_chart @dossiers_funnel,
-          = column_chart @usual_traitement_time_by_month, ytitle: t('.nb_days'), legend: "bottom", label: t('.processing_time_graph_description')
+              library: Chartkick.options[:default_library_config],
+              ytitle: t('.dossiers_count'), label: t('.dossiers_count')
 
-    .stat-card.stat-card-half.pull-left
+    .fr-col-xs-12.fr-col-sm-12.fr-col-lg-6
-      %span.stat-card-title= t('.status_evolution')
+      .fr-callout
-      .stat-card-details= t('.status_evolution_details')
+        %h2.fr-callout__title= t('.acceptance_rate')
-      .chart-container
+        %p.fr-callout__text.fr-text--md= t('.acceptance_rate_details')
-        .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,
+              library: Chartkick.options[:default_library_config],
               code: true,
-            colors: %w(#387EC3 #AE2C2B #FAD859),
+              colors: ["var(--background-flat-success)", "var(--background-flat-error)", "#FAD859" ],
               label: t('.rate'),
-            suffix: '%',
+              suffix: '%'
-            library: { plotOptions: { pie: {  dataLabels: { enabled: true, format: '{point.name} : {point.percentage: .1f}%' } } } }
 
+    .fr-col-xs-12.fr-col-sm-12.fr-col-lg-6
+      .fr-callout
+        %h2.fr-callout__title= t('.weekly_distribution')
+        %p.fr-callout__text.fr-text--md= t('.weekly_distribution_details')
 
-    .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')
+            = line_chart @termines_by_week,
-.clearfix
+              library: Chartkick.options[:default_library_config],
+              colors: ["var(--background-flat-success)", "var(--background-flat-error)", "#FAD859" ],
+              ytitle: t('.dossiers_count')

config/initializers/chartkick.rb

@@ -13,6 +13,22 @@ Chartkick.options = {
       gridLineColor: 'var(--border-plain-grey)',
       lineColor: 'var(--border-action-high-grey)',
       labels: { style: { color: "var(--text-default-grey)" } }
+    },
+    legend: {
+      itemStyle: {
+        color: "var(--text-default-grey)"
+      }
+    },
+    plotOptions: {
+      pie: {
+        dataLabels: {
+          color: "var(--text-default-grey)",
+          enabled: true, format: '{point.name} : {point.percentage: .1f}%',
+          style: {
+            textOutline: 'none'
+          }
+        }
+      }
     }
   }
 }