first cut at drag'n'drop

Author: nicolaskruchten

package.json

@@ -25,8 +25,12 @@
   },
   "homepage": "https://github.com/plotly/react-pivottable#readme",
   "dependencies": {
+    "immutability-helper": "^2.3.1",
+    "prop-types": "^15.5.10",
     "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+    "react-dom": "^15.6.1",
+    "react-sortablejs": "^1.3.4",
+    "sortablejs": "^1.6.1"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^3.2.6",

src/DnDCell.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Sortable from 'react-sortablejs';
+import DraggableAttribute from './DraggableAttribute';
+
+class DnDCell extends React.Component {
+    render() {
+        return <Sortable
+            options={{
+                group: 'shared',
+                ghostClass: 'pvtPlaceholder'
+            }}
+            tag="td"
+            className={this.props.classes}
+            onChange={this.props.onChange}
+        >
+            {this.props.items.map(x => <DraggableAttribute name={x} key={x} />)}
+        </Sortable>;
+    }
+}
+
+DnDCell.propTypes = {
+    items: PropTypes.arrayOf(PropTypes.string).isRequired,
+    classes: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired
+};
+
+export default DnDCell;

src/DraggableAttribute.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class DraggableAttribute extends React.Component {
+    render() {
+        return <li data-id={this.props.name}>
+            <span className="pvtAttr">{this.props.name}</span>
+        </li>;
+    }
+}
+
+DraggableAttribute.propTypes = {
+    name: PropTypes.string.isRequired
+};
+
+export default DraggableAttribute;

src/PivotTable.jsx

@@ -1,9 +1,9 @@
-import React, {Component} from 'react';
-import {PivotData} from '../src/Utilities';
-import TableRenderer from '../src/TableRenderer';
+import React from 'react';
+import {PivotData} from './Utilities';
+import TableRenderer from './TableRenderer';
 
 
-export default class PivotTable extends Component {
+export default class PivotTable extends React.Component {
     render() {
         return <TableRenderer pivotData={new PivotData(this.props)} />;
     }

src/PivotTableUI.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import update from 'immutability-helper';
+import {PivotData} from './Utilities';
+import DnDCell from './DnDCell';
+import TableRenderer from './TableRenderer';
+import './pivottable.css';
+
+
+class PivotTableUI extends React.Component {
+    componentWillMount() {
+        this.materializeInput(this.props.data);
+    }
+
+    componentWillUpdate(nextProps) {
+        this.materializeInput(nextProps.data);
+    }
+
+    materializeInput(nextData) {
+        if (this.data === nextData) { return; }
+        this.data = nextData;
+        const attrValues = {};
+        const materializedInput = [];
+        let recordsProcessed = 0;
+        PivotData.forEachRecord(this.data, {}, function(record) {
+            materializedInput.push(record);
+            for (const attr of Object.keys(record)) {
+                if (!(attr in attrValues)) {
+                    attrValues[attr] = {};
+                    if (recordsProcessed > 0) {
+                        attrValues[attr].null = recordsProcessed;
+                    }
+                }
+            }
+            for (const attr in attrValues) {
+                const value = attr in record ? record[attr] : 'null';
+                if (!(value in attrValues[attr])) { attrValues[attr][value] = 0; }
+                attrValues[attr][value]++;
+            }
+            recordsProcessed++;
+        });
+
+        this.materializedInput = materializedInput;
+        this.attrValues = attrValues;
+    }
+
+    onChange(command) { this.props.onChange(update(this.props, command)); }
+
+    render() {
+        return (
+            <table className="pvtUi"><tbody>
+                <tr>
+                    <td>(renderers)</td>
+                    <DnDCell
+                        items={Object.keys(this.attrValues)
+                            .filter(e => !this.props.rows.includes(e) && !this.props.cols.includes(e))}
+                        classes="pvtAxisContainer pvtUnused pvtHorizList"
+                        onChange={function() {}}
+                    />
+                </tr>
+                <tr>
+                    <td>(aggregators)</td>
+                    <DnDCell
+                        items={this.props.cols} classes="pvtAxisContainer pvtHorizList pvtCols"
+                        onChange={newCols => this.onChange({cols: {$set: newCols}})}
+                    />
+                </tr>
+                <tr>
+                    <DnDCell
+                        items={this.props.rows} classes="pvtAxisContainer pvtVertList pvtRows"
+                        onChange={newRows => this.onChange({rows: {$set: newRows}})}
+                    />
+                    <td>
+                        <TableRenderer pivotData={new PivotData(
+                            update(this.props, {data: {$set: this.materializedInput}}))}
+                        />
+                    </td>
+                </tr>
+
+            </tbody></table>
+        );
+    }
+}
+
+PivotTableUI.defaultProps = {
+    rows: [], cols: []
+};
+
+PivotTableUI.propTypes = {
+    data: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.func]).isRequired,
+    onChange: PropTypes.func.isRequired,
+    cols: PropTypes.arrayOf(PropTypes.string),
+    rows: PropTypes.arrayOf(PropTypes.string)
+};
+
+
+export default PivotTableUI;

src/PivotTableUISmartWrapper.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import PivotTableUI from './PivotTableUI';
+
+
+export default class PivotTableUISmartWrapper extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = props;
+    }
+
+    render() {
+        return (<PivotTableUI {...this.state} onChange={s => this.setState(s)} />);
+    }
+}

src/TableRenderer.jsx

@@ -1,6 +1,8 @@
-import React, {Component} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import './pivottable.css';
 
+
 // helper function for setting row/col-span in pivotTableRenderer
 const spanSize = function(arr, i, j) {
     let x;
@@ -29,7 +31,7 @@ const spanSize = function(arr, i, j) {
     return len;
 };
 
-export default class TableRenderer extends Component {
+class TableRenderer extends React.Component {
     render() {
         const pivotData = this.props.pivotData;
         const colAttrs = pivotData.colAttrs;
@@ -41,15 +43,15 @@ export default class TableRenderer extends Component {
             <table className="pvtTable">
                 <thead>
                     {colAttrs.map(function(c, j) { return (
-                        <tr>
+                        <tr key={`colAttr${j}`}>
                             {(j === 0 && rowAttrs.length !== 0) &&
                             <th colSpan={rowAttrs.length} rowSpan={colAttrs.length} />
                             }
                             <th className="pvtAxisLabel">{c}</th>
                             {colKeys.map(function(colKey, i) {
                                 const x = spanSize(colKeys, i, j);
                                 if (x === -1) {return null;}
-                                return <th className="pvtColLabel"
+                                return <th className="pvtColLabel" key={`colKey${i}`}
                                     colSpan={x} rowSpan={j === colAttrs.length - 1 && rowAttrs.length !== 0 ? 2 : 1}
                                 >
                                     {colKey[j]}
@@ -66,8 +68,8 @@ export default class TableRenderer extends Component {
 
                     {(rowAttrs.length !== 0) &&
           <tr>
-              {rowAttrs.map(function(r) {
-                  return <th className="pvtAxisLabel">{r}</th>;
+              {rowAttrs.map(function(r, i) {
+                  return <th className="pvtAxisLabel" key={`rowAttr${i}`}>{r}</th>;
               })}
               <th className="pvtTotalLabel">{colAttrs.length === 0 ? 'Totals' : null}</th>
           </tr>
@@ -78,17 +80,18 @@ export default class TableRenderer extends Component {
                     {rowKeys.map(function(rowKey, i) {
                         const totalAggregator = pivotData.getAggregator(rowKey, []);
                         return (
-                            <tr>
+                            <tr key={`rowKeyRow${i}`}>
                                 {rowKey.map(function(txt, j) {
                                     const x = spanSize(rowKeys, i, j);
                                     if (x === -1) {return null;}
-                                    return <th className="pvtRowLabel"
+                                    return <th key={`rowKeyLabel${i}-${j}`} className="pvtRowLabel"
                                         rowSpan={x} colSpan={j === rowAttrs.length - 1 && colAttrs.length !== 0 ? 2 : 1}
                                     >{txt}</th>;
                                 })}
-                                {colKeys.map(function(colKey) {
+                                {colKeys.map(function(colKey, j) {
                                     const aggregator = pivotData.getAggregator(rowKey, colKey);
-                                    return <td className="pvtVal">{aggregator.format(aggregator.value())}</td>;
+                                    return <td className="pvtVal" key={`pvtVal${i}-${j}`}>
+                                        {aggregator.format(aggregator.value())}</td>;
                                 })}
                                 <td className="pvtTotal">{totalAggregator.format(totalAggregator.value())}</td>
                             </tr>
@@ -100,9 +103,11 @@ export default class TableRenderer extends Component {
                             colSpan={rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)}
                         >Totals</th>
 
-                        {colKeys.map(function(colKey) {
+                        {colKeys.map(function(colKey, i) {
                             const totalAggregator = pivotData.getAggregator([], colKey);
-                            return <td className="pvtTotal">{totalAggregator.format(totalAggregator.value())}</td>;
+                            return <td className="pvtTotal" key={`total${i}`}>
+                                {totalAggregator.format(totalAggregator.value())}
+                            </td>;
                         })}
 
                         <td className="pvtGrandTotal">{grandTotalAggregator.format(grandTotalAggregator.value())}</td>
@@ -112,3 +117,9 @@ export default class TableRenderer extends Component {
         );
     }
 }
+
+TableRenderer.propTypes = {
+    pivotData: PropTypes.object.isRequired
+};
+
+export default TableRenderer;

src/pivottable.css

@@ -1,4 +1,4 @@
-.pvtUi { color: #333; }
+.pvtUi { color: #333; font-family: Verdana; }
 
 
 table.pvtTable {
@@ -55,6 +55,9 @@ table.pvtTable tbody tr td {
     border-radius: 5px;
     border: 1px dashed #aaa;
 }
+.pvtAxisContainer li.pvtPlaceholder span.pvtAttr {
+    display: none;
+}
 
 .pvtAxisContainer li span.pvtAttr {
     -webkit-text-size-adjust: 100%;
@@ -72,7 +75,7 @@ table.pvtTable tbody tr td {
     color: grey;
 }
 
-.pvtHorizList li { display: inline; }
+.pvtHorizList li { display: inline-block; }
 .pvtVertList { vertical-align: top; }
 
 .pvtFilteredAttribute { font-style: italic }

stories/index.js

@@ -3,12 +3,14 @@ import React from 'react';
 import { setAddon, storiesOf } from '@storybook/react';
 
 import PivotTable from '../src/PivotTable'
+import PivotTableUISmartWrapper from '../src/PivotTableUISmartWrapper'
 import { mps } from './SampleData'
-const dataSetHider = (dataset) => (injectRecord) => dataset.map(injectRecord);
 
-storiesOf('PivotTable', module)
-  .add('Canadian MPs 2012 dataset', () => <PivotTable
-    cols={['Party']} rows={['Province']} data={dataSetHider(mps)} />
+storiesOf('Canadian Parliament 2012', module)
+  .add('PivotTable', () => <PivotTable
+    cols={['Party']} rows={['Province']} data={(injectRecord) => mps.map(injectRecord)} />
+  )
+  .add('PivotTableUISmartWrapper', () => <PivotTableUISmartWrapper data={(injectRecord) => mps.map(injectRecord)}/>
   );