From 28d43fe36912034b3ed270b62991e00f9ec891a7 Mon Sep 17 00:00:00 2001
From: Wyatt Pearsall <wyatt.pearsall@cfpb.gov>
Date: Wed, 29 Nov 2023 15:52:59 -0500
Subject: [PATCH] Align graph line properly and only update graph when visiting
 step 2

---
 .../js/disclosures/views/financial-view.js                 | 4 +++-
 .../paying-for-college/js/disclosures/views/metric-view.js | 7 +++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/financial-view.js b/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/financial-view.js
index 0ac9f640fe5..36953aae665 100755
--- a/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/financial-view.js
+++ b/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/financial-view.js
@@ -629,7 +629,6 @@ const financialView = {
             //       financialView.$aboutThisTool.focus();
             //     }
             //   );
-            metricView.updateGraphs(values);
             window.location.hash = '#info-right';
 
             analyticsSendEvent({
@@ -882,6 +881,9 @@ const financialView = {
       // Show Step 2
       financialView.$evaluateSection.show();
       financialView.$bigQuestion.show();
+
+      const values = getFinancial.values();
+      metricView.updateGraphs(values);
       // $('html, body')
       //   .stop()
       //   .animate(
diff --git a/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/metric-view.js b/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/metric-view.js
index c45066f7bb4..c18ea906aee 100755
--- a/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/metric-view.js
+++ b/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/metric-view.js
@@ -42,7 +42,6 @@ const metricView = {
   init: function () {
     this.settlementStatus = getSchool.values().settlementSchool || false;
     this.setMetrics(this.metrics);
-    this.updateGraphs();
     this.updateDebtBurden();
   },
 
@@ -196,7 +195,7 @@ const metricView = {
     const min = $graph.attr('data-graph-min');
     const max = $graph.attr('data-graph-max');
     const $school = $graph.find('.bar-graph_point__you');
-    const $national = $graph.find('bar-graph_point__average');
+    const $national = $graph.find('.bar-graph_point__average');
     const bottoms = {};
     const bottomOffset = 20;
 
@@ -214,10 +213,10 @@ const metricView = {
       $graph.addClass('bar-graph__high-point');
     }
     $school.each((elem) => {
-      elem.style.bottom = bottoms.school;
+      elem.style.bottom = bottoms.school + 'px';
     });
     $national.each((elem) => {
-      elem.style.bottom = bottoms.national;
+      elem.style.bottom = bottoms.national + 'px';
     });
   },