tglide/chart-plot-ts

Chart Plot

A web app to generate charts based on input events

Table of Contents

• Table of Contents
• About The Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
  • Run App
  • Run Tests
• Architecture and Design Choices

About The Project

This repo comes with the frontend, built with React (CRA) and Typescript, which handles user input and chart display, and the backend, built with socket.io, which is responsible for generating the chart by receiving the full list of events from the frontend

Built With

• Frontend
  • React
  • Typescript
• Backend
  • Socket.io
• Tests
  • Jest
  • Enzyme
• Styling
  • SCSS
  • Bulma
• Extra packages
  • Charts: Nivo
  • React Window
  • re-resizeable
  • use-undo

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

yarn installed on your local machine.

Installation

cd web    # For the frontend, or
cd server # For the backend
yarn

Usage

Run App

cd server
yarn start

In another terminal:

cd web
yarn start

You should be able to see the web app by opening http://localhost:3000/ on your browser.

Example inputs are already provided when loading the app. You can generate the chart, or clean the input to start from a fresh start!

Run Tests

yarn test

Architecture and Design Choices

The main difficulty of developing this project was to make it efficient and user friendly, whilst dealing with large amounts of data. With this in mind, this project has undergone some changes through its development.

When rendering large lists of input events, the app struggled to mantain a smooth experience, especially when scrolling through the list. To counter this, the project uses the React Window package, as to render the list partially, depending on the scroll position. This greatly improves perfomance, but coming at the cost of showing blank items when scrolling fast, or resizing the input window.

For charts, I opted to use the Nivo library, for its lightweight installation (since it's not necessary to install all the chart modules), and quick configuration. The only cutback necessary, was using the canvas alternative for the line module. It's faster and lighter than its SVG counterpart, but it redners without smooth transitions.

For generating the chart, initially, I made the calculations on the frontend, visible at web/helpers/chart.ts, but with a large collection of events, the browser started freezing while calculating, and it proved to be too demanding. With this in mind, a simple Socket.io server was made, which receives the DataEvent array, and returns the chartData, but the frontend still does one calculation: Since there can be multiple start and stop events, it only sends data from the last start event, as to minimize the data being sent.

Made by Thomas G. Lopes