[WIP - do not merge] CBA Integration

.gitignore

@@ -27,3 +27,7 @@ env
 ## pyenv
 .python-version
 yarn-error.log
+
+
+# Pycharm/IntelliJ based IDE
+.idea

.nvmrc

@@ -1 +1 @@
-v8
+10

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [v3.5.0](https://github.com/vnopenroads/openroads-vn-analytics/compare/v3.4.0...v3.5.0)
+
+> 6 March 2022
+
+- Adds new Cost Benefit Analysis functionality as a major tab in the main interface [`#18`](https://github.com/vnopenroads/openroads-vn-analytics/pull/18)
+
+
 #### [v3.4.0](https://github.com/orma/openroads-vn-analytics/compare/v3.3.1...v3.4.0)
 
 > 27 March 2019

README.md

@@ -2,13 +2,13 @@
 
 This repo contains the static assets that constitute the OpenRoads Vietnam website. This repository is also where Development Seed stores all GitHub tickets and planning for the ORMA–VN project. The other repos in this project include:
 
-- [API](https://github.com/orma/openroads-vn-api/)
-- [various workers](https://github.com/orma/openroads-vn-tiler)
-- [iD editor](https://github.com/orma/openroads-vn-iD)
-- [admin boundary generation](https://github.com/orma/openroads-vn-boundaries)
-- [raster tile generation](https://github.com/orma/openroads-tilemap)
+- [API](https://github.com/vnopenroads/openroads-vn-api/)
+- [various workers](https://github.com/vnopenroads/openroads-vn-tiler)
+- [iD editor](https://github.com/vnopenroads/openroads-vn-iD)
+- [admin boundary generation](https://github.com/vnopenroads/openroads-vn-boundaries)
+- [raster tile generation](https://github.com/vnopenroads/openroads-vn-tilemap)
 
-ORMA–VN is a deployment of the ORMA platform, originally built by Development Seed and the World Bank for use in the Philippines; several more repos may be found in the `orma` GitHub organization, pertaining to that or other deployments.
+ORMA–VN is a deployment of the ORMA platform, originally built by Development Seed and the World Bank for use in the Philippines; several more repos may be found in the `vnopenroads` GitHub organization, pertaining to that or other deployments.
 
 ## Platform functionality
 
@@ -92,7 +92,7 @@ To add new words to translate:
 $ tx pull && tx push -s
 ```
 
-the reason to pull then push is so that translations on transifex aren't overwritten (the behavior of tx push) 
+the reason to pull then push is so that translations on transifex aren't overwritten (the behavior of tx push)
 
 3. pull the new changes using tx pull once translations are complete on transifex
 

app/assets/locales/source/en.json

@@ -11,6 +11,8 @@
     "Done": "Done",
     "Status": "Status",
     "Total": "Total",
+    "Valid": "Valid",
+    "Invalid": "Invalid",
     "Complete": "Complete",
     "% Complete": "% Complete",
     "Progress": "Progress",
@@ -228,5 +230,9 @@
     "CVTS": "CVTS",
     "Stats": "Stats",
     "Add new asset": "Add new asset",
-    "Meta": "Meta"
-}
+    "Meta": "Meta",
+    "CBA": "CBA",
+    "Config": "Config",
+    "Results": "Results",
+    "Analysis": "Analysis"
+}

app/assets/scripts/components/aa-field-map-legend.js

@@ -1,15 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import lineColors from '../utils/line-colors';
 import T from './t';
 
-const AAFieldMapLegend = React.createClass({
-  displayName: 'AAFieldMapLegend',
+export default class AAFieldMapLegend extends React.Component {
 
-  propTypes: {
-    sources: React.PropTypes.array
-  },
-
-  renderLegendElements: function () {
+  renderLegendElements() {
     // for each source as the source name
     // as well as a small svg path with the color
     // matching source in the lineColors config
@@ -25,9 +21,9 @@ const AAFieldMapLegend = React.createClass({
         </li>
       );
     });
-  },
+  }
 
-  render: function () {
+  render() {
     return (
       <div className='aa-map-legend'>
         <h3 className='aa-map-legend-title'><T>Field Data Sources</T></h3>
@@ -37,6 +33,8 @@ const AAFieldMapLegend = React.createClass({
       </div>
     );
   }
-});
+};
 
-module.exports = AAFieldMapLegend;
+AAFieldMapLegend.propTypes = {
+  sources: PropTypes.array
+};

app/assets/scripts/components/aa-field-map.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import mapboxgl from 'mapbox-gl';
 import {
   toPairs,
@@ -31,22 +32,14 @@ import {
 } from '../constants';
 
 
-var AAFieldMap = React.createClass({
-  displayName: 'AAFieldMap',
-  propTypes: {
-    status: React.PropTypes.string,
-    geoJSON: React.PropTypes.object,
-    vpromm: React.PropTypes.string,
-    provinceName: React.PropTypes.string,
-    navigateBack: React.PropTypes.func,
-    setMapPosition: React.PropTypes.func
-  },
+class AAFieldMap extends React.Component {
 
-  getInitialState: function () {
-    return { layerRendered: false };
-  },
+  constructor(props) {
+    super(props);
+    this.state = { layerRendered: false };
+  }
 
-  componentDidMount: function () {
+  componentDidMount() {
     mapboxgl.accessToken = config.mbToken;
 
     this.map = new mapboxgl.Map({
@@ -63,23 +56,23 @@ var AAFieldMap = React.createClass({
     if (this.props.geoJSON && !this.state.layerRendered) {
       this.renderLayer();
     }
-  },
+  }
 
 
-  componentWillReceiveProps: function ({ geoJSON, lng, lat, zoom }) {
+  UNSAFE_componentWillReceiveProps({ geoJSON, lng, lat, zoom }) {
     // TODO - rendering map could be less of a kludge w/ proper react/mapbox-gl bindings
     if (geoJSON && !this.state.layerRendered) {
       this.renderLayer();
     }
-  },
+  }
 
-  componentWillUnmount: function () {
+  componentWillUnmount() {
     const { lng, lat } = this.map.getCenter();
     const zoom = this.map.getZoom();
     this.props.setMapPosition(lng, lat, zoom);
-  },
+  }
 
-  renderLayer: function () {
+  renderLayer() {
     this.setState({ layerRendered: true });
 
     this.map.on('load', () => {
@@ -100,10 +93,10 @@ var AAFieldMap = React.createClass({
         }
       });
     });
-  },
+  }
 
 
-  render: function () {
+  render() {
     const { vpromm, provinceName, navigateBack } = this.props;
 
     return (
@@ -146,10 +139,19 @@ const reducer = (
   return state;
 };
 
+AAFieldMap.propTypes = {
+  status: PropTypes.string,
+  geoJSON: PropTypes.object,
+  vpromm: PropTypes.string,
+  provinceName: PropTypes.string,
+  navigateBack: PropTypes.func,
+  setMapPosition: PropTypes.func
+}
+
 module.exports = compose(
   withRouter,
   getContext({
-    language: React.PropTypes.string
+    language: PropTypes.string
   }),
   withProps(({ language, params: { vpromm } }) => {
     const [aaId, { name }] = find(
@@ -186,7 +188,7 @@ module.exports = compose(
     )
   }),
   lifecycle({
-    componentWillMount: function () {
+    UNSAFE_componentWillMount: function () {
       const { vpromm, geoJSON, status, fetchRoadGeometry } = this.props;
       if (!geoJSON && status !== 'pending' && status !== 'error') {
         fetchRoadGeometry(vpromm);

app/assets/scripts/components/admin-stats-tables.js

@@ -1,10 +1,11 @@
 'use strict';
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 import c from 'classnames';
 import _ from 'lodash';
 
-import T, {translate} from '../components/t';
+import T, { translate } from '../components/t';
 
 import { environment } from '../config';
 
@@ -35,14 +36,14 @@ export const statsColumns = [
   }
 ];
 
-export const StatsTableHeader = ({type}) => (
+export const StatsTableHeader = ({ type }) => (
   <thead>
     <tr>
       {type === 'province' && <th><T>Provinces</T></th>}
       {type === 'province-district' && <th><T>Province</T></th>}
       {type === 'province' && <th><T>Districts</T></th>}
       {(type === 'province-district' || type === 'district') && <th><T>District</T></th>}
-      {statsColumns.map(({key, label}) => <th key={key}><T>{label}</T></th>)}
+      {statsColumns.map(({ key, label }) => <th key={key}><T>{label}</T></th>)}
     </tr>
   </thead>
 );
@@ -55,11 +56,11 @@ if (environment !== 'production') {
 
 const getPrintValue = (v) => (v === 0 || v) && v !== ' ' ? v : 'n/a';
 
-export const StatsTableRow = ({type, data, lang, provinceId, provinceName, districtId, districtName}) => (
+export const StatsTableRow = ({ type, data, lang, provinceId, provinceName, districtId, districtName }) => (
   <tr>
     {type === 'province-district' && <th><Link to={`/${lang}/assets/${provinceId}`} title={translate(lang, 'View province page')}>{provinceName}</Link></th>}
     <th><Link to={`/${lang}/assets/${provinceId}/${districtId}`} title={translate(lang, 'View district page')}>{districtName}</Link></th>
-    {statsColumns.map(({key, accessor}) => <td key={key}>{getPrintValue(accessor(data))}</td>)}
+    {statsColumns.map(({ key, accessor }) => <td key={key}>{getPrintValue(accessor(data))}</td>)}
   </tr>
 );
 
@@ -75,12 +76,12 @@ if (environment !== 'production') {
   };
 }
 
-export const StatsTableExpandableTbody = ({lang, provinceId, provName, disctrictCount, isExpanded, onExpandToggle, data, children}) => (
-  <tbody className={c({'table-details--expanded': isExpanded, 'table-details--collapsed': !isExpanded})}>
+export const StatsTableExpandableTbody = ({ lang, provinceId, provName, disctrictCount, isExpanded, onExpandToggle, data, children }) => (
+  <tbody className={c({ 'table-details--expanded': isExpanded, 'table-details--collapsed': !isExpanded })}>
     <tr>
       <th><Link to={`/${lang}/assets/${provinceId}`} title={translate(lang, 'View province page')}>{provName}</Link></th>
       <td><a href='#' className='button-expand-collapse' title={translate(lang, 'Expand districts')} onClick={onExpandToggle}>{disctrictCount}</a></td>
-      {statsColumns.map(({key, accessor}) => <td key={key}>{getPrintValue(accessor(data))}</td>)}
+      {statsColumns.map(({ key, accessor }) => <td key={key}>{getPrintValue(accessor(data))}</td>)}
     </tr>
     <tr className={c('table-details')}>
       <td colSpan={6}>
@@ -103,11 +104,14 @@ if (environment !== 'production') {
   };
 }
 
-export const StatsBar = ({total, completed}) => (
-  <div className='stats-bar'>
-    <span className='stats-bar__complete' style={{width: Math.min((completed / total) || 0, 100) * 100 + '%'}}></span>
-  </div>
-);
+export const StatsBar = ({ total, completed }) => {
+  var perc = (total == 0) ? 0 : Math.min((completed / total) || 0, 1.0) * 100
+  return (
+    <div className='stats-bar'>
+      <span className='stats-bar__complete' style={{ width: perc + '%' }}></span>
+    </div>
+  )
+};
 
 if (environment !== 'production') {
   StatsBar.propTypes = {
@@ -116,14 +120,14 @@ if (environment !== 'production') {
   };
 }
 
-export const StatsBlock = ({title, total, completed, list}) => (
+export const StatsBlock = ({ title, total, completed, list }) => (
   <div className='stats-block'>
     <h3>{title}</h3>
     <figure>
       <StatsBar total={total} completed={completed} />
       <figcaption>
         <ul className='stats-list'>
-          {list.map(({label, value}) => (
+          {list.map(({ label, value }) => (
             <li key={label} className='stats-list__item'><span className='value'>{value}</span><small>{label}</small></li>
           ))}
         </ul>