mirror of
https://github.com/status-im/react-native-gifted-charts.git
synced 2025-02-22 16:48:07 +00:00
separated y axis labels and reference lines from horizontal rules
This commit is contained in:
Abhinandan-Kushwaha
parent
027aecce2e
commit
588703b8c9
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-native-gifted-charts",
|
||||
"version": "1.0.20",
|
||||
"version": "1.0.21",
|
||||
"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": [
|
||||
|
||||
@ -646,10 +646,6 @@ export const BarChart = (props: PropTypes) => {
|
||||
return (
|
||||
<>
|
||||
{horizSections.map((sectionItems, index) => {
|
||||
let label = getLabel(sectionItems.value);
|
||||
if (hideOrigin && index === horizSections.length - 1) {
|
||||
label = '';
|
||||
}
|
||||
return (
|
||||
<View
|
||||
key={index}
|
||||
@ -680,29 +676,7 @@ export const BarChart = (props: PropTypes) => {
|
||||
width: yAxisLabelWidth,
|
||||
},
|
||||
yAxisLabelContainerStyle,
|
||||
]}>
|
||||
{!hideYAxisText ? (
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
ellipsizeMode={'clip'}
|
||||
style={[
|
||||
yAxisTextStyle,
|
||||
index === noOfSections && {marginBottom: stepHeight / -2},
|
||||
horizontal
|
||||
? {
|
||||
transform: [
|
||||
{rotate: '270deg'},
|
||||
{translateY: yAxisAtTop ? 0 : 50},
|
||||
],
|
||||
}
|
||||
: yAxisSide === 'right' && {
|
||||
transform: [{rotateY: '180deg'}],
|
||||
},
|
||||
]}>
|
||||
{label}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
]}/>
|
||||
<View
|
||||
style={[
|
||||
index === noOfSections
|
||||
@ -731,100 +705,68 @@ export const BarChart = (props: PropTypes) => {
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{index === noOfSections && showReferenceLine1 ? (
|
||||
<View
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom:
|
||||
(referenceLine1Position * containerHeight) / maxValue,
|
||||
}}>
|
||||
<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,
|
||||
}}>
|
||||
<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,
|
||||
}}>
|
||||
<Rule config={referenceLine3Config} />
|
||||
{referenceLine3Config.labelText ? (
|
||||
<Text
|
||||
style={[
|
||||
{position: 'absolute'},
|
||||
yAxisSide === 'right' && {
|
||||
transform: [{rotateY: '180deg'}],
|
||||
},
|
||||
referenceLine3Config.labelTextStyle,
|
||||
]}>
|
||||
{referenceLine3Config.labelText}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
) : null}
|
||||
{showYAxisIndices && index !== noOfSections ? (
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
position: 'absolute',
|
||||
height: yAxisIndicesHeight,
|
||||
width: yAxisIndicesWidth,
|
||||
left: yAxisIndicesWidth / -2,
|
||||
backgroundColor: yAxisIndicesColor,
|
||||
},
|
||||
horizontal &&
|
||||
!yAxisAtTop && {
|
||||
transform: [
|
||||
{translateX: totalWidth + yAxisThickness},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
) : null}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
|
||||
{
|
||||
/***********************************************************************************************/
|
||||
/************************** Render the y axis labels separately **********************/
|
||||
/***********************************************************************************************/
|
||||
props.hideAxesAndRules !== true &&
|
||||
!hideYAxisText &&
|
||||
horizSections.map((sectionItems, index) => {
|
||||
let label = getLabel(sectionItems.value);
|
||||
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,
|
||||
},
|
||||
{rotateY: '180deg'},
|
||||
],
|
||||
},
|
||||
yAxisLabelContainerStyle,
|
||||
]}>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
ellipsizeMode={'clip'}
|
||||
style={[
|
||||
yAxisTextStyle,
|
||||
yAxisSide === 'right' && {
|
||||
transform: [{rotateY: '180deg'}],
|
||||
},
|
||||
index === noOfSections && {
|
||||
marginBottom: stepHeight / -2,
|
||||
},
|
||||
]}>
|
||||
{label}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
})
|
||||
/***********************************************************************************************/
|
||||
/***********************************************************************************************/
|
||||
}
|
||||
{horizSectionsBelow.map((sectionItems, index) => {
|
||||
let label = getLabel(sectionItems.value);
|
||||
if (hideOrigin && index === horizSections.length - 1) {
|
||||
label = '';
|
||||
}
|
||||
return (
|
||||
<View
|
||||
key={index}
|
||||
@ -854,28 +796,7 @@ export const BarChart = (props: PropTypes) => {
|
||||
width: yAxisLabelWidth,
|
||||
},
|
||||
index === 0 && {marginTop: -stepHeight / 2},
|
||||
]}>
|
||||
{!hideYAxisText ? (
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
ellipsizeMode={'clip'}
|
||||
style={[
|
||||
yAxisTextStyle,
|
||||
index === 0 && {marginBottom: stepHeight / -2},
|
||||
horizontal && {
|
||||
transform: [
|
||||
{rotate: '270deg'},
|
||||
{translateY: yAxisAtTop ? 0 : 50},
|
||||
],
|
||||
},
|
||||
yAxisSide === 'right' && {
|
||||
transform: [{rotateY: '180deg'}],
|
||||
},
|
||||
]}>
|
||||
{label}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
]}/>
|
||||
<View
|
||||
style={[styles.leftPart, {backgroundColor: backgroundColor}]}>
|
||||
{hideRules ? null : (
|
||||
@ -896,6 +817,179 @@ export const BarChart = (props: PropTypes) => {
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
{
|
||||
/***********************************************************************************************/
|
||||
/************************* Render the y axis labels below origin *********************/
|
||||
/***********************************************************************************************/
|
||||
props.hideAxesAndRules !== true &&
|
||||
!hideYAxisText &&
|
||||
horizSectionsBelow.map((sectionItems, index) => {
|
||||
let label = getLabel(sectionItems.value);
|
||||
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,
|
||||
},
|
||||
{rotateY: '180deg'},
|
||||
],
|
||||
},
|
||||
yAxisLabelContainerStyle,
|
||||
]}>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
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);
|
||||
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,
|
||||
},
|
||||
{rotateY: '180deg'},
|
||||
],
|
||||
},
|
||||
]}>
|
||||
{index === noOfSections && showReferenceLine1 ? (
|
||||
<View
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom:
|
||||
(referenceLine1Position * containerHeight) / maxValue,
|
||||
left:
|
||||
yAxisSide === 'right'
|
||||
? yAxisLabelWidth + yAxisThickness
|
||||
: yAxisLabelWidth + yAxisThickness - 5,
|
||||
}}>
|
||||
<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
|
||||
: yAxisLabelWidth + yAxisThickness - 5,
|
||||
}}>
|
||||
<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
|
||||
: yAxisLabelWidth + yAxisThickness - 5,
|
||||
}}>
|
||||
<Rule config={referenceLine3Config} />
|
||||
{referenceLine3Config.labelText ? (
|
||||
<Text
|
||||
style={[
|
||||
{position: 'absolute'},
|
||||
yAxisSide === 'right' && {
|
||||
transform: [{rotateY: '180deg'}],
|
||||
},
|
||||
referenceLine3Config.labelTextStyle,
|
||||
]}>
|
||||
{referenceLine3Config.labelText}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
) : null}
|
||||
</View>
|
||||
);
|
||||
})
|
||||
/***********************************************************************************************/
|
||||
/***********************************************************************************************/
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1597,10 +1597,6 @@ export const LineChart = (props: propTypes) => {
|
||||
<>
|
||||
{props.hideAxesAndRules !== true &&
|
||||
horizSections.map((sectionItems, index) => {
|
||||
let label = getLabel(sectionItems.value);
|
||||
if (hideOrigin && index === horizSections.length - 1) {
|
||||
label = '';
|
||||
}
|
||||
return (
|
||||
<View
|
||||
key={index}
|
||||
@ -1621,24 +1617,8 @@ export const LineChart = (props: propTypes) => {
|
||||
width: yAxisLabelWidth,
|
||||
},
|
||||
yAxisLabelContainerStyle,
|
||||
]}>
|
||||
{!hideYAxisText ? (
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
ellipsizeMode={'clip'}
|
||||
style={[
|
||||
yAxisTextStyle,
|
||||
yAxisSide === 'right' && {
|
||||
transform: [{rotateY: '180deg'}],
|
||||
},
|
||||
index === noOfSections && {
|
||||
marginBottom: stepHeight / -2,
|
||||
},
|
||||
]}>
|
||||
{label}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
index === noOfSections
|
||||
@ -1669,12 +1649,223 @@ export const LineChart = (props: propTypes) => {
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{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);
|
||||
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={1}
|
||||
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: (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(sectionItems.value);
|
||||
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={1}
|
||||
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);
|
||||
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 ? (
|
||||
@ -1697,6 +1888,10 @@ export const LineChart = (props: propTypes) => {
|
||||
position: 'absolute',
|
||||
bottom:
|
||||
(referenceLine2Position * containerHeight) / maxValue,
|
||||
left:
|
||||
yAxisSide === 'right'
|
||||
? yAxisLabelWidth + yAxisThickness + 5
|
||||
: yAxisLabelWidth + yAxisThickness,
|
||||
}}>
|
||||
<Rule config={referenceLine2Config} />
|
||||
{referenceLine2Config.labelText ? (
|
||||
@ -1719,6 +1914,10 @@ export const LineChart = (props: propTypes) => {
|
||||
position: 'absolute',
|
||||
bottom:
|
||||
(referenceLine3Position * containerHeight) / maxValue,
|
||||
left:
|
||||
yAxisSide === 'right'
|
||||
? yAxisLabelWidth + yAxisThickness + 5
|
||||
: yAxisLabelWidth + yAxisThickness,
|
||||
}}>
|
||||
<Rule config={referenceLine3Config} />
|
||||
{referenceLine3Config.labelText ? (
|
||||
@ -1735,84 +1934,12 @@ export const LineChart = (props: propTypes) => {
|
||||
) : null}
|
||||
</View>
|
||||
) : null}
|
||||
{showXAxisIndices && index !== noOfSections ? (
|
||||
<View
|
||||
style={{
|
||||
height: xAxisIndicesHeight,
|
||||
width: xAxisIndicesWidth,
|
||||
left: xAxisIndicesWidth / -2,
|
||||
backgroundColor: xAxisIndicesColor,
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
|
||||
{horizSectionsBelow.map((sectionItems, index) => {
|
||||
let label = getLabel(sectionItems.value);
|
||||
if (hideOrigin && index === horizSections.length - 1) {
|
||||
label = '';
|
||||
}
|
||||
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: 1,
|
||||
},
|
||||
{
|
||||
height: index === 0 ? stepHeight * 1.5 : stepHeight,
|
||||
width: yAxisLabelWidth,
|
||||
},
|
||||
index === 0 && {marginTop: -stepHeight / 2},
|
||||
]}>
|
||||
{!hideYAxisText ? (
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
ellipsizeMode={'clip'}
|
||||
style={[
|
||||
yAxisTextStyle,
|
||||
index === 0 && {marginBottom: stepHeight / -2},
|
||||
yAxisSide === 'right' && {
|
||||
transform: [{rotateY: '180deg'}],
|
||||
},
|
||||
]}>
|
||||
{label}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
<View
|
||||
style={[styles.leftPart, {backgroundColor: backgroundColor}]}>
|
||||
{hideRules ? null : (
|
||||
<Rule
|
||||
config={{
|
||||
thickness: rulesThickness,
|
||||
color: rulesColor,
|
||||
width: (props.width || totalWidth) + 11,
|
||||
dashWidth: dashWidth,
|
||||
dashGap: dashGap,
|
||||
type: rulesType,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
);
|
||||
})
|
||||
/***********************************************************************************************/
|
||||
/***********************************************************************************************/
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user