g1 issueshttps://code.gramener.com/cto/g1/-/issues2018-04-16T04:57:38Zhttps://code.gramener.com/cto/g1/-/issues/25Create FormHandler Grid2018-04-16T04:57:38ZSundeep Reddy MalluCreate FormHandler GridThe objective is to allow browsing data like Windows explorer.
(Just like FormHandler table allowed exploring data like Excel.)
Extend `$().formhandler()` with a `table: 'grid'` option. This uses a separate template that renders items i...The objective is to allow browsing data like Windows explorer.
(Just like FormHandler table allowed exploring data like Excel.)
Extend `$().formhandler()` with a `table: 'grid'` option. This uses a separate template that renders items in a grid instead of a table. (Implementation: use a `<!-- var template_table_grid -->`)
```html
<div class="formhandler-grid">
<div <%= classes %>>
<%= ... same as formhandler table cell ... %>
</div>
<div <%= classes %>>
...
</div>
<div <%= classes %>>
...
</div>
</div>
```
By default, this displays an image, and below that, all columns and values as a simple list. (TODO: improve aesthetics.) Crude sample code:
```html
<div><img class="img img-responsive" src="<%= ... || 'default.png' %>"></div>
<div><strong><%= col %></strong>: <%= value %></div>
<div><strong><%= col %></strong>: <%= value %></div>
...
```
`default.png` should be committed into this repo somewhere and copied into the `dist/` directory by `npm run build`
Attributes:
- `table: 'grid'` specifies the style to be a grid
- `classes`: string / function(row) that has the classes to be added to each table row or grid cell. For `table: 'grid'`, this defaults to `formhandler-grid-cell d-inline-block p-3 box-shadow ...`
- `icon`: string / function(row) that returns a URL or a `fa fa-<font-awesome-class>`. If the string begins with `fa `, it is treated as a FontAwesome icon
- `rowTemplate: ...` specifies an optional row template to be used for each data row. For `table: true`, this defaults to a FormHandler template called `template_row_table`. For `table: grid` it defaults to `template_row_grid`. By default, `template_row_table` has a `<tr>....</tr>` (see current `template_table`), while `template_row_grid` has a `<div class="...">...</div>`
Use case:
- Use [FormHandler directory](https://learn.gramener.com/guide/formhandler/dir?_format=table&_c=dir&_c=name&_c=size&_c=type) to create a Windows explorer grid view like structure that looks good1.33Abinesh LalAbinesh Lalhttps://code.gramener.com/cto/g1/-/issues/3Create g1.datafilter2018-05-24T16:16:25ZS AnandCreate g1.datafilterCreate a data filter mechanism consistent with [FormHandler filters](https://learn.gramener.com/guide/formhandler/#formhandler-filters)
```js
var filtered = g1.datafiter(data, {'sales>': 100, 'city': ['London', 'NY'], 'product': 'Fan')
```Create a data filter mechanism consistent with [FormHandler filters](https://learn.gramener.com/guide/formhandler/#formhandler-filters)
```js
var filtered = g1.datafiter(data, {'sales>': 100, 'city': ['London', 'NY'], 'product': 'Fan')
```1.33TejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/31Create g1.scale to build a scale using configurations2018-05-24T16:16:25ZS AnandCreate g1.scale to build a scale using configurations### Summary
`g1.scale()` is a function that takes a dataset and a configuration, and returns a scale function. For example:
```js
var scale = g1.scale(data, { // Rename scales to scale
metric: 'age',
scale: 'Linear', ...### Summary
`g1.scale()` is a function that takes a dataset and a configuration, and returns a scale function. For example:
```js
var scale = g1.scale(data, { // Rename scales to scale
metric: 'age',
scale: 'Linear', // This should be case insensitive (linear / LINEAR / Linear should all work)
domain: [0, 100],
range: ['red', 'blue'],
scheme: 'RdYlGn',
})
var result = scale(data[0])
```
### Benefits
This is used by `g1.sanddance` and `g1.mapviewer` for configuration-based d3 transformations.1.32Elango BharathiElango Bharathihttps://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/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/26Create Sanddance Circular Cluster2018-04-11T04:34:12ZSundeep Reddy MalluCreate Sanddance Circular Cluster1.33Elango BharathiElango Bharathihttps://code.gramener.com/cto/g1/-/issues/34Create sanddance component - bar chart2022-11-07T09:15:39ZSundeep Reddy MalluCreate sanddance component - bar chartS AnandS Anandhttps://code.gramener.com/cto/g1/-/issues/24Create Sanddance component - Grid Layout2018-04-11T04:34:37ZSundeep Reddy MalluCreate Sanddance component - Grid Layout- [ ] Basic layout
- [ ] Advance layout- [ ] Basic layout
- [ ] Advance layout1.33Elango BharathiElango Bharathihttps://code.gramener.com/cto/g1/-/issues/124Data convertor utility2019-02-28T06:49:13ZBhanu Kbhanu.kamapantula@gramener.comData convertor utilityAn utility to convert/transform data structures from one way to another is much needed.
Use case: I've a CSV that can I use to create a bar chart. Using the same for a sunburst layout will need data structure manipulation, a skill restr...An utility to convert/transform data structures from one way to another is much needed.
Use case: I've a CSV that can I use to create a bar chart. Using the same for a sunburst layout will need data structure manipulation, a skill restricted to developers.
Impact on: chart interface. Non developers will be able to create suitable data structures for different charts.
Even for a larger data community this is a useful feature as currently none exist.https://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/152data-target='pushState' not working as expected in g1 0.14.02019-04-23T03:47:52ZNaveen Manukondadata-target='pushState' not working as expected in g1 0.14.0```html
<div class="d-md-flex justify-content-md-between custom-w-1">
<div class="align-self-end">
<ul class="nav h1 mb-0 border-success border border-top-0 border-left-0 border-right-0">
<li class="nav-item ">
<a class=...```html
<div class="d-md-flex justify-content-md-between custom-w-1">
<div class="align-self-end">
<ul class="nav h1 mb-0 border-success border border-top-0 border-left-0 border-right-0">
<li class="nav-item ">
<a class="nav-link active urlfilter sm4 pb-2 text-secondary font-weight-bold pl-0 border-secondary border border-top-0 border-left-0 border-right-0 border-2" href="?view=summary" data-target="pushState">Summary <span class="d-block"> View</span></a>
</li>
<li class="nav-item">
<a class="nav-link sm4 pb-2 text-success font-weight-bold pr-0 urlfilter" href="?view=comparative" data-target="pushState"><span class="comparative-tab">Comparative</span> <span class="d-block"> View</span></a>
</li>
</ul>
</div>
</div>
```
When we click on Comparative View my page is reloading in latest **g1** version(0.14.0), Expected: Page reload must not happen because `data-target="pushState"`
It is working fine in **g1** version(0.13.1)1.54TejeshTejeshhttps://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/74Disable editing of primary key fields in formhandler table2022-11-07T09:15:59ZTejeshDisable editing of primary key fields in formhandler tableS AnandS Anandhttps://code.gramener.com/cto/g1/-/issues/154Document FormHandler table issues2019-03-15T05:50:57ZS AnandDocument FormHandler table issues- [x] `link: false` or `link: function () { return false }` in a column should disable the link
- [x] `link: "?col=value"` supports custom filtering. For example, click on `name` column to filter by `?dir=<%- row.path %>`
- [ ] How can w...- [x] `link: false` or `link: function () { return false }` in a column should disable the link
- [x] `link: "?col=value"` supports custom filtering. For example, click on `name` column to filter by `?dir=<%- row.path %>`
- [ ] How can we add classes to specific column headers? (e.g. `text-right` only on numeric classes)
- [ ] How can we open links in a new window? Can we add a link class?
- [ ] How can we use FormHandler table with a JSON dataset (not a FormHandler URL)?
- [ ] How can we create a grid instead of a table?
- [ ] How can we customize just the grid cells?
- [ ] How can we customize just a few columns?
- [ ] How can we create editable tables with dropdown values, and customize their appearance?
- [ ] How can we create editable tables with checkboxes or radio buttons?
- [ ] How can we add custom actions?
- [ ] Show examples of theming (see https://www.smashingmagazine.com/2019/02/complex-web-tables/)https://code.gramener.com/cto/g1/-/issues/47Documentation tweaks2018-06-06T09:59:00ZTejeshDocumentation tweaks* [ ] improve documentation for highlighter
* [x] reorder urlfilter documentation. Now, formhandler and sanddance docs are in between* [ ] improve documentation for highlighter
* [x] reorder urlfilter documentation. Now, formhandler and sanddance docs are in betweenhttps://code.gramener.com/cto/g1/-/issues/48Drill down feature in MapViewer2018-06-07T03:40:13ZSundeep Reddy MalluDrill down feature in MapViewer### Summary
Ability to show more granularity maps on clicking on geojson layers.
### Usage
```js
drilldown: {
rootLayer: 'indiaGeojson',
drilldown_levels: ['STATE_N', 'DISTRICT', 'VILL'],
nextLayer: fun...### Summary
Ability to show more granularity maps on clicking on geojson layers.
### Usage
```js
drilldown: {
rootLayer: 'indiaGeojson',
drilldown_levels: ['STATE_N', 'DISTRICT', 'VILL'],
nextLayer: function(name) {
return {
layerName: name + '_layer',
layerOptions: {
url: name + '.geojson',
type: 'geojson',
attrs: {
fillColor: {
metric: 'TOT_P',
range: 'RdYlGn'
}
}
}
}
}
}
```
### Examples
(Add code samples of usage, with expected output)1.37TejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/110edit mode for formhandler table for data: option (non-gramex endpoints)2019-02-07T10:43:22ZTejeshedit mode for formhandler table for data: option (non-gramex endpoints)TejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/35Editable Formhandler Table2018-05-24T16:16:25ZTejeshEditable Formhandler Table### Summary
Each cell in formhandler table must be editable.
TBD: Conditional editable/view only fields for each cell
### Benefits
Immediate use case is in Admin Module### Summary
Each cell in formhandler table must be editable.
TBD: Conditional editable/view only fields for each cell
### Benefits
Immediate use case is in Admin Module1.35TejeshTejeshhttps://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/83Equals not working in column dropdown in FormHandler table2019-02-27T06:09:46ZNaveen ManukondaEquals not working in column dropdown in FormHandler table- When we search with equals in first page it is working good.
- When we click on second page equals as we had only one search result again we need to click on first page for getting the result. If we have only one search result can we r...- When we search with equals in first page it is working good.
- When we click on second page equals as we had only one search result again we need to click on first page for getting the result. If we have only one search result can we redirect to 1 page in the table.
- Can we clear the filters without updating the URL?
- Please refer to below gif.![formhabdler_table](/uploads/7ae8c6e09d5ba35a3e0918a04e47f17e/formhabdler_table.gif)1.51TejeshTejesh