Merge pull request #8036 from cfpb/fix/dd-graph-alignment

Align graph line properly and only update graph when visiting step 2

Author: wpears

cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/financial-view.js

@@ -630,7 +630,6 @@ const financialView = {
             //       financialView.$aboutThisTool.focus();
             //     }
             //   );
-            metricView.updateGraphs(values);
             window.location.hash = '#info-right';
 
             analyticsSendEvent({
@@ -883,6 +882,9 @@ const financialView = {
       // Show Step 2
       financialView.$evaluateSection.show();
       financialView.$bigQuestion.show();
+
+      const values = getFinancial.values();
+      metricView.updateGraphs(values);
       // $('html, body')
       //   .stop()
       //   .animate(

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';
     });
   },