Using the same colors as above schedule

transitmatters · Apr 15, 2024 · 8618739 · 8618739
1 parent 06eba20
commit 8618739
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/common/components/charts/Legend.tsx b/common/components/charts/Legend.tsx
@@ -41,31 +41,25 @@ const LegendSingle: React.FC<LegendProps> = ({ showUnderRatio = false }) => {
           MBTA benchmark:
         </p>
       </div>
-      {showUnderRatio && (
-        <p>
-          <span className="mr-1 inline-block h-2.5 w-2.5 rounded-full border border-[#0066ff] bg-[#0096FF]"></span>
-          {'50%+ early'}
-        </p>
-      )}
       <p>
         <span className="mr-1 inline-block h-2.5 w-2.5 rounded-full border border-[#57945B] bg-[#64b96a]"></span>
         {'On time'}
       </p>
       <p>
         <span className="mr-1 inline-block h-2.5 w-2.5 rounded-full border border-[#D9D31E] bg-[#f5ed00]"></span>
-        {'25%+ above'}
+        {'25%+ off'}
       </p>
       <p>
         <span
           className={`mr-1 inline-block h-2.5 w-2.5 rounded-full border border-[#A1384A] bg-[#c33149]`}
         ></span>{' '}
-        {'50%+ above'}
+        {'50%+ off'}
       </p>
       <p>
         <span
           className={`mr-1 inline-block h-2.5 w-2.5 rounded-full border border-[#925396] bg-[#bb5cc1]`}
         ></span>{' '}
-        {'100%+ above'}
+        {'100%+ off'}
       </p>
     </>
   );

diff --git a/common/components/charts/SingleDayLineChart.tsx b/common/components/charts/SingleDayLineChart.tsx
@@ -30,17 +30,22 @@ const pointColors = (
     if (benchmark_field) {
       const ratio = point[metric_field] / point[benchmark_field];
       if (point[benchmark_field] === null) {
-        return CHART_COLORS.GREY; //grey
+        return CHART_COLORS.GREY;
+      } else if (ratio <= 0.05 && showUnderRatio) {
+        // Not actually 100% off, but we want to show it as an extreme
+        return CHART_COLORS.PURPLE;
       } else if (ratio <= 0.5 && showUnderRatio) {
-        return CHART_COLORS.BLUE; //blue
+        return CHART_COLORS.RED;
+      } else if (ratio <= 0.75 && showUnderRatio) {
+        return CHART_COLORS.YELLOW;
       } else if (ratio <= 1.25) {
-        return CHART_COLORS.GREEN; //green
+        return CHART_COLORS.GREEN;
       } else if (ratio <= 1.5) {
-        return CHART_COLORS.YELLOW; //yellow
+        return CHART_COLORS.YELLOW;
       } else if (ratio <= 2.0) {
-        return CHART_COLORS.RED; //red
+        return CHART_COLORS.RED;
       } else if (ratio > 2.0) {
-        return CHART_COLORS.PURPLE; //purple
+        return CHART_COLORS.PURPLE;
       }
     }
 
@@ -52,6 +57,8 @@ const departureFromNormalString = (metric: number, benchmark: number, showUnderR
   const ratio = metric / benchmark;
   if (showUnderRatio && ratio <= 0.5) {
     return '50%+ under schedule';
+  } else if (showUnderRatio && ratio <= 0.75) {
+    return '25%+ under schedule';
   } else if (!isFinite(ratio) || ratio <= 1.25) {
     return '';
   } else if (ratio <= 1.5) {