Simple Data Driven Table

Project tested with node v 6.2.2

Reading serialized data over http-request and creating visual chart of delivery / impression data. Codebase consist of ES6 script with ReastJs components and Less css preprocessor styles.

• Browserify is used to bundle the Project.

• react-google-charts made it easy to create Barchart.

• I made a custom data view component called Table View (similar to google charts Table view) which is showing aggregated data in a table.

• Bundling done with simple commands using Gulp which is famous build system to automate build process.

Install

First, clone the repo via git:

git clone https://github.com/mizmaar3/DMVT your-folder-name

And then install dependencies.

$ cd your-folder-name && npm install

Build

Run this command to build and bundle the project.

$ npm run build

or simple run

$ gulp

To get minified+uglified version of bundle.js please run

$ npm run release

inside your project folder

Start Server

To start local server, open another terminal window and run

$ npm run start

and goto http://127.0.0.1:9830 or http://localhost:9830

Loading the page will show you two dropdown option boxes. If you only select a campaign it will generate a table view with each row showing goals of selected campaign and its total impression and impression per day aggregated.

If a campaign is selected and then you select a goal, it will generate Barchart with x-axis as day and y-axis as total impression on that day. There is a tooltip on Barchart as well.

Brief Code Explanation

The JS folder

• This folder contains all react modules and util functions like http-request promise.

The common-ui

• It contains the only used input custom component to create dropdown select options.

The LESS folder

• Less folder contains .less files which will be compiled with gulp-less and concatenated into single file style.css, can be found in dist folder after building project.