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 xAxisLength, rulesLength to Bar n Line charts, added yAxisOffset to Bar charts

This commit is contained in:
Abhinandan-Kushwaha 2022-06-05 08:16:08 +05:30
parent 1d7a9753ad
commit 0811586fa1
5 changed files with 54 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/BarChart/BarChartProps.md
View File

@ -11,7 +11,8 @@
| height | number | Height of the Bar chart (excluding the bottom label) | 200 |
| onPress | Function | Callback function called on press of a Bar (takes item and index as parameter) | null |
| maxValue | number | Maximum value shown in the Y axis | 200 |
| minValue | number | Minimum negative value shown in the Y axis (to be used only if the data set has negative values too) | \_ |
| yAxisOffset | number | Starting (minimum) value in the Y axis (value at the origin) | 0 |
| minValue | number | Minimum negative value shown in the Y axis (to be used only if the data set has negative values too) | \_ |
| noOfSections | number | Number of sections in the Y axis | 10 |
| noOfSectionsBelowXAxis | number | Number of sections in the Y axis below X axis (in case the data set has negative values too) | 0 |
| stepValue | number | Value of 1 step/section in the Y axis | 20 |
@ -114,6 +115,7 @@ The properties of this line chart can be controlled using the `lineConfig` prop
| Prop | Type | Description | Default value |
| ---------------------- | ------------------- | ---------------------------------------------------------------------------------- | ---------------------- |
| xAxisLength | number | X axis length | width of the chart |
| xAxisColor | ColorValue | X axis color | black |
| xAxisThickness | number | X axis thickness | 1 |
| yAxisColor | ColorValue | Y axis color | black |
@ -130,6 +132,7 @@ The properties of this line chart can be controlled using the `lineConfig` prop
| yAxisLabelSuffix | String | The String appended to the y axis label text | '' |
| hideYAxisText | Boolean | To hide Y axis label text | false |
| yAxisSide | String | Tells which side of the chart, should the y axis be present, defaults to 'left' | 'left' |
| rulesLength | number | Length of the horizontal rules | width of the chart |
| rulesColor | ColorValue | Color of the horizontal rules | lightgray |
| rulesThickness | number | Thickness of the horizontal rules | 1 |
| hideRules | Boolean | To hide the horizontal rules | false |

2
docs/LineChart/LineChartProps.md
View File

@ -94,6 +94,7 @@ When you are using the `dataPointLabelComponent`, make sure to provide the `data
| Prop | Type | Description | Default value |
| ---------------------- | ------------------- | ---------------------------------------------------------------------------------- | ---------------------- |
| xAxisLength | number | X axis length | width of the chart |
| xAxisColor | ColorValue | X axis color | black |
| xAxisThickness | number | X axis thickness | 1 |
| xAxisType | String | solid or dotted/dashed | solid |
@ -111,6 +112,7 @@ When you are using the `dataPointLabelComponent`, make sure to provide the `data
| yAxisLabelSuffix | String | The String appended to the y axis label text | '' |
| hideYAxisText | Boolean | To hide Y axis label text | false |
| yAxisSide | String | Tells which side of the chart, should the y axis be present, defaults to 'left' | 'left' |
| rulesLength | number | Length of the horizontal rules | width of the chart |
| rulesColor | ColorValue | Color of the horizontal rules | lightgray |
| rulesThickness | number | Thickness of the horizontal rules | 1 |
| hideRules | Boolean | To hide the horizontal rules | false |

2
package.json
View File

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

53
src/BarChart/index.tsx
View File

@ -40,6 +40,7 @@ type PropTypes = {
// animationEasing?: any;
opacity?: number;
isThreeD?: Boolean;
xAxisLength?: number;
xAxisThickness?: number;
xAxisColor?: ColorValue;
yAxisThickness?: number;
@ -53,6 +54,7 @@ type PropTypes = {
yAxisLabelWidth?: number;
hideYAxisText?: Boolean;
yAxisSide?: string;
yAxisOffset?: number;
initialSpacing?: number;
barWidth?: number;
sideWidth?: number;
@ -67,6 +69,7 @@ type PropTypes = {
hideAxesAndRules?: Boolean;
hideRules?: Boolean;
rulesLength?: number;
rulesColor?: ColorValue;
rulesThickness?: number;
rulesType?: String;
@ -202,7 +205,18 @@ export const BarChart = (props: PropTypes) => {
const showLine = props.showLine || false;
const initialSpacing =
props.initialSpacing === 0 ? 0 : props.initialSpacing || 40;
const data = useMemo(() => props.data || [], [props.data]);
const data = useMemo(() => {
if (!props.data) {
return [];
}
if (props.yAxisOffset) {
return props.data.map(item => {
item.value = item.value - props.yAxisOffset;
return item;
});
}
return props.data;
}, [props.yAxisOffset, props.data]);
const lineData = props.lineData || data;
const defaultLineConfig = {
initialSpacing: initialSpacing,
@ -348,6 +362,7 @@ export const BarChart = (props: PropTypes) => {
const showVerticalLines = props.showVerticalLines || false;
const rulesThickness =
props.rulesThickness === 0 ? 0 : props.rulesThickness || 1;
const rulesLength = props.rulesLength;
const rulesColor = props.rulesColor || 'lightgray';
const verticalLinesThickness =
props.verticalLinesThickness === 0 ? 0 : props.verticalLinesThickness || 1;
@ -379,6 +394,7 @@ export const BarChart = (props: PropTypes) => {
props.xAxisThickness === 0
? props.xAxisThickness
: props.xAxisThickness || 1;
const xAxisLength = props.xAxisLength;
const xAxisColor = props.xAxisColor || 'black';
const hideRules = props.hideRules || false;
@ -653,15 +669,20 @@ export const BarChart = (props: PropTypes) => {
(props.yAxisLabelTexts && props.yAxisLabelTexts[index] !== undefined)
) {
if (val) {
label = val;
label = props.yAxisOffset
? (Number(val) + props.yAxisOffset).toString()
: val;
} else {
label = '0';
label = props.yAxisOffset ? props.yAxisOffset.toString() : '0';
}
} else {
if (val) {
label = val.toString().split('.')[0];
if (props.yAxisOffset) {
label = (Number(label) + props.yAxisOffset).toString();
}
} else {
label = '0';
label = props.yAxisOffset ? props.yAxisOffset.toString() : '0';
}
}
@ -722,9 +743,11 @@ export const BarChart = (props: PropTypes) => {
config={{
thickness: xAxisThickness,
color: xAxisColor,
width: horizontal
? props.width || Math.min(300, totalWidth)
: (props.width || totalWidth) + 11,
width:
xAxisLength ||
(horizontal
? props.width || Math.min(300, totalWidth)
: (props.width || totalWidth) + 11),
dashWidth: dashWidth,
dashGap: dashGap,
type: xAxisType,
@ -735,9 +758,11 @@ export const BarChart = (props: PropTypes) => {
config={{
thickness: rulesThickness,
color: rulesColor,
width: horizontal
? props.width || Math.min(300, totalWidth)
: (props.width || totalWidth) + 11,
width:
rulesLength ||
(horizontal
? props.width || Math.min(300, totalWidth)
: (props.width || totalWidth) + 11),
dashWidth: dashWidth,
dashGap: dashGap,
type: rulesType,
@ -855,9 +880,11 @@ export const BarChart = (props: PropTypes) => {
config={{
thickness: rulesThickness,
color: rulesColor,
width: horizontal
? props.width || totalWidth
: (props.width || totalWidth) + 11,
width:
rulesLength ||
(horizontal
? props.width || totalWidth
: (props.width || totalWidth) + 11),
dashWidth: dashWidth,
dashGap: dashGap,
type: rulesType,

10
src/LineChart/index.tsx
View File

@ -69,10 +69,12 @@ type propTypes = {
onDataChangeAnimationDuration?: number;
animationEasing?: any;
animateTogether?: boolean;
xAxisLength?: number;
xAxisThickness?: number;
xAxisColor?: ColorValue;
xAxisType?: String;
hideRules?: Boolean;
rulesLength?: number;
rulesColor?: ColorValue;
rulesThickness?: number;
pressEnabled?: Boolean;
@ -549,6 +551,7 @@ export const LineChart = (props: propTypes) => {
? ((props.width || 200) - initialSpacing) / data.length
: 60);
const xAxisLength = props.xAxisLength;
const xAxisThickness =
props.xAxisThickness === 0 ? 0 : props.xAxisThickness || 1;
const dataPointsHeight1 =
@ -1370,6 +1373,7 @@ export const LineChart = (props: propTypes) => {
const rulesThickness =
props.rulesThickness === 0 ? 0 : props.rulesThickness || 1;
const rulesLength = props.rulesLength;
const rulesColor = props.rulesColor || 'lightgray';
const verticalLinesThickness =
props.verticalLinesThickness === 0 ? 0 : props.verticalLinesThickness || 1;
@ -1863,7 +1867,7 @@ export const LineChart = (props: propTypes) => {
config={{
thickness: xAxisThickness,
color: xAxisColor,
width: (props.width || totalWidth) + 11,
width: xAxisLength || (props.width || totalWidth) + 11,
dashWidth: dashWidth,
dashGap: dashGap,
type: xAxisType,
@ -1874,7 +1878,7 @@ export const LineChart = (props: propTypes) => {
config={{
thickness: rulesThickness,
color: rulesColor,
width: (props.width || totalWidth) + 11,
width: rulesLength || (props.width || totalWidth) + 11,
dashWidth: dashWidth,
dashGap: dashGap,
type: rulesType,
@ -1987,7 +1991,7 @@ export const LineChart = (props: propTypes) => {
config={{
thickness: rulesThickness,
color: rulesColor,
width: (props.width || totalWidth) + 11,
width: rulesLength || (props.width || totalWidth) + 11,
dashWidth: dashWidth,
dashGap: dashGap,
type: rulesType,