g1 issueshttps://code.gramener.com/cto/g1/-/issues2018-02-05T04:32:12Zhttps://code.gramener.com/cto/g1/-/issues/4$.template() can render multiple languages2018-02-05T04:32:12ZS Anand$.template() can render multiple languagesScripts with different types have different meanings
- `type="text/html"` renders as HTML in-place
- `type="text/plain"` renders as text, i.e. set the innerText, not innerHTML
- `type="text/markdown"` - Markdown
- `type="text/vega"` - [...Scripts with different types have different meanings
- `type="text/html"` renders as HTML in-place
- `type="text/plain"` renders as text, i.e. set the innerText, not innerHTML
- `type="text/markdown"` - Markdown
- `type="text/vega"` - [Vega](https://vega.github.io/vega/)
- `type="text/vega-lite"` - [Vega-lite](https://vega.github.io/vega-lite/)
- `type="text/plotly"` - [Plotly](https://ecomfe.github.io/)
- `type="text/echarts"` - [echarts](https://github.com/ecomfe/echarts)
- `type="text/mermaid"`- [mermaid graph](https://mermaidjs.github.io/)
- `type="text/flowchart"` - [flowchart](http://flowchart.js.org/)
- `type="text/js-sequence"` - [js-sequence](https://bramp.github.io/js-sequence-diagrams/)
- etc.
Implementation:
- Each works as a plugin that can be registered independently, and can be extended. text/html will use `_.template` for example.
- To allow use of `</script>` tags for code examples, the container can be `<template>` instead of `<script>`https://code.gramener.com/cto/g1/-/issues/10Implement a formhandler treemap2018-07-16T11:29:40ZS AnandImplement a formhandler treemaphttps://code.gramener.com/cto/g1/-/issues/11Implement a FormHandler sunburst2018-07-16T11:29:11ZS AnandImplement a FormHandler sunbursthttps://code.gramener.com/cto/g1/-/issues/12Implement a FormHandler Sankey2018-07-16T11:29:06ZS AnandImplement a FormHandler Sankeyhttps://code.gramener.com/cto/g1/-/issues/13Implement a FormHandler network chart2018-07-16T11:28:56ZS AnandImplement a FormHandler network charthttps://code.gramener.com/cto/g1/-/issues/16Implement a FormHandler matrix - Spec Creation2019-03-05T10:35:21ZS AnandImplement a FormHandler matrix - Spec CreationFor scenarios like:
- https://learn.gramener.com/codogram/#contribution/
- https://learn.gramener.com/groups#matrix
Accept a sparse node-link structure.For scenarios like:
- https://learn.gramener.com/codogram/#contribution/
- https://learn.gramener.com/groups#matrix
Accept a sparse node-link structure.https://code.gramener.com/cto/g1/-/issues/27Create an interactive areaplot comparison chart2018-03-22T05:24:34ZS AnandCreate an interactive areaplot comparison chartThis extension to area charts helps identify changes across any 2 time periods. This makes it easier to tell a story
![area-compare](/uploads/80845e5969c4e831e312b93b9da55bde/area-compare.gif)This extension to area charts helps identify changes across any 2 time periods. This makes it easier to tell a story
![area-compare](/uploads/80845e5969c4e831e312b93b9da55bde/area-compare.gif)https://code.gramener.com/cto/g1/-/issues/30Detect type of value for column highlighting -- use metadata from server2018-04-16T10:27:39ZTejeshDetect type of value for column highlighting -- use metadata from serverhttps://code.gramener.com/cto/g1/-/issues/32Create Gramex UI components2020-09-08T18:57:13ZS AnandCreate Gramex UI components# Dashboard ML
We want a markup language to define dashboards.
## It must extend HTML
For example:
```html
<div class="container">
<div class="g-filters">
- col type="date": Date
- col type="select": City
</div>
</div>
``...# Dashboard ML
We want a markup language to define dashboards.
## It must extend HTML
For example:
```html
<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:
```html
<div class="g-markdown">
# Heading
Text is unindented first.
```yaml
Code fences are supported
```
```vegam
// ... including arbitrary extensions
```
</div>
```
Another example:
```html
<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 https://code.gramener.com/cto/g1/-/issues/39Editor2018-04-16T05:58:17ZTejeshEditor### Summary
To build editor capability similar to [ui toast](http://ui.toast.com/)
### Benefits
Lets non-developers use g1 components and build charts### Summary
To build editor capability similar to [ui toast](http://ui.toast.com/)
### Benefits
Lets non-developers use g1 components and build chartshttps://code.gramener.com/cto/g1/-/issues/43Sanddance facets2018-04-25T12:38:46ZS AnandSanddance facets```js
var barchart = g1.sanddance({
layout: 'grid'
width: 100,
height: 100,
// Group by category, which is a number from 0 - 3
group: function(d) { return d.category },
facets: [
{x: 0, y: 0, width: 100, height: 20},
...```js
var barchart = g1.sanddance({
layout: 'grid'
width: 100,
height: 100,
// Group by category, which is a number from 0 - 3
group: function(d) { return d.category },
facets: [
{x: 0, y: 0, width: 100, height: 20},
{x: 0, y: 25, width: 100, height: 20},
{x: 0, y: 50, width: 100, height: 20},
{x: 0, y: 75, width: 100, height: 20},
],
data: data
})
d3.selectAll('circle')
.data(data)
.call(barchart)
```
... should create something like this:
![image](/uploads/9d579860345aa8e8b41ce444c3fb4125/image.png)Elango BharathiElango Bharathihttps://code.gramener.com/cto/g1/-/issues/45create label and positional annotation component2018-04-29T05:12:57ZTejeshcreate label and positional annotation componentsample spec
```js
var chart = g1.createChart('scatterplot', data, options)
chart.annotate(position, text, styles)
chart.label(data, {
label: {
col_name: [...],
//example
Continent: ['Asia', 'Europe'],
ID: ['AND', 'ARB'...sample spec
```js
var chart = g1.createChart('scatterplot', data, options)
chart.annotate(position, text, styles)
chart.label(data, {
label: {
col_name: [...],
//example
Continent: ['Asia', 'Europe'],
ID: ['AND', 'ARB']
},
highlight: true,
auto: false
})
```
src: https://blog.datawrapper.de/weeklychart-biocapacity/
![image](/uploads/2cd992ce4538eb92ae519e8b45ca3ffe/image.png)https://code.gramener.com/cto/g1/-/issues/49showcase g1 features demo on UAT2018-06-18T04:18:33ZTejeshshowcase g1 features demo on UATdeploy g1 demo tests on uat which could be used by developers to understand/refer how to use g1 features.deploy g1 demo tests on uat which could be used by developers to understand/refer how to use g1 features.TejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/50Implement a time slider component2019-03-05T03:02:19ZTejeshImplement a time slider componenthttps://code.gramener.com/cto/g1/-/issues/53FormHandler Table - Feature to disable column options2019-02-05T10:18:58ZBhanu Kbhanu.kamapantula@gramener.comFormHandler Table - Feature to disable column optionsCurrently, column options are enabled by default
![fh-table-column-options](/uploads/951039e00889a78d3dafbce5132e1f2d/fh-table-column-options.png)
It would be good to have an option to disable it.Currently, column options are enabled by default
![fh-table-column-options](/uploads/951039e00889a78d3dafbce5132e1f2d/fh-table-column-options.png)
It would be good to have an option to disable it.1.51TejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/55data reactive mapviewer2018-08-15T14:22:58ZTejeshdata reactive mapviewer- [ ] Integrate mapviewer with urlfilter. This adds support for sliders, dropdowns and input filters.
- [ ] On change of dataset by `urlfilter` or `g1.datafilter`, the layers rendered with corresponding data must redraw themselves eff...- [ ] Integrate mapviewer with urlfilter. This adds support for sliders, dropdowns and input filters.
- [ ] On change of dataset by `urlfilter` or `g1.datafilter`, the layers rendered with corresponding data must redraw themselves efficientlyTejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/56Add interactive demo docs - Mapviewer, Formhandler Table2018-09-02T05:35:58ZTejeshAdd interactive demo docs - Mapviewer, Formhandler Table* [x] Must be formatted like [UI components docs](https://learn.gramener.com/guide/uicomponents/)
* [x] Mapviewer docs
* [ ] Formhandler Table* [x] Must be formatted like [UI components docs](https://learn.gramener.com/guide/uicomponents/)
* [x] Mapviewer docs
* [ ] Formhandler TableTejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/57formhandler table modal doesnot appear sometimes (needs page refresh to make ...2018-07-16T11:28:23ZTejeshformhandler table modal doesnot appear sometimes (needs page refresh to make it work)TejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/58$.highlight example doesn't work2018-06-12T06:20:49ZKarmanya Aggarwal$.highlight example doesn't workFrom the readme.md, even fixing the broken tags in the example doesn't work.From the readme.md, even fixing the broken tags in the example doesn't work.https://code.gramener.com/cto/g1/-/issues/61Componentize ScrollyTelling2018-06-17T16:33:36ZTejeshComponentize ScrollyTellingconfig driven steps with G1 sanddance could be used to build a standard data story quickly.
*Benefits*:
Each project can start having its own data story if they find any insights through built dashboard
*Competitors*:
[ArcGIS](https:...config driven steps with G1 sanddance could be used to build a standard data story quickly.
*Benefits*:
Each project can start having its own data story if they find any insights through built dashboard
*Competitors*:
[ArcGIS](https://www.esri.com/arcgis-blog/products/story-maps/mapping/how-to-cascade/) has scrollytelling maps component completely driven via UI (no code).