72h IBM NPS - Wrap d3js Charts into React Components

Project Overview

For this project we will build an MVP type product to satisfy two main stories:
1. A developer can enable the MVP service quickly through bluemix and deploy simple javascript code to get a standard NPS Survey integrated to their SaaS application. If they want to brand / customize the survey they will be able to do so through either CSS / Javascript parameters or similar easy configuration. This can be embedded on any SaaS on "public internet".
2. A SaaS business user can access the reporting / analytics piece through log in to the Bluemix environment (access to the environment will be sufficient for access to all functionality / data exposed through the application). They will be able to see basic reports and filter by product.

Competition Task Overview

IBM would like to visualize the results of Net Promoter Score (NPS) Surveys using charts built using d3js and wrapped as react components.  These components will be used in a React-based Admin Panel that reports on the results of surveys across their clients.

In previous challenges, we have implemented all 3 charts using d3js, now it's time to wrap each of those 3 charts into react components for use in a web application. Each chart should have a separate react component but they should be done in a consistent way.

Key Requirements
- Each chart must be its own react component/container
- Each component must be coded in ES6
- The style and functionality of these charts must stay the same after being wrapped into react components
- The challenge must clean up any inconsistencies in the 3 charts
- The existing coding and documentation standards and quality should be followed and maintained
- There should be a sample web page that demonstrates usage of the react components
- Test in all the required browsers. Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure the code passes ES6 validation, there should be no warnings or errors, you can use http://jshint.com/ to do the validation. If you are submitting with any warnings, please get them approved in the forum beforehand.
- Please follow the same coding standards and naming convention for the js and css files as the provided code, and make sure the new code from this challenge are in their own separate files.

Timeline

This challenge has aggresive timeline for both submission and review, please make sure you don't miss the deadlines.

Technologies

ReactJS
Javascript
HTML

- IE11+
- FF Latest
- Chrome Latest
- Safari latest (mac only)