Skip to content

Commit

Permalink
feat: Code quality refinement, prop rename and additional style custo…
Browse files Browse the repository at this point in the history
…mization support (#12)
  • Loading branch information
manacy-keyvalue authored Nov 28, 2023
1 parent 16764f3 commit 492bcac
Show file tree
Hide file tree
Showing 35 changed files with 416 additions and 2,209 deletions.
18 changes: 7 additions & 11 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
}
}
28 changes: 14 additions & 14 deletions CODE_OF_CONDUCT.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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.
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-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.
113 changes: 91 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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:
Expand All @@ -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>
Expand Down Expand Up @@ -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.
19 changes: 19 additions & 0 deletions STYLE_GUIDELINES.md
Original file line number Diff line number Diff line change
@@ -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.
Loading

0 comments on commit 492bcac

Please sign in to comment.