Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor/improve standards #13

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
# builds
/build
/dist
/coverage
.rpt2_cache

# misc
Expand Down
2 changes: 1 addition & 1 deletion CODE_OF_CONDUCT.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 opensource@hodgef.com. All
reported by contacting the project team at it.team@keyvalue.systems. 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.
Expand Down
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -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
Expand Down
76 changes: 76 additions & 0 deletions PULL_REQUEST_TEMPLATE.md
Original file line number Diff line number Diff line change
@@ -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.
33 changes: 23 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:


ReshmaJoshy marked this conversation as resolved.
Show resolved Hide resolved

Expand All @@ -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:

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this prop renaming is a breaking change, it would be better to specify it in the readme along with the migration steps. For more info refer other repos that has similar changes




- `label` - a string to represent each transaction
ReshmaJoshy marked this conversation as resolved.
Show resolved Hide resolved

- `value` - a number that specifies the transaction 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
},{
Expand All @@ -82,7 +82,7 @@ With the help of `showBridgeLines` prop, the line connecting the adjacent bars c

```jsx
<WaterfallChart
transactions={transactionsList}
dataPoints={dataPoints}
barWidth={100}
showBridgeLines={true}
showFinalSummary={false}
Expand All @@ -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}
/>
```
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -187,7 +200,7 @@ the below code shows all the overridable styles:

```jsx
<WaterfallChart
transactions={transactionsList}
dataPoints={dataPoints}
showYAxisScaleLines={true}
styles={{
summaryBar: CSSProperties,
Expand Down
23 changes: 23 additions & 0 deletions STYLE_GUIDELINES.md
Original file line number Diff line number Diff line change
@@ -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.
Loading
Loading