\n {items.map(x => (\n \n ))}\n \n );\n }\n\n render() {\n const numValsAllowed =\n this.props.aggregators[this.props.aggregatorName]([])().numInputs || 0;\n\n const aggregatorCellOutlet = this.props.aggregators[\n this.props.aggregatorName\n ]([])().outlet;\n\n const rendererName =\n this.props.rendererName in this.props.renderers\n ? this.props.rendererName\n : Object.keys(this.props.renderers)[0];\n\n const rendererCell = (\n | \n \n this.setState({\n openDropdown: this.isOpen('renderer') ? false : 'renderer',\n })\n }\n setValue={this.propUpdater('rendererName')}\n />\n | \n );\n\n const sortIcons = {\n key_a_to_z: {\n rowSymbol: '↕',\n colSymbol: '↔',\n next: 'value_a_to_z',\n },\n value_a_to_z: {\n rowSymbol: '↓',\n colSymbol: '→',\n next: 'value_z_to_a',\n },\n value_z_to_a: {rowSymbol: '↑', colSymbol: '←', next: 'key_a_to_z'},\n };\n\n const aggregatorCell = (\n \n \n this.setState({\n openDropdown: this.isOpen('aggregators') ? false : 'aggregators',\n })\n }\n setValue={this.propUpdater('aggregatorName')}\n />\n \n this.propUpdater('rowOrder')(sortIcons[this.props.rowOrder].next)\n }\n >\n {sortIcons[this.props.rowOrder].rowSymbol}\n \n \n this.propUpdater('colOrder')(sortIcons[this.props.colOrder].next)\n }\n >\n {sortIcons[this.props.colOrder].colSymbol}\n \n {numValsAllowed > 0 &&
}\n {new Array(numValsAllowed).fill().map((n, i) => [\n \n !this.props.hiddenAttributes.includes(e) &&\n !this.props.hiddenFromAggregators.includes(e)\n )}\n open={this.isOpen(`val${i}`)}\n zIndex={this.isOpen(`val${i}`) ? this.state.maxZIndex + 1 : 1}\n toggle={() =>\n this.setState({\n openDropdown: this.isOpen(`val${i}`) ? false : `val${i}`,\n })\n }\n setValue={value =>\n this.sendPropUpdate({\n vals: {$splice: [[i, 1, value]]},\n })\n }\n />,\n i + 1 !== numValsAllowed ?
: null,\n ])}\n {aggregatorCellOutlet && aggregatorCellOutlet(this.props.data)}\n | \n );\n\n const unusedAttrs = Object.keys(this.state.attrValues)\n .filter(\n e =>\n !this.props.rows.includes(e) &&\n !this.props.cols.includes(e) &&\n !this.props.hiddenAttributes.includes(e) &&\n !this.props.hiddenFromDragDrop.includes(e)\n )\n .sort(sortAs(this.state.unusedOrder));\n\n const unusedLength = unusedAttrs.reduce((r, e) => r + e.length, 0);\n const horizUnused = unusedLength < this.props.unusedOrientationCutoff;\n\n const unusedAttrsCell = this.makeDnDCell(\n unusedAttrs,\n order => this.setState({unusedOrder: order}),\n `pvtAxisContainer pvtUnused ${\n horizUnused ? 'pvtHorizList' : 'pvtVertList'\n }`\n );\n\n const colAttrs = this.props.cols.filter(\n e =>\n !this.props.hiddenAttributes.includes(e) &&\n !this.props.hiddenFromDragDrop.includes(e)\n );\n\n const colAttrsCell = this.makeDnDCell(\n colAttrs,\n this.propUpdater('cols'),\n 'pvtAxisContainer pvtHorizList pvtCols'\n );\n\n const rowAttrs = this.props.rows.filter(\n e =>\n !this.props.hiddenAttributes.includes(e) &&\n !this.props.hiddenFromDragDrop.includes(e)\n );\n const rowAttrsCell = this.makeDnDCell(\n rowAttrs,\n this.propUpdater('rows'),\n 'pvtAxisContainer pvtVertList pvtRows'\n );\n const outputCell = (\n \n \n | \n );\n\n if (horizUnused) {\n return (\n \n this.setState({openDropdown: false})}>\n \n {rendererCell}\n {unusedAttrsCell}\n
\n \n {aggregatorCell}\n {colAttrsCell}\n
\n \n {rowAttrsCell}\n {outputCell}\n
\n \n
\n );\n }\n\n return (\n \n this.setState({openDropdown: false})}>\n \n {rendererCell}\n {aggregatorCell}\n {colAttrsCell}\n
\n \n {unusedAttrsCell}\n {rowAttrsCell}\n {outputCell}\n
\n \n
\n );\n }\n}\n\nPivotTableUI.propTypes = Object.assign({}, PivotTable.propTypes, {\n onChange: PropTypes.func.isRequired,\n hiddenAttributes: PropTypes.arrayOf(PropTypes.string),\n hiddenFromAggregators: PropTypes.arrayOf(PropTypes.string),\n hiddenFromDragDrop: PropTypes.arrayOf(PropTypes.string),\n unusedOrientationCutoff: PropTypes.number,\n menuLimit: PropTypes.number,\n});\n\nPivotTableUI.defaultProps = Object.assign({}, PivotTable.defaultProps, {\n hiddenAttributes: [],\n hiddenFromAggregators: [],\n hiddenFromDragDrop: [],\n unusedOrientationCutoff: 85,\n menuLimit: 500,\n});\n\nexport default PivotTableUI;\n"]}
\ No newline at end of file
diff --git a/PlotlyRenderers.js b/PlotlyRenderers.js
new file mode 100644
index 0000000..575dac7
--- /dev/null
+++ b/PlotlyRenderers.js
@@ -0,0 +1,265 @@
+'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');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
+
+/* eslint-disable react/prop-types */
+// eslint can't see inherited propTypes!
+
+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 pivotData = new _Utilities.PivotData(this.props);
+ var rowKeys = pivotData.getRowKeys();
+ var colKeys = pivotData.getColKeys();
+ var traceKeys = transpose ? colKeys : rowKeys;
+ if (traceKeys.length === 0) {
+ traceKeys.push([]);
+ }
+ var datumKeys = transpose ? rowKeys : colKeys;
+ if (datumKeys.length === 0) {
+ datumKeys.push([]);
+ }
+
+ var fullAggName = this.props.aggregatorName;
+ var numInputs = this.props.aggregators[fullAggName]([])().numInputs || 0;
+ if (numInputs !== 0) {
+ fullAggName += ' of ' + this.props.vals.slice(0, numInputs).join(', ');
+ }
+
+ var data = traceKeys.map(function (traceKey) {
+ var values = [];
+ var labels = [];
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+
+ try {
+ for (var _iterator = datumKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var datumKey = _step.value;
+
+ var val = parseFloat(pivotData.getAggregator(transpose ? datumKey : traceKey, transpose ? traceKey : datumKey).value());
+ values.push(isFinite(val) ? val : null);
+ labels.push(datumKey.join('-') || ' ');
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+
+ var trace = { name: traceKey.join('-') || fullAggName };
+ if (traceOptions.type === 'pie') {
+ trace.values = values;
+ trace.labels = labels.length > 1 ? labels : [fullAggName];
+ } else {
+ trace.x = transpose ? values : labels;
+ trace.y = transpose ? labels : values;
+ }
+ 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 layout = {
+ title: titleText,
+ hovermode: 'closest',
+ /* eslint-disable no-magic-numbers */
+ width: window.innerWidth / 1.5,
+ height: window.innerHeight / 1.4 - 50
+ /* eslint-enable no-magic-numbers */
+ };
+
+ 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);
+
+ Renderer.defaultProps = Object.assign({}, _Utilities.PivotData.defaultProps, {
+ plotlyOptions: {},
+ plotlyConfig: {}
+ });
+ Renderer.propTypes = Object.assign({}, _Utilities.PivotData.propTypes, {
+ plotlyOptions: _propTypes2.default.object,
+ plotlyConfig: _propTypes2.default.object,
+ onRendererUpdate: _propTypes2.default.func
+ });
+
+ return Renderer;
+}
+
+function makeScatterRenderer(PlotlyComponent) {
+ 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 pivotData = new _Utilities.PivotData(this.props);
+ var rowKeys = pivotData.getRowKeys();
+ var colKeys = pivotData.getColKeys();
+ if (rowKeys.length === 0) {
+ rowKeys.push([]);
+ }
+ if (colKeys.length === 0) {
+ colKeys.push([]);
+ }
+
+ var data = { x: [], y: [], text: [], type: 'scatter', mode: 'markers' };
+
+ rowKeys.map(function (rowKey) {
+ colKeys.map(function (colKey) {
+ var v = pivotData.getAggregator(rowKey, colKey).value();
+ if (v !== null) {
+ data.x.push(colKey.join('-'));
+ data.y.push(rowKey.join('-'));
+ data.text.push(v);
+ }
+ });
+ });
+
+ var layout = {
+ title: this.props.rows.join('-') + ' vs ' + this.props.cols.join('-'),
+ hovermode: 'closest',
+ /* eslint-disable no-magic-numbers */
+ xaxis: { title: this.props.cols.join('-'), automargin: true },
+ yaxis: { title: this.props.rows.join('-'), automargin: true },
+ width: window.innerWidth / 1.5,
+ height: window.innerHeight / 1.4 - 50
+ /* eslint-enable no-magic-numbers */
+ };
+
+ 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);
+
+ Renderer.defaultProps = Object.assign({}, _Utilities.PivotData.defaultProps, {
+ plotlyOptions: {},
+ plotlyConfig: {}
+ });
+ Renderer.propTypes = Object.assign({}, _Utilities.PivotData.propTypes, {
+ plotlyOptions: _propTypes2.default.object,
+ plotlyConfig: _propTypes2.default.object,
+ onRendererUpdate: _propTypes2.default.func
+ });
+
+ 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)
+ };
+}
+module.exports = exports['default'];
+//# sourceMappingURL=PlotlyRenderers.js.map
\ No newline at end of file
diff --git a/PlotlyRenderers.js.map b/PlotlyRenderers.js.map
new file mode 100644
index 0000000..ecbc545
--- /dev/null
+++ b/PlotlyRenderers.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["src/PlotlyRenderers.jsx"],"names":["createPlotlyRenderers","makeRenderer","PlotlyComponent","traceOptions","layoutOptions","transpose","Renderer","pivotData","PivotData","props","rowKeys","getRowKeys","colKeys","getColKeys","traceKeys","length","push","datumKeys","fullAggName","aggregatorName","numInputs","aggregators","vals","slice","join","data","map","values","labels","datumKey","val","parseFloat","getAggregator","traceKey","value","isFinite","trace","name","type","x","y","Object","assign","titleText","hAxisTitle","rows","cols","groupByTitle","layout","title","hovermode","width","window","innerWidth","height","innerHeight","columns","Math","ceil","sqrt","grid","forEach","d","i","domain","row","floor","column","showlegend","xaxis","automargin","yaxis","plotlyOptions","plotlyConfig","onRendererUpdate","React","PureComponent","defaultProps","propTypes","PropTypes","object","func","makeScatterRenderer","text","mode","v","rowKey","colKey","barmode","orientation","stackgroup","scalegroup","hoverinfo","textinfo"],"mappings":"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","file":"PlotlyRenderers.js","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {PivotData} from './Utilities';\n\n/* eslint-disable react/prop-types */\n// eslint can't see inherited propTypes!\n\nfunction makeRenderer(\n PlotlyComponent,\n traceOptions = {},\n layoutOptions = {},\n transpose = false\n) {\n class Renderer extends React.PureComponent {\n render() {\n const pivotData = new PivotData(this.props);\n const rowKeys = pivotData.getRowKeys();\n const colKeys = pivotData.getColKeys();\n const traceKeys = transpose ? colKeys : rowKeys;\n if (traceKeys.length === 0) {\n traceKeys.push([]);\n }\n const datumKeys = transpose ? rowKeys : colKeys;\n if (datumKeys.length === 0) {\n datumKeys.push([]);\n }\n\n let fullAggName = this.props.aggregatorName;\n const numInputs =\n this.props.aggregators[fullAggName]([])().numInputs || 0;\n if (numInputs !== 0) {\n fullAggName += ` of ${this.props.vals.slice(0, numInputs).join(', ')}`;\n }\n\n const data = traceKeys.map(traceKey => {\n const values = [];\n const labels = [];\n for (const datumKey of datumKeys) {\n const val = parseFloat(\n pivotData\n .getAggregator(\n transpose ? datumKey : traceKey,\n transpose ? traceKey : datumKey\n )\n .value()\n );\n values.push(isFinite(val) ? val : null);\n labels.push(datumKey.join('-') || ' ');\n }\n const trace = {name: traceKey.join('-') || fullAggName};\n if (traceOptions.type === 'pie') {\n trace.values = values;\n trace.labels = labels.length > 1 ? labels : [fullAggName];\n } else {\n trace.x = transpose ? values : labels;\n trace.y = transpose ? labels : values;\n }\n return Object.assign(trace, traceOptions);\n });\n\n let titleText = fullAggName;\n const hAxisTitle = transpose\n ? this.props.rows.join('-')\n : this.props.cols.join('-');\n const groupByTitle = transpose\n ? this.props.cols.join('-')\n : this.props.rows.join('-');\n if (hAxisTitle !== '') {\n titleText += ` vs ${hAxisTitle}`;\n }\n if (groupByTitle !== '') {\n titleText += ` by ${groupByTitle}`;\n }\n\n const layout = {\n title: titleText,\n hovermode: 'closest',\n /* eslint-disable no-magic-numbers */\n width: window.innerWidth / 1.5,\n height: window.innerHeight / 1.4 - 50,\n /* eslint-enable no-magic-numbers */\n };\n\n if (traceOptions.type === 'pie') {\n const columns = Math.ceil(Math.sqrt(data.length));\n const rows = Math.ceil(data.length / columns);\n layout.grid = {columns, rows};\n data.forEach((d, i) => {\n d.domain = {\n row: Math.floor(i / columns),\n column: i - columns * Math.floor(i / columns),\n };\n if (data.length > 1) {\n d.title = d.name;\n }\n });\n if (data[0].labels.length === 1) {\n layout.showlegend = false;\n }\n } else {\n layout.xaxis = {\n title: transpose ? fullAggName : null,\n automargin: true,\n };\n layout.yaxis = {\n title: transpose ? null : fullAggName,\n automargin: true,\n };\n }\n\n return (\n \n );\n }\n }\n\n Renderer.defaultProps = Object.assign({}, PivotData.defaultProps, {\n plotlyOptions: {},\n plotlyConfig: {},\n });\n Renderer.propTypes = Object.assign({}, PivotData.propTypes, {\n plotlyOptions: PropTypes.object,\n plotlyConfig: PropTypes.object,\n onRendererUpdate: PropTypes.func,\n });\n\n return Renderer;\n}\n\nfunction makeScatterRenderer(PlotlyComponent) {\n class Renderer extends React.PureComponent {\n render() {\n const pivotData = new PivotData(this.props);\n const rowKeys = pivotData.getRowKeys();\n const colKeys = pivotData.getColKeys();\n if (rowKeys.length === 0) {\n rowKeys.push([]);\n }\n if (colKeys.length === 0) {\n colKeys.push([]);\n }\n\n const data = {x: [], y: [], text: [], type: 'scatter', mode: 'markers'};\n\n rowKeys.map(rowKey => {\n colKeys.map(colKey => {\n const v = pivotData.getAggregator(rowKey, colKey).value();\n if (v !== null) {\n data.x.push(colKey.join('-'));\n data.y.push(rowKey.join('-'));\n data.text.push(v);\n }\n });\n });\n\n const layout = {\n title: this.props.rows.join('-') + ' vs ' + this.props.cols.join('-'),\n hovermode: 'closest',\n /* eslint-disable no-magic-numbers */\n xaxis: {title: this.props.cols.join('-'), automargin: true},\n yaxis: {title: this.props.rows.join('-'), automargin: true},\n width: window.innerWidth / 1.5,\n height: window.innerHeight / 1.4 - 50,\n /* eslint-enable no-magic-numbers */\n };\n\n return (\n \n );\n }\n }\n\n Renderer.defaultProps = Object.assign({}, PivotData.defaultProps, {\n plotlyOptions: {},\n plotlyConfig: {},\n });\n Renderer.propTypes = Object.assign({}, PivotData.propTypes, {\n plotlyOptions: PropTypes.object,\n plotlyConfig: PropTypes.object,\n onRendererUpdate: PropTypes.func,\n });\n\n return Renderer;\n}\n\nexport default function createPlotlyRenderers(PlotlyComponent) {\n return {\n 'Grouped Column Chart': makeRenderer(\n PlotlyComponent,\n {type: 'bar'},\n {barmode: 'group'}\n ),\n 'Stacked Column Chart': makeRenderer(\n PlotlyComponent,\n {type: 'bar'},\n {barmode: 'relative'}\n ),\n 'Grouped Bar Chart': makeRenderer(\n PlotlyComponent,\n {type: 'bar', orientation: 'h'},\n {barmode: 'group'},\n true\n ),\n 'Stacked Bar Chart': makeRenderer(\n PlotlyComponent,\n {type: 'bar', orientation: 'h'},\n {barmode: 'relative'},\n true\n ),\n 'Line Chart': makeRenderer(PlotlyComponent),\n 'Dot Chart': makeRenderer(PlotlyComponent, {mode: 'markers'}, {}, true),\n 'Area Chart': makeRenderer(PlotlyComponent, {stackgroup: 1}),\n 'Scatter Chart': makeScatterRenderer(PlotlyComponent),\n 'Multiple Pie Chart': makeRenderer(\n PlotlyComponent,\n {type: 'pie', scalegroup: 1, hoverinfo: 'label+value', textinfo: 'none'},\n {},\n true\n ),\n };\n}\n"]}
\ No newline at end of file
diff --git a/README.md b/README.md
index 78d5580..4dbf3b5 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,263 @@
# v-react-pivottable
-Customización de libreria de react-pivottable
\ No newline at end of file
+`v-react-pivottable` is a custom version of `react-pivottable` is a React-based pivot table library with drag'n'drop
+functionality. It is a React port of the jQuery-based
+[PivotTable.js](https://pivottable.js.org/) by the same author.
+
+`react-pivottable` is part of Plotly's [React Component Suite](https://plot.ly/products/react/) for building data visualization Web apps and products.
+
+## What does it do & where is the demo?
+
+`react-pivottable`'s function is to enable data exploration and analysis by
+summarizing a data set into table or [Plotly.js](https://plot.ly/javascript/)
+chart with a true 2-d drag'n'drop UI, very similar to the one found in older
+versions of Microsoft Excel.
+
+A [live demo can be found here](https://react-pivottable.js.org/).
+
+
+
+## How can I use it in my project?
+
+### Drag'n'drop UI with Table output only
+
+Installation is via NPM and has a peer dependency on React:
+
+```
+npm install --save react-pivottable react react-dom
+```
+
+Basic usage is as follows. Note that `PivotTableUI` is a "dumb component" that
+maintains essentially no state of its own.
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PivotTableUI from 'react-pivottable/PivotTableUI';
+import 'react-pivottable/pivottable.css';
+
+// see documentation for supported input formats
+const data = [['attribute', 'attribute2'], ['value1', 'value2']];
+
+class App extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = props;
+ }
+
+ render() {
+ return (
+ this.setState(s)}
+ {...this.state}
+ />
+ );
+ }
+}
+
+ReactDOM.render(, document.body);
+```
+
+### Drag'n'drop UI with Plotly charts as well as Table output
+
+The Plotly `react-plotly.js` component can be passed in via dependency
+injection. It has a peer dependency on `plotly.js`.
+
+**Important:** If you build your project using webpack, you'll have to follow
+[these instructions](https://github.com/plotly/plotly.js#building-plotlyjs-with-webpack)
+in order to successfully bundle `plotly.js`. See below for how to avoid having
+to bundle `plotly.js`.
+
+```
+npm install --save react-pivottable react-plotly.js plotly.js react react-dom
+```
+
+To add the Plotly renderers to your app, you can use the following pattern:
+
+```js
+import React from 'react';
+import PivotTableUI from 'react-pivottable/PivotTableUI';
+import 'react-pivottable/pivottable.css';
+import TableRenderers from 'react-pivottable/TableRenderers';
+import Plot from 'react-plotly.js';
+import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';
+
+// create Plotly renderers via dependency injection
+const PlotlyRenderers = createPlotlyRenderers(Plot);
+
+// see documentation for supported input formats
+const data = [['attribute', 'attribute2'], ['value1', 'value2']];
+
+class App extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = props;
+ }
+
+ render() {
+ return (
+ this.setState(s)}
+ renderers={Object.assign({}, TableRenderers, PlotlyRenderers)}
+ {...this.state}
+ />
+ );
+ }
+}
+
+ReactDOM.render(, document.body);
+```
+
+#### With external `plotly.js`
+
+If you would rather not install and bundle `plotly.js` but rather get it into
+your app via something like `
+
+
+
+