fix | Include missing dependencies needed for refactor

src/components/BusRouteDetails.js

@@ -7,6 +7,9 @@ import RidershipGraphic from "./stat-visuals/RidershipGraphic";
 import PercentileGraphic from "./stat-visuals/PercentileGraphic";
 import GhostingGraphic from "./stat-visuals/GhostingGraphic";
 import ReliabilityRankGraphic from "./stat-visuals/ReliabilityRankGraphic";
+import busIcon from "../assets/bus-icon.png";
+import ghostIcon from "../assets/bxs_ghost.png";
+
 
 function BusRouteDetails({ selectedRoute, busFraction }) {
   const selectedRouteRidership = ridershipData.filter(

src/components/Filter.js

@@ -1,4 +1,5 @@
 import React from "react";
+import RankingLegend from "./RankingLegend";
 
 const Filter = ({
   currentFilters,

src/components/RankingLegend.js

@@ -0,0 +1,34 @@
+import React from "react";
+
+const RankingLegend = () => {
+    return (
+        <div className="filter-key">
+            <h4>Map Key by Percentile</h4>
+            <ul>
+                <li>
+                    <span className="percentile-text">0-19%</span>
+                    <span className="color-key one"></span>
+                </li>
+                <li>
+                    <span className="percentile-text">20-39%</span>
+                    <span className="color-key two"></span>
+                </li>
+                <li>
+                    <span className="percentile-text">40-59%</span>
+                    <span className="color-key three"></span>
+                </li>
+                <li>
+                    <span className="percentile-text">60-79%</span>
+                    <span className="color-key four"></span>
+                </li>
+                <li>
+                    <span className="percentile-text">80-99%</span>
+                    <span className="color-key five"></span>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+
+export default RankingLegend;