react-data-matrix 0.2.0 → 0.3.2

package/README.md

@@ -12,14 +12,49 @@ The most common usage for a table like React Matrix, is to display the **likelih
 
 # Usage
 
-```js
+```ts
 import { ReactMatrix } from "react-data-matrix";
 
-const App = () => {
+const App: FC = () => {
   ...
 
   return (
-    <ReactMatrix data={data} {...seeOtherPropsBelow} />
+    <ReactMatrix
+      {...{
+        matrixName: "",
+        matrixDescription: "",
+        hasTableBorder: true,
+        rowPrimaryUpper: true,
+        hasInlineStyles: true,
+        matrixSizeSelected: 5,
+        headerPrimaryUpper: true,
+        hasContainerStyles: true,
+        reverseMatrixValues: true,
+
+        tableContainerStyles: {},
+        tableStyles: {},
+
+        thRowStyles: {},
+        thTitleStyles: {},
+        thSubTitleStyles: {},
+        thPrimaryTitleStyles: {},
+
+        trRowStyles: {},
+        trTitleStyles: {},
+        trSubTitleStyles: {},
+        trPrimaryTitleStyles: {},
+
+        tdStyles: {},
+
+        customHeaderRowIdValue: "",
+        customRowDynamicIdValue: "",
+        customTableDataDynamicIdValue: "",
+        customRowHeaderDynamicIdValue: "",
+        customDynamicHeaderTitleIdValue: "",
+        customDynamicSubHeaderTitleIdValue: "",
+        data,
+      }}
+    />
   )
 }
 ```
@@ -29,7 +64,7 @@ const App = () => {
 - 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
+```ts
   const data = {
     id: 1,
     matrix_size: 5,
@@ -83,74 +118,94 @@ 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,
-};
+# Types
+
+```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: MatrixData;
+  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;
+}
 
+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;
+}
+```
+
+```ts
 defaultProps = {
+  matrixName: "",
+  matrixDescription: "",
   hasTableBorder: true,
   rowPrimaryUpper: true,
   hasInlineStyles: true,
@@ -159,6 +214,9 @@ defaultProps = {
   hasContainerStyles: true,
   reverseMatrixValues: true,
 
+  tableContainerStyles: {},
+  tableStyles: {},
+
   thRowStyles: {},
   thTitleStyles: {},
   thSubTitleStyles: {},
@@ -171,8 +229,6 @@ defaultProps = {
 
   tdStyles: {},
 
-  matrixName: "",
-  matrixDescription: "",
   customHeaderRowIdValue: "",
   customRowDynamicIdValue: "",
   customTableDataDynamicIdValue: "",

package/dist/components/MatrixHeaders.tsx

@@ -0,0 +1,90 @@
+import React, { FC } from "react";
+import {
+  getHeaderRowStyles,
+  getHeaderTitleStyles,
+  getHeaderSubTitleStyles,
+  getHeaderPrimaryTitleStyles,
+} from "../helpers/getStyles";
+import { capitaliseString } from "../utils/functions";
+import { MatrixHeaderProps } from "../types";
+// import "./styles/riskMatrix.scss";
+
+const MatrixHeaders: FC<MatrixHeaderProps> = ({
+  data,
+  hasInlineStyles = true,
+  headerPrimaryUpper = true,
+  thRowStyles = {},
+  thTitleStyles = {},
+  thSubTitleStyles = {},
+  thPrimaryTitleStyles = {},
+  customHeaderRowIdValue = "",
+  customDynamicHeaderTitleIdValue = "",
+  customDynamicSubHeaderTitleIdValue = "",
+}: MatrixHeaderProps) => {
+  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,115 @@
+import React, { FC } from "react";
+import {
+  getHeaderRowStyles,
+  getHeaderTitleStyles,
+  getHeaderSubTitleStyles,
+  getHeaderPrimaryTitleStyles,
+} from "../helpers/getStyles";
+import { groupObjectsByProp, capitaliseString } from "../utils/functions";
+import TableData from "./TableData";
+import { MatrixRowsProps, MatrixValue } from "../types";
+
+const MatrixRows: FC<MatrixRowsProps> = ({
+  data,
+  rowPrimaryUpper = true,
+  hasInlineStyles = true,
+  reverseMatrixValues = true,
+  trRowStyles = {},
+  trTitleStyles = {},
+  trSubTitleStyles = {},
+  trPrimaryTitleStyles = {},
+  tdStyles = {},
+  customRowDynamicIdValue = "",
+  customRowHeaderDynamicIdValue = "",
+  customTableDataDynamicIdValue = "",
+}: MatrixRowsProps) => {
+  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 = {};
+
+export default MatrixRows;

package/dist/components/ReactMatrix.tsx

@@ -0,0 +1,75 @@
+import React, { FC, useContext } from "react";
+import {
+  getTableStyles,
+  getTableBoarder,
+  getContainerStyles,
+} from "../helpers/getStyles";
+import MatrixHeaders from "./MatrixHeaders";
+import MatrixRows from "./MatrixRows";
+import { ReactMatrixProps } from "../types";
+
+const ReactMatrix: FC<ReactMatrixProps> = ({
+  data,
+  matrixName,
+  tableStyles: contextTableStyles,
+  hasTableBorder: contextHasTableBorder,
+  hasInlineStyles: contextHasInlineStyles,
+  matrixDescription,
+  hasContainerStyles: contextHasContainerStyles,
+  tableContainerStyles: contextTableContainerStyles,
+
+  tableStyles = {},
+}) => {
+  const tableBorder = getTableBoarder(
+    !!(contextHasInlineStyles && contextHasTableBorder)
+  );
+  const tableElmStyles = getTableStyles(
+    !!(contextHasInlineStyles && contextTableStyles),
+    tableStyles
+  );
+  const containerStyles = getContainerStyles(
+    !!(contextHasInlineStyles && contextHasContainerStyles),
+    contextTableContainerStyles ?? {}
+  );
+
+  return (
+    <div style={containerStyles}>
+      <h1>{matrixName}</h1>
+      <h4>{matrixDescription}</h4>
+      <table id="matrix-table" style={{ ...tableElmStyles, ...tableBorder }}>
+        <MatrixHeaders
+          {...{
+            data,
+            hasInlineStyles: true,
+            headerPrimaryUpper: true,
+            thRowStyles: {},
+            thTitleStyles: {},
+            thSubTitleStyles: {},
+            thPrimaryTitleStyles: {},
+            customHeaderRowIdValue: "",
+            customDynamicHeaderTitleIdValue: "",
+            customDynamicSubHeaderTitleIdValue: "",
+          }}
+        />
+        <MatrixRows
+          {...{
+            data,
+            rowPrimaryUpper: true,
+            hasInlineStyles: true,
+            reverseMatrixValues: true,
+            trRowStyles: {},
+            trTitleStyles: {},
+            trSubTitleStyles: {},
+            trPrimaryTitleStyles: {},
+            tdStyles: {},
+            customRowDynamicIdValue: "",
+            customRowHeaderDynamicIdValue: "",
+            customTableDataDynamicIdValue: "",
+          }}
+        />
+      </table>
+    </div>
+  );
+};
+
+export default ReactMatrix;

package/dist/components/TableData.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from "react";
+import { TableDataProps } from "../types";
+
+const TableData: FC<TableDataProps> = ({
+  data,
+  tdStyles = {},
+  hasInlineStyles = true,
+  customTableDataDynamicIdValue = "",
+}) => {
+  const handleCellClick = (tdSelected: TableDataProps["data"]) => {
+    alert(
+      `${tdSelected?.description}, ${tdSelected?.score_value} \n${tdSelected?.response}`
+    );
+  };
+
+  const customTdStyles = !tdStyles ? {} : tdStyles;
+  const tableDataStyles: React.CSSProperties = hasInlineStyles
+    ? {
+        cursor: "pointer",
+        textAlign: "center",
+        borderColor: "black",
+        borderStyle: "solid",
+        borderWidth: `${1}px`,
+        backgroundColor: data?.colour,
+        ...tdStyles,
+      }
+    : { ...customTdStyles };
+
+  return (
+    <>
+      <td
+        style={tableDataStyles}
+        onClick={() => handleCellClick(data)}
+        id={`react-matrix-dynamic-table-data${
+          !customTableDataDynamicIdValue
+            ? ""
+            : `-${customTableDataDynamicIdValue}`
+        }`}
+      >
+        {`${data?.description}`}
+        <br />
+        {`(${data?.score_value})`}
+      </td>
+    </>
+  );
+};
+
+export default TableData;

package/dist/helpers/getStyles.ts

@@ -0,0 +1,77 @@
+export const getCustomStyles = (hasStyle: boolean) =>
+  !hasStyle ? {} : hasStyle;
+
+export const getContainerStyles = (
+  hasStyle: boolean,
+  styles: React.CSSProperties
+): React.CSSProperties =>
+  // if custom styles are passed remove default styles by returning a spread empty object
+  !hasStyle
+    ? { ...getCustomStyles(hasStyle) }
+    : {
+        top: `${50}%`,
+        left: `${50}%`,
+        height: `${100}%`,
+        textAlign: "center",
+        position: "absolute",
+        transform: `translate(${-50}%, ${-50}%)`,
+        ...styles,
+      };
+
+export const getTableBoarder = (hasStyle: boolean) =>
+  !hasStyle ? {} : { border: `${1}px solid black` };
+
+export const getTableStyles = (
+  hasStyle: boolean,
+  styles: React.CSSProperties
+): React.CSSProperties =>
+  !hasStyle
+    ? { ...getCustomStyles(hasStyle) }
+    : { width: `${70}rem`, ...styles };
+
+export const getHeaderPrimaryTitleStyles = (
+  hasStyle: boolean,
+  styles: React.CSSProperties
+): React.CSSProperties =>
+  !hasStyle
+    ? { ...getCustomStyles(hasStyle) }
+    : {
+        borderWidth: `${0}`,
+        padding: `${1}rem ${0} ${1}rem ${0}`,
+        ...styles,
+      };
+
+export const getHeaderRowStyles = (
+  hasStyle: boolean,
+  styles: React.CSSProperties
+): React.CSSProperties =>
+  !hasStyle
+    ? { ...getCustomStyles(hasStyle) }
+    : {
+        borderColor: "black",
+        borderStyle: "solid",
+        padding: `${10}rem ${0} ${0} ${0}`,
+        borderWidth: `${0} ${0} ${0} ${10}px`,
+        ...styles,
+      };
+
+export const getHeaderTitleStyles = (
+  hasStyle: boolean,
+  styles: React.CSSProperties
+): React.CSSProperties =>
+  !hasStyle
+    ? { ...getCustomStyles(hasStyle) }
+    : {
+        padding: `${0} ${0.5}rem ${0} ${0.5}rem`,
+        backgroundColor: "light-grey",
+        border: `${1}px solid black`,
+        ...styles,
+      };
+
+export const getHeaderSubTitleStyles = (
+  hasStyle: boolean,
+  styles: React.CSSProperties
+): React.CSSProperties =>
+  !hasStyle
+    ? { ...getCustomStyles(hasStyle) }
+    : { fontSize: `${0.9}em`, fontWeight: "normal", ...styles };

package/dist/index.ts

@@ -0,0 +1 @@
+export { default as ReactMatrix } from "./components/ReactMatrix";