Merge pull request #7 from WesleyFaveri/master

Add indicator(needle)

Author: LucasMonteiro1

README.md

@@ -34,7 +34,8 @@ yarn add react-native-speedometer-chart
 | outerCircleStyle | null | object | no | |
 | halfCircleStyle | null | object | no | |
 | percentSize | 0.5 | number | no | |
-
+| showIndicator | false | bool | no | Show a needle |
+| indicatorColor | #808080 | string | no | `value` color |
 
 ## Basic Usage
 

src/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import PropTypes from 'prop-types';
-import { getStyles } from './rules';
+import { getStyles, getColorPointIndicator } from './rules';
 
-const Speedometer = ({ value, totalValue, size, outerColor, innerColor, internalColor, style, innerCircleStyle, outerCircleStyle, halfCircleStyle, showText, text, textStyle, showLabels, labelStyle, showPercent, percentStyle, percentSize }) => {
+const Speedometer = ({ value, totalValue, size, outerColor, innerColor, internalColor, style, innerCircleStyle, outerCircleStyle, halfCircleStyle, showText, text, textStyle, showLabels, labelStyle, showPercent, percentStyle, percentSize, showIndicator, indicatorColor }) => {
   const styles = getStyles(size, percentSize);
   const degreesValue = (value > totalValue) ? totalValue : value;
   const percentValue = parseInt(String((value * 100) / totalValue).split('.')[0]);
@@ -13,6 +13,10 @@ const Speedometer = ({ value, totalValue, size, outerColor, innerColor, internal
     transform: [{ translateX: size / 4 }, { rotate: `${degrees}deg` }, { translateX: (size / 4 * -1) }],
   };
 
+  const degressStyleIndicator = {
+    transform: [{ translateX: (2 + size) / 4 }, { rotate: `${((180 / 100) * degreesValue)}deg` }, { translateX: ( (2 + size) / 4 * -1) }],
+  };
+
   const percentElement = (showPercent) ? (
     <Text style={[{ backgroundColor: innerColor }, percentStyle]} numberOfLines={1}>{percentValue}%</Text>
   ) : null;
@@ -28,6 +32,12 @@ const Speedometer = ({ value, totalValue, size, outerColor, innerColor, internal
     </View>
   ) : null;
 
+  const indicadorElement = ((!showText) && (!showPercent) && (showIndicator) && (totalValue)) ? (
+    <View style={[degressStyleIndicator, styles.indicator, { width: 2 + size / 2, backgroundColor: indicatorColor }]}>
+      <View style={[styles.pointIndicator, { backgroundColor: getColorPointIndicator(indicatorColor)}]}/>
+    </View>
+  ) : null;
+
   return (
     <View style={style}>
       <View style={[styles.outerCircle, { backgroundColor: outerColor }, outerCircleStyle]}>
@@ -37,6 +47,7 @@ const Speedometer = ({ value, totalValue, size, outerColor, innerColor, internal
           {textElement}
         </View>
       </View>
+      {indicadorElement}
       {labelsElement}
     </View>
   );
@@ -64,6 +75,8 @@ Speedometer.propTypes = {
   outerCircleStyle: PropTypes.object,
   halfCircleStyle: PropTypes.object,
   percentSize: PropTypes.number,
+  showIndicator: PropTypes.bool,
+  indicatorColor: PropTypes.string,
 };
 
 Speedometer.defaultProps = {
@@ -80,6 +93,8 @@ Speedometer.defaultProps = {
   showPercent: false,
   percentStyle: {},
   percentSize: 0.5,
+  showIndicator: false,
+  indicatorColor: 'grey'
 };
 
 export default Speedometer;

src/rules.js

@@ -1,5 +1,7 @@
+import color from 'color';
+
 export const getStyles = (size, percent = 0.5) => ({
-  outerCircle: {
+  outerCircle: { 
     justifyContent: 'flex-end',
     alignItems: 'center',
     width: size,
@@ -39,4 +41,17 @@ export const getStyles = (size, percent = 0.5) => ({
   finalLabel: {
     flex: 0,
   },
+  indicator: {
+    height: 4,
+    zIndex: 1000,
+    justifyContent: 'center',
+  },
+  pointIndicator: {
+    borderRadius: 50,
+    width: 15,
+    height: 15,
+    alignSelf: 'flex-end',
+  },
 });
+
+export const getColorPointIndicator = (cor) => color(cor).darken(.2);