Skip to content

Commit

Permalink
readme update (#85)
Browse files Browse the repository at this point in the history 
* readme update

* update proptypes too
  • Loading branch information
@rkyle35242
rkyle35242 authored May 2, 2024
1 parent 4f1e772 commit 9ff40ce
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 21 deletions.
67 changes: 47 additions & 20 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,28 +108,55 @@ export default App;

Try this example yourself [here](./example).

### Custom segment sizing

If you would like to adjust the sizing of the segments individually, just provide the `arcDegreeScale` property on segments whose size you'd like to control. Segments without an `arcDegreeScale` will be equally sized for the remainder of the arc.

```js
const segments = [
{
arcDegreeScale: 0.5, // will take up half the entire arc
filledColor: '#FF746E',
emptyColor: '#F2F3F5'
},
{
filledColor: '#F5E478', // each of these segments will use a third of the remainder of the arc, or 1/6 of the total since the segment above is using 50%
emptyColor: '#F2F3F5'
},
{
filledColor: '#78F5CA',
emptyColor: '#F2F3F5'
},
{
filledColor: '#6E73FF',
emptyColor: '#F2F3F5'
}
];
```

# 📖 Props

| Name | Type | Default | Description |
| --------------------------- | --------------------------------------------------------------------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| fillValue | number (0-100) | 0 | Current progress value |
| segments | Array of { scale: number, filledColor: string, emptyColor: string, data: object } | [] | Segments of the arc. Here, scale is a percentage value out of 100%, filledColor for filled part of a segment, and emptyColor is background color for an empty segment, data could be any object that you'd want to receive back for a segment. See example above. |
| filledArcWidth | number | 8 | Thickness of progress line |
| emptyArcWidth | number | 8 | Thickness of background line |
| spaceBetweenSegments | number | 2 | Space between segments |
| arcDegree | number | 180 | Degree of arc |
| radius | number | 100 | Arc radius |
| isAnimated | bool | true | Enable/disable progress animation |
| animationDuration | number | 1000 | Progress animation duration |
| animationDelay | number | 0 | Progress animation delay |
| ranges | Array of strings | [] | Arc ranges (segments) display values |
| rangesTextColor | string | '#000000' | Color of ranges text |
| rangesTextStyle | object | { fontSize: 12 } | Ranges text styling |
| showArcRanges | bool | false | Show/hide arc ranges |
| middleContentContainerStyle | object | {} | Extra styling for the middle content container |
| capInnerColor | string | '#28E037' | Cap's inner color |
| capOuterColor | string | '#FFFFFF' | Cap's outer color |
| children | function | | Pass a function as a child. It receives metaData with the last filled segment's data as an argument. From there you can extract data object. See example above. |
| Name | Type | Default | Description |
| --------------------------- | --------------------------------------------------------------------------------------------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| fillValue | number (0-100) | 0 | Current progress value |
| segments | Array of { scale: number, filledColor: string, emptyColor: string, data: object, arcDegreeScale: number } | [] | Segments of the arc. Here, scale is a percentage value out of 100%, filledColor for filled part of a segment, emptyColor is background color for an empty segment, data could be any object that you'd want to receive back for a segment, and arcDegreeScale is used to resize each segment. See examples above. |
| filledArcWidth | number | 8 | Thickness of progress line |
| emptyArcWidth | number | 8 | Thickness of background line |
| spaceBetweenSegments | number | 2 | Space between segments |
| arcDegree | number | 180 | Degree of arc |
| radius | number | 100 | Arc radius |
| isAnimated | bool | true | Enable/disable progress animation |
| animationDuration | number | 1000 | Progress animation duration |
| animationDelay | number | 0 | Progress animation delay |
| ranges | Array of strings | [] | Arc ranges (segments) display values |
| rangesTextColor | string | '#000000' | Color of ranges text |
| rangesTextStyle | object | { fontSize: 12 } | Ranges text styling |
| showArcRanges | bool | false | Show/hide arc ranges |
| middleContentContainerStyle | object | {} | Extra styling for the middle content container |
| capInnerColor | string | '#28E037' | Cap's inner color |
| capOuterColor | string | '#FFFFFF' | Cap's outer color |
| arcStartDegree | number | 0 | Starting point of the arc. Example: A SegmentedArc with an arcStartDegree of 90 will begin drawing the segments at 12 o'clock |
| children | function | | Pass a function as a child. It receives metaData with the last filled segment's data as an argument. From there you can extract data object. See example above. |
| |

## 📋 Attributions
Expand Down
3 changes: 2 additions & 1 deletion src/SegmentedArc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,8 @@ SegmentedArc.propTypes = {
scale: PropTypes.number,
filledColor: PropTypes.string.isRequired,
emptyColor: PropTypes.string.isRequired,
data: PropTypes.object
data: PropTypes.object,
arcDegreeScale: PropTypes.number
})
).isRequired,
filledArcWidth: PropTypes.number,
Expand Down

0 comments on commit 9ff40ce

Please sign in to comment.