g1 issueshttps://code.gramener.com/cto/g1/-/issues2019-04-22T09:19:19Zhttps://code.gramener.com/cto/g1/-/issues/89Retain order of columns when `*` is used for column name in config2019-04-22T09:19:19ZTejeshRetain order of columns when `*` is used for column name in configTejesh to write tests to confirm this happens only when `*` is used, and order is retained if `*` is not used.
raised by @sarad.gurramTejesh to write tests to confirm this happens only when `*` is used, and order is retained if `*` is not used.
raised by @sarad.gurramhttps://code.gramener.com/cto/g1/-/issues/88Show "ALL ROWS" option in dropdown2018-08-13T02:42:52ZTejeshShow "ALL ROWS" option in dropdown![image](/uploads/e5366e680fa9d507df6d2036feb7bb7a/image.png)
raised by @sarad.gurram![image](/uploads/e5366e680fa9d507df6d2036feb7bb7a/image.png)
raised by @sarad.gurramhttps://code.gramener.com/cto/g1/-/issues/87$.filterhandler()2019-05-10T06:19:56ZPragnya Reddypragnya.reddy@gramener.com$.filterhandler()### Summary
Create dropdowns with unique values from data.
### Benefits
Gives user ability to generate dropdowns for usage in dashboard using simple config.
### Usage
```html
$('.product-list').filterhandler({
url: 'filters',
co...### Summary
Create dropdowns with unique values from data.
### Benefits
Gives user ability to generate dropdowns for usage in dashboard using simple config.
### Usage
```html
$('.product-list').filterhandler({
url: 'filters',
cols: ['product', 'city']
})
```
This should create two dropdowns with unique values from the columns product and city.
Extending along with the above, `$.filterhandler()` should be able to handle NavBar filters. Navbar filters include daterangepicker, multi/single select dropdowns, dropdowns that filter down items based on parent dropdowns.
The NavBar filters should have easy extension hooks to operate individually updating URL params or only on click on `<form>` Apply button.
The navBar filters component should have overridable template for "Applied filters" boxes with clear button for each value per UI control or clear all applied filters for same UI control
TejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/80g1 datafilter to support PUT, POST, DELETE like requests2018-07-16T10:57:12ZTejeshg1 datafilter to support PUT, POST, DELETE like requestsThe user must be able to download the modified dataset to any exportable format like Excel, Json, HTML etc.,
Mayebe a non-priority issue
Benefits:
* [ ] https://frappe.io/datatable has an inline data editor.
* [ ] If g1 formhandler...The user must be able to download the modified dataset to any exportable format like Excel, Json, HTML etc.,
Mayebe a non-priority issue
Benefits:
* [ ] https://frappe.io/datatable has an inline data editor.
* [ ] If g1 formhandler table has #72 implemented, this gives capability to answer "What if" questions through a visualisation
* [ ] Tejesh can write tests for `Add:`, `Edit:` features. (using node server itself, without gramex server)https://code.gramener.com/cto/g1/-/issues/79Formhandler Plugin mechanism - Datacomb2018-07-16T11:23:46ZTejeshFormhandler Plugin mechanism - DatacombPlugin Mixin to include functionality easily at almost any level.
To start with https://github.com/cmpolis/datacombPlugin Mixin to include functionality easily at almost any level.
To start with https://github.com/cmpolis/datacombhttps://code.gramener.com/cto/g1/-/issues/78Implement a formhandler Tree View2018-12-19T16:08:43ZTejeshImplement a formhandler Tree ViewReferences:
https://docs.webix.com/desktop__treetable.html
https://frappe.io/datatable - Tree View section
https://gramener.invisionapp.com/d/main#/console/13753225/303473425/preview - BMGF project design linkReferences:
https://docs.webix.com/desktop__treetable.html
https://frappe.io/datatable - Tree View section
https://gramener.invisionapp.com/d/main#/console/13753225/303473425/preview - BMGF project design linkhttps://code.gramener.com/cto/g1/-/issues/76Update forms / Bootstrap fields based on URLs2018-07-03T07:03:19ZS AnandUpdate forms / Bootstrap fields based on URLsIf the URL is `?state=A&district=B&...`, then `$('.my-form').update(url)` should update the inputs (include select, textarea, Bootstrap dropdowns, etc) with matching keys to have the associated values.
For example,
```
<form class="my-...If the URL is `?state=A&district=B&...`, then `$('.my-form').update(url)` should update the inputs (include select, textarea, Bootstrap dropdowns, etc) with matching keys to have the associated values.
For example,
```
<form class="my-form">
<select name="state">...</select>
<input name="district">
</form>
```
... should change to show the state as A and the district as Bhttps://code.gramener.com/cto/g1/-/issues/73g1.datafilter must support groupby2018-07-16T11:30:43ZTejeshg1.datafilter must support groupby### Summary
Inline with issues #71 and #72### Summary
Inline with issues #71 and #72https://code.gramener.com/cto/g1/-/issues/72formhandler: view option for charts2018-07-16T11:25:09ZPratap Vardhanpratap.vardhan@gramener.comformhandler: view option for charts### Summary
With _by option #71 added.
User will have flexibility to construct large number of usecases from formhandler interface. Currently, table view is the default.
It would be useful to have view dropdown on options to select ...### Summary
With _by option #71 added.
User will have flexibility to construct large number of usecases from formhandler interface. Currently, table view is the default.
It would be useful to have view dropdown on options to select chart type.
- After selecting a chart, ex scatterplot, chart options like x, y, size, color, will be automatically selected from dimensions and metrics in naive order.
- User can modify chart options from a modal popup, to select x, y etc.
- url parameters preserve chart options
- For now, charts with minimal/flat options will be supported
- End URL should be shareable/embeddablehttps://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).https://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/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/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/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/50Implement a time slider component2019-03-05T03:02:19ZTejeshImplement a time slider componenthttps://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/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/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/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/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