diff --git a/package.json b/package.json index f4adaf6..e90178a 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/plotly/react-pivottable.git" + "url": "git+https://github.com/cdruck/react-pivottable.git" }, "keywords": [ "react", @@ -41,9 +41,9 @@ "author": "Nicolas Kruchten ", "license": "MIT", "bugs": { - "url": "https://github.com/plotly/react-pivottable/issues" + "url": "https://github.com/cdruck/react-pivottable/issues" }, - "homepage": "https://github.com/plotly/react-pivottable#readme", + "homepage": "https://github.com/cdruck/react-pivottable#readme", "dependencies": { "immutability-helper": "^2.3.1", "prop-types": "^15.5.10", diff --git a/src/PivotTableUI.jsx b/src/PivotTableUI.jsx index 0de055f..8ae10ca 100644 --- a/src/PivotTableUI.jsx +++ b/src/PivotTableUI.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import update from 'immutability-helper'; -import {PivotData, sortAs, getSort} from './Utilities'; +import {PivotData, sortAs, getSort, aggregators} from './Utilities'; import PivotTable from './PivotTable'; import Sortable from 'react-sortablejs'; import Draggable from 'react-draggable'; @@ -12,7 +12,7 @@ import Draggable from 'react-draggable'; export class DraggableAttribute extends React.Component { constructor(props) { super(props); - this.state = {open: false, filterText: ''}; + this.state = { open: false, filterText: '' }; } toggleValue(value) { @@ -230,6 +230,17 @@ export class Dropdown extends React.PureComponent { class PivotTableUI extends React.PureComponent { constructor(props) { super(props); + + // if aggregators are passed as strings, match them with those defined in ./Utilities/aggregators + var aggs = {}; + if (!!props.aggregators) { + for (agg in props.aggregators) { + aggs[agg] = aggregators[agg]; + } + props.aggregators = aggs; + } + console.log(props); + this.state = { unusedOrder: [], zIndices: {}, @@ -576,6 +587,7 @@ PivotTableUI.propTypes = Object.assign({}, PivotTable.propTypes, { hiddenFromDragDrop: PropTypes.arrayOf(PropTypes.string), unusedOrientationCutoff: PropTypes.number, menuLimit: PropTypes.number, + aggregators: PropTypes.arrayOf(PropTypes.string), }); PivotTableUI.defaultProps = Object.assign({}, PivotTable.defaultProps, { @@ -584,6 +596,7 @@ PivotTableUI.defaultProps = Object.assign({}, PivotTable.defaultProps, { hiddenFromDragDrop: [], unusedOrientationCutoff: 85, menuLimit: 500, + aggregators: aggregators, }); export default PivotTableUI; diff --git a/src/PlotlyRenderers.jsx b/src/PlotlyRenderers.jsx index 4fb4e7f..b93f4b2 100644 --- a/src/PlotlyRenderers.jsx +++ b/src/PlotlyRenderers.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {PivotData} from './Utilities'; +import { PivotData } from './Utilities'; /* eslint-disable react/prop-types */ // eslint can't see inherited propTypes! @@ -47,7 +47,7 @@ function makeRenderer( values.push(isFinite(val) ? val : null); labels.push(datumKey.join('-') || ' '); } - const trace = {name: traceKey.join('-') || fullAggName}; + const trace = { name: traceKey.join('-') || fullAggName }; if (traceOptions.type === 'pie') { trace.values = values; trace.labels = labels.length > 1 ? labels : [fullAggName]; @@ -84,7 +84,7 @@ function makeRenderer( if (traceOptions.type === 'pie') { const columns = Math.ceil(Math.sqrt(data.length)); const rows = Math.ceil(data.length / columns); - layout.grid = {columns, rows}; + layout.grid = { columns, rows }; data.forEach((d, i) => { d.domain = { row: Math.floor(i / columns), @@ -149,7 +149,7 @@ function makeScatterRenderer(PlotlyComponent) { colKeys.push([]); } - const data = {x: [], y: [], text: [], type: 'scatter', mode: 'markers'}; + const data = { x: [], y: [], text: [], type: 'scatter', mode: 'markers' }; rowKeys.map(rowKey => { colKeys.map(colKey => { @@ -166,8 +166,8 @@ function makeScatterRenderer(PlotlyComponent) { 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}, + 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 */ @@ -201,33 +201,33 @@ export default function createPlotlyRenderers(PlotlyComponent) { return { 'Grouped Column Chart': makeRenderer( PlotlyComponent, - {type: 'bar'}, - {barmode: 'group'} + { type: 'bar' }, + { barmode: 'group' } ), 'Stacked Column Chart': makeRenderer( PlotlyComponent, - {type: 'bar'}, - {barmode: 'relative'} + { type: 'bar' }, + { barmode: 'relative' } ), 'Grouped Bar Chart': makeRenderer( PlotlyComponent, - {type: 'bar', orientation: 'h'}, - {barmode: 'group'}, + { type: 'bar', orientation: 'h' }, + { barmode: 'group' }, true ), 'Stacked Bar Chart': makeRenderer( PlotlyComponent, - {type: 'bar', orientation: 'h'}, - {barmode: 'relative'}, + { type: 'bar', orientation: 'h' }, + { barmode: 'relative' }, true ), 'Line Chart': makeRenderer(PlotlyComponent), - 'Dot Chart': makeRenderer(PlotlyComponent, {mode: 'markers'}, {}, true), - 'Area Chart': makeRenderer(PlotlyComponent, {stackgroup: 1}), + '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'}, + { type: 'pie', scalegroup: 1, hoverinfo: 'label+value', textinfo: 'none' }, {}, true ), diff --git a/src/TableRenderers.jsx b/src/TableRenderers.jsx index 44a2249..e376b95 100644 --- a/src/TableRenderers.jsx +++ b/src/TableRenderers.jsx @@ -1,9 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {PivotData} from './Utilities'; +import { PivotData } from './Utilities'; // helper function for setting row/col-span in pivotTableRenderer -const spanSize = function(arr, i, j) { +const spanSize = function (arr, i, j) { let x; if (i !== 0) { let asc, end; @@ -48,7 +48,7 @@ function redColorScaleGenerator(values) { return x => { // eslint-disable-next-line no-magic-numbers const nonRed = 255 - Math.round((255 * (x - min)) / (max - min)); - return {backgroundColor: `rgb(255,${nonRed},${nonRed})`}; + return { backgroundColor: `rgb(255,${nonRed},${nonRed})` }; }; } @@ -62,9 +62,9 @@ function makeRenderer(opts = {}) { const colKeys = pivotData.getColKeys(); const grandTotalAggregator = pivotData.getAggregator([], []); - let valueCellColors = () => {}; - let rowTotalColors = () => {}; - let colTotalColors = () => {}; + let valueCellColors = () => { }; + let rowTotalColors = () => { }; + let colTotalColors = () => { }; if (opts.heatmapMode) { const colorScaleGenerator = this.props.tableColorScaleGenerator; const rowTotalValues = colKeys.map(x => @@ -109,40 +109,40 @@ function makeRenderer(opts = {}) { const getClickHandler = this.props.tableOptions && this.props.tableOptions.clickCallback ? (value, rowValues, colValues) => { - const filters = {}; - for (const i of Object.keys(colAttrs || {})) { - const attr = colAttrs[i]; - if (colValues[i] !== null) { - filters[attr] = colValues[i]; - } + const filters = {}; + for (const i of Object.keys(colAttrs || {})) { + const attr = colAttrs[i]; + if (colValues[i] !== null) { + filters[attr] = colValues[i]; } - for (const i of Object.keys(rowAttrs || {})) { - const attr = rowAttrs[i]; - if (rowValues[i] !== null) { - filters[attr] = rowValues[i]; - } + } + for (const i of Object.keys(rowAttrs || {})) { + const attr = rowAttrs[i]; + if (rowValues[i] !== null) { + filters[attr] = rowValues[i]; } - return e => - this.props.tableOptions.clickCallback( - e, - value, - filters, - pivotData - ); } + return e => + this.props.tableOptions.clickCallback( + e, + value, + filters, + pivotData + ); + } : null; return ( - {colAttrs.map(function(c, j) { + {colAttrs.map((c, j) => { return ( {j === 0 && rowAttrs.length !== 0 && ( - {colKeys.map(function(colKey, i) { + {colKeys.map(function (colKey, i) { const x = spanSize(colKeys, i, j); if (x === -1) { return null; @@ -163,7 +163,7 @@ function makeRenderer(opts = {}) { ); })} - {j === 0 && ( + {j === 0 && this.props.tableOptions.colTotals && ( ); })} - + } )} - {rowKeys.map(function(rowKey, i) { + {rowKeys.map((rowKey, i) => { const totalAggregator = pivotData.getAggregator(rowKey, []); return ( - {rowKey.map(function(txt, j) { + {rowKey.map((txt, j) => { const x = spanSize(rowKeys, i, j); if (x === -1) { return null; @@ -218,7 +218,7 @@ function makeRenderer(opts = {}) { ); })} - {colKeys.map(function(colKey, j) { + {colKeys.map((colKey, j) => { const aggregator = pivotData.getAggregator(rowKey, colKey); return ( + } ); })} - + {this.props.tableOptions.rowTotals && + - {colKeys.map(function(colKey, i) { + {colKeys.map(function (colKey, i) { const totalAggregator = pivotData.getAggregator([], colKey); return ( - + } + }
)} {c} - {rowAttrs.map(function(r, i) { + {rowAttrs.map(function (r, i) { return ( {r} + { {colAttrs.length === 0 ? 'Totals' : null} -
); })} - {totalAggregator.format(totalAggregator.value())} -
Totals - {grandTotalAggregator.format(grandTotalAggregator.value())} -
); @@ -335,7 +335,7 @@ class TSVExportRenderer extends React.PureComponent { return (