initial support for aggregators

Author: nicolaskruchten

src/PivotTableUI.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import update from 'immutability-helper';
-import {PivotData} from './Utilities';
+import {PivotData, aggregators} from './Utilities';
 import DnDCell from './DnDCell';
 import TableRenderer from './TableRenderer';
 import './pivottable.css';
@@ -44,13 +44,20 @@ class PivotTableUI extends React.Component {
         this.attrValues = attrValues;
     }
 
-    onChange(command) { this.props.onChange(update(this.props, command)); }
+    sendPropUpdate(command) {
+        this.props.onChange(update(this.props, command));
+    }
+
+    updateProps(key) {
+        return value => this.sendPropUpdate({[key]: {$set: value}});
+    }
 
     render() {
+        const numValsAllowed = aggregators[this.props.aggregatorName]([])().numInputs || 0;
         return (
             <table className="pvtUi"><tbody>
                 <tr>
-                    <td>(renderers)</td>
+                    <td><select><option>Table</option></select></td>
                     <DnDCell
                         items={Object.keys(this.attrValues)
                             .filter(e => !this.props.rows.includes(e) && !this.props.cols.includes(e))}
@@ -59,20 +66,40 @@ class PivotTableUI extends React.Component {
                     />
                 </tr>
                 <tr>
-                    <td>(aggregators)</td>
+                    <td className="pvtVals">
+                        <select value={this.props.aggregatorName}
+                            onChange={({target: {value}}) => this.updateProps('aggregatorName')(value)}
+                        >
+                            {Object.keys(aggregators).map(n => <option key={`agg${n}`} value={n}>{n}</option>)}
+                        </select>
+                        {(numValsAllowed > 0) && <br />}
+                        {new Array(numValsAllowed).fill().map((n, i) =>
+                            <select value={this.props.vals[i]} key={`val${i}`}
+                                onChange={({target: {value}}) =>
+                                    this.sendPropUpdate({vals: {$splice: [[i, 1, value]]}})}
+                            >
+                                <option key={`none${i}`} value=""></option>
+                                {Object.keys(this.attrValues).map((v, j) =>
+                                    <option key={`${i}-${j}`} value={v}>{v}</option>)}
+                            </select>
+                        )}
+                    </td>
                     <DnDCell
                         items={this.props.cols} classes="pvtAxisContainer pvtHorizList pvtCols"
-                        onChange={newCols => this.onChange({cols: {$set: newCols}})}
+                        onChange={this.updateProps('cols')}
                     />
                 </tr>
                 <tr>
                     <DnDCell
                         items={this.props.rows} classes="pvtAxisContainer pvtVertList pvtRows"
-                        onChange={newRows => this.onChange({rows: {$set: newRows}})}
+                        onChange={this.updateProps('rows')}
                     />
                     <td>
                         <TableRenderer pivotData={new PivotData(
-                            update(this.props, {data: {$set: this.materializedInput}}))}
+                            update(this.props, {
+                                data: {$set: this.materializedInput},
+                                aggregator: {$set: aggregators[this.props.aggregatorName](this.props.vals)}
+                            }))}
                         />
                     </td>
                 </tr>
@@ -83,14 +110,16 @@ class PivotTableUI extends React.Component {
 }
 
 PivotTableUI.defaultProps = {
-    rows: [], cols: []
+    rows: [], cols: [], vals: [], aggregatorName: 'Count'
 };
 
 PivotTableUI.propTypes = {
     data: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.func]).isRequired,
     onChange: PropTypes.func.isRequired,
+    aggregatorName: PropTypes.string,
     cols: PropTypes.arrayOf(PropTypes.string),
-    rows: PropTypes.arrayOf(PropTypes.string)
+    rows: PropTypes.arrayOf(PropTypes.string),
+    vals: PropTypes.arrayOf(PropTypes.string)
 };
 
 

src/Utilities.js

@@ -147,7 +147,7 @@ const aggregatorTemplates = {
                     },
                     value() { return fn(this.uniq); },
                     format: formatter,
-                    numInputs: (attr !== null) ? 0 : 1
+                    numInputs: (typeof attr !== 'undefined') ? 0 : 1
                 };
             };
         };
@@ -163,7 +163,7 @@ const aggregatorTemplates = {
                     },
                     value() { return this.sum; },
                     format: formatter,
-                    numInputs: (attr !== null) ? 0 : 1
+                    numInputs: (typeof attr !== 'undefined') ? 0 : 1
                 };
             };
         };
@@ -174,7 +174,7 @@ const aggregatorTemplates = {
             return function(data) {
                 return {
                     val: null,
-                    sorter: getSort(data.sorters, attr),
+                    sorter: getSort(typeof data !== 'undefined' ? data.sorters : null, attr),
                     push(record) {
                         let x = record[attr];
                         if (['min', 'max'].includes(mode)) {
@@ -190,7 +190,7 @@ const aggregatorTemplates = {
                     },
                     value() { return this.val; },
                     format(x) { if (isNaN(x)) { return x; } return formatter(x); },
-                    numInputs: (attr !== null) ? 0 : 1
+                    numInputs: (typeof attr !== 'undefined') ? 0 : 1
                 };
             };
         };
@@ -212,7 +212,7 @@ const aggregatorTemplates = {
                         return (this.vals[Math.floor(i)] + this.vals[Math.ceil(i)]) / 2.0;
                     },
                     format: formatter,
-                    numInputs: (attr !== null) ? 0 : 1
+                    numInputs: (typeof attr !== 'undefined') ? 0 : 1
                 };
             };
         };
@@ -246,7 +246,7 @@ const aggregatorTemplates = {
                         }
                     },
                     format: formatter,
-                    numInputs: (attr !== null) ? 0 : 1
+                    numInputs: (typeof attr !== 'undefined') ? 0 : 1
                 };
             };
         };
@@ -264,7 +264,7 @@ const aggregatorTemplates = {
                     },
                     value() { return this.sumNum / this.sumDenom; },
                     format: formatter,
-                    numInputs: (num !== null) && (denom !== null) ? 0 : 2
+                    numInputs: (typeof num !== 'undefined') && (typeof denom !== 'undefined') ? 0 : 2
                 };
             };
         };