react-data-matrix 0.2.0 → 0.3.2

package/dist/types/index.d.ts

@@ -0,0 +1,109 @@
+export interface MatrixDetail {
+  id: number;
+  position: number;
+  matrix_type: string;
+  likelihood: string;
+  consequence: number;
+  header_title: string;
+  header_sub_title: string;
+  row_header_title: string;
+  row_header_sub_title: string;
+}
+
+export interface MatrixValue {
+  id: number;
+  matrix_id: number;
+  description: string;
+  score_value: number;
+  colour: string;
+  position: number;
+  likelihood_descriptor: string;
+  consequence_descriptor: number;
+  response: string;
+}
+
+export interface MatrixData {
+  id: number;
+  matrix_size: number;
+  matrix_name: string;
+  primary_header_title: string;
+  primary_row_header_title: string;
+  matrix_description: string;
+  matrix_details: MatrixDetail[];
+  matrix_values: MatrixValue[];
+}
+
+export interface ReactMatrixProps {
+  data: MatrixData;
+  matrixName: string;
+  matrixDescription: string;
+  hasTableBorder?: boolean;
+  hasInlineStyles?: boolean | undefined;
+  hasContainerStyles?: boolean | undefined;
+  reverseMatrixValues?: boolean;
+  matrixSizeSelected?: number;
+  rowPrimaryUpper?: boolean;
+  headerPrimaryUpper?: boolean;
+  tableContainerStyles?: React.CSSProperties;
+  tableStyles?: React.CSSProperties;
+  thRowStyles?: React.CSSProperties;
+  thTitleStyles?: React.CSSProperties;
+  thSubTitleStyles?: React.CSSProperties;
+  thPrimaryTitleStyles?: React.CSSProperties;
+  trRowStyles?: React.CSSProperties;
+  trTitleStyles?: React.CSSProperties;
+  trSubTitleStyles?: React.CSSProperties;
+  trPrimaryTitleStyles?: React.CSSProperties;
+  tdStyles?: React.CSSProperties;
+  customHeaderRowIdValue?: string;
+  customDynamicHeaderTitleIdValue?: string;
+  customDynamicSubHeaderTitleIdValue?: string;
+  customRowDynamicIdValue?: string;
+  customRowHeaderDynamicIdValue?: string;
+  customTableDataDynamicIdValue?: string;
+}
+
+export interface MatrixHeaderProps {
+  data: MatrixData;
+  hasInlineStyles?: boolean | undefined;
+  headerPrimaryUpper?: boolean;
+  thRowStyles?: React.CSSProperties;
+  thTitleStyles?: React.CSSProperties;
+  thSubTitleStyles?: React.CSSProperties;
+  thPrimaryTitleStyles?: React.CSSProperties;
+  customHeaderRowIdValue?: string;
+  customDynamicHeaderTitleIdValue?: string;
+  customDynamicSubHeaderTitleIdValue?: string;
+}
+
+export interface MatrixRowsProps {
+  data: MatrixData;
+  rowPrimaryUpper?: boolean;
+  hasInlineStyles?: boolean | undefined;
+  reverseMatrixValues?: boolean;
+  trRowStyles?: React.CSSProperties;
+  trTitleStyles?: React.CSSProperties;
+  trSubTitleStyles?: React.CSSProperties;
+  trPrimaryTitleStyles?: React.CSSProperties;
+  tdStyles?: React.CSSProperties;
+  customRowDynamicIdValue?: string;
+  customRowHeaderDynamicIdValue?: string;
+  customTableDataDynamicIdValue?: string;
+}
+
+export interface TableDataProps {
+  data: {
+    id: number;
+    colour: string;
+    position: number;
+    matrix_id: number;
+    score_value: number;
+    description: string;
+    response: string;
+    likelihood_descriptor: string;
+    consequence_descriptor: number;
+  };
+  tdStyles?: React.CSSProperties;
+  hasInlineStyles?: boolean;
+  customTableDataDynamicIdValue?: string;
+}

package/dist/utils/data.ts

@@ -0,0 +1,346 @@
+import { MatrixData } from "../types";
+
+export const data: MatrixData = {
+  id: 1,
+  matrix_size: 5,
+  matrix_name: "React Matrix",
+  primary_header_title: "Consequence",
+  primary_row_header_title: "Likelihood",
+  matrix_description: "Risk Matrix Template",
+
+  matrix_details: [
+    {
+      id: 1,
+      likelihood: "E",
+      consequence: 1,
+      position: 5,
+      matrix_type: "Risk",
+      header_title: "Minor",
+      header_sub_title: "Header sub-title/description.",
+      row_header_title: "Rare",
+      row_header_sub_title: "Row Header sub-title/description.",
+    },
+    {
+      id: 2,
+      position: 5,
+      matrix_type: "Risk",
+      likelihood: "D",
+      consequence: 2,
+      header_title: "Moderate",
+      header_sub_title: "Header sub-title/description.",
+      row_header_title: "Unlikely",
+      row_header_sub_title: "Row Header sub-title/description.",
+    },
+    {
+      id: 3,
+      position: 5,
+      matrix_type: "Risk",
+      likelihood: "C",
+      consequence: 3,
+      header_title: "Significant",
+      header_sub_title: "Header sub-title/description.",
+      row_header_title: "Possible",
+      row_header_sub_title: "Row Header sub-title/description.",
+    },
+    {
+      id: 4,
+      position: 5,
+      matrix_type: "Risk",
+      likelihood: "B",
+      consequence: 4,
+      header_title: "Critical",
+      header_sub_title: "Header sub-title/description.",
+      row_header_title: "Likely",
+      row_header_sub_title: "Row Header sub-title/description.",
+    },
+    {
+      id: 5,
+      position: 5,
+      matrix_type: "Risk",
+      likelihood: "A",
+      consequence: 5,
+      header_title: "Catastrophic",
+      header_sub_title: "Header sub-title/description.",
+      row_header_title: "Almost Certain",
+      row_header_sub_title: "Row Header sub-title/description.",
+    },
+  ],
+
+  matrix_values: [
+    {
+      id: 26,
+      matrix_id: 1,
+      description: "low",
+      score_value: 1,
+      colour: "green",
+      position: 1,
+      likelihood_descriptor: "E",
+      consequence_descriptor: 1,
+      response: "Business as usual",
+    },
+    {
+      id: 27,
+      matrix_id: 1,
+      description: "low",
+      score_value: 2,
+      colour: "green",
+      position: 6,
+      likelihood_descriptor: "D",
+      consequence_descriptor: 1,
+      response: "Business as usual",
+    },
+    {
+      id: 28,
+      matrix_id: 1,
+      description: "low",
+      score_value: 3,
+      colour: "green",
+      position: 2,
+      likelihood_descriptor: "E",
+      consequence_descriptor: 2,
+      response: "Business as usual",
+    },
+    {
+      id: 29,
+      matrix_id: 1,
+      description: "low",
+      score_value: 4,
+      colour: "green",
+      position: 11,
+      likelihood_descriptor: "C",
+      consequence_descriptor: 1,
+      response: "Business as usual",
+    },
+    {
+      id: 30,
+      matrix_id: 1,
+      description: "low",
+      score_value: 5,
+      colour: "green",
+      position: 7,
+      likelihood_descriptor: "D",
+      consequence_descriptor: 2,
+      response: "Business as usual",
+    },
+    {
+      id: 31,
+      matrix_id: 1,
+      description: "low",
+      score_value: 6,
+      colour: "green",
+      position: 3,
+      likelihood_descriptor: "E",
+      consequence_descriptor: 3,
+      response: "Business as usual",
+    },
+    {
+      id: 32,
+      matrix_id: 1,
+      description: "medium",
+      score_value: 7,
+      colour: "yellow",
+      position: 16,
+      likelihood_descriptor: "B",
+      consequence_descriptor: 1,
+      response: "Requires routine to periodic monitoring",
+    },
+    {
+      id: 33,
+      matrix_id: 1,
+      description: "medium",
+      score_value: 8,
+      colour: "yellow",
+      position: 12,
+      likelihood_descriptor: "C",
+      consequence_descriptor: 2,
+      response: "Requires routine to periodic monitoring",
+    },
+    {
+      id: 34,
+      matrix_id: 1,
+      description: "medium",
+      score_value: 9,
+      colour: "yellow",
+      position: 8,
+      likelihood_descriptor: "D",
+      consequence_descriptor: 3,
+      response: "Requires routine to periodic monitoring",
+    },
+    {
+      id: 35,
+      matrix_id: 1,
+      description: "medium",
+      score_value: 10,
+      colour: "yellow",
+      position: 4,
+      likelihood_descriptor: "E",
+      consequence_descriptor: 4,
+      response: "Requires routine to periodic monitoring",
+    },
+    {
+      id: 36,
+      matrix_id: 1,
+      description: "medium",
+      score_value: 11,
+      colour: "yellow",
+      position: 21,
+      likelihood_descriptor: "A",
+      consequence_descriptor: 1,
+      response: "Requires routine to periodic monitoring",
+    },
+    {
+      id: 37,
+      matrix_id: 1,
+      description: "high",
+      score_value: 12,
+      colour: "orange",
+      position: 17,
+      likelihood_descriptor: "B",
+      consequence_descriptor: 2,
+      response: "Risk requires targeted management plan",
+    },
+    {
+      id: 38,
+      matrix_id: 1,
+      description: "high",
+      score_value: 13,
+      colour: "orange",
+      position: 13,
+      likelihood_descriptor: "C",
+      consequence_descriptor: 3,
+      response: "Risk requires targeted management plan",
+    },
+    {
+      id: 39,
+      matrix_id: 1,
+      description: "high",
+      score_value: 14,
+      colour: "orange",
+      position: 9,
+      likelihood_descriptor: "D",
+      consequence_descriptor: 4,
+      response: "Risk requires targeted management plan",
+    },
+    {
+      id: 40,
+      matrix_id: 1,
+      description: "high",
+      score_value: 15,
+      colour: "orange",
+      position: 5,
+      likelihood_descriptor: "E",
+      consequence_descriptor: 5,
+      response: "Risk requires targeted management plan",
+    },
+    {
+      id: 41,
+      matrix_id: 1,
+      description: "high",
+      score_value: 16,
+      colour: "orange",
+      position: 22,
+      likelihood_descriptor: "A",
+      consequence_descriptor: 2,
+      response: "Risk requires targeted management plan",
+    },
+    {
+      id: 42,
+      matrix_id: 1,
+      description: "high",
+      score_value: 17,
+      colour: "orange",
+      position: 18,
+      likelihood_descriptor: "B",
+      consequence_descriptor: 3,
+      response: "Risk requires targeted management plan",
+    },
+    {
+      id: 43,
+      matrix_id: 1,
+      description: "high",
+      score_value: 18,
+      colour: "orange",
+      position: 14,
+      likelihood_descriptor: "C",
+      consequence_descriptor: 4,
+      response: "Risk requires targeted management plan",
+    },
+    {
+      id: 44,
+      matrix_id: 1,
+      description: "high",
+      score_value: 19,
+      colour: "orange",
+      position: 10,
+      likelihood_descriptor: "D",
+      consequence_descriptor: 5,
+      response: "Risk requires targeted management plan",
+    },
+    {
+      id: 45,
+      matrix_id: 1,
+      description: "extreme",
+      score_value: 20,
+      colour: "red",
+      position: 23,
+      likelihood_descriptor: "A",
+      consequence_descriptor: 3,
+      response: "Activity should not commence",
+    },
+    {
+      id: 46,
+      matrix_id: 1,
+      description: "extreme",
+      score_value: 21,
+      colour: "red",
+      position: 19,
+      likelihood_descriptor: "B",
+      consequence_descriptor: 4,
+      response: "Activity should not commence",
+    },
+    {
+      id: 47,
+      matrix_id: 1,
+      description: "extreme",
+      score_value: 22,
+      colour: "red",
+      position: 15,
+      likelihood_descriptor: "C",
+      consequence_descriptor: 5,
+      response: "Activity should not commence",
+    },
+    {
+      id: 48,
+      matrix_id: 1,
+      description: "extreme",
+      score_value: 23,
+      colour: "red",
+      position: 24,
+      likelihood_descriptor: "A",
+      consequence_descriptor: 4,
+      response: "Activity should not commence",
+    },
+    {
+      id: 49,
+      matrix_id: 1,
+      description: "extreme",
+      score_value: 24,
+      colour: "red",
+      position: 20,
+      likelihood_descriptor: "B",
+      consequence_descriptor: 5,
+      response: "Activity should not commence",
+    },
+    {
+      id: 50,
+      matrix_id: 1,
+      description: "extreme",
+      score_value: 25,
+      colour: "red",
+      position: 25,
+      likelihood_descriptor: "A",
+      consequence_descriptor: 5,
+      response: "Activity should not commence",
+    },
+  ],
+};

package/dist/utils/functions.ts

@@ -0,0 +1,33 @@
+export const groupObjectsByProp = <T extends Record<string, any>>(
+  array: T[],
+  prop: keyof T
+) => {
+  const map = new Map<T[keyof T], T[]>(
+    Array.from(array, (obj) => [obj[prop], []])
+  );
+
+  array.forEach((obj) => {
+    const key = obj[prop];
+    if (key !== undefined) {
+      const group = map.get(key);
+      if (group) {
+        group.push(obj);
+      }
+    }
+  });
+
+  return Array.from(map.values());
+};
+
+// capitalises first character of each word
+export const capitaliseFirstCharacter = (stringValue: string): string =>
+  stringValue.replace(/\b([a-z\s])/g, (string) => string.toUpperCase());
+
+// capitalizes entire word
+export const capitaliseString = (stringValue: string): string =>
+  stringValue.toUpperCase();
+
+export const callAll =
+  <T extends (...args: any[]) => void>(...fns: T[]) =>
+  (...args: Parameters<T>) =>
+    fns.forEach((fn) => fn && fn(...args));

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "react-data-matrix",
-  "version": "0.2.0",
+  "version": "0.3.2",
+  "types": "./lib/types/index.d.ts",
   "private": false,
   "license": "MIT",
   "homepage": "https://bronz3beard.github.io/react-matrix",
-  "author": "bronz3beard <exempli.gratia.webdesign@gmail.com> (https://www.heyrory.com/)",
+  "author": "bronz3beard <heyrory.com@gmail.com> (https://www.heyrory.com/)",
   "keywords": [
     "data",
     "risk",
@@ -16,6 +17,10 @@
     "data grid",
     "data matrix"
   ],
+  "engines": {
+    "npm": ">=8.12.0",
+    "node": ">=18.4.0"
+  },
   "main": "dist/index.js",
   "module": "dist/index.js",
   "files": [
@@ -27,7 +32,6 @@
     "url": "git+https://github.com/bronz3beard/react-matrix.git"
   },
   "description": "View structured data in a matrix table (data grid), showing a value located at an X and Y coordinate.",
-  "dependencies": {},
   "scripts": {
     "start": "react-scripts start",
     "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files",
@@ -58,6 +62,7 @@
   "devDependencies": {
     "@babel/cli": "^7.15.7",
     "@babel/core": "^7.15.8",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.15.8",
     "@fortawesome/fontawesome-svg-core": "latest",
     "@fortawesome/free-brands-svg-icons": "latest",
@@ -65,13 +70,16 @@
     "@testing-library/jest-dom": "latest",
     "@testing-library/react": "latest",
     "@testing-library/user-event": "latest",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "gh-pages": "latest",
     "prop-types": "latest",
     "react": "latest",
     "react-data-matrix": "latest",
     "react-dom": "latest",
-    "react-scripts": "latest",
+    "react-scripts": "^5.0.1",
     "sass": "latest",
-    "web-vitals": "latest",
-    "gh-pages": "latest"
+    "typescript": "latest",
+    "web-vitals": "latest"
   }
 }

package/dist/components/matrixHeaders.js

@@ -1,78 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/web.dom-collections.iterator.js");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _getStyles = require("../helpers/getStyles");
-var _functions = require("../utils/functions");
-var _context = _interopRequireDefault(require("../context"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-// import "./styles/riskMatrix.scss";
-
-const MatrixHeaders = () => {
-  const {
-    data,
-    thRowStyles,
-    thTitleStyles,
-    hasInlineStyles,
-    thSubTitleStyles,
-    headerPrimaryUpper,
-    thPrimaryTitleStyles,
-    customHeaderRowIdValue,
-    customDynamicHeaderTitleIdValue,
-    customDynamicSubHeaderTitleIdValue
-  } = (0, _react.useContext)(_context.default);
-  const headerRowStyles = (0, _getStyles.getHeaderRowStyles)(hasInlineStyles, thRowStyles);
-  const headerTitleStyles = (0, _getStyles.getHeaderTitleStyles)(hasInlineStyles, thTitleStyles);
-  const headerSubTitleStyles = (0, _getStyles.getHeaderSubTitleStyles)(hasInlineStyles, thSubTitleStyles);
-  const headerPrimaryTitleStyles = (0, _getStyles.getHeaderPrimaryTitleStyles)(hasInlineStyles, thPrimaryTitleStyles);
-  const headerPrimaryTitle = headerPrimaryUpper ? (0, _functions.capitaliseString)(data.primary_header_title) : data.primary_header_title;
-  return /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", {
-    id: "react-matrix-blank-headers-primary-title-row"
-  }, /*#__PURE__*/_react.default.createElement("th", {
-    headers: "blank",
-    colSpan: "4"
-  }), /*#__PURE__*/_react.default.createElement("th", {
-    style: headerPrimaryTitleStyles,
-    id: "react-matrix-header-primary-title"
-  }, headerPrimaryTitle), /*#__PURE__*/_react.default.createElement("th", {
-    headers: "blank",
-    colSpan: "2"
-  })), /*#__PURE__*/_react.default.createElement("tr", {
-    style: headerRowStyles,
-    id: "react-matrix-dynamic-headers-row-".concat(customHeaderRowIdValue)
-  }, /*#__PURE__*/_react.default.createElement("th", {
-    headers: "blank",
-    colSpan: "2"
-  }), data.matrix_details.slice(0, data.matrix_size).map((column, index) => {
-    return /*#__PURE__*/_react.default.createElement("th", {
-      scope: "col",
-      style: headerTitleStyles,
-      id: "react-matrix-dynamic-column-header-title".concat(!customDynamicHeaderTitleIdValue ? "" : "-".concat(customDynamicHeaderTitleIdValue)),
-      key: "".concat(column.id, "-").concat(index)
-    }, column.header_title, /*#__PURE__*/_react.default.createElement("div", {
-      style: headerSubTitleStyles,
-      id: "react-matrix-dynamic-column-header-sub-title".concat(!customDynamicSubHeaderTitleIdValue ? "" : "-".concat(customDynamicSubHeaderTitleIdValue))
-    }, column.header_sub_title));
-  })));
-};
-MatrixHeaders.defaultProps = {
-  hasInlineStyles: true,
-  headerPrimaryUpper: true,
-  thRowStyles: {},
-  thTitleStyles: {},
-  thSubTitleStyles: {},
-  thPrimaryTitleStyles: {},
-  matrixSizeSelected: 5,
-  customHeaderRowIdValue: "",
-  customDynamicHeaderTitleIdValue: "",
-  customDynamicSubHeaderTitleIdValue: ""
-};
-var _default = MatrixHeaders;
-exports.default = _default;