Merge pull request #334 from Abhinandan-Kushwaha/development
Development
This commit is contained in:
Abhinandan Kushwaha
GitHub
commit
387d7aa2e6
250
App.js
250
App.js
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
})
|
||||
/***********************************************************************************************/
|
||||
/***********************************************************************************************/
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -131,6 +131,8 @@ export const PieChart = (props: propTypes) => {
|
|||
initialAngle={startAngle}
|
||||
showText={false}
|
||||
innerRadius={props.innerRadius || radius / 2.5}
|
||||
isBiggerPie
|
||||
setSelectedIndex={setSelectedIndex}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue