Usage

First, read the documentation at https://learn.gramener.com/docs/g

You can install via:

npm install gmin

G.min.js is bundled with Gramex 0.x. Add these lines to the end of your code:

<script src="{{ static_url('/js/jquery2.min.js') }}">
<script src="{{ static_url('/js/G.min.js') }}">

NOTE: jQuery 2.0 or above is required to work with SVG elements.

Testing

Visit https://learn.gramener.com/docs/g.test/mocha/ to run unit tests. Or...

• Install nodejs. Note: On Cygwin, re-save the npm .sh files with UNIX line-endings
• npm install -g uglify-js mocha
• Clone this repo and go to the test folder
• Run a web server, e.g. python -mSimpleHTTPServer
• Visit http://127.0.0.1:8888/mocha/

Selenium tests

The test/ui folder has UI test cases. To run them, go to the test folder and run:

python -mSimpleHTTPServer

Then open ui/index.html in Selenium IDE > File > Open Test Suite.

Interaction

1. Click to filter
   • TODO: Handle URL filtering for multiple values of the same key.
2. Hover to highlight
3. Search as you type
   • TODO: debounce to be implemented
   • TODO: search refresh event to be exposed
4. Click to reveal
5. Pan & Zoom
   • TODO: smooth viewbox animation
   • TODO: pinch to zoom on touch devices
   • TODO: slide to pan on touch devices
   • TODO: mousewheel to increase / decrease level of zoom on desktops
   • TODO: hover to pan or drag to pan on desktops
   • TODO: click on control to toggle zoom behaviour
6. ZoomTo: Smoothly zoom to an element
7. Brush to filter. (This is a 2D slider. With custom draggable handles, one can mimic horizontal sliders, vertical sliders AND rectangle selections. This will interact in exactly the same way that a rectangle in PowerPoint interacts.)
8. Drag to re-position / re-size / rotate. Move / resize an element anywhere on the page, apply an arbitrary transformation, AND STORE IT
9. Formula-based refresh of content / attributes, like AngularJS / MoneyFlicks

Layouts

1. Preserve aspect ratio on resize
2. Equal height columns

Components

1. Slider.
2. Timeline
3. Loading indicator
4. Dropdown
   • TODO: Search as you type
   • TODO: Multiselect
   • TODO: Hierarchy
   • TODO: Select all (clear all), Show selected (show all)
5. Gradient picker
6. Color picker

Common TODO

• If there is a clash, e.g. multiple highlights acting on the same element, how to resolve it?
• How should highlights be used as persistent filters across operations?
• Implement namespaces so that interactions can be toggled independently
• Events thrown by all of these

Publishing

To publish this on npm, run:

git push --follow-tags
npm publish               # as sanand0