[WIP] Table view

lib/index.js

@@ -34,6 +34,7 @@ Plotly.register([
     require('./pointcloud'),
     require('./heatmapgl'),
     require('./parcoords'),
+    require('./table'),
 
     require('./scattermapbox'),
 

lib/table.js

@@ -0,0 +1,11 @@
+/**
+* Copyright 2012-2017, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+module.exports = require('../src/traces/table');

src/lib/gup.js

@@ -0,0 +1,34 @@
+/**
+* Copyright 2012-2017, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+var identity = require('./identity');
+
+function wrap(d) {return [d];}
+
+module.exports = {
+
+    // The D3 data binding concept and the General Update Pattern promotes the idea of
+    // traversing into the scenegraph by using the `.data(fun, keyFun)` call.
+    // The `fun` is most often a `repeat`, ie. the elements beneath a `<g>` element need
+    // access to the same data, or a `descend`, which fans a scenegraph node into a bunch of
+    // of elements, e.g. points, lines, rows, requiring an array as input.
+    // The role of the `keyFun` is to identify what elements are being entered/exited/updated,
+    // otherwise D3 reverts to using a plain index which would screw up `transition`s.
+    keyFun: function(d) {return d.key;},
+    repeat: wrap,
+    descend: identity,
+
+    // Plotly.js uses a convention of storing the actual contents of the `calcData` as the
+    // element zero of a container array. These helpers are just used for clarity as a
+    // newcomer to the codebase may not know what the `[0]` is, and whether there can be further
+    // elements (not atm).
+    wrap: wrap,
+    unwrap: function(d) {return d[0];}
+};

src/lib/index.js

@@ -135,6 +135,20 @@ lib.pauseEvent = function(e) {
     return false;
 };
 
+/**
+ * SVG painter's algo worked around with reinsertion
+ */
+lib.raiseToTop = function raiseToTop(elem) {
+    elem.parentNode.appendChild(elem);
+};
+
+/**
+ * cancel a possibly pending transition; returned selection may be used by caller
+ */
+lib.cancelTransition = function(selection) {
+    return selection.transition().duration(0);
+};
+
 // constrain - restrict a number v to be between v0 and v1
 lib.constrain = function(v, v0, v1) {
     if(v0 > v1) return Math.max(v1, Math.min(v0, v));

src/traces/parcoords/parcoords.js

@@ -89,7 +89,6 @@ function ordinalScale(dimension) {
 }
 
 function unitToColorScale(cscale) {
-
     var colorStops = cscale.map(function(d) {return d[0];});
     var colorStrings = cscale.map(function(d) {return d[1];});
     var colorTuples = colorStrings.map(function(c) {return d3.rgb(c);});

src/traces/sankey/render.js

@@ -317,7 +317,7 @@ function attachDragHandler(sankeyNode, sankeyLink, callbacks) {
 
         .on('dragstart', function(d) {
             if(d.arrangement === 'fixed') return;
-            this.parentNode.appendChild(this); // bring element to top (painter's algo)
+            Lib.raiseToTop(this);
             d.interactionState.dragInProgress = d.node;
             saveCurrentDragPosition(d.node);
             if(d.interactionState.hovered) {

src/traces/table/attributes.js

@@ -0,0 +1,278 @@
+/**
+* Copyright 2012-2017, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+var annAttrs = require('../../components/annotations/attributes');
+var extendFlat = require('../../lib/extend').extendFlat;
+
+module.exports = {
+
+    domain: {
+        x: {
+            valType: 'info_array',
+            role: 'info',
+            items: [
+                {valType: 'number', min: 0, max: 1},
+                {valType: 'number', min: 0, max: 1}
+            ],
+            dflt: [0, 1],
+            description: [
+                'Sets the horizontal domain of this `table` trace',
+                '(in plot fraction).'
+            ].join(' ')
+        },
+        y: {
+            valType: 'info_array',
+            role: 'info',
+            items: [
+                {valType: 'number', min: 0, max: 1},
+                {valType: 'number', min: 0, max: 1}
+            ],
+            dflt: [0, 1],
+            description: [
+                'Sets the vertical domain of this `table` trace',
+                '(in plot fraction).'
+            ].join(' ')
+        }
+    },
+
+    columnwidth: {
+        valType: 'number',
+        arrayOk: true,
+        dflt: null,
+        role: 'style',
+        description: 'The width of cells.'
+    },
+
+    columnorder: {
+        valType: 'data_array',
+        role: 'info',
+        description: [
+            'Specifies the rendered order of the data columns; for example, a value `2` at position `0`',
+            'means that column index `0` in the data will be rendered as the',
+            'third column, as columns have an index base of zero.'
+        ].join(' ')
+    },
+
+    header: {
+
+        values: {
+            valType: 'data_array',
+            role: 'info',
+            dflt: [],
+            description: [
+                'Dimension values. `values[n]` represents the value of the `n`th point in the dataset,',
+                'therefore the `values` vector for all dimensions must be the same (longer vectors',
+                'will be truncated). Each value must be a finite number.'
+            ].join(' ')
+        },
+
+        format: {
+            valType: 'data_array',
+            role: 'info',
+            dflt: [],
+            description: [
+                'Sets the cell value formatting rule using d3 formatting mini-language',
+                'which is similar to those of Python. See',
+                'https://github.com/d3/d3-format/blob/master/README.md#locale_format'
+            ].join(' ')
+        },
+
+        prefix: {
+            valType: 'string',
+            arrayOk: true,
+            dflt: null,
+            role: 'style',
+            description: 'Prefix for cell values.'
+        },
+
+        suffix: {
+            valType: 'string',
+            arrayOk: true,
+            dflt: null,
+            role: 'style',
+            description: 'Suffix for cell values.'
+        },
+
+        height: {
+            valType: 'number',
+            dflt: 28,
+            role: 'style',
+            description: 'The height of cells.'
+        },
+
+        align: extendFlat({}, annAttrs.align, {arrayOk: true}),
+        valign: extendFlat({}, annAttrs.valign, {arrayOk: true}),
+
+        line: {
+            width: {
+                valType: 'number',
+                arrayOk: true,
+                role: 'style'
+            },
+            color: {
+                valType: 'color',
+                arrayOk: true,
+                role: 'style'
+            }
+        },
+
+        fill: {
+            color: {
+                valType: 'color',
+                arrayOk: true,
+                role: 'style',
+                description: [
+                    'Sets the cell fill color. It accepts either a specific color',
+                    ' or an array of colors.'
+                ].join('')
+            }
+        },
+
+        font: {
+            family: {
+                valType: 'string',
+                arrayOk: true,
+                role: 'style',
+                noBlank: true,
+                strict: true,
+                description: [
+                    'HTML font family - the typeface that will be applied by the web browser.',
+                    'The web browser will only be able to apply a font if it is available on the system',
+                    'which it operates. Provide multiple font families, separated by commas, to indicate',
+                    'the preference in which to apply fonts if they aren\'t available on the system.',
+                    'The plotly service (at https://plot.ly or on-premise) generates images on a server,',
+                    'where only a select number of',
+                    'fonts are installed and supported.',
+                    'These include *Arial*, *Balto*, *Courier New*, *Droid Sans*,, *Droid Serif*,',
+                    '*Droid Sans Mono*, *Gravitas One*, *Old Standard TT*, *Open Sans*, *Overpass*,',
+                    '*PT Sans Narrow*, *Raleway*, *Times New Roman*.'
+                ].join(' ')
+            },
+            size: {
+                valType: 'number',
+                arrayOk: true,
+                role: 'style'
+            },
+            color: {
+                valType: 'color',
+                arrayOk: true,
+                role: 'style'
+            }
+        }
+    },
+
+    cells: {
+
+        values: {
+            valType: 'data_array',
+            role: 'info',
+            dflt: [],
+            description: [
+                'Dimension values. `values[n]` represents the value of the `n`th point in the dataset,',
+                'therefore the `values` vector for all dimensions must be the same (longer vectors',
+                'will be truncated). Each value must be a finite number.'
+            ].join(' ')
+        },
+
+        format: {
+            valType: 'data_array',
+            role: 'info',
+            dflt: [],
+            description: [
+                'Sets the cell value formatting rule using d3 formatting mini-language',
+                'which is similar to those of Python. See',
+                'https://github.com/d3/d3-format/blob/master/README.md#locale_format'
+            ].join(' ')
+        },
+
+        prefix: {
+            valType: 'string',
+            arrayOk: true,
+            dflt: null,
+            role: 'style',
+            description: 'Prefix for cell values.'
+        },
+
+        suffix: {
+            valType: 'string',
+            arrayOk: true,
+            dflt: null,
+            role: 'style',
+            description: 'Suffix for cell values.'
+        },
+
+        height: {
+            valType: 'number',
+            dflt: 20,
+            role: 'style',
+            description: 'The height of cells.'
+        },
+
+        align: extendFlat({}, annAttrs.align, {arrayOk: true}),
+        valign: extendFlat({}, annAttrs.valign, {arrayOk: true}),
+
+        line: {
+            width: {
+                valType: 'number',
+                arrayOk: true,
+                role: 'style'
+            },
+            color: {
+                valType: 'color',
+                arrayOk: true,
+                role: 'style'
+            }
+        },
+
+        fill: {
+            color: {
+                valType: 'color',
+                arrayOk: true,
+                role: 'style',
+                description: [
+                    'Sets the cell fill color. It accepts either a specific color',
+                    ' or an array of colors.'
+                ].join('')
+            }
+        },
+
+        font: {
+            family: {
+                valType: 'string',
+                arrayOk: true,
+                role: 'style',
+                noBlank: true,
+                strict: true,
+                description: [
+                    'HTML font family - the typeface that will be applied by the web browser.',
+                    'The web browser will only be able to apply a font if it is available on the system',
+                    'which it operates. Provide multiple font families, separated by commas, to indicate',
+                    'the preference in which to apply fonts if they aren\'t available on the system.',
+                    'The plotly service (at https://plot.ly or on-premise) generates images on a server,',
+                    'where only a select number of',
+                    'fonts are installed and supported.',
+                    'These include *Arial*, *Balto*, *Courier New*, *Droid Sans*,, *Droid Serif*,',
+                    '*Droid Sans Mono*, *Gravitas One*, *Old Standard TT*, *Open Sans*, *Overpass*,',
+                    '*PT Sans Narrow*, *Raleway*, *Times New Roman*.'
+                ].join(' ')
+            },
+            size: {
+                valType: 'number',
+                arrayOk: true,
+                role: 'style'
+            },
+            color: {
+                valType: 'color',
+                arrayOk: true,
+                role: 'style'
+            }
+        }
+    }
+};