From 588703b8c9b52e8c03fd9975d8b4be617db0b5c3 Mon Sep 17 00:00:00 2001 From: Abhinandan-Kushwaha Date: Sun, 17 Apr 2022 14:50:12 +0530 Subject: [PATCH] separated y axis labels and reference lines from horizontal rules --- package.json | 2 +- src/BarChart/index.tsx | 370 +++++++++++++++++++++++++--------------- src/LineChart/index.tsx | 325 ++++++++++++++++++++++++----------- 3 files changed, 459 insertions(+), 238 deletions(-) diff --git a/package.json b/package.json index ac47f68..c42f29e 100644 --- a/package.json +++ b/package.json @@ -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": [ diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx index 28f81b5..f813d17 100644 --- a/src/BarChart/index.tsx +++ b/src/BarChart/index.tsx @@ -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 ( { width: yAxisLabelWidth, }, yAxisLabelContainerStyle, - ]}> - {!hideYAxisText ? ( - - {label} - - ) : null} - + ]}/> { }} /> )} - {index === noOfSections && showReferenceLine1 ? ( - - - {referenceLine1Config.labelText ? ( - - {referenceLine1Config.labelText} - - ) : null} - - ) : null} - {index === noOfSections && showReferenceLine2 ? ( - - - {referenceLine2Config.labelText ? ( - - {referenceLine2Config.labelText} - - ) : null} - - ) : null} - {index === noOfSections && showReferenceLine3 ? ( - - - {referenceLine3Config.labelText ? ( - - {referenceLine3Config.labelText} - - ) : null} - - ) : null} - {showYAxisIndices && index !== noOfSections ? ( - - ) : null} ); })} + + { + /***********************************************************************************************/ + /************************** 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 ( + + + {label} + + + ); + }) + /***********************************************************************************************/ + /***********************************************************************************************/ + } {horizSectionsBelow.map((sectionItems, index) => { - let label = getLabel(sectionItems.value); - if (hideOrigin && index === horizSections.length - 1) { - label = ''; - } return ( { width: yAxisLabelWidth, }, index === 0 && {marginTop: -stepHeight / 2}, - ]}> - {!hideYAxisText ? ( - - {label} - - ) : null} - + ]}/> {hideRules ? null : ( @@ -896,6 +817,179 @@ export const BarChart = (props: PropTypes) => { ); })} + { + /***********************************************************************************************/ + /************************* Render the y axis labels below origin *********************/ + /***********************************************************************************************/ + props.hideAxesAndRules !== true && + !hideYAxisText && + horizSectionsBelow.map((sectionItems, index) => { + let label = getLabel(sectionItems.value); + return ( + + + {label} + + + ); + }) + /***********************************************************************************************/ + /***********************************************************************************************/ + } + + { + /***********************************************************************************************/ + /************************* 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 ( + + {index === noOfSections && showReferenceLine1 ? ( + + + {referenceLine1Config.labelText ? ( + + {referenceLine1Config.labelText} + + ) : null} + + ) : null} + {index === noOfSections && showReferenceLine2 ? ( + + + {referenceLine2Config.labelText ? ( + + {referenceLine2Config.labelText} + + ) : null} + + ) : null} + {index === noOfSections && showReferenceLine3 ? ( + + + {referenceLine3Config.labelText ? ( + + {referenceLine3Config.labelText} + + ) : null} + + ) : null} + + ); + }) + /***********************************************************************************************/ + /***********************************************************************************************/ + } ); }; diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx index 851d808..87e5610 100644 --- a/src/LineChart/index.tsx +++ b/src/LineChart/index.tsx @@ -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 ( { width: yAxisLabelWidth, }, yAxisLabelContainerStyle, - ]}> - {!hideYAxisText ? ( - - {label} - - ) : null} - + ]} + /> { }} /> )} + {showXAxisIndices && index !== noOfSections ? ( + + ) : null} + + + ); + })} + + { + /***********************************************************************************************/ + /************************** 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 ( + + + {label} + + + ); + }) + /***********************************************************************************************/ + /***********************************************************************************************/ + } + + {horizSectionsBelow.map((sectionItems, index) => { + return ( + + + + {hideRules ? null : ( + + )} + + + ); + })} + + { + /***********************************************************************************************/ + /************************* Render the y axis labels below origin *********************/ + /***********************************************************************************************/ + props.hideAxesAndRules !== true && + !hideYAxisText && + horizSectionsBelow.map((sectionItems, index) => { + let label = getLabel(sectionItems.value); + return ( + + + {label} + + + ); + }) + /***********************************************************************************************/ + /***********************************************************************************************/ + } + + { + /***********************************************************************************************/ + /************************* 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 ( + {index === noOfSections && showReferenceLine1 ? ( {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, }}> {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, }}> {referenceLine3Config.labelText ? ( @@ -1735,84 +1934,12 @@ export const LineChart = (props: propTypes) => { ) : null} ) : null} - {showXAxisIndices && index !== noOfSections ? ( - - ) : null} - - ); - })} - - {horizSectionsBelow.map((sectionItems, index) => { - let label = getLabel(sectionItems.value); - if (hideOrigin && index === horizSections.length - 1) { - label = ''; - } - return ( - - - {!hideYAxisText ? ( - - {label} - - ) : null} - - - {hideRules ? null : ( - - )} - - - ); - })} + ); + }) + /***********************************************************************************************/ + /***********************************************************************************************/ + } ); };