g1 issueshttps://code.gramener.com/cto/g1/-/issues2019-03-05T10:35:21Zhttps://code.gramener.com/cto/g1/-/issues/16Implement a FormHandler matrix - Spec Creation2019-03-05T10:35:21ZS AnandImplement a FormHandler matrix - Spec CreationFor scenarios like:
- https://learn.gramener.com/codogram/#contribution/
- https://learn.gramener.com/groups#matrix
Accept a sparse node-link structure.For scenarios like:
- https://learn.gramener.com/codogram/#contribution/
- https://learn.gramener.com/groups#matrix
Accept a sparse node-link structure.https://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/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/13Implement a FormHandler network chart2018-07-16T11:28:56ZS AnandImplement a FormHandler network charthttps://code.gramener.com/cto/g1/-/issues/12Implement a FormHandler Sankey2018-07-16T11:29:06ZS AnandImplement a FormHandler Sankeyhttps://code.gramener.com/cto/g1/-/issues/11Implement a FormHandler sunburst2018-07-16T11:29:11ZS AnandImplement a FormHandler sunbursthttps://code.gramener.com/cto/g1/-/issues/10Implement a formhandler treemap2018-07-16T11:29:40ZS AnandImplement a formhandler treemaphttps://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/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/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/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/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/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/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/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