Create Gramex UI components

Dashboard ML

We want a markup language to define dashboards.

It must extend HTML

For example:

<div class="container">
  <div class="g-filters">
    - col type="date": Date
    - col type="select": City
  </div>
</div>

This is like the web components approach. This will allow us to seamlessly mix HTML (which is fully extensible) and progressively add components.

Each component may add additional CSS, JS, libraries

This should be a JavaScript library on npm that runs on the browser and node.js that manipulates the original HTML into a revised HTML (including CSS, JS).

The library controls the output of the entire page. Where required, it:

• adds links to JS / CSS / font / image / ... libraries
• adds snippets of HTML / CSS / JS at the appropriate locations

This should include a Markdown component

For example:

<div class="g-markdown">
    # Heading
    Text is unindented first.
    ```yaml
    Code fences are supported
    ```
    ```vegam
    // ... including arbitrary extensions
    ```
</div>

Another example:

<div class="filters bg-white shadow pt-2 pb-2">
  <div class="g-filters">
    // example
    [
      {'on': 'filter-time', 'type': 'daterange'},
      {'on': 'filter-status', 'type': 'select', 'name': 'status', 'value': 'Status'},
      {'on': 'filter-users', 'type': 'select', 'name': 'user.id', 'value': 'User Name'},
      {'on': 'filter-uri', 'type': 'select', 'name': 'uri', 'value': 'Page Name'},
      {'on': 'filter-ip', 'type': 'select', 'name': 'ip', 'value': 'IP'}
    ]
  </div>
</div>

This should have a set of components we use in Gramex

• Markdown
• Filters
• Charts

Anything that can be done reasonably easily in Bootstrap is lower priority

Next steps

Actions for @pratap.vardhan

• Define a spec for markdown, filters and charts Mon 2-Apr-2018
• Implement a prototype for all three Wed 4-Apr-2018 (assuming no Republic)
• Productionization