Merge pull request #808 from plotly/pre143

Plotly.js 1.43.0 upgrade

Author: nicolaskruchten

dev/dataSources.js

@@ -1728,16 +1728,10 @@ export default {
   'jagged ints': [2, 1, 3, 5, 4, 6],
   'toggle ints': [1, -1, 1, -1, 1, -1],
   'big ints': [1000, 10100, 10000, 20000, 100000],
-  dates: [
-    '2010-01-01',
-    '2010-07-01',
-    '2011-01-01',
-    '2011-07-01',
-    '2012-01-01',
-    '2012-06-01',
-  ],
+  dates: ['2010-01-01', '2010-07-01', '2011-01-01', '2011-07-01', '2012-01-01', '2012-06-01'],
   months: ['January', 'February', 'March', 'April', 'May', 'June'],
   colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo'],
+  buckets: ['A', 'A', 'A', 'B', 'B', 'B'],
   'blue and red': ['blue', 'red'],
   countries: [
     'Angola',

examples/custom/src/CustomEditor.js

@@ -57,7 +57,7 @@ export default class CustomEditor extends Component {
               />
               <Flaglist
                 label="Flaglist"
-                attr="titlefont.family"
+                attr="title.font.family"
                 show
                 options={[{label: 'Yes', value: 'y'}, {label: 'No', value: 'n'}]}
               />

package.json

@@ -15,7 +15,7 @@
     "fast-isnumeric": "^1.1.1",
     "immutability-helper": "^2.7.1",
     "plotly-icons": "1.2.2",
-    "plotly.js": "1.42.1",
+    "plotly.js": "1.43.0",
     "prop-types": "^15.5.10",
     "raf": "^3.4.0",
     "react-color": "^2.13.8",
@@ -125,4 +125,4 @@
     "watch": "babel src --watch --out-dir lib --source-maps | node-sass -w src/styles/main.scss lib/react-chart-editor.css",
     "watch-test": "jest --watch"
   }
-}
+}

src/components/fields/ColorscalePicker.js

@@ -30,7 +30,7 @@ export class UnconnectedColorscalePicker extends Component {
     const colorscale = Array.isArray(fullValue) ? fullValue.map(v => v[1]) : null;
 
     return (
-      <Field {...this.props}>
+      <Field {...this.props} fieldContainerClassName="field__colorscale">
         <ColorscalePickerWidget
           selected={colorscale}
           onColorscaleChange={this.onUpdate}

src/components/fields/DataSelector.js

@@ -35,6 +35,18 @@ export class UnconnectedDataSelector extends Component {
     this.is2D = false;
     if (props.container) {
       this.is2D =
+        ((props.attr === 'x' || props.attr === 'y') &&
+          [
+            'scatter',
+            'scattergl',
+            'bar',
+            'heatmap',
+            'heatmapgl',
+            'violin',
+            'box',
+            'contour',
+            'contourgl',
+          ].includes(props.container.type)) ||
         (props.attr === 'z' &&
           [
             'contour',
@@ -60,14 +72,23 @@ export class UnconnectedDataSelector extends Component {
     const update = {};
     let data;
 
-    if (Array.isArray(value)) {
-      data = value.filter(v => Array.isArray(this.dataSources[v])).map(v => this.dataSources[v]);
+    const adjustedValue =
+      Array.isArray(value) &&
+      value.length === 1 &&
+      (this.props.attr === 'x' || this.props.attr === 'y')
+        ? value[0]
+        : value;
+
+    if (Array.isArray(adjustedValue)) {
+      data = adjustedValue
+        .filter(v => Array.isArray(this.dataSources[v]))
+        .map(v => this.dataSources[v]);
     } else {
-      data = this.dataSources[value] || null;
+      data = this.dataSources[adjustedValue] || null;
     }
 
     update[this.props.attr] = maybeTransposeData(data, this.srcAttr, this.props.container.type);
-    update[this.srcAttr] = maybeAdjustSrc(value, this.srcAttr, this.props.container.type, {
+    update[this.srcAttr] = maybeAdjustSrc(adjustedValue, this.srcAttr, this.props.container.type, {
       fromSrc: this.context.srcConverters ? this.context.srcConverters.fromSrc : null,
     });
 

src/components/fields/TextEditor.js

@@ -2,12 +2,13 @@ import Field from './Field';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {connectToContainer} from 'lib';
+import nestedProperty from 'plotly.js/src/lib/nested_property';
 import LaTeX from '../widgets/text_editors/LaTeX';
 import RichText from '../widgets/text_editors/RichText';
 import MultiFormat from '../widgets/text_editors/MultiFormat';
 import HTML from '../widgets/text_editors/HTML';
 
-class UnconnectedTextEditor extends Component {
+export class UnconnectedTextEditor extends Component {
   render() {
     const {
       attr,
@@ -24,7 +25,7 @@ class UnconnectedTextEditor extends Component {
     let fullValue = this.props.fullValue;
 
     let placeholder;
-    if (multiValued || (fullValue && (!container || !container[attr]))) {
+    if (multiValued || (fullValue && (!container || !nestedProperty(container, attr)))) {
       placeholder = fullValue;
       fullValue = '';
     }

src/components/fields/derived.js

@@ -8,6 +8,7 @@ import {UnconnectedAxisRangeValue} from './AxisRangeValue';
 import {UnconnectedRadio} from './Radio';
 import Info from './Info';
 import {UnconnectedColorPicker} from './ColorPicker';
+import {UnconnectedTextEditor} from './TextEditor';
 import {UnconnectedVisibilitySelect} from './VisibilitySelect';
 import {connectToContainer, getAllAxes, getAxisTitle, axisIdToAxisName} from 'lib';
 
@@ -518,6 +519,27 @@ export const TextInfo = connectToContainer(UnconnectedFlaglist, {
   },
 });
 
+export const HoverTemplateSwitch = connectToContainer(UnconnectedRadio, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {localize: _} = context;
+
+    plotProps.options = [
+      {label: _('Values'), value: ''},
+      {label: _('Template'), value: plotProps.fullValue || ' '},
+    ];
+    return plotProps;
+  },
+});
+
+export const HoverTemplateText = connectToContainer(UnconnectedTextEditor, {
+  modifyPlotProps: (props, context, plotProps) => {
+    if (plotProps.isVisible && plotProps.fullValue === '') {
+      plotProps.isVisible = false;
+    }
+    return plotProps;
+  },
+});
+
 export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
   modifyPlotProps: (props, context, plotProps) => {
     const {localize: _, container} = context;

src/components/fields/index.js

@@ -43,6 +43,8 @@ import {
   ContourNumeric,
   FillDropdown,
   HoverInfo,
+  HoverTemplateText,
+  HoverTemplateSwitch,
   NumericFraction,
   NumericFractionDomain,
   PositioningNumeric,
@@ -85,6 +87,8 @@ export {
   Flaglist,
   FontSelector,
   HoverInfo,
+  HoverTemplateText,
+  HoverTemplateSwitch,
   Info,
   NumericFraction,
   NumericFractionDomain,

src/components/index.js

@@ -24,6 +24,8 @@ import {
   Flaglist,
   FontSelector,
   HoverInfo,
+  HoverTemplateText,
+  HoverTemplateSwitch,
   Info,
   NumericFraction,
   NumericFractionDomain,
@@ -132,6 +134,8 @@ export {
   Fold,
   FontSelector,
   HoverInfo,
+  HoverTemplateText,
+  HoverTemplateSwitch,
   Info,
   NumericFraction,
   NumericFractionDomain,

src/components/widgets/ColorscalePicker.js

@@ -41,8 +41,9 @@ class Scale extends Component {
 
     return (
       <div className="customPickerContainer__outer">
-        <Colorscale colorscale={selected} onClick={this.onClick} />
-
+        <div className="customPickerContainer__inner">
+          <Colorscale colorscale={selected} onClick={this.onClick} />
+        </div>
         {showColorscalePicker ? (
           <div className="customPickerContainer">
             <Dropdown