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 {
```

+```javascript
+
+
+
+```
+
+
## 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',