Skip to content

Commit 0ec2924

Browse files
NikhinrajkkNikhinrajkk
committed
Initial commit
0 parents  commit 0ec2924

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+74684
-0
lines changed

‎.eslintrc‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"ignorePatterns": ["**/*.d.ts", "node_modules/", "src/stories", "src/tests", "webpack.config.js"],
3+
"extends": [
4+
"eslint:recommended",
5+
"plugin:@typescript-eslint/recommended",
6+
"plugin:react/recommended",
7+
"plugin:react-hooks/recommended"
8+
],
9+
"parser": "@typescript-eslint/parser",
10+
"parserOptions": {
11+
"ecmaFeatures": {
12+
"jsx": true
13+
},
14+
"project": "./tsconfig.json"
15+
},
16+
"plugins": [
17+
"@typescript-eslint",
18+
"react",
19+
"react-hooks"
20+
],
21+
"rules": {
22+
"no-console": "warn",
23+
"@typescript-eslint/explicit-function-return-type": "error",
24+
"react/prop-types": "warn",
25+
"indent": ["error", 2],
26+
"arrow-body-style": ["error", "as-needed"],
27+
"no-trailing-spaces":"error",
28+
"comma-dangle":"error",
29+
"default-case":"error",
30+
"block-spacing": "error",
31+
"max-len":["warn", 150],
32+
"space-before-blocks":"error"
33+
},
34+
"settings": {
35+
"react": {
36+
"version": "^18.0.2"
37+
}
38+
}
39+
}

‎.gitignore‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
# See https://help.github.com/ignore-files/ for more about ignoring files.
3+
4+
# dependencies
5+
/node_modules
6+
7+
# builds
8+
/build
9+
/dist
10+
.rpt2_cache
11+
12+
# misc
13+
.DS_Store
14+
.env
15+
.env.local
16+
.env.development.local
17+
.env.test.local
18+
.env.production.local
19+
20+
npm-debug.log*
21+
yarn-debug.log*
22+
yarn-error.log*

‎.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
legacy-peer-deps=true

‎.prettierrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"singleQuote": true,
3+
"jsxSingleQuote": true,
4+
"semi": true,
5+
"tabWidth": 2,
6+
"printWidth": 120,
7+
"bracketSpacing": true,
8+
"bracketSameLine": false,
9+
"arrowParens": "always",
10+
"trailingComma": "none"
11+
}

‎.storybook/main.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const path = require('path');
2+
module.exports = {
3+
"stories": [
4+
"../src/**/*.stories.mdx",
5+
"../src/**/*.stories.@(js|jsx|ts|tsx)"
6+
],
7+
"addons": [
8+
"@storybook/addon-links",
9+
"@storybook/addon-essentials",
10+
"@storybook/addon-interactions"
11+
],
12+
"framework": "@storybook/react",
13+
"core": {
14+
"builder": "@storybook/builder-webpack5"
15+
},
16+
"webpackFinal": async (config) => {
17+
config.module.rules.push({
18+
rules: [{
19+
test: /\.scss$/,
20+
use: ['style-loader', 'css-loader', 'sass-loader'],
21+
include: path.resolve(__dirname, '../')
22+
}]
23+
});
24+
return config;
25+
}
26+
}

‎.storybook/preview.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// import './main.css';
2+
export const parameters = {
3+
actions: { argTypesRegex: "^on[A-Z].*" },
4+
controls: {
5+
matchers: {
6+
color: /(background|color)$/i,
7+
date: /Date$/,
8+
},
9+
},
10+
}

‎CODE_OF_CONDUCT.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
# Contributor Covenant Code of Conduct
2+
3+
## Our Pledge
4+
5+
In the interest of fostering an open and welcoming environment, we as
6+
contributors and maintainers pledge to making participation in our project and
7+
our community a harassment-free experience for everyone, regardless of age, body
8+
size, disability, ethnicity, sex characteristics, gender identity and expression,
9+
level of experience, education, socio-economic status, nationality, personal
10+
appearance, race, religion, or sexual identity and orientation.
11+
12+
## Our Standards
13+
14+
Examples of behavior that contributes to creating a positive environment
15+
include:
16+
17+
* Using welcoming and inclusive language
18+
* Being respectful of differing viewpoints and experiences
19+
* Gracefully accepting constructive criticism
20+
* Focusing on what is best for the community
21+
* Showing empathy towards other community members
22+
23+
Examples of unacceptable behavior by participants include:
24+
25+
* The use of sexualized language or imagery and unwelcome sexual attention or
26+
advances
27+
* Trolling, insulting/derogatory comments, and personal or political attacks
28+
* Public or private harassment
29+
* Publishing others' private information, such as a physical or electronic
30+
address, without explicit permission
31+
* Other conduct which could reasonably be considered inappropriate in a
32+
professional setting
33+
34+
## Our Responsibilities
35+
36+
Project maintainers are responsible for clarifying the standards of acceptable
37+
behavior and are expected to take appropriate and fair corrective action in
38+
response to any instances of unacceptable behavior.
39+
40+
Project maintainers have the right and responsibility to remove, edit, or
41+
reject comments, commits, code, wiki edits, issues, and other contributions
42+
that are not aligned to this Code of Conduct, or to ban temporarily or
43+
permanently any contributor for other behaviors that they deem inappropriate,
44+
threatening, offensive, or harmful.
45+
46+
## Scope
47+
48+
This Code of Conduct applies both within project spaces and in public spaces
49+
when an individual is representing the project or its community. Examples of
50+
representing a project or community include using an official project e-mail
51+
address, posting via an official social media account, or acting as an appointed
52+
representative at an online or offline event. Representation of a project may be
53+
further defined and clarified by project maintainers.
54+
55+
## Enforcement
56+
57+
Instances of abusive, harassing, or otherwise unacceptable behavior may be
58+
reported by contacting the project team at [email protected]. All
59+
complaints will be reviewed and investigated and will result in a response that
60+
is deemed necessary and appropriate to the circumstances. The project team is
61+
obligated to maintain confidentiality with regard to the reporter of an incident.
62+
Further details of specific enforcement policies may be posted separately.
63+
64+
Project maintainers who do not follow or enforce the Code of Conduct in good
65+
faith may face temporary or permanent repercussions as determined by other
66+
members of the project's leadership.
67+
68+
## Attribution
69+
70+
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71+
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72+
73+
[homepage]: https://www.contributor-covenant.org
74+
75+
For answers to common questions about this code of conduct, see
76+
https://www.contributor-covenant.org/faq

‎CONTRIBUTING.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Contributing
2+
3+
When contributing to this repository, please first discuss the change you wish to make via issue,
4+
email, or any other method with the owners of this repository before working on a change.
5+
6+
Please note we have a code of conduct, please follow it in all your interactions with the project.
7+
8+
## Pull Request Guidelines
9+
10+
1. Please ensure your proposal will not radically change current functionality or bring along breaking changes.
11+
2. PRs only consisting of typo fixes (or other automated contributions), will not be accepted.
12+
3. Do not add any dependencies to the project.
13+
4. Document your changes thoroughly.
14+
5. Ensure coverage is complete (`npm run coverage` should show 100% coverage) and that none of the tests fail.
15+
6. Be reactive to any comments, reviews or change requests entered in your pull request.

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 Francisco Hodge
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
2+
# React Scatter graph
3+
<a href="https://www.npmjs.com/package/react-vertical-stepper"><img src="https://badgen.net/npm/v/react-vertical-stepper?color=blue" alt="npm version"></a> <a href="https://www.npmjs.com/package/react-vertical-stepper" ><img src="https://img.shields.io/npm/dw/react-vertical-stepper?label=Downloads" /></a> <a href="https://github.com/KeyValueSoftwareSystems/react-vertical-stepper"><img src="https://github.com/KeyValueSoftwareSystems/react-vertical-stepper/actions/workflows/update-and-publish.yml/badge.svg" alt="" /></a>
4+
5+
<div align="center">
6+
<img src="./src/assets/vertical-stepper-example.png" alt="" width="269" height="416"/>
7+
</div>
8+
9+
A fully customizable ready to use scatter graph UI package for React.
10+
Try tweaking a vertical stepper using this codesandbox link <a href="https://codesandbox.io/s/vertical-stepper-demo-x24q7u" >here</a>
11+
12+
## Installation
13+
14+
```bash
15+
npm install @keyvaluesystems/react-scatter-graph
16+
```
17+
18+
You’ll need to install React separately since it isn't included in the package.
19+
20+
## Usage
21+
22+
React Scatter Graph can run in a very basic mode like this:
23+
24+
```jsx
25+
import React, { useState } from 'react';
26+
import ReactScatterGraph from '@keyvaluesystems/react-scatter-graph';
27+
28+
function App() {
29+
data = [
30+
{ x: 450, y: 150 },
31+
{ x: 360, y: 330 },
32+
{ x: 650, y: 315 },
33+
{ x: 270, y: 200}
34+
];
35+
36+
return (
37+
<ScatterGraph
38+
data={data}
39+
yMax={500}
40+
xMax={600}
41+
yInterval={50}
42+
xInterval={50}
43+
graphHeight={500}
44+
/>
45+
);
46+
}
47+
48+
export default App;
49+
```
50+
The `data` array is an array of objects with { x, y } cordinates.
51+
52+
>Note: The graph width is resposive. So the it can be adjusted by paraent wrapper. Need to provide the height.
53+
54+
## Props
55+
56+
Props that can be passed to the component are listed below:
57+
58+
<table>
59+
<thead>
60+
<tr>
61+
<th>Prop</th>
62+
<th>Description</th>
63+
<th>Default</th>
64+
</tr>
65+
</thead>
66+
<tbody>
67+
<tr>
68+
<td><code><b>data:</b> object[]</code></td>
69+
<td>An array of x-y cordinates to render.</td>
70+
<td><code>undefined</code></td>
71+
</tr>
72+
<tr>
73+
<td><code><b>yMin?:</b> number</code></td>
74+
<td>Minimum value of Y - axis.</td>
75+
<td><code>0</code></td>
76+
</tr>
77+
<tr>
78+
<td><code><b>yMax:</b> number</code></td>
79+
<td>Maximum value of Y - axis.</td>
80+
<td><code>undefuned</code></td>
81+
</tr>
82+
<tr>
83+
<td><code><b>xMin?:</b> number</code></td>
84+
<td>Minimum value of X - axis.</td>
85+
<td><code>0</code></td>
86+
</tr>
87+
<tr>
88+
<td><code><b>xMax:</b> number</code></td>
89+
<td>Maximum value of X - axis.</td>
90+
<td><code>undefuned</code></td>
91+
</tr>
92+
<tr>
93+
<td><code><b>xInterval:</b> number</code></td>
94+
<td>Interval value X - axis.</td>
95+
<td><code>undefuned</code></td>
96+
</tr>
97+
<tr>
98+
<td><code><b>yInterval:</b> number</code></td>
99+
<td>Interval value Y - axis.</td>
100+
<td><code>undefuned</code></td>
101+
</tr>
102+
<tr>
103+
<td><code><b>graphHeight:</b> number</code></td>
104+
<td>Height of graph in pixel</td>
105+
<td><code>undefuned</code></td>
106+
</tr>
107+
<tr>
108+
<td><code><b>renderYLabel?:</b> (arg: number | string): string</code></td>
109+
<td>
110+
Render function for customizing Y axis label
111+
</td>
112+
<td><code>undefined</code></td>
113+
</tr>
114+
<tr>
115+
<td><code><b>renderXLabel?:</b> (arg: number | string): string</code></td>
116+
<td>
117+
Render function for customizing X axis label
118+
</td>
119+
<td><code>undefined</code></td>
120+
</tr>
121+
<tr>
122+
<td><code><b>scatterPointColor?:</b> (arg: { x: number, y: number }): string</code></td>
123+
<td>
124+
Function for customizing scatter point color. Based on the args, we can customise the color. Return value should be the color hash / string.
125+
</td>
126+
<td><code>undefined</code></td>
127+
</tr>
128+
</tbody>
129+
</table>

0 commit comments

Comments
 (0)