Merge remote-tracking branch 'origin/master' into finalist-cluster-scattermapbox

Author: archmoj

.circleci/download_google_fonts.py

@@ -10,15 +10,6 @@ def download(repo, family, types) :
         req = requests.get(url, allow_redirects=True)
         open(dirOut + name, 'wb').write(req.content)
 
-download(
-    'https://github.com/eliheuer/dosis-vf/blob/master/fonts/static-fonts/',
-    'Dosis',
-    [
-        '-Regular',
-        '-Bold'
-    ]
-)
-
 download(
     'https://github.com/googlefonts/noto-fonts/blob/main/hinted/ttf/NotoSansMono/',
     'NotoSansMono',

CONTRIBUTING.md

@@ -84,21 +84,33 @@ We use the following [labels](https://github.com/plotly/plotly.js/labels) to tra
   [`package-lock.json`](https://docs.npmjs.com/files/package-lock.json) file is
   used and updated correctly.
 
-#### Step 1: Clone the plotly.js repo and install its dependencies
+#### Step 1: Fork the plotly.js repository, clone your fork and step into it
 
 ```bash
-git clone https://github.com/plotly/plotly.js.git
+git clone --depth 1 git@github.com:<your-GitHub-username>/plotly.js.git
 cd plotly.js
+```
+
+#### Step 2: Switch to a dev branch
+
+```bash
+# please do not use master or main for your dev branch
+git checkout dev-branch-name
+```
+
+#### Step 3: Install dependencies
+
+```bash
 npm install
 ```
 
-#### Step 2: Setup test environment
+#### Step 4: Setup test environment
 
 ```bash
 npm run pretest
 ```
 
-#### Step 3: Start the test dashboard
+#### Step 5: Start the test dashboard
 
 ```bash
 npm start
@@ -110,7 +122,7 @@ This command bundles up the source files with source maps using
 dev plotly.js bundle update every time a source file is saved) and opens up a
 tab in your browser.
 
-#### Step 4: Open up the console and start developing
+#### Step 6: Open up the console and start developing
 
 A typical workflow is to make some modifications to the source, update the
 test dashboard, inspect and debug the changes, then repeat. The test dashboard
@@ -138,13 +150,13 @@ Three additional helpers exist that are refreshed every second:
 There is also a search bar in the top right of the dashboard. This fuzzy-searches
 image mocks based on their file name and trace type.
 
-#### Step 5: Regenerate plot-schema in "test" folder then review & commit potential changes
+#### Step 7: Regenerate plot-schema in "test" folder then review & commit potential changes
 
 ```bash
 npm run schema
 ```
 
-#### Step 6: Review & commit potential changes made to test/plot-schema.json
+#### Step 8: Review & commit potential changes made to test/plot-schema.json
 
 > If you are editing attribute descriptions or implementing a new feature this file located in the test folder records the proposed changes to the API. Note that there is another plot-schema.json file located in the dist folder, which should only be updated by the maintainers at release time.
 

draftlogs/5615_add.md

@@ -0,0 +1 @@
+ - Add new formatting options by replacing `d3.format` method with more recent `d3-format` module [[#5615](https://github.com/plotly/plotly.js/pull/5615)]

draftlogs/5673_change.md

@@ -0,0 +1,2 @@
+ - Relax the valType of `constraintrange` in `parcoords` trace [[#5673](https://github.com/plotly/plotly.js/pull/5673)]
+

draftlogs/5771_fix.md

@@ -0,0 +1,2 @@
+ - Allow clickable legend group titles when group has no pie-like traces [[#5771](https://github.com/plotly/plotly.js/pull/5771)]
+

draftlogs/5791_change.md

@@ -0,0 +1 @@
+ - Adjust CONTRIBUTING document on how to clone plotly.js and submit pull requests from your fork [[#5791](https://github.com/plotly/plotly.js/pull/5791)]

draftlogs/5813_change.md

@@ -0,0 +1 @@
+ - Sort object key values in schema [[#5813](https://github.com/plotly/plotly.js/pull/5813)]

package-lock.json

@@ -66,7 +66,7 @@
     ]
   },
   "dependencies": {
-    "@plotly/d3": "3.7.0",
+    "@plotly/d3": "3.8.0",
     "@plotly/d3-sankey": "0.7.2",
     "@plotly/d3-sankey-circular": "0.33.1",
     "@plotly/point-cluster": "^3.1.9",
@@ -82,10 +82,12 @@
     "convex-hull": "^1.0.3",
     "country-regex": "^1.1.0",
     "d3-force": "^1.2.1",
+    "d3-format": "^1.4.5",
     "d3-geo": "^1.12.1",
     "d3-geo-projection": "^2.9.0",
     "d3-hierarchy": "^1.1.9",
     "d3-interpolate": "^1.4.0",
+    "d3-time": "^1.1.0",
     "d3-time-format": "^2.2.3",
     "delaunay-triangulate": "^1.1.6",
     "fast-isnumeric": "^1.1.4",

package.json

@@ -10,7 +10,7 @@ var ONEDAY = constants.ONEDAY;
 
 var attributes = {
     valType: 'enumerated',
-    values: Object.keys(calendars.calendars),
+    values: Lib.sortObjectKeys(calendars.calendars),
     editType: 'calc',
     dflt: 'gregorian'
 };

src/components/calendars/index.js

@@ -2,9 +2,10 @@
 
 var colorbarAttrs = require('../colorbar/attributes');
 var counterRegex = require('../../lib/regex').counter;
+var sortObjectKeys = require('../../lib/sort_object_keys');
 
 var palettes = require('./scales.js').scales;
-var paletteStr = Object.keys(palettes);
+var paletteStr = sortObjectKeys(palettes);
 
 function code(s) {
     return '`' + s + '`';

src/components/colorscale/attributes.js

@@ -1,13 +1,14 @@
 'use strict';
 
 var d3 = require('@plotly/d3');
+var Lib = require('../../lib');
+var numberFormat = Lib.numberFormat;
 var isNumeric = require('fast-isnumeric');
 var tinycolor = require('tinycolor2');
 
 var Registry = require('../../registry');
 var Color = require('../color');
 var Colorscale = require('../colorscale');
-var Lib = require('../../lib');
 var strTranslate = Lib.strTranslate;
 var svgTextUtils = require('../../lib/svg_text_utils');
 
@@ -275,7 +276,7 @@ function makePointPath(symbolNumber, r) {
 
 var HORZGRADIENT = {x1: 1, x2: 0, y1: 0, y2: 0};
 var VERTGRADIENT = {x1: 0, x2: 0, y1: 1, y2: 0};
-var stopFormatter = d3.format('~.1f');
+var stopFormatter = numberFormat('~f');
 var gradientInfo = {
     radial: {node: 'radialGradient'},
     radialreversed: {node: 'radialGradient', reversed: true},

src/components/drawing/index.js

@@ -118,7 +118,7 @@ module.exports = function getLegendData(calcdata, opts) {
         legendData[i].forEach(function(a, k) { a._preSort = k; });
         legendData[i].sort(orderFn2);
 
-        var firstItem = legendData[i][0];
+        var firstItemTrace = legendData[i][0].trace;
 
         var groupTitle = null;
         // get group title text
@@ -134,12 +134,23 @@ module.exports = function getLegendData(calcdata, opts) {
         if(reversed) legendData[i].reverse();
 
         if(groupTitle) {
+            var hasPieLike = false;
+            for(j = 0; j < legendData[i].length; j++) {
+                if(Registry.traceIs(legendData[i][j].trace, 'pie-like')) {
+                    hasPieLike = true;
+                    break;
+                }
+            }
+
             // set group title text
             legendData[i].unshift({
                 i: -1,
                 groupTitle: groupTitle,
+                noClick: hasPieLike,
                 trace: {
-                    showlegend: firstItem.trace.showlegend
+                    showlegend: firstItemTrace.showlegend,
+                    legendgroup: firstItemTrace.legendgroup,
+                    visible: firstItemTrace.visible
                 }
             });
         }

src/components/legend/get_legend_data.js

@@ -32,7 +32,7 @@ module.exports = function handleClick(g, gd, numClicks) {
         [];
 
     var legendItem = g.data()[0][0];
-    if(legendItem.groupTitle) return; // no click on group legends for now
+    if(legendItem.groupTitle && legendItem.noClick) return;
 
     var fullData = gd._fullData;
     var fullTrace = legendItem.trace;

src/components/legend/handle_click.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var d3 = require('@plotly/d3');
+var d3Time = require('d3-time');
+var titleCase = require('../../lib').titleCase;
 
 module.exports = function getUpdateObject(axisLayout, buttonLayout) {
     var axName = axisLayout._name;
@@ -22,18 +23,21 @@ function getXRange(axisLayout, buttonLayout) {
     var currentRange = axisLayout.range;
     var base = new Date(axisLayout.r2l(currentRange[1]));
     var step = buttonLayout.step;
+
+    var utcStep = d3Time['utc' + titleCase(step)];
+
     var count = buttonLayout.count;
     var range0;
 
     switch(buttonLayout.stepmode) {
         case 'backward':
-            range0 = axisLayout.l2r(+d3.time[step].utc.offset(base, -count));
+            range0 = axisLayout.l2r(+utcStep.offset(base, -count));
             break;
 
         case 'todate':
-            var base2 = d3.time[step].utc.offset(base, -count);
+            var base2 = utcStep.offset(base, -count);
 
-            range0 = axisLayout.l2r(+d3.time[step].utc.ceil(base2));
+            range0 = axisLayout.l2r(+utcStep.ceil(base2));
             break;
     }
 

src/components/rangeselector/get_update_object.js

@@ -1,6 +1,6 @@
 'use strict';
 
 module.exports = {
-    FORMAT_LINK: 'https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_format',
+    FORMAT_LINK: 'https://github.com/d3/d3-format/tree/v1.4.5#d3-format',
     DATE_FORMAT_LINK: 'https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format'
 };

src/constants/docs.js

@@ -2,15 +2,56 @@
 
 var d3 = require('@plotly/d3');
 var utcFormat = require('d3-time-format').utcFormat;
+var d3Format = require('d3-format').format;
 var isNumeric = require('fast-isnumeric');
 
 var numConstants = require('../constants/numerical');
 var MAX_SAFE = numConstants.FP_SAFE;
 var MIN_SAFE = -MAX_SAFE;
 var BADNUM = numConstants.BADNUM;
 
-var lib = module.exports = {
-    _numberFormat: d3.format // simply to test d3.format before switching to d3-format
+var lib = module.exports = {};
+
+lib.adjustFormat = function adjustFormat(formatStr) {
+    if(
+        !formatStr ||
+        /^\d[.]\df/.test(formatStr) ||
+        /[.]\d%/.test(formatStr)
+    ) return formatStr;
+
+    if(formatStr === '0.f') return '~f';
+    if(/^\d%/.test(formatStr)) return '~%';
+    if(/^\ds/.test(formatStr)) return '~s';
+
+    // try adding tilde to the start of format in order to trim
+    if(!(/^[~,.0$]/.test(formatStr)) && /[&fps]/.test(formatStr)) return '~' + formatStr;
+
+    return formatStr;
+};
+
+var seenBadFormats = {};
+lib.warnBadFormat = function(f) {
+    var key = String(f);
+    if(!seenBadFormats[key]) {
+        seenBadFormats[key] = 1;
+        lib.warn('encountered bad format: "' + key + '"');
+    }
+};
+
+lib.noFormat = function(value) {
+    return String(value);
+};
+
+lib.numberFormat = function(formatStr) {
+    var fn;
+    try {
+        fn = d3Format(lib.adjustFormat(formatStr));
+    } catch(e) {
+        lib.warnBadFormat(formatStr);
+        return lib.noFormat;
+    }
+
+    return fn;
 };
 
 lib.nestedProperty = require('./nested_property');
@@ -67,6 +108,8 @@ lib.roundUp = searchModule.roundUp;
 lib.sort = searchModule.sort;
 lib.findIndexOfMin = searchModule.findIndexOfMin;
 
+lib.sortObjectKeys = require('./sort_object_keys');
+
 var statsModule = require('./stats');
 lib.aggNums = statsModule.aggNums;
 lib.len = statsModule.len;
@@ -1120,7 +1163,7 @@ function templateFormatString(string, labels, d3locale) {
         if(format) {
             var fmt;
             if(format[0] === ':') {
-                fmt = d3locale ? d3locale.numberFormat : d3.format;
+                fmt = d3locale ? d3locale.numberFormat : lib.numberFormat;
                 value = fmt(format.replace(TEMPLATE_STRING_FORMAT_SEPARATOR, ''))(value);
             }
 

src/lib/index.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = function sortObjectKeys(obj) {
+    return Object.keys(obj).sort();
+};

src/lib/sort_object_keys.js

@@ -1,11 +1,12 @@
 'use strict';
 
 var d3 = require('@plotly/d3');
+var Lib = require('../../lib');
+var numberFormat = Lib.numberFormat;
 var tinycolor = require('tinycolor2');
 var supportsPassive = require('has-passive-events');
 
 var Registry = require('../../registry');
-var Lib = require('../../lib');
 var strTranslate = Lib.strTranslate;
 var svgTextUtils = require('../../lib/svg_text_utils');
 var Color = require('../../components/color');
@@ -1029,11 +1030,11 @@ function getEndText(ax, end) {
         return initialVal;
     } else if(ax.type === 'log') {
         dig = Math.ceil(Math.max(0, -Math.log(diff) / Math.LN10)) + 3;
-        return d3.format('.' + dig + 'g')(Math.pow(10, initialVal));
+        return numberFormat('.' + dig + 'g')(Math.pow(10, initialVal));
     } else { // linear numeric (or category... but just show numbers here)
         dig = Math.floor(Math.log(Math.abs(initialVal)) / Math.LN10) -
             Math.floor(Math.log(diff) / Math.LN10) + 4;
-        return d3.format('.' + String(dig) + 'g')(initialVal);
+        return numberFormat('.' + String(dig) + 'g')(initialVal);
     }
 }