Robust plot schema lookups

README.md

@@ -27,6 +27,28 @@ To build the dist version:
 $ npm run prepublish
 ```
 
+## Developer notes
+ A PlotlyEditor widgets is composed of 3 layers:
+
+### Layer 1: Base Component
+```
+    <PlotlyEditor>
+```
+
+### Layer 2: Container Components:
+One or more nested Container Components with one and only one connected by a connect<Container>ToPlot function (connectLayoutToPlot, connectTraceToPlot).
+```
+    <Panel>, <Section>, <Fold>
+```
+
+### Layer 3: Attribute Widgets
+Each connected by a `connectContainerToPlot` function
+    <Numeric>, <ColorPicker>, <Radio> and remaining UI Controls
+```
+
+Data flows via `context` downward and is augmented with additional information at each layer boundary.
+The Base Components aggregate references to the graphDiv objects (data, fullData, layout...), grid Data sources, locale, update functions etc. One of the Container Components uses its knowledge about which container to target (traces, layout, ...) to generate fewer but more specific containers and updaters which are passed down the hierarchy. The Attribute widgets are higher-order wrappers around dumb UI controls. The higher-order wrapper uses the container contexts and specific attributes information to provide specific plot update functions and other behaviours for the inner UI control.
+
 ## See also
 
 - [plotlyjs-react](https://github.com/plotly/plotlyjs-react)

src/DefaultEditor.js

@@ -1,24 +1,38 @@
-import ColorPicker from './components/Color';
-import Dropdown from './components/Dropdown';
-import DataSelector from './components/DataSelector';
-import TraceSelector from './components/TraceSelector';
-import Flaglist from './components/Flaglist';
-import Numeric from './components/Numeric';
-import Panel from './components/Panel';
-import PanelMenuWrapper from './components/PanelMenuWrapper';
-import PropTypes from 'prop-types';
-import Radio from './components/Radio';
 import React, {Component} from 'react';
-import Section from './components/Section';
-import TraceAccordion from './components/TraceAccordion';
-import {localize} from './lib';
+import PropTypes from 'prop-types';
+import {
+  SubPanel,
+  ColorPicker,
+  DataSelector,
+  Dropdown,
+  Flaglist,
+  Fold,
+  Info,
+  Numeric,
+  Panel,
+  PanelMenuWrapper,
+  Radio,
+  Section,
+  TraceAccordion,
+  TraceSelector,
+} from './components';
+import {DEFAULT_FONTS} from './constants';
+import {localize, connectLayoutToPlot} from './lib';
+
+const LayoutPanel = connectLayoutToPlot(Panel);
 
 class DefaultEditor extends Component {
   constructor(props, context) {
     super(props, context);
 
     const capitalize = s => s.charAt(0).toUpperCase() + s.substring(1);
-    const traceTypes = Object.keys(context.plotSchema.traces);
+
+    // Filter out Polar "area" type (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],
@@ -39,7 +53,7 @@ class DefaultEditor extends Component {
 
     return (
       <PanelMenuWrapper>
-        <Panel section="Graph" name="Create">
+        <Panel group="Graph" name="Create">
           <TraceAccordion canAdd>
             <TraceSelector
               label="Plot Type"
@@ -91,19 +105,13 @@ class DefaultEditor extends Component {
           </TraceAccordion>
         </Panel>
 
-        <Panel section="Style" name="Traces">
+        <Panel group="Style" name="Traces">
           <TraceAccordion>
-            <Section heading={_('Trace')}>
-              <Numeric
-                label={_('Opacity')}
-                min={0}
-                max={1}
-                step={0.1}
-                attr="opacity"
-              />
+            <Section name={_('Trace')}>
+              <Numeric label={_('Opacity')} step={0.1} attr="opacity" />
             </Section>
 
-            <Section heading={_('Display')}>
+            <Section name={_('Display')}>
               <Flaglist
                 attr="mode"
                 options={[
@@ -113,7 +121,7 @@ class DefaultEditor extends Component {
               />
             </Section>
 
-            <Section heading={_('Filled Area')}>
+            <Section name={_('Filled Area')}>
               <Dropdown
                 label="Fill to"
                 attr="fill"
@@ -130,47 +138,150 @@ class DefaultEditor extends Component {
               <ColorPicker label={_('Color')} attr="fillcolor" />
             </Section>
 
-            <Section heading={_('Points')}>
+            <Section name={_('Points')}>
               <Numeric
                 label={_('Marker Opacity')}
-                min={0}
-                max={1}
                 step={0.1}
                 attr="marker.opacity"
               />
 
               <ColorPicker label={_('Marker Color')} attr="marker.color" />
 
-              <Numeric label={_('Size')} min={0} attr="marker.size" />
+              <Numeric label={_('Size')} attr="marker.size" />
 
-              <Numeric
-                label={_('Line width')}
-                min={0}
-                attr="marker.line.width"
-              />
+              <Numeric label={_('Line width')} attr="marker.line.width" />
             </Section>
 
-            <Section heading={_('Lines')}>
-              <Numeric
-                label={_('Width')}
-                min={0}
-                step={1.0}
-                attr="line.width"
-              />
+            <Section name={_('Lines')}>
+              <Numeric label={_('Width')} step={1.0} attr="line.width" />
 
               <ColorPicker label={_('Line color')} attr="line.color" />
 
               <Radio
                 label={_('Connect Gaps')}
                 attr="connectgaps"
                 options={[
-                  {value: true, label: 'Connect'},
-                  {value: false, label: 'Blank'},
+                  {label: _('Connect'), value: true},
+                  {label: _('Blank'), value: false},
                 ]}
               />
             </Section>
           </TraceAccordion>
         </Panel>
+
+        <LayoutPanel group="Style" name={_('Layout')}>
+          <Fold name={_('Canvas')}>
+            <Numeric
+              label={_('Fixed Width')}
+              step={1}
+              attr="width"
+              postfix="px"
+            />
+          </Fold>
+        </LayoutPanel>
+
+        <LayoutPanel group="Style" name={_('Legend')}>
+          <Fold hideHeader>
+            <Section name={_('Legend')}>
+              <Radio
+                attr="showlegend"
+                options={[
+                  {label: _('Show'), value: true},
+                  {label: _('Hide'), value: false},
+                ]}
+              />
+            </Section>
+            <Section name={_('Text')}>
+              <Dropdown
+                label={_('Typeface')}
+                attr="legend.font.family"
+                clearable={false}
+                options={[...DEFAULT_FONTS]}
+              />
+              <Numeric
+                label={_('Size')}
+                step={1}
+                attr="legend.font.size"
+                postfix="px"
+              />
+              <ColorPicker label={_('Color')} attr="legend.font.color" />
+            </Section>
+            <Section name={_('Legend Box')}>
+              <Numeric
+                label={_('Border Width')}
+                step={1}
+                attr="legend.borderwidth"
+                postfix="px"
+              />
+              <ColorPicker
+                label={_('Border Color')}
+                attr="legend.bordercolor"
+              />
+              <ColorPicker
+                label={_('Background Color')}
+                attr="legend.bgcolor"
+              />
+            </Section>
+            <Section name={_('Positioning')}>
+              <SubPanel>
+                <Section name={_('Anchor Point')}>
+                  <Info>
+                    {_(
+                      'The positioning inputs are relative to the ' +
+                        'anchor points on the text box'
+                    )}
+                  </Info>
+                  <Radio
+                    attr="legend.xanchor"
+                    options={[
+                      {label: _('Left'), value: 'left'},
+                      {label: _('Center'), value: 'center'},
+                      {label: _('Right'), value: 'right'},
+                    ]}
+                  />
+                  <Radio
+                    attr="legend.yanchor"
+                    options={[
+                      {label: _('Top'), value: 'top'},
+                      {label: _('Middle'), value: 'middle'},
+                      {label: _('Bottom'), value: 'bottom'},
+                    ]}
+                  />
+                </Section>
+              </SubPanel>
+              <Numeric
+                label={_('X Position')}
+                step={0.01}
+                attr="legend.x"
+                postfix="px"
+              />
+              <Numeric
+                label={_('Y Position')}
+                step={0.01}
+                attr="legend.y"
+                postfix="px"
+              />
+            </Section>
+            <Section name={_('Orientation')}>
+              <Radio
+                attr="legend.orientation"
+                options={[
+                  {label: _('Vertical'), value: 'v'},
+                  {label: _('Horizontal'), value: 'h'},
+                ]}
+              />
+            </Section>
+            <Section name={_('Trace Order')}>
+              <Radio
+                attr="legend.traceorder"
+                options={[
+                  {label: _('Normal'), value: 'normal'},
+                  {label: _('Reversed'), value: 'reversed'},
+                ]}
+              />
+            </Section>
+          </Fold>
+        </LayoutPanel>
       </PanelMenuWrapper>
     );
   }