g1 issueshttps://code.gramener.com/cto/g1/-/issues2018-05-24T16:16:25Zhttps://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.33TejeshTejesh