@hrforte/react-pivottable 2.2.0 → 2.2.1

package/dist/__tests__/TableRenderers-showNumericalOrder-test.js

@@ -0,0 +1,178 @@
+'use strict';
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _client = require('react-dom/client');
+
+var _PivotTable = require('../PivotTable');
+
+var _PivotTable2 = _interopRequireDefault(_PivotTable);
+
+var _PivotTableUI = require('../PivotTableUI');
+
+var _PivotTableUI2 = _interopRequireDefault(_PivotTableUI);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-magic-numbers */
+
+// React 19 needs to be told that this environment supports `act`.
+global.IS_REACT_ACT_ENVIRONMENT = true;
+
+// `showNumericalOrder` adds a "No." column in front of the row attributes so
+// every data row is prefixed with its 1-based index.
+var records = [{ name: 'Nick', gender: 'male', colour: 'blue', trials: 103 }, { name: 'Jane', gender: 'female', colour: 'red', trials: 95 }, { name: 'John', gender: 'male', colour: 'blue', trials: 112 }, { name: 'Carol', gender: 'female', colour: 'yellow', trials: 102 }];
+
+var baseProps = {
+  data: records,
+  rows: ['name'],
+  cols: [],
+  aggregatorName: 'Count',
+  vals: [],
+  rendererName: 'Table'
+};
+
+var mount = function mount(element) {
+  var node = document.createElement('div');
+  document.body.appendChild(node);
+  var root = (0, _client.createRoot)(node);
+  (0, _react.act)(function () {
+    root.render(element);
+  });
+  return { node: node, root: root };
+};
+
+var unmount = function unmount(_ref) {
+  var node = _ref.node,
+      root = _ref.root;
+
+  (0, _react.act)(function () {
+    root.unmount();
+  });
+  node.remove();
+};
+
+// Both helpers are scoped to `.pvtTable`: PivotTableUI wraps the pivot table
+// in its own `.pvtUi` layout table, so an unscoped `tbody ...` selector would
+// also match header cells through that outer table.
+var numberTexts = function numberTexts(node, selector) {
+  return Array.from(node.querySelectorAll('.pvtTable ' + selector)).map(function (cell) {
+    return cell.textContent.trim();
+  });
+};
+
+var numberHeaders = function numberHeaders(node) {
+  return numberTexts(node, 'thead .pvtRowNumber');
+};
+var numberCells = function numberCells(node) {
+  return numberTexts(node, 'tbody .pvtRowNumber');
+};
+
+describe('Table renderer showNumericalOrder', function () {
+  var mounted = void 0;
+
+  afterEach(function () {
+    if (mounted) {
+      unmount(mounted);
+      mounted = null;
+    }
+  });
+
+  it('renders no "No." column by default', function () {
+    mounted = mount(_react2.default.createElement(_PivotTable2.default, baseProps));
+    expect(mounted.node.querySelector('.pvtRowNumber')).toBeNull();
+    expect(mounted.node.querySelector('.pvtTable').textContent).not.toContain('No.');
+  });
+
+  it('renders no "No." column when showNumericalOrder is false', function () {
+    mounted = mount(_react2.default.createElement(_PivotTable2.default, Object.assign({}, baseProps, { showNumericalOrder: false })));
+    expect(mounted.node.querySelector('.pvtRowNumber')).toBeNull();
+  });
+
+  it('numbers every data row from 1 with a "No." header', function () {
+    mounted = mount(_react2.default.createElement(_PivotTable2.default, Object.assign({}, baseProps, { showNumericalOrder: true })));
+
+    var headers = numberHeaders(mounted.node);
+    expect(headers).toEqual(['No.']);
+
+    var cells = numberCells(mounted.node);
+    expect(cells).toEqual(['1', '2', '3', '4']);
+  });
+
+  it('keeps the "No." column in front of the row attribute column', function () {
+    mounted = mount(_react2.default.createElement(_PivotTable2.default, Object.assign({}, baseProps, { showNumericalOrder: true })));
+
+    var headerCells = Array.from(mounted.node.querySelectorAll('.pvtTable thead tr:last-child th'));
+    expect(headerCells[0].classList.contains('pvtRowNumber')).toBe(true);
+    expect(headerCells[1].textContent).toContain('name');
+
+    var firstBodyRow = mounted.node.querySelector('.pvtTable tbody tr');
+    var bodyCells = Array.from(firstBodyRow.querySelectorAll('th,td'));
+    expect(bodyCells[0].classList.contains('pvtRowNumber')).toBe(true);
+    expect(bodyCells[1].classList.contains('pvtRowLabel')).toBe(true);
+  });
+
+  it('extends the totals label over the "No." column', function () {
+    mounted = mount(_react2.default.createElement(_PivotTable2.default, Object.assign({}, baseProps, { showNumericalOrder: true })));
+
+    var totalLabel = mounted.node.querySelector('.pvtTable tbody .pvtTotalLabel');
+    expect(totalLabel.getAttribute('colspan')).toBe('2');
+  });
+
+  it('spans the "No." header across the column-attribute header rows', function () {
+    mounted = mount(_react2.default.createElement(_PivotTable2.default, Object.assign({}, baseProps, {
+      cols: ['gender'],
+      showNumericalOrder: true
+    })));
+
+    var header = mounted.node.querySelector('.pvtTable thead .pvtRowNumber');
+    expect(header.textContent.trim()).toBe('No.');
+    expect(header.getAttribute('rowspan')).toBe('2');
+
+    expect(numberCells(mounted.node)).toEqual(['1', '2', '3', '4']);
+
+    // Totals now covers "No." + the row attribute + the column axis column.
+    var totalLabel = mounted.node.querySelector('.pvtTable tbody .pvtTotalLabel');
+    expect(totalLabel.getAttribute('colspan')).toBe('3');
+  });
+
+  it('spans the "No." header across row group header rows', function () {
+    mounted = mount(_react2.default.createElement(_PivotTable2.default, Object.assign({}, baseProps, {
+      rows: ['name', 'gender'],
+      rowGroupConfig: [{ label: 'GRP', match: ['name'] }],
+      showNumericalOrder: true
+    })));
+
+    var header = mounted.node.querySelector('.pvtTable thead .pvtRowNumber');
+    expect(header.getAttribute('rowspan')).toBe('2');
+    expect(numberCells(mounted.node)).toEqual(['1', '2', '3', '4']);
+  });
+
+  it('passes showNumericalOrder through PivotTableUI', function () {
+    // PivotTableUI computes asynchronously (worker / deferred main thread
+    // computation, WORKER_DEBOUNCE_MS = 100ms), so the numbered rows only show
+    // up after those timers ran.
+    var wait = function wait(ms) {
+      return new Promise(function (resolve) {
+        return setTimeout(resolve, ms);
+      });
+    };
+    var actAsync = function actAsync(callback) {
+      return new Promise(function (resolve, reject) {
+        return (0, _react.act)(callback).then(resolve, reject);
+      });
+    };
+
+    mounted = mount(_react2.default.createElement(_PivotTableUI2.default, Object.assign({}, baseProps, { showNumericalOrder: true })));
+
+    return actAsync(function () {
+      return wait(300);
+    }).then(function () {
+      expect(mounted.node.querySelector('.pvtTable thead .pvtRowNumber').textContent).toBe('No.');
+      expect(numberCells(mounted.node)).toEqual(['1', '2', '3', '4']);
+    });
+  });
+});
+//# sourceMappingURL=TableRenderers-showNumericalOrder-test.js.map

package/dist/__tests__/TableRenderers-showNumericalOrder-test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/__tests__/TableRenderers-showNumericalOrder-test.js"],"names":["global","IS_REACT_ACT_ENVIRONMENT","records","name","gender","colour","trials","baseProps","data","rows","cols","aggregatorName","vals","rendererName","mount","node","document","createElement","body","appendChild","root","render","element","unmount","remove","numberTexts","selector","Array","from","querySelectorAll","map","cell","textContent","trim","numberHeaders","numberCells","describe","mounted","afterEach","it","React","PivotTable","expect","querySelector","toBeNull","not","toContain","Object","assign","showNumericalOrder","headers","toEqual","cells","headerCells","classList","contains","toBe","firstBodyRow","bodyCells","totalLabel","getAttribute","header","rowGroupConfig","label","match","wait","Promise","setTimeout","resolve","ms","actAsync","reject","callback","then","PivotTableUI"],"mappings":"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","file":"TableRenderers-showNumericalOrder-test.js","sourcesContent":["import React, {act} from 'react';\nimport {createRoot} from 'react-dom/client';\nimport PivotTable from '../PivotTable';\nimport PivotTableUI from '../PivotTableUI';\n\n/* eslint-disable no-magic-numbers */\n\n// React 19 needs to be told that this environment supports `act`.\nglobal.IS_REACT_ACT_ENVIRONMENT = true;\n\n// `showNumericalOrder` adds a \"No.\" column in front of the row attributes so\n// every data row is prefixed with its 1-based index.\nconst records = [\n  {name: 'Nick', gender: 'male', colour: 'blue', trials: 103},\n  {name: 'Jane', gender: 'female', colour: 'red', trials: 95},\n  {name: 'John', gender: 'male', colour: 'blue', trials: 112},\n  {name: 'Carol', gender: 'female', colour: 'yellow', trials: 102},\n];\n\nconst baseProps = {\n  data: records,\n  rows: ['name'],\n  cols: [],\n  aggregatorName: 'Count',\n  vals: [],\n  rendererName: 'Table',\n};\n\nconst mount = element => {\n  const node = document.createElement('div');\n  document.body.appendChild(node);\n  const root = createRoot(node);\n  act(() => {\n    root.render(element);\n  });\n  return {node, root};\n};\n\nconst unmount = ({node, root}) => {\n  act(() => {\n    root.unmount();\n  });\n  node.remove();\n};\n\n// Both helpers are scoped to `.pvtTable`: PivotTableUI wraps the pivot table\n// in its own `.pvtUi` layout table, so an unscoped `tbody ...` selector would\n// also match header cells through that outer table.\nconst numberTexts = (node, selector) =>\n  Array.from(node.querySelectorAll(`.pvtTable ${selector}`)).map(cell =>\n    cell.textContent.trim()\n  );\n\nconst numberHeaders = node => numberTexts(node, 'thead .pvtRowNumber');\nconst numberCells = node => numberTexts(node, 'tbody .pvtRowNumber');\n\ndescribe('Table renderer showNumericalOrder', function() {\n  let mounted;\n\n  afterEach(function() {\n    if (mounted) {\n      unmount(mounted);\n      mounted = null;\n    }\n  });\n\n  it('renders no \"No.\" column by default', function() {\n    mounted = mount(React.createElement(PivotTable, baseProps));\n    expect(mounted.node.querySelector('.pvtRowNumber')).toBeNull();\n    expect(mounted.node.querySelector('.pvtTable').textContent).not.toContain(\n      'No.'\n    );\n  });\n\n  it('renders no \"No.\" column when showNumericalOrder is false', function() {\n    mounted = mount(\n      React.createElement(\n        PivotTable,\n        Object.assign({}, baseProps, {showNumericalOrder: false})\n      )\n    );\n    expect(mounted.node.querySelector('.pvtRowNumber')).toBeNull();\n  });\n\n  it('numbers every data row from 1 with a \"No.\" header', function() {\n    mounted = mount(\n      React.createElement(\n        PivotTable,\n        Object.assign({}, baseProps, {showNumericalOrder: true})\n      )\n    );\n\n    const headers = numberHeaders(mounted.node);\n    expect(headers).toEqual(['No.']);\n\n    const cells = numberCells(mounted.node);\n    expect(cells).toEqual(['1', '2', '3', '4']);\n  });\n\n  it('keeps the \"No.\" column in front of the row attribute column', function() {\n    mounted = mount(\n      React.createElement(\n        PivotTable,\n        Object.assign({}, baseProps, {showNumericalOrder: true})\n      )\n    );\n\n    const headerCells = Array.from(\n      mounted.node.querySelectorAll('.pvtTable thead tr:last-child th')\n    );\n    expect(headerCells[0].classList.contains('pvtRowNumber')).toBe(true);\n    expect(headerCells[1].textContent).toContain('name');\n\n    const firstBodyRow = mounted.node.querySelector('.pvtTable tbody tr');\n    const bodyCells = Array.from(firstBodyRow.querySelectorAll('th,td'));\n    expect(bodyCells[0].classList.contains('pvtRowNumber')).toBe(true);\n    expect(bodyCells[1].classList.contains('pvtRowLabel')).toBe(true);\n  });\n\n  it('extends the totals label over the \"No.\" column', function() {\n    mounted = mount(\n      React.createElement(\n        PivotTable,\n        Object.assign({}, baseProps, {showNumericalOrder: true})\n      )\n    );\n\n    const totalLabel = mounted.node.querySelector(\n      '.pvtTable tbody .pvtTotalLabel'\n    );\n    expect(totalLabel.getAttribute('colspan')).toBe('2');\n  });\n\n  it('spans the \"No.\" header across the column-attribute header rows', function() {\n    mounted = mount(\n      React.createElement(\n        PivotTable,\n        Object.assign({}, baseProps, {\n          cols: ['gender'],\n          showNumericalOrder: true,\n        })\n      )\n    );\n\n    const header = mounted.node.querySelector('.pvtTable thead .pvtRowNumber');\n    expect(header.textContent.trim()).toBe('No.');\n    expect(header.getAttribute('rowspan')).toBe('2');\n\n    expect(numberCells(mounted.node)).toEqual(['1', '2', '3', '4']);\n\n    // Totals now covers \"No.\" + the row attribute + the column axis column.\n    const totalLabel = mounted.node.querySelector(\n      '.pvtTable tbody .pvtTotalLabel'\n    );\n    expect(totalLabel.getAttribute('colspan')).toBe('3');\n  });\n\n  it('spans the \"No.\" header across row group header rows', function() {\n    mounted = mount(\n      React.createElement(\n        PivotTable,\n        Object.assign({}, baseProps, {\n          rows: ['name', 'gender'],\n          rowGroupConfig: [{label: 'GRP', match: ['name']}],\n          showNumericalOrder: true,\n        })\n      )\n    );\n\n    const header = mounted.node.querySelector('.pvtTable thead .pvtRowNumber');\n    expect(header.getAttribute('rowspan')).toBe('2');\n    expect(numberCells(mounted.node)).toEqual(['1', '2', '3', '4']);\n  });\n\n  it('passes showNumericalOrder through PivotTableUI', function() {\n    // PivotTableUI computes asynchronously (worker / deferred main thread\n    // computation, WORKER_DEBOUNCE_MS = 100ms), so the numbered rows only show\n    // up after those timers ran.\n    const wait = ms => new Promise(resolve => setTimeout(resolve, ms));\n    const actAsync = callback =>\n      new Promise((resolve, reject) => act(callback).then(resolve, reject));\n\n    mounted = mount(\n      React.createElement(\n        PivotTableUI,\n        Object.assign({}, baseProps, {showNumericalOrder: true})\n      )\n    );\n\n    return actAsync(() => wait(300)).then(() => {\n      expect(\n        mounted.node.querySelector('.pvtTable thead .pvtRowNumber').textContent\n      ).toBe('No.');\n      expect(numberCells(mounted.node)).toEqual(['1', '2', '3', '4']);\n    });\n  });\n});\n"]}

package/dist/pivottable.css

@@ -34,6 +34,9 @@ table.pvtTable tbody tr th {
 table.pvtTable .pvtColLabel {
     text-align: center;
 }
+table.pvtTable .pvtRowNumber {
+    text-align: center;
+}
 table.pvtTable .pvtTotalLabel {
     text-align: right;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrforte/react-pivottable",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "publishConfig": {
     "access": "public"
   },