table - initial

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/table/attributes.js

@@ -0,0 +1,154 @@
+/**
+* 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 colorAttributes = require('../../components/colorscale/color_attributes');
+var colorbarAttrs = require('../../components/colorbar/attributes');
+var colorscales = require('../../components/colorscale/scales');
+var axesAttrs = require('../../plots/cartesian/layout_attributes');
+var fontAttrs = require('../../plots/font_attributes');
+
+var extendDeep = require('../../lib/extend').extendDeep;
+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.'
+    }),
+
+    dimensions: {
+        _isLinkedToArray: 'dimension',
+        label: {
+            valType: 'string',
+            role: 'info',
+            description: 'The shown name of the dimension.'
+        },
+        tickvals: axesAttrs.tickvals,
+        ticktext: axesAttrs.ticktext,
+        font: extendFlat({}, fontAttrs, {
+            description: 'Sets the font for the `dimension` values.'
+        }),
+        valueformat: {
+            valType: 'string',
+            dflt: '3s',
+            role: 'style',
+            description: [
+                'Sets the tick label 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(' ')
+        },
+        visible: {
+            valType: 'boolean',
+            dflt: true,
+            role: 'info',
+            description: 'Shows the dimension when set to `true` (the default). Hides the dimension for `false`.'
+        },
+        range: {
+            valType: 'info_array',
+            role: 'info',
+            items: [
+                {valType: 'number'},
+                {valType: 'number'}
+            ],
+            description: [
+                'The domain range for the purpose of coloring. Defaults to the `values` extent.',
+                'Must be an array of `[fromValue, toValue]` with finite numbers as elements.'
+            ].join(' ')
+        },
+        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(' ')
+        },
+        description: 'The dimensions (variables) of the table view.'
+    },
+
+    line: extendFlat({},
+
+        // the default autocolorscale is set to Viridis - autocolorscale therefore defaults to false too,
+        // to avoid being overridden by the blue-white-red autocolor palette
+        extendDeep(
+            {},
+            colorAttributes('line'),
+            {
+                colorscale: extendDeep(
+                    {},
+                    colorAttributes('line').colorscale,
+                    {dflt: colorscales.Viridis}
+                ),
+                autocolorscale: extendDeep(
+                    {},
+                    colorAttributes('line').autocolorscale,
+                    {
+                        dflt: false,
+                        description: [
+                            'Has an effect only if line.color` is set to a numerical array.',
+                            'Determines whether the colorscale is a default palette (`autocolorscale: true`)',
+                            'or the palette determined by `line.colorscale`.',
+                            'In case `colorscale` is unspecified or `autocolorscale` is true, the default ',
+                            'palette will be chosen according to whether numbers in the `color` array are',
+                            'all positive, all negative or mixed.',
+                            'The default value is false, so that `table` colorscale can default to `Viridis`.'
+                        ].join(' ')
+                    }
+                )
+
+            }
+        ),
+
+        {
+            showscale: {
+                valType: 'boolean',
+                role: 'info',
+                dflt: false,
+                description: [
+                    'Has an effect only if `line.color` is set to a numerical array.',
+                    'Determines whether or not a colorbar is displayed.'
+                ].join(' ')
+            },
+            colorbar: colorbarAttrs
+        }
+    )
+};

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,28 @@
+/**
+* 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 hasColorscale = require('../../components/colorscale/has_colorscale');
+var calcColorscale = require('../../components/colorscale/calc');
+var Lib = require('../../lib');
+
+module.exports = function calc(gd, trace) {
+    var cs = !!trace.line.colorscale && Lib.isArray(trace.line.color);
+    var color = cs ? trace.line.color : Array.apply(0, Array(trace.dimensions.reduce(function(p, n) {return Math.max(p, n.values.length);}, 0))).map(function() {return 0.5;});
+    var cscale = cs ? trace.line.colorscale : [[0, trace.line.color], [1, trace.line.color]];
+
+    if(hasColorscale(trace, 'line')) {
+        calcColorscale(trace, trace.line.color, 'line', 'c');
+    }
+
+    return [{
+        lineColor: color,
+        cscale: cscale
+    }];
+};

src/traces/table/colorbar.js

@@ -0,0 +1,51 @@
+/**
+* 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 isNumeric = require('fast-isnumeric');
+
+var Lib = require('../../lib');
+var Plots = require('../../plots/plots');
+var Colorscale = require('../../components/colorscale');
+var drawColorbar = require('../../components/colorbar/draw');
+
+module.exports = function colorbar(gd, cd) {
+    var trace = cd[0].trace,
+        line = trace.line,
+        cbId = 'cb' + trace.uid;
+
+    gd._fullLayout._infolayer.selectAll('.' + cbId).remove();
+
+    if((line === undefined) || !line.showscale) {
+        Plots.autoMargin(gd, cbId);
+        return;
+    }
+
+    var vals = line.color,
+        cmin = line.cmin,
+        cmax = line.cmax;
+
+    if(!isNumeric(cmin)) cmin = Lib.aggNums(Math.min, null, vals);
+    if(!isNumeric(cmax)) cmax = Lib.aggNums(Math.max, null, vals);
+
+    var cb = cd[0].t.cb = drawColorbar(gd, cbId);
+    var sclFunc = Colorscale.makeColorScaleFunc(
+        Colorscale.extractScale(
+            line.colorscale,
+            cmin,
+            cmax
+        ),
+        { noNumericCheck: true }
+    );
+
+    cb.fillcolor(sclFunc)
+        .filllevels({start: cmin, end: cmax, size: (cmax - cmin) / 254})
+        .options(line.colorbar)();
+};

src/traces/table/constants.js

@@ -0,0 +1,28 @@
+/**
+* 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 = {
+    maxDimensionCount: 60,
+    overdrag: 45,
+    columnTitleOffset: 28,
+    columnExtentOffset: 10,
+    bar: {
+        width: 4, // Visible width of the filter bar
+        capturewidth: 10, // Mouse-sensitive width for interaction (Fitts law)
+        fillcolor: 'magenta', // Color of the filter bar fill
+        fillopacity: 1, // Filter bar fill opacity
+        strokecolor: 'white', // Color of the filter bar side lines
+        strokeopacity: 1, // Filter bar side stroke opacity
+        strokewidth: 1, // Filter bar side stroke width in pixels
+        handleheight: 16, // Height of the filter bar vertical resize areas on top and bottom
+        handleopacity: 1, // Opacity of the filter bar vertical resize areas on top and bottom
+        handleoverlap: 0 // A larger than 0 value causes overlaps with the filter bar, represented as pixels.'
+    }
+};