@hrforte/react-pivottable 1.0.0 → 1.1.0

package/dist/PlotlyRenderers.js

@@ -0,0 +1,822 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+exports.default = createPlotlyRenderers;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Utilities = require('./Utilities');
+
+var _TableRenderers = require('./TableRenderers');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var CHART_WIDTH_RATIO = 1.5; // Ratio to scale down from full window width
+var CHART_HEIGHT_RATIO = 1.4; // Ratio to scale down from full window height
+var CHART_HEIGHT_OFFSET = 50; // Fixed offset to subtract from height calculation
+
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+/**
+ * Ensures keys array is not empty by adding an empty array if needed
+ */
+function ensureNonEmptyKeys(keys) {
+  return keys.length > 0 ? keys : [[]];
+}
+
+/**
+ * Combines category and datum labels into a single display label
+ */
+function combineCategoryLabels(categoryKey, datumKey) {
+  var categoryLabel = categoryKey.join(' ') || '';
+  var datumLabel = datumKey.join(' ') || '';
+
+  // if (categoryLabel && datumLabel) {
+  //   return `${categoryLabel} - ${datumLabel}`;
+  // }
+  return categoryLabel || datumLabel || ' ';
+}
+
+/**
+ * Builds axis title from row and column titles
+ */
+function buildAxisTitle(categoryTitle, datumTitle) {
+  var defaultTitle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'Categories';
+
+  if (categoryTitle && datumTitle) {
+    return categoryTitle + ' - ' + datumTitle;
+  }
+  return categoryTitle || datumTitle || defaultTitle;
+}
+
+/**
+ * Collects aggregation values and labels across all categories
+ */
+function collectAggregationData(pivotData, categoryKeys, datumKeys, aggregationKey) {
+  var values = [];
+  var labels = [];
+
+  var _iteratorNormalCompletion = true;
+  var _didIteratorError = false;
+  var _iteratorError = undefined;
+
+  try {
+    for (var _iterator = categoryKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var categoryKey = _step.value;
+      var _iteratorNormalCompletion2 = true;
+      var _didIteratorError2 = false;
+      var _iteratorError2 = undefined;
+
+      try {
+        for (var _iterator2 = datumKeys[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+          var datumKey = _step2.value;
+
+          var val = parseFloat(pivotData.getAggregator(categoryKey, datumKey, aggregationKey).value());
+          values.push(isFinite(val) ? val : null);
+          labels.push(combineCategoryLabels(categoryKey, datumKey));
+        }
+      } catch (err) {
+        _didIteratorError2 = true;
+        _iteratorError2 = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion2 && _iterator2.return) {
+            _iterator2.return();
+          }
+        } finally {
+          if (_didIteratorError2) {
+            throw _iteratorError2;
+          }
+        }
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+
+  return { values: values, labels: labels };
+}
+
+/**
+ * Calculates chart dimensions
+ */
+function getChartDimensions() {
+  var rowMultiplier = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+
+  return {
+    width: window.innerWidth / CHART_WIDTH_RATIO,
+    height: (window.innerHeight / CHART_HEIGHT_RATIO - CHART_HEIGHT_OFFSET) * rowMultiplier
+  };
+}
+
+/**
+ * Creates common renderer props
+ */
+function createRendererProps() {
+  return {
+    defaultProps: Object.assign({}, _Utilities.PivotData.defaultProps, {
+      plotlyOptions: {},
+      plotlyConfig: {}
+    }),
+    propTypes: Object.assign({}, _Utilities.PivotData.propTypes, {
+      plotlyOptions: _propTypes2.default.object,
+      plotlyConfig: _propTypes2.default.object,
+      onRendererUpdate: _propTypes2.default.func
+    })
+  };
+}
+
+/**
+ * Determines chart rendering strategy based on trace options
+ */
+function getChartRenderingStrategy(traceOptions) {
+  if (traceOptions.type === 'pie') {
+    return 'pie-totals';
+  }
+  if (traceOptions.mode && traceOptions.mode.includes('lines')) {
+    return 'category-data';
+  }
+  // Bar, area, scatter charts also need category data
+  return 'category-data';
+}
+
+// ============================================================================
+// Renderer Factory Functions
+// ============================================================================
+
+function makeRenderer(PlotlyComponent) {
+  var traceOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var layoutOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var transpose = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+
+  var Renderer = function (_React$PureComponent) {
+    _inherits(Renderer, _React$PureComponent);
+
+    function Renderer() {
+      _classCallCheck(this, Renderer);
+
+      return _possibleConstructorReturn(this, (Renderer.__proto__ || Object.getPrototypeOf(Renderer)).apply(this, arguments));
+    }
+
+    _createClass(Renderer, [{
+      key: 'render',
+      value: function render() {
+        var _this2 = this;
+
+        var pivotData = new _Utilities.PivotData(this.props);
+        var rowKeys = pivotData.getRowKeys();
+        var colKeys = pivotData.getColKeys();
+        var traceKeys = ensureNonEmptyKeys(transpose ? colKeys : rowKeys);
+        var datumKeys = ensureNonEmptyKeys(transpose ? rowKeys : colKeys);
+
+        var primaryAggregation = pivotData.getPrimaryAggregation();
+        var fallbackAggregator = Object.keys(this.props.aggregators)[0] || 'Value';
+        var aggregatorName = primaryAggregation && primaryAggregation.aggregatorName || fallbackAggregator;
+        var aggregationVals = primaryAggregation && primaryAggregation.vals || [];
+        var fullAggName = primaryAggregation && primaryAggregation.label || (aggregationVals.length ? aggregatorName + ' of ' + aggregationVals.join(', ') : aggregatorName);
+
+        var data = traceKeys.map(function (traceKey) {
+          var values = [];
+          var labels = [];
+          var textValues = [];
+
+          var _iteratorNormalCompletion3 = true;
+          var _didIteratorError3 = false;
+          var _iteratorError3 = undefined;
+
+          try {
+            for (var _iterator3 = datumKeys[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+              var datumKey = _step3.value;
+
+              var aggregator = pivotData.getAggregator(transpose ? datumKey : traceKey, transpose ? traceKey : datumKey);
+              var val = parseFloat(aggregator.value());
+              // Get cell formatting from plotlyOptions (similar to tableOptions)
+              var cellFormatting = _this2.props.plotlyOptions && _this2.props.plotlyOptions.cellFormatting || null;
+
+              // Apply cell formatting to the formatted value
+              var finalFormattedValue = (0, _TableRenderers.applyCellFormatting)(aggregator.value(), cellFormatting, aggregator.format.bind(aggregator), aggregatorName);
+              values.push(isFinite(val) ? val : null);
+              labels.push(datumKey.join('-') || ' ');
+              textValues.push(finalFormattedValue);
+            }
+          } catch (err) {
+            _didIteratorError3 = true;
+            _iteratorError3 = err;
+          } finally {
+            try {
+              if (!_iteratorNormalCompletion3 && _iterator3.return) {
+                _iterator3.return();
+              }
+            } finally {
+              if (_didIteratorError3) {
+                throw _iteratorError3;
+              }
+            }
+          }
+
+          var trace = {
+            name: traceKey.join('-') || fullAggName,
+            text: textValues
+          };
+
+          if (traceOptions.type === 'pie') {
+            trace.values = values;
+            trace.labels = labels.length > 1 ? labels : [fullAggName];
+            trace.hovertemplate = '<b>%{label}</b><br>' + fullAggName + '<br><b>%{value}</b><extra></extra>';
+            trace.textinfo = 'value';
+            trace.textposition = 'inside';
+          } else {
+            trace.x = transpose ? values : labels;
+            trace.y = transpose ? labels : values;
+            trace.hovertemplate = transpose ? '<b>%{y}</b><br>' + fullAggName + '<br><b>%{x}</b><extra></extra>' : '<b>%{x}</b><br>' + fullAggName + '<br><b>%{y}</b><extra></extra>';
+
+            // Configure text display based on chart type
+            if (traceOptions.type === 'bar') {
+              trace.textposition = traceOptions.orientation === 'h' ? 'middle right' : 'outside';
+              trace.textmode = 'text';
+            } else if (traceOptions.mode && traceOptions.mode.includes('lines')) {
+              trace.textposition = 'top center';
+              trace.textmode = 'lines+markers+text'; // Show text on markers for line charts
+            } else if (traceOptions.mode === 'markers') {
+              trace.textposition = 'middle right';
+              trace.textmode = 'text+markers'; // Show text with markers
+            } else if (traceOptions.stackgroup) {
+              trace.textposition = 'middle center';
+              trace.textmode = 'text';
+            } else {
+              trace.textposition = 'outside';
+              trace.textmode = 'text';
+            }
+          }
+
+          return Object.assign(trace, traceOptions);
+        });
+
+        var titleText = fullAggName;
+        var hAxisTitle = transpose ? this.props.rows.join('-') : this.props.cols.join('-');
+        var groupByTitle = transpose ? this.props.cols.join('-') : this.props.rows.join('-');
+        if (hAxisTitle !== '') {
+          titleText += ' vs ' + hAxisTitle;
+        }
+        if (groupByTitle !== '') {
+          titleText += ' by ' + groupByTitle;
+        }
+
+        var dimensions = getChartDimensions();
+        var layout = {
+          title: titleText,
+          hovermode: 'closest',
+          width: dimensions.width,
+          height: dimensions.height
+        };
+
+        if (traceOptions.type === 'pie') {
+          var columns = Math.ceil(Math.sqrt(data.length));
+          var rows = Math.ceil(data.length / columns);
+          layout.grid = { columns: columns, rows: rows };
+          data.forEach(function (d, i) {
+            d.domain = {
+              row: Math.floor(i / columns),
+              column: i - columns * Math.floor(i / columns)
+            };
+            if (data.length > 1) {
+              d.title = d.name;
+            }
+          });
+          if (data[0].labels.length === 1) {
+            layout.showlegend = false;
+          }
+        } else {
+          layout.xaxis = {
+            title: transpose ? fullAggName : null,
+            automargin: true
+          };
+          layout.yaxis = {
+            title: transpose ? null : fullAggName,
+            automargin: true
+          };
+        }
+
+        return _react2.default.createElement(PlotlyComponent, {
+          data: data,
+          layout: Object.assign(layout, layoutOptions, this.props.plotlyOptions),
+          config: this.props.plotlyConfig,
+          onUpdate: this.props.onRendererUpdate
+        });
+      }
+    }]);
+
+    return Renderer;
+  }(_react2.default.PureComponent);
+
+  var rendererProps = createRendererProps();
+  Renderer.defaultProps = rendererProps.defaultProps;
+  Renderer.propTypes = rendererProps.propTypes;
+
+  return Renderer;
+}
+
+/**
+ * Creates a pie chart trace showing category-level breakdown for a single aggregation
+ */
+function createPieCategoryTrace(pivotData, aggregation, categoryKeys, datumKeys, subplotIndex, traceOptions) {
+  var cellFormatting = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+
+  var values = [];
+  var labels = [];
+
+  var _iteratorNormalCompletion4 = true;
+  var _didIteratorError4 = false;
+  var _iteratorError4 = undefined;
+
+  try {
+    for (var _iterator4 = categoryKeys[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
+      var categoryKey = _step4.value;
+      var _iteratorNormalCompletion6 = true;
+      var _didIteratorError6 = false;
+      var _iteratorError6 = undefined;
+
+      try {
+        for (var _iterator6 = datumKeys[Symbol.iterator](), _step6; !(_iteratorNormalCompletion6 = (_step6 = _iterator6.next()).done); _iteratorNormalCompletion6 = true) {
+          var datumKey = _step6.value;
+
+          var aggregator = pivotData.getAggregator(categoryKey, datumKey, aggregation.key);
+          var val = parseFloat(aggregator.value());
+          if (isFinite(val) && val !== null) {
+            values.push(val);
+            labels.push(combineCategoryLabels(categoryKey, datumKey));
+          }
+        }
+      } catch (err) {
+        _didIteratorError6 = true;
+        _iteratorError6 = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion6 && _iterator6.return) {
+            _iterator6.return();
+          }
+        } finally {
+          if (_didIteratorError6) {
+            throw _iteratorError6;
+          }
+        }
+      }
+    }
+  } catch (err) {
+    _didIteratorError4 = true;
+    _iteratorError4 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion4 && _iterator4.return) {
+        _iterator4.return();
+      }
+    } finally {
+      if (_didIteratorError4) {
+        throw _iteratorError4;
+      }
+    }
+  }
+
+  var textValues = [];
+  var _iteratorNormalCompletion5 = true;
+  var _didIteratorError5 = false;
+  var _iteratorError5 = undefined;
+
+  try {
+    for (var _iterator5 = categoryKeys[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
+      var _categoryKey = _step5.value;
+      var _iteratorNormalCompletion7 = true;
+      var _didIteratorError7 = false;
+      var _iteratorError7 = undefined;
+
+      try {
+        for (var _iterator7 = datumKeys[Symbol.iterator](), _step7; !(_iteratorNormalCompletion7 = (_step7 = _iterator7.next()).done); _iteratorNormalCompletion7 = true) {
+          var _datumKey = _step7.value;
+
+          var _aggregator = pivotData.getAggregator(_categoryKey, _datumKey, aggregation.key);
+
+          var finalFormattedValue = (0, _TableRenderers.applyCellFormatting)(_aggregator.value(), cellFormatting, _aggregator.format.bind(_aggregator), aggregation.aggregatorName);
+
+          textValues.push(finalFormattedValue);
+        }
+      } catch (err) {
+        _didIteratorError7 = true;
+        _iteratorError7 = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion7 && _iterator7.return) {
+            _iterator7.return();
+          }
+        } finally {
+          if (_didIteratorError7) {
+            throw _iteratorError7;
+          }
+        }
+      }
+    }
+  } catch (err) {
+    _didIteratorError5 = true;
+    _iteratorError5 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion5 && _iterator5.return) {
+        _iterator5.return();
+      }
+    } finally {
+      if (_didIteratorError5) {
+        throw _iteratorError5;
+      }
+    }
+  }
+
+  var trace = {
+    name: aggregation.label || aggregation.key,
+    values: values.length > 0 ? values : [0],
+    labels: labels.length > 0 ? labels : ['No Data'],
+    text: textValues.length > 0 ? textValues : ['No Data'],
+    title: {
+      text: aggregation.label || aggregation.key
+    },
+    hovertemplate: '<b>%{label}</b><br>' + (aggregation.label || aggregation.key) + '<br><b>%{text}</b><extra></extra>'
+  };
+
+  var mergedTrace = Object.assign({}, traceOptions, trace);
+  mergedTrace.textinfo = 'text';
+  mergedTrace.textposition = 'inside';
+
+  return mergedTrace;
+}
+
+/**
+ * Creates traces for charts showing category-level data
+ */
+function createCategoryDataTraces(pivotData, aggregations, categoryKeys, datumKeys, groupIndex, traceOptions, plotlyOptions) {
+  var traces = [];
+
+  aggregations.forEach(function (aggregation) {
+    var _collectAggregationDa = collectAggregationData(pivotData, categoryKeys, datumKeys, aggregation.key),
+        values = _collectAggregationDa.values,
+        labels = _collectAggregationDa.labels;
+
+    // Get formatted text values for display
+
+
+    var textValues = [];
+    var _iteratorNormalCompletion8 = true;
+    var _didIteratorError8 = false;
+    var _iteratorError8 = undefined;
+
+    try {
+      for (var _iterator8 = categoryKeys[Symbol.iterator](), _step8; !(_iteratorNormalCompletion8 = (_step8 = _iterator8.next()).done); _iteratorNormalCompletion8 = true) {
+        var categoryKey = _step8.value;
+        var _iteratorNormalCompletion9 = true;
+        var _didIteratorError9 = false;
+        var _iteratorError9 = undefined;
+
+        try {
+          for (var _iterator9 = datumKeys[Symbol.iterator](), _step9; !(_iteratorNormalCompletion9 = (_step9 = _iterator9.next()).done); _iteratorNormalCompletion9 = true) {
+            var datumKey = _step9.value;
+
+            var aggregator = pivotData.getAggregator(categoryKey, datumKey, aggregation.key);
+            var finalFormattedValue = (0, _TableRenderers.applyCellFormatting)(aggregator.value(), plotlyOptions && plotlyOptions.cellFormatting, aggregator.format.bind(aggregator), aggregation.aggregatorName);
+            textValues.push(finalFormattedValue);
+          }
+        } catch (err) {
+          _didIteratorError9 = true;
+          _iteratorError9 = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion9 && _iterator9.return) {
+              _iterator9.return();
+            }
+          } finally {
+            if (_didIteratorError9) {
+              throw _iteratorError9;
+            }
+          }
+        }
+      }
+    } catch (err) {
+      _didIteratorError8 = true;
+      _iteratorError8 = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion8 && _iterator8.return) {
+          _iterator8.return();
+        }
+      } finally {
+        if (_didIteratorError8) {
+          throw _iteratorError8;
+        }
+      }
+    }
+
+    var trace = {
+      name: aggregation.label || aggregation.key,
+      xaxis: 'x' + (groupIndex + 1),
+      yaxis: 'y' + (groupIndex + 1),
+      x: labels,
+      y: values,
+      text: textValues,
+      hovertemplate: '<b>%{x}</b><br>' + (aggregation.label || aggregation.key) + '<br><b>%{text}</b><extra></extra>'
+    };
+
+    if (plotlyOptions && plotlyOptions.displayText) {
+
+      if (traceOptions.type === 'bar') {
+        trace.textposition = traceOptions.orientation === 'h' ? 'middle right' : 'outside';
+        traceOptions.mode = 'text';
+      } else if (traceOptions.mode && traceOptions.mode.includes('lines')) {
+        trace.textposition = 'top';
+        traceOptions.mode = 'lines+markers+text';
+      } else if (traceOptions.mode && traceOptions.mode.includes('markers')) {
+        trace.textposition = 'top center';
+        traceOptions.mode = 'markers+text';
+      } else {
+        trace.textposition = 'top center';
+        traceOptions.mode = 'text';
+      }
+    }
+
+    traces.push(Object.assign(trace, traceOptions));
+  });
+
+  return traces;
+}
+
+/**
+ * Creates axis configuration for a subplot group
+ */
+function createGroupedSubplotAxes(groupIndex, aggregations, rowsTitle, colsTitle) {
+  var _ref;
+
+  var showXAxisTitle = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+
+  var primaryAgg = aggregations[0];
+  var aggName = primaryAgg.aggregatorName;
+  var xAxisTitle = showXAxisTitle ? buildAxisTitle(rowsTitle, colsTitle) : null;
+
+  return _ref = {}, _defineProperty(_ref, 'xaxis' + (groupIndex + 1), {
+    title: xAxisTitle,
+    showticklabels: false,
+    automargin: true
+  }), _defineProperty(_ref, 'yaxis' + (groupIndex + 1), {
+    title: aggName,
+    automargin: true
+  }), _ref;
+}
+
+function makeGroupedRenderer(PlotlyComponent) {
+  var traceOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var layoutOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+  var Renderer = function (_React$PureComponent2) {
+    _inherits(Renderer, _React$PureComponent2);
+
+    function Renderer() {
+      _classCallCheck(this, Renderer);
+
+      return _possibleConstructorReturn(this, (Renderer.__proto__ || Object.getPrototypeOf(Renderer)).apply(this, arguments));
+    }
+
+    _createClass(Renderer, [{
+      key: 'render',
+      value: function render() {
+        var _this4 = this;
+
+        var pivotData = new _Utilities.PivotData(this.props);
+        var renderingStrategy = getChartRenderingStrategy(traceOptions);
+
+        // For pie charts, treat each aggregation as a separate subplot
+        if (renderingStrategy === 'pie-totals') {
+          var allAggregations = pivotData.getAggregations();
+
+          if (allAggregations.length === 0) {
+            return _react2.default.createElement(
+              'div',
+              null,
+              'No aggregations to display'
+            );
+          }
+
+          var _rowKeys = pivotData.getRowKeys();
+          var _colKeys = pivotData.getColKeys();
+          var _categoryKeys = ensureNonEmptyKeys(_rowKeys);
+          var _datumKeys = ensureNonEmptyKeys(_colKeys);
+
+          var _data = [];
+          var columns = Math.ceil(Math.sqrt(allAggregations.length));
+          var _rows = Math.ceil(allAggregations.length / columns);
+          var _dimensions = getChartDimensions(_rows);
+
+          var _layout = {
+            title: 'Aggregations',
+            grid: { rows: _rows, columns: columns, pattern: 'independent' },
+            width: _dimensions.width,
+            height: _dimensions.height,
+            showlegend: true,
+            hovermode: 'closest'
+          };
+
+          // Create a separate subplot for each aggregation
+          allAggregations.forEach(function (aggregation, index) {
+            var trace = createPieCategoryTrace(pivotData, aggregation, _categoryKeys, _datumKeys, index, traceOptions, _this4.props.plotlyOptions && _this4.props.plotlyOptions.cellFormatting);
+
+            trace.domain = {
+              row: Math.floor(index / columns),
+              column: index % columns
+            };
+
+            _data.push(trace);
+          });
+
+          return _react2.default.createElement(PlotlyComponent, {
+            data: _data,
+            layout: Object.assign(_layout, layoutOptions, this.props.plotlyOptions),
+            config: this.props.plotlyConfig,
+            onUpdate: this.props.onRendererUpdate
+          });
+        }
+
+        // For non-pie charts, group by aggregation type
+        var groupedAggregations = pivotData.groupAggregationsByType();
+        var groupNames = Object.keys(groupedAggregations);
+
+        if (groupNames.length === 0) {
+          return _react2.default.createElement(
+            'div',
+            null,
+            'No aggregations to display'
+          );
+        }
+
+        var rows = groupNames.length;
+
+        var data = [];
+        var dimensions = getChartDimensions(rows);
+        var layout = {
+          title: 'Grouped Aggregations by Type',
+          grid: { rows: rows, columns: 1, pattern: 'independent' },
+          width: dimensions.width,
+          height: dimensions.height,
+          hovermode: 'closest'
+        };
+
+        var rowKeys = pivotData.getRowKeys();
+        var colKeys = pivotData.getColKeys();
+        var categoryKeys = ensureNonEmptyKeys(rowKeys);
+        var datumKeys = ensureNonEmptyKeys(colKeys);
+
+        groupNames.forEach(function (groupName, groupIndex) {
+          var aggregations = groupedAggregations[groupName];
+
+          var traces = createCategoryDataTraces(pivotData, aggregations, categoryKeys, datumKeys, groupIndex, traceOptions, _this4.props.plotlyOptions);
+          data.push.apply(data, _toConsumableArray(traces));
+
+          Object.assign(layout, createGroupedSubplotAxes(groupIndex, aggregations, _this4.props.rows.join('-'), _this4.props.cols.join('-'), false));
+        });
+
+        return _react2.default.createElement(PlotlyComponent, {
+          data: data,
+          layout: Object.assign(layout, layoutOptions, this.props.plotlyOptions),
+          config: this.props.plotlyConfig,
+          onUpdate: this.props.onRendererUpdate
+        });
+      }
+    }]);
+
+    return Renderer;
+  }(_react2.default.PureComponent);
+
+  var rendererProps = createRendererProps();
+  Renderer.defaultProps = rendererProps.defaultProps;
+  Renderer.propTypes = rendererProps.propTypes;
+
+  return Renderer;
+}
+
+function makeScatterRenderer(PlotlyComponent) {
+  var Renderer = function (_React$PureComponent3) {
+    _inherits(Renderer, _React$PureComponent3);
+
+    function Renderer() {
+      _classCallCheck(this, Renderer);
+
+      return _possibleConstructorReturn(this, (Renderer.__proto__ || Object.getPrototypeOf(Renderer)).apply(this, arguments));
+    }
+
+    _createClass(Renderer, [{
+      key: 'render',
+      value: function render() {
+        var pivotData = new _Utilities.PivotData(this.props);
+        var rowKeys = ensureNonEmptyKeys(pivotData.getRowKeys());
+        var colKeys = ensureNonEmptyKeys(pivotData.getColKeys());
+
+        var data = {
+          x: [],
+          y: [],
+          text: [],
+          type: 'scatter',
+          mode: 'markers+text',
+          textposition: 'middle right',
+          hovertemplate: '<b>%{x}</b><br>%{y}<br><b>%{text}</b><extra></extra>'
+        };
+
+        // Use forEach instead of map since we're not returning values
+        rowKeys.forEach(function (rowKey) {
+          colKeys.forEach(function (colKey) {
+            var aggregator = pivotData.getAggregator(rowKey, colKey);
+            var v = aggregator.value();
+            if (v !== null) {
+              data.x.push(colKey.join('-'));
+              data.y.push(rowKey.join('-'));
+              data.text.push(aggregator.format(v));
+            }
+          });
+        });
+
+        var dimensions = getChartDimensions();
+        var layout = {
+          title: this.props.rows.join('-') + ' vs ' + this.props.cols.join('-'),
+          hovermode: 'closest',
+          xaxis: { title: this.props.cols.join('-'), automargin: true },
+          yaxis: { title: this.props.rows.join('-'), automargin: true },
+          width: dimensions.width,
+          height: dimensions.height
+        };
+
+        return _react2.default.createElement(PlotlyComponent, {
+          data: [data],
+          layout: Object.assign(layout, this.props.plotlyOptions),
+          config: this.props.plotlyConfig,
+          onUpdate: this.props.onRendererUpdate
+        });
+      }
+    }]);
+
+    return Renderer;
+  }(_react2.default.PureComponent);
+
+  var rendererProps = createRendererProps();
+  Renderer.defaultProps = rendererProps.defaultProps;
+  Renderer.propTypes = rendererProps.propTypes;
+
+  return Renderer;
+}
+
+function createPlotlyRenderers(PlotlyComponent) {
+  return {
+    'Grouped Column Chart': makeRenderer(PlotlyComponent, { type: 'bar' }, { barmode: 'group' }),
+    'Stacked Column Chart': makeRenderer(PlotlyComponent, { type: 'bar' }, { barmode: 'relative' }),
+    'Grouped Bar Chart': makeRenderer(PlotlyComponent, { type: 'bar', orientation: 'h' }, { barmode: 'group' }, true),
+    'Stacked Bar Chart': makeRenderer(PlotlyComponent, { type: 'bar', orientation: 'h' }, { barmode: 'relative' }, true),
+    'Line Chart': makeRenderer(PlotlyComponent),
+    'Dot Chart': makeRenderer(PlotlyComponent, { mode: 'markers' }, {}, true),
+    'Area Chart': makeRenderer(PlotlyComponent, { stackgroup: 1 }),
+    'Scatter Chart': makeScatterRenderer(PlotlyComponent),
+    'Multiple Pie Chart': makeRenderer(PlotlyComponent, { type: 'pie', scalegroup: 1, hoverinfo: 'label+value', textinfo: 'none' }, {}, true),
+    'Grouped Bars by Type': makeGroupedRenderer(PlotlyComponent, { type: 'bar', orientation: 'h' }, { barmode: 'group' }),
+    'Grouped Columns by Type': makeGroupedRenderer(PlotlyComponent, { type: 'bar' }, { barmode: 'group' }),
+    'Grouped Lines by Type': makeGroupedRenderer(PlotlyComponent, { mode: 'lines+markers' }),
+    'Grouped Areas by Type': makeGroupedRenderer(PlotlyComponent, { stackgroup: 1 }),
+    'Grouped Scatters by Type': makeGroupedRenderer(PlotlyComponent, { mode: 'markers' }),
+    'Grouped Pies by Type': makeGroupedRenderer(PlotlyComponent, { type: 'pie' })
+  };
+}
+module.exports = exports['default'];
+//# sourceMappingURL=PlotlyRenderers.js.map