Symbol selector

src/DefaultEditor.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   AxesSelector,
   AxesRange,
+  CanvasSize,
   ColorPicker,
   DataSelector,
   Dropdown,
@@ -14,8 +15,10 @@ import {
   PanelMenuWrapper,
   Radio,
   Section,
-  SubPanel,
+  MenuPanel,
+  SymbolSelector,
   TraceAccordion,
+  TraceMarkerSection,
   TraceSelector,
 } from './components';
 import {DEFAULT_FONTS} from './constants';
@@ -25,32 +28,6 @@ const LayoutPanel = connectLayoutToPlot(Panel);
 const AxesFold = connectAxesToLayout(Fold);
 
 class DefaultEditor extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    const capitalize = s => s.charAt(0).toUpperCase() + s.substring(1);
-
-    // Filter out Polar "area" type as it is fairly broken and we want to present
-    // scatter with fill as an "area" chart type for convenience.
-    const traceTypes = Object.keys(context.plotSchema.traces).filter(
-      t => t !== 'area'
-    );
-
-    const labels = traceTypes.map(capitalize);
-    this.traceOptions = traceTypes.map((t, i) => ({
-      label: labels[i],
-      value: t,
-    }));
-
-    const i = this.traceOptions.findIndex(opt => opt.value === 'scatter');
-    this.traceOptions.splice(
-      i + 1,
-      0,
-      {label: 'Line', value: 'line'},
-      {label: 'Area', value: 'area'}
-    );
-  }
-
   render() {
     const _ = this.props.localize;
 
@@ -62,7 +39,6 @@ class DefaultEditor extends Component {
               label="Plot Type"
               attr="type"
               clearable={false}
-              options={this.traceOptions}
               show
             />
 
@@ -114,6 +90,18 @@ class DefaultEditor extends Component {
               <Numeric label={_('Opacity')} step={0.1} attr="opacity" />
             </Section>
 
+            <Section name={_('Text Attributes')}>
+              <Flaglist
+                attr="textinfo"
+                options={[
+                  {label: 'Label', value: 'label'},
+                  {label: 'Text', value: 'text'},
+                  {label: 'Value', value: 'value'},
+                  {label: '%', value: 'percent'},
+                ]}
+              />
+            </Section>
+
             <Section name={_('Display')}>
               <Flaglist
                 attr="mode"
@@ -141,25 +129,25 @@ class DefaultEditor extends Component {
               <ColorPicker label={_('Color')} attr="fillcolor" />
             </Section>
 
-            <Section name={_('Points')}>
-              <Numeric
-                label={_('Marker Opacity')}
-                step={0.1}
-                attr="marker.opacity"
+            <TraceMarkerSection>
+              <Radio
+                attr="orientation"
+                options={[
+                  {label: _('Vertical'), value: 'v'},
+                  {label: _('Horizontal'), value: 'h'},
+                ]}
               />
-
-              <ColorPicker label={_('Marker Color')} attr="marker.color" />
-
+              <ColorPicker label={_('Color')} attr="marker.color" />
+              <Numeric label={_('Opacity')} step={0.1} attr="marker.opacity" />
               <Numeric label={_('Size')} attr="marker.size" />
-
-              <Numeric label={_('Line width')} attr="marker.line.width" />
-            </Section>
+              <SymbolSelector label={_('Symbol')} attr="marker.symbol" />
+              <Numeric label={_('Border Width')} attr="marker.line.width" />
+              <ColorPicker label={_('Border Color')} attr="marker.line.color" />
+            </TraceMarkerSection>
 
             <Section name={_('Lines')}>
               <Numeric label={_('Width')} step={1.0} attr="line.width" />
-
-              <ColorPicker label={_('Line color')} attr="line.color" />
-
+              <ColorPicker label={_('Line Color')} attr="line.color" />
               <Radio
                 label={_('Connect Gaps')}
                 attr="connectgaps"
@@ -174,12 +162,43 @@ class DefaultEditor extends Component {
 
         <LayoutPanel group="Style" name={_('Layout')}>
           <Fold name={_('Canvas')}>
-            <Numeric
+            <Radio
+              attr="autosize"
+              options={[
+                {label: _('Auto'), value: true},
+                {label: _('Custom'), value: false},
+              ]}
+            />
+            <CanvasSize
               label={_('Fixed Width')}
               step={1}
               attr="width"
               postfix="px"
             />
+            <CanvasSize
+              label={_('Fixed Height')}
+              step={1}
+              attr="height"
+              postfix="px"
+            />
+            <ColorPicker label={_('Color')} attr="paper_bgcolor" />
+          </Fold>
+          <Fold name={_('Margins and Padding')}>
+            <Numeric label={_('Top')} step={1} attr="margin.t" postfix="px" />
+            <Numeric
+              label={_('Bottom')}
+              step={1}
+              attr="margin.b"
+              postfix="px"
+            />
+            <Numeric label={_('Left')} step={1} attr="margin.l" postfix="px" />
+            <Numeric label={_('Right')} step={1} attr="margin.r" postfix="px" />
+            <Numeric
+              label={_('Padding')}
+              step={1}
+              attr="margin.pad"
+              postfix="px"
+            />
           </Fold>
         </LayoutPanel>
 
@@ -218,21 +237,21 @@ class DefaultEditor extends Component {
             </Section>
           </AxesFold>
 
-          <AxesFold name={_('Lines')}>
-            <AxesSelector />
-          </AxesFold>
-          <AxesFold name={_('Tick Labels')}>
-            <AxesSelector />
-          </AxesFold>
-          <AxesFold name={_('Tick Markers')}>
-            <AxesSelector />
-          </AxesFold>
-          <AxesFold name={_('Zoom Interactivity')}>
-            <AxesSelector />
-          </AxesFold>
-          <AxesFold name={_('Layout')}>
-            <AxesSelector />
-          </AxesFold>
+          {/* <AxesFold name={_('Lines')}>
+              <AxesSelector />
+              </AxesFold>
+              <AxesFold name={_('Tick Labels')}>
+              <AxesSelector />
+              </AxesFold>
+              <AxesFold name={_('Tick Markers')}>
+              <AxesSelector />
+              </AxesFold>
+              <AxesFold name={_('Zoom Interactivity')}>
+              <AxesSelector />
+              </AxesFold>
+              <AxesFold name={_('Layout')}>
+              <AxesSelector />
+              </AxesFold> */}
         </LayoutPanel>
 
         <LayoutPanel group="Style" name={_('Legend')}>
@@ -278,7 +297,7 @@ class DefaultEditor extends Component {
               />
             </Section>
             <Section name={_('Positioning')}>
-              <SubPanel>
+              <MenuPanel>
                 <Section name={_('Anchor Point')}>
                   <Info>
                     {_(
@@ -303,7 +322,7 @@ class DefaultEditor extends Component {
                     ]}
                   />
                 </Section>
-              </SubPanel>
+              </MenuPanel>
               <Numeric
                 label={_('X Position')}
                 step={0.01}
@@ -344,7 +363,6 @@ class DefaultEditor extends Component {
 
 DefaultEditor.contextTypes = {
   dataSourceNames: PropTypes.array.isRequired,
-  plotSchema: PropTypes.object.isRequired,
 };
 
 export default localize(DefaultEditor);

src/PlotlyEditor.js

@@ -12,7 +12,9 @@ class PlotlyEditor extends Component {
     noShame({plotly: this.props.plotly});
 
     // we only need to compute this once.
-    this.plotSchema = this.props.plotly.PlotSchema.get();
+    if (this.props.plotly) {
+      this.plotSchema = this.props.plotly.PlotSchema.get();
+    }
   }
 
   getChildContext() {
@@ -51,7 +53,7 @@ class PlotlyEditor extends Component {
 
 PlotlyEditor.propTypes = {
   onUpdate: PropTypes.func,
-  plotly: PropTypes.object.isRequired,
+  plotly: PropTypes.object,
   graphDiv: PropTypes.object,
   locale: PropTypes.string,
   dataSources: PropTypes.object,
@@ -72,8 +74,8 @@ PlotlyEditor.childContextTypes = {
   layout: PropTypes.object,
   locale: PropTypes.string,
   onUpdate: PropTypes.func,
-  plotSchema: PropTypes.object.isRequired,
-  plotly: PropTypes.object.isRequired,
+  plotSchema: PropTypes.object,
+  plotly: PropTypes.object,
 };
 
 export default PlotlyEditor;

src/components/containers/MenuPanel.js

@@ -0,0 +1,65 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import ModalBox from './ModalBox';
+
+export default class MenuPanel extends Component {
+  constructor() {
+    super();
+    this.state = {isOpen: false};
+
+    this.togglePanel = this.togglePanel.bind(this);
+  }
+
+  menupanelClasses() {
+    if (this.props.iconClass) {
+      return {
+        iconClass: `menupanel__icon ${this.props.iconClass}`,
+        spanClass: 'menupanel__icon-span',
+      };
+    } else if (this.props.question) {
+      return {
+        iconClass: 'menupanel__icon plotlyjs_editor__icon-question-circle',
+        spanClass: `menupanel__icon-span menupanel__icon-span--question`,
+      };
+    }
+    return {
+      iconClass: 'menupanel__icon plotlyjs_editor__icon-cog',
+      spanClass: 'menupanel__icon-span menupanel__icon-span--cog',
+    };
+  }
+
+  togglePanel() {
+    this.setState({isOpen: !this.state.isOpen});
+  }
+
+  render() {
+    const isOpen = this.props.show || this.state.isOpen;
+    const containerClass = classnames('menupanel', {
+      'menupanel--ownline': this.props.ownline,
+    });
+
+    const {iconClass, spanClass} = this.menupanelClasses();
+
+    return (
+      <div className={containerClass}>
+        <span className={spanClass}>
+          <span>{this.props.label}</span>
+          <i className={iconClass} onClick={this.togglePanel} />
+        </span>
+        {isOpen ? (
+          <ModalBox onClose={this.togglePanel}>{this.props.children}</ModalBox>
+        ) : null}
+      </div>
+    );
+  }
+}
+
+MenuPanel.propTypes = {
+  children: PropTypes.node,
+  iconClass: PropTypes.string,
+  show: PropTypes.bool,
+  ownline: PropTypes.bool,
+  question: PropTypes.bool,
+  label: PropTypes.string,
+};

src/components/containers/ModalBox.js

@@ -0,0 +1,24 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+export default class ModalBox extends Component {
+  render() {
+    let style;
+    if (this.props.backgroundColor) {
+      style = {backgroundColor: this.props.backgroundColor};
+    }
+
+    return (
+      <div className="modalbox" style={style}>
+        <div className="modalbox__cover" onClick={this.props.onClose} />
+        <div>{this.props.children}</div>
+      </div>
+    );
+  }
+}
+
+ModalBox.propTypes = {
+  backgroundColor: PropTypes.string,
+  children: PropTypes.node,
+  onClose: PropTypes.func,
+};