react-data-matrix 0.1.9 → 0.3.1

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

package/dist/types/index.d.ts

@@ -0,0 +1,106 @@
+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;
+}

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",
+    },
+  ],
+};