squashed changes

Author: monfera

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

@@ -8,13 +8,9 @@
 
 '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 annAttrs = require('../../components/annotations/attributes');
 var fontAttrs = require('../../plots/font_attributes');
 
-var extendDeep = require('../../lib/extend').extendDeep;
 var extendFlat = require('../../lib/extend').extendFlat;
 
 module.exports = {
@@ -52,46 +48,132 @@ module.exports = {
         description: 'Sets the font for the `dimension` labels.'
     }),
 
-    dimensions: {
-        _isLinkedToArray: 'dimension',
-        label: {
-            valType: 'string',
+    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',
-            description: 'The shown name of the dimension.'
+            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(' ')
         },
-        tickvals: axesAttrs.tickvals,
-        ticktext: axesAttrs.ticktext,
-        font: extendFlat({}, fontAttrs, {
-            description: 'Sets the font for the `dimension` values.'
-        }),
-        valueformat: {
-            valType: 'string',
-            dflt: '3s',
-            role: 'style',
+
+        format: {
+            valType: 'data_array',
+            role: 'info',
+            dflt: [],
             description: [
-                'Sets the tick label formatting rule using d3 formatting mini-language',
+                '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(' ')
+            ]
         },
-        visible: {
-            valType: 'boolean',
-            dflt: true,
-            role: 'info',
-            description: 'Shows the dimension when set to `true` (the default). Hides the dimension for `false`.'
+
+        prefix: {
+            valType: 'string',
+            arrayOk: true,
+            dflt: null,
+            role: 'style',
+            description: 'Prefix for cell values.'
         },
-        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(' ')
+
+        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',
@@ -102,53 +184,100 @@ module.exports = {
                 '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(' ')
-                    }
-                )
+        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('')
             }
-        ),
+        },
 
-        {
-            showscale: {
-                valType: 'boolean',
-                role: 'info',
-                dflt: false,
+        font: {
+            family: {
+                valType: 'string',
+                arrayOk: true,
+                role: 'style',
+                noBlank: true,
+                strict: true,
                 description: [
-                    'Has an effect only if `line.color` is set to a numerical array.',
-                    'Determines whether or not a colorbar is displayed.'
+                    '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(' ')
             },
-            colorbar: colorbarAttrs
+            size: {
+                valType: 'number',
+                arrayOk: true,
+                role: 'style'
+            },
+            color: {
+                valType: 'color',
+                arrayOk: true,
+                role: 'style'
+            }
         }
-    )
+    }
 };

src/traces/table/calc.js

@@ -8,21 +8,6 @@
 
 '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
-    }];
+module.exports = function calc() {
+    return [{}];
 };

src/traces/table/constants.js

@@ -11,18 +11,11 @@
 module.exports = {
     maxDimensionCount: 60,
     overdrag: 45,
+    cellPad: 4,
     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.'
-    }
+    transitionEase: 'cubic-out',
+    transitionDuration: 100,
+    releaseTransitionEase: 'elastic',
+    releaseTransitionDuration: 300
 };

src/traces/table/defaults.js

@@ -10,95 +10,46 @@
 
 var Lib = require('../../lib');
 var attributes = require('./attributes');
-var hasColorscale = require('../../components/colorscale/has_colorscale');
-var colorscaleDefaults = require('../../components/colorscale/defaults');
-var maxDimensionCount = require('./constants').maxDimensionCount;
-
-function handleLineDefaults(traceIn, traceOut, defaultColor, layout, coerce) {
-
-    if(hasColorscale(traceIn, 'line')) {
-        coerce('line.colorscale');
-        colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'line.', cLetter: 'c'});
-    }
-}
-
-function dimensionsDefaults(traceIn, traceOut, fontDflt) {
-    var dimensionsIn = traceIn.dimensions || [],
-        dimensionsOut = traceOut.dimensions = [];
-
-    var dimensionIn, dimensionOut, i;
-    var commonLength = Infinity;
-
-    if(dimensionsIn.length > maxDimensionCount) {
-        Lib.log('table views support up to ' + maxDimensionCount + ' dimensions at the moment');
-        dimensionsIn.splice(maxDimensionCount);
-    }
-
-    function coerce(attr, dflt) {
-        return Lib.coerce(dimensionIn, dimensionOut, attributes.dimensions, attr, dflt);
-    }
-
-    for(i = 0; i < dimensionsIn.length; i++) {
-        dimensionIn = dimensionsIn[i];
-        dimensionOut = {};
-
-        if(!Lib.isPlainObject(dimensionIn)) {
-            continue;
-        }
-
-        var values = coerce('values');
-        var visible = coerce('visible', values.length > 0);
-
-        if(visible) {
-            coerce('label');
-            coerce('tickvals');
-            coerce('ticktext');
-            coerce('valueformat');
-            coerce('range');
-            Lib.coerceFont(coerce, 'font', fontDflt);
-
-            commonLength = Math.min(commonLength, dimensionOut.values.length);
-        }
-
-        dimensionOut._index = i;
-        dimensionsOut.push(dimensionOut);
-    }
-
-    if(isFinite(commonLength)) {
-        for(i = 0; i < dimensionsOut.length; i++) {
-            dimensionOut = dimensionsOut[i];
-            if(dimensionOut.visible && dimensionOut.values.length > commonLength) {
-                dimensionOut.values = dimensionOut.values.slice(0, commonLength);
-            }
-        }
-    }
-
-    return dimensionsOut;
-}
 
 module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     function coerce(attr, dflt) {
         return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
     }
 
-    // make default font size 10px,
-    // scale linearly with global font size
     var fontDflt = {
         family: layout.font.family,
-        size: Math.round(layout.font.size * (10 / 12)),
+        size: layout.font.size,
         color: layout.font.color
     };
 
-    var dimensions = dimensionsDefaults(traceIn, traceOut, fontDflt);
-
-    handleLineDefaults(traceIn, traceOut, defaultColor, layout, coerce);
-
     coerce('domain.x');
     coerce('domain.y');
 
-    if(!Array.isArray(dimensions) || !dimensions.length) {
-        traceOut.visible = false;
-    }
-
-    Lib.coerceFont(coerce, 'labelfont', fontDflt);
+    coerce('labels');
+
+    coerce('columnwidth');
+
+    coerce('cells.values');
+    coerce('cells.format');
+    coerce('cells.align');
+    coerce('cells.valign');
+    coerce('cells.prefix');
+    coerce('cells.suffix');
+    coerce('cells.height');
+    coerce('cells.line.width');
+    coerce('cells.line.color');
+    coerce('cells.fill.color');
+    Lib.coerceFont(coerce, 'cells.font', fontDflt);
+
+    coerce('header.values');
+    coerce('header.format');
+    coerce('header.align');
+    coerce('header.valign');
+    coerce('header.prefix');
+    coerce('header.suffix');
+    coerce('header.height');
+    coerce('header.line.width');
+    coerce('header.line.color');
+    coerce('header.fill.color');
+    Lib.coerceFont(coerce, 'header.font', fontDflt);
 };

src/traces/table/index.js

@@ -14,7 +14,6 @@ Table.attributes = require('./attributes');
 Table.supplyDefaults = require('./defaults');
 Table.calc = require('./calc');
 Table.plot = require('./plot');
-Table.colorbar = require('./colorbar');
 
 Table.moduleType = 'trace';
 Table.name = 'table';

src/traces/table/plot.js

@@ -16,14 +16,14 @@ module.exports = function plot(gd, cdTable) {
     var svg = fullLayout._paper;
     var root = fullLayout._paperdiv;
 
-    var gdDimensions = {};
-    var gdDimensionsOriginalOrder = {};
+    var gdColumns = {};
+    var gdColumnsOriginalOrder = {};
 
     var size = fullLayout._size;
 
     cdTable.forEach(function(d, i) {
-        gdDimensions[i] = gd.data[i].dimensions;
-        gdDimensionsOriginalOrder[i] = gd.data[i].dimensions.slice();
+        gdColumns[i] = gd.data[i].header.values.map(function(d) {return d[0];});
+        gdColumnsOriginalOrder[i] = gdColumns[i].slice();
     });
 
     var hover = function(eventData) {
@@ -34,46 +34,28 @@ module.exports = function plot(gd, cdTable) {
         gd.emit('plotly_unhover', eventData);
     };
 
-    var columnMoved = function(i, visibleIndices) {
+    var columnMoved = function(i, indices) {
 
-        // Have updated order data on `gd.data` and raise `Plotly.restyle` event
-        // without having to incur heavy UI blocking due to an actual `Plotly.restyle` call
-
-        function visible(dimension) {return !('visible' in dimension) || dimension.visible;}
-
-        function newIdx(visibleIndices, orig, dim) {
+        function newIdx(indices, orig, dim) {
             var origIndex = orig.indexOf(dim);
-            var currentIndex = visibleIndices.indexOf(origIndex);
+            var currentIndex = indices.indexOf(origIndex);
             if(currentIndex === -1) {
-                // invisible dimensions initially go to the end
                 currentIndex += orig.length;
             }
             return currentIndex;
         }
 
         function sorter(orig) {
             return function sorter(d1, d2) {
-                var i1 = newIdx(visibleIndices, orig, d1);
-                var i2 = newIdx(visibleIndices, orig, d2);
+                var i1 = newIdx(indices, orig, d1);
+                var i2 = newIdx(indices, orig, d2);
                 return i1 - i2;
             };
         }
 
-        // drag&drop sorting of the visible dimensions
-        var orig = sorter(gdDimensionsOriginalOrder[i].filter(visible));
-        gdDimensions[i].sort(orig);
-
-        // invisible dimensions are not interpreted in the context of drag&drop sorting as an invisible dimension
-        // cannot be dragged; they're interspersed into their original positions by this subsequent merging step
-        gdDimensionsOriginalOrder[i].filter(function(d) {return !visible(d);})
-             .sort(function(d) {
-                 // subsequent splicing to be done left to right, otherwise indices may be incorrect
-                 return gdDimensionsOriginalOrder[i].indexOf(d);
-             })
-            .forEach(function(d) {
-                gdDimensions[i].splice(gdDimensions[i].indexOf(d), 1); // remove from the end
-                gdDimensions[i].splice(gdDimensionsOriginalOrder[i].indexOf(d), 0, d); // insert at original index
-            });
+        // drag&drop sorting of the columns
+        var orig = sorter(gdColumnsOriginalOrder[i].slice());
+        gdColumns[i].sort(orig);
 
         gd.emit('plotly_restyle');
     };

src/traces/table/render.js

@@ -0,0 +1,114 @@
+{
+    "layout": {
+        "width": 1200,
+        "height": 800,
+        "title": "Widget parameters and cost",
+        "font": {
+            "color": "blue",
+            "size": 200,
+            "family": "sans-serif"
+        },
+        "margin": {"t": 106, "r": 60, "b": 54, "l": 60}
+    },
+
+    "data": [{
+
+        "type": "table",
+
+        "domain": {
+            "x": [0.05, 0.95],
+            "y": [0.02, 0.97]
+        },
+
+        "columnwidth": [110, 60, 90, 90, 80, 70, 80, 60, 100, 70],
+
+        "header": {
+
+            "values": [
+                ["Height"],
+                ["Width"],
+                ["Cylinder"],
+                ["Weight"],
+                ["Cost"],
+                ["Penalty"],
+                ["H/W"],
+                ["Min H/W"],
+                ["Diameter"],
+                ["RF block"]
+            ],
+
+            "align": ["right", "center", "center", "right", "right", "right", "left", "right", "right", "right"],
+            "valign": "middle",
+
+            "line": {
+                "color": "lightgray",
+                "width": 0.5
+            },
+
+            "fill": {
+                "color": "grey"
+            },
+
+            "font": {
+                "family": "PT Sans Narrow",
+                "size": 16,
+                "color": "white"
+            }
+        },
+
+        "cells": {
+
+            "values": [
+                [32000, 162666, 32000, 162666, 32000, 162666, 32000, 162666, 32000, 162666, 32000, 162666, 32000, 162666, 32000, 162666, 32000, 162666, 32000, 162666],
+                [268630, 489543, 379086, 600000, 489543, 268630, 600000, 379086, 268630, 489543, 379086, 600000, 489543, 268630, 600000, 379086, 268630, 489543, 379086, 600000],
+                ["A", "A", "B", "AB", "Y", "Z", "Z", "A", "B", "B", "Y", "Y", "Z", "A", "A", "B", "Y", "Y", "Z", "Z"],
+                [160, 1324, 252, 1711, 173, 624, 228, 2474, 371, 3103, 312, 2408, 460, 1727, 754, 2457, 227, 1963, 354, 2797],
+                [1125, 9274, 2735, 16920, 2193, 20704, 4814, 34689, 5565, 46554, 5225, 38887, 9746, 37715, 17798, 55250, 5697, 49083, 11226, 81939],
+                [9, 794, 34, 1409, 17, 536, 39, 7133, 115, 9843, 107, 7017, 273, 5131, 1210, 9032, 82, 7312, 252, 16778],
+                [0.2366, 0.3269, 0.3471, 0.4373, 0.4575, 0.106, 0.568, 0.2164, 0.2366, 0.3269, 0.3471, 0.4373, 0.4575, 0.106, 0.568, 0.2164, 0.2366, 0.3269, 0.3471, 0.4373],
+                [5137, 113712, -5909, 102666, -16955, 135803, -28000, 124758, 5137, 113712, -5909, 102666, -16955, 135803, -28000, 124758, 5137, 113712, -5909, 102666],
+                [98453, 319366, 234498, 455411, 391333, 147711, 479081, 208910, 124041, 344954, 280876, 501789, 368624, 98453, 429823, 234498, 170419, 391333, 258167, 479081],
+                [1417, 23377, 3376, 33336, 5635, 10812, 6898, 21273, 2484, 35126, 5626, 51096, 7384, 22020, 18912, 52449, 7498, 87528, 11359, 107154]
+            ],
+
+            "format": [
+                ".2s",
+                "#0x",
+                null,
+                [",.0f", ",.1f", ",.2f", ",.3f", ",.2f"],
+                "$,",
+                "_>5",
+                ",.1%",
+                ".3s",
+                ",.0f",
+                ",.0f"
+            ],
+
+            "prefix": ["", "", "", "", "US ", ""],
+            "suffix": ["m", ""],
+
+            "height": 24,
+
+            "align": ["right", "center", "center", "right", "right", "right", "left", "right", "right", "right"],
+            "valign": "middle",
+
+            "line": {
+                "color": [
+                    "grey"
+                ],
+                "width": 0.5
+            },
+
+            "fill": {
+                "color": [
+                    ["#f7fbff", "#deebf7", "#f7fbff", "#deebf7", "#f7fbff", "#deebf7", "#f7fbff", "#deebf7", "#f7fbff", "#deebf7", "#f7fbff", "#deebf7", "#f7fbff", "#deebf7", "#f7fbff", "#deebf7", "#f7fbff", "#deebf7", "#f7fbff", "#deebf7"]
+                ]
+            },
+
+            "font": {
+                "size": 12,
+                "color": ["black", "red", "black", "black"]
+            }
+        }
+    }]
+}