[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/traces/parcoords/lines.js

@@ -106,7 +106,7 @@ function palette(unitToColor, context, opacity) {
 // but first it shifts the sample index by 0, 8 or 16 bits depending on rgbIndex [0..2]
 // with the end result that each line will be of a unique color, making it possible for the pick handler
 // to uniquely identify which line is hovered over (bijective mapping).
-// The inverse, i.e. readPixel is invoked from 'parcoords.js'
+// The inverse, i.e. readPixel is invoked from 'render.js'
 function calcPickColor(j, rgbIndex) {
     return (j >>> 8 * rgbIndex) % 256 / 255;
 }

src/traces/table/attributes.js

@@ -0,0 +1,283 @@
+/**
+* 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 fontAttrs = require('../../plots/font_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(' ')
+        }
+    },
+
+    labelfont: extendFlat({}, fontAttrs, {
+        description: 'Sets the font for the `dimension` labels.'
+    }),
+
+    labels: {
+        valType: 'data_array',
+        role: 'info',
+        dflt: [],
+        description: 'The shown name of the columns.'
+    },
+
+    columnwidth: {
+        valType: 'number',
+        arrayOk: true,
+        dflt: null,
+        role: 'style',
+        description: 'The width of cells.'
+    },
+
+    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'
+            ]
+        },
+
+        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',
+            arrayOk: false,
+            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'
+            ]
+        },
+
+        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',
+            arrayOk: false,
+            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'
+            }
+        }
+    }
+};

src/traces/table/base_plot.js

@@ -0,0 +1,33 @@
+/**
+* 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 d3 = require('d3');
+var Plots = require('../../plots/plots');
+var tablePlot = require('./plot');
+
+exports.name = 'table';
+
+exports.attr = 'type';
+
+exports.plot = function(gd) {
+    var calcData = Plots.getSubplotCalcData(gd.calcdata, 'table', 'table');
+    if(calcData.length) tablePlot(gd, calcData);
+};
+
+exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout) {
+    var hadTable = (oldFullLayout._has && oldFullLayout._has('table'));
+    var hasTable = (newFullLayout._has && newFullLayout._has('table'));
+
+    if(hadTable && !hasTable) {
+        oldFullLayout._paperdiv.selectAll('.table').remove();
+        oldFullLayout._paperdiv.selectAll('.table').remove();
+        oldFullLayout._glimages.selectAll('*').remove();
+    }
+};

src/traces/table/calc.js

@@ -0,0 +1,13 @@
+/**
+* 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 = function calc() {
+    return [{}];
+};