Merge pull request #741 from plotly/141

plotly 1.41.2 features

Author: nicolaskruchten

dev/percy/panelTest.json

@@ -73,7 +73,7 @@
         "sizesrc": "x1",
         "sizemode": "diameter"
       },
-      "fill": "tozerox",
+      "stackgroup": 1,
       "mode": "lines+markers+text",
       "line": {
         "dash": "solid",

package.json

@@ -15,7 +15,7 @@
     "fast-isnumeric": "^1.1.1",
     "immutability-helper": "^2.7.1",
     "plotly-icons": "1.2.2",
-    "plotly.js": "1.40.1",
+    "plotly.js": "1.41.2",
     "prop-types": "^15.5.10",
     "raf": "^3.4.0",
     "react-color": "^2.13.8",

src/components/containers/__tests__/Layout-test.js

@@ -13,17 +13,16 @@ Layouts.forEach(Layout => {
   describe(`<${Layout.displayName}>`, () => {
     it(`wraps container with fullValue pointing to gd._fullLayout`, () => {
       const wrapper = mount(
-        <Editor {...fixtures.scatter({layout: {width: 100}})}>
+        <Editor {...fixtures.scatter({layout: {height: 100}})}>
           <PlotlyPanel>
             <Layout>
-              <Numeric label="Width" min={100} step={10} attr="width" />
+              <Numeric label="Height" min={100} step={10} attr="height" />
             </Layout>
           </PlotlyPanel>
         </Editor>
       )
-        .find('[attr="width"]')
+        .find('[attr="height"]')
         .find(NumericInput);
-
       expect(wrapper.prop('value')).toBe(100);
     });
 
@@ -32,22 +31,22 @@ Layouts.forEach(Layout => {
       const wrapper = mount(
         <Editor
           beforeUpdateLayout={beforeUpdateLayout}
-          {...fixtures.scatter({layout: {width: 100}})}
+          {...fixtures.scatter({layout: {height: 100}})}
         >
           <PlotlyPanel>
             <Layout>
-              <Numeric label="Width" min={100} step={10} attr="width" />
+              <Numeric label="Height" min={100} step={10} attr="height" />
             </Layout>
           </PlotlyPanel>
         </Editor>
       )
-        .find('[attr="width"]')
+        .find('[attr="height"]')
         .find(NumericInput);
 
-      const widthUpdate = 200;
-      wrapper.prop('onChange')(widthUpdate);
+      const heightUpdate = 200;
+      wrapper.prop('onChange')(heightUpdate);
       const payload = beforeUpdateLayout.mock.calls[0][0];
-      expect(payload).toEqual({update: {width: widthUpdate}});
+      expect(payload).toEqual({update: {height: heightUpdate}});
     });
   });
 });

src/components/fields/TraceSelector.js

@@ -7,14 +7,11 @@ import {
   plotlyTraceToCustomTrace,
   computeTraceOptionsFromSchema,
 } from 'lib';
+import {TRACES_WITH_GL} from 'lib/constants';
 import {TraceTypeSelector, TraceTypeSelectorButton, RadioBlocks} from 'components/widgets';
 import Field from './Field';
 import {CogIcon} from 'plotly-icons';
 
-export const glAvailable = type => {
-  return ['scatter', 'scatterpolar', 'scattergl', 'scatterpolargl'].includes(type);
-};
-
 class TraceSelector extends Component {
   constructor(props, context) {
     super(props, context);
@@ -125,14 +122,14 @@ class TraceSelector extends Component {
                   })
                 }
               />
-              {!glAvailable(this.props.container.type) ? (
+              {!TRACES_WITH_GL.includes(this.props.container.type) ? (
                 ''
               ) : (
                 <CogIcon className="menupanel__icon" onClick={this.toggleGlControls} />
               )}
             </div>
           </Field>
-          {!(glAvailable(this.props.container.type) && this.state.showGlControls) ? (
+          {!(TRACES_WITH_GL.includes(this.props.container.type) && this.state.showGlControls) ? (
             ''
           ) : (
             <Field label={_('Rendering')}>

src/components/fields/__tests__/TraceSelector-test.js

@@ -147,7 +147,7 @@ describe('TraceSelector', () => {
     });
   });
 
-  it('updates type=scatter fill=tozeroy when type=area', () => {
+  it('updates type=scatter stackgroup=1 when type=area', () => {
     const beforeUpdateTraces = jest.fn();
     const editorProps = {
       ...fixtures.scatter({data: [{type: 'scatter', mode: 'markers'}]}),
@@ -166,6 +166,6 @@ describe('TraceSelector', () => {
     innerDropdown.prop('onChange')('area');
 
     const payload = beforeUpdateTraces.mock.calls[0][0];
-    expect(payload.update).toEqual({fill: 'tozeroy', type: 'scatter'});
+    expect(payload.update).toEqual({type: 'scatter', mode: 'lines', stackgroup: 1});
   });
 });

src/components/fields/derived.js

@@ -541,7 +541,7 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
         {label: _('B'), value: 'b'},
         {label: _('C'), value: 'c'},
       ];
-    } else if (['scatterpolar', 'scatterpolargl'].includes(container.type)) {
+    } else if (['scatterpolar', 'scatterpolargl', 'barpolar'].includes(container.type)) {
       options = [{label: _('R'), value: 'r'}, {label: _('Theta'), value: 'theta'}];
     } else if (container.type === 'pie') {
       options = [

src/components/widgets/TraceTypeSelector.js

@@ -2,8 +2,8 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {SearchIcon, ThumnailViewIcon, GraphIcon} from 'plotly-icons';
 import Modal from 'components/containers/Modal';
-import {glAvailable} from 'components/fields/TraceSelector';
 import {traceTypeToPlotlyInitFigure, renderTraceIcon, plotlyTraceToCustomTrace} from 'lib';
+import {TRACES_WITH_GL} from 'lib/constants';
 
 const renderActionItems = (actionItems, item) =>
   actionItems
@@ -83,8 +83,8 @@ class TraceTypeSelector extends Component {
     } = this.props;
     const computedValue = traceTypeToPlotlyInitFigure(value);
     if (
-      (type.endsWith('gl') || (!glAvailable(type) && glByDefault)) &&
-      glAvailable(computedValue.type) &&
+      (type.endsWith('gl') || (!TRACES_WITH_GL.includes(type) && glByDefault)) &&
+      TRACES_WITH_GL.includes(computedValue.type) &&
       !computedValue.type.endsWith('gl')
     ) {
       computedValue.type += 'gl';

src/default_panels/GraphCreatePanel.js

@@ -108,7 +108,7 @@ const GraphCreatePanel = (props, {localize: _, setPanel}) => {
       <DataSelector label={_('Headers')} attr="header.values" />
       <DataSelector label={_('Columns')} attr="cells.values" />
 
-      <TraceTypeSection traceTypes={['scatterpolar', 'scatterpolargl']} mode="trace">
+      <TraceTypeSection traceTypes={['scatterpolar', 'scatterpolargl', 'barpolar']} mode="trace">
         <DataSelector label={_('Radius')} attr="r" />
         <DataSelector label={_('Theta')} attr="theta" />
         <Dropdown

src/default_panels/GraphSubplotsPanel.js

@@ -13,6 +13,7 @@ import {
   Numeric,
   ColorPicker,
   VisibilitySelect,
+  NumericFraction,
 } from '../components';
 import {TRACE_TO_AXIS} from '../lib/constants';
 
@@ -59,6 +60,15 @@ const GraphSubplotsPanel = (props, {localize: _}) => (
       <ColorPicker label={_('Plot Background')} attr="bgcolor" />
     </PlotlySection>
 
+    <PlotlySection name={_('Bar Options')}>
+      <Radio
+        label={_('Bar Mode')}
+        attr="barmode"
+        options={[{label: _('Stack'), value: 'stack'}, {label: _('Overlay'), value: 'overlay'}]}
+      />
+      <NumericFraction label={_('Bar Padding')} attr="bargap" showSlider />
+    </PlotlySection>
+
     <PlotlySection name={_('Map Style')}>
       <Dropdown
         label={_('Mapbox Style')}
@@ -211,8 +221,9 @@ const GraphSubplotsPanel = (props, {localize: _}) => (
     </PlotlySection>
 
     <PlotlySection name={_('Polar Sector')}>
-      <Numeric label={_('Min')} attr="sector[0]" max={360} min={-360} showSlider />
-      <Numeric label={_('Max')} attr="sector[1]" max={360} min={-360} showSlider />
+      <Numeric label={_('Min')} attr="sector[0]" min={-360} max={360} showSlider />
+      <Numeric label={_('Max')} attr="sector[1]" min={-360} max={360} showSlider />
+      <NumericFraction label={_('Hole')} attr="hole" min={0} max={100} showSlider />
     </PlotlySection>
   </SubplotAccordion>
 );

src/default_panels/StyleLayoutPanel.js

@@ -12,6 +12,7 @@ import {
   TraceRequiredPanel,
   VisibilitySelect,
   HovermodeDropdown,
+  Flaglist,
 } from '../components';
 import {HoverColor} from '../components/fields/derived';
 
@@ -89,6 +90,16 @@ const StyleLayoutPanel = (props, {localize: _}) => (
           clearable={false}
         />
       </PlotlySection>
+      <PlotlySection name={_('Click')} attr="clickmode">
+        <Flaglist
+          label={_('Mode')}
+          attr="clickmode"
+          options={[
+            {label: _('Click Event'), value: 'event'},
+            {label: _('Select Data Point'), value: 'select'},
+          ]}
+        />
+      </PlotlySection>
       <PlotlySection name={_('Hover')}>
         <HovermodeDropdown label={_('Mode')} attr="hovermode">
           <HoverColor