DApps Data Dashboard

Second Milestone project for code institute full stack developer course interactive frontend development. It is a single page responsive application visualizing data of decentralised applications statistics.

The Project Brief:

CREATE A DATA DASHBOARD

• Build a data dashboard that visualizes a dataset of your choice
• Your data can be stored locally (e.g., in a js file) or sourced from an API
• Visualise your data using D3.js and dc.js

UX

This App was developed for users looking for statistics on decentralised applications(DApps) that run on blockchain platforms. The platforms I picked were Ethereum(ETH), EOSIO(EOS) and Tron(TRX), I selected the top 15 DApps on each platform and built a dataset of the platforms, names, category, amount of users over 24hr period and the amount daily and weekly transactions(txs) of each DApp.

Style

For this app i picked a darker theme from bootswatch called sandstone which included fonts, colors and theming. DC css file was also used for styling charts, I used some custom css in styles.css to override some of the styles in the bootswatch theme and edited dc.min.css to change values of the chart styles. I used a dark color for the body background and a lighter shade for the cards that hold the charts.

User Stories

• As a new or experienced user to blockchain and DApps i want to find information on:
  • Amount of users per platform
  • DApps categories statistics
  • Amount of weekly transactions per platform
  • Amount of daily users per DApp
  • Amount of daily users and the daily transactions per DApp
  • Amount of daily/weekly transactions per DApp

Home Section Contains:

1. Dashboard introduction paragraph
2. Links in paragraph to read more about the blockchain platforms
3. Selectors for filtering the dataset

User/Category Section Contains:

• 3 Charts in a row
  1. Platform Users Breakdown pieChart
  2. Categories Stats barChart
  3. Weekly Transactions pieChart

DApps Users Section Contains:

• Daily DApps Users rowChart

Daily User Transactions Section Contains:

• Daily User Transactions scatterplotChart

DApps Daily and Weekly Transactions Section Contains:

• DApps Daily and Weekly Transactions stackedbarChart

Mock-Ups

1. Desktop
2. Tablet
3. Mobile

Project Management

For this project Git Kraken/GloBoards was used as a task/issue tracker board which is synced to the project repo on github. Sections included - issues, to Do, in Progress, to be reviewed, completed, bugs.

Usage

• When starting the project:

  1. Create cards
  2. Add descriptions
  3. Add assignee
  4. Add labels
  5. Add tasks
  6. Add files and comments where needed

• During the Project:

  1. Move card from ToDo to in Progress
  2. Check card for required tasks
  3. Complete task and tick off list
  4. Once all tasks completed move card to be reviewed section
  5. once reviewed move to complete and close issue

See screenshots for reference:

1. Glo-Board-1
2. Glo-Board-2
3. Glo-Board-3
4. Glo-Board-4

Features

Desktop/Tablet View

Home

• The home section features a transparent navbar with heading title to the left and section nav links to right.
• It also features an intoduction paragraph with links to different blockchain platforms.
• Selectors are located below the paragraph and allow you to filter the different data points.
• Once a selection is made it filters the charts as per selection.
• You can reset the filters by clicking the reset all button.

User/Category

• This sections has a row of 3 charts
  1. piechart with platfrom legend to filter the different platforms data.
  2. barchart showing the different categories data.
  3. piechart with legend to filter the platform data.

DApps Users

• This section has a rowchart showing the different dapps and allows you to filter the different data points.

Daily User Transactions

• This section features a scatterplot chart showing the amount of user tranactions per dapp and is filtered when selecting a a filter from the selectors in the home section.

DApps Tranactions

• This section features a stacked barchart showing the daily and weekly transactions by dapp name and is filter by the selectors in the home section or by clicking the bar sections on the chart.

Footer

• The footer section features a reset all button for the filters and nav items to navigate the sections.

Mobile View

• When viewing on mobile the charts are positioned on top of each other to help the responsive behavior of the site.

• It also features a hamburger dropdown menu in the navbar, once clicked a dropdown menu appears containing the nav list items.

• All views feature a back to top button for ease of navigation.

• The button fades in and out as you scroll the page once clicked it returns you to home section using jquery script for smooth scrolling effect.

Features Left to Implement

• Add a loader to the dashboard to display while page loads.
• Add more unit tests to get better code coverage.

Technologies Used

For this project the following Technologies were used:

• HTML5

  • The project uses HTML5 to structure the content in line with modern semantic html5.

• CSS3

  • The project uses CSS3 to style the html content.

• FontAwesome

  • The project uses FontAwesome to add icons for chart symbols.

• Javascript

  • The project uses Javascript to add interactive content to dashboard.

• Bootstrap 4

  • The project uses Bootstrap to layout the html content and make it responsive.

• Bootswatch

  • The project uses Bootswatch Theme to add fonts and color the theme chosen was sandstone.

• D3.js

  • The project uses D3.js for manipulating documents and rendering charts.

• Crossfilter

  • The project uses Crossfilter for manipulating and filtering the data.

• Dc.js

  • The project uses Dc.js as a charting library with native crossfilter support and usesd3 to render charts.

• Queue

  • The project uses Queue as a little helper for asynchronous JavaScript.

• Jasmine

  • The project uses Jasmine.js for unit testing.

• Vs Code

  • The project used Vs Code as the IDE of choice.

• Mockflow

  • The project used Mockflow for creating the mock-ups.

• Git Github

  • The project used Git Github for source control management.

• Git Kraken/Glo Boards

  • The project used Git Kraken/Glo Boards for project and task management.

• JQuery

  • The project uses JQuery to control scrolling and toggle features.

Testing

Unit Tests

Jasmine.js was the framework used for the unit tests, I started by testing the piechart function, when adding tests for width, height i realised i would have to declare some variables and build parts of the charts in graphSpec.js to be able to test the various parts of the charts. I added 37 spec tests checking some of the charts which all pass. The results can be viewed in specRunner.html

Manual Testing

Testing for this project was done with several browsers and devices.

Browsers

Mobile

• Firefox
• Chrome
• Safari
• Opera

Desktop

• Firefox
• Chrome
• Opera
• Edge

Devices

• Hp Laptop
• Lenovo Laptop
• Huawei Nexus 6P android phone
• Samsung Galaxy Tab 4
• Samsung Galaxy J3
• Iphone 6s
• Iphone 7
• Ipad AIR

Firefox developer edition and chrome dev-tools were used during development and for manual testing of the site responsiveness and checking if the charts rendered and filters worked correctly. The devices and browsers listed above were used to test the app on different screen sizes and devices.

To Manually Test

Selectors Testing

• Platform Selector

  1. Go to Home section
  2. Click platform select
  3. Click a platform name
  4. check charts to see filter applied

• DApp Selector

  1. Go to Home section
  2. Click DApp select
  3. Click a DApp name
  4. Check charts to see filter applied

• Category Selector

  1. Go to Home section
  2. Click Category select
  3. Click a Category name
  4. Check charts to see filter applied

• Reset Filters

  1. Go to Home/Footer Section
  2. Apply any filter
  3. Click Reset All
  4. See chart filters reset

Charts Testing

• Platform Users Breakdown Piechart

  1. Go to User/Category section
  2. Click Legend item or piechart slice
  3. Check charts to see filter applied

• Categories Stats Barchart

  1. Go to User/Category section
  2. Click category bar
  3. Check charts to see filter applied

• Weekly Transactions Piechart

  1. Go to User/Category section
  2. Click Legend item or piechart slice
  3. Check charts to see filter applied

• Daily DApps Users Rowchart

  1. Go to DApps Users section
  2. Click DApp row item
  3. Check charts to see filter applied

• Daily User Transactions Scatterplotchart

  1. Go to User Transactions section
  2. Hover over dots to see title details
  3. Apply filter from selectors to see individual data

• DApps Daily and Weekly Transactions Stacked Barchart

  1. Go to DApp Transactions section
  2. Hover over bar section to see title details
  3. Apply filter from selectors to see individual data.
  4. Click bar items to filter data

Navigation Testing

• Top Navigation Tests

  1. Go to home page
  2. Click nav item
  3. See page scroll to section

• Footer Navigation Tests

  1. Go to footer section
  2. Click Nav item
  3. See page scroll to section

• Back To Top Button Tests

  1. Scroll down page
  2. See back to top button fade in
  3. Click button
  4. See page scroll to top

• Mobile Navigation Tests

  1. Open app on mobile device
  2. Click hamburger menu
  3. See dropdown menu
  4. Click Nav item
  5. See page scroll to section

Validation Testing

• For HTML validation testing I used W3 Validator which shows the html document to be valid.

• For CSS validation testing I used W3 CSS Validator which shows the stylesheet to be valid CSS3.

Deployment

• This App was deployed to Github pages
• To run this app locally clone or download the repo and open index.html to view in browser.

Credits

Content

• The data used in this app was sourced from:
• DApp Radar
• State of the DApps

Acknowledgements

• Stackoverflow was used to research about jasmine testing and dc.js
• Library Docs were used during development for jasmine.js, d3.js, dc.js
• Thanks to slack member @Eventyret_mentor for his glo-boards suggestions
• Thanks to slack member @abonello_lead for his jasmine testing suggestions
• Thanks to my mentor @rick_mentor for all his help and suggestions