feat: implement subtotal and heatmap for react-pivottable

examples/App.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import tips from './tips';
 import {sortAs} from '../src/Utilities';
+import SubtotalRenderers from '../src/SubtotalRenderers';
 import TableRenderers from '../src/TableRenderers';
-import createPlotlyComponent from 'react-plotly.js/factory';
 import createPlotlyRenderers from '../src/PlotlyRenderers';
+import createPlotlyComponent from 'react-plotly.js/factory';
 import PivotTableUI from '../src/PivotTableUI';
 import '../src/pivottable.css';
 import Dropzone from 'react-dropzone';
@@ -27,6 +28,7 @@ class PivotTableUISmartWrapper extends React.PureComponent {
                 renderers={Object.assign(
                     {},
                     TableRenderers,
+                    SubtotalRenderers,
                     createPlotlyRenderers(Plot)
                 )}
                 {...this.state.pivotState}
@@ -44,11 +46,11 @@ export default class App extends React.Component {
             filename: 'Sample Dataset: Tips',
             pivotState: {
                 data: tips,
-                rows: ['Payer Gender'],
-                cols: ['Party Size'],
-                aggregatorName: 'Sum over Sum',
-                vals: ['Tip', 'Total Bill'],
-                rendererName: 'Grouped Column Chart',
+                rows: ['Day of Week', 'Party Size'],
+                cols: ['Payer Gender', 'Meal'],
+                aggregatorName: 'Sum',
+                vals: ['Tip'],
+                rendererName: 'Table With Subtotal',
                 sorters: {
                     Meal: sortAs(['Lunch', 'Dinner']),
                     'Day of Week': sortAs([
@@ -68,7 +70,6 @@ export default class App extends React.Component {
                         ) {
                             names.push(record.Meal);
                         });
-                        alert(names.join('\n'));
                     },
                 },
             },

examples/index.jsx

@@ -1,20 +1,19 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
-import { AppContainer } from 'react-hot-loader'
+import { createRoot } from 'react-dom/client'
 import App from './App'
 
-const render = Component => {
-  ReactDOM.render(
-    <AppContainer>
-      <Component />
-    </AppContainer>,
-    document.getElementById('app'),
-  )
-}
+// Create a root
+const container = document.getElementById('app')
+const root = createRoot(container)
 
-render(App)
+// Render the app directly without AppContainer
+root.render(<App />)
 
 // Webpack Hot Module Replacement API
 if (module.hot) {
-  module.hot.accept('./App', () => { render(App) })
+  module.hot.accept('./App', () => {
+    // When App is updated, re-render
+    const NextApp = require('./App').default
+    root.render(<NextApp />)
+  })
 }

package.json

@@ -8,6 +8,7 @@
     "PivotTableUI.js",
     "PlotlyRenderers.js",
     "TableRenderers.js",
+    "SubtotalsRenderers.js",
     "Utilities.js",
     "PivotTable.js.map",
     "PivotTableUI.js.map",

src/PivotTableUI.jsx

@@ -210,6 +210,7 @@ export class Dropdown extends React.PureComponent {
                     this.props.toggle();
                   } else {
                     this.props.setValue(r);
+                    this.props.toggle();
                   }
                 }}
                 className={
@@ -284,12 +285,40 @@ class PivotTableUI extends React.PureComponent {
     this.setState(newState);
   }
 
+  handleDuplicates(newAttributes, existingAttributes) {
+    if (!newAttributes || !existingAttributes) {
+      return existingAttributes || [];
+    }
+    const duplicates = newAttributes.filter(item =>
+      existingAttributes.includes(item)
+    );
+    return duplicates.length > 0
+      ? existingAttributes.filter(item => !duplicates.includes(item))
+      : existingAttributes;
+  }
+
   sendPropUpdate(command) {
     this.props.onChange(update(this.props, command));
   }
 
   propUpdater(key) {
-    return value => this.sendPropUpdate({[key]: {$set: value}});
+    return value => {
+      const update = {[key]: {$set: value}};
+
+      if (key === 'rows') {
+        const updatedCols = this.handleDuplicates(value, this.props.cols);
+        if (updatedCols.length !== this.props.cols.length) {
+          update.cols = {$set: updatedCols};
+        }
+      } else if (key === 'cols') {
+        const updatedRows = this.handleDuplicates(value, this.props.rows);
+        if (updatedRows.length !== this.props.rows.length) {
+          update.rows = {$set: updatedRows};
+        }
+      }
+
+      this.sendPropUpdate(update);
+    };
   }
 
   setValuesInFilter(attribute, values) {
@@ -502,7 +531,6 @@ class PivotTableUI extends React.PureComponent {
         !this.props.hiddenAttributes.includes(e) &&
         !this.props.hiddenFromDragDrop.includes(e)
     );
-
     const colAttrsCell = this.makeDnDCell(
       colAttrs,
       this.propUpdater('cols'),
@@ -519,6 +547,7 @@ class PivotTableUI extends React.PureComponent {
       this.propUpdater('rows'),
       'pvtAxisContainer pvtVertList pvtRows'
     );
+
     const outputCell = (
       <td className="pvtOutput">
         <PivotTable