Refactor/improve standards

.gitignore

@@ -7,6 +7,7 @@
 # builds
 /build
 /dist
+/coverage
 .rpt2_cache
 
 # misc

CODE_OF_CONDUCT.md

@@ -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.

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

PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,76 @@
+<!-- Thank you for contributing to @keyvaluesystems/react-waterfall-chart! -->
+<!-- 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.

README.md

@@ -16,7 +16,7 @@
 
 
 
-Try tweaking a waterfall chart using this codesandbox link <a  href="https://codesandbox.io/s/waterfall-chart-example-uvr8jd">here</a>
+Try tweaking a waterfall chart using this codesandbox link <a  href="https://codesandbox.io/p/sandbox/react-water-fall-chart-nxkyrt">here</a>
 
 
 
@@ -38,7 +38,7 @@ You’ll need to install React separately since it isn't included in the package
 
 ## Usage
 
-React Waterfall chart can run in a very basic mode by just providing the `transactions` like given below:
+React Waterfall chart can run in a very basic mode by just providing the `dataPoints` like given below:
 
 
 
@@ -47,27 +47,27 @@ React Waterfall chart can run in a very basic mode by just providing the `transa
 import  WaterfallChart  from  '@keyvaluesystems/react-waterfall-chart';
 
 <WaterfallChart
-  transactions={transactionList}
+  dataPoints={dataPoints}
 />
 
 ```
 
 
 
-The transactions prop is an array of transactions with the following keys:
+The dataPoints prop is an array of dataPoint with the following keys:
 
 
 
--  `label` - a string to represent each transaction
+-  `label` - a string to represent each dataPoint
 
--  `value` - a number that specifies the transaction quantity
+-  `value` - a number that specifies the dataPoint quantity
 
-An example for transactions array is shown below:
+An example for dataPoint array is shown below:
 
 
 
 ```jsx
-const  transactionsList = [{
+const  dataPoints = [{
     label:  'Quarter 1, 2020',
     value:  1000
   },{
@@ -78,11 +78,11 @@ const  transactionsList = [{
 
 You can use `barWidth` prop to specify the width of each bar present in the chart. The given value will be converted to pixels (px) and applied to the chart.
 With the help of `showBridgeLines` prop, the line connecting the adjacent bars can be shown/hidden.
-`showFinalSummary` can be used to display the summary as the last transaction.
+`showFinalSummary` can be used to display the summary as the last bar.
 
 ```jsx
 <WaterfallChart
-  transactions={transactionsList}
+  dataPoints={dataPoints}
   barWidth={100}
   showBridgeLines={true}
   showFinalSummary={false}
@@ -95,7 +95,7 @@ You can specify whether to show or hide the scale lines in the Y axis with the h
 
 ```jsx
 <WaterfallChart
-  transactions={transactionsList}
+  dataPoints={dataPoints}
   showYAxisScaleLines={true}
 />
 ```
@@ -113,9 +113,9 @@ You can specify whether to show or hide the scale lines in the Y axis with the h
 </thead>
 <tbody>
 <tr>
-<td><code><b>transactions:</b> object[]</code></td>
+<td><code><b>dataPoints:</b> object[]</code></td>
 <td>
-An array of transaction objects to specifying the value and label
+An array of dataPoint objects to specifying the value and label
 </td>
 <td><code>[]</code></td>
 </tr>
@@ -150,7 +150,7 @@ The distance between each y axis scale unit. The value specified will be applied
 <tr>
 <td><code><b>showFinalSummary?:</b> boolean</code></td>
 <td>
-The boolean value to control the display of summary section. The summary will be displayed as the last transaction
+The boolean value to control the display of summary section. The summary will be displayed as the last bar
 </td>
 <td><code>true</code></td>
 </tr>
@@ -162,6 +162,19 @@ The x axis label to be shown for the summary section.
 <td><code>Summary</code></td>
 </tr>
 <tr>
+<td><code><b>onMouseEnter?:</b> function</code></td>
+<td>
+The callback function which will be triggered on mouse entering the bars in the waterfall chart. The mouse event and current bar element will be passed as the prop in the function
+</td>
+<td><code>undefined</code></td>
+<tr>
+<td><code><b>onMouseLeave?:</b> function</code></td>
+<td>
+The callback function which will be triggered on mouse leaving the bars in the waterfall chart. The mouse event and current bar element will be passed as the prop in the function
+</td>
+<td><code>undefined</code></td>
+</tr>
+<tr>
 <td><code><b>onChartClick?:</b> function</code></td>
 <td>
 The callback function which will be triggered on clicking the bars in the waterfall chart. The current bar element will be passed as the prop in the function
@@ -187,7 +200,7 @@ the below code shows all the overridable styles:
 
 ```jsx
 <WaterfallChart
- transactions={transactionsList}
+ dataPoints={dataPoints}
  showYAxisScaleLines={true}
  styles={{
   summaryBar: CSSProperties,

STYLE_GUIDELINES.md

@@ -0,0 +1,23 @@
+## SCSS Style Guidelines for @keyvaluesystems/react-waterfall-chart
+
+**Introduction**
+
+As an open-source project utilizing SCSS, @keyvaluesystems/react-waterfall-chart strives to maintain a consistent and well-structured codebase. These SCSS style guidelines serve as a reference for contributors, ensuring that their SCSS code adheres to established conventions and best practices.
+
+**SCSS Coding Conventions**
+
+- Organize SCSS files into a logical structure.
+- Use meaningful and descriptive names for variables, mixins, and classes.
+- Use SCSS nesting judiciously to organize complex styles.
+- Include comments to explain non-obvious logic and complex styles.
+- Utilize SCSS variables to define reusable values.
+- Employ a SCSS linting tool.
+- 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 for exported mixins and variables.
+- Include a README file within the SCSS directory if necessary.
+- Add comments to SCSS files.