From 9f44d582c17edca68b4a456150f53b31898b1f63 Mon Sep 17 00:00:00 2001
From: Amy Chen <amysbubble@Amys-MacBook-Pro-3.local>
Date: Thu, 14 Mar 2024 09:32:09 -0700
Subject: [PATCH] fix slider labels

---
 src/components/graph/SurveyGraph.js | 65 ++++++++++++++++-------------
 src/styles/elements/_slider.scss    | 31 +++++++++++++-
 2 files changed, 66 insertions(+), 30 deletions(-)

diff --git a/src/components/graph/SurveyGraph.js b/src/components/graph/SurveyGraph.js
index e26f31c8c..490421aab 100644
--- a/src/components/graph/SurveyGraph.js
+++ b/src/components/graph/SurveyGraph.js
@@ -770,14 +770,45 @@ export default class SurveyGraph extends Component {
             {arrNum.map((item, index) => {
               const prevItem = arrNum[index - 1];
               const nextItem = arrNum[index + 1];
+              const dataUnit = item < 1 ? "month" : "year";
+              const displayValue =
+                item < 1 || !inYears
+                  ? !inYears
+                    ? item
+                      ? item * 12 + "mo"
+                      : item
+                    : item === arrNum[0] ||
+                      (max < 10 &&
+                        item - arrNum[0] > 0.25 &&
+                        (item / 0.25) % 1 === 0) ||
+                      (max < 10 &&
+                        item - arrNum[0] > 0.25 &&
+                        (item / 0.5) % 1 === 0) ||
+                      (max < 10 &&
+                        item - arrNum[0] > 0.25 &&
+                        (item / 0.75) % 1 === 0)
+                    ? item
+                      ? item * 12 + "mo"
+                      : item
+                    : ""
+                  : item % 1 === 0
+                  ? item + "yr"
+                  : "";
               const rotateLabelFlag =
                 (inYears &&
                   item < 1 &&
                   ((prevItem && item - prevItem < 0.2) ||
                     (nextItem && nextItem - item < 0.2))) ||
-                (prevItem && prevItem < 1 && item >= 1 && Math.abs(item - prevItem) <= 0.5) ||
-                (nextItem && nextItem >= 1 && item < 1  && Math.abs(nextItem - item) <= 0.5);
-              const dataUnit = item < 1 ? "month" : "year";
+                (inYears &&
+                  prevItem &&
+                  prevItem < 1 &&
+                  item >= 1 &&
+                  Math.abs(item - prevItem) <= 0.5) ||
+                (inYears &&
+                  nextItem &&
+                  nextItem >= 1 &&
+                  item < 1 &&
+                  Math.abs(nextItem - item) <= 0.5);
               return (
                 <span
                   key={`scale_${index}`}
@@ -793,30 +824,10 @@ export default class SurveyGraph extends Component {
                   }`}
                   ref={this.scaleLabelRefs[index]}
                   datavalue={item}
+                  displayvalue={displayValue}
                   dataunit={dataUnit}
                 >
-                  {item < 1 || !inYears
-                    ? !inYears
-                      ? item
-                        ? item * 12 + "mo"
-                        : item
-                      : item === arrNum[0] ||
-                        (max < 10 &&
-                          item - arrNum[0] > 0.25 &&
-                          (item / 0.25) % 1 === 0) ||
-                        (max < 10 &&
-                          item - arrNum[0] > 0.25 &&
-                          (item / 0.5) % 1 === 0) ||
-                        (max < 10 &&
-                          item - arrNum[0] > 0.25 &&
-                          (item / 0.75) % 1 === 0)
-                      ? item
-                        ? item * 12 + "mo"
-                        : item
-                      : ""
-                    : item % 1 === 0
-                    ? item + "yr"
-                    : ""}
+                  {displayValue}
                 </span>
               );
             })}
@@ -834,9 +845,7 @@ export default class SurveyGraph extends Component {
         style={{
           position: "absolute",
           top: 0,
-          // left: "64px",
           right: 0,
-          //  display: "none",
         }}
       >
         {this.renderCopyButton()}
@@ -854,7 +863,7 @@ export default class SurveyGraph extends Component {
     return (
       <div
         className="text-warning"
-        style={{ margin: "8px" }}
+        style={{ margin: "8px", paddingLeft: "16px", paddingRight: "16px" }}
       >{`No data for ${noDataQids.join(", ")} in selected date range`}</div>
     );
   }
diff --git a/src/styles/elements/_slider.scss b/src/styles/elements/_slider.scss
index feeea5c9f..4771c055b 100644
--- a/src/styles/elements/_slider.scss
+++ b/src/styles/elements/_slider.scss
@@ -38,14 +38,41 @@ input[type="range"] {
       }
       &:first-of-type {
         top: 18px;
-        &[dataunit=month] {
-          top: 20px;
+        &[displayvalue='1yr'],
+        &[displayvalue='2yr'],
+        &[displayvalue='3yr'],
+        &[displayvalue='4yr'],
+        &[displayvalue='5yr'],
+        &[displayvalue='6yr'],
+        &[displayvalue='7yr'],
+        &[displayvalue='8yr'],
+        &[displayvalue='9yr'] {
+          top: 12px;
+        }
+        &[displayvalue='1mo'],
+        &[displayvalue='2mo'],
+        &[displayvalue='3mo'],
+        &[displayvalue='4mo'],
+        &[displayvalue='5mo'],
+        &[displayvalue='6mo'],
+        &[displayvalue='7mo'],
+        &[displayvalue='8mo'],
+        &[displayvalue='9mo'] {
+          top: 16px;
+        }
+        &[displayvalue='10mo'],
+        &[displayvalue='11mo'],
+        &[displayvalue='12mo'] {
+          top: 22px;
         }
       }
       transform: rotate(-90deg);
       &:not(:first-of-type) {
         left: 16px;
       }
+      &:last-of-type {
+        left: 4px;
+      }
     }
   }
 }