plotly 1.41 features

Author: dmt0

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({stackgroup: 1, type: 'scatter'});
   });
 });

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>
+    <PlotlySection name={_('Stacking')}>
+      <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'},
+        ]}
+      />
+    </PlotlySection>
     <TraceTypeSection
       name={_('Lines')}
       traceTypes={[
@@ -397,6 +428,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
         'scattergl',
         'scatterpolar',
         'scatterpolargl',
+        'barpolar',
         'pie',
         'scatter3d',
         'scatterternary',