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
Edited by Pratap Vardhan