g1 issueshttps://code.gramener.com/cto/g1/-/issues2018-04-16T05:13:52Zhttps://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/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/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/15Add test cases to $().highlight()2018-04-16T09:25:21ZS AnandAdd test cases to $().highlight()https://code.gramener.com/cto/g1/-/issues/128Add urlchange event to path changes2019-01-11T15:03:06ZPratap Vardhanpratap.vardhan@gramener.comAdd urlchange event to path changesCurrently, `urlchange` detects query changes, would like to detect path changes as well
`#/path1/sub1/?q=1` -> `#/path2/sub2/?q=1`
```javascript
$(window).urlchange()
.on('#/', ... })
```
Also, add a note in the documentation about ...Currently, `urlchange` detects query changes, would like to detect path changes as well
`#/path1/sub1/?q=1` -> `#/path2/sub2/?q=1`
```javascript
$(window).urlchange()
.on('#/', ... })
```
Also, add a note in the documentation about when history changes and when it does not, and how this interacts with the back button.1.49S AnandS Anandhttps://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/69Allow custom classes on FormHandler table2022-11-07T09:15:47ZS AnandAllow custom classes on FormHandler tableAdding styles to FormHandler template components (table, count, page, size, export, filters, search, dropdown, ...) would be easier if we had a class element that we could add to each.
For example,
- [ ] `columns[..].classes`: add the ...Adding styles to FormHandler template components (table, count, page, size, export, filters, search, dropdown, ...) would be easier if we had a class element that we could add to each.
For example,
- [ ] `columns[..].classes`: add the classes to the specified column's `<td>`
- [ ] `tableClasses`: adds the classes mentioned to each table. Defaults to `"table table-sm table-striped"`
- [ ] `rowClass`: adds the classes to each row. Defaults to `""`S AnandS Anandhttps://code.gramener.com/cto/g1/-/issues/116Allow loading multiple pages via AJAX2018-11-27T03:51:26ZS AnandAllow loading multiple pages via AJAX### Summary
Create a `$.ajaxchain()` that allows chaining AJAX requests flexibly
### Benefits
- Lets you load FormHandler pages successively with a single call
- Loads multiple pages of data from APIs (e.g. YouTube, Twitter, etc) easily### Summary
Create a `$.ajaxchain()` that allows chaining AJAX requests flexibly
### Benefits
- Lets you load FormHandler pages successively with a single call
- Loads multiple pages of data from APIs (e.g. YouTube, Twitter, etc) easily1.46S AnandS Anandhttps://code.gramener.com/cto/g1/-/issues/40Allow urlfilter to work with dropdown select and options2018-08-07T10:02:12ZTejeshAllow urlfilter to work with dropdown select and optionsPragnya Reddypragnya.reddy@gramener.comPragnya Reddypragnya.reddy@gramener.comhttps://code.gramener.com/cto/g1/-/issues/170Async sub-templates fail sometimes2019-06-04T04:23:11ZS AnandAsync sub-templates fail sometimes@tejesh.p please see https://code.gramener.com/cto/g1/-/jobs/115982
The test case related to "$().template() loaded static async sub templates" fails -- though it passes sometimes (on the server).
Maybe because we're checking before th...@tejesh.p please see https://code.gramener.com/cto/g1/-/jobs/115982
The test case related to "$().template() loaded static async sub templates" fails -- though it passes sometimes (on the server).
Maybe because we're checking before the sub-template has loaded? Could you please explore the test case?TejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/134Backlink g1 release notes from Gramex releases2019-02-03T03:58:58ZBhanu Kbhanu.kamapantula@gramener.comBacklink g1 release notes from Gramex releases### Summary
currently `g1` release notes ship with `Gramex` release notes. Example: [v1.47 notes](https://learn.gramener.com/guide/release/1.47/#g1)
in `g1` repository, changes are visible in [CHANGELOG](https://code.gramener.com/cto/g...### Summary
currently `g1` release notes ship with `Gramex` release notes. Example: [v1.47 notes](https://learn.gramener.com/guide/release/1.47/#g1)
in `g1` repository, changes are visible in [CHANGELOG](https://code.gramener.com/cto/g1/blob/master/CHANGELOG.md). This isn't easy to spot.
Perhaps [v1.47 notes](https://learn.gramener.com/guide/release/1.47/#g1) can be linked in a `Releases` section.
### Benefits
Developers, OSS communityhttps://code.gramener.com/cto/g1/-/issues/156BUG: In editable formhandler, select tag doesnt take default values if src da...2019-03-17T02:45:25ZTejeshBUG: In editable formhandler, select tag doesnt take default values if src data contains boolean values1.53TejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/143BUG: Save after adding new row does not add data to source2019-01-30T06:58:52ZTejeshBUG: Save after adding new row does not add data to source1.50TejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/81Build Kepler.gl like interface for mapviewer component2018-12-02T05:29:51ZTejeshBuild Kepler.gl like interface for mapviewer componentTejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/135CaptureHanlder should support SVG output2019-01-23T04:03:44ZSundeep Reddy MalluCaptureHanlder should support SVG output### Summary
We need CaptureHandler to export HIGH resolution images. Add SVG export capability in CaptureHandler
### Benefits
Visual outputs that are exported from Visual story board are currently of low resolution. Taking print copie...### Summary
We need CaptureHandler to export HIGH resolution images. Add SVG export capability in CaptureHandler
### Benefits
Visual outputs that are exported from Visual story board are currently of low resolution. Taking print copies of these is resulting in images being blurred. We need SVG output format that can allow us to render HIGH resolution images. This allows for easier printing and circulation of Visual Storyboard content.
### Usage
Print outs of Visual properties become much readable and shareable.https://code.gramener.com/cto/g1/-/issues/163Column filter is displaying multiple times in header when we hide the filter2019-05-08T02:28:28ZAkash BarlaColumn filter is displaying multiple times in header when we hide the filter![Column_hiding_issue](/uploads/5876b231e885375373c38129a3ed27fe/Column_hiding_issue.gif)![Column_hiding_issue](/uploads/5876b231e885375373c38129a3ed27fe/Column_hiding_issue.gif)TejeshTejeshhttps://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/82Create a dropdown component for filters2019-06-28T06:54:49ZS AnandCreate a dropdown component for filters- [x] Create a $.dropdown() that supports basic dropdown capability
- [x] Extend for multi-select
- [ ] Integrate with FilterHandler for multiple filters
- [ ] Integrate with FilterHandler for heirarchical filters- [x] Create a $.dropdown() that supports basic dropdown capability
- [x] Extend for multi-select
- [ ] Integrate with FilterHandler for multiple filters
- [ ] Integrate with FilterHandler for heirarchical filters1.51https://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/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)