diff --git a/README.md b/README.md index dc67512..a0de01a 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,7 @@ You can try out the [Speedometer Chart Example | percentSize | 0.5 | number | no | | | showIndicator | false | bool | no | Show a needle | | indicatorColor | #808080 | string | no | `value` color | +| indicatorValue | undefined | number | no | Show a needle in diferrent position | ## Basic Usage @@ -104,5 +105,22 @@ export default class Main extends Component { ``` ![](docs/image6.png?raw=true "Needle indicator") +```javascript + + + +``` +![](docs/image7.png?raw=true "Needle indicator 80 130") + ## License MIT diff --git a/docs/image7.png b/docs/image7.png new file mode 100644 index 0000000..e2a675d Binary files /dev/null and b/docs/image7.png differ diff --git a/src/index.js b/src/index.js index ca7ca98..b70aec3 100644 --- a/src/index.js +++ b/src/index.js @@ -4,13 +4,19 @@ import PropTypes from 'prop-types'; import { getStyles } from './rules'; const Speedometer = (props) => { - const { value, totalValue, style, innerCircleStyle, outerCircleStyle, halfCircleStyle, showText, text, textStyle, showLabels, labelStyle, labelTextStyle, labelFormatter, showPercent, percentStyle, showIndicator } = props; + const { value, totalValue, style, innerCircleStyle, outerCircleStyle, halfCircleStyle, showText, text, textStyle, showLabels, labelStyle, labelTextStyle, labelFormatter, showPercent, percentStyle, showIndicator, indicatorValue } = props; const percentValue = parseInt(String((value * 100) / totalValue).split('.')[0]); const degreesValue = (value > totalValue) ? totalValue : value; const degrees = ((degreesValue * 180) / ((totalValue === 0) ? 1 : totalValue)) - 90; - const styles = getStyles(props, degrees, degreesValue); + const degressIndicatorValue = (indicatorValue > totalValue) ? totalValue : indicatorValue; + const degressIndicator = + (showIndicator && indicatorValue) ? + ((degressIndicatorValue * 180) / ((totalValue === 0) ? 1 : totalValue)) - 90 + : degrees; + + const styles = getStyles(props, degrees, degreesValue, degressIndicator); const percentElement = (showPercent) ? ( {percentValue}% @@ -36,7 +42,7 @@ const Speedometer = (props) => { return ( - + {percentElement} {textElement} @@ -98,6 +104,7 @@ Speedometer.propTypes = { percentSize: PropTypes.number, showIndicator: PropTypes.bool, indicatorColor: PropTypes.string, + indicatorValue: PropTypes.number, }; Speedometer.defaultProps = { @@ -120,7 +127,8 @@ Speedometer.defaultProps = { halfCircleStyle: {}, percentSize: 0.5, showIndicator: false, - indicatorColor: 'grey' + indicatorColor: 'grey', + indicatorValue: undefined }; export default Speedometer; diff --git a/src/rules.js b/src/rules.js index 8f0b9fa..3351c07 100644 --- a/src/rules.js +++ b/src/rules.js @@ -1,6 +1,6 @@ import color from 'color'; -export const getStyles = ({ size, percentSize, internalColor, innerColor, outerColor, indicatorColor, showIndicator }, degrees, degreesValue) => ({ +export const getStyles = ({ size, percentSize, internalColor, innerColor, outerColor, indicatorColor, showIndicator }, degrees, degreesValue, degressIndicator) => ({ outerCircle: { justifyContent: 'flex-end', alignItems: 'center', @@ -50,7 +50,7 @@ export const getStyles = ({ size, percentSize, internalColor, innerColor, outerC height: 4, zIndex: 1000, justifyContent: 'center', - transform: [{ translateX: size / 4 }, { rotate: `${(degrees + 90)}deg` }, { translateX: (size / 4 * -1) }], + transform: [{ translateX: size / 4 }, { rotate: `${(degressIndicator + 90)}deg` }, { translateX: (size / 4 * -1) }], width: size / 2, backgroundColor: indicatorColor, position: 'absolute',