'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