percent size

Author: LucasMonteiro1

README.md

@@ -33,6 +33,7 @@ yarn add react-native-speedometer-chart
 | innerCircleStyle | null | object | no | |
 | outerCircleStyle | null | object | no | |
 | halfCircleStyle | null | object | no | |
+| percentSize | 0.5 | number | no | |
 
 
 ## Basic Usage

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-speedometer-chart",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "Speedometer Chart component for React Native",
   "main": "src/index.js",
   "author": "Lucas Monteiro",

src/index.js

@@ -3,8 +3,8 @@ import { View, Text } from 'react-native';
 import PropTypes from 'prop-types';
 import { getStyles } from './rules';
 
-const Speedometer = ({ value, totalValue, size, outerColor, innerColor, internalColor, style, innerCircleStyle, outerCircleStyle, halfCircleStyle, showText, text, textStyle, showLabels, labelStyle, showPercent, percentStyle }) => {
-  const styles = getStyles(size);
+const Speedometer = ({ value, totalValue, size, outerColor, innerColor, internalColor, style, innerCircleStyle, outerCircleStyle, halfCircleStyle, showText, text, textStyle, showLabels, labelStyle, showPercent, percentStyle, percentSize }) => {
+  const styles = getStyles(size, percentSize);
   const degreesValue = (value > totalValue) ? totalValue : value;
   const percentValue = parseInt(String((value * 100) / totalValue).split('.')[0]);
   const degrees = ((degreesValue * 180) / ((totalValue === 0) ? 1 : totalValue)) - 90;
@@ -60,9 +60,10 @@ Speedometer.propTypes = {
   labelStyle: PropTypes.object,
   showPercent: PropTypes.bool,
   percentStyle: PropTypes.object,
-  innerCircleStyle: PropTypes.object, 
+  innerCircleStyle: PropTypes.object,
   outerCircleStyle: PropTypes.object,
   halfCircleStyle: PropTypes.object,
+  percentSize: PropTypes.number,
 };
 
 Speedometer.defaultProps = {
@@ -78,6 +79,7 @@ Speedometer.defaultProps = {
   labelStyle: {},
   showPercent: false,
   percentStyle: {},
+  percentSize: 0.5,
 };
 
 export default Speedometer;

src/rules.js

@@ -1,4 +1,4 @@
-export const getStyles = (size) => ({
+export const getStyles = (size, percent = 0.5) => ({
   outerCircle: {
     justifyContent: 'flex-end',
     alignItems: 'center',
@@ -13,8 +13,8 @@ export const getStyles = (size) => ({
     justifyContent: 'flex-end',
     alignItems: 'center',
     backgroundColor: '#fff',
-    width: size * 0.5,
-    height: (size / 2) * 0.5,
+    width: size * percent,
+    height: (size / 2) * percent,
     borderTopLeftRadius: size / 2,
     borderTopRightRadius: size / 2,
     paddingLeft: 3,