react-data-matrix 0.1.9 → 0.3.1

package/README.md

@@ -1,17 +1,18 @@
 # React Matrix   [![npm version](https://badge.fury.io/js/react-data-matrix.svg)](https://badge.fury.io/js/react-data-matrix)
 
-[React Matrix Demo](https://react-matrix.herokuapp.com/)
+[React Matrix Demo](https://bronz3beard.github.io/react-matrix)
 
 React Matrix table shows relationships between two or more variables in a data set in grid format.
 
-The most common usage for a table like React Matrix, is to display the __likelihood__ and __consequence__ "scores" of __risks/hazards__, this can be for anything from Corporate, Work Health Safety and Environment risks, and more.
+The most common usage for a table like React Matrix, is to display the **likelihood** and **consequence** "scores" of **risks/hazards**, this can be for anything from Corporate, Work Health Safety and Environment risks, and more.
 
 # PR's
+
 - Have a look at the [PR template doc](https://github.com/bronz3beard/react-matrix/blob/main/docs) for best approach to getting your pr merged.
 
 # Usage
 
-```js 
+```js
 import { ReactMatrix } from "react-data-matrix";
 
 const App = () => {
@@ -24,7 +25,8 @@ const App = () => {
 ```
 
 # Expected Data Structure
-- See [```./src/lib/utils/data.js```](https://github.com/bronz3beard/react-matrix/blob/main/src/lib/utils/data.js) for an example of the data, this can be used for testing if needed,
+
+- See [`./src/lib/utils/data.js`](https://github.com/bronz3beard/react-matrix/blob/main/src/lib/utils/data.js) for an example of the data, this can be used for testing if needed,
   or an example of how to construct/deconstruct your data objects from your api.
 
 ```js
@@ -83,192 +85,255 @@ const App = () => {
 
 # PropTypes
 
-```js
-  propTypes = {
-    data: PropTypes.shape({
-      id: PropTypes.number,
-      matrix_name: PropTypes.string,
-      matrix_description: PropTypes.string,
-      matrix_size: PropTypes.number.isRequired,
-      matrix_details: PropTypes.arrayOf(
-        PropTypes.shape({
-          id: PropTypes.number,
-          likelihood: PropTypes.string,
-          consequence: PropTypes.number,
-          header_title: PropTypes.string,
-          header_sub_title: PropTypes.string,
-          row_header_title: PropTypes.string,
-          row_header_sub_title: PropTypes.string,
-        })
-      ).isRequired,
-
-      matrix_values: PropTypes.arrayOf(
-        PropTypes.shape({
-          id: PropTypes.number.isRequired,
-          colour: PropTypes.string,
-          position: PropTypes.number.isRequired,
-          matrix_id: PropTypes.number,
-          score_value: PropTypes.number,
-          description: PropTypes.string,
-          response: PropTypes.string,
-          likelihood_descriptor: PropTypes.string.isRequired,
-          consequence_descriptor: PropTypes.number,
-        })
-      ).isRequired,
-    }).isRequired,
-
-    hasTableBorder: PropTypes.bool,
-    hasInlineStyles: PropTypes.bool,
-    hasContainerStyles: PropTypes.bool,
-    reverseMatrixValues: PropTypes.bool,
-    matrixSizeSelected: PropTypes.number,
-
-    rowPrimaryUpper: PropTypes.bool,
-    headerPrimaryUpper: PropTypes.bool,
-
-    thRowStyles: PropTypes.shape({}),
-    thTitleStyles: PropTypes.shape({}),
-    thSubTitleStyles: PropTypes.shape({}),
-    thPrimaryTitleStyles: PropTypes.shape({}),
-
-    trRowStyles: PropTypes.shape({}),
-    trTitleStyles: PropTypes.shape({}),
-    trSubTitleStyles: PropTypes.shape({}),
-    trPrimaryTitleStyles: PropTypes.shape({}),
-
-    tdStyles: PropTypes.shape({}),
-
-    customHeaderRowIdValue: PropTypes.string,
-    customDynamicHeaderTitleIdValue: PropTypes.string,
-    customDynamicSubHeaderTitleIdValue: PropTypes.string,
-
-    customRowDynamicIdValue: PropTypes.string,
-    customRowHeaderDynamicIdValue: PropTypes.string,
-
-    customTableDataDynamicIdValue: PropTypes.string,
+```ts
+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?: {
+    id: number;
+    matrix_name: string;
+    matrix_description: string;
+    matrix_size: number;
+    primary_header_title: string;
+    primary_row_header_title: string;
+    matrix_details: {
+      id: number;
+      likelihood: string;
+      consequence: number;
+      header_title: string;
+      header_sub_title: string;
+      row_header_title: string;
+      row_header_sub_title: string;
+    }[];
+    matrix_values: {
+      id: number;
+      colour: string;
+      position: number;
+      matrix_id: number;
+      score_value: number;
+      description: string;
+      response: string;
+      likelihood_descriptor: string;
+      consequence_descriptor: number;
+    }[];
   };
+  hasTableBorder?: boolean;
+  hasInlineStyles?: boolean;
+  hasContainerStyles?: boolean;
+  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;
+}
 
-  defaultProps = {
-    hasTableBorder: true,
-    rowPrimaryUpper: true,
-    hasInlineStyles: true,
-    matrixSizeSelected: 5,
-    headerPrimaryUpper: true,
-    hasContainerStyles: true,
-    reverseMatrixValues: true,
-
-    thRowStyles: {},
-    thTitleStyles: {},
-    thSubTitleStyles: {},
-    thPrimaryTitleStyles: {},
-
-    trRowStyles: {},
-    trTitleStyles: {},
-    trSubTitleStyles: {},
-    trPrimaryTitleStyles: {},
-
-    tdStyles: {},
-
-    matrixName: "",
-    matrixDescription: "",
-    customHeaderRowIdValue: "",
-    customRowDynamicIdValue: "",
-    customTableDataDynamicIdValue: "",
-    customRowHeaderDynamicIdValue: "",
-    customDynamicHeaderTitleIdValue: "",
-    customDynamicSubHeaderTitleIdValue: "",
+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;
+}
+```
+
+```js
+defaultProps = {
+  hasTableBorder: true,
+  rowPrimaryUpper: true,
+  hasInlineStyles: true,
+  matrixSizeSelected: 5,
+  headerPrimaryUpper: true,
+  hasContainerStyles: true,
+  reverseMatrixValues: true,
+
+  thRowStyles: {},
+  thTitleStyles: {},
+  thSubTitleStyles: {},
+  thPrimaryTitleStyles: {},
+
+  trRowStyles: {},
+  trTitleStyles: {},
+  trSubTitleStyles: {},
+  trPrimaryTitleStyles: {},
+
+  tdStyles: {},
+
+  matrixName: "",
+  matrixDescription: "",
+  customHeaderRowIdValue: "",
+  customRowDynamicIdValue: "",
+  customTableDataDynamicIdValue: "",
+  customRowHeaderDynamicIdValue: "",
+  customDynamicHeaderTitleIdValue: "",
+  customDynamicSubHeaderTitleIdValue: "",
+};
 ```
 
 # Available Properties
 
-- __hasInlineStyles__
-  * Default is true.
-  * If false all inline styles are removed.
-
-----
-- __hasTableBorder__
-  * Default is true.
-  * If false the most outer border is removed.
-
-----
-- __hasContainerStyles__
-  * Default is true.
-  * This will center the matrix in the middle of the page.
-
-----
-- __reverseMatrixValues__
-  * Default is true.
-  * When true the lowest value will be in the bottom left and the highest value will be in the top right, with all sequential values in-between.
-  * When false the values will be reversed, lowest value top left highest value bottom right.
-
-----
-- __rowPrimaryUpper__
-  * Default is true.
-  * If false string formatting will be removed.
-
-----
-- __headerPrimaryUpper__
-  * Default is true.
-  * If false string formatting will be removed.
-
-----
-- __customHeaderRowIdValue__
-  * Default is empty string.
-  * can be used to target element through id prop.
-
-----
-- __customDynamicHeaderTitleIdValue__
-  * Default is empty string.
-  * can be used to target element through id prop.
-
-----
-- __customDynamicSubHeaderTitleIdValue__
-  * Default is empty string.
-  * can be used to target element through id prop.
-
-----
-- __customRowDynamicIdValue__
-  * Default is empty string.
-  * can be used to target element through id prop.
-
-----
-- __customRowHeaderDynamicIdValue__
-  * Default is empty string.
-  * can be used to target element through id prop.
-
-----
-- __customTableDataDynamicIdValue__
-  * Default is empty string.
-  * can be used to target element through id prop.
-
-----
+- **hasInlineStyles**
+  - Default is true.
+  - If false all inline styles are removed.
+
+---
+
+- **hasTableBorder**
+  - Default is true.
+  - If false the most outer border is removed.
+
+---
+
+- **hasContainerStyles**
+  - Default is true.
+  - This will center the matrix in the middle of the page.
+
+---
+
+- **reverseMatrixValues**
+  - Default is true.
+  - When true the lowest value will be in the bottom left and the highest value will be in the top right, with all sequential values in-between.
+  - When false the values will be reversed, lowest value top left highest value bottom right.
+
+---
+
+- **rowPrimaryUpper**
+  - Default is true.
+  - If false string formatting will be removed.
+
+---
+
+- **headerPrimaryUpper**
+  - Default is true.
+  - If false string formatting will be removed.
+
+---
+
+- **customHeaderRowIdValue**
+  - Default is empty string.
+  - can be used to target element through id prop.
+
+---
+
+- **customDynamicHeaderTitleIdValue**
+  - Default is empty string.
+  - can be used to target element through id prop.
+
+---
+
+- **customDynamicSubHeaderTitleIdValue**
+  - Default is empty string.
+  - can be used to target element through id prop.
+
+---
+
+- **customRowDynamicIdValue**
+  - Default is empty string.
+  - can be used to target element through id prop.
+
+---
+
+- **customRowHeaderDynamicIdValue**
+  - Default is empty string.
+  - can be used to target element through id prop.
+
+---
+
+- **customTableDataDynamicIdValue**
+  - Default is empty string.
+  - can be used to target element through id prop.
+
+---
 
 # Styling Properties
 
 ### Inline
-__These styles can be added to the current styles or, 
-if you make ```hasInlineStyles = false```, then add these values with your own styles, you can have full control over styling inline.__
 
-__ReactMatrix__
+**These styles can be added to the current styles or,
+if you make `hasInlineStyles = false`, then add these values with your own styles, you can have full control over styling inline.**
+
+**ReactMatrix**
+
 - tableContainerStyles={{}}
 - tableStyles={{}}
 
-__MatrixHeaders__
+**MatrixHeaders**
+
 - thRowStyles={{}}
 - thTitleStyles={{}}
 - thSubTitleStyles={{}}
 - thPrimaryTitleStyles={{}}
 
-__MatrixRows__
+**MatrixRows**
+
 - trRowStyles={{}},
 - trTitleStyles={{}},
 - trSubTitleStyles={{}},
 - trPrimaryTitleStyles={{}},
 
-__TableData__
+**TableData**
+
 - tdStyles={{}},
 
-----
+---
+
 # Create React App
+
 - This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

package/dist/components/MatrixHeaders.tsx

@@ -0,0 +1,92 @@
+import React, { FC, useContext } from "react";
+import {
+  getHeaderRowStyles,
+  getHeaderTitleStyles,
+  getHeaderSubTitleStyles,
+  getHeaderPrimaryTitleStyles,
+} from "../helpers/getStyles";
+import { capitaliseString } from "../utils/functions";
+import Context from "../context";
+// import "./styles/riskMatrix.scss";
+
+const MatrixHeaders: FC = () => {
+  const {
+    data,
+    hasInlineStyles = true,
+    headerPrimaryUpper = true,
+    thRowStyles = {},
+    thTitleStyles = {},
+    thSubTitleStyles = {},
+    thPrimaryTitleStyles = {},
+    customHeaderRowIdValue = "",
+    customDynamicHeaderTitleIdValue = "",
+    customDynamicSubHeaderTitleIdValue = "",
+  } = useContext(Context);
+
+  const headerRowStyles = getHeaderRowStyles(hasInlineStyles, thRowStyles);
+  const headerTitleStyles = getHeaderTitleStyles(
+    hasInlineStyles,
+    thTitleStyles
+  );
+  const headerSubTitleStyles = getHeaderSubTitleStyles(
+    hasInlineStyles,
+    thSubTitleStyles
+  );
+  const headerPrimaryTitleStyles = getHeaderPrimaryTitleStyles(
+    hasInlineStyles,
+    thPrimaryTitleStyles
+  );
+
+  const headerPrimaryTitle = !headerPrimaryUpper
+    ? capitaliseString(data?.primary_header_title)
+    : data?.primary_header_title;
+
+  return (
+    <thead>
+      <tr id="react-matrix-blank-headers-primary-title-row">
+        <th headers="blank" colSpan={4}></th>
+        <th
+          style={headerPrimaryTitleStyles}
+          id="react-matrix-header-primary-title"
+        >
+          {headerPrimaryTitle}
+        </th>
+        <th headers="blank" colSpan={2}></th>
+      </tr>
+      <tr
+        style={headerRowStyles}
+        id={`react-matrix-dynamic-headers-row-${customHeaderRowIdValue}`}
+      >
+        <th headers="blank" colSpan={2}></th>
+        {data.matrix_details.slice(0, data.matrix_size).map((column, index) => {
+          return (
+            <th
+              scope="col"
+              style={headerTitleStyles}
+              id={`react-matrix-dynamic-column-header-title${
+                !customDynamicHeaderTitleIdValue
+                  ? ""
+                  : `-${customDynamicHeaderTitleIdValue}`
+              }`}
+              key={`${column.id}-${index}`}
+            >
+              {column.header_title}
+              <div
+                style={headerSubTitleStyles}
+                id={`react-matrix-dynamic-column-header-sub-title${
+                  !customDynamicSubHeaderTitleIdValue
+                    ? ""
+                    : `-${customDynamicSubHeaderTitleIdValue}`
+                }`}
+              >
+                {column.header_sub_title}
+              </div>
+            </th>
+          );
+        })}
+      </tr>
+    </thead>
+  );
+};
+
+export default MatrixHeaders;

package/dist/components/MatrixRows.tsx

@@ -0,0 +1,135 @@
+import React, { FC, useContext } from "react";
+import {
+  getHeaderRowStyles,
+  getHeaderTitleStyles,
+  getHeaderSubTitleStyles,
+  getHeaderPrimaryTitleStyles,
+} from "../helpers/getStyles";
+import { groupObjectsByProp, capitaliseString } from "../utils/functions";
+import TableData from "./TableData";
+import Context from "../context";
+import { MatrixValue } from "../types";
+
+const MatrixRows: FC = () => {
+  const {
+    data,
+    rowPrimaryUpper = true,
+    hasInlineStyles = true,
+    reverseMatrixValues = true,
+    trRowStyles = {},
+    trTitleStyles = {},
+    trSubTitleStyles = {},
+    trPrimaryTitleStyles = {},
+    tdStyles = {},
+    customRowDynamicIdValue = "",
+    customRowHeaderDynamicIdValue = "",
+    customTableDataDynamicIdValue = "",
+  } = useContext(Context);
+
+  const valuesArray = reverseMatrixValues
+    ? groupObjectsByProp(data.matrix_values, "likelihood_descriptor")
+        .reverse()
+        .slice(0, data.matrix_size)
+    : groupObjectsByProp(data.matrix_values, "likelihood_descriptor").slice(
+        0,
+        data.matrix_size
+      );
+
+  const tableRowStyles = getHeaderRowStyles(hasInlineStyles, trRowStyles);
+  const tableRowHeaderTitleStyles = getHeaderTitleStyles(
+    hasInlineStyles,
+    trTitleStyles
+  );
+  const tableRowHeaderSubTitleStyles = getHeaderSubTitleStyles(
+    hasInlineStyles,
+    trSubTitleStyles
+  );
+  const rowHeaderPrimaryTitleStyles = getHeaderPrimaryTitleStyles(
+    hasInlineStyles,
+    trPrimaryTitleStyles
+  );
+
+  const rowPrimaryTitle = rowPrimaryUpper
+    ? capitaliseString(data.primary_row_header_title)
+    : data.primary_row_header_title;
+
+  return (
+    <tbody>
+      <tr id="react-matrix-row-primary-title">
+        <th scope="row" rowSpan={6} style={rowHeaderPrimaryTitleStyles}>
+          {rowPrimaryTitle}
+        </th>
+      </tr>
+      {valuesArray.map((row, index) => {
+        const rowHeaderOrder = reverseMatrixValues
+          ? data.matrix_size - (index + 1)
+          : index;
+
+        return (
+          <tr
+            style={tableRowStyles}
+            key={`row-${index}`}
+            id={`react-matrix-dynamic-rows-${
+              data.matrix_details[rowHeaderOrder]?.row_header_title
+            }-${data.matrix_details[rowHeaderOrder]?.row_header_sub_title}${
+              !customRowDynamicIdValue ? "" : `-${customRowDynamicIdValue}`
+            }`}
+          >
+            <th
+              scope="row"
+              style={tableRowHeaderTitleStyles}
+              id={`react-matrix-dynamic-rows-${
+                data.matrix_details[rowHeaderOrder]?.row_header_title
+              }-${data.matrix_details[rowHeaderOrder]?.row_header_sub_title}${
+                !customRowHeaderDynamicIdValue
+                  ? ""
+                  : `-${customRowHeaderDynamicIdValue}`
+              }`}
+            >
+              {data.matrix_details[rowHeaderOrder]?.row_header_title}
+              <div style={tableRowHeaderSubTitleStyles}>
+                {data.matrix_details[rowHeaderOrder]?.row_header_sub_title}
+              </div>
+            </th>
+            {row
+              .slice(0, data.matrix_size)
+              .map((item: MatrixValue, index: number) => {
+                return (
+                  <TableData
+                    data={item}
+                    tdStyles={tdStyles}
+                    key={`${item.id}-${index}`}
+                    hasInlineStyles={hasInlineStyles}
+                    customTableDataDynamicIdValue={
+                      customTableDataDynamicIdValue
+                    }
+                  />
+                );
+              })}
+          </tr>
+        );
+      })}
+    </tbody>
+  );
+};
+
+MatrixRows.defaultProps = {
+  rowPrimaryUpper: true,
+  hasInlineStyles: true,
+  reverseMatrixValues: true,
+
+  trRowStyles: {},
+  trTitleStyles: {},
+  trSubTitleStyles: {},
+  trPrimaryTitleStyles: {},
+
+  tdStyles: {},
+
+  matrixSizeSelected: 5,
+
+  customRowDynamicIdValue: "",
+  customRowHeaderDynamicIdValue: "",
+  customTableDataDynamicIdValue: "",
+};
+
+export default MatrixRows;