From 1bfda3c2305c01a801d5c0ca2cd927e4625e02d8 Mon Sep 17 00:00:00 2001 From: SplitaxiDimi Date: Mon, 4 Dec 2023 16:00:59 +0100 Subject: [PATCH 1/3] Placed text N/A in row totals --- src/TableRenderers.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/TableRenderers.jsx b/src/TableRenderers.jsx index 44a2249..5cf034b 100644 --- a/src/TableRenderers.jsx +++ b/src/TableRenderers.jsx @@ -170,7 +170,7 @@ function makeRenderer(opts = {}) { colAttrs.length + (rowAttrs.length === 0 ? 0 : 1) } > - Totals + Tots )} @@ -272,7 +272,7 @@ function makeRenderer(opts = {}) { } style={rowTotalColors(totalAggregator.value())} > - {totalAggregator.format(totalAggregator.value())} + N/A ); })} From 31f3a4356347cd5824ddb8bef77ef22e0b88f21e Mon Sep 17 00:00:00 2001 From: SplitaxiDimi Date: Tue, 5 Dec 2023 18:21:31 +0100 Subject: [PATCH 2/3] Update TableRenderers.jsx Added two boolean props to control whether row or col totals should be rendered --- src/TableRenderers.jsx | 212 ++++++++++++++++++----------------------- 1 file changed, 93 insertions(+), 119 deletions(-) diff --git a/src/TableRenderers.jsx b/src/TableRenderers.jsx index 5cf034b..863cd0c 100644 --- a/src/TableRenderers.jsx +++ b/src/TableRenderers.jsx @@ -1,18 +1,14 @@ -import React from 'react'; import PropTypes from 'prop-types'; -import {PivotData} from './Utilities'; +import React from 'react'; +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; let noDraw = true; - for ( - x = 0, end = j, asc = end >= 0; - asc ? x <= end : x >= end; - asc ? x++ : x-- - ) { + for (x = 0, end = j, asc = end >= 0; asc ? x <= end : x >= end; asc ? x++ : x--) { if (arr[i - 1][x] !== arr[i][x]) { noDraw = false; } @@ -25,11 +21,7 @@ const spanSize = function(arr, i, j) { while (i + len < arr.length) { let asc1, end1; let stop = false; - for ( - x = 0, end1 = j, asc1 = end1 >= 0; - asc1 ? x <= end1 : x >= end1; - asc1 ? x++ : x-- - ) { + for (x = 0, end1 = j, asc1 = end1 >= 0; asc1 ? x <= end1 : x >= end1; asc1 ? x++ : x--) { if (arr[i][x] !== arr[i + len][x]) { stop = true; } @@ -45,10 +37,10 @@ const spanSize = function(arr, i, j) { function redColorScaleGenerator(values) { const min = Math.min.apply(Math, values); const max = Math.max.apply(Math, values); - return x => { + 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})` }; }; } @@ -61,45 +53,38 @@ function makeRenderer(opts = {}) { const rowKeys = pivotData.getRowKeys(); const colKeys = pivotData.getColKeys(); const grandTotalAggregator = pivotData.getAggregator([], []); + const hideRowTotals = this.props.hideRowTotals; + const hideColTotals = this.props.hideColTotals; let valueCellColors = () => {}; let rowTotalColors = () => {}; let colTotalColors = () => {}; + if (opts.heatmapMode) { const colorScaleGenerator = this.props.tableColorScaleGenerator; - const rowTotalValues = colKeys.map(x => - pivotData.getAggregator([], x).value() - ); + const rowTotalValues = colKeys.map((x) => pivotData.getAggregator([], x).value()); rowTotalColors = colorScaleGenerator(rowTotalValues); - const colTotalValues = rowKeys.map(x => - pivotData.getAggregator(x, []).value() - ); + const colTotalValues = rowKeys.map((x) => pivotData.getAggregator(x, []).value()); colTotalColors = colorScaleGenerator(colTotalValues); if (opts.heatmapMode === 'full') { const allValues = []; - rowKeys.map(r => - colKeys.map(c => - allValues.push(pivotData.getAggregator(r, c).value()) - ) + rowKeys.map((r) => + colKeys.map((c) => allValues.push(pivotData.getAggregator(r, c).value())) ); const colorScale = colorScaleGenerator(allValues); valueCellColors = (r, c, v) => colorScale(v); } else if (opts.heatmapMode === 'row') { const rowColorScales = {}; - rowKeys.map(r => { - const rowValues = colKeys.map(x => - pivotData.getAggregator(r, x).value() - ); + rowKeys.map((r) => { + const rowValues = colKeys.map((x) => pivotData.getAggregator(r, x).value()); rowColorScales[r] = colorScaleGenerator(rowValues); }); valueCellColors = (r, c, v) => rowColorScales[r](v); } else if (opts.heatmapMode === 'col') { const colColorScales = {}; - colKeys.map(c => { - const colValues = rowKeys.map(x => - pivotData.getAggregator(x, c).value() - ); + colKeys.map((c) => { + const colValues = rowKeys.map((x) => pivotData.getAggregator(x, c).value()); colColorScales[c] = colorScaleGenerator(colValues); }); valueCellColors = (r, c, v) => colColorScales[c](v); @@ -122,27 +107,21 @@ function makeRenderer(opts = {}) { 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(function (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; @@ -152,25 +131,19 @@ function makeRenderer(opts = {}) { className="pvtColLabel" key={`colKey${i}`} colSpan={x} - rowSpan={ - j === colAttrs.length - 1 && rowAttrs.length !== 0 - ? 2 - : 1 - } + rowSpan={j === colAttrs.length - 1 && rowAttrs.length !== 0 ? 2 : 1} > {colKey[j]} ); })} - {j === 0 && ( + {j === 0 && !hideRowTotals && ( )} @@ -179,26 +152,27 @@ function makeRenderer(opts = {}) { {rowAttrs.length !== 0 && ( - {rowAttrs.map(function(r, i) { + {rowAttrs.map(function (r, i) { return ( ); })} + )} - {rowKeys.map(function(rowKey, i) { + {rowKeys.map(function (rowKey, i) { const totalAggregator = pivotData.getAggregator(rowKey, []); return ( - {rowKey.map(function(txt, j) { + {rowKey.map(function (txt, j) { const x = spanSize(rowKeys, i, j); if (x === -1) { return null; @@ -208,84 +182,84 @@ function makeRenderer(opts = {}) { key={`rowKeyLabel${i}-${j}`} className="pvtRowLabel" rowSpan={x} - colSpan={ - j === rowAttrs.length - 1 && colAttrs.length !== 0 - ? 2 - : 1 - } + colSpan={j === rowAttrs.length - 1 && colAttrs.length !== 0 ? 2 : 1} > {txt} ); })} - {colKeys.map(function(colKey, j) { + {colKeys.map(function (colKey, j) { const aggregator = pivotData.getAggregator(rowKey, colKey); return ( ); })} - + + {!hideRowTotals && ( + + )} ); })} - + {!hideColTotals && ( + + )} - {colKeys.map(function(colKey, i) { + {colKeys.map(function (colKey, i) { const totalAggregator = pivotData.getAggregator([], colKey); - return ( - - ); - })} - + ); } - className="pvtGrandTotal" - > - {grandTotalAggregator.format(grandTotalAggregator.value())} - + })} + + {!hideRowTotals && !hideColTotals && ( + + )}
)} {c} - Tots + Totals
{r} - {colAttrs.length === 0 ? 'Totals' : null} + {colAttrs.length === 0 ? (!hideColTotals ? 'Totals' : null) : null}
{aggregator.format(aggregator.value())} - {totalAggregator.format(totalAggregator.value())} - + {totalAggregator.format(totalAggregator.value())} +
- Totals - + Totals + - N/A - ; + } else { + return ( + + {totalAggregator.format(totalAggregator.value())} + + {grandTotalAggregator.format(grandTotalAggregator.value())} +
@@ -314,16 +288,16 @@ class TSVExportRenderer extends React.PureComponent { colKeys.push([]); } - const headerRow = pivotData.props.rows.map(r => r); + const headerRow = pivotData.props.rows.map((r) => r); if (colKeys.length === 1 && colKeys[0].length === 0) { headerRow.push(this.props.aggregatorName); } else { - colKeys.map(c => headerRow.push(c.join('-'))); + colKeys.map((c) => headerRow.push(c.join('-'))); } - const result = rowKeys.map(r => { - const row = r.map(x => x); - colKeys.map(c => { + const result = rowKeys.map((r) => { + const row = r.map((x) => x); + colKeys.map((c) => { const v = pivotData.getAggregator(r, c).value(); row.push(v ? v : ''); }); @@ -334,8 +308,8 @@ class TSVExportRenderer extends React.PureComponent { return (