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

Made Y axis Label texts a separate Array

This commit is contained in:
Abhinandan Kushwaha 2021-10-11 04:49:19 +05:30
parent ea7646cb0b
commit ebcfd068a4
5 changed files with 72 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
docs/BarChart/BarChartProps.md
View File

@ -56,7 +56,6 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab
| labelComponent | Component | Custom label component appearing below the bar |
| topLabelComponent | Component | Custom component appearing above the bar |
| topLabelContainerStyle | object | Style object for the container of the custom component appearing above the bar |
| yAxisLabelText | string | Y axis label text |
| cappedBars | Boolean | To show caps on the top of bar |
| capThickness | number | Thickness of the bar cap |
| capColor | ColorValue | Color of the bar cap |
@ -68,36 +67,37 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab
### Axes and rules related props
| Prop | Type | Description | Default value |
| ---------------------- | ---------- | ---------------------------------------------------------------------- | ------------- |
| xAxisColor | ColorValue | X axis color | black |
| xAxisThickness | number | X axis thickness | 1 |
| yAxisColor | ColorValue | Y axis color | black |
| 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 | \_ |
| 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 |
| 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 |
| hideRules | Boolean | To hide the horizontal rules | false |
| showVerticalLines | Boolean | To show vertical lines | false |
| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray |
| verticallinesThickness | number | Thickness of the vertical lines | 1 |
| verticalLinesZIndex | number | Z index of the vertical lines | -1 |
| showXAxisIndices | Boolean | To show the pointers on the X axis | false |
| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 |
| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 |
| xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| showYAxisIndices | Boolean | To show the pointers on the Y axis | false |
| yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 |
| yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 |
| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false |
| 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 |
| Prop | Type | Description | Default value |
| ---------------------- | ------------- | ---------------------------------------------------------------------- | ------------- |
| xAxisColor | ColorValue | X axis color | black |
| xAxisThickness | number | X axis thickness | 1 |
| yAxisColor | ColorValue | Y axis color | black |
| 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 | \_ |
| 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 |
| 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 |
| hideRules | Boolean | To hide the horizontal rules | false |
| showVerticalLines | Boolean | To show vertical lines | false |
| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray |
| verticallinesThickness | number | Thickness of the vertical lines | 1 |
| verticalLinesZIndex | number | Z index of the vertical lines | -1 |
| showXAxisIndices | Boolean | To show the pointers on the X axis | false |
| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 |
| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 |
| xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| showYAxisIndices | Boolean | To show the pointers on the Y axis | false |
| yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 |
| yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 |
| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false |
| yAxisLabelTexts | Array<string> | Array of label texts to be displayed along y axis | null |
| 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 |
---

59
docs/LineChart/LineChartProps.md
View File

@ -66,35 +66,36 @@ If you are adding showDataPoint to an item, you must set hideDataPoints prop to
### Axes and rules related props
| Prop | Type | Description | Default value |
| ---------------------- | ---------- | ---------------------------------------------------------------------- | ------------- |
| xAxisColor | ColorValue | X axis color | black |
| xAxisThickness | number | X axis thickness | 1 |
| yAxisColor | ColorValue | Y axis color | black |
| 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 | \_ |
| 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 |
| 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 |
| hideRules | Boolean | To hide the horizontal rules | false |
| showVerticalLines | Boolean | To show vertical lines | false |
| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray |
| verticallinesThickness | number | Thickness of the vertical lines | 1 |
| verticalLinesZIndex | number | Z index of the vertical lines | -1 |
| showXAxisIndices | Boolean | To show the pointers on the X axis | false |
| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 |
| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 |
| xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| showYAxisIndices | Boolean | To show the pointers on the Y axis | false |
| yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 |
| yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 |
| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false |
| 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 |
| Prop | Type | Description | Default value |
| ---------------------- | ------------- | ---------------------------------------------------------------------- | ------------- |
| xAxisColor | ColorValue | X axis color | black |
| xAxisThickness | number | X axis thickness | 1 |
| yAxisColor | ColorValue | Y axis color | black |
| 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 | \_ |
| 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 |
| 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 |
| hideRules | Boolean | To hide the horizontal rules | false |
| showVerticalLines | Boolean | To show vertical lines | false |
| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray |
| verticallinesThickness | number | Thickness of the vertical lines | 1 |
| verticalLinesZIndex | number | Z index of the vertical lines | -1 |
| showXAxisIndices | Boolean | To show the pointers on the X axis | false |
| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 |
| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 |
| xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| showYAxisIndices | Boolean | To show the pointers on the Y axis | false |
| yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 |
| yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 |
| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false |
| yAxisLabelTexts | Array<string> | Array of label texts to be displayed along y axis | null |
| 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": "0.1.6",
"version": "0.1.8",
"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": [

8
src/BarChart/index.tsx
View File

@ -81,6 +81,7 @@ type PropTypes = {
barBorderRadius?: number;
hideOrigin?: Boolean;
labelWidth?: number;
yAxisLabelTexts?: Array<string>;
};
type sectionType = {
value: string;
@ -102,7 +103,6 @@ type itemType = {
disablePress?: any;
labelComponent?: View;
spacing?: number;
yAxisLabelText?: string;
};
export const BarChart = (props: PropTypes) => {
@ -215,7 +215,11 @@ export const BarChart = (props: PropTypes) => {
if (props.showFractionalValues || props.roundToDigits) {
value = parseFloat(value.toFixed(props.roundToDigits || 1));
}
horizSections.push({value: data[i].yAxisLabelText ?? value.toString()});
horizSections.push({
value: props.yAxisLabelTexts
? props.yAxisLabelTexts[i] ?? value.toString()
: value.toString(),
});
}
const heightValue = new Animated.Value(0);

8
src/LineChart/index.tsx
View File

@ -121,6 +121,7 @@ type propTypes = {
hideOrigin?: Boolean;
textShiftX?: number;
textShiftY?: number;
yAxisLabelTexts?: Array<string>;
};
type itemType = {
value?: number;
@ -142,7 +143,6 @@ type itemType = {
showVerticalLine?: Boolean;
verticalLineColor?: string;
verticalLineThickness?: number;
yAxisLabelText?: string;
};
type sectionType = {
@ -289,9 +289,9 @@ export const LineChart = (props: propTypes) => {
value = parseFloat(value.toFixed(props.roundToDigits || 1));
}
horizSections.push({
value:
data[i].yAxisLabelText ??
(data2 ? data2[i].yAxisLabelText : value.toString()),
value: props.yAxisLabelTexts
? props.yAxisLabelTexts[i] ?? value.toString()
: value.toString(),
});
}