1define(['exports', 'react', 'actions/MapActions', 'stores/MapStore', 'utils/Utilities', 'js/config/config', 'chartjs', 'lodash', 'draggable'], function (exports, _react, _actionsMapActions, _storesMapStore, _utilsUtilities, _jsConfigConfig, _chartjs, _lodash, _draggable) { 2 'use strict'; 3 4 Object.defineProperty(exports, '__esModule', { 5 value: true 6 }); 7 8 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 9 10 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 11 12 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; 13 14 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 15 16 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } 17 18 function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 19 20 var _React = _interopRequireDefault(_react); 21 22 var _config = _interopRequireDefault(_jsConfigConfig); 23 24 var _Chart = _interopRequireDefault(_chartjs); 25 26 var _2 = _interopRequireDefault(_lodash); 27 28 var _Draggable = _interopRequireDefault(_draggable); 29 30 var ChartComponent = (function (_React$Component) { 31 _inherits(ChartComponent, _React$Component); 32 33 function ChartComponent() { 34 _classCallCheck(this, ChartComponent); 35 36 _get(Object.getPrototypeOf(ChartComponent.prototype), 'constructor', this).call(this); 37 this.state = { 38 chart: {} 39 }; 40 } 41 42 _createClass(ChartComponent, [{ 43 key: 'componentDidUpdate', 44 value: function componentDidUpdate(prevProps) { 45 if (this.props.transect !== prevProps.transect) { 46 this.updateChart(); 47 } else if (this.props.reverseTransect !== prevProps.reverseTransect) { 48 if (this.props.reverseTransect) { 49 this.reverseChart(); 50 } else { 51 this.updateChart(); 52 } 53 } else if (this.props.measurement !== prevProps.measurement) { 54 this.state.chart.data.datasets = this.state.chart.data.datasets; 55 this.state.chart.update(); 56 } 57 } 58 }, { 59 key: 'updateChart', 60 value: function updateChart() { 61 var _this = this; 62 63 var chartData = []; 64 _2['default'].forEach(this.props.transect.elevationData.elevations, function (elevation, itt) { 65 chartData.push({ 66 x: _this.props.transect.elevationData.intervals[itt], 67 y: elevation 68 }); 69 }); 70 this.state.chart.data.datasets[0].data = chartData; 71 72 // const navdData = []; 73 // _.forEach(this.props.transect.elevationData.navdElevations, (navd, itt) => { 74 // navdData.push({ 75 // x: this.props.transect.elevationData.intervals[itt], 76 // y: navd 77 // }); 78 // }); 79 // this.state.chart.data.datasets[1].data = navdData; 80
81 this.state.chart.update(); 82 } 83 }, { 84 key: 'reverseChart', 85 value: function reverseChart() { 86 87 var elevationData = this.props.transect.elevationData.intervals.reverse(); 88 89 var chartData = []; 90 _2['default'].forEach(this.props.transect.elevationData.elevations, function (elevation, itt) { 91 chartData.push({ 92 y: elevation, 93 x: elevationData[itt] 94 }); 95 }); 96 this.state.chart.data.datasets[0].data = chartData; 97 98 // const navdData = []; 99 // _.forEach(this.props.transect.elevationData.navdElevations, (navd, itt) => { 100 // navdData.push({ 101 // x: this.props.transect.elevationData.intervals[itt], 102 // y: navd 103 // }); 104 // }); 105 // this.state.chart.data.datasets[1].data = navdData; 106 this.state.chart.update(); 107 } 108 }, { 109 key: 'componentDidMount', 110 value: function componentDidMount() { 111 var _this2 = this; 112 113 var ctx = document.getElementById('transect-canvas'); 114 115 var chartData = []; 116 _2['default'].forEach(this.props.transect.elevationData.elevations, function (elevation, itt) { 117 chartData.push({ 118 x: _this2.props.transect.elevationData.intervals[itt], 119 y: elevation 120 }); 121 }); 122 123 // const navdData = []; 124 // _.forEach(this.props.transect.elevationData.navdElevations, (navd, itt) => { 125 // navdData.push({ 126 // x: this.props.transect.elevationData.intervals[itt], 127 // y: navd 128 // }); 129 // }); 130 131 var chartOptions = { 132 scales: { 133 xAxes: [{ 134 type: 'linear', 135 position: 'bottom', 136 ticks: { 137 reverse: false 138 }, 139 scaleLabel: { 140 display: true, 141 labelString: 'Transect Distance', 142 fontFamily: 'Roboto', 143 fontColor: '#000', 144 fontSize: 16 145 } 146 }], 147 yAxes: [{ 148 type: 'linear', 149 position: 'left', 150 scaleLabel: { 151 display: true, 152 labelString: 'Elevation', 153 fontFamily: 'Roboto', 154 fontColor: '#000', 155 fontSize: 16 156 } 157 }] 158 }, 159 tooltips: { 160 backgroundColor: 'rgba(1,87,155,.8)', 161 titleFontFamily: 'Roboto', 162 titleFontSize: 12, 163 titleFontColor: '#fff', 164 bodyFontFamily: 'Roboto', 165 bodyFontSize: 12, 166 bodyFontColor: '#fff', 167 callbacks: { 168 label: function label(items, data) { 169 return 'Distance: ' + items.xLabel + (_this2.props.measurement === 'imperial' ? ' (ft.)' : ' (m)'); 170 }, 171 title: function title(items, data) { 172 var datasetLabel = items[0].datasetIndex === 0 ? 'Elevation MHW: ' : 'Elevation NAVD88: '; 173 return datasetLabel + items[0].yLabel + (_this2.props.measurement === 'imperial' ? ' (ft.)' : ' (m)'); 174 } 175 } 176 }, 177 title: { 178 display: false 179 }, 180 legend: { 181 display: false 182 }, 183 elements: { 184 point: { 185 radius: 2, 186 borderWidth: 0, 187 hoverRadius: 1 188 } 189 } 190 }; 191 192 chartOptions.scales.xAxes[0].scaleLabel.labelString = this.props.measurement === 'imperial' ? 'Transect Distance (ft.)' : 'Transect Distance (m)'; 193 chartOptions.scales.yAxes[0].scaleLabel.labelString = this.props.measurement === 'imperial' ? 'Elevation MHW (ft.)' : 'Elevation MHW (m)'; 194 195 var myChart = new _Chart['default'](ctx, { 196 type: 'line', 197 data: { 198 datasets: [{ 199 label: 'Elevation', 200 data: chartData,
201 pointBackgroundColor: 'rgb(' + this.props.transect.color.join(',') + ')', 202 backgroundColor: 'rgba(' + this.props.transect.color.join(',') + ',' + .25 + ')', 203 borderWidth: 0.5, 204 borderColor: 'rgba(' + this.props.transect.color.join(',') + ',' + .5 + ')' 205 }] 206 // }, { 207 // label: 'NavD88', 208 // data: navdData, 209 // pointBackgroundColor: 'red', 210 // backgroundColor: 'rgba(' + this.props.transect.color.join(',') + ',' + .25 + ')', 211 // borderWidth: 0.5, 212 // borderColor: 'red', 213 // }] 214 }, 215 options: _extends({}, chartOptions) 216 }); 217 this.setState({ chart: myChart }); 218 } 219 }, { 220 key: 'render', 221 value: function render() { 222 return _React['default'].createElement( 223 'div', 224 { id: 'canvas-container', className: 'popup-body padding welcome-body' }, 225 _React['default'].createElement('canvas', { id: 'transect-canvas', height: '300' }) 226 ); 227 } 228 }]); 229 230 return ChartComponent; 231 })(_React['default'].Component); 232 233 var SummaryModal = (function (_React$Component2) { 234 _inherits(SummaryModal, _React$Component2); 235 236 function SummaryModal() { 237 _classCallCheck(this, SummaryModal); 238 239 _get(Object.getPrototypeOf(SummaryModal.prototype), 'constructor', this).call(this); 240 _storesMapStore.mapStore.listen(this.storeUpdated.bind(this)); 241 this.state = _extends({}, _storesMapStore.mapStore.getState(), { 242 showTable: false, 243 reverseTransect: false 244 }); 245 } 246 247 _createClass(SummaryModal, [{ 248 key: 'shouldComponentUpdate', 249 value: function shouldComponentUpdate(nextProps, nextState) { 250 if (typeof nextState === 'object') { 251 return true; 252 } else { 253 return false; 254 } 255 } 256 }, { 257 key: 'storeUpdated', 258 value: function storeUpdated() { 259 this.setState(_storesMapStore.mapStore.getState()); 260 } 261 }, { 262 key: 'closeSummary', 263 value: function closeSummary() { 264 _actionsMapActions.mapActions.toggleSummary(false); 265 } 266 }, { 267 key: 'toggleTable', 268 value: function toggleTable() { 269 this.setState({ showTable: !this.state.showTable }); 270 } 271 }, { 272 key: 'reverseProfile', 273 value: function reverseProfile() { 274 this.setState({ reverseTransect: !this.state.reverseTransect }); 275 } 276 }, { 277 key: 'renderTable', 278 value: function renderTable(elevationData) { 279 if (elevationData) { 280 var _ret = (function () { 281 var longitudes = elevationData.longitudes; 282 var latitudes = elevationData.latitudes; 283 var intervals = elevationData.intervals; 284 var elevations = elevationData.elevations; 285 286 intervals.sort(function (a, b) { 287 return a - b; 288 }); 289 return { 290 v: intervals.map(function (interval, i) { 291 return _React['default'].createElement(Row, { 292 key: i, 293 interval: intervals[i], 294 latitude: latitudes[i], 295 longitude: longitudes[i], 296 elevation: elevations[i] 297 }); 298 }) 299 }; 300 })(); 301 302 if (typeof _ret === 'object') return _ret.v; 303 } 304 } 305 }, { 306 key: 'exportTable', 307 value: function exportTable() { 308 (0, _utilsUtilities.downloadCSV)(this.state.summaryTransect, this.state.measurement); 309 } 310 }, { 311 key: 'render', 312 value: function render() { 313 314 if (this.state.summaryTransect === null) { 315 return _React['default'].createElement('div', { id: 'no-summary-transect' }); 316 } 317 318 var title = this.state.summaryTransect.name + ' Transect'; 319 var transectDistanceLabel = this.state.measurement === 'imperial' ? 'Transect Distance (ft)' : 'Transect Distance (m)'; 320 var elevationUnitLabel = this.state.measurement === 'imperial' ? 'Elevation MHW (ft.)' : 'Elevation MHW (m)'; 321 var navdElevationUnitLabel = this.state.measurement === 'imperial' ? 'Elevation NAVD 88 (ft.)' : 'Elevation NAVD 88 (m)'; 322 var viewText = this.state.showTable ? 'Chart View' : 'Table View'; 323 var chart = this.state.showTable || this.state.summaryTransect === null || this.state.showSummary === false ? null : _React['default'].createElement(ChartComponent, { transect: this.state.summaryTransect, reverseTransect: this.state.reverseTransect, measurement: this.state.measurement }); 324 325 return _React['default'].createElement( 326 _Draggable['default'], 327 { 328 axis: 'both', 329 handle: '.welcome-header', 330 bounds: '#map' }, 331 _React['default'].createElement( 332 'div', 333 { id: 'summaryPopup', className: 'details-popup ' + (this.state.showSummary ? '' : 'hidden') }, 334 _React['default'].createElement( 335 'div', 336 { className: 'popup-header blue darken-3 welcome-header' }, 337 _React['default'].createElement( 338 'span', 339 null, 340 title 341 ), 342 _React['default'].createElement('span', { className: 'details-popup-close-icon', onClick: this.closeSummary.bind(this) }) 343 ), 344 _React['default'].createElement( 345 'div', 346 { className: 'flex flex-row summary-content-header' }, 347 _React['default'].createElement( 348 'a', 349 { className: 'waves-effect waves-light blue lighten-1 btn', onClick: this.toggleTable.bind(this) }, 350 viewText 351 ), 352 _React['default'].createElement( 353 'a', 354 { className: 'waves-effect waves-light blue lighten-1 btn' + (this.state.showTable ? ' disabled' : ''), onClick: this.reverseProfile.bind(this) }, 355 'Reverse Profile' 356 ) 357 ), 358 chart, 359 _React['default'].createElement( 360 'div', 361 { id: 'summary-transect-table', className: 'white' + (this.state.showTable ? '' : ' hidden') }, 362 _React['default'].createElement( 363 'table', 364 { className: 'centered highlight' }, 365 _React['default'].createElement( 366 'thead', 367 null, 368 _React['default'].createElement( 369 'tr', 370 null, 371 _React['default'].createElement( 372 'th', 373 null, 374 'Latitude' 375 ), 376 _React['default'].createElement( 377 'th', 378 null, 379 'Longitude' 380 ), 381 _React['default'].createElement( 382 'th', 383 null, 384 transectDistanceLabel 385 ), 386 _React['default'].createElement( 387 'th', 388 null, 389 elevationUnitLabel 390 ) 391 ) 392 ), 393 _React['default'].createElement( 394 'tbody', 395 null, 396 this.renderTable(this.state.summaryTransect.elevationData) 397 ) 398 ) 399 ), 400 _React['default'].createElement( 401 'div', 402 { className: 'flex flex-row summary-content-footer' }, 403 _React['default'].createElement( 404 'a', 405 { className: 'waves-effect waves-light blue lighten-1 btn', onClick: this.exportTable.bind(this) }, 406 'Export Table' 407 ) 408 ) 409 ) 410 ); 411 } 412 }]); 413
414 return SummaryModal; 415 })(_React['default'].Component); 416 417 exports.SummaryModal = SummaryModal; 418 419 var Row = (function (_React$Component3) { 420 _inherits(Row, _React$Component3); 421 422 function Row() { 423 _classCallCheck(this, Row); 424 425 _get(Object.getPrototypeOf(Row.prototype), 'constructor', this).apply(this, arguments); 426 } 427 428 _createClass(Row, [{ 429 key: 'render', 430 value: function render() { 431 return _React['default'].createElement( 432 'tr', 433 null, 434 _React['default'].createElement( 435 'td', 436 null, 437 this.props.latitude 438 ), 439 _React['default'].createElement( 440 'td', 441 null, 442 this.props.longitude 443 ), 444 _React['default'].createElement( 445 'td', 446 null, 447 this.props.interval 448 ), 449 _React['default'].createElement( 450 'td', 451 null, 452 this.props.elevation 453 ) 454 ); 455 } 456 }]); 457 458 return Row; 459 })(_React['default'].Component); 460}); 461/* <th>{navdElevationUnitLabel}</th> */ /* <td>{ this.props.navdElevation }</td> */ 462//# sourceMappingURL=SummaryModal.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.