status-im
/
react-native-gifted-charts
mirror of https://github.com/status-im/react-native-gifted-charts.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added yAxisTextNumberOfLines and xAxisTextNumberOfLines to Bar, Line and Area charts

This commit is contained in:
Abhinandan-Kushwaha 2022-05-07 08:19:10 +05:30
parent e8fa2adbd5
commit 42658e11de
7 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/BarChart/BarChartProps.md
View File

@ -118,6 +118,7 @@ The properties of this line chart can be controlled using the `lineConfig` prop
| yAxisThickness | number | Y axis thickness | 1 |
| yAxisLabelWidth | number | Width of the Y axis Label container | 35 |
| yAxisTextStyle | object | Style object for the Y axis text style | \_ |
| yAxisTextNumberOfLines | number | Number of lines for y axis label text | 1 |
| yAxisLabelContainerStyle | object | Style object for the Y axis label container | \_ |
| horizontalRulesStyle | object | Style object for the horizontal rules container | \_ |
| showFractionalValues | Boolean | Allow fractional values for the Y axis label | false |
@ -160,6 +161,7 @@ The properties of this line chart can be controlled using the `lineConfig` prop
| rotateLabel | Boolean | To rotate the X axis labels (by 60deg) | false |
| hideOrigin | Boolean | To hide the y Axis label at origin (i.e. 0) | false |
| labelWidth | number | Width of the Label text appearing below the bar (under the X axis) | barWidth |
| xAxisTextNumberOfLines | number | Number of lines for x axis label text | 1 |
| labelsExtraHeight | number | used to display large labels on X-axis (often rotated to show vertically) | 0 |
**Note** If you are setting yAxisSide to 'right', make sure to specify the width of the chart, using the `width` prop

2
docs/LineChart/LineChartProps.md
View File

@ -99,6 +99,7 @@ When you are using the `dataPointLabelComponent`, make sure to provide the `data
| yAxisThickness | number | Y axis thickness | 1 |
| yAxisLabelWidth | number | Width of the Y axis Label container | 35 |
| yAxisTextStyle | object | Style object for the Y axis text style | \_ |
| yAxisTextNumberOfLines | number | Number of lines for y axis label text | 1 |
| yAxisLabelContainerStyle | object | Style object for the Y axis label container | \_ |
| yAxisOffset | number | Starting value on Y Axis | 0 |
| horizontalRulesStyle | object | Style object for the horizontal rules container | \_ |
@ -146,6 +147,7 @@ When you are using the `dataPointLabelComponent`, make sure to provide the `data
| yAxisLabelTexts | Array<string> | Array of label texts to be displayed along y axis | null |
| xAxisLabelTexts | Array<string> | Array of label texts to be displayed below x axis | null |
| xAxisLabelTextStyle | object | Style of label texts to be displayed below x axis | null |
| xAxisTextNumberOfLines | number | Number of lines for x axis label text | 1 |
| rotateLabel | Boolean | To rotate the X axis labels (by 60deg) | false |
| hideOrigin | Boolean | To hide the y Axis label at origin (i.e. 0) | false |

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-native-gifted-charts",
"version": "1.2.16",
"version": "1.2.17",
"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": [

6
src/BarChart/RenderBars.tsx
View File

@ -64,6 +64,7 @@ type Props = {
patternId?: String;
barMarginBottom?: number;
onPress?: Function;
xAxisTextNumberOfLines: number;
};
type itemType = {
value?: number;
@ -112,6 +113,7 @@ const RenderBars = (props: Props) => {
autoShiftLabels,
label,
labelTextStyle,
xAxisTextNumberOfLines,
} = props;
const barMarginBottom =
@ -161,7 +163,7 @@ const RenderBars = (props: Props) => {
) : (
<Text
style={labelTextStyle || {textAlign: 'center'}}
numberOfLines={1}>
numberOfLines={xAxisTextNumberOfLines}>
{label || ''}
</Text>
)}
@ -204,7 +206,7 @@ const RenderBars = (props: Props) => {
) : (
<Text
style={labelTextStyle || {textAlign: 'center'}}
numberOfLines={1}>
numberOfLines={xAxisTextNumberOfLines}>
{label || ''}
</Text>
)}

4
src/BarChart/RenderStackBars.tsx
View File

@ -38,6 +38,7 @@ type Props = {
xAxisThickness: number;
barBackgroundPattern?: Function;
patternId?: String;
xAxisTextNumberOfLines: number;
};
type itemType = {
value?: number;
@ -69,6 +70,7 @@ const RenderStackBars = (props: Props) => {
xAxisThickness,
label,
labelTextStyle,
xAxisTextNumberOfLines,
} = props;
const disablePress = props.disablePress || false;
const renderLabel = (label: String, labelTextStyle: any) => {
@ -92,7 +94,7 @@ const RenderStackBars = (props: Props) => {
{item.labelComponent ? (
item.labelComponent()
) : (
<Text style={[labelTextStyle]} numberOfLines={1}>
<Text style={[labelTextStyle]} numberOfLines={xAxisTextNumberOfLines}>
{label || ''}
</Text>
)}

10
src/BarChart/index.tsx
View File

@ -47,6 +47,8 @@ type PropTypes = {
yAxisLabelContainerStyle?: any;
horizontalRulesStyle?: any;
yAxisTextStyle?: any;
yAxisTextNumberOfLines?: number;
xAxisTextNumberOfLines?: number;
yAxisLabelWidth?: number;
hideYAxisText?: Boolean;
yAxisSide?: string;
@ -372,6 +374,8 @@ export const BarChart = (props: PropTypes) => {
: props.yAxisThickness || 1;
const yAxisColor = props.yAxisColor || 'black';
const yAxisTextStyle = props.yAxisTextStyle;
const yAxisTextNumberOfLines = props.yAxisTextNumberOfLines || 1;
const xAxisTextNumberOfLines = props.xAxisTextNumberOfLines || 1;
const yAxisLabelContainerStyle = props.yAxisLabelContainerStyle;
const horizontalRulesStyle = props.horizontalRulesStyle;
const showFractionalValues = props.showFractionalValues || false;
@ -768,7 +772,7 @@ export const BarChart = (props: PropTypes) => {
yAxisLabelContainerStyle,
]}>
<Text
numberOfLines={1}
numberOfLines={yAxisTextNumberOfLines}
ellipsizeMode={'clip'}
style={[
yAxisTextStyle,
@ -875,7 +879,7 @@ export const BarChart = (props: PropTypes) => {
yAxisLabelContainerStyle,
]}>
<Text
numberOfLines={1}
numberOfLines={yAxisTextNumberOfLines}
ellipsizeMode={'clip'}
style={[
yAxisTextStyle,
@ -1399,6 +1403,7 @@ export const BarChart = (props: PropTypes) => {
labelTextStyle={
item.labelTextStyle || props.xAxisLabelTextStyle
}
xAxisTextNumberOfLines={xAxisTextNumberOfLines}
/>
);
})
@ -1460,6 +1465,7 @@ export const BarChart = (props: PropTypes) => {
item.labelTextStyle || props.xAxisLabelTextStyle
}
onPress={props.onPress}
xAxisTextNumberOfLines={xAxisTextNumberOfLines}
/>
))}
</Fragment>

12
src/LineChart/index.tsx
View File

@ -154,6 +154,8 @@ type propTypes = {
yAxisLabelContainerStyle?: any;
horizontalRulesStyle?: any;
yAxisTextStyle?: any;
yAxisTextNumberOfLines?: number;
xAxisTextNumberOfLines?: number;
showFractionalValues?: Boolean;
roundToDigits?: number;
yAxisLabelWidth?: number;
@ -1386,6 +1388,8 @@ export const LineChart = (props: propTypes) => {
props.yAxisThickness === 0 ? 0 : props.yAxisThickness || 1;
const yAxisColor = props.yAxisColor || 'black';
const yAxisTextStyle = props.yAxisTextStyle;
const yAxisTextNumberOfLines = props.yAxisTextNumberOfLines || 1;
const xAxisTextNumberOfLines = props.xAxisTextNumberOfLines || 1;
const yAxisLabelContainerStyle = props.yAxisLabelContainerStyle;
const horizontalRulesStyle = props.horizontalRulesStyle;
const showFractionalValues = props.showFractionalValues || false;
@ -1681,7 +1685,7 @@ export const LineChart = (props: propTypes) => {
) : (
<Text
style={labelTextStyle || {textAlign: 'center'}}
numberOfLines={1}>
numberOfLines={xAxisTextNumberOfLines}>
{label || ''}
</Text>
)}
@ -1719,7 +1723,7 @@ export const LineChart = (props: propTypes) => {
) : (
<Text
style={labelTextStyle || {textAlign: 'center'}}
numberOfLines={1}>
numberOfLines={xAxisTextNumberOfLines}>
{label || ''}
</Text>
)}
@ -1899,7 +1903,7 @@ export const LineChart = (props: propTypes) => {
yAxisLabelContainerStyle,
]}>
<Text
numberOfLines={1}
numberOfLines={yAxisTextNumberOfLines}
ellipsizeMode={'clip'}
style={[
yAxisTextStyle,
@ -2001,7 +2005,7 @@ export const LineChart = (props: propTypes) => {
yAxisLabelContainerStyle,
]}>
<Text
numberOfLines={1}
numberOfLines={yAxisTextNumberOfLines}
ellipsizeMode={'clip'}
style={[
yAxisTextStyle,