[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'
+ }
+ }
+ }
+};