Customização do indicador

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
+    <Speedometer
+        value={100}
+        totalValue={150}
+        showIndicator
+        indicatorValue={80}
+    />
+
+    <Speedometer
+        value={100}
+        totalValue={150}
+        showIndicator
+        indicatorValue={130}
+    />
+```
+![](docs/image7.png?raw=true "Needle indicator 80 130")
+
 ## License
 MIT

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) ? (
     <Text style={[styles.percentText, percentStyle]} numberOfLines={1}>{percentValue}%</Text>
@@ -36,7 +42,7 @@ const Speedometer = (props) => {
   return (
     <View style={[styles.content, style]}>
       <View style={[styles.outerCircle, outerCircleStyle]}>
-        <View style={[styles.halfCircle, halfCircleStyle]}/>
+        <View style={[styles.halfCircle, halfCircleStyle]} />
         <View style={[styles.innerCircle, innerCircleStyle]}>
           {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;

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',