archive-gh-me/react-circular-progressbar
1
0
Fork 0
mirror of https://github.com/kevinsqi/react-circular-progressbar.git synced 2026-01-25 16:03:15 +00:00
Code Issues Projects Releases Wiki Activity

rename backgroundPadding, add docs, and reformat demo page

Browse Source
This commit is contained in:
Kevin Qi 2017-10-13 22:09:40 -07:00
parent d24cbe5a81
commit f717fefae9
3 changed files with 19 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -36,8 +36,9 @@ import CircularProgressbar from 'react-circular-progressbar';
| Name | Description |
| ---- | ----------- |
| `percentage` | Numeric percentage to display, from 0-100. Required. |
| `strokeWidth` | Width of circular line. Default: `8`. |
| `className` | Classes to apply to the svg element |
| `strokeWidth` | Width of circular line as a percentage relative to total width of component. Default: `8`. |
| `backgroundPadding` | Padding between background and edge of svg as a percentage relative to total width of component. Default: `0`. |
| `initialAnimation` | Toggle whether to animate progress starting from 0% on initial mount. Default: `false`. |
| `classForPercentage` | Function which returns an additional class to apply to top-level svg element, which can be used for coloring/styling percentage ranges differently. Example: `(percent) => percent < 100 ? 'incomplete' : 'complete'`. |
| `textForPercentage` | Function which returns text to display, can be configured based on percentage. Example: ``(pct) => `${pct}%` ``. |

75
docs/demo.jsx
View File

@ -6,20 +6,6 @@ console.log(`react-circular-progressbar v${COMPONENT_VERSION}`);
const githubURL = 'https://github.com/iqnivek/react-circular-progressbar';
const Config = ({ name, example, description, children }) => (
<div className="row mb-3">
<div className="col-xs-12 col-md-6 offset-md-3">
<p><code>{name}</code><small className="text-muted ml-1">{example ? `e.g. ${example}` : null}</small></p>
<p>{description}</p>
<div className="row">
<div className="col-xs-4 offset-xs-4">
{children}
</div>
</div>
</div>
</div>
);
const Example = ({ description, children }) => (
<div className="col-xs-12 col-sm-4">
<div className="row mb-1">
@ -60,7 +46,7 @@ class Demo extends React.Component {
render() {
return (
<div className="container">
<div className="row my-3">
<div className="row mt-3">
<div className="col-xs-12">
<div className="text-xs-center">
<h1 className="mb-2">{COMPONENT_NAME}</h1>
@ -69,7 +55,7 @@ class Demo extends React.Component {
</div>
</div>
<div className="row mb-3">
<div className="row mt-3">
<div className="col-xs-6 offset-xs-3 col-md-2 offset-md-5">
<ChangingProgressbar
percentages={[0, 20, 40, 60, 80, 100]}
@ -77,16 +63,12 @@ class Demo extends React.Component {
</div>
</div>
<div className="text-xs-center my-3">
<p>Install with npm:</p>
<p className="mb-3"><code>npm install {COMPONENT_NAME}</code></p>
<a className="btn btn-info btn-lg" href={githubURL}>View project on Github</a>
</div>
<hr />
<div className="row mt-3">
<h2 className="text-xs-center mb-3">Styled with plain CSS.</h2>
<Example
description="Configure color/styling based on percentage using plain old CSS classes."
description="Change color/styling based on percentage."
>
<ChangingProgressbar
percentages={[75, 100]}
@ -107,11 +89,11 @@ class Demo extends React.Component {
</Example>
<Example
description="Add a background color."
description="Add a background color for that inverted look."
>
<CircularProgressbar
className="background"
backgroundGutter={4}
backgroundPadding={4}
strokeWidth={6}
percentage={33}
/>
@ -119,42 +101,13 @@ class Demo extends React.Component {
</div>
<hr />
<h2 className="text-xs-center my-3">Props</h2>
<Config
name="percentage"
example="44"
description="Percentage to display."
/>
<Config
name="strokeWidth"
example="10"
description="Width of circular line"
/>
<Config
name="className"
example="'your-css-class'"
description="Classes to apply to the svg element"
/>
<Config
name="initialAnimation"
example="false"
description="Toggle whether to animate progress starting from 0% on initial mount."
/>
<Config
name="classForPercentage"
example="(pct) => pct < 100 ? 'incomplete' : 'complete'"
description="Function which can set an additional class to apply to top-level element, which can be used for coloring/styling percentage ranges differently."
/>
<Config
name="textForPercentage"
example="(pct) => `${pct}%`"
description="Function which sets text formatting given a percentage."
/>
<hr />
<div className="text-xs-center my-3">
<a className="btn btn-info btn-lg" href={githubURL}>View project on Github</a>
<div className="row mt-3 mb-3">
<h2 className="text-xs-center">Installation</h2>
<div className="text-xs-center mt-3">
<p>Install with npm:</p>
<p className="mb-3"><code>npm install {COMPONENT_NAME}</code></p>
<a className="btn btn-info btn-lg" href={githubURL}>View docs on Github</a>
</div>
</div>
</div>
);

6
src/index.jsx
View File

@ -58,7 +58,7 @@ class CircularProgressbar extends React.Component {
getPathRadius() {
// the radius of the path is defined to be in the middle, so in order for the path to
// fit perfectly inside the 100x100 viewBox, need to subtract half the strokeWidth
return 50 - (this.props.strokeWidth / 2) - this.props.backgroundGutter;
return 50 - (this.props.strokeWidth / 2) - this.props.backgroundPadding;
}
render() {
@ -108,7 +108,7 @@ CircularProgressbar.propTypes = {
percentage: PropTypes.number.isRequired,
strokeWidth: PropTypes.number,
className: PropTypes.string,
backgroundGutter: PropTypes.number,
backgroundPadding: PropTypes.number,
initialAnimation: PropTypes.bool,
classForPercentage: PropTypes.func,
textForPercentage: PropTypes.func,
@ -117,7 +117,7 @@ CircularProgressbar.propTypes = {
CircularProgressbar.defaultProps = {
strokeWidth: 8,
className: '',
backgroundGutter: 0,
backgroundPadding: 0,
initialAnimation: false,
textForPercentage: (percentage) => `${percentage}%`,
};