Transforms

dev/App.js

@@ -6,7 +6,7 @@ import 'react-select/dist/react-select.css';
 import brace from 'brace'; // eslint-disable-line no-unused-vars
 import AceEditor from 'react-ace';
 import Select from 'react-select';
-import PlotlyEditor, {DefaultEditor, Panel} from '../src';
+import PlotlyEditor, {DefaultEditor, Panel, GraphTransformsPanel} from '../src';
 import Inspector from 'react-inspector';
 import 'brace/mode/json';
 import 'brace/theme/textmate';
@@ -15,13 +15,21 @@ import 'brace/theme/textmate';
 import ACCESS_TOKENS from '../accessTokens';
 
 const dataSources = {
-  ints: [1, 2, 3, 4, 5], // eslint-disable-line no-magic-numbers
-  'jagged ints': [2, 1, 3, 5, 4], // eslint-disable-line no-magic-numbers
+  ints: [1, 2, 3, 4, 5, 6], // eslint-disable-line no-magic-numbers
+  'jagged ints': [2, 1, 3, 5, 4, 6], // eslint-disable-line no-magic-numbers
+  'toggle ints': [1, -1, 1, -1, 1, -1], // eslint-disable-line no-magic-numbers
   'big ints': [1000, 10100, 10000, 20000, 100000], // eslint-disable-line no-magic-numbers
-  dates: ['2010-01-01', '2010-07-01', '2011-01-01', '2011-07-01', '2012-01-01'],
-  months: ['January', 'February', 'March', 'April', 'May'],
-  colors: ['red', 'orange', 'yellow', 'green', 'blue'],
-  justblue: ['blue'],
+  dates: [
+    '2010-01-01',
+    '2010-07-01',
+    '2011-01-01',
+    '2011-07-01',
+    '2012-01-01',
+    '2012-06-01',
+  ],
+  months: ['January', 'February', 'March', 'April', 'May', 'June'],
+  colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo'],
+  'blue and red': ['blue', 'red'],
 };
 const dataSourceOptions = Object.keys(dataSources).map(name => ({
   value: name,
@@ -56,13 +64,14 @@ class App extends Component {
   }
 
   loadMock(mockIndex) {
-    fetch(
-      'https://api.github.com/repos/plotly/plotly.js/contents/test/image/mocks/' +
-        this.state.mocks[mockIndex],
-      {
-        headers: new Headers({Accept: 'application/vnd.github.v3.raw'}),
-      }
-    )
+    const mockName = this.state.mocks[mockIndex];
+    const prefix =
+      mockName[0] === '/'
+        ? ''
+        : 'https://api.github.com/repos/plotly/plotly.js/contents/test/image/mocks/';
+    fetch(prefix + mockName, {
+      headers: new Headers({Accept: 'application/vnd.github.v3.raw'}),
+    })
       .then(response => response.json())
       .then(figure => {
         const {data, layout, frames} = figure;
@@ -109,6 +118,7 @@ class App extends Component {
           advancedTraceTypeSelector
         >
           <DefaultEditor>
+            <GraphTransformsPanel group="Dev" name="Transforms" />
             <Panel group="Dev" name="JSON">
               <div className="mocks">
                 <Select
@@ -126,14 +136,13 @@ class App extends Component {
                   placeholder={'Search for a mock'}
                 />
               </div>
-              <br />
               <button
+                className="devbtn"
                 onClick={this.loadJSON}
                 style={{background: this.state.json_error ? 'pink' : 'white'}}
               >
                 Save
               </button>
-              <br />
               <AceEditor
                 mode="json"
                 theme="textmate"
@@ -152,10 +161,12 @@ class App extends Component {
                     exec: this.loadJSON,
                   },
                 ]}
+                editorProps={{$blockScrolling: true}}
               />
             </Panel>
             <Panel group="Dev" name="Inspector">
               <button
+                className="devbtn"
                 onClick={() => {
                   const gd = document.getElementById('gd') || {};
                   this.setState({
@@ -168,7 +179,6 @@ class App extends Component {
               >
                 Refresh
               </button>
-              <br />
               <div style={{height: '80vh'}}>
                 <Inspector
                   data={{_full: this.state.full}}

dev/mocks.json

@@ -1,4 +1,5 @@
 [
+  "/mocks/aggregate.json",
   "0.json",
   "1.json",
   "10.json",

dev/mocks/aggregate.json

@@ -0,0 +1,44 @@
+{
+  "data": [
+    {
+      "type": "scatter",
+      "x": [
+        "Moe",
+        "Larry",
+        "Curly",
+        "Moe",
+        "Larry",
+        "Curly",
+        "Moe",
+        "Larry",
+        "Curly",
+        "Moe",
+        "Larry",
+        "Curly"
+      ],
+      "y": [1, 6, 2, 8, 2, 9, 4, 5, 1, 5, 2, 8],
+      "mode": "markers",
+      "transforms": [
+        {
+          "enabled" :true,
+          "type": "aggregate",
+          "groups": [
+            "Moe",
+            "Larry",
+            "Curly",
+            "Moe",
+            "Larry",
+            "Curly",
+            "Moe",
+            "Larry",
+            "Curly",
+            "Moe",
+            "Larry",
+            "Curly"
+          ],
+          "aggregations": [{"target": "y", "func": "avg", "enabled": true}]
+        }
+      ]
+    }
+  ]
+}

dev/styles.css

@@ -12,3 +12,8 @@ body {
 .mocks * {
   z-index: 100;
 }
+
+.devbtn {
+  margin: 10px;
+  background: white;
+}

src/EditorControls.js

@@ -239,6 +239,24 @@ class EditorControls extends Component {
         }
         break;
 
+      case EDITOR_ACTIONS.DELETE_TRANSFORM:
+        if (isNumeric(payload.transformIndex)) {
+          for (let i = 0; i < graphDiv.data.length; i++) {
+            if (graphDiv.data[i].uid === payload.traceUid) {
+              graphDiv.data[i].transforms.splice(payload.transformIndex, 1);
+              if (this.props.onUpdate) {
+                this.props.onUpdate(
+                  graphDiv.data.slice(),
+                  graphDiv.layout,
+                  graphDiv._transitionData._frames
+                );
+              }
+              break;
+            }
+          }
+        }
+        break;
+
       default:
         throw new Error('must specify an action type to handleEditorUpdate');
     }

src/components/containers/ModalBox.js

@@ -4,9 +4,10 @@ import classnames from 'classnames';
 
 export default class ModalBox extends Component {
   render() {
-    const {backgroundDark, children, onClose} = this.props;
+    const {backgroundDark, children, onClose, relative} = this.props;
     const modalboxClass = classnames('modalbox', {
       'modalbox--dark': backgroundDark,
+      'modalbox--relative': relative,
     });
     return (
       <div className={modalboxClass}>
@@ -19,6 +20,7 @@ export default class ModalBox extends Component {
 
 ModalBox.propTypes = {
   backgroundDark: PropTypes.bool,
+  relative: PropTypes.bool,
   children: PropTypes.node,
   onClose: PropTypes.func,
 };

src/components/containers/PanelHeader.js

@@ -3,8 +3,20 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {PlusIcon, ResizeUpIcon, ResizeDownIcon} from 'plotly-icons';
 import {localize} from 'lib';
+import ModalBox from './ModalBox';
 
 class PanelHeader extends Component {
+  constructor() {
+    super();
+    this.state = {addPanelOpen: false};
+
+    this.togglePanel = this.togglePanel.bind(this);
+  }
+
+  togglePanel() {
+    this.setState({addPanelOpen: !this.state.addPanelOpen});
+  }
+
   render() {
     const {
       children,
@@ -43,10 +55,29 @@ class PanelHeader extends Component {
               <Button
                 variant="primary"
                 className="js-add-button"
-                onClick={() => addAction.handler(this.context)}
+                onClick={
+                  Array.isArray(addAction.handler)
+                    ? this.togglePanel
+                    : () => addAction.handler(this.context)
+                }
                 icon={icon}
                 label={addAction.label}
-              />{' '}
+              />
+              {this.state.addPanelOpen && (
+                <ModalBox onClose={this.togglePanel} relative>
+                  {addAction.handler.map(({label, handler}) => (
+                    <p
+                      key={label}
+                      onClick={() => {
+                        handler(this.context);
+                        this.togglePanel();
+                      }}
+                    >
+                      {label}
+                    </p>
+                  ))}
+                </ModalBox>
+              )}
             </div>
           ) : null}
         </div>

src/components/containers/RangeSelectorAccordion.js

@@ -27,7 +27,6 @@ class RangeSelectorAccordion extends Component {
         <RangeSelectorFold
           key={i}
           rangeselectorIndex={i}
-          buttonIndex={i}
           name={btn.label}
           canDelete={true}
         >
@@ -40,11 +39,15 @@ class RangeSelectorAccordion extends Component {
       handler: context => {
         const {fullContainer, updateContainer} = context;
         if (updateContainer) {
-          const shapeIndex = Array.isArray(fullContainer.rangeselector.buttons)
+          const rangeselectorIndex = Array.isArray(
+            fullContainer.rangeselector.buttons
+          )
             ? fullContainer.rangeselector.buttons.length
             : 0;
 
-          updateContainer({[`rangeselector.buttons[${shapeIndex}]`]: {}});
+          updateContainer({
+            [`rangeselector.buttons[${rangeselectorIndex}]`]: {},
+          });
         }
       },
     };

src/components/containers/Section.js

@@ -59,7 +59,7 @@ class Section extends Component {
     }
     return (
       <div className="section">
-        <SectionHeader name={this.props.name} />
+        {this.props.name && <SectionHeader name={this.props.name} />}
         {this.children}
       </div>
     );

src/components/containers/TransformAccordion.js

@@ -0,0 +1,66 @@
+import Fold from './Fold';
+import Panel from './Panel';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {connectTransformToTrace, localize} from 'lib';
+
+const TransformFold = connectTransformToTrace(Fold);
+
+class TransformAccordion extends Component {
+  render() {
+    const {fullContainer: {transforms = []}} = this.context;
+    const {children, localize: _} = this.props;
+
+    const transformTypes = [
+      {label: _('Filter'), type: 'filter'},
+      {label: _('Split'), type: 'groupby'},
+      {label: _('Aggregate'), type: 'aggregate'},
+    ];
+
+    const filteredTransforms = transforms.filter(({type}) => Boolean(type));
+    const content =
+      filteredTransforms.length &&
+      filteredTransforms.map((tr, i) => (
+        <TransformFold
+          key={i}
+          transformIndex={i}
+          name={transformTypes.filter(({type}) => type === tr.type)[0].label}
+          canDelete={true}
+        >
+          {children}
+        </TransformFold>
+      ));
+
+    const addAction = {
+      label: _('Transform'),
+      handler: transformTypes.map(({label, type}) => {
+        return {
+          label,
+          handler: context => {
+            const {fullContainer, updateContainer} = context;
+            if (updateContainer) {
+              const transformIndex = Array.isArray(fullContainer.transforms)
+                ? fullContainer.transforms.length
+                : 0;
+              const key = `transforms[${transformIndex}]`;
+              updateContainer({[key]: {type}});
+            }
+          },
+        };
+      }),
+    };
+
+    return <Panel addAction={addAction}>{content ? content : null}</Panel>;
+  }
+}
+
+TransformAccordion.contextTypes = {
+  fullContainer: PropTypes.object,
+};
+
+TransformAccordion.propTypes = {
+  children: PropTypes.node,
+  localize: PropTypes.func,
+};
+
+export default localize(TransformAccordion);

src/components/containers/index.js

@@ -10,6 +10,7 @@ import MenuPanel from './MenuPanel';
 import Panel from './Panel';
 import Section from './Section';
 import TraceAccordion from './TraceAccordion';
+import TransformAccordion from './TransformAccordion';
 import TraceMarkerSection from './TraceMarkerSection';
 import {LayoutPanel, TraceTypeSection} from './derived';
 import TraceRequiredPanel from './TraceRequiredPanel';
@@ -30,6 +31,7 @@ export {
   Panel,
   Section,
   TraceAccordion,
+  TransformAccordion,
   TraceMarkerSection,
   TraceRequiredPanel,
   LayoutPanel,