TraceMarkerSection handles naming section after trace types

Author: bpostlethwaite

src/DefaultEditor.js

@@ -17,6 +17,7 @@ import {
   MenuPanel,
   SymbolSelector,
   TraceAccordion,
+  TraceMarkerSection,
   TraceSelector,
 } from './components';
 import {DEFAULT_FONTS} from './constants';
@@ -142,14 +143,21 @@ class DefaultEditor extends Component {
               <ColorPicker label={_('Color')} attr="fillcolor" />
             </Section>
 
-            <Section name={_('Points')}>
+            <TraceMarkerSection>
+              <Radio
+                attr="orientation"
+                options={[
+                  {label: _('Vertical'), value: 'v'},
+                  {label: _('Horizontal'), value: 'h'},
+                ]}
+              />
               <ColorPicker label={_('Color')} attr="marker.color" />
               <Numeric label={_('Opacity')} step={0.1} attr="marker.opacity" />
               <Numeric label={_('Size')} attr="marker.size" />
               <SymbolSelector label={_('Symbol')} attr="marker.symbol" />
               <Numeric label={_('Border Width')} attr="marker.line.width" />
               <ColorPicker label={_('Border Color')} attr="marker.line.color" />
-            </Section>
+            </TraceMarkerSection>
 
             <Section name={_('Lines')}>
               <Numeric label={_('Width')} step={1.0} attr="line.width" />

src/components/containers/Section.js

@@ -45,9 +45,14 @@ class Section extends Component {
       }
 
       const isAttr = Boolean(child.props.attr);
-      const plotProps = isAttr
-        ? unpackPlotProps(child.props, context, child.type)
-        : {isVisible: true};
+      let plotProps;
+      if (child.plotProps) {
+        plotProps = child.plotProps;
+      } else if (isAttr) {
+        plotProps = unpackPlotProps(child.props, context, child.type);
+      } else {
+        plotProps = {isVisible: true};
+      }
       const childProps = Object.assign({plotProps}, child.props);
       childProps.key = i;
       attrChildren.push(cloneElement(child, childProps));

src/components/containers/TraceMarkerSection.js

@@ -0,0 +1,41 @@
+import Section from './Section';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import localize from '../../lib/localize';
+
+class TraceMarkerSection extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.setLocals(context);
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    this.setLocals(nextContext);
+  }
+
+  setLocals(context) {
+    const _ = this.props.localize;
+    const traceType = context.fullContainer.type;
+    if (traceType === 'bar') {
+      this.name = _('Bars');
+    } else {
+      this.name = _('Points');
+    }
+  }
+
+  render() {
+    return <Section name={this.name}>{this.props.children}</Section>;
+  }
+}
+
+TraceMarkerSection.propTypes = {
+  children: PropTypes.node,
+  localize: PropTypes.func,
+  name: PropTypes.string,
+};
+
+TraceMarkerSection.contextTypes = {
+  fullContainer: PropTypes.object,
+};
+
+export default localize(TraceMarkerSection);

src/components/containers/index.js

@@ -3,5 +3,6 @@ import Fold from './Fold';
 import Panel from './Panel';
 import Section from './Section';
 import TraceAccordion from './TraceAccordion';
+import TraceMarkerSection from './TraceMarkerSection';
 
-export {MenuPanel, Fold, Panel, Section, TraceAccordion};
+export {MenuPanel, Fold, Panel, Section, TraceAccordion, TraceMarkerSection};

src/components/index.js

@@ -12,7 +12,14 @@ import {
   TraceSelector,
 } from './fields';
 
-import {MenuPanel, Fold, Panel, Section, TraceAccordion} from './containers';
+import {
+  MenuPanel,
+  Fold,
+  Panel,
+  Section,
+  TraceAccordion,
+  TraceMarkerSection,
+} from './containers';
 import PanelMenuWrapper from './PanelMenuWrapper';
 
 export {
@@ -32,5 +39,6 @@ export {
   Section,
   SymbolSelector,
   TraceAccordion,
+  TraceMarkerSection,
   TraceSelector,
 };

src/index.js

@@ -27,6 +27,7 @@ import {
   MenuPanel,
   SymbolSelector,
   TraceAccordion,
+  TraceMarkerSection,
   TraceSelector,
 } from './components';
 
@@ -50,6 +51,7 @@ export {
   Section,
   SymbolSelector,
   TraceAccordion,
+  TraceMarkerSection,
   TraceSelector,
   connectAxesToLayout,
   connectLayoutToPlot,

src/styles/components/fields/_field.scss

@@ -35,7 +35,7 @@
 
 .field__widget {
   width: 64%;
-  padding-left: 18px;
+  padding-left: 12px;
   display: inline-block;
   padding-right: 12px;
 }

src/styles/components/widgets/_numeric-input.scss

@@ -14,7 +14,7 @@
   text-align: left;
   border-radius: 2px;
   padding: 6px 6px 6px 12px;
-  width: 80px;
+  width: 62px;
   vertical-align: middle;
   font-size: inherit;
   color: inherit;