Merge pull request #452 from devinit/development

v3.4.0

Author: edwinmp

.storybook/config.js

@@ -1,5 +1,5 @@
 import { configure } from '@storybook/react';
-import Router from 'next/router'
+import Router from 'next/router';
 import '../static/semantic.min.css';
 import '../static/di-charts.min.css';
 import '../static/mapbox-gl.min.css';

.storybook/webpack.config.js

@@ -9,7 +9,7 @@ const SRC_PATH = path.join(__dirname, '../src');
 
 // load the default config generator.
 const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
-const API = process.env.API || packageJSON.config.API;
+const API = process.env.NODE_ENV === 'development' ? packageJSON.config.API_DEV : packageJSON.config.API;
 
 const newRules = [
   {

.travis.yml

@@ -4,6 +4,11 @@ node_js:
 install:
 - npm install --ignore-scripts
 - npm install -g codecov
+jobs:
+  include:
+    - # for branches not master, set node environment to development
+      if: branch != master
+      env: NODE_ENV=development
 script:
 - npm run emit
 - npm run lint
@@ -18,8 +23,7 @@ cache:
   - ~/.npm
 deploy:
   provider: releases
-  api_key:
-    secure: bszwAE9uRsIRqH080Ca7PWi+CH0VzLxkFVA/7ERcVFNau8mhMkhjR6oy/7zSXFtNIIKuVnQbJGfL7dTHpDB48c9Qp6TSJz4fnl2V9tuPfQzq5ytdtm51aXsP7BwWRwDfQ9RUgnP0O7vCYs4CbgJFmsJSHBlSkYZDpTQGpzgN6vIIlNtHvlihD93UivTnyiZra09vchzeAMjbc6rVUhwV9jdWDPGWM9khvl3pRYt2dgzRZWhS5SwO9kK3Y/a/AOAlXL7/lZGHA1J0b4sqMnZHNhEG/rL44h6LQuyrJD7lrLUhwlUKVjDksXLP2p6uAQvQWrRxsDa7nsThjP8SWV3pe4o1Hj/6DIhgd7vmVVWgyvVEJlxrqW43yfwp7BfJ/RL+qnFyYCIQ6v8hxMlNEBTd+wNJSvyaI9oNZbmyAJ6XbGPznX9TNdhqFgifZSH57s1iiXXLyo5q/70T2a5qoVPgNK8l/tzy2Kh0ohgnvcg4J5L0/XDVGIXmjCKsf9PDZZMKOMfvcEr369zKEzlGp5ZOGN0zXfQHm44Di1+Wgyd1IlZ0wBGycbYa56Ab5xtfVU4ZrzWAXJMrlRrHvTNnnlUJRCGxsTnKEcNiue3hgXu4rgDJzZ+QSCWTr/mWfJsmejl3iMExERSbg1RwcYCafbNpERNADILmHQfJjJgKQPk2duk=
+  api_key: $GITHUB_KEY
   file_glob: true
   file: 'build.zip'
   skip_cleanup: true

README.md

@@ -11,6 +11,11 @@ Installation
 
 ```
 
+### Scripts/Commands
+
+- `npm run pull` fetches updates from the CMS and syncs the appropriate project files. Be sure to specify the correct API URL, otherwise
+you may pull incorrect data.
+
 TODO:
 _________
 
@@ -54,4 +59,3 @@ The thing with installing with yarn, is that the charts library will stop workin
 may have to do with the way npm installs dependencies vs yarn.
 
 - For some reason cypress tests fail on travis. Temporary measure is to have them run on the git push pre hook.
-

next.config.js

@@ -4,8 +4,8 @@ const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const Webpack = require('webpack');
 const withTypescript = require('@zeit/next-typescript');
 const packageJSON = require('./package.json');
-const { ANALYZE } = process.env;
-const API = process.env.API || packageJSON.config.API;
+const { ANALYZE, NODE_ENV } = process.env;
+const API = NODE_ENV === 'development' ? packageJSON.config.API_DEV : packageJSON.config.API;
 
 module.exports = withTypescript({
   webpack(config, options) {

package-lock.json

@@ -1,8 +1,9 @@
 {
   "name": "@devinit/dh-app",
-  "version": "3.3.9",
+  "version": "3.4.0",
   "config": {
-    "API": "http://212.111.41.68:9090/graphql",
+    "API": "http://212.111.41.68:3000/graphql",
+    "API_DEV": "http://212.111.41.68:9090/graphql",
     "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD": true,
     "OLD_DATAHUB_URL": "http://212.111.41.68:8888"
   },
@@ -15,7 +16,7 @@
   "scripts": {
     "emit": "tsc",
     "test": "jest src/components/pageData/pageData.test.ts",
-    "coverage": "BABEL_ENV=test jest -u && codecov",
+    "coverage": "BABEL_ENV=test NODE_ENV=test jest -u && codecov",
     "cypress:test": "start-server-and-test start http://localhost:8080 cypress:run",
     "cypress:run": "cypress run --record --key 13a9c637-1ce1-4f5f-8ebf-08896968b64f",
     "cypress:open": "npm run build:next && concurrently \"npm run start\" \"cypress open\"",

package.json

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { rehydrate } from 'glamor';
 import withData from '../src/components/WithData';
-import {StateToShare} from '../src/components/molecules/ChartShare';
+import { StateToShare } from '../src/components/molecules/ChartShare';
 import App from '../src/components/templates/RegionalProfile';
 
 interface Props  {
@@ -19,9 +19,10 @@ if (typeof window !== 'undefined') {
 
 export default withData((props: Props) =>
   (<App
-    id={props.url.query.id}
-    state={props.url.query.state}
+    id={ props.url.query.id }
+    state={ props.url.query.state }
     currencyCode="KES"
     currencyUSD="constant 2015 USD"
     country="kenya"
+    supportLocalCurrencyOnly={ false }
   />));

pages/kenya.tsx

@@ -24,5 +24,6 @@ export default withData((props: Props) =>
     currencyCode="UGX"
     currencyUSD="constant 2015 USD"
     country="uganda"
+    supportLocalCurrencyOnly={ false }
   />
 );

pages/uganda.tsx

@@ -4,7 +4,7 @@
 import * as fetch from 'isomorphic-fetch';
 import * as fs from 'fs-extra';
 const packageJSON = require('../../package.json');
-const API = process.env.API || packageJSON.config.API;
+const API = process.env.NODE_ENV === 'development' ? packageJSON.config.API_DEV : packageJSON.config.API;
 
 const main = (): void => {
   fetch(API, {

src/apollo/fragment.ts

@@ -28,21 +28,41 @@ class Chart extends React.Component<Props> {
   }
 
   componentDidMount() {
+    this.drawChart(this.props);
+  }
+
+  componentWillUpdate(props: Props) {
+    if (this.chart) {
+      if (props.data && props.data.length) {
+        if (props.config && props.config.type === 'partition' && props.config.labeling) {
+          this.chart.setLabeling(props.config.labeling);
+        }
+        this.chart.update(props.data);
+      } else {
+        this.chart.destroy();
+        this.chart = undefined;
+        this.removeElementChildren();
+      }
+    } else if (props.data && props.data.length) {
+      this.drawChart(props);
+    }
+  }
+
+  drawChart(props: Props) {
     const element = this.element;
-    const data = this.props.data;
-    this.config = this.props.config || visboxConfigs;
+    const data = props.data;
+    this.config = props.config || visboxConfigs;
     draw({ element, data, config: this.config }).then(chart => {
       this.chart = chart;
-      this.chart.onClick(this.props.onClick);
+      this.chart.onClick(props.onClick);
     });
   }
 
-  componentWillUpdate(props: Props) {
-    if (this.chart) {
-      if (props.config && props.config.type === 'partition' && props.config.labeling) {
-        this.chart.setLabeling(props.config.labeling);
+  private removeElementChildren() {
+    if (this.element && this.element.hasChildNodes()) {
+      while (this.element.firstChild) {
+        this.element.removeChild(this.element.firstChild);
       }
-      this.chart.update(props.data);
     }
   }
 }

src/components/atoms/TreeChart/index.tsx

@@ -250,6 +250,7 @@ export interface GovernmentFinanceQuery {
     // such as constant 2015 USD for tree map
     currencyCode: string | null,
     currencyUSD: string | null,
+    supportLocalCurrencyOnly: boolean,
     // use resourcesRecipient sql
     expenditure:  Array< {
       uid: string,
@@ -324,6 +325,7 @@ export interface LGvmntFinanceQuery {
     startYear: number,
     currencyCode: string,
     currencyUSD: string,
+    supportLocalCurrencyOnly: boolean,
     expenditure:  Array< {
       uid: string,
       year: number,

src/components/gql-types.ts

@@ -1,71 +1,74 @@
 import * as React from 'react';
-import { P, Div } from 'glamorous';
+import { Div, P } from 'glamorous';
 import { SectionHeader } from '../../atoms/Header';
 import { red, white } from '../../theme/semantic';
-import { Container, Grid, Header, Icon, Button } from 'semantic-ui-react';
+import { Button, Container, Grid, Header, Icon } from 'semantic-ui-react';
 import { DarkBg, LightBg } from '../../atoms/Container';
 import Observer from 'react-intersection-observer';
-import {router as routerx} from '../../../utils';
-import {SingletonRouter} from 'next/router';
+import { router as routerx } from '../../../utils';
+import { SingletonRouter } from 'next/router';
 import pageData from '../../pageData/data';
 
 const goToMethodologyPage = (router?: SingletonRouter) => () =>
   router ? router.push('/methodology') : routerx.push('/methodology');
 
-if ((process as any).browser) require('intersection-observer');
+if ((process as any).browser) {
+  require('intersection-observer');
+}
 
-export default ({router}: {router?: SingletonRouter}) =>
+export default ({ router }: {router?: SingletonRouter}) =>
     <section id="about">
       <DarkBg>
-        <SectionHeader color={red} fontColor={white}>
+        <SectionHeader color={ red } fontColor={ white }>
           DATA VISUALISATIONS
         </SectionHeader>
       </DarkBg>
       <Container>
         <Grid>
           <Grid.Row centered>
-            <Div paddingTop={'2em'} paddingBottom={'2em'}>
+            <Div paddingTop={ '2em' } paddingBottom={ '2em' }>
               <SectionHeader>
                 ABOUT THE <span>DEVELOPMENT DATA HUB</span>
               </SectionHeader>
             </Div>
           </Grid.Row>
           <Grid.Row centered>
             <Grid.Column width="8">
-              <Header as="h3">{pageData.about[0].title}</Header>
+              <Header as="h3">{ pageData.about[0].title }</Header>
               <p>
-                {pageData.about[1].narrative}
+                { pageData.about[1].narrative }
               </p>
             </Grid.Column>
             <Grid.Column width="8">
               <Header as="h3">How does it work?</Header>
               <p>
-                {pageData.about[2].narrative}
+                { pageData.about[2].narrative }
               </p>
             </Grid.Column>
           </Grid.Row>
           <Grid.Row centered>
             <Grid.Column width="12">
                 <Observer>
-                  <iframe
-                    src="http://www.youtube.com/embed/2G1Gg2opKPg?rel=0&amp;showinfo=0"
-                    title="About Datahub"
-                    frameBorder="0"
-                    height="585"
-                    style={{ width: '100%' }}
-                  />
+                <iframe
+                  src="https://player.vimeo.com/video/296043249"
+                  title="About Datahub"
+                  frameBorder="0"
+                  height="585"
+                  style={ { width: '100%' } }
+                  allowFullScreen
+                />
                 </Observer>
             </Grid.Column>
           </Grid.Row>
         </Grid>
       </Container>
       <LightBg>
         <Container textAlign="center">
-          <SectionHeader color={white}>DATA SOURCES</SectionHeader>
-          <P paddingTop={'2em'} paddingBottom={'2em'}>
+          <SectionHeader color={ white }>DATA SOURCES</SectionHeader>
+          <P paddingTop={ '2em' } paddingBottom={ '2em' }>
             For documentation and data downloads, navigate to the methodology page.
           </P>
-          <Button color="grey" size="large" onClick={goToMethodologyPage(router)}>
+          <Button color="grey" size="large" onClick={ goToMethodologyPage(router) }>
             Methodology and Data <Icon name="chevron right" />
           </Button>
         </Container>