Merge pull request #290 from bikehopper/elevation-graph

Add Elevation Graph Display
bikehopper · Jan 30, 2024 · e9412d4 · e9412d4
2 parents d0dc69e + 9f1f99e
commit e9412d4
Show file tree

Hide file tree

Showing 11 changed files with 12,806 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,8 @@
     "@babel/core": "^7.16.0",
     "@formatjs/intl-listformat": "^7.1.7",
     "@headlessui/react": "^1.7.14",
+    "@nivo/core": "^0.83.0",
+    "@nivo/line": "^0.83.0",
     "@placemarkio/geo-viewport": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.4",

diff --git a/src/components/BikehopperMap.jsx b/src/components/BikehopperMap.jsx
@@ -34,7 +34,12 @@ import {
 } from '../lib/layout';
 
 import './BikehopperMap.css';
-import { DEFAULT_BIKE_COLOR, DEFAULT_INACTIVE_COLOR } from '../lib/colors';
+import {
+  BIKE_LANE_COLOR,
+  CYCLE_TRACK_COLOR,
+  DEFAULT_BIKE_COLOR,
+  DEFAULT_INACTIVE_COLOR,
+} from '../lib/colors';
 
 const _isTouch = 'ontouchstart' in window;
 
@@ -736,9 +741,9 @@ const bikeColorStyle = [
       propIs('cycleway', 'track'),
       propIs('road_class', ...BIKEABLE_HIGHWAYS),
     ],
-    '#006600',
-    propIs('cycleway', 'lane', 'shared_lane'),
-    '#33cc33',
+    CYCLE_TRACK_COLOR,
+    propIs('cycleway', 'lane', 'shared lane'),
+    BIKE_LANE_COLOR,
     DEFAULT_BIKE_COLOR,
   ],
 ];

diff --git a/src/components/Itinerary.css b/src/components/Itinerary.css
@@ -57,5 +57,5 @@
 }
 
 .Itinerary_timeline {
-  margin: 32px 0;
+  margin: 0;
 }
diff --git a/src/components/Itinerary.jsx b/src/components/Itinerary.jsx
@@ -6,6 +6,7 @@ import Icon from './Icon';
 import ItineraryBikeLeg from './ItineraryBikeLeg';
 import ItineraryHeader from './ItineraryHeader';
 import ItineraryTransitLeg from './ItineraryTransitLeg';
+import ItineraryElevationProfile from './ItineraryElevationProfile';
 
 import { ReactComponent as NavLeftArrow } from 'iconoir/icons/nav-arrow-left.svg';
 import { ReactComponent as ArriveIcon } from 'iconoir/icons/triangle-flag.svg';
@@ -124,6 +125,9 @@ export default function Itinerary({
           </h3>
         </div>
       </div>
+      <div className="Itinerary_elevation">
+        <ItineraryElevationProfile route={route} />
+      </div>
       <div className="Itinerary_timeline">
         {renderedLegs}
         <ItineraryHeader icon={arriveIcon} iconColor="#ea526f">

diff --git a/src/components/ItineraryElevationProfile.css b/src/components/ItineraryElevationProfile.css