react-data-matrix 0.3.4 → 0.3.7

package/dist/utils/data.js

@@ -0,0 +1,342 @@
+export const data = {
+    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.d.ts

@@ -0,0 +1,4 @@
+export declare const groupObjectsByProp: <T extends Record<string, any>>(array: T[], prop: keyof T) => T[][];
+export declare const capitaliseFirstCharacter: (stringValue: string) => string;
+export declare const capitaliseString: (stringValue: string) => string;
+export declare const callAll: <T extends (...args: any[]) => void>(...fns: T[]) => (...args: Parameters<T>) => void;

package/dist/utils/functions.js

@@ -0,0 +1,18 @@
+export const groupObjectsByProp = (array, prop) => {
+    const map = new Map(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) => stringValue.replace(/\b([a-z\s])/g, (string) => string.toUpperCase());
+// capitalizes entire word
+export const capitaliseString = (stringValue) => stringValue.toUpperCase();
+export const callAll = (...fns) => (...args) => fns.forEach((fn) => fn && fn(...args));

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "react-data-matrix",
-  "version": "0.3.4",
-  "types": "./lib/types/index.d.ts",
+  "version": "0.3.7",
   "private": false,
   "license": "MIT",
   "homepage": "https://bronz3beard.github.io/react-matrix",
@@ -34,7 +33,8 @@
   "description": "View structured data in a matrix table (data grid), showing a value located at an X and Y coordinate.",
   "scripts": {
     "start": "react-scripts start",
-    "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files",
+    "build": "rm -rf dist && NODE_ENV=production tsc",
+    "babel": "babel src/lib --out-dir dist --copy-files",
     "build:og": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
@@ -79,5 +79,8 @@
     "sass": "latest",
     "typescript": "latest",
     "web-vitals": "latest"
+  },
+  "dependencies": {
+    "react-data-matrix": "^0.3.6"
   }
 }

package/dist/components/MatrixHeaders.tsx

@@ -1,90 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,75 +0,0 @@
-import React, { FC } 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;