Next release

lib/actions/map.js

@@ -109,7 +109,7 @@ export function switchLocations () {
   }
 }
 
-export const showLegDiagram = createAction('SHOW_LEG_DIAGRAM')
+export const setLegDiagram = createAction('SET_LEG_DIAGRAM')
 
 export const setElevationPoint = createAction('SET_ELEVATION_POINT')
 

lib/components/map/elevation-point-marker.js

@@ -13,7 +13,6 @@ import { CircleMarker } from 'react-leaflet'
 class ElevationPointMarker extends Component {
   render () {
     const { diagramLeg, elevationPoint, showElevationProfile } = this.props
-
     // Compute the elevation point marker, if activeLeg and elevation profile is enabled.
     let elevationPointMarker = null
     if (showElevationProfile && diagramLeg && elevationPoint) {

lib/components/map/leg-diagram.js

@@ -6,7 +6,7 @@ import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 import ReactResizeDetector from 'react-resize-detector'
 
-import { setElevationPoint, showLegDiagram } from '../../actions/map'
+import { setElevationPoint, setLegDiagram } from '../../actions/map'
 
 const { getElevationProfile, getTextWidth, legElevationAtDistance } = coreUtils.itinerary
 
@@ -23,7 +23,7 @@ const METERS_TO_FEET = 3.28084
 class LegDiagram extends Component {
   static propTypes = {
     elevationPoint: PropTypes.number,
-    showLegDiagram: PropTypes.func,
+    setLegDiagram: PropTypes.func,
     setElevationPoint: PropTypes.func
   }
 
@@ -67,7 +67,7 @@ class LegDiagram extends Component {
   }
 
   _onCloseButtonClick = () => {
-    this.props.showLegDiagram(null)
+    this.props.setLegDiagram(null)
     this.props.setElevationPoint(null)
   }
 
@@ -383,7 +383,7 @@ const mapStateToProps = (state, ownProps) => {
 }
 
 const mapDispatchToProps = {
-  showLegDiagram,
+  setLegDiagram,
   setElevationPoint
 }
 

lib/components/narrative/leg-diagram-preview.js

@@ -1,105 +1,7 @@
-import coreUtils from '@opentripplanner/core-utils'
-import PropTypes from 'prop-types'
-import React, {Component} from 'react'
+import LegDiagramPreviewLayout from '@opentripplanner/itinerary-body/lib/AccessLegBody/leg-diagram-preview'
 import { connect } from 'react-redux'
-import ReactResizeDetector from 'react-resize-detector'
 
-import { showLegDiagram } from '../../actions/map'
-
-const METERS_TO_FEET = 3.28084
-
-class LegDiagramPreview extends Component {
-  static propTypes = {
-    leg: PropTypes.object
-  }
-
-  constructor (props) {
-    super(props)
-    this.state = { width: null }
-  }
-
-  _onResize = (width, height) => {
-    if (width > 0) {
-      this.setState({ width })
-    }
-  }
-
-  /**
-   * Determine if the diagram currently visible is for this leg (based on start
-   * time).
-   */
-  _isActive = () => {
-    const { diagramVisible, leg } = this.props
-    return diagramVisible && diagramVisible.startTime === leg.startTime
-  }
-
-  _onExpandClick = () => {
-    const { leg, showLegDiagram } = this.props
-    if (this._isActive()) showLegDiagram(null)
-    else showLegDiagram(leg)
-  }
-
-  /** Round elevation to whole number and add symbol. */
-  _formatElevation = (elev) => Math.round(elev) + `'`
-
-  render () {
-    const { leg, showElevationProfile } = this.props
-    if (!showElevationProfile) return null
-    const profile = coreUtils.itinerary.getElevationProfile(leg.steps)
-    // Don't show for very short legs
-    if (leg.distance < 500 || leg.mode === 'CAR') return null
-
-    return (
-      <div className={`leg-diagram-preview ${this._isActive() ? 'on' : ''}`}>
-        {/* The preview elevation SVG */}
-        <div
-          className='diagram'
-          tabIndex='0'
-          title='Toggle elevation chart'
-          role='button'
-          onClick={this._onExpandClick}>
-          <div className='diagram-title text-center'>
-            Elevation chart{' '}
-            <span style={{ fontSize: 'xx-small', color: 'red' }}>↑{this._formatElevation(profile.gain * METERS_TO_FEET)}{'  '}</span>
-            <span style={{ fontSize: 'xx-small', color: 'green' }}>↓{this._formatElevation(-profile.loss * METERS_TO_FEET)}</span>
-          </div>
-          {profile.points.length > 0
-            ? generateSvg(profile, this.state.width)
-            : 'No elevation data available.'
-          }
-          <ReactResizeDetector handleWidth onResize={this._onResize} />
-        </div>
-      </div>
-    )
-  }
-}
-
-function generateSvg (profile, width) {
-  const height = 30
-  let { minElev, maxElev, points: ptArr, traversed } = profile
-  // Pad the min-max range by 25m on either side
-  minElev -= 25
-  maxElev += 25
-
-  // Transform the point array and store it as an SVG-ready string
-  const pts = ptArr.map(pt => {
-    const x = (pt[0] / traversed) * width
-    const y = height - height * (pt[1] - minElev) / (maxElev - minElev)
-    return x + ',' + y
-  }).join(' ')
-
-  // Render the SVG
-  return (
-    <svg height={height} width={width}>
-      <polyline
-        points={pts}
-        fill='none'
-        stroke='black'
-        strokeWidth={1.3}
-      />
-    </svg>
-  )
-}
+import { setLegDiagram } from '../../actions/map'
 
 // Connect to the redux store
 
@@ -111,7 +13,7 @@ const mapStateToProps = (state, ownProps) => {
 }
 
 const mapDispatchToProps = {
-  showLegDiagram
+  setLegDiagram
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(LegDiagramPreview)
+export default connect(mapStateToProps, mapDispatchToProps)(LegDiagramPreviewLayout)

lib/components/narrative/line-itin/connected-itinerary-body.js

@@ -9,7 +9,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
 
-import { showLegDiagram } from '../../../actions/map'
+import { setLegDiagram } from '../../../actions/map'
 import { setViewedTrip } from '../../../actions/ui'
 import TransitLegSubheader from './connected-transit-leg-subheader'
 import RealtimeTimeColumn from './realtime-time-column'
@@ -42,7 +42,8 @@ class ConnectedItineraryBody extends Component {
       LegIcon,
       setActiveLeg,
       setViewedTrip,
-      showLegDiagram,
+      showElevationProfile,
+      setLegDiagram,
       timeOptions
     } = this.props
 
@@ -57,10 +58,10 @@ class ConnectedItineraryBody extends Component {
           PlaceName={PlaceName}
           RouteDescription={RouteDescription}
           setActiveLeg={setActiveLeg}
-          setLegDiagram={showLegDiagram}
+          setLegDiagram={setLegDiagram}
           setViewedTrip={setViewedTrip}
           showAgencyInfo
-          showElevationProfile
+          showElevationProfile={showElevationProfile}
           showLegIcon
           showMapButtonColumn={false}
           showRouteFares={config.itinerary && config.itinerary.showRouteFares}
@@ -91,7 +92,7 @@ const mapStateToProps = (state, ownProps) => {
 
 const mapDispatchToProps = {
   setViewedTrip,
-  showLegDiagram
+  setLegDiagram
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(

lib/index.js

@@ -14,7 +14,6 @@ import OsmBaseLayer from './components/map/osm-base-layer'
 import TileOverlay from './components/map/tile-overlay'
 
 import ItineraryCarousel from './components/narrative/itinerary-carousel'
-import LegDiagramPreview from './components/narrative/leg-diagram-preview'
 import NarrativeItineraries from './components/narrative/narrative-itineraries'
 import NarrativeItinerary from './components/narrative/narrative-itinerary'
 import NarrativeRoutingResults from './components/narrative/narrative-routing-results'
@@ -71,7 +70,6 @@ export {
   TileOverlay,
 
   // narrative components
-  LegDiagramPreview,
   LineItinerary,
   NarrativeItineraries,
   NarrativeItinerary,

lib/reducers/create-otp-reducer.js

@@ -576,7 +576,7 @@ function createOtpReducer (config, initialQuery) {
             }
           }
         })
-      case 'SHOW_LEG_DIAGRAM':
+      case 'SET_LEG_DIAGRAM':
         return update(state, {
           ui: {
             diagramLeg: { $set: action.payload }

package.json

@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/opentripplanner/otp-react-redux#readme",
   "dependencies": {
-    "@opentripplanner/base-map": "^1.0.1",
+    "@opentripplanner/base-map": "^1.0.2",
     "@opentripplanner/core-utils": "^1.2.1",
     "@opentripplanner/endpoints-overlay": "^1.0.1",
     "@opentripplanner/from-to-location-picker": "^1.0.1",

yarn.lock

@@ -1253,12 +1253,12 @@
     universal-user-agent "^3.0.0"
     url-template "^2.0.8"
 
-"@opentripplanner/base-map@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/base-map/-/base-map-1.0.1.tgz#cef7f9fc181d1cb414aa3f11cddef3a8040ac3fa"
-  integrity sha512-/5versYgxFzaIEekvknmdzAc7ssTTLGaI8Ag+yZefEcio+M+JQNrRKIHfsj0d6x6hfodnTSG+fzaJ/GfklTFAA==
+"@opentripplanner/base-map@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/base-map/-/base-map-1.0.2.tgz#039dfdb11116ebb5d330a859f5ee33cfa6b8d768"
+  integrity sha512-QkNDJrZqGgiafO8fxJhnOFPWcpUIsDszlBZIh8q0B3ztFRPZeQA8cFX/c429PhXXmCbpYx5JkerhnxMKz140XA==
   dependencies:
-    "@opentripplanner/core-utils" "^1.2.0"
+    "@opentripplanner/core-utils" "^2.1.0"
     prop-types "^15.7.2"
 
 "@opentripplanner/core-utils@^1.2.0", "@opentripplanner/core-utils@^1.2.1":