devinit / datahub

Datahub v2

Installation

 npm install

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:

---

• Maybe replace redux with unistore
• Use greenlet for webworkers --> didnt pan out well
• Explore purgecss for css optimisation --> need to carry out some tests
• Explore reactpot for further perf

Important Points / guides

---

• Develop from a unix OS (MacOs , ubuntu etc). I dont plan to add windows support.

• Prefer to use vscode, it has very good typescript support.

• We are building on top of next.js see next.config.js for configs.

• npm run build-fragment to build out a fragment json for grapqhl union types

• we use npm config variables to prefill some global constants such as the API et la see for more

• In dev mode we run a nodemon process, it sometimes doesnt die when you cntrl-c. You could use lsof -i tcp:4444 to find its PID and then kill it with kill -9 <PID>.

Atomic react design component development with storybook

Cypress testing

• check out the apps cypress dashboard here)
• You need to have run npm run build:next before running the cypress-open command. Checkout the readme file in cypress directory for more.

Pain Points / issues

• Currently stack with npm instead of yarn. The thing with installing with yarn, is that the charts library will stop working well for some charts. This 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.

datahub's Issues

Develop API functions for page narratives

• Global maps
• unbundling aid & unbundling other official flows
• country profiles
• country spotlights
• where are the poor and where will they be
• bubble charts in other visualisation tab

ui enhancements and missing bit

• country profiles tool tips
• navigation on blur event
• country search enhancements
• methodology page template
• where are the poor missing markup below the viz
• site optimisations
• unbundling menu drag and drop
• help overlay section on global maps

Going live

Unbundling aid tree map as react component

Methodology table component

spotlight on Uganda pages assembling and API integration

• uganda country profile assembling
• district pages assembling

where are the poor and where will they be page API integration

Methodology page API integration

Set up and run multilateral profiles API in a proxy server

Web site pages layout templates

Depends on page navigation and layout design decisions that are yet to be made

• Global maps page
• unbundling aid & unbundling other official flows page
• country profiles page
• country spotlights page
• where are the poor and where will they be page
• bubble charts pages

Global map navigation component

should

country ranks table component

Bubble chart as react component

• navigation component for poverty & different providers page
• bubble chart with year slider
• configuration component
• poverty bubble chart overlay info component

Adding any missing vital unit, functional tests and flow types

Country profiles and spotlight charts as react components

• area
• histogram
• donut
• line
• line tree map chart (govt finance)
• In out sidebar split chart (Intl finance)
• area tree map chart

Unbundling aid pages assembling and API integration

Assemble and sign off unbundling aid pages

• unbundling aid ODA
• unbundling OOF

Global maps page API integration

By end of this task all global maps should be working fine in each tab with live data and the global maps page should be ready for sign off

• poverty tab
• official tab
• humanitarian tab

add others later

create static pages for pages we are not recreating

• where are the poor in p20
• multilateral profiles

Data caching redis module

Maps as react components

• global maps component as react component
• country map component as react component
• map components i.e key, description and year slider functionality

Develop Non-chart website components

UI Cross checking & review with comms

UI theme configurations / set up

css theme style sheet set up with semantic UI

service worker for offline access and client caching integration

Refactor current visbox d3 chart library modules

This has already been partially done by @ernest-okot.

Add missing d3 charts in the visbox charting library

Missing charts for use with DH

• bubble chart
• tree maps
• area chart

set up application structure with necessary boilerplate

• routing with code splitting
• graphql
• stories (for viewing components in isolation)
• make stories deployable to now currently held up by this issue
• flow integration
• server side rendering
• add travis
• test out now deploys
• service worker and localforage integration for offline access

Adding visbox chart configurations into a config file.

Tile server for DH maps

visbox configurations integration

develop data schemas for page narratives

• Global maps
• unbundling aid & unbundling other official flows
• country profiles
• country spotlights
• where are the poor and where will they be
• bubble charts in other visualisation tab

Data hub reviews

• Add bubble charts checklist

develop data schema types for various visualisations (data-warehouse data)

list of data hub schemas to do

• Global maps
• unbundling aid & unbundling other official flows
• country profiles
• country spotlights
• where are the poor and where will they be
• bubble charts schema for other visualisations

User Testing and Feedback handling

footer component

bubble chart as a react component

unbundling aid (ODA and OOF) navigation selection component

Site navigation component

setup page narratives file templates

This task also Involves setting up schemas for each page narratives

• Global maps
• unbundling aid & unbundling other official flows
• country profiles
• country spotlights
• where are the poor and where will they be
• bubble charts in other visualisation tab

Any Post Live issues handling

small widget components

• country profiles search widget
• share this chart widget
• Year slider component

Test update process with DW data

Data-warehouse data API functions for various visualizations

Resolver functions

• Global maps
• unbundling aid & unbundling other official flows
• country profiles
• country spotlights
• where are the poor and where will they be
• bubble charts in other visualisation tab

Rule around when to show year in map tool tips

Some maps on the data hub have a year in their tooltips while others don't yet they could also have. Can we have a clear rule on when to show year and when not to for consistence.

Country profiles API integration

• charts
• narratives

country profiles introductory background map section component

Unbundling aid chart as react component

• unbundling aid & unbundling other official flows Tree map

Where are the poor and where will they be interactive chart

bubble charts API integration

Expected end date: ....