Merge pull request #502 from plotly/dev-custom-traces

Try customTraces in Dev

Author: VeraZab

dev/App.js

@@ -12,6 +12,7 @@ import Inspector from 'react-inspector';
 import tips from './tips';
 import 'brace/mode/json';
 import 'brace/theme/textmate';
+import {categoryLayout, traceTypes, chartCategory} from 'lib/traceTypes';
 
 // https://github.com/plotly/react-chart-editor#mapbox-access-tokens
 import ACCESS_TOKENS from '../accessTokens';
@@ -41,6 +42,41 @@ const dataSourceOptions = Object.keys(dataSources).map(name => ({
 
 const config = {mapboxAccessToken: ACCESS_TOKENS.MAPBOX, editable: true};
 
+const traceTypesConfig = {
+    traces: _ => ([
+        {
+          value: 'scattergl',
+          icon: 'scatter',
+          label: _('Scatter'),
+        },
+        {
+          value: 'bar',
+          label: _('Bar'),
+        },
+        {
+          value: 'histogram',
+          label: _('Histogram'),
+        },
+        {
+          value: 'table',
+          label: _('Table'),
+        },
+        {
+          value: 'pie',
+          label: _('Pie'),
+        },
+        {
+          value: 'box',
+          label: _('Box'),
+        },
+        {
+          value: 'histogram2d',
+          label: _('Histogram 2D'),
+        },
+    ]),
+    complex: true
+};
+
 class App extends Component {
   constructor() {
     super();
@@ -120,6 +156,8 @@ class App extends Component {
           debug
           advancedTraceTypeSelector
           showFieldTooltips
+          traceTypesConfig={traceTypesConfig}
+          useAsDefaultTrace={{type: 'scattergl'}}
         >
           <DefaultEditor>
             <GraphTransformsPanel group="Dev" name="Transforms" />

src/EditorControls.js

@@ -118,7 +118,9 @@ class EditorControls extends Component {
         if (this.props.beforeAddTrace) {
           this.props.beforeAddTrace(payload);
         }
-        graphDiv.data.push({type: 'scatter', mode: 'markers'});
+
+        graphDiv.data.push(this.props.useAsDefaultTrace);
+
         if (this.props.afterAddTrace) {
           this.props.afterAddTrace(payload);
         }
@@ -298,6 +300,7 @@ EditorControls.propTypes = {
   plotly: PropTypes.object,
   showFieldTooltips: PropTypes.bool,
   traceTypesConfig: PropTypes.object,
+  useAsDefaultTrace: PropTypes.object,
 };
 
 EditorControls.defaultProps = {
@@ -308,6 +311,7 @@ EditorControls.defaultProps = {
     traces: _ => traceTypes(_),
     complex: true,
   },
+  useAsDefaultTrace: {type: 'scatter', mode: 'markers'},
 };
 
 EditorControls.childContextTypes = {

src/PlotlyEditor.js

@@ -26,6 +26,7 @@ class PlotlyEditor extends Component {
             dictionaries={this.props.dictionaries}
             showFieldTooltips={this.props.showFieldTooltips}
             srcConverters={this.props.srcConverters}
+            useAsDefaultTrace={this.props.useAsDefaultTrace}
           >
             {this.props.children}
           </EditorControls>
@@ -75,6 +76,7 @@ PlotlyEditor.propTypes = {
     toSrc: PropTypes.func.isRequired,
     fromSrc: PropTypes.func.isRequired,
   }),
+  useAsDefaultTrace: PropTypes.object,
 };
 
 PlotlyEditor.defaultProps = {

src/components/widgets/TraceTypeSelector.js

@@ -121,11 +121,53 @@ class TraceTypeSelector extends Component {
     });
   }
 
+  renderGrid() {
+    return <div className="trace-grid">{this.renderCategories()}</div>;
+  }
+
+  renderSingleBlock() {
+    const {fullValue} = this.props;
+    const {
+      traceTypesConfig: {traces, complex},
+      localize: _,
+    } = this.context;
+
+    const items = traces(_).map(item => (
+      <Item
+        key={item.value}
+        complex={complex}
+        active={fullValue === item.value}
+        item={item}
+        actions={actions}
+        showActions={false}
+        handleClick={() => this.selectAndClose(item.value)}
+        style={{display: 'inline-block'}}
+      />
+    ));
+
+    return (
+      <div
+        style={{
+          maxWidth: '460px',
+          display: 'flex',
+          flexFlow: 'wrap',
+          padding: '5px',
+        }}
+      >
+        {items}
+      </div>
+    );
+  }
+
   render() {
-    const {localize: _} = this.context;
+    const {
+      traceTypesConfig: {categories},
+      localize: _,
+    } = this.context;
+
     return (
       <Modal title={_('Select Trace Type')}>
-        <div className="trace-grid">{this.renderCategories()}</div>
+        {categories ? this.renderGrid() : this.renderSingleBlock()}
       </Modal>
     );
   }

src/styles/components/widgets/_trace-type-selector.scss

@@ -175,6 +175,7 @@ $item-size: 90px;
     color: var(--color-text-base);
     text-transform: capitalize;
     font-size: var(--font-size-small);
+    text-align: center;
   }
 }