https://inab.github.io/openEBench-widgets

Widget's mockup web page for OpenEBench

• Technologies
• Iterations
  1. Initial mockup
  2. Evolution I
  3. Evolution II
  4. Evolution III
  5. Evolution IV
  6. Evolution V

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