From 337e4d55e65966fc120fc349f4f74d8088e85945 Mon Sep 17 00:00:00 2001 From: Abhinandan Kushwaha Date: Thu, 12 Aug 2021 20:02:44 +0530 Subject: [PATCH] Added sideWidth, centralLabel and roundToDigits props --- App.js | 222 ++++++++++---- docs/BarChart/BarChartProps.md | 59 ++-- docs/LineChart/LineChartProps.md | 57 ++-- docs/PieChart/PieChartProps.md | 1 + examples/BarChart/BarThreeD.js | 61 ++++ examples/BarChart/BarWithGradient.js | 32 ++ examples/BarChart/CappedBars.js | 28 ++ examples/BarChart/RoundStackBar.js | 53 ++++ examples/BarChart/SimpleBarAnimated.js | 27 ++ examples/BarChart/SimpleBlueBars.js | 2 - examples/LineChart/SimpleBlueLine.js | 36 +++ examples/PieChart/SimplePie.js | 27 ++ src/BarChart/RenderBars.tsx | 120 ++++---- src/BarChart/RenderStackBars.tsx | 404 ++++++++++++------------- src/BarChart/index.tsx | 33 +- src/Components/AnimatedBar/index.tsx | 68 +++-- src/Components/ThreeDBar/index.tsx | 79 ++--- src/LineChart/index.tsx | 27 +- src/LineChart/styles.tsx | 1 - src/PieChart/index.tsx | 25 +- 20 files changed, 902 insertions(+), 460 deletions(-) create mode 100644 examples/BarChart/BarThreeD.js create mode 100644 examples/BarChart/BarWithGradient.js create mode 100644 examples/BarChart/CappedBars.js create mode 100644 examples/BarChart/RoundStackBar.js create mode 100644 examples/BarChart/SimpleBarAnimated.js create mode 100644 examples/LineChart/SimpleBlueLine.js create mode 100644 examples/PieChart/SimplePie.js diff --git a/App.js b/App.js index 74cf084..15940ce 100644 --- a/App.js +++ b/App.js @@ -1,6 +1,6 @@ import React from 'react'; -import { View, StyleSheet } from 'react-native'; -import { BarChart, LineChart, PieChart } from './src'; +import {View, Text, StyleSheet} from 'react-native'; +import {BarChart, LineChart, PieChart} from './src'; const App = () => { // const lineData = [ @@ -19,73 +19,174 @@ const App = () => { // ]; const data = [ - { value: 15, label: 'Jan', showVerticalLine: true }, - { value: 40, label: 'Feb', verticalLineColor: 'red', showVerticalLine: true, verticalLineThickness: StyleSheet.hairlineWidth }, - { value: 10, label: 'Mar', showDataPoint: true, dataPointShape: 'rectangular', dataPointHeight: 20, dataPointWidth: 20, }, - { value: 30, label: 'Apr', showVerticalLine: true, showDataPoint: true }, + {value: 15, label: 'Jan', showVerticalLine: true}, + { + value: 40, + label: 'Feb', + verticalLineColor: 'red', + showVerticalLine: true, + verticalLineThickness: StyleSheet.hairlineWidth, + }, + { + value: 10, + label: 'Mar', + showDataPoint: true, + dataPointShape: 'rectangular', + dataPointHeight: 20, + dataPointWidth: 20, + }, + {value: 30, label: 'Apr', showVerticalLine: true, showDataPoint: true}, ]; const stackData = [ { - stacks: - [{ - value: 10, color: 'red' - }, - { - value: 20, color: 'blue', marginBottom: 1 - }], - label: 'Jan' + stacks: [ + {value: 10, color: 'orange'}, + {value: 20, color: '#4ABFF4', marginBottom: 2}, + ], + label: 'Jan', }, { - stacks: - [{ - value: 14, color: 'red' - }, - { - value: 18, color: 'blue', marginBottom: 1 - }], - label: 'Feb' + stacks: [ + {value: 10, color: '#4ABFF4'}, + {value: 11, color: 'orange', marginBottom: 2}, + {value: 15, color: '#28B2B3', marginBottom: 2}, + ], + label: 'Mar', }, { - stacks: - [{ - value: 7, color: 'red' - }, - { value: 11, color: 'green', marginBottom: 1 }, - { - value: 10, color: 'blue', marginBottom: 1 - }], - label: 'Mar' - } + stacks: [ + {value: 14, color: 'orange'}, + {value: 18, color: '#4ABFF4', marginBottom: 2}, + ], + label: 'Feb', + }, + { + stacks: [ + {value: 7, color: '#4ABFF4'}, + {value: 11, color: 'orange', marginBottom: 2}, + {value: 10, color: '#28B2B3', marginBottom: 2}, + ], + label: 'Mar', + }, ]; + // const barData1 = [ + // {value: 250, label: 'M'}, + // {value: 500, label: 'T', frontColor: '#177AD5'}, + // {value: 745, label: 'W', frontColor: '#177AD5'}, + // {value: 320, label: 'T'}, + // {value: 600, label: 'F', frontColor: '#177AD5'}, + // {value: 256, label: 'S'}, + // {value: 300, label: 'S'}, + // ]; + + // const lineData1 = [ + // {value: 0}, + // {value: 20}, + // {value: 18}, + // {value: 40}, + // {value: 36}, + // {value: 60}, + // {value: 54}, + // {value: 85}, + // ]; + + // const MyComponent = () => { + // return ( + // + // Hello + // + // ); + // }; + + const barData = [ + {value: 230, label: 'Jan', frontColor: '#4ABFF4'}, + {value: 180, label: 'Feb', frontColor: '#79C3DB'}, + {value: 195, label: 'Mar', frontColor: '#28B2B3'}, + {value: 250, label: 'Apr', frontColor: '#4ADDBA'}, + {value: 320, label: 'May', frontColor: '#91E3E3'}, + ]; return ( - - - {/* + {/* */} + + + {/* */} + + {/* */} + {/* + + */} + + {/* + */} + /> + */} - - {/* { data={data} /> */} + {/* { barBorderRadius={20} stackData={stackData} /> + */} - - {/* Hello */} - + {/* Hello */} {/* */} {/* { + const barData = [ + { + value: 230, + label: 'Jan', + frontColor: '#4ABFF4', + sideColor: '#23A7F3', + topColor: '#92e6f6', + }, + { + value: 180, + label: 'Feb', + frontColor: '#79C3DB', + sideColor: '#68BCD7', + topColor: '#9FD4E5', + }, + { + value: 195, + label: 'Mar', + frontColor: '#28B2B3', + sideColor: '#0FAAAB', + topColor: '#66C9C9', + }, + { + value: 250, + label: 'Apr', + frontColor: '#4ADDBA', + sideColor: '#36D9B2', + topColor: '#7DE7CE', + }, + { + value: 320, + label: 'May', + frontColor: '#91E3E3', + sideColor: '#85E0E0', + topColor: '#B0EAEB', + }, + ]; + return ( + + + + ); +}; + +export default BarWithGradient; diff --git a/examples/BarChart/BarWithGradient.js b/examples/BarChart/BarWithGradient.js new file mode 100644 index 0000000..3bdd9fb --- /dev/null +++ b/examples/BarChart/BarWithGradient.js @@ -0,0 +1,32 @@ +import React from 'react'; +import {View} from 'react-native'; +import {BarChart} from '../../src/BarChart'; + +const BarWithGradient = () => { + const barData = [ + {value: 0.7, label: '1'}, + {value: 0.8, label: '2'}, + {value: 0.6, label: '3'}, + {value: 0.4, label: '4'}, + {value: 0.9, label: '5'}, + {value: 0.7, label: '6'}, + ]; + return ( + + + + ); +}; + +export default BarWithGradient; diff --git a/examples/BarChart/CappedBars.js b/examples/BarChart/CappedBars.js new file mode 100644 index 0000000..38ebb9c --- /dev/null +++ b/examples/BarChart/CappedBars.js @@ -0,0 +1,28 @@ +import React from 'react'; +import {View} from 'react-native'; +import {BarChart} from '../../src/BarChart'; + +const CappedBars = () => { + const data = [ + {value: 15, label: 'Jan'}, + {value: 40, label: 'Feb'}, + {value: 10, label: 'Mar'}, + {value: 30, label: 'Apr'}, + ]; + return ( + + + + ); +}; + +export default CappedBars; diff --git a/examples/BarChart/RoundStackBar.js b/examples/BarChart/RoundStackBar.js new file mode 100644 index 0000000..38de825 --- /dev/null +++ b/examples/BarChart/RoundStackBar.js @@ -0,0 +1,53 @@ +import {BarChart} from '../../src/BarChart'; +import React from 'react'; +import {View} from 'react-native'; + +const RoundStackBar = () => { + const stackData = [ + { + stacks: [ + {value: 10, color: 'orange'}, + {value: 20, color: '#4ABFF4', marginBottom: 2}, + ], + label: 'Jan', + }, + { + stacks: [ + {value: 10, color: '#4ABFF4'}, + {value: 11, color: 'orange', marginBottom: 2}, + {value: 15, color: '#28B2B3', marginBottom: 2}, + ], + label: 'Mar', + }, + { + stacks: [ + {value: 14, color: 'orange'}, + {value: 18, color: '#4ABFF4', marginBottom: 2}, + ], + label: 'Feb', + }, + { + stacks: [ + {value: 7, color: '#4ABFF4'}, + {value: 11, color: 'orange', marginBottom: 2}, + {value: 10, color: '#28B2B3', marginBottom: 2}, + ], + label: 'Mar', + }, + ]; + return ( + + + + ); +}; + +export default RoundStackBar; diff --git a/examples/BarChart/SimpleBarAnimated.js b/examples/BarChart/SimpleBarAnimated.js new file mode 100644 index 0000000..8af4a77 --- /dev/null +++ b/examples/BarChart/SimpleBarAnimated.js @@ -0,0 +1,27 @@ +import {BarChart} from '../../src/BarChart'; +import React from 'react'; +import {View} from 'react-native'; + +const SimpleBarAnimation = () => { + const barData = [ + {value: 230, label: 'Jan', frontColor: '#4ABFF4'}, + {value: 180, label: 'Feb', frontColor: '#79C3DB'}, + {value: 195, label: 'Mar', frontColor: '#28B2B3'}, + {value: 250, label: 'Apr', frontColor: '#4ADDBA'}, + {value: 320, label: 'May', frontColor: '#91E3E3'}, + ]; + return ( + + + + ); +}; + +export default SimpleBarAnimation; diff --git a/examples/BarChart/SimpleBlueBars.js b/examples/BarChart/SimpleBlueBars.js index 8897507..110a3c5 100644 --- a/examples/BarChart/SimpleBlueBars.js +++ b/examples/BarChart/SimpleBlueBars.js @@ -16,8 +16,6 @@ const SimpleBlueBars = () => { { + const lineData = [ + {value: 0}, + {value: 20}, + {value: 18}, + {value: 40}, + {value: 36}, + {value: 60}, + {value: 54}, + {value: 85}, + ]; + return ( + + + + ); +}; + +export default SimpleBlueLine; diff --git a/examples/PieChart/SimplePie.js b/examples/PieChart/SimplePie.js new file mode 100644 index 0000000..8897ace --- /dev/null +++ b/examples/PieChart/SimplePie.js @@ -0,0 +1,27 @@ +import React from 'react'; +import {View} from 'react-native'; +import {PieChart} from '../../src/PieChart'; + +const SimplePie = () => { + const pieData = [ + {value: 54, color: '#177AD5', text: '54%'}, + {value: 30, color: '#79D2DE', text: '30%'}, + {value: 26, color: '#ED6665', text: '26%'}, + ]; + return ( + + + + ); +}; + +export default SimplePie; diff --git a/src/BarChart/RenderBars.tsx b/src/BarChart/RenderBars.tsx index a56ae6c..9e11245 100644 --- a/src/BarChart/RenderBars.tsx +++ b/src/BarChart/RenderBars.tsx @@ -1,10 +1,10 @@ -import React, { Component } from 'react'; -import { View, TouchableOpacity, Animated, Text, ColorValue } from 'react-native'; +import React, {Component} from 'react'; +import {View, TouchableOpacity, Animated, Text, ColorValue} from 'react-native'; import ThreeDBar from '../Components/ThreeDBar'; import AnimatedBar from '../Components/AnimatedBar'; import LinearGradient from 'react-native-linear-gradient'; import Animated2DWithGradient from './Animated2DWithGradient'; -import { Style } from 'util'; +import {Style} from 'util'; type Props = { style?: any; @@ -29,6 +29,7 @@ type Props = { spacing?: number; data?: any; barWidth?: number; + sideWidth?: number; isThreeD?: Boolean; isAnimated?: Boolean; @@ -54,7 +55,7 @@ type Props = { xAxisIndicesColor: ColorValue; horizontal: Boolean; intactTopLabel: Boolean; - barBorderRadius?: number + barBorderRadius?: number; }; type itemType = { value?: number; @@ -66,6 +67,7 @@ type itemType = { gradientColor?: any; label?: String; barWidth?: number; + sideWidth?: number; labelTextStyle?: any; topLabelComponent?: Function; topLabelContainerStyle?: any; @@ -74,7 +76,7 @@ type itemType = { capColor?: ColorValue; capRadius?: number; labelComponent?: Function; - barBorderRadius?: number + barBorderRadius?: number; }; const RenderBars = (props: Props) => { const { @@ -106,21 +108,21 @@ const RenderBars = (props: Props) => { }, rotateLabel ? props.horizontal - ? { transform: [{ rotate: '330deg' }] } - : { transform: [{ rotate: '60deg' }] } + ? {transform: [{rotate: '330deg'}]} + : {transform: [{rotate: '60deg'}]} : props.horizontal - ? { transform: [{ rotate: '-90deg' }] } - : {}, + ? {transform: [{rotate: '-90deg'}]} + : {}, ]}> {item.labelComponent ? ( item.labelComponent() ) : ( - - {label || ''} - - )} + + {label || ''} + + )} ); }; @@ -137,21 +139,21 @@ const RenderBars = (props: Props) => { }, rotateLabel ? props.horizontal - ? { transform: [{ rotate: '330deg' }] } - : { transform: [{ rotate: '60deg' }] } + ? {transform: [{rotate: '330deg'}]} + : {transform: [{rotate: '60deg'}]} : props.horizontal - ? { transform: [{ rotate: '-90deg' }] } - : {}, + ? {transform: [{rotate: '-90deg'}]} + : {}, ]}> {item.labelComponent ? ( item.labelComponent() ) : ( - - {label || ''} - - )} + + {label || ''} + + )} ); }; @@ -166,7 +168,7 @@ const RenderBars = (props: Props) => { position: 'absolute', width: '100%', height: '100%', - borderRadius: props.barBorderRadius || item.barBorderRadius || 0 + borderRadius: props.barBorderRadius || item.barBorderRadius || 0, }, props.roundedBottom && { borderBottomLeftRadius: @@ -189,8 +191,8 @@ const RenderBars = (props: Props) => { borderTopRightRadius: (item.barWidth || props.barWidth || 30) / 2, }, ]} - start={{ x: 0, y: 0 }} - end={{ x: 0, y: 1 }} + start={{x: 0, y: 0}} + end={{x: 0, y: 1}} colors={[ item.gradientColor || props.gradientColor || 'white', item.frontColor || props.frontColor || 'black', @@ -232,7 +234,7 @@ const RenderBars = (props: Props) => { alignItems: 'center', }, props.horizontal && - !props.intactTopLabel && { transform: [{ rotate: '270deg' }] }, + !props.intactTopLabel && {transform: [{rotate: '270deg'}]}, item.topLabelContainerStyle, ]}> {item.topLabelComponent()} @@ -253,7 +255,7 @@ const RenderBars = (props: Props) => { width: '100%', height: '100%', backgroundColor: item.frontColor || props.frontColor || 'black', - borderRadius: props.barBorderRadius || item.barBorderRadius || 0 + borderRadius: props.barBorderRadius || item.barBorderRadius || 0, }, props.roundedBottom && { borderBottomLeftRadius: @@ -313,7 +315,7 @@ const RenderBars = (props: Props) => { alignItems: 'center', }, props.horizontal && - !props.intactTopLabel && { transform: [{ rotate: '270deg' }] }, + !props.intactTopLabel && {transform: [{rotate: '270deg'}]}, item.topLabelContainerStyle, ]}> {item.topLabelComponent()} @@ -337,7 +339,7 @@ const RenderBars = (props: Props) => { }, // !isThreeD && !item.showGradient && !props.showGradient && // { backgroundColor: item.frontColor || props.frontColor || 'black' }, - side !== 'right' && { zIndex: data.length - index }, + side !== 'right' && {zIndex: data.length - index}, ]}> {props.showVerticalLines && ( { { horizontal={props.horizontal} /> ) : ( - - ) + + ) ) : item.showGradient || props.showGradient ? ( isAnimated ? ( { barBorderRadius={props.barBorderRadius || 0} /> ) : ( - static2DWithGradient(item) - ) + static2DWithGradient(item) + ) ) : isAnimated ? ( { barBorderRadius={props.barBorderRadius || 0} /> ) : ( - static2DSimple(item) - )} + static2DSimple(item) + )} {isAnimated ? renderAnimatedLabel(item.label || '', item.labelTextStyle) : renderLabel(item.label || '', item.labelTextStyle)} diff --git a/src/BarChart/RenderStackBars.tsx b/src/BarChart/RenderStackBars.tsx index b7145ab..8367d09 100644 --- a/src/BarChart/RenderStackBars.tsx +++ b/src/BarChart/RenderStackBars.tsx @@ -1,217 +1,213 @@ -import React, { Component } from 'react'; -import { View, TouchableOpacity, Text, ColorValue } from 'react-native'; -import { Style } from 'util'; +import React, {Component} from 'react'; +import {View, TouchableOpacity, Text, ColorValue} from 'react-native'; +import {Style} from 'util'; type Props = { - style?: any; - width?: number; - height?: number; - color?: ColorValue; - topLabelComponent?: Component; - topLabelContainerStyle?: Style; - opacity?: number; - labelTextStyle?: any; - disablePress?: boolean; + style?: any; + width?: number; + height?: number; + color?: ColorValue; + topLabelComponent?: Component; + topLabelContainerStyle?: Style; + opacity?: number; + labelTextStyle?: any; + disablePress?: boolean; - item: itemType; - index: number; - containerHeight?: number; - maxValue: number; - spacing?: number; - data?: any; - barWidth?: number; + item: itemType; + index: number; + containerHeight?: number; + maxValue: number; + spacing?: number; + data?: any; + barWidth?: number; - rotateLabel?: Boolean; - showVerticalLines: Boolean; - verticalLinesThickness: number; - verticalLinesColor: ColorValue; - verticalLinesZIndex: number; - showXAxisIndices: Boolean; - xAxisIndicesHeight: number; - xAxisIndicesWidth: number; - xAxisIndicesColor: ColorValue; - horizontal: Boolean; - intactTopLabel: Boolean; - barBorderRadius?: number + rotateLabel?: Boolean; + showVerticalLines: Boolean; + verticalLinesThickness: number; + verticalLinesColor: ColorValue; + verticalLinesZIndex: number; + showXAxisIndices: Boolean; + xAxisIndicesHeight: number; + xAxisIndicesWidth: number; + xAxisIndicesColor: ColorValue; + horizontal: Boolean; + intactTopLabel: Boolean; + barBorderRadius?: number; }; type itemType = { - value?: number; - onPress?: any; - label?: String; - barWidth?: number; - labelTextStyle?: any; - topLabelComponent?: Function; - topLabelContainerStyle?: any; - disablePress?: any; - capThickness?: number; - capColor?: ColorValue; - capRadius?: number; - labelComponent?: Function; - borderRadius?: number; - stacks?: Array + value?: number; + onPress?: any; + label?: String; + barWidth?: number; + labelTextStyle?: any; + topLabelComponent?: Function; + topLabelContainerStyle?: any; + disablePress?: any; + capThickness?: number; + capColor?: ColorValue; + capRadius?: number; + labelComponent?: Function; + borderRadius?: number; + stacks?: Array; }; const RenderStackBars = (props: Props) => { - const { - item, - containerHeight, - maxValue, - spacing, - rotateLabel, - } = props; - const disablePress = props.disablePress || false; - const renderLabel = (label: String, labelTextStyle: any) => { - return ( - - {item.labelComponent ? ( - item.labelComponent() - ) : ( - - {label || ''} - - )} - - ); - }; - - const getPosition = (index: number) => { - let position = 0; - for (let i = 0; i < index; i++) { - position += (props.item.stacks[i].value * (containerHeight || 200)) / (maxValue || 200) - } - return position; - } - - const getTotalHeight = () => { - return props.item.stacks.reduce((acc, stack) => acc + stack.value, 0) - } - - - - const static2DSimple = (item: itemType) => { - // console.log('comes to static2DSimple', item); - return ( - <> - - { - item.stacks.map((stackItem, index) => { - return ( - - ) - }) - } - - - {item.topLabelComponent && ( - - {item.topLabelComponent()} - - )} - - ); - }; - + const {item, containerHeight, maxValue, spacing, rotateLabel} = props; + const disablePress = props.disablePress || false; + const renderLabel = (label: String, labelTextStyle: any) => { return ( - - {props.showVerticalLines && ( - - )} - {props.showXAxisIndices && ( - - )} - { - static2DSimple(item) - } - {renderLabel(item.label || '', item.labelTextStyle)} - + + {item.labelComponent ? ( + item.labelComponent() + ) : ( + + {label || ''} + + )} + ); + }; + + const getPosition = (index: number) => { + let position = 0; + for (let i = 0; i < index; i++) { + position += + (props.item.stacks[i].value * (containerHeight || 200)) / + (maxValue || 200); + } + return position; + }; + + const getTotalHeight = () => { + return props.item.stacks.reduce((acc, stack) => acc + stack.value, 0); + }; + + const static2DSimple = (item: itemType) => { + // console.log('comes to static2DSimple', item); + return ( + <> + + {item.stacks.map((stackItem, index) => { + return ( + + ); + })} + + {item.topLabelComponent && ( + + {item.topLabelComponent()} + + )} + + ); + }; + + return ( + + {props.showVerticalLines && ( + + )} + {props.showXAxisIndices && ( + + )} + {static2DSimple(item)} + {renderLabel(item.label || '', item.labelTextStyle)} + + ); }; export default RenderStackBars; diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx index dd5316f..0fe0220 100644 --- a/src/BarChart/index.tsx +++ b/src/BarChart/index.tsx @@ -30,6 +30,7 @@ type PropTypes = { hideYAxisText?: Boolean; initialSpacing?: number; barWidth?: number; + sideWidth?: number; cappedBars?: Boolean; capThickness?: number; @@ -55,6 +56,7 @@ type PropTypes = { yAxisIndicesColor?: ColorValue; showFractionalValues?: Boolean; + roundToDigits?: number; backgroundColor?: ColorValue; disableScroll?: Boolean; @@ -92,6 +94,7 @@ type itemType = { gradientColor?: any; label?: String; barWidth?: number; + sideWidth?: number; labelTextStyle?: any; topLabelComponent?: Function; topLabelContainerStyle?: any; @@ -111,7 +114,7 @@ export const BarChart = (props: PropTypes) => { let maxItem = 0; if (props.stackData) { props.stackData.forEach(stackItem => { - console.log('stackItem', stackItem); + // console.log('stackItem', stackItem); let stackSum = stackItem.stacks.reduce( (acc, stack) => acc + stack.value, 0, @@ -122,6 +125,7 @@ export const BarChart = (props: PropTypes) => { } totalWidth += (stackItem.stacks[0].barWidth || props.barWidth || 30) + spacing; + // console.log('totalWidth for stack===', totalWidth); }); } else { data.forEach((item: itemType) => { @@ -129,9 +133,17 @@ export const BarChart = (props: PropTypes) => { maxItem = item.value; } totalWidth += (item.barWidth || props.barWidth || 30) + spacing; + // console.log('totalWidth for bar===', totalWidth); }); } - maxItem = maxItem + (10 - (maxItem % 10)); + if (props.showFractionalValues || props.roundToDigits) { + maxItem *= 10 * (props.roundToDigits || 1); + maxItem = maxItem + (10 - (maxItem % 10)); + maxItem /= 10 * (props.roundToDigits || 1); + maxItem = parseFloat(maxItem.toFixed(props.roundToDigits || 1)); + } else { + maxItem = maxItem + (10 - (maxItem % 10)); + } const maxValue = props.maxValue || maxItem; @@ -193,7 +205,11 @@ export const BarChart = (props: PropTypes) => { horizSections.pop(); for (let i = 0; i <= noOfSections; i++) { - horizSections.push({value: maxValue - stepValue * i}); + let value = maxValue - stepValue * i; + if (props.showFractionalValues || props.roundToDigits) { + value = parseFloat(value.toFixed(props.roundToDigits || 1)); + } + horizSections.push({value}); } const heightValue = new Animated.Value(0); @@ -271,7 +287,11 @@ export const BarChart = (props: PropTypes) => { }, ]}> {showFractionalValues - ? sectionItems.value || '' + ? sectionItems.value + ? sectionItems.value + : hideOrigin + ? '' + : '0' : sectionItems.value ? sectionItems.value.toString().split('.')[0] : hideOrigin @@ -365,8 +385,8 @@ export const BarChart = (props: PropTypes) => { data={props.stackData || data} keyExtractor={(item, index) => index.toString()} renderItem={({item, index}) => { - console.log('index--->', index); - console.log('itemhere--->', item); + // console.log('index--->', index); + // console.log('itemhere--->', item); if (props.stackData) { return ( { side={side} data={data} barWidth={props.barWidth} + sideWidth={props.sideWidth} opacity={opacity} isThreeD={isThreeD} isAnimated={isAnimated} diff --git a/src/Components/AnimatedBar/index.tsx b/src/Components/AnimatedBar/index.tsx index c71780b..8ec2c95 100644 --- a/src/Components/AnimatedBar/index.tsx +++ b/src/Components/AnimatedBar/index.tsx @@ -18,6 +18,7 @@ type trianglePropTypes = { type animatedBarPropTypes = { animationDuration: number; width: number; + sideWidth?: number; height: number; showGradient: Boolean; gradientColor: any; @@ -96,6 +97,7 @@ const AnimatedBar = (props: animatedBarPropTypes) => { }; const width = props.width; + const sideWidth = props.sideWidth; const showGradient = props.showGradient || false; const gradientColor = props.gradientColor || 'white'; @@ -118,55 +120,36 @@ const AnimatedBar = (props: animatedBarPropTypes) => { {opacity: opacity, position: 'absolute', bottom: 0}, props.side === 'right' && {transform: [{rotateY: '180deg'}]}, ]}> - {props.height ? ( - - - - - - ) : null} - {/******************* Top View *****************/} {props.height ? ( <> - + - + + style={{ + position: 'absolute', + top: sideWidth / -2, + left: width, + }}> @@ -175,6 +158,29 @@ const AnimatedBar = (props: animatedBarPropTypes) => { {/*******************************************************************/} + {props.height ? ( + + + + + + ) : null} + { - const width = props.width || 40; - const height = props.height || 200; + const width = props.width; + const sideWidth = props.sideWidth; + const height = props.height; const showGradient = props.showGradient || false; const gradientColor = props.gradientColor || 'white'; @@ -77,57 +79,58 @@ const ThreeDBar = (props: PropTypes) => { styles.row, props.side === 'right' && {transform: [{rotateY: '180deg'}]}, ]}> - + {/******************* Top View *****************/} + + + + + + + + + + + + {/*******************************************************************/} + + - {/******************* Top View *****************/} - - - - - - - - - - - - {/*******************************************************************/} - { } totalWidth += spacing; }); - maxItem = maxItem + (10 - (maxItem % 10)); + if (props.showFractionalValues || props.roundToDigits) { + maxItem *= 10 * (props.roundToDigits || 1); + maxItem = maxItem + (10 - (maxItem % 10)); + maxItem /= 10 * (props.roundToDigits || 1); + maxItem = parseFloat(maxItem.toFixed(props.roundToDigits || 1)); + } else { + maxItem = maxItem + (10 - (maxItem % 10)); + } const maxValue = props.maxValue || maxItem; @@ -273,7 +281,11 @@ export const LineChart = (props: propTypes) => { // console.log('data', data); horizSections.pop(); for (let i = 0; i <= noOfSections; i++) { - horizSections.push({value: maxValue - stepValue * i}); + let value = maxValue - stepValue * i; + if (props.showFractionalValues || props.roundToDigits) { + value = parseFloat(value.toFixed(props.roundToDigits || 1)); + } + horizSections.push({value}); } useEffect(() => { @@ -540,7 +552,6 @@ export const LineChart = (props: propTypes) => { }); const decreaseWidth = () => { - // console.log('i m called, totalWidth is', totalWidth) widthValue.setValue(0); Animated.timing(widthValue, { toValue: 1, @@ -589,7 +600,7 @@ export const LineChart = (props: propTypes) => { {props.hideAxesAndRules !== true && horizSections.map((sectionItems, index) => { return ( - + { }, ]}> {showFractionalValues - ? sectionItems.value || '' + ? sectionItems.value + ? sectionItems.value + : hideOrigin + ? '' + : '0' : sectionItems.value ? sectionItems.value.toString().split('.')[0] : hideOrigin @@ -633,7 +648,7 @@ export const LineChart = (props: propTypes) => { {index === noOfSections ? ( diff --git a/src/LineChart/styles.tsx b/src/LineChart/styles.tsx index 964ba74..0046671 100644 --- a/src/LineChart/styles.tsx +++ b/src/LineChart/styles.tsx @@ -8,7 +8,6 @@ export const styles = StyleSheet.create({ }, horizBar: { flexDirection: 'row', - width: '90%', }, leftLabel: { justifyContent: 'center', diff --git a/src/PieChart/index.tsx b/src/PieChart/index.tsx index cb3239a..c151404 100644 --- a/src/PieChart/index.tsx +++ b/src/PieChart/index.tsx @@ -29,6 +29,8 @@ type propTypes = { textBackgroundColor?: string; textBackgroundRadius?: number; showValuesAsLabels?: Boolean; + + centerLabelComponent?: Function; }; type itemType = { value: number; @@ -228,8 +230,18 @@ export const PieChart = (props: propTypes) => { } if (showTextBackground && (dataItem.text || showValuesAsLabels)) { - let textBackgroundX = xx + textSize / 2; - let textBackgroundY = yy - textSize / 2 + 1; + let textBackgroundX = + xx + + (props.textBackgroundRadius || + dataItem.textBackgroundRadius || + textSize) / + 2; + let textBackgroundY = + yy - + (props.textBackgroundRadius || + dataItem.textBackgroundRadius || + textSize) / + 3; ctx.beginPath(); ctx.arc( textBackgroundX, @@ -265,7 +277,7 @@ export const PieChart = (props: propTypes) => { return ( - {visibility && donut && !isDataShifted && ( + {visibility && (props.centerLabelComponent || (donut && !isDataShifted)) && ( { borderWidth: innerCircleBorderWidth, borderColor: innerCircleBorderColor, backgroundColor: innerCircleColor, + justifyContent: 'center', + alignItems: 'center', }, isThreeD && { borderTopWidth: innerCircleBorderWidth * 5, @@ -289,8 +303,9 @@ export const PieChart = (props: propTypes) => { ? innerCircleBorderWidth * 2 : innerCircleBorderWidth, }, - ]} - /> + ]}> + {props.centerLabelComponent ? props.centerLabelComponent() : null} + )} );