Merge pull request #421 from plotly/polar

Scatterpolar

Author: VeraZab

src/DefaultEditor.js

@@ -29,7 +29,7 @@ const DefaultEditor = ({children, localize: _}) => (
       <StyleShapesPanel group={_('Style')} name={_('Shapes')} />
       <StyleImagesPanel group={_('Style')} name={_('Images')} />
       <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />
-      <StyleUpdateMenusPanel group={_('Style')} name={_('Update Menus')} />
+      <StyleUpdateMenusPanel group={_('Style')} name={_('Menus')} />
       {children ? children : null}
     </PanelMenuWrapper>
   </Fragment>

src/components/containers/derived.js

@@ -8,13 +8,23 @@ import {connectLayoutToPlot, containerConnectedContextTypes} from 'lib';
 const LayoutPanel = connectLayoutToPlot(Panel);
 
 const TraceTypeSection = (props, context) => {
-  const {fullContainer} = context;
-  if (
+  const {fullContainer, fullData} = context;
+
+  const ifConnectedToTrace =
     fullContainer &&
     ((fullContainer._fullInput &&
       props.traceTypes.includes(fullContainer._fullInput.type)) ||
-      props.traceTypes.includes(fullContainer.type))
-  ) {
+      props.traceTypes.includes(fullContainer.type));
+
+  const ifConnectedToLayout =
+    fullData &&
+    fullData.some(
+      t =>
+        props.traceTypes.includes(t._fullInput.type) ||
+        fullData.some(t => props.traceTypes.includes(t.type))
+    );
+
+  if (ifConnectedToTrace || ifConnectedToLayout) {
     return <Section {...props} />;
   }
 

src/components/fields/AxesSelector.js

@@ -19,16 +19,9 @@ class AxesSelector extends Component {
   render() {
     const {axesTargetHandler, axesOptions, axesTarget} = this.context;
     const {localize: _} = this.props;
-    const hasSecondaryAxis =
-      axesOptions &&
-      axesOptions.some(option => {
-        return (
-          option.axisGroup &&
-          this.context.fullLayout._subplots[option.axisGroup].length > 1
-        );
-      });
+    const maxOptions = axesOptions.length > 4; // eslint-disable-line
 
-    if (hasSecondaryAxis) {
+    if (maxOptions) {
       return (
         <Field {...this.props} label={_('Axis to Style')}>
           <Dropdown

src/components/fields/DataSelector.js

@@ -39,7 +39,9 @@ export class UnconnectedDataSelector extends Component {
 
     this.is2D =
       (props.attr === 'z' &&
-        ['contour', 'heatmap', 'surface'].includes(props.container.type)) ||
+        ['contour', 'heatmap', 'surface', 'heatmapgl'].includes(
+          props.container.type
+        )) ||
       (props.container.type === 'table' && props.attr !== 'columnorder');
   }
 

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

@@ -27,8 +27,8 @@ describe('<AnnotationRef>', () => {
     const options = drop.first().prop('options');
     expect(options.length).toBe(3);
     expect(options[0]).toEqual({label: 'Canvas', value: 'paper'});
-    expect(options[1]).toEqual({label: 'Y', value: 'y'});
-    expect(options[2]).toEqual({label: 'Y Axis: yaxis2 title', value: 'y2'});
+    expect(options[1]).toEqual({label: 'Y 1', value: 'y'});
+    expect(options[2]).toEqual({label: 'Y: yaxis2 title', value: 'y2'});
   });
 
   it('sends update for a[x|y]ref attr on [x|y]ref change', () => {
@@ -114,7 +114,7 @@ describe('<AnnotationArrowRef>', () => {
     const options = drop.first().prop('options');
     expect(options.length).toBe(3);
     expect(options[0]).toEqual({label: 'in pixels', value: 'pixel'});
-    expect(options[1]).toEqual({label: 'Y', value: 'y'});
-    expect(options[2]).toEqual({label: 'Y Axis: yaxis2 title', value: 'y2'});
+    expect(options[1]).toEqual({label: 'Y 1', value: 'y'});
+    expect(options[2]).toEqual({label: 'Y: yaxis2 title', value: 'y2'});
   });
 });

src/components/fields/derived.js

@@ -41,7 +41,6 @@ export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, {
     }
     options.push({label: _('Free'), value: 'free'});
     plotProps.options = options;
-    plotProps.clearable = false;
   },
 });
 
@@ -131,12 +130,7 @@ export const AxisSide = connectToContainer(UnconnectedRadio, {
       return;
     }
 
-    plotProps.options = [
-      {label: _('Left'), value: 'left'},
-      {label: _('Right'), value: 'right'},
-      {label: _('Bottom'), value: 'bottom'},
-      {label: _('Top'), value: 'top'},
-    ];
+    plotProps.isVisible = false;
   },
 });
 
@@ -312,6 +306,12 @@ export const LayoutNumericFraction = connectLayoutToPlot(
   })
 );
 
+export const LayoutNumeric = connectLayoutToPlot(
+  connectToContainer(UnconnectedNumeric, {
+    supplyPlotProps: supplyLayoutPlotProps,
+  })
+);
+
 export const LayoutNumericFractionInverse = connectLayoutToPlot(
   connectToContainer(UnconnectedNumericFraction, {
     supplyPlotProps: supplyLayoutPlotProps,
@@ -595,6 +595,15 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
       plotProps.isVisible = false;
     }
 
+    if (['scatterpolar', 'scatterpolargl'].includes(context.container.type)) {
+      options = [
+        {label: _('R'), value: 'r'},
+        {label: _('Theta'), value: 'theta'},
+        {label: _('Text'), value: 'text'},
+        {label: _('Name'), value: 'name'},
+      ];
+    }
+
     plotProps.options = options;
   },
 });

src/components/fields/index.js

@@ -37,6 +37,7 @@ import {
   PositioningNumeric,
   NumericFractionInverse,
   LayoutNumericFraction,
+  LayoutNumeric,
   LayoutNumericFractionInverse,
   RangesliderVisible,
   RangeselectorVisible,
@@ -71,6 +72,7 @@ export {
   HoverInfo,
   Info,
   LayoutNumericFraction,
+  LayoutNumeric,
   LayoutNumericFractionInverse,
   NumericFraction,
   NumericFractionDomain,

src/components/index.js

@@ -25,6 +25,7 @@ import {
   HoverInfo,
   Info,
   LayoutNumericFraction,
+  LayoutNumeric,
   LayoutNumericFractionInverse,
   NumericFraction,
   NumericFractionDomain,
@@ -113,6 +114,7 @@ export {
   PositioningNumeric,
   NumericFractionInverse,
   LayoutNumericFraction,
+  LayoutNumeric,
   LayoutNumericFractionInverse,
   LayoutPanel,
   LineDashSelector,

src/default_panels/GraphCreatePanel.js

@@ -13,6 +13,8 @@ import {
   TraceSelector,
   TextEditor,
   Numeric,
+  TraceTypeSection,
+  LayoutNumeric,
 } from '../components';
 import {localize} from '../lib';
 
@@ -66,6 +68,38 @@ const GraphCreatePanel = ({localize: _}) => {
         <DataSelector label={_('Columns')} attr="cells.values" />
       </Section>
 
+      <TraceTypeSection
+        name={_('Data')}
+        traceTypes={['scatterpolar', 'scatterpolargl']}
+      >
+        <DataSelector label={_('Radius')} attr="r" />
+        <DataSelector label={_('Theta')} attr="theta" />
+        <Dropdown
+          label={_('Theta Unit')}
+          options={[
+            {label: _('Radians'), value: 'radians'},
+            {label: _('Degrees'), value: 'degrees'},
+            {label: _('Gradians'), value: 'gradians'},
+          ]}
+          attr="thetaunit"
+          clearable={false}
+        />
+        <LayoutNumeric
+          attr="polar.sector[0]"
+          label={_('Theta Start')}
+          min={0}
+          max={360}
+          showSlider
+        />
+        <LayoutNumeric
+          attr="polar.sector[1]"
+          label={_('Theta End')}
+          min={0}
+          max={360}
+          showSlider
+        />
+      </TraceTypeSection>
+
       <Section name={_('Axes to Use')}>
         <AxisCreator attr="fake_attr" localize={_} />
       </Section>

src/default_panels/StyleAxesPanel.js

@@ -25,6 +25,7 @@ import {
 } from '../components';
 
 import {localize} from '../lib';
+import {TRACE_TO_AXIS} from '../lib/constants';
 
 class StyleAxesPanel extends Component {
   constructor(props, context) {
@@ -62,6 +63,15 @@ class StyleAxesPanel extends Component {
         </AxesFold>
 
         <AxesFold name={_('Layout')}>
+          <Dropdown
+            label={_('Direction')}
+            attr="direction"
+            options={[
+              {label: _('Clockwise'), value: 'clockwise'},
+              {label: _('Counter Clockwise'), value: 'counterclockwise'},
+            ]}
+            clearable={false}
+          />
           <Section name={_('Boundaries')} attr="domain[0]">
             <AxisOverlayDropdown
               label={_('Overlay')}
@@ -75,14 +85,17 @@ class StyleAxesPanel extends Component {
             <NumericFractionDomain label={_('End Position')} attr="domain[1]" />
           </Section>
 
-          <Section name={_('Anchor')}>
+          <TraceTypeSection
+            name={_('Anchor')}
+            traceTypes={TRACE_TO_AXIS.cartesian}
+          >
             <AxisAnchorDropdown
               label={_('Anchor To')}
               attr="anchor"
               localize={_}
             />
             <AxisSide label={_('Side')} attr="side" localize={_} />
-          </Section>
+          </TraceTypeSection>
         </AxesFold>
 
         <AxesFold name={_('Range')}>
@@ -111,7 +124,12 @@ class StyleAxesPanel extends Component {
           </Section>
           <TraceTypeSection
             name={_('Range')}
-            traceTypes={['choropleth', 'scattergeo']}
+            traceTypes={[
+              'choropleth',
+              'scattergeo',
+              'scatterpolar',
+              'scatterpolargl',
+            ]}
             attr="range"
           >
             <AxesRange label={_('Min')} attr="range[0]" />
@@ -197,7 +215,15 @@ class StyleAxesPanel extends Component {
             <FontSelector label={_('Typeface')} attr="tickfont.family" />
             <Numeric label={_('Font Size')} attr="tickfont.size" units="px" />
             <ColorPicker label={_('Font Color')} attr="tickfont.color" />
-
+            <Dropdown
+              label={_('Direction')}
+              attr="side"
+              options={[
+                {label: _('Clockwise'), value: 'clockwise'},
+                {label: _('Counter Clockwise'), value: 'counterclockwise'},
+              ]}
+              clearable={false}
+            />
             <Dropdown
               label={_('Angle')}
               attr="tickangle"
@@ -285,6 +311,14 @@ class StyleAxesPanel extends Component {
           </Section>
         </AxesFold>
         <AxesFold name={_('Tick Markers')}>
+          <Radio
+            label={_('Separate Thousands')}
+            attr="separatethousands"
+            options={[
+              {label: _('True'), value: true},
+              {label: _('False'), value: false},
+            ]}
+          />
           <Section name={_('Tick Markers')} attr="ticks">
             <Radio
               attr="ticks"

src/default_panels/StyleLayoutPanel.js

@@ -27,6 +27,7 @@ const StyleLayoutPanel = ({localize: _}) => (
       <CanvasSize label={_('Fixed Width')} attr="width" units="px" />
       <CanvasSize label={_('Fixed Height')} attr="height" units="px" />
       <ColorPicker label={_('Plot Background')} attr="plot_bgcolor" />
+      <ColorPicker label={_('Plot Background')} attr="polar.bgcolor" />
       <ColorPicker label={_('Margin Color')} attr="paper_bgcolor" />
       <Radio
         label="Hover Interaction"