https://inab.github.io/openEBench-widgets
Widget's mockup web page for OpenEBench
Technologies
Only d3.js is used to draw all iterations
Iterations
Initial mockup
- First idea
Evolution I
- Tooltips highlighted on hovering
- Colored plug-in icons
Evolution II
- Categories summary with tick icons
- Online/Offline uptime plot inside the plug-in tooltip icon
- 200x200, 100x100, 75x75 sizes
Evolution III
- All arcs now show the metrics summary
- Hide arc stroke lines
- Add mouse click event (and a exit button) to fix the tooltips in the screen
Evolution IV
- Library isolation
- Customizable widget size
- Fix load html without iframe behaviour
- Fix mime types in Ipad devices
- Improved click behaviour
- Added tooltip information to the empty widget parts
- All data in one JSON
Evolution V
- Added package.json management with development and production deployments
- Refactored d3 to import only used submodules (30 -> 7)
- Webpack
- Minified javascript with uglifyjs
- Minified icons with pngquant
- All files packaged in one js
No screenshot, only internal changes
Evolution VI
- Use real JSON url data
- Show extern radius with big sizes
- Only use tool id in data-id attribute
- Added Scientific benchmarking badge not available
- Fixed radius position with odd number of metrics
- Added radial gradiant to the arcs
- New badge made from zero
- Tooltips can be shown to the left of the cursor
- Tool name as data-id
- Added tool name title
- Refactorized and reduce the code
