feat: Code quality refinement, prop rename and additional style custo…

…mization support (#12)
KeyValueSoftwareSystems · Nov 28, 2023 · 492bcac · 492bcac
1 parent 16764f3
commit 492bcac
Show file tree

Hide file tree

Showing 35 changed files with 416 additions and 2,209 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -13,28 +13,24 @@
     },
     "project": "./tsconfig.json"
   },
-  "plugins": [
-    "@typescript-eslint",
-    "react",
-    "react-hooks"
-  ],
+  "plugins": ["@typescript-eslint", "react", "react-hooks"],
   "rules": {
     "no-console": "warn",
     "@typescript-eslint/explicit-function-return-type": "error",
     "react/prop-types": "warn",
     "indent": ["error", 2],
     "arrow-body-style": ["error", "as-needed"],
-    "no-trailing-spaces":"error",
-    "comma-dangle":"error",
-    "default-case":"error",
+    "no-trailing-spaces": "error",
+    "comma-dangle": "error",
+    "default-case": "error",
     "block-spacing": "error",
-    "max-len":["warn", 150],
-    "space-before-blocks":"error",
+    "max-len": ["warn", 150],
+    "space-before-blocks": "error",
     "react-hooks/exhaustive-deps": "off"
   },
   "settings": {
     "react": {
       "version": "^18.0.2"
     }
   }
-}
+}
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
 
 ## Our Responsibilities
 
@@ -55,7 +55,7 @@ further defined and clarified by project maintainers.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at [email protected]. All
+reported by contacting the project team at [email protected]. All
 complaints will be reviewed and investigated and will result in a response that
 is deemed necessary and appropriate to the circumstances. The project team is
 obligated to maintain confidentiality with regard to the reporter of an incident.

diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Francisco Hodge
+Copyright (c) 2023 keyvalue software systems
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,76 @@
+<!-- Thank you for contributing to @keyvaluesystems/react-scatter-graph! -->
+<!-- Before submitting a pull request, please review our contributing guidelines. -->
+
+
+
+## Pull Request Checklist
+
+
+
+- [ ] **Read the contributing guidelines.**
+- [ ] **Linked to an issue:** Fixes # (replace with the issue number, if applicable)
+- [ ] **Branch is up-to-date with the base branch:** `master`
+- [ ] **Changes pass tests locally:** `npm test` or `yarn test`
+- [ ] **Documentation has been updated, if necessary**
+- [ ] **Code follows the style guide of the project**
+      
+
+## Description
+
+
+
+<!-- Provide a brief description of your changes. -->
+
+
+
+## Screenshots (if applicable)
+
+
+
+<!-- Add screenshots or GIFs to help explain your changes. -->
+
+
+
+## Additional Notes
+
+
+
+<!-- Any additional information you want to provide that is not covered by the checklist or description. -->
+
+
+
+## Related Issues or PRs
+
+
+
+<!-- If your pull request is related to any issue(s) or other pull request(s), mention them here. -->
+
+
+
+## Reviewer Guidelines
+
+
+
+<!-- Suggest specific areas of the codebase that you would like the reviewer to focus on. -->
+
+
+
+## Testing Instructions
+
+
+
+<!-- Provide step-by-step instructions on how to test your changes. -->
+
+
+
+## Checklist for Reviewers
+
+
+
+- [ ] Code follows project conventions and style
+- [ ] Changes do not introduce new warnings or errors
+- [ ] Unit tests cover the changes
+- [ ] Documentation is updated
+      
+
+## By submitting this pull request, I confirm that my contribution is made under the terms of the MIT License.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 <img src="https://raw.githubusercontent.com/KeyValueSoftwareSystems/react-scatter-graph/master/assets/react-scatter-graph-example-2.png" alt="" width="700"/>
 </div>
 
-A fully customizable ready to use scatter graph UI package for React.
+A fully customizable, ready to use scatter graph UI package for React.
 Try tweaking React Scatter Graph using this codesandbox link <a href="https://codesandbox.io/s/stupefied-currying-ornk52" >here</a>
 
 ## Installation
@@ -39,47 +39,61 @@ function App() {
 export default App;
 ```
 
-The `data` array is an array of objects with { x, y } cordinates.
+The `data` array is an array of objects with { x, y } coordinates.
 
 > Note: The graph width is responsive. So it can be adjusted by a parent wrapper. You need to provide the height.
 
-
-
 ### React Scatter Graph for date inputs:
 
 Scatter graph is a useful tool for plotting date values. In order to do so, timestamps must be provided for the x-axis values.
 
-
 <div align="center">
 <img src="./assets/react-scatter-graph-example-4.png" alt="" width="700"/>
 </div>
 
-
-
 ```jsx
-import  React,  {  useState  }  from  'react';
+import React, { useState } from 'react';
 import ReactScatterGraph from '@keyvaluesystems/react-scatter-graph';
 
-function  App()  {  
+function App() {
   data = [
-    // x given in milliseconds curresponding to the date
+    // x given in milliseconds corresponding to the date
     { x: 1672876800000, y: 150 },
     { x: 1673568000000, y: 330 },
     { x: 1674086400000, y: 315 },
-    { x: 1673222400000, y: 200}
+    { x: 1673222400000, y: 200 }
   ];
 
-  return (
-    <ScatterGraph
-      data={data}
-      graphHeight={500}
-    />
-  );
+  return <ScatterGraph data={data} graphHeight={500} />;
 }
 
 export default App;
 ```
 
+## v2.0.0 (Major Version Change)
+
+This release includes a breaking change. Please read this document carefully before upgrading
+
+### Breaking Changes
+
+- The `axisColor` prop has been renamed to `gridLineColor`.
+
+### Migration Steps
+
+- Update Prop: Replace the prop `axisColor` with the name `gridLineColor`.
+
+<b>Before</b>
+
+```jsx
+<ScatterGraph data={data} graphHeight={500} axisColor='#00FF00' />
+```
+
+<b>After</b>
+
+```jsx
+<ScatterGraph data={data} graphHeight={500} gridLineColor='#00FF00' />
+```
+
 ## Props
 
 Props that can be passed to the component are listed below:
@@ -95,21 +109,21 @@ Props that can be passed to the component are listed below:
   <tbody>
     <tr>
       <td><code><b>data:</b> object[]</code></td>
-      <td>An array of x-y cordinates to render.</td>
+      <td>An array of x-y coordinates to render.</td>
       <td><code>undefined</code></td>
     </tr>
     <tr>
       <td><code><b>graphHeight:</b> number</code></td>
       <td>Height of graph in pixel</td>
-      <td><code>undefuned</code></td>
+      <td><code>undefined</code></td>
     <tr>
-      <td><code><b>axisColor:</b> string</code></td>
-      <td>Color for the x and y axes color which indicates the lines that are used to measure data</td>
+      <td><code><b>gridLineColor:</b> string</code></td>
+      <td>Color for the grid lines on the x and y axes. It helps user to see the exact value of a point on the graph</td>
       <td><code>#9E9E9E</code></td>
     </tr>
     <tr>
       <td><code><b>originAxisColor:</b> string</code></td>
-      <td>Color for the origin axis color</td>
+      <td>Color for the origin axis</td>
       <td><code>#9E9E9E</code></td>
     </tr>
     <tr>
@@ -140,5 +154,60 @@ Props that can be passed to the component are listed below:
       </td>
       <td><code>undefined</code></td>
     </tr>
+    <tr>
+			<td><code><b>styles?:</b> object</code></td>
+			<td>Provides you with a bunch of style objects and callback functions to override the default styles.(refer 
+			<a href="#style-customizations">Style Customizations</a>)
+			<td><code>undefined</code></td>
+		</tr>
   </tbody>
 </table>
+
+<a name="style-customizations"></a>
+
+## Style Customizations
+
+Style customizations can be done by overriding default styles using the `styles` prop.
+The below code shows all the overridable styles using `styles` prop.
+
+```jsx
+<ScatterGraph
+  data={data}
+  graphHeight={500}
+  styles={{
+    Root?: {...styles},
+    XLabel?: (xLabel) => ({...styles}),
+    YLabel?: (yLabel) => ({...styles}),
+  }}
+/>;
+
+```
+
+For a more specific example, please refer the following:
+
+```jsx
+<ScatterGraph
+  data={data}
+  graphHeight={500}
+  styles={{
+    Root: {
+      marginTop: 50
+    },
+    XLabel: () => ({
+      color: 'blue'
+    }),
+    YLabel: () => ({
+      color: 'green'
+    })
+  }}
+/>
+```
+
+Within the `styles` prop, following keys accept a style object:
+
+- `Root` - overrides the style of outermost container.
+
+Within the `styles` prop, following keys accept a function that returns the desired style for each element:
+
+- `XLabel` - overrides the style of x-axis labels.
+- `YLabel` - overrides the style of y-axis labels.
diff --git a/STYLE_GUIDELINES.md b/STYLE_GUIDELINES.md
@@ -0,0 +1,19 @@
+## Style Guidelines for @keyvaluesystems/react-scatter-graph
+
+**Introduction**
+
+As an open-source project, @keyvaluesystems/react-scatter-graph strives to maintain a consistent and well-structured codebase. These CSS style guidelines serve as a reference for contributors, ensuring that their CSS code adheres to established conventions and best practices.
+
+**Coding Conventions**
+
+- Organize CSS files into a logical structure.
+- Use meaningful and descriptive names for classes.
+- Include comments to explain non-obvious logic and complex styles.
+- Should support devices with all resolutions
+- Follow CamelCase conventions for class names that concisely convey their purpose, enhancing code organization and readability
+- Adhere to the practice of reusing style classes to improve code organization and maintainability.
+
+**Documentation Practices**
+
+- Provide clear documentation.
+- Include a README file related to styles if necessary.