plotly 1.41 features

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.0",
     "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';
 
@@ -211,8 +212,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

src/default_panels/StyleTracesPanel.js

@@ -195,6 +195,12 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <BinningNumeric label={_('Y Bin Size')} attr="ybins.size" axis="y" />
       <Numeric label={_('Max Y Bins')} attr="nbinsy" />
     </PlotlySection>
+    <PlotlySection label={_('Bar Position')}>
+      <Numeric label={_('Base')} attr="base" />
+      <Numeric label={_('Offset')} attr="offset" />
+      <Numeric label={_('Width')} attr="width" />
+    </PlotlySection>
+
     <TraceMarkerSection>
       <Radio
         label={_('Order')}
@@ -349,6 +355,31 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <ContourNumeric label={_('Min Contour')} attr="contours.start" />
       <ContourNumeric label={_('Max Contour')} attr="contours.end" />
     </PlotlySection>
+    <TraceTypeSection name={_('Stacking')} traceTypes={['scatter']} mode="trace">
+      <GroupCreator label={_('Group')} prefix={_('Stack')} attr="stackgroup" />
+      <Radio
+        label={_('Gaps')}
+        attr="stackgaps"
+        options={[
+          {label: _('Infer Zero'), value: 'infer zero'},
+          {label: _('Interpolate'), value: 'interpolate'},
+        ]}
+      />
+      <Radio
+        label={_('Orientation')}
+        attr="orientation"
+        options={[{label: _('Horizontal'), value: 'h'}, {label: _('Vertical'), value: 'v'}]}
+      />
+      <Radio
+        label={_('Normalization')}
+        attr="groupnorm"
+        options={[
+          {label: _('None'), value: ''},
+          {label: _('Fraction'), value: 'fraction'},
+          {label: _('Percent'), value: 'percent'},
+        ]}
+      />
+    </TraceTypeSection>
     <TraceTypeSection
       name={_('Lines')}
       traceTypes={[
@@ -397,6 +428,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
         'scattergl',
         'scatterpolar',
         'scatterpolargl',
+        'barpolar',
         'pie',
         'scatter3d',
         'scatterternary',

src/lib/__tests__/connectLayoutToPlot-test.js

@@ -13,15 +13,15 @@ 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" step={10} attr="width" />
+              <Numeric label="Height" step={10} attr="height" />
             </Layout>
           </PlotlyPanel>
         </Editor>
       )
-        .find('[attr="width"]')
+        .find('[attr="height"]')
         .find(NumericInput);
 
       expect(wrapper.prop('value')).toBe(100);
@@ -32,22 +32,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" step={10} attr="width" />
+              <Numeric label="Height" 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}});
     });
 
     it(`automatically computes min and max defaults`, () => {

src/lib/computeTraceOptionsFromSchema.js

@@ -128,6 +128,10 @@ function computeTraceOptionsFromSchema(schema, _, context) {
       value: 'scatterpolargl',
       label: _('Polar Scatter GL'),
     },
+    {
+      value: 'barpolar',
+      label: _('Polar Bar'),
+    },
   ].filter(obj => traceTypes.indexOf(obj.value) !== -1);
 
   const traceIndex = traceType => traceOptions.findIndex(opt => opt.value === traceType);

src/lib/constants.js

@@ -73,7 +73,7 @@ export const TRACE_TO_AXIS = {
   gl3d: ['scatter3d', 'surface', 'mesh3d', 'cone', 'streamtube'],
   geo: ['scattergeo', 'choropleth'],
   mapbox: ['scattermapbox'],
-  polar: ['scatterpolar', 'scatterpolargl'],
+  polar: ['scatterpolar', 'scatterpolargl', 'barpolar'],
 };
 
 // Note: scene, and xaxis/yaxis were added for convenience sake even though they're not subplot types
@@ -117,6 +117,8 @@ export const TRANSFORMABLE_TRACES = [
   'histogram2d',
 ];
 
+export const TRACES_WITH_GL = ['scatter', 'scatterpolar', 'scattergl', 'scatterpolargl'];
+
 export const COLORS = {
   charcoal: '#444444',
   white: '#ffffff',

src/lib/customTraceType.js

@@ -16,7 +16,8 @@ export function plotlyTraceToCustomTrace(trace) {
 
   if (
     (type === 'scatter' || type === 'scattergl') &&
-    ['tozeroy', 'tozerox', 'tonexty', 'tonextx', 'toself', 'tonext'].includes(trace.fill)
+    ((trace.stackgroup !== null && trace.stackgroup !== undefined) || // eslint-disable-line no-undefined
+      ['tozeroy', 'tozerox', 'tonexty', 'tonextx', 'toself', 'tonext'].includes(trace.fill))
   ) {
     return 'area';
   } else if (
@@ -37,7 +38,7 @@ export function traceTypeToPlotlyInitFigure(traceType, gl = '') {
     case 'scatter':
       return {type: 'scatter' + gl, mode: 'markers', fill: 'none'};
     case 'area':
-      return {type: 'scatter' + gl, fill: 'tozeroy'};
+      return {type: 'scatter' + gl, mode: 'lines', stackgroup: 1};
     case 'scatterpolar':
       return {type: 'scatterpolar' + gl};
     case 'ohlc':
@@ -66,8 +67,6 @@ export function traceTypeToPlotlyInitFigure(traceType, gl = '') {
     case 'violin':
       return {
         type: 'violin',
-        box: {visible: false},
-        meanline: {visible: false},
         bandwidth: 0,
       };
     case 'line3d':

src/lib/test-utils.js

@@ -65,7 +65,7 @@ const fixtures = {
           {
             type: 'scatter',
             mode: 'markers+lines',
-            fill: 'tozeroy',
+            stackgroup: 1,
             xsrc: 'x1',
             ysrc: 'y1',
           },
@@ -136,7 +136,7 @@ function setupGraphDiv(figure) {
 
   mockMissingSvgApis();
 
-  plotly.plot(gd, figure);
+  plotly.newPlot(gd, figure);
   return gd;
 }
 

src/lib/traceTypes.js

@@ -177,6 +177,11 @@ export const traceTypes = _ => [
     label: _('Polar Scatter'),
     category: chartCategory(_).SPECIALIZED,
   },
+  {
+    value: 'barpolar',
+    label: _('Polar Bar'),
+    category: chartCategory(_).SPECIALIZED,
+  },
   {
     value: 'scatterternary',
     label: _('Ternary Scatter'),