Skip to content

Commit c82fd90

Browse files
GokulSNathGokulSNath
authored
Added README file (#3)
1 parent bb1582d commit c82fd90

File tree

6 files changed

+221
-11
lines changed

6 files changed

+221
-11
lines changed

‎.github/workflows/update-and-publish.yml‎ renamed to ‎.github/workflows/deploy.yml‎

File renamed without changes.

‎.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
src/assets/waterfall-chart-example.png

‎README.md‎

Lines changed: 210 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,211 @@
1+
12

2-
# React Waterfall Chart
3+
4+
5+
# React Waterfall Chart
6+
7+
8+
9+
<a href="https://www.npmjs.com/package/react-waterfall-chart"><img src="https://badgen.net/npm/v/react-waterfall-chart?color=blue" alt="npm version"></a> <a href="https://www.npmjs.com/package/react-waterfall-chart" ><img src="https://img.shields.io/npm/dw/react-waterfall-chart?label=Downloads" /></a> <a href="https://github.com/KeyValueSoftwareSystems/react-waterfall-chart"><img src="https://github.com/KeyValueSoftwareSystems/react-waterfall-chart/actions/workflows/deploy.yml/badge.svg" alt="" /></a>
10+
11+
12+
13+
<div align="center">
14+
<img src="src/assets/waterfall-chart-example.png" alt="" width="735" height="401"/>
15+
</div>
16+
17+
18+
19+
>A customizable & responsive Waterfall chart for react project
20+
21+
22+
23+
Try tweaking a waterfall chart using this codesandbox link <a href="https://codesandbox.io/s/waterfall-chart-example-uvr8jd">here</a>
24+
25+
26+
27+
## Installation
28+
29+
30+
31+
The easiest way to use react-waterfall-chart is to install it from npm and build it into your app with Webpack.
32+
33+
34+
35+
```bash
36+
37+
npm install @keyvaluesystems/react-waterfall-chart
38+
39+
```
40+
41+
You’ll need to install React separately since it isn't included in the package.
42+
43+
## Usage
44+
45+
React Waterfall chart can run in a very basic mode by just providing the `transactions` like given below:
46+
47+
48+
49+
```jsx
50+
51+
import WaterfallChart from '@keyvaluesystems/react-waterfall-chart';
52+
53+
<WaterfallChart
54+
transactions={transactionList}
55+
/>
56+
57+
```
58+
59+
60+
61+
The transactions prop is an array of transactions with the following keys:
62+
63+
64+
65+
- `label` - a string to represent each transaction
66+
67+
- `value` - a number that specifies the transaction quantity
68+
69+
- `color` - the color preference for each transaction. (optional)
70+
71+
An example for transactions array is shown below:
72+
73+
74+
75+
```jsx
76+
const transactionsList = [
77+
{
78+
label: 'Quarter 1, 2020',
79+
value: 1000,
80+
color: 'red'
81+
},
82+
{
83+
label: 'Quarter 2, 2020',
84+
value: -500
85+
}
86+
]
87+
```
88+
89+
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.
90+
With the help of `showBridgeLines` prop, the line connecting the adjacent bars can be shown/hidden.
91+
`showFinalSummary` can be used to display the summary as the last transaction.
92+
93+
```jsx
94+
<WaterfallChart
95+
transactions={transactionsList}
96+
barWidth={100}
97+
showBridgeLines={true}
98+
showFinalSummary={false}
99+
/>
100+
```
101+
102+
103+
104+
You can specify whether to show or hide the scale lines in the Y axis with the help of `showYAxisScaleLines` prop.
105+
106+
```jsx
107+
<WaterfallChart
108+
transactions={transactionsList}
109+
showYAxisScaleLines={true}
110+
/>
111+
```
112+
## Props
113+
114+
Props that can be passed to the component are listed below:
115+
116+
<table>
117+
<thead>
118+
<tr>
119+
<th>Prop</th>
120+
<th>Description</th>
121+
<th>Default</th>
122+
</tr>
123+
</thead>
124+
<tbody>
125+
<tr>
126+
<td><code><b>transactions:</b> object[]</code></td>
127+
<td>
128+
An array of transaction objects to specifying the value, label and color preference
129+
</td>
130+
<td><code>[]</code></td>
131+
</tr>
132+
<tr>
133+
<td><code><b>barWidth?:</b> number</code></td>
134+
<td>
135+
A number to specify the width of each bars shown in the chart
136+
</td>
137+
<td><code>true</code></td>
138+
</tr>
139+
<tr>
140+
<td><code><b>showBridgeLines?:</b> number</code></td>
141+
<td>
142+
A boolean value to specify whether to show the connecting line between adjacent bars
143+
</td>
144+
<td><code>true</code></td>
145+
</tr>
146+
<tr>
147+
<td><code><b>showYAxisScaleLines?:</b> boolean</code></td>
148+
<td>
149+
The boolean value to control the display of scale lines in y axis
150+
</td>
151+
<td><code>true</code></td>
152+
</tr>
153+
<tr>
154+
<td><code><b>yAxisPixelsPerUnit?:</b> number</code></td>
155+
<td>
156+
The distance between each y axis scale unit. The value specified will be applied as pixels.
157+
</td>
158+
<td><code>0</code></td>
159+
</tr>
160+
<tr>
161+
<td><code><b>showFinalSummary?:</b> boolean</code></td>
162+
<td>
163+
The boolean value to control the display of summary section. The summary will be displayed as the last transaction
164+
</td>
165+
<td><code>true</code></td>
166+
</tr>
167+
<tr>
168+
<td><code><b>summaryXLabel?:</b> string</code></td>
169+
<td>
170+
The x axis label to be shown for the summary section.
171+
</td>
172+
<td><code>Summary</code></td>
173+
</tr>
174+
<tr>
175+
<td><code><b>onChartClick?:</b> function</code></td>
176+
<td>
177+
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
178+
</td>
179+
<td><code>undefined</code></td>
180+
</tr>
181+
<tr>
182+
<td><code><b>styles?:</b> object</code></td>
183+
<td>
184+
Provides you with a bunch of callback functions to override the default styles.
185+
</td>
186+
<td><code>undefined</code></td>
187+
</tr>
188+
</tbody>
189+
</table>
190+
191+
192+
## Style Customizations
193+
194+
195+
All the default styles provided by this package are overridable using the `style` prop.
196+
the below code shows all the overridable styles:
197+
198+
```jsx
199+
<WaterfallChart
200+
transactions={transactionsList}
201+
showYAxisScaleLines={true}
202+
styles={{
203+
summaryBar: CSSProperties,
204+
positiveBar: CSSProperties,
205+
negativeBar: CSSProperties
206+
}}
207+
/>
208+
```
209+
- `summaryBar` - overrides the summary bar styles
210+
- `positiveBar` - overrides the positive value bar styles
211+
- `negativeBar` - overrides the negative value bar styles

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"name": "@keyvaluesystems/react-star-rating-summary",
3-
"version": "0.1.3",
4-
"description": "A ready to use rating summary component",
2+
"name": "@keyvaluesystems/react-waterfall-chart",
3+
"version": "0.0.1",
4+
"description": "A customizable and responsive svg waterfall chart component",
55
"main": "build/index.js",
66
"source": "src/index.tsx",
77
"types": "build/types/index.d.ts",

‎src/assets/waterfall-chart-example.png‎

13.5 KB
Loading

‎src/stories/Component.stories.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,31 +20,31 @@ export const WaterFallChart = Template.bind({});
2020
WaterFallChart.args = {
2121
transactions: [
2222
{
23-
label: 'Income',
23+
label: 'Revenue',
2424
value: 10
2525
},
2626
{
27-
label: 'Expense1',
27+
label: 'Interests',
2828
value: 3
2929
},
3030
{
31-
label: 'Gain1',
31+
label: 'R&D',
3232
value: -2
3333
},
3434
{
35-
label: 'Expense2',
35+
label: 'Marketing',
3636
value: -60
3737
},
3838
{
39-
label: 'Gain2',
39+
label: 'Consulting',
4040
value: 40
4141
},
4242
{
43-
label: 'Expense3',
43+
label: 'Repairs',
4444
value: -10
4545
},
4646
{
47-
label: 'Gain3',
47+
label: 'Acquisitions',
4848
value: 80
4949
}
5050
]

0 commit comments

Comments
 (0)