realinit/react-draw-events

Motivation

Consider an events you write to the console.log and you want to see the event flow vs time. Using a log file is not convient. A much better way is to see it graphically - and this is what i have done.

Usage

 <button onClick={() => eventLogger.addEvent("click1")}>Click1</button>
 <button onClick={() => eventLogger.addEvent("click2")}>Click2</button>
 <Events eventLogger={eventLogger} svgMaxTimeSec={15} />

Design

The design has two parts

• Logic - implemented by eventLogger.js
• View - implemented by Events.jsx using svg to show event points

Setup

• npm i
• npm run dev