g1 issueshttps://code.gramener.com/cto/g1/-/issues2018-04-16T09:21:07Zhttps://code.gramener.com/cto/g1/-/issues/36SVG support in FormHandler2018-04-16T09:21:07ZBhanu Kbhanu.kamapantula@gramener.comSVG support in FormHandler### Summary
`FormHandler` table currently does not support SVG rendering along with column data. Projects often have SVG elements (circles, rectangles, sparklines etc.) within tables.
### Benefits
With this feature, data-based SVG ele...### Summary
`FormHandler` table currently does not support SVG rendering along with column data. Projects often have SVG elements (circles, rectangles, sparklines etc.) within tables.
### Benefits
With this feature, data-based SVG elements can be rendered via `FormHandler` table. This should reduce dependency on custom code for chart placement in tables.
### Usage
TejeshTejesh2018-04-16https://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/37Add FormHandler cell template2018-04-16T05:13:52ZS AnandAdd FormHandler cell templateFor table coloring, FormHandler options supports a `columns[...].template` in addition to `columns[...].format`.
By default, the template is the same for all columns, and creates a `<td>` with a link inside.
This can be overridden usin...For table coloring, FormHandler options supports a `columns[...].template` in addition to `columns[...].format`.
By default, the template is the same for all columns, and creates a `<td>` with a link inside.
This can be overridden using `columns[...].template`. This has access to the following variables:
- `value`: unformatted value of the cell data
- `display`: the formatted display value, which is the output of `.format`
- `link`: if a `.link` attribute exists, this is the result of that `.link`. Else it is `?col=value&_offset=`https://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/23FormHandler enhancements2018-04-11T12:29:06ZSundeep Reddy MalluFormHandler enhancements### Summary
Enhance g1 library to enhance FormHandler usage
- [x] FormHandler table coloring and Formatting -- handled by #37
- [x] Formhandler table namespacing -- tracking in #28
- [ ] Formhandler table slider### Summary
Enhance g1 library to enhance FormHandler usage
- [x] FormHandler table coloring and Formatting -- handled by #37
- [x] Formhandler table namespacing -- tracking in #28
- [ ] Formhandler table sliderAbinesh LalAbinesh Lalhttps://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/26Create Sanddance Circular Cluster2018-04-11T04:34:12ZSundeep Reddy MalluCreate Sanddance Circular Cluster1.33Elango BharathiElango Bharathihttps://code.gramener.com/cto/g1/-/issues/9$().formhandler enhancements2018-03-26T05:51:03ZS Anand$().formhandler enhancementsFeatures for Gramex v1.28 (31 Jan):
- [x] Add test cases for all README.md conditions
- [x] Add test cases for errors: invalid JSON, missing URL, HTTP 500, ...
- [x] Add loading indicator
- [x] Allow updating column info only for specif...Features for Gramex v1.28 (31 Jan):
- [x] Add test cases for all README.md conditions
- [x] Add test cases for errors: invalid JSON, missing URL, HTTP 500, ...
- [x] Add loading indicator
- [x] Allow updating column info only for specific columns
- [ ] Detect type of value for column highlighting -- use metadata from server
Additional features
- [ ] formhandler namespaces with multiple formhandlers
- [ ] Implement URL targets other than hash (e.g. pushState)
TejeshTejeshhttps://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/22MapViewer Component2018-03-06T08:14:12ZSundeep Reddy MalluMapViewer Component* [ ] overlay of other shapefiles like constituency
* [ ] ability to add multiple datasets for drill down
* [ ] logs must show if there is a data mismatch -(server side)
* [ ] integrate with formhandler
* [ ] Test cases* [ ] overlay of other shapefiles like constituency
* [ ] ability to add multiple datasets for drill down
* [ ] logs must show if there is a data mismatch -(server side)
* [ ] integrate with formhandler
* [ ] Test casesTejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/6$().formhandler column formatting2018-03-06T07:11:43ZS Anand$().formhandler column formatting```html
<div src="formhandler" class="formhanlder">
<script>
$('.formhandler').formhandler({
// - `columns`: comma-separated column names to display, or a list of objects with these keys:
// - `name`: column name
// - `title`: d...```html
<div src="formhandler" class="formhanlder">
<script>
$('.formhandler').formhandler({
// - `columns`: comma-separated column names to display, or a list of objects with these keys:
// - `name`: column name
// - `title`: display name of the column. Defaults to the same value as `name`
// - `type`: `text` (default) / `number` / 'date'. Determines filters to be used
// - `format`: string / function. Functions are applied to the value and the return value is used. Strings are treated as:
// - a numeral.js format for number (numeral.js must be loaded by the developer)
// - a moment.js format for date (moment.js must be loaded by the developer)
// - `sort`: `true` / `false` / operators dict with:
// - `{'': 'Sort ascending', '-': 'Sort descending'}` (default)
// - `filters`: `true` (default) / `false` / operators dict with:
// - `{'', 'Equals...', '!', 'Does not equal...', ...}`.
// The default list of operators is based on the auto-detected type of the column.
// - `unique`: TODO: {dict of query parameter and display value} or [list of values] or function?
// - `hideable`: `true` (default) / `false`
columns: [
{name: 'ID', title: '#', type: 'text', sort: true, filters: true, hideable: true},
{name: 'c1', title: 'Red', type: 'number', sort: true, filters: true, hideable: true},
{
name: 'Name',
title: 'Name',
format: 'text',
sort: {
'': 'Sort alphabetically', // Only allow sort ascending
},
filters: {
'': 'Equals...',
'!': 'Does not equal...',
'~': 'Contains...',
'!~': 'Does not contain...'
},
hideable: false // Cannot hide this column from the UI
}
],
{
name: 'Symbols',
type: 'text',
format: function(val) { return val === null ? '' : val } // Disallow NaN
},
{
name: 'c8',
type: 'number',
format: '0,0.0' // Interpreted as a numeraljs format
}
})
```
Note: When the operators are clicked, a dialog box should pop up like at https://learn.gramener.com/guide/formhandler/flags?_format=table
Use a template for this - just like the other components.TejeshTejeshhttps://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/8Implement $().highlight()2018-02-03T16:25:40ZS AnandImplement $().highlight()See README.md on 8fc265d for specsSee README.md on 8fc265d for specshttps://code.gramener.com/cto/g1/-/issues/5Update FormHandler Table2018-01-23T04:39:13ZS AnandUpdate FormHandler TableSetup:
- Clone the repo: https://code.gramener.com/s.anand/g1 - formhandler branch
- Run the repo: run Gramex on root and visit `/test/test-formhandler.html`
- The output we want to create is at https://learn.gramener.com/guide/formhand...Setup:
- Clone the repo: https://code.gramener.com/s.anand/g1 - formhandler branch
- Run the repo: run Gramex on root and visit `/test/test-formhandler.html`
- The output we want to create is at https://learn.gramener.com/guide/formhandler/flags?_format=table
- The code for this output is at https://code.gramener.com/s.anand/gramex/blob/dev/gramex/apps/formhandler/formhandler.table.html
- Change `src/formhandler.js` and `src/formhandler.template.html` to deliver the output's functionality
- When changing the source, run `npm run build` to create the output
- [x] When a filter is applied by clicking on the table, display the applied filters on the top right. Use the same CSS style as [formhandler table](https://learn.gramener.com/guide/formhandler/flags?_format=table&_limit=10&_offset=9&Continent=Asia)
- Clicking on the applied filter should clear that filter and only that filter
- Clicking on the little red cross at the end should clear all column filters (not `_format` or others)
- [x] Clicking on a column name should show a dropdown with:
- Sort ascending: `href="?_sort=<col-name>"`
- Sort descending: `href="?_sort=-<col-name>"`
- Test filters: TBD
- Format: TBD
- Hide: `href="?c=-<col-name>" data-mode="add"` -- remove the column fully and show it in the applied filters section on the top right
- [x] Column formattingTejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/2$('body').template() should work2017-12-25T18:48:37ZS Anand$('body').template() should work- Set the default selector as `script[type="text/html"], .template`. So `$('body').template()` will apply templates on all nodes matching the selector -- including the root element, i.e. 'body'.
- Setting `data-selector=` on the parent c...- Set the default selector as `script[type="text/html"], .template`. So `$('body').template()` will apply templates on all nodes matching the selector -- including the root element, i.e. 'body'.
- Setting `data-selector=` on the parent class (e.g. 'body' in the above example) should change the default selectorS AnandS Anandhttps://code.gramener.com/cto/g1/-/issues/1$.template() should allow src attribute to specify a template to load.2017-12-25T13:40:56ZS Anand$.template() should allow src attribute to specify a template to load.`<script type="template/html" src="template.html"></script>` should load `template.html` in place.`<script type="template/html" src="template.html"></script>` should load `template.html` in place.S AnandS Anand