Move group and filter transforms to main

Author: dmt0

dev/App.js

@@ -7,7 +7,6 @@ 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 GraphTransformsPanel from '../src/default_panels/GraphTransformsPanelDev';
 import Inspector from 'react-inspector';
 import tips from './tips';
 import 'brace/mode/json';
@@ -43,38 +42,38 @@ 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
+  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 {
@@ -160,7 +159,6 @@ class App extends Component {
           // useAsDefaultTrace={{type: 'scattergl', mode: 'markers'}}
         >
           <DefaultEditor>
-            <GraphTransformsPanel group="Dev" name="Transforms" />
             <Panel group="Dev" name="JSON">
               <div className="mocks">
                 <Select

dev/percy/panelTest.json

@@ -101,7 +101,22 @@
         "color": "#1f77b4",
         "thickness": 2,
         "width": 4
-      }
+      },
+      "transforms": [
+        {
+          "type": "groupby",
+          "groupssrc": "ints"
+        },
+        {
+          "type": "filter",
+          "targetsrc": "ints",
+          "operation": "[]",
+          "value": [
+            "0",
+            ""
+          ]
+        }
+      ]
     }
   ],
   "layout": {

src/components/containers/TransformAccordion.js

@@ -14,6 +14,8 @@ class TransformAccordion extends Component {
       fullContainer,
       fullContainer: {transforms = []},
       localize: _,
+      container,
+      dataSourceOptions,
     } = this.context;
     const {children} = this.props;
 
@@ -23,7 +25,9 @@ class TransformAccordion extends Component {
       {label: _('Aggregate'), type: 'aggregate'},
     ];
 
-    if (['scatter', 'bar', 'scattergl'].indexOf(fullContainer.type) === -1) {
+    const transformableCharts = ['scatter', 'bar', 'scattergl'];
+
+    if (!transformableCharts.includes(fullContainer.type)) {
       return (
         <FoldEmpty
           icon={PlotScatterIcon}
@@ -32,39 +36,70 @@ class TransformAccordion extends Component {
       );
     }
 
+    const transformBy =
+      container.transforms &&
+      container.transforms.map(tr => {
+        let retValue = '';
+        if (tr.groupssrc) {
+          const groupssrc = dataSourceOptions.find(
+            d => d.value === tr.groupssrc
+          );
+          retValue = `: ${
+            groupssrc && groupssrc.label ? groupssrc.label : tr.groupssrc
+          }`;
+        } else if (tr.targetsrc) {
+          const targetsrc = dataSourceOptions.find(
+            d => d.value === tr.targetsrc
+          );
+          retValue = `: ${
+            targetsrc && targetsrc.label ? targetsrc.label : tr.targetsrc
+          }`;
+        }
+        return retValue;
+      });
+
     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}
+          name={`${
+            transformTypes.filter(({type}) => type === tr.type)[0].label
+          }${transformBy[i]}`}
           canDelete={true}
         >
           {children}
         </TransformFold>
       ));
 
-    const handlers = 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}});
-          }
-        },
-      };
-    });
-
     const addAction = {
-      label: _('Aggregation'),
-      handler: handlers[2].handler,
+      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}]`;
+
+              const payload = {type};
+              const firstDataSource = dataSourceOptions[0].value;
+              if (type === 'filter') {
+                payload.targetsrc = firstDataSource;
+              } else {
+                payload.groupssrc = firstDataSource;
+              }
+
+              updateContainer({[key]: payload});
+            }
+          },
+        };
+      }),
     };
 
     return (
@@ -78,6 +113,8 @@ class TransformAccordion extends Component {
 TransformAccordion.contextTypes = {
   fullContainer: PropTypes.object,
   localize: PropTypes.func,
+  container: PropTypes.object,
+  dataSourceOptions: PropTypes.array,
 };
 
 TransformAccordion.propTypes = {

src/components/containers/TransformAccordionDev.js

@@ -160,10 +160,11 @@ class UnconnectedFilterValue extends Component {
   }
 
   render() {
-    const {
-      localize: _,
-      container: {operation},
-    } = this.context;
+    const {localize: _, container} = this.context;
+
+    const operation =
+      container && container.operation ? container.operation : '=';
+
     const {fullValue, attr, defaultValue} = this.props;
     const op = findOperation(operation);