g1 issueshttps://code.gramener.com/cto/g1/-/issues2019-01-16T04:23:13Zhttps://code.gramener.com/cto/g1/-/issues/108Mapviewer - drilldown and tooltip bugfixes2019-01-16T04:23:13ZTejeshMapviewer - drilldown and tooltip bugfixesTejeshTejeshhttps://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/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/38Formhandler Table - Add/Delete new rows2018-04-16T09:47:05ZTejeshFormhandler Table - Add/Delete new rows### Summary
Formhandler table to support adding new rows to the table
### Benefits
Admin module - Add new user feature if done using this feature, will be a single line of configuration.
### Usage
```js
$('.formhandler').formhandler(...### Summary
Formhandler table to support adding new rows to the table
### Benefits
Admin module - Add new user feature if done using this feature, will be a single line of configuration.
### Usage
```js
$('.formhandler').formhandler({
src: ....,
...
...
addRow: true / false(default )
})
```TejeshTejeshhttps://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/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/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/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/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.33TejeshTejesh