From b0e07653c6b1f782fdd21ad67121faecb3b787fe Mon Sep 17 00:00:00 2001
From: Danny Cho <hj.danny.cho@gmail.com>
Date: Fri, 8 Dec 2023 19:24:38 +1300
Subject: [PATCH] fix: remove tier background if selection is too low, label
 padding bug fix

---
 src/App/DevResultGraph.jsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/App/DevResultGraph.jsx b/src/App/DevResultGraph.jsx
index 94e6a9e..727f2d2 100644
--- a/src/App/DevResultGraph.jsx
+++ b/src/App/DevResultGraph.jsx
@@ -173,6 +173,9 @@ const devGraphStyles = {
     circleStyle: {
         fill: "black",
     },
+    svg: {
+        height: "30px",
+    }
   };
 
   function nearestRoundUp(number) {
@@ -275,17 +278,24 @@ const renderBackgroundLines = () => {
 function calculateTierHeight(currentTierCount, previousTierCount, style) {
     const previousY = calculateYPoint(previousTierCount, yMax);
     const currentY = calculateYPoint(currentTierCount, yMax);
-    
+
     // Calculate the height of the tier relative to y-axis lines
     const height = previousY - currentY;
 
+    // meaning that tier is too high so skip render
+    if (!height) {
+        return null;
+    }
+
     // Calculate the y-position of the tier based on y-axis lines
     const yPosition = Math.min(previousY - height, yInnerMaxHeight - 5);
-    
+
     // if too small, barely render
     if (yInnerMaxHeight - ySingleUnit < yPosition) {
         return <rect x="50" y={previousY + 1} style={style} height={1}></rect>;
     }
+
+
     return <rect x="50" y={yPosition} style={style} height={Math.max(height, 29)}></rect>;
 }
 
@@ -353,7 +363,7 @@ return (
         </div>
         <div style={devGraphStyles.row}>
             <div style={devGraphStyles.column2}>
-                <svg>
+                <svg style={devGraphStyles.svg}>
                     <g>
                         <rect x="0" y="0" style={devGraphStyles.freeTierSquare}></rect>
                         <text x="35" y="20" style={devGraphStyles.textStyle6}>Free Tier</text>
@@ -361,7 +371,7 @@ return (
                 </svg>
             </div>
             <div style={devGraphStyles.column2}>
-            <svg>
+            <svg style={devGraphStyles.svg}>
                 <g>
                     <rect x="0" y="0" style={devGraphStyles.tierOneSquare}></rect>
                     <text x="35" y="20" style={devGraphStyles.textStyle6}>Tier 1</text>
@@ -369,7 +379,7 @@ return (
             </svg>
             </div>
             <div style={devGraphStyles.column2}>
-            <svg>
+            <svg style={devGraphStyles.svg}>
                 <g>
                     <rect x="0" y="0" style={devGraphStyles.tiertwoSquare}></rect>
                     <text x="35" y="20" style={devGraphStyles.textStyle6}>Tier 2</text>