g1 issueshttps://code.gramener.com/cto/g1/-/issues2018-05-24T16:16:25Zhttps://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/14Add a type detection function for JavaScript Dataframes2018-05-24T16:16:25ZS AnandAdd a type detection function for JavaScript Dataframes- [x] Test cases and scaffolding @s.anand - by 5 Feb 2018
- [x] Basic implementation @abinesh.lal - by 7 Feb 2018
- [x] Testing & bug fixes @abinesh.lal - by 9 Feb 2018
- [x] Merge @s.anand - by 9 Feb 2018- [x] Test cases and scaffolding @s.anand - by 5 Feb 2018
- [x] Basic implementation @abinesh.lal - by 7 Feb 2018
- [x] Testing & bug fixes @abinesh.lal - by 9 Feb 2018
- [x] Merge @s.anand - by 9 Feb 20181.32Abinesh LalAbinesh Lalhttps://code.gramener.com/cto/g1/-/issues/28Formhandler namespaces with multiple formhandlers2018-05-24T16:16:25ZTejeshFormhandler namespaces with multiple formhandlers### Summary
Formhandler namespaces with multiple formhandlers
### Benefits
Lets developers apply url filter on multiple datasets
### Usage
Apart from `src`, developers can mention `name` option while defining formhandler.
### Exam...### Summary
Formhandler namespaces with multiple formhandlers
### Benefits
Lets developers apply url filter on multiple datasets
### Usage
Apart from `src`, developers can mention `name` option while defining formhandler.
### Example:
?fh1_name:Name=Andorra&fh2_name:Continent=Europe1.33TejeshTejeshhttps://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/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/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/7Create a sanddance component - Transitions2018-05-24T16:16:25ZS AnandCreate a sanddance component - TransitionsSanddance transitions
Samples:
- https://www.sanddance.ms/
- http://algorithms-tour.stitchfix.com/
- https://tcdata360.worldbank.org/stories/tech-entrepreneurship/
- https://gramener.com/playground/blog/posts?post=08-16-2017-elvis-pres...Sanddance transitions
Samples:
- https://www.sanddance.ms/
- http://algorithms-tour.stitchfix.com/
- https://tcdata360.worldbank.org/stories/tech-entrepreneurship/
- https://gramener.com/playground/blog/posts?post=08-16-2017-elvis-presley.md
- https://gramener.com/playground/blog/posts?post=08-04-2017-kishore-kumar.md
- https://gramener.com/playground/senate/similarity
- https://gramener.com/playground/senate/
- https://labs.spotify.com/2018/03/02/introducing-coordinator-a-new-open-source-project-made-at-spotify-to-inject-some-whimsy-into-data-visualizations/
Implementation notes:
- The component should define the positions of a set of *entities* (shapes) across *stages*
- When the stage transitions, the positions are smoothly animated to another
- The component should allow control over animation
- The component should accept layouts as input
- The component should trigger an event on stage transition
Other notes:
- sanddance is created as a component in the `g1` namespace as `g1.sanddance()`.
- d3 and lodash are the only dependencies for `g1`
- Browsers: Edge, Chrome, Firefox, Safari, Android browser, Safari iOS
### Specification
sanddance is a component that transitions elements between states
Each state is named, and has a set of state configuration information. In other words, it's a dict of dicts.
```json
"states": {
"treasure-trove": {
"name": "Treasure Trove",
"conf": {
}
},
"duets": {
"name": "The Duets",
"conf": {
}
}
}
```
A state should capture all transitionable attributes of each element. For example, position, color, size, etc. These attributes are best specified dynamically. For example:
```js
var collapse_to_point = g1.sanddance({
name: "collapse_to_point",
attrs: {
opacity: 0.7, // Set the opacity= of all elements to 0.7
cx: 450, // Set the cx= of all elements to 450
cy: 400, // Set the cy= of all elements to 400
fill: 'blue', // Set the fill= of all elements to blue
},
duration: 1000, // Collapse with a 1s duration
delay: 1000 // All items move after a delay of 1s
})
// Attributes can be different for each object
var explode_randomly = g1.sanddance({
name: "explode_randomly",
attrs: {
opacity: 0.9,
cx: function(d) { return Math.random() * 1000 },
cy: function(d) { return Math.random() * 500 },
fill: function(d) { return Math.random() < 0.5 ? 'red' : 'blue' },
},
duration: function(d) { return Math.random() * 1000 },
delay: 500
})
```
To apply a state, we can call sanddance as follows:
```js
var circles = d3.selectAll('circle')
.call(g1.sanddance.chain(
explode_randomly(), // Explode after 0.5s, up to a 1s duration
explode_randomly(), // Explode after 0.5s, up to a 1s duration
collapse_to_point() // Collapse after 1s with a 1s duration
))
```
The above animation happens in chain.
These also support the following events:
- `sanddance.start` is triggered when the animation starts
- `sanddance.end` is triggered when the animation of all the elements ends
For example:
```js
var circles = d3.selectAll('circle')
.call(g1.sanddance.chain(
explode_randomly()
.on('start', function () { console.log('started 1st explode_randomly') })
.on('end', function () { console.log('ended 1st explode_randomly') }),
explode_randomly()
.on('start', function () { console.log('started 2nd explode_randomly') })
.on('end', function () { console.log('ended 2nd explode_randomly') })
))
```
This will enable creating use-cases
Create a function `g1.sanddance.layout(options)` that behaves as follows:
```
function layout({
width: 500,
height: 300,
layout: 'grid', // or column, scatter, density, circle
layoutx: 'department', // x-layout for column, scatter, density
layouty: 'gender' // y-layout for scatter / density
group: 'facet', // or cluster
groupby: 'class', // categorical column to group by
grouplimit: 10, // maximum number of groups to show
// ...
})
var show_as_grid = g1.sanddance({
name: 'show_as_grid',
attrs: {
transform: g1.sanddance.layout({layout: 'grid', width: 300, height: 200}),
},
duration: 300,
});
```
1.33Elango BharathiElango Bharathihttps://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/44add hide column feature to formhandler table - doesnot render the column in t...2018-05-24T16:16:25ZTejeshadd hide column feature to formhandler table - doesnot render the column in the first pain itself### Summary
Currently, to not display a column in formhandler table, developers have to not mention it in `columns`. But when `*` is given as a name, it displays all columns. No way developer could not render specific columns.
### Bene...### Summary
Currently, to not display a column in formhandler table, developers have to not mention it in `columns`. But when `*` is given as a name, it displays all columns. No way developer could not render specific columns.
### Benefits
Admin module requires this.
### Usage
```js
$('.hide_col')
.formhandler({
columns: [
{ name: '*'},
{
name: 'Continent',
hide: true
}
]
})
```1.34TejeshTejeshhttps://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/41Merge basic mapviewer2018-05-29T03:01:33ZS AnandMerge basic mapviewer- [x] circleMarker zooms to bounds. marker should do the same
- [x] Tooltip titles for marker and circleMarker to be implemented
- [x] Use g1.scale
- [ ] `attr: {color: 'red'}` should be moved to `options: {color: 'red'}`
- [x] Rename `a...- [x] circleMarker zooms to bounds. marker should do the same
- [x] Tooltip titles for marker and circleMarker to be implemented
- [x] Use g1.scale
- [ ] `attr: {color: 'red'}` should be moved to `options: {color: 'red'}`
- [x] Rename `attr:` to `attrs:`
- [x] Add tooltips to show one or more columns1.36TejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/52Unable to edit g1 FormHandler2018-06-01T13:49:44ZHari deepuUnable to edit g1 FormHandler### Summary
Values edited in FormHandler table aren't updated in database.
### Steps to Reproduce
- Edit a value in FormHandler Table
- Save the updated values, it works fine
- Reload the page, old values are displayed
gramex.yaml en...### Summary
Values edited in FormHandler table aren't updated in database.
### Steps to Reproduce
- Edit a value in FormHandler Table
- Save the updated values, it works fine
- Reload the page, old values are displayed
gramex.yaml end point:
```yaml
pmrssm-form-available-state-info:
pattern: /$YAMLURL/table_available_states_info
handler: FormHandler
kwargs:
url: 'mysql://$MYSQL_USER:$MYSQL_PASSWORD@$MYSQL_HOST/pmrssm_forms_db'
query: select * from available_states_info;# DB Query
table: available_states_info
id: [state_code, district_code, mobile_number]
```
javascript
```javascript
<script>
$(window).on('load', function () {
$('.formhandler').formhandler({
columns:[{name: '*'},{editable: true}],
edit: true,
table: true
})
});
</script>
```
1.37TejeshTejeshhttps://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/66g1.datafilter() doesnot filter values with `number` types2018-06-30T10:23:24ZTejeshg1.datafilter() doesnot filter values with `number` typesurl args has `?col=35` . Currently, the filtering is done on `"35"`
Possible Fixes:
needs to be typecasted based on `col` type (identified by g1.types)url args has `?col=35` . Currently, the filtering is done on `"35"`
Possible Fixes:
needs to be typecasted based on `col` type (identified by g1.types)1.38TejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/21urlfilter should handle forms, inputs, sliders2018-07-02T03:23:59ZS Anandurlfilter should handle forms, inputs, sliders1.38TejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/17Allow $().formhandler() to use data from g1.datafilter2018-06-30T11:16:58ZS AnandAllow $().formhandler() to use data from g1.datafilterThis will allow paginated sortable filterable displays of in-memory / pre-loaded data using the same interfaceThis will allow paginated sortable filterable displays of in-memory / pre-loaded data using the same interface1.38TejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/62FormHandler table code review2018-08-28T08:14:53ZS AnandFormHandler table code review- Code corrections
- [x] Do not use encodeURIComponent to escape selectors. Use quotes instead. Remove quotes if they exist in the name
- [x] Do we need to check for `if (dirty_td.length > 0) {`
- [x] `options.edit.editFunction()` ...- Code corrections
- [x] Do not use encodeURIComponent to escape selectors. Use quotes instead. Remove quotes if they exist in the name
- [x] Do we need to check for `if (dirty_td.length > 0) {`
- [x] `options.edit.editFunction()` should probably be `options.edit.editFunction` -- and should probably be `edit.function`. Also call editFunction on `.done()` if it is defined. Not via `complete:`. Always use promises
- [x] `if (options[name] == 'grid') name = 'table_grid'` is duplicated
- [x] Rename `compile_template()` to `render_template()` and document it
- Documentation
- [x] Add row needs documentation
- [x] Actions are poorly explained
- [x] Add example of how to use icon function
- Usability
- [ ] If the server responds with a Bad Request, show the actual error message
- [x] When using keyboard navigation, changed inputs are not detected as dirty
- [x] Loading indicator is not visible
- [ ] Simulate server / network failure and test. If data is lost, user should be aware
- [x] After adding a row and saving, the row should remain where it was added (i.e. at the top of the table)
- [x] All functions must accept a single object with these names (unless it's impossible.)
- `data`: the dataset from `src`
- `row`: row data - dict of {name: value}
- `index`: row index
- `name`: column name
- `value`: cell data value
- `link`: cell link value
- `format`: formatted cell display value
- [x] How can a developer add a delete button simply?
- Feature enhancements
- [x] Icon URLs are static. They must be based on the row data -- as a string template or function1.40TejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/59[Mapviewer] Feature request - After the zoom text should be visible2018-08-13T09:19:08ZAnvesh Dasari[Mapviewer] Feature request - After the zoom text should be visible![image](/uploads/d521bfe1d616ed18beaadc0467354ae2/image.png)
When we do the zoom on the map text should be visible.![image](/uploads/d521bfe1d616ed18beaadc0467354ae2/image.png)
When we do the zoom on the map text should be visible.1.40TejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/54[Mapviewer] Feature request - Filter regions based on click events2018-08-13T09:22:53ZAnvesh Dasari[Mapviewer] Feature request - Filter regions based on click eventsUttar Pradesh map
![uttar-pradesh](/uploads/006272c52a62c3d8e6ce533bde1bf55c/uttar-pradesh.PNG)
On clicking a region, highlight the clicked region
![uttar-pradesh-filtered](/uploads/78389e3367a7ada13055df1ffd2f87bb/uttar-pradesh-filte...Uttar Pradesh map
![uttar-pradesh](/uploads/006272c52a62c3d8e6ce533bde1bf55c/uttar-pradesh.PNG)
On clicking a region, highlight the clicked region
![uttar-pradesh-filtered](/uploads/78389e3367a7ada13055df1ffd2f87bb/uttar-pradesh-filtered.PNG)1.40TejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/96g1.dropdown url encodes options twice2018-10-04T12:17:02ZTejeshg1.dropdown url encodes options twice1.43TejeshTejesh