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

Merge pull request #69 from Abhinandan-Kushwaha/development 

Added the props yAxisLabelPrefix and yAxisLabelSuffix to Bar and Line…
This commit is contained in:
Abhinandan Kushwaha 2022-01-18 00:02:55 +05:30 committed by GitHub
parent 05c9212522 59d19d3052
commit ccf2434875
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 63 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/BarChart/BarChartProps.md
View File

@ -105,6 +105,8 @@ The properties of this line chart can be controlled using the `lineConfig` prop
| yAxisTextStyle | object | Style object for the Y axis text style | \_ |
| showFractionalValues | Boolean | Allow fractional values for the Y axis label | false |
| roundToDigits | number | Rounds the y axis values to given number of digits after decimal point | 1 |
| yAxisLabelPrefix | String | The String prepended to the y axis label text (for example- '$') | '' |
| yAxisLabelSuffix | String | The String appended to the y axis label text | '' |
| hideYAxisText | Boolean | To hide Y axis label text | false |
| rulesColor | ColorValue | Color of the horizontal rules | lightgray |
| rulesThickness | number | Thickness of the horizontal rules | 1 |

2
docs/LineChart/LineChartProps.md
View File

@ -91,6 +91,8 @@ When you are using the `dataPointLabelComponent`, make sure to provide the `data
| yAxisTextStyle | object | Style object for the Y axis text style | \_ |
| showFractionalValues | Boolean | Allow fractional values for the Y axis label | false |
| roundToDigits | number | Rounds the y axis values to given number of digits after decimal point | 1 |
| yAxisLabelPrefix | String | The String prepended to the y axis label text (for example- '$') | '' |
| yAxisLabelSuffix | String | The String appended to the y axis label text | '' |
| hideYAxisText | Boolean | To hide Y axis label text | false |
| rulesColor | ColorValue | Color of the horizontal rules | lightgray |
| rulesThickness | number | Thickness of the horizontal rules | 1 |

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-native-gifted-charts",
"version": "0.2.8",
"version": "0.2.9",
"description": "The most complete library for Bar, Line, Area, Pie and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
"main": "src/index.tsx",
"files": [

46
src/BarChart/index.tsx
View File

@ -112,6 +112,8 @@ type PropTypes = {
hideOrigin?: Boolean;
labelWidth?: number;
yAxisLabelTexts?: Array<string>;
yAxisLabelPrefix?: String;
yAxisLabelSuffix?: String;
};
type lineConfigType = {
curved?: Boolean;
@ -290,6 +292,9 @@ export const BarChart = (props: PropTypes) => {
const xAxisIndicesColor = props.xAxisIndicesColor || 'black';
const yAxisIndicesColor = props.yAxisIndicesColor || 'black';
const yAxisLabelPrefix = props.yAxisLabelPrefix || '';
const yAxisLabelSuffix = props.yAxisLabelSuffix || '';
const xAxisThickness =
props.xAxisThickness === 0
? props.xAxisThickness
@ -515,10 +520,33 @@ export const BarChart = (props: PropTypes) => {
outputRange: [0, totalWidth],
});
const getLabel = val => {
let label = '';
if (showFractionalValues) {
if (val) {
label = val;
} else {
label = '0';
}
} else {
if (val) {
label = val.toString().split('.')[0];
} else {
label = '0';
}
}
return yAxisLabelPrefix + label + yAxisLabelSuffix;
};
const renderHorizSections = () => {
return (
<>
{horizSections.map((sectionItems, index) => {
let label = getLabel(sectionItems.value);
if (hideOrigin && index === horizSections.length - 1) {
label = '';
}
return (
<View
key={index}
@ -561,23 +589,7 @@ export const BarChart = (props: PropTypes) => {
],
},
]}>
{hideOrigin
? index === horizSections.length - 1
? ''
: showFractionalValues
? sectionItems.value
? sectionItems.value
: '0'
: sectionItems.value
? sectionItems.value.toString().split('.')[0]
: '0'
: showFractionalValues
? sectionItems.value
? sectionItems.value
: '0'
: sectionItems.value
? sectionItems.value.toString().split('.')[0]
: '0'}
{label}
</Text>
) : null}
</View>

46
src/LineChart/index.tsx
View File

@ -186,6 +186,8 @@ type propTypes = {
textShiftY?: number;
yAxisLabelTexts?: Array<string>;
width?: number;
yAxisLabelPrefix?: String;
yAxisLabelSuffix?: String;
};
type referenceConfigType = {
thickness: number;
@ -267,6 +269,9 @@ export const LineChart = (props: propTypes) => {
const animateTogether = props.animateTogether || false;
const animateOnDataChange = props.animateOnDataChange || false;
const yAxisLabelPrefix = props.yAxisLabelPrefix || '';
const yAxisLabelSuffix = props.yAxisLabelSuffix || '';
if (!initialData) {
initialData = [...data];
animations = initialData.map(item => new Animated.Value(item.value));
@ -1028,11 +1033,34 @@ export const LineChart = (props: propTypes) => {
// )
// }
const getLabel = val => {
let label = '';
if (showFractionalValues) {
if (val) {
label = val;
} else {
label = '0';
}
} else {
if (val) {
label = val.toString().split('.')[0];
} else {
label = '0';
}
}
return yAxisLabelPrefix + label + yAxisLabelSuffix;
};
const renderHorizSections = () => {
return (
<>
{props.hideAxesAndRules !== true &&
horizSections.map((sectionItems, index) => {
let label = getLabel(sectionItems.value);
if (hideOrigin && index === horizSections.length - 1) {
label = '';
}
return (
<View
key={index}
@ -1061,23 +1089,7 @@ export const LineChart = (props: propTypes) => {
marginBottom: stepHeight / -2,
},
]}>
{hideOrigin
? index === horizSections.length - 1
? ''
: showFractionalValues
? sectionItems.value
? sectionItems.value
: '0'
: sectionItems.value
? sectionItems.value.toString().split('.')[0]
: '0'
: showFractionalValues
? sectionItems.value
? sectionItems.value
: '0'
: sectionItems.value
? sectionItems.value.toString().split('.')[0]
: '0'}
{label}
</Text>
) : null}
</View>