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 #2 from Abhinandan-Kushwaha/development 

Development
This commit is contained in:
Abhinandan Kushwaha 2021-08-05 16:00:04 +05:30 committed by GitHub
parent f828319336 14cd857dcd
commit cdb3b4db88
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 81 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/BarChart/BarChartProps.md
View File

@ -7,15 +7,30 @@
| data | Array of items | An item object represents a bar in the bar chart. It is described in the next table. | \_ |
| width | number | Width of the Bar chart | width of the parent |
| height | number | Height of the Bar chart (excluding the bottom label) | 200 |
| noOfSections | number | Number of sections in the Y axis | 10 |
| maxValue | number | Maximum value shown in the Y axis | 200 |
| stepHeight | number | Height of 1 step/section in the Y axis | 20 |
| noOfSections | number | Number of sections in the Y axis | 10 |
| stepValue | number | Value of 1 step/section in the Y axis | 20 |
| stepHeight | number | Height of 1 step/section in the Y axis | 20 |
| spacing | number | Distance between 2 consecutive bars in the Bar chart | 20 |
| backgroundColor | ColorValue | Background color of the Bar chart | \_ |
| disableScroll | Boolean | To disable horizontal scroll | false |
| showScrollIndicator | Boolean | To show horizontal scroll indicator | false |
**Alert!**
These props are correlated:
1. maxValue
2. noOfSections
3. stepValue
They must follow the relation:
````
maxValue = noOfSections \* stepValue
```js
So, all the three must be used together. Using any 1 or 2 of them may produce absurd results
### Item description
| Key | Value type | Description |
@ -28,7 +43,7 @@
| sideColor | ColorValue | Color of the side view of the bar, only for 3 D |
| topColor | ColorValue | Color of the top view of the bar, only for 3 D |
| showGradient | Boolean | Prop to enable linear gradient for the bar color, defaults to false |
| gradientColor | ColorValue | Along with frontColor, this prop constitutes the 2 colors for gradient |
| gradientColor | ColorValue | Along with frontColor, this prop constitutes the 2 colors for gradient |
| initialSpacing | number | distance of the first bar from the Y axis |
| label | string | Label text appearing below the bar (under the X axis) |
| labelTextStyle | object | Style object for the label text appearing below the bar |
@ -110,3 +125,4 @@
| horizontal | Boolean | Render horizontal BarChart | false |
| yAxisAtTop | Boolean | In horizontal BarCharts the Y axis appears at bottom by default. Set it to true for otherwise | false |
| intactTopLabel | Boolean | To rotate the top label component to make it intact with the Bars | false |
````

21
docs/LineChart/LineChartProps.md
View File

@ -8,15 +8,31 @@
| data2 | Array of items | Second set of dataPoint for the second line | \_ |
| width | number | Width of the Bar chart | width of the parent |
| height | number | Height of the Bar chart (excluding the bottom label) | 200 |
| noOfSections | number | Number of sections in the Y axis | 10 |
| maxValue | number | Maximum value shown in the Y axis | 200 |
| stepHeight | number | Height of 1 step/section in the Y axis | 20 |
| noOfSections | number | Number of sections in the Y axis | 10 |
| stepValue | number | Value of 1 step/section in the Y axis | 20 |
| stepHeight | number | Height of 1 step/section in the Y axis | 20 |
| spacing | number | Distance between 2 consecutive bars in the Bar chart | 20 |
| backgroundColor | ColorValue | Background color of the Bar chart | \_ |
| disableScroll | Boolean | To disable horizontal scroll | false |
| showScrollIndicator | Boolean | To show horizontal scroll indicator | false |
**Alert!**
These props are correlated-
1. maxValue
2. noOfSections
3. stepValue
They must follow the relation:
````
maxValue = noOfSections \* stepValue
```js
So, all the three must be used together. Using any 1 or 2 of them may produce absurd results
### Item description
| Key | Value type | Description |
@ -113,3 +129,4 @@
| startOpacity2 | number | Start gradient color for the second dataset of the area chart | 1 |
| endOpacity2 | number | End gradient opacity for the second dataset of the area chart | 1 |
| gradientDirection | string | Direction of the gradient (_'horizontal'_ or _'vertical'_) | 'vertical' |
````

2
package.json
View File

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

24
src/BarChart/RenderBars.tsx
View File

@ -327,9 +327,7 @@ const RenderBars = (props: Props) => {
// overflow: 'visible',
marginBottom: 60,
width: item.barWidth || props.barWidth || 30,
height:
((item.value || maxValue / 2) * (containerHeight || 200)) /
(maxValue || 200),
height: (item.value * (containerHeight || 200)) / (maxValue || 200),
marginRight: spacing,
},
// !isThreeD && !item.showGradient && !props.showGradient &&
@ -376,10 +374,7 @@ const RenderBars = (props: Props) => {
topLabelComponent={item.topLabelComponent}
opacity={opacity || 1}
animationDuration={animationDuration || 800}
height={
((item.value || maxValue / 2) * (containerHeight || 200)) /
(maxValue || 200)
}
height={(item.value * (containerHeight || 200)) / (maxValue || 200)}
intactTopLabel={props.intactTopLabel}
horizontal={props.horizontal}
/>
@ -399,10 +394,7 @@ const RenderBars = (props: Props) => {
opacity={opacity || 1}
horizontal={props.horizontal}
intactTopLabel={props.intactTopLabel}
height={
((item.value || maxValue / 2) * (containerHeight || 200)) /
(maxValue || 200)
}
height={(item.value * (containerHeight || 200)) / (maxValue || 200)}
/>
)
) : item.showGradient || props.showGradient ? (
@ -416,10 +408,7 @@ const RenderBars = (props: Props) => {
roundedTop={props.roundedTop || false}
gradientColor={props.gradientColor}
frontColor={props.frontColor || 'black'}
height={
((item.value || maxValue / 2) * (containerHeight || 200)) /
(maxValue || 200)
}
height={(item.value * (containerHeight || 200)) / (maxValue || 200)}
cappedBars={props.cappedBars}
capThickness={props.capThickness}
capColor={props.capColor}
@ -441,10 +430,7 @@ const RenderBars = (props: Props) => {
gradientColor={props.gradientColor}
noGradient
frontColor={props.frontColor || 'black'}
height={
((item.value || maxValue / 2) * (containerHeight || 200)) /
(maxValue || 200)
}
height={(item.value * (containerHeight || 200)) / (maxValue || 200)}
cappedBars={props.cappedBars}
capThickness={props.capThickness}
capColor={props.capColor}

23
src/BarChart/index.tsx
View File

@ -100,11 +100,23 @@ export const BarChart = (props: PropTypes) => {
const containerHeight = props.height || 200;
const noOfSections = props.noOfSections || 10;
const horizSections = [{value: 0}];
const maxValue = props.maxValue || 200;
const stepHeight = props.stepHeight || containerHeight / noOfSections;
const stepValue = props.stepValue || maxValue / noOfSections;
const spacing = props.spacing === 0 ? 0 : props.spacing ? props.spacing : 20;
const data = props.data || [];
const spacing = props.spacing === 0 ? 0 : props.spacing ? props.spacing : 20;
let totalWidth = spacing;
let maxItem = 0;
data.forEach((item: itemType) => {
if (item.value > maxItem) {
maxItem = item.value;
}
totalWidth += (item.barWidth || props.barWidth || 30) + spacing;
});
maxItem = maxItem + (10 - (maxItem % 10));
const maxValue = props.maxValue || maxItem;
const stepValue = props.stepValue || maxValue / noOfSections;
const disableScroll = props.disableScroll || false;
const showScrollIndicator = props.showScrollIndicator || false;
const initialSpacing =
@ -167,11 +179,6 @@ export const BarChart = (props: PropTypes) => {
const heightValue = new Animated.Value(0);
const opacValue = new Animated.Value(0);
let totalWidth = spacing;
data.forEach((item: itemType) => {
totalWidth += (item.barWidth || props.barWidth || 30) + spacing;
});
const labelsAppear = () => {
opacValue.setValue(0);
Animated.timing(opacValue, {

31
src/LineChart/index.tsx
View File

@ -140,14 +140,26 @@ export const LineChart = (props: propTypes) => {
const [fillPoints2, setFillPoints2] = useState('');
const containerHeight = props.height || 200;
const noOfSections = props.noOfSections || 10;
const data = props.data || [];
const spacing = props.spacing === 0 ? 0 : props.spacing || 60;
let totalWidth = spacing;
let maxItem = 0;
data.forEach((item: itemType) => {
if (item.value > maxItem) {
maxItem = item.value;
}
totalWidth += spacing;
});
maxItem = maxItem + (10 - (maxItem % 10));
const maxValue = props.maxValue || maxItem;
const horizSections = [{value: 0}];
const maxValue = props.maxValue || 200;
const stepHeight = props.stepHeight || containerHeight / noOfSections;
const stepValue = props.stepValue || maxValue / noOfSections;
const spacing = props.spacing === 0 ? 0 : props.spacing || 60;
const initialSpacing =
props.initialSpacing === 0 ? 0 : props.initialSpacing || 40;
const data = props.data || [];
const data2 = props.data2 || [];
const thickness = props.thickness || 2;
const thickness1 = props.thickness1;
@ -251,11 +263,6 @@ export const LineChart = (props: propTypes) => {
horizSections.push({value: maxValue - stepValue * i});
}
let totalWidth = initialSpacing;
data.forEach((item: itemType) => {
totalWidth += spacing;
});
useEffect(() => {
// console.log('comes here............')
decreaseWidth();
@ -279,7 +286,7 @@ export const LineChart = (props: propTypes) => {
' ' +
(containerHeight +
10 -
((data[i].value || maxValue / 2) * containerHeight) / maxValue) +
(data[i].value * containerHeight) / maxValue) +
' ';
if (data2.length) {
pp2 +=
@ -288,7 +295,7 @@ export const LineChart = (props: propTypes) => {
' ' +
(containerHeight +
10 -
((data2[i].value || maxValue / 2) * containerHeight) / maxValue) +
(data2[i].value * containerHeight) / maxValue) +
' ';
}
}
@ -392,7 +399,7 @@ export const LineChart = (props: propTypes) => {
',' +
(containerHeight +
10 -
((data[0].value || maxValue / 2) * containerHeight) / maxValue) +
(data[0].value * containerHeight) / maxValue) +
' ' +
xx +
' ' +
@ -423,7 +430,7 @@ export const LineChart = (props: propTypes) => {
',' +
(containerHeight +
10 -
((data2[0].value || maxValue / 2) * containerHeight) / maxValue) +
(data2[0].value * containerHeight) / maxValue) +
' ' +
xx2 +
' ' +

4
src/PieChart/index.tsx
View File

@ -136,7 +136,9 @@ export const PieChart = (props: propTypes) => {
i = 0;
let semiSum, yy, xx;
data.forEach(dataItem => {
// if (index !== 0) return
if (!dataItem.value) {
return;
}
const shiftX = dataItem.shiftX || 0;
const shiftY = dataItem.shiftY || 0;