Fix reload of charts

betagouv · Nov 28, 2024 · 014471e · 014471e
1 parent da26e9e
commit 014471e
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 58 deletions.
diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -3,3 +3,10 @@ import "@hotwired/turbo-rails";
 import "controllers";
 import "chartkick";
 import "Chart.bundle";
+
+document.addEventListener("turbo:load", () => {
+  const homeCharts = document.getElementById("home_charts");
+  if (homeCharts) {
+    Turbo.visit(window.location.href, { frame: "home_charts" });
+  }
+});
diff --git a/app/views/home/_home_timeline.html.haml b/app/views/home/_home_timeline.html.haml
@@ -8,64 +8,65 @@
     = t("errors.school_years.not_found").html_safe
 - else
   - dsfr_colors = { blue: "#000091", light_blue: "#bccdff", green: "#88fdaa", red: "#ffbdbd" } # https://www.systeme-de-design.gouv.fr/fondamentaux/couleurs-palette
-  .fr-grid-row.timeline-row
-    .fr-col-md-7
-      .gray-panel.timeline-section
-        = render 'classes/attributive_decisions_panel'
-    .fr-col-md-4.fr-ml-4w
-      .chart-container
-        = pie_chart({ "Élèves avec DA" => @establishment_facade.attributive_decisions_count, "Élèves sans DA" => @establishment_facade.without_attributive_decisions_count }, colors: [dsfr_colors[:green], dsfr_colors[:red]], donut: true)
+  = turbo_frame_tag "home_charts" do
+    .fr-grid-row.timeline-row
+      .fr-col-md-7
+        .gray-panel.timeline-section
+          = render 'classes/attributive_decisions_panel'
+      .fr-col-md-4.fr-ml-4w
+        .chart-container
+          = pie_chart({ "Élèves avec DA" => @establishment_facade.attributive_decisions_count, "Élèves sans DA" => @establishment_facade.without_attributive_decisions_count }, colors: [dsfr_colors[:green], dsfr_colors[:red]], donut: true, turbolinks: false)
 
-  .fr-grid-row.timeline-row
-    .fr-col-md-7
-      .gray-panel.timeline-section
-        .fr-grid-row.fr-grid-row--top
-          %h2.fr-col 2. Coordonnées bancaires
-          = progress_badge(@establishment_facade.ribs_count, @establishment_facade.students_count, title: "Les coordonnées bancaires sont réutilisées pour un même élève\nà travers toutes les classes qu'il a pu fréquenter.")
-        %p Afin de pouvoir verser l'allocation aux lycéens, APLyPro a besoin de leurs coordonnées bancaires, de celles d'un responsable légal ou d'un tiers.
-        %ul.fr-btns-group
-          %li= link_to "Choisir une classe pour saisir des coordonnées bancaires", school_year_classes_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0"
-    .fr-col-md-4.fr-ml-4w
-      .chart-container
-        = pie_chart({ "Élèves avec RIB" => @establishment_facade.ribs_count, "Élèves sans RIB" => @establishment_facade.students_without_rib_count }, colors: [dsfr_colors[:green], dsfr_colors[:red]], donut: true)
+    .fr-grid-row.timeline-row
+      .fr-col-md-7
+        .gray-panel.timeline-section
+          .fr-grid-row.fr-grid-row--top
+            %h2.fr-col 2. Coordonnées bancaires
+            = progress_badge(@establishment_facade.ribs_count, @establishment_facade.students_count, title: "Les coordonnées bancaires sont réutilisées pour un même élève\nà travers toutes les classes qu'il a pu fréquenter.")
+          %p Afin de pouvoir verser l'allocation aux lycéens, APLyPro a besoin de leurs coordonnées bancaires, de celles d'un responsable légal ou d'un tiers.
+          %ul.fr-btns-group
+            %li= link_to "Choisir une classe pour saisir des coordonnées bancaires", school_year_classes_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0"
+      .fr-col-md-4.fr-ml-4w
+        .chart-container
+          = pie_chart({ "Élèves avec RIB" => @establishment_facade.ribs_count, "Élèves sans RIB" => @establishment_facade.students_without_rib_count }, colors: [dsfr_colors[:green], dsfr_colors[:red]], donut: true, turbolinks: false)
 
-  .fr-grid-row.timeline-row
-    .fr-col-md-7
-      .gray-panel.timeline-section
-        %h2 3. Périodes de formation en milieu professionnel
-        .fr-grid-row
-          - PfmpStateMachine.states.each_with_index do |state, index|
-            - if index > 0
-              .fr-mx-1w →
-            = pfmps_status_count_badge(state.to_sym, @establishment_facade.pfmps_counts[state.to_sym], display_zero: true)
-        %p Pour calculer le montant des allocations à envoyer, APLyPro a besoin de connaître le nombre de jours travaillés des PFMPs de chaque élève.
-        %ul.fr-btns-group
-          %li= link_to "Choisir une classe ou un élève pour saisir une PFMP", school_year_classes_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0"
-    .fr-col-md-4.fr-ml-4w
-      .chart-container
-        = column_chart(@establishment_facade.pfmps_counts.transform_keys { |key| t("pfmps.state.#{key}") },
-          colors: [dsfr_colors[:light_blue], dsfr_colors[:red], dsfr_colors[:green], dsfr_colors[:red]],
-          label: "PFMPs par états")
+    .fr-grid-row.timeline-row
+      .fr-col-md-7
+        .gray-panel.timeline-section
+          %h2 3. Périodes de formation en milieu professionnel
+          .fr-grid-row
+            - PfmpStateMachine.states.each_with_index do |state, index|
+              - if index > 0
+                .fr-mx-1w →
+              = pfmps_status_count_badge(state.to_sym, @establishment_facade.pfmps_counts[state.to_sym], display_zero: true)
+          %p Pour calculer le montant des allocations à envoyer, APLyPro a besoin de connaître le nombre de jours travaillés des PFMPs de chaque élève.
+          %ul.fr-btns-group
+            %li= link_to "Choisir une classe ou un élève pour saisir une PFMP", school_year_classes_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0"
+      .fr-col-md-4.fr-ml-4w
+        .chart-container{ data: { "turbolinks-track": "reload" } }
+          = column_chart(@establishment_facade.pfmps_counts.transform_keys { |key| t("pfmps.state.#{key}") },
+            colors: [dsfr_colors[:light_blue], dsfr_colors[:red], dsfr_colors[:green], dsfr_colors[:red]],
+            label: "PFMPs par états")
 
-  .fr-grid-row.timeline-row
-    .fr-col-md-7
-      .gray-panel.timeline-section
-        %h2 4. Demandes de paiements des PFMPs
-        .fr-grid-row
-          - ASP::PaymentRequestDecorator::PAYMENT_STAGES.each_with_index do |states, index|
-            - if index > 0
-              .fr-mx-1w →
-            .centering-container.fr-mb-2w
-              = payment_requests_status_count_badge(states.first, @establishment_facade.payment_requests_counts[states.first], display_zero: true)
-              = payment_requests_status_count_badge(states.last, @establishment_facade.payment_requests_counts[states.last], display_zero: false)
-        %p La validation du chef d'établissement est nécessaire pour chaque PFMP. Une fois la PFMP validée, une demande de paiement est ensuite envoyée à l'Agence de Services et de Paiement (ASP). Chaque demande de paiement possède un statut affiché dans la page "Paiements".
-        %ul.fr-btns-group
-          - if current_user.can_validate?
-            %li= link_to "Consulter et gérer les envois en paiement", school_year_validations_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0"
-          - else
-            %li= button_to "Vous n'avez pas le droit de valider des PFMPs", "#", class: 'fr-btn fr-btn--primary fr-mb-0', disabled: true
-    .fr-col-md-4.fr-ml-4w
-      .chart-container
-        = column_chart(@establishment_facade.payment_requests_counts.transform_keys { |key| t("payment_requests.state.#{key}") },
-          colors: [dsfr_colors[:blue], dsfr_colors[:red], dsfr_colors[:light_blue], dsfr_colors[:red], dsfr_colors[:green], dsfr_colors[:red]],
-          label: "Demandes de paiements par états")
+    .fr-grid-row.timeline-row
+      .fr-col-md-7
+        .gray-panel.timeline-section
+          %h2 4. Demandes de paiements des PFMPs
+          .fr-grid-row
+            - ASP::PaymentRequestDecorator::PAYMENT_STAGES.each_with_index do |states, index|
+              - if index > 0
+                .fr-mx-1w →
+              .centering-container.fr-mb-2w
+                = payment_requests_status_count_badge(states.first, @establishment_facade.payment_requests_counts[states.first], display_zero: true)
+                = payment_requests_status_count_badge(states.last, @establishment_facade.payment_requests_counts[states.last], display_zero: false)
+          %p La validation du chef d'établissement est nécessaire pour chaque PFMP. Une fois la PFMP validée, une demande de paiement est ensuite envoyée à l'Agence de Services et de Paiement (ASP). Chaque demande de paiement possède un statut affiché dans la page "Paiements".
+          %ul.fr-btns-group
+            - if current_user.can_validate?
+              %li= link_to "Consulter et gérer les envois en paiement", school_year_validations_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0"
+            - else
+              %li= button_to "Vous n'avez pas le droit de valider des PFMPs", "#", class: 'fr-btn fr-btn--primary fr-mb-0', disabled: true
+      .fr-col-md-4.fr-ml-4w
+        .chart-container
+          = column_chart(@establishment_facade.payment_requests_counts.transform_keys { |key| t("payment_requests.state.#{key}") },
+            colors: [dsfr_colors[:blue], dsfr_colors[:red], dsfr_colors[:light_blue], dsfr_colors[:red], dsfr_colors[:green], dsfr_colors[:red]],
+            label: "Demandes de paiements par états", turbolinks: false)