Merge remote-tracking branch 'origin/master' into new-d3-number-format

Author: archmoj

draftlogs/5500_fix.md

@@ -0,0 +1 @@
+ - Improve rendering of scattergl, splom and parcoords by implementing plotGlPixelRatio for those traces [[#5500](https://github.com/plotly/plotly.js/pull/5500)]

draftlogs/5818_fix.md

@@ -0,0 +1 @@
+ - Adjust links to time format options so that they point to the d3-time-format v2.2.3 applied not the latest [[#5818](https://github.com/plotly/plotly.js/pull/5818)]

src/constants/docs.js

@@ -2,5 +2,5 @@
 
 module.exports = {
     FORMAT_LINK: 'https://github.com/d3/d3-format/tree/v1.4.5#d3-format',
-    DATE_FORMAT_LINK: 'https://github.com/d3/d3-time-format#locale_format'
+    DATE_FORMAT_LINK: 'https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format'
 };

src/plot_api/plot_api.js

@@ -222,17 +222,20 @@ function _doPlot(gd, data, layout, config) {
                 });
         }
 
+        var plotGlPixelRatio = gd._context.plotGlPixelRatio;
         if(fullLayout._glcanvas) {
             fullLayout._glcanvas
-                .attr('width', fullLayout.width)
-                .attr('height', fullLayout.height);
+                .attr('width', fullLayout.width * plotGlPixelRatio)
+                .attr('height', fullLayout.height * plotGlPixelRatio)
+                .style('width', fullLayout.width + 'px')
+                .style('height', fullLayout.height + 'px');
 
             var regl = fullLayout._glcanvas.data()[0].regl;
             if(regl) {
                 // Unfortunately, this can happen when relayouting to large
                 // width/height on some browsers.
-                if(Math.floor(fullLayout.width) !== regl._gl.drawingBufferWidth ||
-                    Math.floor(fullLayout.height) !== regl._gl.drawingBufferHeight
+                if(Math.floor(fullLayout.width * plotGlPixelRatio) !== regl._gl.drawingBufferWidth ||
+                    Math.floor(fullLayout.height * plotGlPixelRatio) !== regl._gl.drawingBufferHeight
                  ) {
                     var msg = 'WebGL context buffer and canvas dimensions do not match due to browser/WebGL bug.';
                     if(drawFrameworkCalls) {

src/plots/cartesian/index.js

@@ -596,8 +596,8 @@ exports.toSVG = function(gd) {
             preserveAspectRatio: 'none',
             x: 0,
             y: 0,
-            width: canvas.width,
-            height: canvas.height
+            width: canvas.style.width,
+            height: canvas.style.height
         });
     }
 

src/traces/parcoords/base_plot.js

@@ -39,8 +39,8 @@ exports.toSVG = function(gd) {
             preserveAspectRatio: 'none',
             x: 0,
             y: 0,
-            width: canvas.width,
-            height: canvas.height
+            width: canvas.style.width,
+            height: canvas.style.height
         });
     }
 

src/traces/parcoords/lines.js

@@ -160,17 +160,27 @@ function emptyAttributes(regl) {
     return attributes;
 }
 
-function makeItem(model, leftmost, rightmost, itemNumber, i0, i1, x, y, panelSizeX, panelSizeY, crossfilterDimensionIndex, drwLayer, constraints) {
+function makeItem(
+    model, leftmost, rightmost, itemNumber, i0, i1, x, y, panelSizeX, panelSizeY,
+    crossfilterDimensionIndex, drwLayer, constraints, plotGlPixelRatio
+) {
     var dims = [[], []];
     for(var k = 0; k < 64; k++) {
         dims[0][k] = (k === i0) ? 1 : 0;
         dims[1][k] = (k === i1) ? 1 : 0;
     }
-
-    var overdrag = model.lines.canvasOverdrag;
+    x *= plotGlPixelRatio;
+    y *= plotGlPixelRatio;
+    panelSizeX *= plotGlPixelRatio;
+    panelSizeY *= plotGlPixelRatio;
+    var overdrag = model.lines.canvasOverdrag * plotGlPixelRatio;
     var domain = model.domain;
-    var canvasWidth = model.canvasWidth;
-    var canvasHeight = model.canvasHeight;
+    var canvasWidth = model.canvasWidth * plotGlPixelRatio;
+    var canvasHeight = model.canvasHeight * plotGlPixelRatio;
+    var padL = model.pad.l * plotGlPixelRatio;
+    var padB = model.pad.b * plotGlPixelRatio;
+    var layoutHeight = model.layoutHeight * plotGlPixelRatio;
+    var layoutWidth = model.layoutWidth * plotGlPixelRatio;
 
     var deselectedLinesColor = model.deselectedLines.color;
 
@@ -201,13 +211,13 @@ function makeItem(model, leftmost, rightmost, itemNumber, i0, i1, x, y, panelSiz
                 Math.max(1 / 255, Math.pow(1 / model.lines.color.length, 1 / 3))
         ],
 
-        scissorX: (itemNumber === leftmost ? 0 : x + overdrag) + (model.pad.l - overdrag) + model.layoutWidth * domain.x[0],
+        scissorX: (itemNumber === leftmost ? 0 : x + overdrag) + (padL - overdrag) + layoutWidth * domain.x[0],
         scissorWidth: (itemNumber === rightmost ? canvasWidth - x + overdrag : panelSizeX + 0.5) + (itemNumber === leftmost ? x + overdrag : 0),
-        scissorY: y + model.pad.b + model.layoutHeight * domain.y[0],
+        scissorY: y + padB + layoutHeight * domain.y[0],
         scissorHeight: panelSizeY,
 
-        viewportX: model.pad.l - overdrag + model.layoutWidth * domain.x[0],
-        viewportY: model.pad.b + model.layoutHeight * domain.y[0],
+        viewportX: padL - overdrag + layoutWidth * domain.x[0],
+        viewportY: padB + layoutHeight * domain.y[0],
         viewportWidth: canvasWidth,
         viewportHeight: canvasHeight
     }, constraints);
@@ -231,6 +241,16 @@ module.exports = function(canvasGL, d) {
     var isPick = d.pick;
 
     var regl = d.regl;
+    var gl = regl._gl;
+    var supportedLineWidth = gl.getParameter(gl.ALIASED_LINE_WIDTH_RANGE);
+    // ensure here that plotGlPixelRatio is within supported range; otherwise regl throws error
+    var plotGlPixelRatio = Math.max(
+        supportedLineWidth[0],
+        Math.min(
+            supportedLineWidth[1],
+            d.viewModel.plotGlPixelRatio
+        )
+    );
 
     var renderState = {
         currentRafs: {},
@@ -307,7 +327,7 @@ module.exports = function(canvasGL, d) {
         frag: fragmentShaderSource,
 
         primitive: 'lines',
-        lineWidth: 1,
+        lineWidth: plotGlPixelRatio,
         attributes: attributes,
         uniforms: {
             resolution: regl.prop('resolution'),
@@ -454,6 +474,7 @@ module.exports = function(canvasGL, d) {
             var x = p.canvasX;
             var y = p.canvasY;
             var nextX = x + p.panelSizeX;
+            var plotGlPixelRatio = p.plotGlPixelRatio;
             if(setChanged ||
                 !prevAxisOrder[i0] ||
                 prevAxisOrder[i0][0] !== x ||
@@ -467,7 +488,8 @@ module.exports = function(canvasGL, d) {
                     p.panelSizeX, p.panelSizeY,
                     p.dim0.crossfilterDimensionIndex,
                     isContext ? 0 : isPick ? 2 : 1,
-                    constraints
+                    constraints,
+                    plotGlPixelRatio
                 );
 
                 renderState.clearOnly = clearOnly;

src/traces/parcoords/parcoords.js

@@ -370,7 +370,7 @@ function calcTilt(angle, position) {
     };
 }
 
-function updatePanelLayout(yAxis, vm) {
+function updatePanelLayout(yAxis, vm, plotGlPixelRatio) {
     var panels = vm.panels || (vm.panels = []);
     var data = yAxis.data();
     for(var i = 0; i < data.length - 1; i++) {
@@ -384,6 +384,7 @@ function updatePanelLayout(yAxis, vm) {
         p.panelSizeY = vm.model.canvasHeight;
         p.y = 0;
         p.canvasY = 0;
+        p.plotGlPixelRatio = plotGlPixelRatio;
     }
 }
 
@@ -434,6 +435,7 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
     var fullLayout = gd._fullLayout;
     var svg = fullLayout._toppaper;
     var glContainer = fullLayout._glcontainer;
+    var plotGlPixelRatio = gd._context.plotGlPixelRatio;
     var paperColor = gd._fullLayout.paper_bgcolor;
 
     calcAllTicks(cdModule);
@@ -453,6 +455,7 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
         .each(function(d) {
             // FIXME: figure out how to handle multiple instances
             d.viewModel = vm[0];
+            d.viewModel.plotGlPixelRatio = plotGlPixelRatio;
             d.viewModel.paperColor = paperColor;
             d.model = d.viewModel ? d.viewModel.model : null;
         });
@@ -537,7 +540,7 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
         .classed(c.cn.yAxis, true);
 
     parcoordsControlView.each(function(p) {
-        updatePanelLayout(yAxis, p);
+        updatePanelLayout(yAxis, p, plotGlPixelRatio);
     });
 
     glLayers
@@ -576,7 +579,7 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
                     e.canvasX = e.x * e.model.canvasPixelRatio;
                 });
 
-            updatePanelLayout(yAxis, p);
+            updatePanelLayout(yAxis, p, plotGlPixelRatio);
 
             yAxis.filter(function(e) { return Math.abs(d.xIndex - e.xIndex) !== 0; })
                 .attr('transform', function(d) { return strTranslate(d.xScale(d.xIndex), 0); });
@@ -589,7 +592,7 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
             var p = d.parent;
             d.x = d.xScale(d.xIndex);
             d.canvasX = d.x * d.model.canvasPixelRatio;
-            updatePanelLayout(yAxis, p);
+            updatePanelLayout(yAxis, p, plotGlPixelRatio);
             d3.select(this)
                 .attr('transform', function(d) { return strTranslate(d.x, 0); });
             p.contextLayer && p.contextLayer.render(p.panels, false, !someFiltersActive(p));

src/traces/scatter/make_bubble_size_func.js

@@ -5,7 +5,10 @@ var isNumeric = require('fast-isnumeric');
 
 // used in the drawing step for 'scatter' and 'scattegeo' and
 // in the convert step for 'scatter3d'
-module.exports = function makeBubbleSizeFn(trace) {
+module.exports = function makeBubbleSizeFn(trace, factor) {
+    if(!factor) {
+        factor = 2;
+    }
     var marker = trace.marker;
     var sizeRef = marker.sizeref || 1;
     var sizeMin = marker.sizemin || 0;
@@ -21,7 +24,7 @@ module.exports = function makeBubbleSizeFn(trace) {
     // TODO add support for position/negative bubbles?
     // TODO add 'sizeoffset' attribute?
     return function(v) {
-        var baseSize = baseFn(v / 2);
+        var baseSize = baseFn(v / factor);
 
         // don't show non-numeric and negative sizes
         return (isNumeric(baseSize) && (baseSize > 0)) ?

src/traces/scattergl/calc.js

@@ -83,7 +83,7 @@ module.exports = function calc(gd, trace) {
     if(!hasTooManyPoints) {
         ppad = calcMarkerSize(trace, len);
     } else if(opts.marker) {
-        ppad = 2 * (opts.marker.sizeAvg || Math.max(opts.marker.size, 3));
+        ppad = opts.marker.sizeAvg || Math.max(opts.marker.size, 3);
     }
     calcAxisExpansion(gd, trace, xa, ya, x, y, ppad);
     if(opts.errorX) expandForErrorBars(trace, xa, opts.errorX);