Merge pull request #334 from Abhinandan-Kushwaha/development

Development
This commit is contained in:
Abhinandan Kushwaha 2023-07-03 02:51:58 +05:30 committed by GitHub
commit 387d7aa2e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 929 additions and 1087 deletions

250
App.js
View File

@ -1,252 +1,8 @@
import React, {useState} from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
SafeAreaView,
ScrollView,
} from 'react-native';
import SimpleBlueBars from './examples/BarChart/SimpleBlueBars';
import BarThreeD from './examples/BarChart/BarThreeD';
import SimpleBarAnimated from './examples/BarChart/SimpleBarAnimated';
import RoundStackBar from './examples/BarChart/RoundStackBar';
import CappedBars from './examples/BarChart/CappedBars';
import BarWithGradient from './examples/BarChart/BarWithGradient';
import LineChartTwo from './examples/LineChart/LineChartTwo';
import AnimatedArea from './examples/LineChart/AnimatedArea';
import AreaTwo from './examples/LineChart/AreaTwo';
import ChartWithPointer from './examples/LineChart/ChartWithPointer';
import CaloriesBurnt from './examples/LineChart/CaloriesBurnt';
import SimplePie from './examples/PieChart/SimplePie';
import ProgressPie from './examples/PieChart/ProgressPie';
import SplitPie from './examples/PieChart/SplitPie';
import ThreeDPie from './examples/PieChart/ThreeDPie';
import PieChartFocusOnPress from './examples/PieChart/PieChartFocusOnPress';
import React from 'react';
import Examples from './examples';
const App = () => {
const [selectedFooterButton, setSelectedFooterButton] = useState(0);
const Header = () => {
const getTitle = () => {
switch (selectedFooterButton) {
case 0:
return 'Bar and Stacked Bar Charts';
case 1:
return 'Line and Area Charts';
case 2:
return 'Pie and Donut Charts';
}
};
return (
<View style={styles.header}>
<Text style={{fontSize: 20}}>{getTitle()}</Text>
</View>
);
};
const Separator = () => <View style={{height: 40}} />;
const BarAndStackCharts = () => {
return (
<View>
<SimpleBlueBars />
<Separator />
<SimpleBarAnimated />
<Separator />
<BarThreeD />
<Separator />
<RoundStackBar />
<Separator />
<CappedBars />
<Separator />
<BarWithGradient />
<Separator />
<Separator />
</View>
);
};
const LineAndAreaCharts = () => {
return (
<View>
<LineChartTwo />
<Separator />
<AnimatedArea />
<Separator />
<AreaTwo />
<Separator />
<ChartWithPointer />
<Separator />
<CaloriesBurnt />
<Separator />
<Separator />
</View>
);
};
const PieAndDonutCharts = () => {
return (
<View>
<SimplePie />
<Separator />
<ProgressPie />
<Separator />
<SplitPie />
<Separator />
<ThreeDPie />
<Separator />
<PieChartFocusOnPress />
<Separator />
<Separator />
</View>
);
};
const SelectedIndexCharts = () => {
switch (selectedFooterButton) {
case 0:
return <BarAndStackCharts />;
case 1:
return <LineAndAreaCharts />;
case 2:
return <PieAndDonutCharts />;
}
};
const Body = () => {
return (
<ScrollView style={styles.body}>
<SelectedIndexCharts />
</ScrollView>
);
};
const Footer = () => {
const footerButtonStyle = index => [
styles.footerButton,
selectedFooterButton === index ? styles.footerButtonSelected : null,
];
return (
<View style={styles.footer}>
<View
style={[
styles.footerButtonContainer,
selectedFooterButton === 0 ? {marginTop: -12} : null,
]}>
{selectedFooterButton === 0 ? (
<View style={styles.connector} />
) : null}
<TouchableOpacity
style={footerButtonStyle(0)}
onPress={() => setSelectedFooterButton(0)}>
<Text>Bar</Text>
<Text>Stack</Text>
</TouchableOpacity>
</View>
<View
style={[
styles.footerButtonContainer,
selectedFooterButton === 1 ? {marginTop: -12} : null,
]}>
{selectedFooterButton === 1 ? (
<View style={styles.connector} />
) : null}
<TouchableOpacity
style={footerButtonStyle(1)}
onPress={() => setSelectedFooterButton(1)}>
<Text>Line</Text>
<Text>Area</Text>
</TouchableOpacity>
</View>
<View
style={[
styles.footerButtonContainer,
selectedFooterButton === 2 ? {marginTop: -12} : null,
]}>
{selectedFooterButton === 2 ? (
<View style={styles.connector} />
) : null}
<TouchableOpacity
style={footerButtonStyle(2)}
onPress={() => setSelectedFooterButton(2)}>
<Text>Pie</Text>
<Text>Donut</Text>
</TouchableOpacity>
</View>
</View>
);
};
return (
<SafeAreaView style={styles.container}>
<Header />
<Body />
<Footer />
</SafeAreaView>
);
return <Examples />;
};
const styles = StyleSheet.create({
container: {flex: 1, alignItems: 'center', backgroundColor: '#f5f5ff'},
header: {marginBottom: 20},
body: {
paddingLeft: 10,
width: '100%',
},
footer: {
position: 'absolute',
bottom: 0,
height: 60,
width: '100%',
flexDirection: 'row',
justifyContent: 'space-evenly',
alignItems: 'center',
backgroundColor: '#334',
},
footerButtonContainer: {
alignItems: 'center',
},
connector: {
height: 8,
width: 60,
borderRadius: 0,
backgroundColor: '#f5f5ff',
},
footerButton: {
width: 60,
height: 40,
paddingHorizontal: 8,
borderRadius: 4,
backgroundColor: '#bbc',
justifyContent: 'center',
alignItems: 'center',
},
footerButtonSelected: {
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
backgroundColor: '#f5f5ff',
shadowColor: '#00ffe9',
shadowOffset: {width: 5, height: 5},
shadowOpacity: 0.5,
shadowRadius: 1,
elevation: 4,
},
});
export default App;

View File

@ -15,7 +15,7 @@
| noOfSectionsBelowXAxis | number | Number of sections in the Y axis below X axis (in case the data set has negative values too) | 0 |
| stepValue | number | Value of 1 step/section in the Y axis | 20 |
| stepHeight | number | Height of 1 step/section in the Y axis | 20 |
| spacing | number | Distance between 2 consecutive bars in the Bar chart | 20 |
| spacing | number | Distance between 2 consecutive bars in the Bar chart | 50 |
| adjustToWidth | Boolean | When set to true, it auto computes the spacing value to fit the Line chart in the available width | false |
| backgroundColor | ColorValue | Background color of the Bar chart | \_ |
| disableScroll | Boolean | To disable horizontal scroll | false |
@ -26,7 +26,8 @@
| onDataChangeAnimationDuration | number | Duration (milliseconds) in which the transition animation takes place on a change in data | 400 |
| scrollToEnd | Boolean | When set to true, the chart automatically scrolls to the rightmost data point | false |
| scrollAnimation | Boolean | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost data point | true |
| initialSpacing | number | distance of the first data point from the Y axis | 40 |
| initialSpacing | number | distance of the first data point from the Y axis | 20 |
| endSpacing | number | distance/padding left at the end of the line chart | adjustWidth ? 0 : 20 |
---
@ -128,12 +129,6 @@ When you are using the `dataPointLabelComponent`, make sure to provide the `data
| showReferenceLine3 | Boolean | show third reference line | false |
| referenceLine3Config | referenceConfigType | properties of reference line like thickness, color etc (described below the table) | \_ |
| referenceLine3Position | number | position of third reference line | containerHeight / 2 |
| showReferenceLine4 | Boolean | show fourth reference line | false |
| referenceLine4Config | referenceConfigType | properties of reference line like thickness, color etc (described below the table) | \_ |
| referenceLine4Position | number | position of fourth reference line | containerHeight / 2 |
| showReferenceLine5 | Boolean | show fifth reference line | false |
| referenceLine5Config | referenceConfigType | properties of reference line like thickness, color etc (described below the table) | \_ |
| referenceLine5Position | number | position of fifth reference line | containerHeight / 2 |
| showVerticalLines | Boolean | To show vertical lines | false |
| verticalLinesUptoDataPoint | Boolean | To set the height of the vertical lines upto the corresponding data point | false |
| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray |

252
examples/index.js Normal file
View File

@ -0,0 +1,252 @@
import React, {useState} from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
SafeAreaView,
ScrollView,
} from 'react-native';
import SimpleBlueBars from './BarChart/SimpleBlueBars';
import BarThreeD from './BarChart/BarThreeD';
import SimpleBarAnimated from './BarChart/SimpleBarAnimated';
import RoundStackBar from './BarChart/RoundStackBar';
import CappedBars from './BarChart/CappedBars';
import BarWithGradient from './BarChart/BarWithGradient';
import LineChartTwo from './LineChart/LineChartTwo';
import AnimatedArea from './LineChart/AnimatedArea';
import AreaTwo from './LineChart/AreaTwo';
import ChartWithPointer from './LineChart/ChartWithPointer';
import CaloriesBurnt from './LineChart/CaloriesBurnt';
import SimplePie from './PieChart/SimplePie';
import ProgressPie from './PieChart/ProgressPie';
import SplitPie from './PieChart/SplitPie';
import ThreeDPie from './PieChart/ThreeDPie';
import PieChartFocusOnPress from './PieChart/PieChartFocusOnPress';
const Examples = () => {
const [selectedFooterButton, setSelectedFooterButton] = useState(0);
const Header = () => {
const getTitle = () => {
switch (selectedFooterButton) {
case 0:
return 'Bar and Stacked Bar Charts';
case 1:
return 'Line and Area Charts';
case 2:
return 'Pie and Donut Charts';
}
};
return (
<View style={styles.header}>
<Text style={{fontSize: 20}}>{getTitle()}</Text>
</View>
);
};
const Separator = () => <View style={{height: 40}} />;
const BarAndStackCharts = () => {
return (
<View>
<SimpleBlueBars />
<Separator />
<SimpleBarAnimated />
<Separator />
<BarThreeD />
<Separator />
<RoundStackBar />
<Separator />
<CappedBars />
<Separator />
<BarWithGradient />
<Separator />
<Separator />
</View>
);
};
const LineAndAreaCharts = () => {
return (
<View>
<LineChartTwo />
<Separator />
<AnimatedArea />
<Separator />
<AreaTwo />
<Separator />
<ChartWithPointer />
<Separator />
<CaloriesBurnt />
<Separator />
<Separator />
</View>
);
};
const PieAndDonutCharts = () => {
return (
<View>
<SimplePie />
<Separator />
<ProgressPie />
<Separator />
<SplitPie />
<Separator />
<ThreeDPie />
<Separator />
<PieChartFocusOnPress />
<Separator />
<Separator />
</View>
);
};
const SelectedIndexCharts = () => {
switch (selectedFooterButton) {
case 0:
return <BarAndStackCharts />;
case 1:
return <LineAndAreaCharts />;
case 2:
return <PieAndDonutCharts />;
}
};
const Body = () => {
return (
<ScrollView style={styles.body}>
<SelectedIndexCharts />
</ScrollView>
);
};
const Footer = () => {
const footerButtonStyle = index => [
styles.footerButton,
selectedFooterButton === index ? styles.footerButtonSelected : null,
];
return (
<View style={styles.footer}>
<View
style={[
styles.footerButtonContainer,
selectedFooterButton === 0 ? {marginTop: -12} : null,
]}>
{selectedFooterButton === 0 ? (
<View style={styles.connector} />
) : null}
<TouchableOpacity
style={footerButtonStyle(0)}
onPress={() => setSelectedFooterButton(0)}>
<Text>Bar</Text>
<Text>Stack</Text>
</TouchableOpacity>
</View>
<View
style={[
styles.footerButtonContainer,
selectedFooterButton === 1 ? {marginTop: -12} : null,
]}>
{selectedFooterButton === 1 ? (
<View style={styles.connector} />
) : null}
<TouchableOpacity
style={footerButtonStyle(1)}
onPress={() => setSelectedFooterButton(1)}>
<Text>Line</Text>
<Text>Area</Text>
</TouchableOpacity>
</View>
<View
style={[
styles.footerButtonContainer,
selectedFooterButton === 2 ? {marginTop: -12} : null,
]}>
{selectedFooterButton === 2 ? (
<View style={styles.connector} />
) : null}
<TouchableOpacity
style={footerButtonStyle(2)}
onPress={() => setSelectedFooterButton(2)}>
<Text>Pie</Text>
<Text>Donut</Text>
</TouchableOpacity>
</View>
</View>
);
};
return (
<SafeAreaView style={styles.container}>
<Header />
<Body />
<Footer />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {flex: 1, alignItems: 'center', backgroundColor: '#f5f5ff'},
header: {marginBottom: 20},
body: {
paddingLeft: 10,
width: '100%',
},
footer: {
position: 'absolute',
bottom: 0,
height: 60,
width: '100%',
flexDirection: 'row',
justifyContent: 'space-evenly',
alignItems: 'center',
backgroundColor: '#334',
},
footerButtonContainer: {
alignItems: 'center',
},
connector: {
height: 8,
width: 60,
borderRadius: 0,
backgroundColor: '#f5f5ff',
},
footerButton: {
width: 60,
height: 40,
paddingHorizontal: 8,
borderRadius: 4,
backgroundColor: '#bbc',
justifyContent: 'center',
alignItems: 'center',
},
footerButtonSelected: {
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
backgroundColor: '#f5f5ff',
shadowColor: '#00ffe9',
shadowOffset: {width: 5, height: 5},
shadowOpacity: 0.5,
shadowRadius: 1,
elevation: 4,
},
});
export default Examples;

View File

@ -1,6 +1,6 @@
{
"name": "react-native-gifted-charts",
"version": "1.3.0",
"version": "1.3.1",
"description": "The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
"main": "src/index.tsx",
"files": [
@ -57,6 +57,8 @@
"pie",
"donut",
"area",
"line"
"line",
"react",
"react native"
]
}

View File

@ -23,7 +23,7 @@ import Svg, {
Rect,
Text as CanvasText,
} from 'react-native-svg';
import Rule from '../Components/lineSvg';
import {renderHorizSections} from './renderHorizSections';
let initialData = null;
@ -36,6 +36,7 @@ type propTypes = {
stepValue?: number;
spacing?: number;
initialSpacing?: number;
endSpacing?: number;
data?: Array<itemType>;
zIndex?: number;
thickness?: number;
@ -78,12 +79,6 @@ type propTypes = {
showReferenceLine3?: Boolean;
referenceLine3Config?: referenceConfigType;
referenceLine3Position?: number;
showReferenceLine4?: Boolean;
referenceLine4Config?: referenceConfigType;
referenceLine4Position?: number;
showReferenceLine5?: Boolean;
referenceLine5Config?: referenceConfigType;
referenceLine5Position?: number;
showVerticalLines?: Boolean;
verticalLinesUptoDataPoint?: Boolean;
@ -291,19 +286,18 @@ export const LineChartBicolor = (props: propTypes) => {
initialData = [...data];
}
const initialSpacing =
props.initialSpacing === 0 ? 0 : props.initialSpacing || 40;
const thickness = props.thickness || 2;
const adjustToWidth = props.adjustToWidth || false;
const initialSpacing =
props.initialSpacing === 0 ? 0 : props.initialSpacing || 20;
const endSpacing = props.endSpacing ?? (adjustToWidth ? 0 : 20);
const thickness = props.thickness || 2;
const spacing =
props.spacing === 0
? 0
: props.spacing ||
(adjustToWidth
? ((props.width || 200) - initialSpacing) / data.length
: 60);
props.spacing ??
(adjustToWidth
? ((props.width || 200) - initialSpacing) / data.length
: 50);
const xAxisLength = props.xAxisLength;
const xAxisThickness =
@ -733,7 +727,7 @@ export const LineChartBicolor = (props: propTypes) => {
const defaultReferenceConfig = {
thickness: rulesThickness,
width: (props.width || totalWidth) + 11,
width: (props.width || totalWidth - spacing) + endSpacing,
color: 'black',
type: rulesType,
dashWidth: dashWidth,
@ -751,7 +745,9 @@ export const LineChartBicolor = (props: propTypes) => {
? {
thickness: props.referenceLine1Config.thickness || rulesThickness,
width:
(props.referenceLine1Config.width || props.width || totalWidth) + 11,
(props.referenceLine1Config.width ||
props.width ||
totalWidth - spacing) + endSpacing,
color: props.referenceLine1Config.color || 'black',
type: props.referenceLine1Config.type || rulesType,
dashWidth: props.referenceLine1Config.dashWidth || dashWidth,
@ -774,7 +770,9 @@ export const LineChartBicolor = (props: propTypes) => {
? {
thickness: props.referenceLine2Config.thickness || rulesThickness,
width:
(props.referenceLine2Config.width || props.width || totalWidth) + 11,
(props.referenceLine2Config.width ||
props.width ||
totalWidth - spacing) + endSpacing,
color: props.referenceLine2Config.color || 'black',
type: props.referenceLine2Config.type || rulesType,
dashWidth: props.referenceLine2Config.dashWidth || dashWidth,
@ -797,7 +795,9 @@ export const LineChartBicolor = (props: propTypes) => {
? {
thickness: props.referenceLine3Config.thickness || rulesThickness,
width:
(props.referenceLine3Config.width || props.width || totalWidth) + 11,
(props.referenceLine3Config.width ||
props.width ||
totalWidth - spacing) + endSpacing,
color: props.referenceLine3Config.color || 'black',
type: props.referenceLine3Config.type || rulesType,
dashWidth: props.referenceLine3Config.dashWidth || dashWidth,
@ -915,392 +915,6 @@ export const LineChartBicolor = (props: propTypes) => {
outputRange: [0, totalWidth],
});
const getLabel = (val, index) => {
let label = '';
if (
showFractionalValues ||
(props.yAxisLabelTexts && props.yAxisLabelTexts[index] !== undefined)
) {
if (val) {
label = props.yAxisOffset
? (Number(val) + props.yAxisOffset).toString()
: val;
} else {
label = props.yAxisOffset ? props.yAxisOffset.toString() : '0';
}
} else {
if (val) {
label = val.toString().split('.')[0];
if (props.yAxisOffset) {
label = (Number(label) + props.yAxisOffset).toString();
}
} else {
label = props.yAxisOffset ? props.yAxisOffset.toString() : '0';
}
}
return yAxisLabelPrefix + label + yAxisLabelSuffix;
};
const renderHorizSections = () => {
return (
<>
{props.hideAxesAndRules !== true &&
horizSections.map((sectionItems, index) => {
return (
<View
key={index}
style={[
styles.horizBar,
{
width: (props.width ? props.width : totalWidth) + 15,
},
yAxisSide === 'right' && {transform: [{rotateY: '180deg'}]},
horizontalRulesStyle,
]}>
<View
style={[
styles.leftLabel,
{
height:
index === noOfSections ? stepHeight / 2 : stepHeight,
width: yAxisLabelWidth,
},
yAxisLabelContainerStyle,
]}
/>
<View
style={[
index === noOfSections
? styles.lastLeftPart
: styles.leftPart,
{
borderLeftWidth: yAxisThickness,
borderColor: yAxisColor,
backgroundColor: backgroundColor,
},
]}>
{index === noOfSections ? (
<Rule
config={{
thickness: xAxisThickness,
color: xAxisColor,
width: xAxisLength || (props.width || totalWidth) + 11,
dashWidth: dashWidth,
dashGap: dashGap,
type: xAxisType,
}}
/>
) : hideRules ? null : (
<Rule
config={{
thickness: rulesThickness,
color: rulesColor,
width: rulesLength || (props.width || totalWidth) + 11,
dashWidth: dashWidth,
dashGap: dashGap,
type: rulesType,
}}
/>
)}
{showXAxisIndices && index !== noOfSections ? (
<View
style={{
height: xAxisIndicesHeight,
width: xAxisIndicesWidth,
left: xAxisIndicesWidth / -2,
backgroundColor: xAxisIndicesColor,
}}
/>
) : null}
</View>
</View>
);
})}
{
/***********************************************************************************************/
/************************** Render the y axis labels separately **********************/
/***********************************************************************************************/
props.hideAxesAndRules !== true &&
!hideYAxisText &&
horizSections.map((sectionItems, index) => {
let label = getLabel(sectionItems.value, index);
if (hideOrigin && index === horizSections.length - 1) {
label = '';
}
return (
<View
key={index}
style={[
styles.horizBar,
styles.leftLabel,
{
position: 'absolute',
zIndex: 1,
top: stepHeight * index,
width: yAxisLabelWidth,
height:
index === noOfSections ? stepHeight / 2 : stepHeight,
},
yAxisSide === 'right' && {
transform: [
{
translateX:
(props.width ? props.width : totalWidth) - 15,
},
{rotateY: '180deg'},
],
},
yAxisLabelContainerStyle,
]}>
<Text
numberOfLines={yAxisTextNumberOfLines}
ellipsizeMode={'clip'}
style={[
yAxisTextStyle,
yAxisSide === 'right' && {
transform: [{rotateY: '180deg'}],
},
index === noOfSections && {
marginBottom: stepHeight / -2,
},
]}>
{label}
</Text>
</View>
);
})
/***********************************************************************************************/
/***********************************************************************************************/
}
{horizSectionsBelow.map((sectionItems, index) => {
return (
<View
key={index}
style={[
styles.horizBar,
{
width: (props.width ? props.width : totalWidth) + 15,
},
index === 0 && {marginTop: stepHeight / 2},
yAxisSide === 'right' && {transform: [{rotateY: '180deg'}]},
]}>
<View
style={[
styles.leftLabel,
{
borderRightWidth: yAxisThickness,
borderColor: yAxisColor,
marginLeft: yAxisThickness,
},
{
height: index === 0 ? stepHeight * 1.5 : stepHeight,
width: yAxisLabelWidth,
},
index === 0 && {marginTop: -stepHeight / 2},
]}
/>
<View
style={[styles.leftPart, {backgroundColor: backgroundColor}]}>
{hideRules ? null : (
<Rule
config={{
thickness: rulesThickness,
color: rulesColor,
width: rulesLength || (props.width || totalWidth) + 11,
dashWidth: dashWidth,
dashGap: dashGap,
type: rulesType,
}}
/>
)}
</View>
</View>
);
})}
{
/***********************************************************************************************/
/************************* Render the y axis labels below origin *********************/
/***********************************************************************************************/
props.hideAxesAndRules !== true &&
!hideYAxisText &&
horizSectionsBelow.map((sectionItems, index) => {
let label = getLabel(
horizSectionsBelow[horizSectionsBelow.length - 1 - index].value,
index,
);
return (
<View
key={index}
style={[
styles.horizBar,
styles.leftLabel,
{
position: 'absolute',
zIndex: 1,
bottom: stepHeight * (index - 1),
width: yAxisLabelWidth,
height:
index === noOfSections ? stepHeight / 2 : stepHeight,
},
yAxisSide === 'right' && {
transform: [
{
translateX:
(props.width ? props.width : totalWidth) - 15,
},
{rotateY: '180deg'},
],
},
yAxisLabelContainerStyle,
]}>
<Text
numberOfLines={yAxisTextNumberOfLines}
ellipsizeMode={'clip'}
style={[
yAxisTextStyle,
yAxisSide === 'right' && {
transform: [{rotateY: '180deg'}],
},
index === noOfSections && {
marginBottom: stepHeight / -2,
},
]}>
{label}
</Text>
</View>
);
})
/***********************************************************************************************/
/***********************************************************************************************/
}
{
/***********************************************************************************************/
/************************* Render the reference lines separately *********************/
/***********************************************************************************************/
props.hideAxesAndRules !== true &&
!hideYAxisText &&
horizSections.map((sectionItems, index) => {
let label = getLabel(sectionItems.value, index);
if (hideOrigin && index === horizSections.length - 1) {
label = '';
}
return (
<View
key={index}
style={[
styles.horizBar,
styles.leftLabel,
{
position: 'absolute',
zIndex: 1,
top: stepHeight * index,
width: yAxisLabelWidth,
height:
index === noOfSections ? stepHeight / 2 : stepHeight,
},
yAxisSide === 'right' && {
transform: [
{
translateX:
(props.width ? props.width : totalWidth) - 15,
},
{rotateY: '180deg'},
],
},
]}>
{index === noOfSections && showReferenceLine1 ? (
<View
style={{
position: 'absolute',
bottom:
(referenceLine1Position * containerHeight) / maxValue,
left:
yAxisSide === 'right'
? yAxisLabelWidth + yAxisThickness + 5
: yAxisLabelWidth + yAxisThickness,
}}>
<Rule config={referenceLine1Config} />
{referenceLine1Config.labelText ? (
<Text
style={[
{position: 'absolute'},
yAxisSide === 'right' && {
transform: [{rotateY: '180deg'}],
},
referenceLine1Config.labelTextStyle,
]}>
{referenceLine1Config.labelText}
</Text>
) : null}
</View>
) : null}
{index === noOfSections && showReferenceLine2 ? (
<View
style={{
position: 'absolute',
bottom:
(referenceLine2Position * containerHeight) / maxValue,
left:
yAxisSide === 'right'
? yAxisLabelWidth + yAxisThickness + 5
: yAxisLabelWidth + yAxisThickness,
}}>
<Rule config={referenceLine2Config} />
{referenceLine2Config.labelText ? (
<Text
style={[
{position: 'absolute'},
yAxisSide === 'right' && {
transform: [{rotateY: '180deg'}],
},
referenceLine2Config.labelTextStyle,
]}>
{referenceLine2Config.labelText}
</Text>
) : null}
</View>
) : null}
{index === noOfSections && showReferenceLine3 ? (
<View
style={{
position: 'absolute',
bottom:
(referenceLine3Position * containerHeight) / maxValue,
left:
yAxisSide === 'right'
? yAxisLabelWidth + yAxisThickness + 5
: yAxisLabelWidth + yAxisThickness,
}}>
<Rule config={referenceLine3Config} />
{referenceLine3Config.labelText ? (
<Text
style={[
{position: 'absolute'},
yAxisSide === 'right' && {
transform: [{rotateY: '180deg'}],
},
referenceLine3Config.labelTextStyle,
]}>
{referenceLine3Config.labelText}
</Text>
) : null}
</View>
) : null}
</View>
);
})
/***********************************************************************************************/
/***********************************************************************************************/
}
</>
);
};
const onStripPress = (item, index) => {
setSelectedIndex(index);
if (props.onPress) {
@ -1475,7 +1089,11 @@ export const LineChartBicolor = (props: propTypes) => {
: dataPointsColor
}
onPress={() => {
item.onPress ? item.onPress(item, index) : null;
item.onPress
? item.onPress(item, index)
: props.onPress
? props.onPress(item, index)
: null;
}}
/>
)}
@ -1499,7 +1117,11 @@ export const LineChartBicolor = (props: propTypes) => {
: dataPointsColor
}
onPress={() => {
item.onPress ? item.onPress(item, index) : null;
item.onPress
? item.onPress(item, index)
: props.onPress
? props.onPress(item, index)
: null;
}}
/>
)}
@ -1566,6 +1188,7 @@ export const LineChartBicolor = (props: propTypes) => {
if (item.showVerticalLine) {
return (
<Rect
key={index}
x={
initialSpacing -
(item.verticalLineThickness || 1) / 2 -
@ -1609,8 +1232,9 @@ export const LineChartBicolor = (props: propTypes) => {
strokeDashArray.length === 2 &&
typeof strokeDashArray[0] === 'number' &&
typeof strokeDashArray[1] === 'number'
? pointsArray.map(points => (
? pointsArray.map((points, index) => (
<Path
key={index}
d={points.points}
fill="none"
stroke={points.color === 'green' ? color : colorNegative}
@ -1618,9 +1242,10 @@ export const LineChartBicolor = (props: propTypes) => {
strokeDasharray={strokeDashArray}
/>
))
: pointsArray.map(points => {
: pointsArray.map((points, index) => {
return (
<Path
key={index}
d={points.points}
fill="none"
stroke={points.color === 'green' ? color : colorNegative}
@ -1670,9 +1295,10 @@ export const LineChartBicolor = (props: propTypes) => {
</>
)}
{areaChart
? fillPointsArray.map(item => {
? fillPointsArray.map((item, index) => {
return (
<Path
key={index}
d={item.points}
fill={
item.color === 'green'
@ -1781,6 +1407,66 @@ export const LineChartBicolor = (props: propTypes) => {
);
};
const horizSectionProps = {
width: props.width,
horizSections,
horizSectionsBelow,
totalWidth,
endSpacing,
yAxisSide,
horizontalRulesStyle,
noOfSections,
stepHeight,
yAxisLabelWidth,
yAxisLabelContainerStyle,
yAxisThickness,
yAxisColor,
xAxisThickness,
xAxisColor,
xAxisLength,
xAxisType,
dashWidth,
dashGap,
backgroundColor,
hideRules,
rulesLength,
rulesType,
rulesThickness,
rulesColor,
spacing,
showXAxisIndices,
xAxisIndicesHeight,
xAxisIndicesWidth,
xAxisIndicesColor,
hideOrigin,
hideYAxisText,
showFractionalValues,
yAxisTextNumberOfLines,
yAxisLabelPrefix,
yAxisLabelSuffix,
yAxisTextStyle,
containerHeight,
maxValue,
showReferenceLine1,
referenceLine1Position,
referenceLine1Config,
showReferenceLine2,
referenceLine2Position,
referenceLine2Config,
showReferenceLine3,
referenceLine3Position,
referenceLine3Config,
yAxisLabelTexts: props.yAxisLabelTexts,
yAxisOffset: props.yAxisOffset,
hideAxesAndRules: props.hideAxesAndRules,
};
return (
<View
style={[
@ -1793,7 +1479,8 @@ export const LineChartBicolor = (props: propTypes) => {
},
yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness},
]}>
{props.hideAxesAndRules !== true && renderHorizSections()}
{props.hideAxesAndRules !== true &&
renderHorizSections(horizSectionProps)}
{/* {sectionsOverlay()} */}
<ScrollView
horizontal
@ -1804,7 +1491,7 @@ export const LineChartBicolor = (props: propTypes) => {
130 +
horizSectionsBelow.length * stepHeight +
labelsExtraHeight,
width: totalWidth - 20,
width: totalWidth - spacing + endSpacing,
paddingBottom:
horizSectionsBelow.length * stepHeight + labelsExtraHeight,
// backgroundColor: 'yellow'
@ -1824,13 +1511,13 @@ export const LineChartBicolor = (props: propTypes) => {
{
marginLeft:
yAxisSide === 'right'
? -yAxisLabelWidth - yAxisThickness + 6
? -yAxisLabelWidth - yAxisThickness
: yAxisLabelWidth + yAxisThickness,
position: 'absolute',
bottom: stepHeight * -0.5 - 60, //stepHeight * -0.5 + xAxisThickness,
paddingRight: 100,
},
props.width && {width: props.width + 10},
props.width && {width: props.width + endSpacing},
]}>
{showVerticalLines &&
verticalLinesAr.map((item: itemType, index: number) => {

View File

@ -26,7 +26,7 @@ import Svg, {
Line,
} from 'react-native-svg';
import {svgPath, bezierCommand} from '../utils';
import Rule from '../Components/lineSvg';
import {renderHorizSections} from './renderHorizSections';
let initialData = null;
let animations = [];
@ -40,6 +40,7 @@ type propTypes = {
stepValue?: number;
spacing?: number;
initialSpacing?: number;
endSpacing?: number;
data?: Array<itemType>;
data2?: Array<itemType>;
data3?: Array<itemType>;
@ -101,12 +102,6 @@ type propTypes = {
showReferenceLine3?: Boolean;
referenceLine3Config?: referenceConfigType;
referenceLine3Position?: number;
showReferenceLine4?: Boolean;
referenceLine4Config?: referenceConfigType;
referenceLine4Position?: number;
showReferenceLine5?: Boolean;
referenceLine5Config?: referenceConfigType;
referenceLine5Position?: number;
showVerticalLines?: Boolean;
verticalLinesUptoDataPoint?: Boolean;
@ -562,19 +557,19 @@ export const LineChart = (props: propTypes) => {
newFillPoints = '';
let counter = 0;
const initialSpacing =
props.initialSpacing === 0 ? 0 : props.initialSpacing || 40;
const thickness = props.thickness || 2;
const adjustToWidth = props.adjustToWidth || false;
const initialSpacing =
props.initialSpacing === 0 ? 0 : props.initialSpacing || 20;
const endSpacing = props.endSpacing ?? (adjustToWidth ? 0 : 20);
const thickness = props.thickness || 2;
const spacing =
props.spacing === 0
? 0
: props.spacing ||
(adjustToWidth
? ((props.width || 200) - initialSpacing) / data.length
: 60);
props.spacing ??
(adjustToWidth
? ((props.width || 200) - initialSpacing) / (data.length - 1)
: 50);
const xAxisLength = props.xAxisLength;
const xAxisThickness =
@ -2004,7 +1999,7 @@ export const LineChart = (props: propTypes) => {
const defaultReferenceConfig = {
thickness: rulesThickness,
width: (props.width || totalWidth) + 11,
width: (props.width || totalWidth - spacing) + endSpacing,
color: 'black',
type: rulesType,
dashWidth: dashWidth,
@ -2022,7 +2017,9 @@ export const LineChart = (props: propTypes) => {
? {
thickness: props.referenceLine1Config.thickness || rulesThickness,
width:
(props.referenceLine1Config.width || props.width || totalWidth) + 11,
(props.referenceLine1Config.width ||
props.width ||
totalWidth - spacing) + endSpacing,
color: props.referenceLine1Config.color || 'black',
type: props.referenceLine1Config.type || rulesType,
dashWidth: props.referenceLine1Config.dashWidth || dashWidth,
@ -2045,7 +2042,9 @@ export const LineChart = (props: propTypes) => {
? {
thickness: props.referenceLine2Config.thickness || rulesThickness,
width:
(props.referenceLine2Config.width || props.width || totalWidth) + 11,
(props.referenceLine2Config.width ||
props.width ||
totalWidth - spacing) + endSpacing,
color: props.referenceLine2Config.color || 'black',
type: props.referenceLine2Config.type || rulesType,
dashWidth: props.referenceLine2Config.dashWidth || dashWidth,
@ -2068,7 +2067,9 @@ export const LineChart = (props: propTypes) => {
? {
thickness: props.referenceLine3Config.thickness || rulesThickness,
width:
(props.referenceLine3Config.width || props.width || totalWidth) + 11,
(props.referenceLine3Config.width ||
props.width ||
totalWidth - spacing) + endSpacing,
color: props.referenceLine3Config.color || 'black',
type: props.referenceLine3Config.type || rulesType,
dashWidth: props.referenceLine3Config.dashWidth || dashWidth,
@ -2222,392 +2223,6 @@ export const LineChart = (props: propTypes) => {
// )
// }
const getLabel = (val, index) => {
let label = '';
if (
showFractionalValues ||
(props.yAxisLabelTexts && props.yAxisLabelTexts[index] !== undefined)
) {
if (val) {
label = props.yAxisOffset
? (Number(val) + props.yAxisOffset).toString()
: val;
} else {
label = props.yAxisOffset ? props.yAxisOffset.toString() : '0';
}
} else {
if (val) {
label = val.toString().split('.')[0];
if (props.yAxisOffset) {
label = (Number(label) + props.yAxisOffset).toString();
}
} else {
label = props.yAxisOffset ? props.yAxisOffset.toString() : '0';
}
}
return yAxisLabelPrefix + label + yAxisLabelSuffix;
};
const renderHorizSections = () => {
return (
<>
{props.hideAxesAndRules !== true &&
horizSections.map((sectionItems, index) => {
return (
<View
key={index}
style={[
styles.horizBar,
{
width: (props.width ? props.width : totalWidth) + 15,
},
yAxisSide === 'right' && {transform: [{rotateY: '180deg'}]},
horizontalRulesStyle,
]}>
<View
style={[
styles.leftLabel,
{
height:
index === noOfSections ? stepHeight / 2 : stepHeight,
width: yAxisLabelWidth,
},
yAxisLabelContainerStyle,
]}
/>
<View
style={[
index === noOfSections
? styles.lastLeftPart
: styles.leftPart,
{
borderLeftWidth: yAxisThickness,
borderColor: yAxisColor,
backgroundColor: backgroundColor,
},
]}>
{index === noOfSections ? (
<Rule
config={{
thickness: xAxisThickness,
color: xAxisColor,
width: xAxisLength || (props.width || totalWidth) + 11,
dashWidth: dashWidth,
dashGap: dashGap,
type: xAxisType,
}}
/>
) : hideRules ? null : (
<Rule
config={{
thickness: rulesThickness,
color: rulesColor,
width: rulesLength || (props.width || totalWidth) + 11,
dashWidth: dashWidth,
dashGap: dashGap,
type: rulesType,
}}
/>
)}
{showXAxisIndices && index !== noOfSections ? (
<View
style={{
height: xAxisIndicesHeight,
width: xAxisIndicesWidth,
left: xAxisIndicesWidth / -2,
backgroundColor: xAxisIndicesColor,
}}
/>
) : null}
</View>
</View>
);
})}
{
/***********************************************************************************************/
/************************** Render the y axis labels separately **********************/
/***********************************************************************************************/
props.hideAxesAndRules !== true &&
!hideYAxisText &&
horizSections.map((sectionItems, index) => {
let label = getLabel(sectionItems.value, index);
if (hideOrigin && index === horizSections.length - 1) {
label = '';
}
return (
<View
key={index}
style={[
styles.horizBar,
styles.leftLabel,
{
position: 'absolute',
zIndex: 1,
top: stepHeight * index,
width: yAxisLabelWidth,
height:
index === noOfSections ? stepHeight / 2 : stepHeight,
},
yAxisSide === 'right' && {
transform: [
{
translateX:
(props.width ? props.width : totalWidth) - 15,
},
{rotateY: '180deg'},
],
},
yAxisLabelContainerStyle,
]}>
<Text
numberOfLines={yAxisTextNumberOfLines}
ellipsizeMode={'clip'}
style={[
yAxisTextStyle,
yAxisSide === 'right' && {
transform: [{rotateY: '180deg'}],
},
index === noOfSections && {
marginBottom: stepHeight / -2,
},
]}>
{label}
</Text>
</View>
);
})
/***********************************************************************************************/
/***********************************************************************************************/
}
{horizSectionsBelow.map((sectionItems, index) => {
return (
<View
key={index}
style={[
styles.horizBar,
{
width: (props.width ? props.width : totalWidth) + 15,
},
index === 0 && {marginTop: stepHeight / 2},
yAxisSide === 'right' && {transform: [{rotateY: '180deg'}]},
]}>
<View
style={[
styles.leftLabel,
{
borderRightWidth: yAxisThickness,
borderColor: yAxisColor,
marginLeft: yAxisThickness,
},
{
height: index === 0 ? stepHeight * 1.5 : stepHeight,
width: yAxisLabelWidth,
},
index === 0 && {marginTop: -stepHeight / 2},
]}
/>
<View
style={[styles.leftPart, {backgroundColor: backgroundColor}]}>
{hideRules ? null : (
<Rule
config={{
thickness: rulesThickness,
color: rulesColor,
width: rulesLength || (props.width || totalWidth) + 11,
dashWidth: dashWidth,
dashGap: dashGap,
type: rulesType,
}}
/>
)}
</View>
</View>
);
})}
{
/***********************************************************************************************/
/************************* Render the y axis labels below origin *********************/
/***********************************************************************************************/
props.hideAxesAndRules !== true &&
!hideYAxisText &&
horizSectionsBelow.map((sectionItems, index) => {
let label = getLabel(
horizSectionsBelow[horizSectionsBelow.length - 1 - index].value,
index,
);
return (
<View
key={index}
style={[
styles.horizBar,
styles.leftLabel,
{
position: 'absolute',
zIndex: 1,
bottom: stepHeight * (index - 1),
width: yAxisLabelWidth,
height:
index === noOfSections ? stepHeight / 2 : stepHeight,
},
yAxisSide === 'right' && {
transform: [
{
translateX:
(props.width ? props.width : totalWidth) - 15,
},
{rotateY: '180deg'},
],
},
yAxisLabelContainerStyle,
]}>
<Text
numberOfLines={yAxisTextNumberOfLines}
ellipsizeMode={'clip'}
style={[
yAxisTextStyle,
yAxisSide === 'right' && {
transform: [{rotateY: '180deg'}],
},
index === noOfSections && {
marginBottom: stepHeight / -2,
},
]}>
{label}
</Text>
</View>
);
})
/***********************************************************************************************/
/***********************************************************************************************/
}
{
/***********************************************************************************************/
/************************* Render the reference lines separately *********************/
/***********************************************************************************************/
props.hideAxesAndRules !== true &&
!hideYAxisText &&
horizSections.map((sectionItems, index) => {
let label = getLabel(sectionItems.value, index);
if (hideOrigin && index === horizSections.length - 1) {
label = '';
}
return (
<View
key={index}
style={[
styles.horizBar,
styles.leftLabel,
{
position: 'absolute',
zIndex: 1,
top: stepHeight * index,
width: yAxisLabelWidth,
height:
index === noOfSections ? stepHeight / 2 : stepHeight,
},
yAxisSide === 'right' && {
transform: [
{
translateX:
(props.width ? props.width : totalWidth) - 15,
},
{rotateY: '180deg'},
],
},
]}>
{index === noOfSections && showReferenceLine1 ? (
<View
style={{
position: 'absolute',
bottom:
(referenceLine1Position * containerHeight) / maxValue,
left:
yAxisSide === 'right'
? yAxisLabelWidth + yAxisThickness + 5
: yAxisLabelWidth + yAxisThickness,
}}>
<Rule config={referenceLine1Config} />
{referenceLine1Config.labelText ? (
<Text
style={[
{position: 'absolute'},
yAxisSide === 'right' && {
transform: [{rotateY: '180deg'}],
},
referenceLine1Config.labelTextStyle,
]}>
{referenceLine1Config.labelText}
</Text>
) : null}
</View>
) : null}
{index === noOfSections && showReferenceLine2 ? (
<View
style={{
position: 'absolute',
bottom:
(referenceLine2Position * containerHeight) / maxValue,
left:
yAxisSide === 'right'
? yAxisLabelWidth + yAxisThickness + 5
: yAxisLabelWidth + yAxisThickness,
}}>
<Rule config={referenceLine2Config} />
{referenceLine2Config.labelText ? (
<Text
style={[
{position: 'absolute'},
yAxisSide === 'right' && {
transform: [{rotateY: '180deg'}],
},
referenceLine2Config.labelTextStyle,
]}>
{referenceLine2Config.labelText}
</Text>
) : null}
</View>
) : null}
{index === noOfSections && showReferenceLine3 ? (
<View
style={{
position: 'absolute',
bottom:
(referenceLine3Position * containerHeight) / maxValue,
left:
yAxisSide === 'right'
? yAxisLabelWidth + yAxisThickness + 5
: yAxisLabelWidth + yAxisThickness,
}}>
<Rule config={referenceLine3Config} />
{referenceLine3Config.labelText ? (
<Text
style={[
{position: 'absolute'},
yAxisSide === 'right' && {
transform: [{rotateY: '180deg'}],
},
referenceLine3Config.labelTextStyle,
]}>
{referenceLine3Config.labelText}
</Text>
) : null}
</View>
) : null}
</View>
);
})
/***********************************************************************************************/
/***********************************************************************************************/
}
</>
);
};
const onStripPress = (item, index) => {
setSelectedIndex(index);
if (props.onPress) {
@ -2782,7 +2397,11 @@ export const LineChart = (props: propTypes) => {
: dataPointsColor
}
onPress={() => {
item.onPress ? item.onPress(item, index) : null;
item.onPress
? item.onPress(item, index)
: props.onPress
? props.onPress(item, index)
: null;
}}
/>
)}
@ -2806,7 +2425,11 @@ export const LineChart = (props: propTypes) => {
: dataPointsColor
}
onPress={() => {
item.onPress ? item.onPress(item, index) : null;
item.onPress
? item.onPress(item, index)
: props.onPress
? props.onPress(item, index)
: null;
}}
/>
)}
@ -2873,6 +2496,7 @@ export const LineChart = (props: propTypes) => {
if (item.showVerticalLine) {
return (
<Rect
key={index}
x={
initialSpacing -
(item.verticalLineThickness || 1) / 2 -
@ -3727,6 +3351,66 @@ export const LineChart = (props: propTypes) => {
);
};
const horizSectionProps = {
width: props.width,
horizSections,
horizSectionsBelow,
totalWidth,
endSpacing,
yAxisSide,
horizontalRulesStyle,
noOfSections,
stepHeight,
yAxisLabelWidth,
yAxisLabelContainerStyle,
yAxisThickness,
yAxisColor,
xAxisThickness,
xAxisColor,
xAxisLength,
xAxisType,
dashWidth,
dashGap,
backgroundColor,
hideRules,
rulesLength,
rulesType,
rulesThickness,
rulesColor,
spacing,
showXAxisIndices,
xAxisIndicesHeight,
xAxisIndicesWidth,
xAxisIndicesColor,
hideOrigin,
hideYAxisText,
showFractionalValues,
yAxisTextNumberOfLines,
yAxisLabelPrefix,
yAxisLabelSuffix,
yAxisTextStyle,
containerHeight,
maxValue,
showReferenceLine1,
referenceLine1Position,
referenceLine1Config,
showReferenceLine2,
referenceLine2Position,
referenceLine2Config,
showReferenceLine3,
referenceLine3Position,
referenceLine3Config,
yAxisLabelTexts: props.yAxisLabelTexts,
yAxisOffset: props.yAxisOffset,
hideAxesAndRules: props.hideAxesAndRules,
};
return (
<View
style={[
@ -3739,7 +3423,8 @@ export const LineChart = (props: propTypes) => {
},
yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness},
]}>
{props.hideAxesAndRules !== true && renderHorizSections()}
{props.hideAxesAndRules !== true &&
renderHorizSections(horizSectionProps)}
{/* {sectionsOverlay()} */}
<ScrollView
horizontal
@ -3750,7 +3435,7 @@ export const LineChart = (props: propTypes) => {
130 +
horizSectionsBelow.length * stepHeight +
labelsExtraHeight,
width: totalWidth - 20,
width: totalWidth - spacing + endSpacing,
paddingBottom:
horizSectionsBelow.length * stepHeight + labelsExtraHeight,
// backgroundColor: 'yellow'
@ -3779,13 +3464,13 @@ export const LineChart = (props: propTypes) => {
{
marginLeft:
yAxisSide === 'right'
? -yAxisLabelWidth - yAxisThickness + 6
? -yAxisLabelWidth - yAxisThickness
: yAxisLabelWidth + yAxisThickness,
position: 'absolute',
bottom: stepHeight * -0.5 - 60, //stepHeight * -0.5 + xAxisThickness,
paddingRight: 100,
},
props.width && {width: props.width + 10},
props.width && {width: props.width + endSpacing},
]}>
{showVerticalLines &&
verticalLinesAr.map((item: itemType, index: number) => {

View File

@ -0,0 +1,462 @@
import React from 'react';
import {Text, View} from 'react-native';
import Rule from '../Components/lineSvg';
import {styles} from './styles';
export const renderHorizSections = props => {
const {
horizSections,
horizSectionsBelow,
totalWidth,
endSpacing,
yAxisSide,
horizontalRulesStyle,
noOfSections,
stepHeight,
yAxisLabelWidth,
yAxisLabelContainerStyle,
yAxisThickness,
yAxisColor,
xAxisThickness,
xAxisColor,
xAxisLength,
xAxisType,
dashWidth,
dashGap,
backgroundColor,
hideRules,
rulesLength,
rulesType,
rulesThickness,
rulesColor,
spacing,
showXAxisIndices,
xAxisIndicesHeight,
xAxisIndicesWidth,
xAxisIndicesColor,
hideOrigin,
hideYAxisText,
showFractionalValues,
yAxisTextNumberOfLines,
yAxisLabelPrefix,
yAxisLabelSuffix,
yAxisTextStyle,
containerHeight,
maxValue,
showReferenceLine1,
referenceLine1Position,
referenceLine1Config,
showReferenceLine2,
referenceLine2Position,
referenceLine2Config,
showReferenceLine3,
referenceLine3Position,
referenceLine3Config,
yAxisLabelTexts,
yAxisOffset,
hideAxesAndRules,
} = props;
const getLabel = (val, index) => {
let label = '';
if (
showFractionalValues ||
(yAxisLabelTexts && yAxisLabelTexts[index] !== undefined)
) {
if (val) {
label = yAxisOffset ? (Number(val) + yAxisOffset).toString() : val;
} else {
label = yAxisOffset ? yAxisOffset.toString() : '0';
}
} else {
if (val) {
label = val.toString().split('.')[0];
if (yAxisOffset) {
label = (Number(label) + yAxisOffset).toString();
}
} else {
label = yAxisOffset ? yAxisOffset.toString() : '0';
}
}
return yAxisLabelPrefix + label + yAxisLabelSuffix;
};
return (
<>
{hideAxesAndRules !== true &&
horizSections.map((sectionItems, index) => {
return (
<View
key={index}
style={[
styles.horizBar,
{
width: (props.width ? props.width : totalWidth) + endSpacing,
},
yAxisSide === 'right' && {transform: [{rotateY: '180deg'}]},
horizontalRulesStyle,
]}>
<View
style={[
styles.leftLabel,
{
height:
index === noOfSections ? stepHeight / 2 : stepHeight,
width: yAxisLabelWidth,
},
yAxisLabelContainerStyle,
]}
/>
<View
style={[
index === noOfSections
? styles.lastLeftPart
: styles.leftPart,
{
borderLeftWidth: yAxisThickness,
borderColor: yAxisColor,
backgroundColor: backgroundColor,
},
]}>
{index === noOfSections ? (
<Rule
config={{
thickness: xAxisThickness,
color: xAxisColor,
width:
xAxisLength ||
(props.width || totalWidth - spacing) + endSpacing,
dashWidth: dashWidth,
dashGap: dashGap,
type: xAxisType,
}}
/>
) : hideRules ? null : (
<Rule
config={{
thickness: rulesThickness,
color: rulesColor,
width:
rulesLength ||
(props.width || totalWidth - spacing) + endSpacing,
dashWidth: dashWidth,
dashGap: dashGap,
type: rulesType,
}}
/>
)}
{showXAxisIndices && index !== noOfSections ? (
<View
style={{
height: xAxisIndicesHeight,
width: xAxisIndicesWidth,
left: xAxisIndicesWidth / -2,
backgroundColor: xAxisIndicesColor,
}}
/>
) : null}
</View>
</View>
);
})}
{
/***********************************************************************************************/
/************************** Render the y axis labels separately **********************/
/***********************************************************************************************/
hideAxesAndRules !== true &&
!hideYAxisText &&
horizSections.map((sectionItems, index) => {
let label = getLabel(sectionItems.value, index);
if (hideOrigin && index === horizSections.length - 1) {
label = '';
}
return (
<View
key={index}
style={[
styles.horizBar,
styles.leftLabel,
{
position: 'absolute',
zIndex: 1,
top: stepHeight * index,
width: yAxisLabelWidth,
height:
index === noOfSections ? stepHeight / 2 : stepHeight,
},
yAxisSide === 'right' && {
transform: [
{
translateX:
(props.width ? props.width : totalWidth) -
30 +
endSpacing,
},
{rotateY: '180deg'},
],
},
yAxisLabelContainerStyle,
]}>
<Text
numberOfLines={yAxisTextNumberOfLines}
ellipsizeMode={'clip'}
style={[
yAxisTextStyle,
yAxisSide === 'right' && {
transform: [{rotateY: '180deg'}],
},
index === noOfSections && {
marginBottom: stepHeight / -2,
},
]}>
{label}
</Text>
</View>
);
})
/***********************************************************************************************/
/***********************************************************************************************/
}
{horizSectionsBelow.map((sectionItems, index) => {
return (
<View
key={index}
style={[
styles.horizBar,
{
width: (props.width ? props.width : totalWidth) + 15,
},
index === 0 && {marginTop: stepHeight / 2},
yAxisSide === 'right' && {
transform: [
{rotateY: '180deg'},
{translateX: 14.5 - endSpacing},
],
},
]}>
<View
style={[
styles.leftLabel,
{
borderRightWidth: yAxisThickness,
borderColor: yAxisColor,
marginLeft: yAxisThickness,
},
{
height: index === 0 ? stepHeight * 1.5 : stepHeight,
width: yAxisLabelWidth,
},
index === 0 && {marginTop: -stepHeight / 2},
]}
/>
<View style={[styles.leftPart, {backgroundColor: backgroundColor}]}>
{hideRules ? null : (
<Rule
config={{
thickness: rulesThickness,
color: rulesColor,
width:
rulesLength ||
(props.width || totalWidth - spacing) + endSpacing,
dashWidth: dashWidth,
dashGap: dashGap,
type: rulesType,
}}
/>
)}
</View>
</View>
);
})}
{
/***********************************************************************************************/
/************************* Render the y axis labels below origin *********************/
/***********************************************************************************************/
hideAxesAndRules !== true &&
!hideYAxisText &&
horizSectionsBelow.map((sectionItems, index) => {
let label = getLabel(
horizSectionsBelow[horizSectionsBelow.length - 1 - index].value,
index,
);
return (
<View
key={index}
style={[
styles.horizBar,
styles.leftLabel,
{
position: 'absolute',
zIndex: 1,
bottom: stepHeight * (index - 1),
width: yAxisLabelWidth,
height:
index === noOfSections ? stepHeight / 2 : stepHeight,
},
yAxisSide === 'right' && {
transform: [
{
translateX:
(props.width ? props.width : totalWidth) -
30 +
endSpacing,
},
{rotateY: '180deg'},
],
},
yAxisLabelContainerStyle,
]}>
<Text
numberOfLines={yAxisTextNumberOfLines}
ellipsizeMode={'clip'}
style={[
yAxisTextStyle,
yAxisSide === 'right' && {
transform: [{rotateY: '180deg'}],
},
index === noOfSections && {
marginBottom: stepHeight / -2,
},
]}>
{label}
</Text>
</View>
);
})
/***********************************************************************************************/
/***********************************************************************************************/
}
{
/***********************************************************************************************/
/************************* Render the reference lines separately *********************/
/***********************************************************************************************/
hideAxesAndRules !== true &&
!hideYAxisText &&
horizSections.map((sectionItems, index) => {
let label = getLabel(sectionItems.value, index);
if (hideOrigin && index === horizSections.length - 1) {
label = '';
}
return (
<View
key={index}
style={[
styles.horizBar,
styles.leftLabel,
{
position: 'absolute',
zIndex: 1,
top: stepHeight * index,
width: yAxisLabelWidth,
height:
index === noOfSections ? stepHeight / 2 : stepHeight,
},
yAxisSide === 'right' && {
transform: [
{
translateX:
(props.width ? props.width : totalWidth) -
30 +
endSpacing,
},
{rotateY: '180deg'},
],
},
]}>
{index === noOfSections && showReferenceLine1 ? (
<View
style={{
position: 'absolute',
bottom:
(referenceLine1Position * containerHeight) / maxValue,
left:
yAxisSide === 'right'
? yAxisLabelWidth + yAxisThickness + 5
: yAxisLabelWidth + yAxisThickness,
}}>
<Rule config={referenceLine1Config} />
{referenceLine1Config.labelText ? (
<Text
style={[
{position: 'absolute'},
yAxisSide === 'right' && {
transform: [{rotateY: '180deg'}],
},
referenceLine1Config.labelTextStyle,
]}>
{referenceLine1Config.labelText}
</Text>
) : null}
</View>
) : null}
{index === noOfSections && showReferenceLine2 ? (
<View
style={{
position: 'absolute',
bottom:
(referenceLine2Position * containerHeight) / maxValue,
left:
yAxisSide === 'right'
? yAxisLabelWidth + yAxisThickness + 5
: yAxisLabelWidth + yAxisThickness,
}}>
<Rule config={referenceLine2Config} />
{referenceLine2Config.labelText ? (
<Text
style={[
{position: 'absolute'},
yAxisSide === 'right' && {
transform: [{rotateY: '180deg'}],
},
referenceLine2Config.labelTextStyle,
]}>
{referenceLine2Config.labelText}
</Text>
) : null}
</View>
) : null}
{index === noOfSections && showReferenceLine3 ? (
<View
style={{
position: 'absolute',
bottom:
(referenceLine3Position * containerHeight) / maxValue,
left:
yAxisSide === 'right'
? yAxisLabelWidth + yAxisThickness + 5
: yAxisLabelWidth + yAxisThickness,
}}>
<Rule config={referenceLine3Config} />
{referenceLine3Config.labelText ? (
<Text
style={[
{position: 'absolute'},
yAxisSide === 'right' && {
transform: [{rotateY: '180deg'}],
},
referenceLine3Config.labelTextStyle,
]}>
{referenceLine3Config.labelText}
</Text>
) : null}
</View>
) : null}
</View>
);
})
/***********************************************************************************************/
/***********************************************************************************************/
}
</>
);
};

View File

@ -131,6 +131,8 @@ export const PieChart = (props: propTypes) => {
initialAngle={startAngle}
showText={false}
innerRadius={props.innerRadius || radius / 2.5}
isBiggerPie
setSelectedIndex={setSelectedIndex}
/>
</View>
)}

View File

@ -53,6 +53,7 @@ type propTypes = {
selectedIndex?: number;
setSelectedIndex?: Function;
onLabelPress?: Function;
isBiggerPie?: Boolean
};
type itemType = {
value: number;
@ -312,7 +313,7 @@ export const PieChartMain = (props: propTypes) => {
props.onPress(item, index);
}
if (props.focusOnPress) {
if (props.selectedIndex === index) {
if (props.selectedIndex === index || props.isBiggerPie) {
if (toggleFocusOnPress) {
props.setSelectedIndex(-1);
}