react-data-matrix 0.2.0 → 0.3.1

package/README.md

@@ -85,71 +85,116 @@ 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;
+}
+
+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,

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;

package/dist/components/ReactMatrix.tsx

@@ -0,0 +1,47 @@
+import React, { FC, useContext } from "react";
+import {
+  getTableStyles,
+  getTableBoarder,
+  getContainerStyles,
+} from "../helpers/getStyles";
+import MatrixHeaders from "./MatrixHeaders";
+import MatrixRows from "./MatrixRows";
+import Context from "../context";
+import { ReactMatrixProps } from "../types";
+
+const ReactMatrix: FC<ReactMatrixProps> = ({ tableStyles = {} }) => {
+  const {
+    matrixName,
+    tableStyles: contextTableStyles,
+    hasTableBorder: contextHasTableBorder,
+    hasInlineStyles: contextHasInlineStyles,
+    matrixDescription,
+    hasContainerStyles: contextHasContainerStyles,
+    tableContainerStyles: contextTableContainerStyles,
+  } = useContext(Context);
+
+  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 />
+        <MatrixRows />
+      </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/context/index.tsx

@@ -0,0 +1,66 @@
+import { createContext } from "react";
+import { MatrixData } from "../types";
+
+interface ContextType {
+  data: MatrixData;
+  matrixName: string;
+  matrixDescription: string;
+  hasTableBorder: boolean;
+  rowPrimaryUpper: boolean;
+  hasInlineStyles: boolean;
+  matrixSizeSelected: number;
+  headerPrimaryUpper: boolean;
+  hasContainerStyles: boolean;
+  reverseMatrixValues: boolean;
+  tableContainerStyles: Record<string, any>;
+  tableStyles: Record<string, any>;
+  thRowStyles: Record<string, any>;
+  thTitleStyles: Record<string, any>;
+  thSubTitleStyles: Record<string, any>;
+  thPrimaryTitleStyles: Record<string, any>;
+  trRowStyles: Record<string, any>;
+  trTitleStyles: Record<string, any>;
+  trSubTitleStyles: Record<string, any>;
+  trPrimaryTitleStyles: Record<string, any>;
+  tdStyles: Record<string, any>;
+  customHeaderRowIdValue: string;
+  customRowDynamicIdValue: string;
+  customTableDataDynamicIdValue: string;
+  customRowHeaderDynamicIdValue: string;
+  customDynamicHeaderTitleIdValue: string;
+  customDynamicSubHeaderTitleIdValue: string;
+}
+
+const Context = createContext<ContextType>({
+  data: {} as MatrixData,
+  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: "",
+});
+
+export const Provider = Context.Provider;
+
+export default Context;

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";