react-data-matrix 0.1.9 → 0.2.0

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
@@ -84,191 +86,209 @@ 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,
-  };
-
-  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: "",
-  };
+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,
+};
+
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-data-matrix",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "private": false,
   "license": "MIT",
   "homepage": "https://bronz3beard.github.io/react-matrix",
@@ -31,10 +31,10 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files",
-    "build-og": "react-scripts build",
+    "build:og": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "predeploy": "npm run build",
+    "predeploy": "npm run build:og",
     "deploy": "gh-pages -d build"
   },
   "eslintConfig": {