mirror of
https://github.com/status-im/react-native-gifted-charts.git
synced 2025-02-23 09:08:13 +00:00
Merge pull request #11 from Abhinandan-Kushwaha/development
Development
This commit is contained in:
Abhinandan Kushwaha
GitHub
commit
c53af6c240
@ -16,7 +16,8 @@
|
||||
| disableScroll | Boolean | To disable horizontal scroll | false |
|
||||
| showScrollIndicator | Boolean | To show horizontal scroll indicator | false |
|
||||
|
||||
-----
|
||||
---
|
||||
|
||||
**Alert!**\
|
||||
These props are correlated:
|
||||
|
||||
@ -27,12 +28,12 @@ These props are correlated:
|
||||
They must follow the relation:
|
||||
|
||||
```js
|
||||
maxValue = noOfSections * stepValue
|
||||
maxValue = noOfSections * stepValue;
|
||||
```
|
||||
|
||||
So, all the three must be used together. Using any 1 or 2 of them may produce absurd results
|
||||
|
||||
-----
|
||||
---
|
||||
|
||||
### Item description
|
||||
|
||||
@ -57,8 +58,9 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab
|
||||
| capThickness | number | Thickness of the bar cap |
|
||||
| capColor | ColorValue | Color of the bar cap |
|
||||
| capRadius | number | Border radius of the bar cap |
|
||||
| barBorderRadius | number | Border radius of the bar |
|
||||
----
|
||||
| barBorderRadius | number | Border radius of the bar |
|
||||
|
||||
---
|
||||
|
||||
### Axes and rules related props
|
||||
|
||||
@ -89,27 +91,28 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab
|
||||
| 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 |
|
||||
|
||||
----
|
||||
---
|
||||
|
||||
### Bar related props
|
||||
|
||||
| Prop | Type | Description | Default value |
|
||||
| ------------- | ---------- | -------------------------------------------------------------------------- | ------------------------ |
|
||||
| barWidth | number | Width of the bar | 30 |
|
||||
| isThreeD | Boolean | Prop to render 3 dimensional bars | false |
|
||||
| frontColor | ColorValue | Color of the bar | black for 2D, red for 3D |
|
||||
| sideColor | ColorValue | Color of the side view of the bar, only for 3 D | red |
|
||||
| topColor | ColorValue | Color of the top view of the bar, only for 3 D | red |
|
||||
| showGradient | Boolean | Prop to enable linear gradient for the bar color | false |
|
||||
| gradientColor | ColorValue | Along with frontColor, gradientColor constitutes the 2 colors for gradient | white |
|
||||
| roundedTop | Boolean | To show rounded top | white |
|
||||
| roundedBottom | Boolean | To show rounded bottom | white |
|
||||
| activeOpacity | number | activeOpacity on pressing the bar | 0.2 |
|
||||
| disablePress | Boolean | Prop to disable the bar press action | false |
|
||||
| barBorderRadius | number | Border radius of the bar | 0 |
|
||||
| Prop | Type | Description | Default value |
|
||||
| --------------- | ---------- | -------------------------------------------------------------------------- | ------------------------ |
|
||||
| barWidth | number | Width of the bar | 30 |
|
||||
| isThreeD | Boolean | Prop to render 3 dimensional bars | false |
|
||||
| frontColor | ColorValue | Color of the bar | black for 2D, red for 3D |
|
||||
| sideColor | ColorValue | Color of the side view of the bar, only for 3 D | red |
|
||||
| topColor | ColorValue | Color of the top view of the bar, only for 3 D | red |
|
||||
| showGradient | Boolean | Prop to enable linear gradient for the bar color | false |
|
||||
| gradientColor | ColorValue | Along with frontColor, gradientColor constitutes the 2 colors for gradient | white |
|
||||
| roundedTop | Boolean | To show rounded top | white |
|
||||
| roundedBottom | Boolean | To show rounded bottom | white |
|
||||
| activeOpacity | number | activeOpacity on pressing the bar | 0.2 |
|
||||
| disablePress | Boolean | Prop to disable the bar press action | false |
|
||||
| barBorderRadius | number | Border radius of the bar | 0 |
|
||||
|
||||
----
|
||||
---
|
||||
|
||||
### Animation related props
|
||||
|
||||
@ -119,7 +122,7 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab
|
||||
| animationDuration | number | Duration of the animations | 800 |
|
||||
| animationEasing | Easing | Easing applied to the animation | Easing.ease |
|
||||
|
||||
----
|
||||
---
|
||||
|
||||
### Bar related props for making Capped Bar chart
|
||||
|
||||
@ -130,7 +133,7 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab
|
||||
| capColor | ColorValue | Color of the bar caps | gray |
|
||||
| capRadius | number | Border radius of the bar caps | 0 |
|
||||
|
||||
----
|
||||
---
|
||||
|
||||
### Props for horizontal BarChart
|
||||
|
||||
@ -180,31 +183,32 @@ The structure of stackData is-
|
||||
]
|
||||
```
|
||||
|
||||
| Prop | Type | Description | Default value |
|
||||
| -------------- | ------- | --------------------------------------------------------------------------------------------- | ------------- |
|
||||
| stackData | Array of stack arrays | A stack array represents a stack of bars in the bar chart. It is described in the next table | false |
|
||||
| Prop | Type | Description | Default value |
|
||||
| --------- | --------------------- | -------------------------------------------------------------------------------------------- | ------------- |
|
||||
| stackData | Array of stack arrays | A stack array represents a stack of bars in the bar chart. It is described in the next table | false |
|
||||
|
||||
### Stack Array description
|
||||
|
||||
| Key | Value type | Description |
|
||||
| -------------- | ---------------- | --------------------------------------------------------------------------------------------- |
|
||||
| stacks array | Array of stacks | A stack is made of 1 or more objects of the type described in the next table |
|
||||
| label | string | Label text appearing below the stack (under the X axis) |
|
||||
| Key | Value type | Description |
|
||||
| -------------- | --------------------------------------------------------- | ---------------------------------------------------------------------------- |
|
||||
| stacks array | Array of stacks | A stack is made of 1 or more objects of the type described in the next table |
|
||||
| label | string | Label text appearing below the stack (under the X axis) |
|
||||
| labelTextStyle | Style object for the label text appearing below the stack |
|
||||
|
||||
### Stack item description
|
||||
|
||||
| Key | Value type | Description |
|
||||
| -------------- | ---------------- | --------------------------------------------------------------------------------------------- |
|
||||
| value | number | Value of the item representing height of the stack item |
|
||||
| color | ColorValue | Color of the stack item |
|
||||
| onPress | function | Function called on pressing the stack item |
|
||||
| marginBottom | number | margin below a particular stack section |
|
||||
| barBorderRadius | number | Border radius of a stack section |
|
||||
| borderTopLeftRadius | number | borderTopLeftRadius for a stack section |
|
||||
| borderTopRightRadius | number | borderTopRightRadius for a stack section |
|
||||
| borderBottomLeftRadius | number | borderBottomLeftRadius for a stack section |
|
||||
| borderBottomRightRadius | number | borderBottomRightRadius for a stack section |
|
||||
| Key | Value type | Description |
|
||||
| ----------------------- | ---------- | ------------------------------------------------------- |
|
||||
| value | number | Value of the item representing height of the stack item |
|
||||
| color | ColorValue | Color of the stack item |
|
||||
| onPress | function | Function called on pressing the stack item |
|
||||
| marginBottom | number | margin below a particular stack section |
|
||||
| barBorderRadius | number | Border radius of a stack section |
|
||||
| borderTopLeftRadius | number | borderTopLeftRadius for a stack section |
|
||||
| borderTopRightRadius | number | borderTopRightRadius for a stack section |
|
||||
| borderBottomLeftRadius | number | borderBottomLeftRadius for a stack section |
|
||||
| borderBottomRightRadius | number | borderBottomRightRadius for a stack section |
|
||||
|
||||
```
|
||||
|
||||
````
|
||||
```
|
||||
|
||||
@ -17,7 +17,8 @@
|
||||
| disableScroll | Boolean | To disable horizontal scroll | false |
|
||||
| showScrollIndicator | Boolean | To show horizontal scroll indicator | false |
|
||||
|
||||
-----
|
||||
---
|
||||
|
||||
**Alert!**\
|
||||
These props are correlated:
|
||||
|
||||
@ -28,38 +29,39 @@ These props are correlated:
|
||||
They must follow the relation:
|
||||
|
||||
```js
|
||||
maxValue = noOfSections * stepValue
|
||||
maxValue = noOfSections * stepValue;
|
||||
```
|
||||
|
||||
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 |
|
||||
| -------------- | ---------- | ---------------------------------------------------------- |
|
||||
| value | number | Value of the item representing representing its position |
|
||||
| label | string | Label text appearing under the X axis |
|
||||
| labelTextStyle | object | Style object for the label text appearing under the X axis |
|
||||
| dataPointText | string | Text appearing near the data points |
|
||||
| textShiftX | number | To shift the dataPointText text horizontally |
|
||||
| textShiftY | number | To shift the dataPointText text vertically |
|
||||
| textColor | ColorValue | Color of the dataPointText |
|
||||
| textFontSize | number | Font size of the dataPointText |
|
||||
| showDataPoint | Boolean | To show data point for the particular item |
|
||||
| dataPointHeight | number | Height of the data point (when data point's shape is rectangular)|
|
||||
| dataPointWidth | number | Width of the data point (when data point's shape is rectangular) |
|
||||
| dataPointRadius | number | Radius of the data point (when data points' shape is circular)
|
||||
| dataPointColor | ColorValue | Color of the data point |
|
||||
| dataPointShape | string | Shape of the data point (rectangular or circular) defaults to circular |
|
||||
| showVerticalLine | Boolean | When set to true, a vertical line will be displayed along that data point |
|
||||
| verticalLineColor | ColorValue | Color of the vertical Line displayed along the data point |
|
||||
| verticalLineThickness | number | Thickness of the vertical Line displayed along the data point |
|
||||
| Key | Value type | Description |
|
||||
| --------------------- | ---------- | ------------------------------------------------------------------------- |
|
||||
| value | number | Value of the item representing representing its position |
|
||||
| label | string | Label text appearing under the X axis |
|
||||
| labelTextStyle | object | Style object for the label text appearing under the X axis |
|
||||
| dataPointText | string | Text appearing near the data points |
|
||||
| textShiftX | number | To shift the dataPointText text horizontally |
|
||||
| textShiftY | number | To shift the dataPointText text vertically |
|
||||
| textColor | ColorValue | Color of the dataPointText |
|
||||
| textFontSize | number | Font size of the dataPointText |
|
||||
| showDataPoint | Boolean | To show data point for the particular item |
|
||||
| dataPointHeight | number | Height of the data point (when data point's shape is rectangular) |
|
||||
| dataPointWidth | number | Width of the data point (when data point's shape is rectangular) |
|
||||
| dataPointRadius | number | Radius of the data point (when data points' shape is circular) |
|
||||
| dataPointColor | ColorValue | Color of the data point |
|
||||
| dataPointShape | string | Shape of the data point (rectangular or circular) defaults to circular |
|
||||
| showVerticalLine | Boolean | When set to true, a vertical line will be displayed along that data point |
|
||||
| verticalLineColor | ColorValue | Color of the vertical Line displayed along the data point |
|
||||
| verticalLineThickness | number | Thickness of the vertical Line displayed along the data point |
|
||||
|
||||
**Alert!**\
|
||||
If you are adding showDataPoint to an item, you must set hideDataPoints prop to true
|
||||
|
||||
----
|
||||
---
|
||||
|
||||
### Axes and rules related props
|
||||
|
||||
@ -90,8 +92,9 @@ If you are adding showDataPoint to an item, you must set hideDataPoints prop to
|
||||
| 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 |
|
||||
|
||||
----
|
||||
---
|
||||
|
||||
### Line related props
|
||||
|
||||
@ -105,7 +108,7 @@ If you are adding showDataPoint to an item, you must set hideDataPoints prop to
|
||||
| thickness2 | number | Thickness of the lines joining the second set of data points | thickness (from props) |
|
||||
| curved | Boolean | To show curved line joining the data points | false |
|
||||
|
||||
----
|
||||
---
|
||||
|
||||
### Data points related props
|
||||
|
||||
@ -130,7 +133,7 @@ If you are adding showDataPoint to an item, you must set hideDataPoints prop to
|
||||
| dataPointsColor2 | ColorValue | Color of data points for the second dataset | blue |
|
||||
| dataPointsShape2 | string | Shape of data points for the second dataset (_'rectangular'_ or _'circular'_) | 'circular' |
|
||||
|
||||
----
|
||||
---
|
||||
|
||||
### Props for Area Chart
|
||||
|
||||
@ -150,4 +153,7 @@ If you are adding showDataPoint to an item, you must set hideDataPoints prop to
|
||||
| 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' |
|
||||
````
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
32
examples/BarChart/SimpleBlueBars.js
Normal file
32
examples/BarChart/SimpleBlueBars.js
Normal file
@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import {View} from 'react-native';
|
||||
import {BarChart} from '../../src/BarChart';
|
||||
|
||||
const SimpleBlueBars = () => {
|
||||
const barData1 = [
|
||||
{value: 250, label: 'M'},
|
||||
{value: 500, label: 'T', frontColor: '#177AD5'},
|
||||
{value: 745, label: 'W', frontColor: '#177AD5'},
|
||||
{value: 320, label: 'T'},
|
||||
{value: 600, label: 'F', frontColor: '#177AD5'},
|
||||
{value: 256, label: 'S'},
|
||||
{value: 300, label: 'S'},
|
||||
];
|
||||
return (
|
||||
<View>
|
||||
<BarChart
|
||||
barWidth={22}
|
||||
spacing={16}
|
||||
height={260}
|
||||
noOfSections={3}
|
||||
barBorderRadius={4}
|
||||
frontColor="lightgray"
|
||||
data={barData1}
|
||||
yAxisThickness={0}
|
||||
xAxisThickness={0}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default SimpleBlueBars;
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-native-gifted-charts",
|
||||
"version": "0.1.1",
|
||||
"version": "0.1.2",
|
||||
"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": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { View, FlatList, Animated, Easing, Text, ColorValue } from 'react-native';
|
||||
import { styles } from './styles';
|
||||
import React, {useEffect} from 'react';
|
||||
import {View, FlatList, Animated, Easing, Text, ColorValue} from 'react-native';
|
||||
import {styles} from './styles';
|
||||
import RenderBars from './RenderBars';
|
||||
import RenderStackBars from './RenderStackBars';
|
||||
|
||||
@ -13,7 +13,7 @@ type PropTypes = {
|
||||
stepValue?: number;
|
||||
spacing?: number;
|
||||
data?: any;
|
||||
stackData?: any,
|
||||
stackData?: any;
|
||||
side?: String;
|
||||
rotateLabel?: Boolean;
|
||||
isAnimated?: Boolean;
|
||||
@ -77,6 +77,7 @@ type PropTypes = {
|
||||
|
||||
horizSections?: Array<sectionType>;
|
||||
barBorderRadius?: number;
|
||||
hideOrigin?: Boolean;
|
||||
};
|
||||
type sectionType = {
|
||||
value: number;
|
||||
@ -101,7 +102,7 @@ type itemType = {
|
||||
export const BarChart = (props: PropTypes) => {
|
||||
const containerHeight = props.height || 200;
|
||||
const noOfSections = props.noOfSections || 10;
|
||||
const horizSections = [{ value: 0 }];
|
||||
const horizSections = [{value: 0}];
|
||||
const stepHeight = props.stepHeight || containerHeight / noOfSections;
|
||||
const data = props.data || [];
|
||||
const spacing = props.spacing === 0 ? 0 : props.spacing ? props.spacing : 20;
|
||||
@ -111,15 +112,18 @@ export const BarChart = (props: PropTypes) => {
|
||||
if (props.stackData) {
|
||||
props.stackData.forEach(stackItem => {
|
||||
console.log('stackItem', stackItem);
|
||||
let stackSum = stackItem.stacks.reduce((acc, stack) => acc + stack.value, 0)
|
||||
console.log('stackSum--->', stackSum)
|
||||
let stackSum = stackItem.stacks.reduce(
|
||||
(acc, stack) => acc + stack.value,
|
||||
0,
|
||||
);
|
||||
// console.log('stackSum--->', stackSum);
|
||||
if (stackSum > maxItem) {
|
||||
maxItem = stackSum
|
||||
maxItem = stackSum;
|
||||
}
|
||||
totalWidth += (stackItem.stacks[0].barWidth || props.barWidth || 30) + spacing;
|
||||
})
|
||||
}
|
||||
else {
|
||||
totalWidth +=
|
||||
(stackItem.stacks[0].barWidth || props.barWidth || 30) + spacing;
|
||||
});
|
||||
} else {
|
||||
data.forEach((item: itemType) => {
|
||||
if (item.value > maxItem) {
|
||||
maxItem = item.value;
|
||||
@ -185,10 +189,11 @@ export const BarChart = (props: PropTypes) => {
|
||||
const horizontal = props.horizontal || false;
|
||||
const yAxisAtTop = props.yAxisAtTop || false;
|
||||
const intactTopLabel = props.intactTopLabel || false;
|
||||
const hideOrigin = props.hideOrigin || false;
|
||||
|
||||
horizSections.pop();
|
||||
for (let i = 0; i <= noOfSections; i++) {
|
||||
horizSections.push({ value: maxValue - stepValue * i });
|
||||
horizSections.push({value: maxValue - stepValue * i});
|
||||
}
|
||||
|
||||
const heightValue = new Animated.Value(0);
|
||||
@ -233,7 +238,7 @@ export const BarChart = (props: PropTypes) => {
|
||||
<>
|
||||
{horizSections.map((sectionItems, index) => {
|
||||
return (
|
||||
<View key={index} style={[styles.horizBar, { width: totalWidth }]}>
|
||||
<View key={index} style={[styles.horizBar, {width: totalWidth}]}>
|
||||
<View
|
||||
style={[
|
||||
styles.leftLabel,
|
||||
@ -242,33 +247,36 @@ export const BarChart = (props: PropTypes) => {
|
||||
borderColor: yAxisColor,
|
||||
},
|
||||
horizontal &&
|
||||
!yAxisAtTop && {
|
||||
transform: [{ translateX: totalWidth + yAxisThickness }],
|
||||
},
|
||||
!yAxisAtTop && {
|
||||
transform: [{translateX: totalWidth + yAxisThickness}],
|
||||
},
|
||||
{
|
||||
height:
|
||||
index === noOfSections ? stepHeight / 2 : stepHeight,
|
||||
width: yAxisLabelWidth,
|
||||
},
|
||||
]}>
|
||||
{!hideYAxisText && index !== noOfSections && (
|
||||
{!hideYAxisText && (
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
ellipsizeMode={'clip'}
|
||||
style={[
|
||||
yAxisTextStyle,
|
||||
index === noOfSections && {marginBottom: stepHeight / -2},
|
||||
horizontal && {
|
||||
transform: [
|
||||
{ rotate: '270deg' },
|
||||
{ translateY: yAxisAtTop ? 0 : 50 },
|
||||
{rotate: '270deg'},
|
||||
{translateY: yAxisAtTop ? 0 : 50},
|
||||
],
|
||||
},
|
||||
]}>
|
||||
{showFractionalValues
|
||||
? sectionItems.value || ''
|
||||
: sectionItems.value
|
||||
? sectionItems.value.toString().split('.')[0]
|
||||
: ''}
|
||||
? sectionItems.value.toString().split('.')[0]
|
||||
: hideOrigin
|
||||
? ''
|
||||
: '0'}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
@ -277,13 +285,13 @@ export const BarChart = (props: PropTypes) => {
|
||||
index === noOfSections
|
||||
? styles.lastLeftPart
|
||||
: styles.leftPart,
|
||||
{ backgroundColor: backgroundColor },
|
||||
{backgroundColor: backgroundColor},
|
||||
]}>
|
||||
{index === noOfSections ? (
|
||||
<View
|
||||
style={[
|
||||
styles.line,
|
||||
{ height: xAxisThickness, backgroundColor: xAxisColor },
|
||||
{height: xAxisThickness, backgroundColor: xAxisColor},
|
||||
]}
|
||||
/>
|
||||
) : hideRules ? null : (
|
||||
@ -308,11 +316,11 @@ export const BarChart = (props: PropTypes) => {
|
||||
backgroundColor: yAxisIndicesColor,
|
||||
},
|
||||
horizontal &&
|
||||
!yAxisAtTop && {
|
||||
transform: [
|
||||
{ translateX: totalWidth + yAxisThickness },
|
||||
],
|
||||
},
|
||||
!yAxisAtTop && {
|
||||
transform: [
|
||||
{translateX: totalWidth + yAxisThickness},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
) : null}
|
||||
@ -329,10 +337,10 @@ export const BarChart = (props: PropTypes) => {
|
||||
style={[
|
||||
styles.container,
|
||||
{
|
||||
height: containerHeight
|
||||
height: containerHeight,
|
||||
},
|
||||
props.width && { width: props.width },
|
||||
horizontal && { transform: [{ rotate: '90deg' }, { translateY: -15 }] },
|
||||
props.width && {width: props.width},
|
||||
horizontal && {transform: [{rotate: '90deg'}, {translateY: -15}]},
|
||||
]}>
|
||||
{props.hideAxesAndRules !== true && renderHorizSections()}
|
||||
<FlatList
|
||||
@ -342,33 +350,79 @@ export const BarChart = (props: PropTypes) => {
|
||||
position: 'absolute',
|
||||
bottom: stepHeight * -0.5 - 60 + xAxisThickness,
|
||||
},
|
||||
horizontal && { width: totalWidth },
|
||||
horizontal && {width: totalWidth},
|
||||
]}
|
||||
scrollEnabled={!disableScroll}
|
||||
contentContainerStyle={{
|
||||
height: containerHeight + 130,
|
||||
width: totalWidth,
|
||||
paddingLeft: ((data && data[0] && data[0].barWidth) || props.barWidth || 30) / 2,
|
||||
paddingLeft:
|
||||
((data && data[0] && data[0].barWidth) || props.barWidth || 30) / 2,
|
||||
alignItems: 'flex-end',
|
||||
}}
|
||||
showsHorizontalScrollIndicator={showScrollIndicator}
|
||||
horizontal
|
||||
data={props.stackData || data}
|
||||
keyExtractor={(item, index) => index.toString()}
|
||||
renderItem={({ item, index }) => {
|
||||
renderItem={({item, index}) => {
|
||||
console.log('index--->', index);
|
||||
console.log('itemhere--->', item);
|
||||
if (props.stackData) {
|
||||
return <RenderStackBars
|
||||
return (
|
||||
<RenderStackBars
|
||||
item={item}
|
||||
index={index}
|
||||
containerHeight={containerHeight}
|
||||
maxValue={maxValue}
|
||||
spacing={spacing}
|
||||
barWidth={props.barWidth}
|
||||
opacity={opacity}
|
||||
disablePress={props.disablePress}
|
||||
rotateLabel={rotateLabel}
|
||||
showVerticalLines={showVerticalLines}
|
||||
verticalLinesThickness={verticalLinesThickness}
|
||||
verticalLinesColor={verticalLinesColor}
|
||||
verticalLinesZIndex={verticalLinesZIndex}
|
||||
showXAxisIndices={showXAxisIndices}
|
||||
xAxisIndicesHeight={xAxisIndicesHeight}
|
||||
xAxisIndicesWidth={xAxisIndicesWidth}
|
||||
xAxisIndicesColor={xAxisIndicesColor}
|
||||
horizontal={horizontal}
|
||||
intactTopLabel={intactTopLabel}
|
||||
barBorderRadius={props.barBorderRadius}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<RenderBars
|
||||
item={item}
|
||||
index={index}
|
||||
containerHeight={containerHeight}
|
||||
maxValue={maxValue}
|
||||
spacing={spacing}
|
||||
side={side}
|
||||
data={data}
|
||||
barWidth={props.barWidth}
|
||||
opacity={opacity}
|
||||
disablePress={props.disablePress}
|
||||
isThreeD={isThreeD}
|
||||
isAnimated={isAnimated}
|
||||
animationDuration={animationDuration}
|
||||
rotateLabel={rotateLabel}
|
||||
animatedHeight={animatedHeight}
|
||||
appearingOpacity={appearingOpacity}
|
||||
roundedTop={props.roundedTop}
|
||||
roundedBottom={props.roundedBottom}
|
||||
disablePress={props.disablePress}
|
||||
frontColor={props.frontColor}
|
||||
sideColor={props.sideColor}
|
||||
topColor={props.topColor}
|
||||
showGradient={props.showGradient}
|
||||
gradientColor={props.gradientColor}
|
||||
activeOpacity={props.activeOpacity}
|
||||
cappedBars={props.cappedBars}
|
||||
capThickness={props.capThickness}
|
||||
capColor={props.capColor}
|
||||
capRadius={props.capRadius}
|
||||
showVerticalLines={showVerticalLines}
|
||||
verticalLinesThickness={verticalLinesThickness}
|
||||
verticalLinesColor={verticalLinesColor}
|
||||
@ -379,49 +433,9 @@ export const BarChart = (props: PropTypes) => {
|
||||
xAxisIndicesColor={xAxisIndicesColor}
|
||||
horizontal={horizontal}
|
||||
intactTopLabel={intactTopLabel}
|
||||
barBorderRadius={props.barBorderRadius} />
|
||||
}
|
||||
return <RenderBars
|
||||
item={item}
|
||||
index={index}
|
||||
containerHeight={containerHeight}
|
||||
maxValue={maxValue}
|
||||
spacing={spacing}
|
||||
side={side}
|
||||
data={data}
|
||||
barWidth={props.barWidth}
|
||||
opacity={opacity}
|
||||
isThreeD={isThreeD}
|
||||
isAnimated={isAnimated}
|
||||
animationDuration={animationDuration}
|
||||
rotateLabel={rotateLabel}
|
||||
animatedHeight={animatedHeight}
|
||||
appearingOpacity={appearingOpacity}
|
||||
roundedTop={props.roundedTop}
|
||||
roundedBottom={props.roundedBottom}
|
||||
disablePress={props.disablePress}
|
||||
frontColor={props.frontColor}
|
||||
sideColor={props.sideColor}
|
||||
topColor={props.topColor}
|
||||
showGradient={props.showGradient}
|
||||
gradientColor={props.gradientColor}
|
||||
activeOpacity={props.activeOpacity}
|
||||
cappedBars={props.cappedBars}
|
||||
capThickness={props.capThickness}
|
||||
capColor={props.capColor}
|
||||
capRadius={props.capRadius}
|
||||
showVerticalLines={showVerticalLines}
|
||||
verticalLinesThickness={verticalLinesThickness}
|
||||
verticalLinesColor={verticalLinesColor}
|
||||
verticalLinesZIndex={verticalLinesZIndex}
|
||||
showXAxisIndices={showXAxisIndices}
|
||||
xAxisIndicesHeight={xAxisIndicesHeight}
|
||||
xAxisIndicesWidth={xAxisIndicesWidth}
|
||||
xAxisIndicesColor={xAxisIndicesColor}
|
||||
horizontal={horizontal}
|
||||
intactTopLabel={intactTopLabel}
|
||||
barBorderRadius={props.barBorderRadius}
|
||||
/>
|
||||
barBorderRadius={props.barBorderRadius}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { Fragment, useEffect, useState } from 'react';
|
||||
import React, {Fragment, useEffect, useState} from 'react';
|
||||
import {
|
||||
View,
|
||||
ScrollView,
|
||||
@ -7,7 +7,7 @@ import {
|
||||
Text,
|
||||
ColorValue,
|
||||
} from 'react-native';
|
||||
import { styles } from './styles';
|
||||
import {styles} from './styles';
|
||||
import Svg, {
|
||||
Path,
|
||||
LinearGradient,
|
||||
@ -16,7 +16,7 @@ import Svg, {
|
||||
Rect,
|
||||
Text as CanvasText,
|
||||
} from 'react-native-svg';
|
||||
import { svgPath, bezierCommand } from '../utils';
|
||||
import {svgPath, bezierCommand} from '../utils';
|
||||
|
||||
type propTypes = {
|
||||
height?: number;
|
||||
@ -117,6 +117,7 @@ type propTypes = {
|
||||
textColor1?: string;
|
||||
textFontSize2?: number;
|
||||
textColor2?: string;
|
||||
hideOrigin?: Boolean;
|
||||
};
|
||||
type itemType = {
|
||||
value?: number;
|
||||
@ -166,7 +167,7 @@ export const LineChart = (props: propTypes) => {
|
||||
|
||||
const maxValue = props.maxValue || maxItem;
|
||||
|
||||
const horizSections = [{ value: 0 }];
|
||||
const horizSections = [{value: 0}];
|
||||
const stepHeight = props.stepHeight || containerHeight / noOfSections;
|
||||
const stepValue = props.stepValue || maxValue / noOfSections;
|
||||
const initialSpacing =
|
||||
@ -267,11 +268,12 @@ export const LineChart = (props: propTypes) => {
|
||||
|
||||
const disableScroll = props.disableScroll || false;
|
||||
const showScrollIndicator = props.showScrollIndicator || false;
|
||||
const hideOrigin = props.hideOrigin || false;
|
||||
|
||||
// console.log('data', data);
|
||||
horizSections.pop();
|
||||
for (let i = 0; i <= noOfSections; i++) {
|
||||
horizSections.push({ value: maxValue - stepValue * i });
|
||||
horizSections.push({value: maxValue - stepValue * i});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
@ -384,8 +386,8 @@ export const LineChart = (props: propTypes) => {
|
||||
p2Array.push([
|
||||
initialSpacing - dataPointsWidth2 / 2 + spacing * i,
|
||||
containerHeight +
|
||||
10 -
|
||||
(data2[i].value * containerHeight) / maxValue,
|
||||
10 -
|
||||
(data2[i].value * containerHeight) / maxValue,
|
||||
]);
|
||||
}
|
||||
}
|
||||
@ -483,9 +485,9 @@ export const LineChart = (props: propTypes) => {
|
||||
justifyContent: 'center',
|
||||
// alignSelf: 'center'
|
||||
},
|
||||
rotateLabel && { transform: [{ rotate: '60deg' }] },
|
||||
rotateLabel && {transform: [{rotate: '60deg'}]},
|
||||
]}>
|
||||
<Text style={[labelTextStyle, { textAlign: 'center' }]} numberOfLines={1}>
|
||||
<Text style={[labelTextStyle, {textAlign: 'center'}]} numberOfLines={1}>
|
||||
{label || ''}
|
||||
</Text>
|
||||
</View>
|
||||
@ -513,9 +515,9 @@ export const LineChart = (props: propTypes) => {
|
||||
left: initialSpacing + spacing * index - spacing / 2,
|
||||
opacity: appearingOpacity,
|
||||
},
|
||||
rotateLabel && { transform: [{ rotate: '60deg' }] },
|
||||
rotateLabel && {transform: [{rotate: '60deg'}]},
|
||||
]}>
|
||||
<Text style={[labelTextStyle, { textAlign: 'center' }]} numberOfLines={1}>
|
||||
<Text style={[labelTextStyle, {textAlign: 'center'}]} numberOfLines={1}>
|
||||
{label || ''}
|
||||
</Text>
|
||||
</Animated.View>
|
||||
@ -597,16 +599,23 @@ export const LineChart = (props: propTypes) => {
|
||||
width: yAxisLabelWidth,
|
||||
},
|
||||
]}>
|
||||
{!hideYAxisText && index !== noOfSections && (
|
||||
{!hideYAxisText && (
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
ellipsizeMode={'clip'}
|
||||
style={yAxisTextStyle}>
|
||||
style={[
|
||||
yAxisTextStyle,
|
||||
index === noOfSections && {
|
||||
marginBottom: stepHeight / -2,
|
||||
},
|
||||
]}>
|
||||
{showFractionalValues
|
||||
? sectionItems.value || ''
|
||||
: sectionItems.value
|
||||
? sectionItems.value.toString().split('.')[0]
|
||||
: ''}
|
||||
? sectionItems.value.toString().split('.')[0]
|
||||
: hideOrigin
|
||||
? ''
|
||||
: '0'}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
@ -625,7 +634,7 @@ export const LineChart = (props: propTypes) => {
|
||||
<View
|
||||
style={[
|
||||
styles.line,
|
||||
{ height: xAxisThickness, backgroundColor: xAxisColor },
|
||||
{height: xAxisThickness, backgroundColor: xAxisColor},
|
||||
]}
|
||||
/>
|
||||
) : hideRules ? null : (
|
||||
@ -657,14 +666,19 @@ export const LineChart = (props: propTypes) => {
|
||||
);
|
||||
};
|
||||
|
||||
const renderSpecificDataPoints = (dataForRender) => {
|
||||
const renderSpecificDataPoints = dataForRender => {
|
||||
return dataForRender.map((item: itemType, index: number) => {
|
||||
if (item.showDataPoint) {
|
||||
if (item.dataPointShape === 'rectangular') {
|
||||
return (
|
||||
<Fragment key={index}>
|
||||
<Rect
|
||||
x={initialSpacing - (item.dataPointWidth || 2) / 2 - 1 + spacing * index}
|
||||
x={
|
||||
initialSpacing -
|
||||
(item.dataPointWidth || 2) / 2 -
|
||||
1 +
|
||||
spacing * index
|
||||
}
|
||||
y={
|
||||
containerHeight -
|
||||
(item.dataPointHeight || 2) / 2 +
|
||||
@ -697,14 +711,19 @@ export const LineChart = (props: propTypes) => {
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
return (
|
||||
<Fragment key={index}>
|
||||
<Circle
|
||||
cx={initialSpacing - (item.dataPointWidth || 2) / 2 + spacing * index}
|
||||
cx={
|
||||
initialSpacing -
|
||||
(item.dataPointWidth || 2) / 2 +
|
||||
spacing * index
|
||||
}
|
||||
cy={
|
||||
containerHeight + 10 - (item.value * containerHeight) / maxValue
|
||||
containerHeight +
|
||||
10 -
|
||||
(item.value * containerHeight) / maxValue
|
||||
}
|
||||
r={item.dataPointRadius || 3}
|
||||
fill={item.dataPointColor || 'black'}
|
||||
@ -730,12 +749,12 @@ export const LineChart = (props: propTypes) => {
|
||||
</CanvasText>
|
||||
)}
|
||||
</Fragment>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const renderDataPoints = (
|
||||
dataForRender,
|
||||
@ -827,21 +846,22 @@ export const LineChart = (props: propTypes) => {
|
||||
if (item.showVerticalLine) {
|
||||
return (
|
||||
<Rect
|
||||
x={initialSpacing - (item.verticalLineThickness || 1) / 2 - 1 + spacing * index}
|
||||
y={
|
||||
containerHeight -
|
||||
(item.value * containerHeight) / maxValue +
|
||||
9
|
||||
x={
|
||||
initialSpacing -
|
||||
(item.verticalLineThickness || 1) / 2 -
|
||||
1 +
|
||||
spacing * index
|
||||
}
|
||||
y={containerHeight - (item.value * containerHeight) / maxValue + 9}
|
||||
width={item.verticalLineThickness || 1}
|
||||
height={(item.value * containerHeight) / maxValue}
|
||||
fill={item.verticalLineColor || 'lightgray'}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const renderLine = (
|
||||
points: any,
|
||||
@ -871,7 +891,6 @@ export const LineChart = (props: propTypes) => {
|
||||
strokeWidth={currentLineThickness || thickness}
|
||||
/>
|
||||
|
||||
|
||||
{/*********************** For Area Chart ************/}
|
||||
|
||||
{areaChart && (
|
||||
@ -904,38 +923,33 @@ export const LineChart = (props: propTypes) => {
|
||||
|
||||
{/******************************************************************/}
|
||||
|
||||
|
||||
{renderSpecificVerticalLines(data)}
|
||||
{renderSpecificVerticalLines(data2)}
|
||||
|
||||
{!hideDataPoints1 ?
|
||||
renderDataPoints(
|
||||
data,
|
||||
dataPointsShape1,
|
||||
dataPointsWidth1,
|
||||
dataPointsHeight1,
|
||||
dataPointsColor1,
|
||||
dataPointsRadius1,
|
||||
textColor1,
|
||||
textFontSize1,
|
||||
)
|
||||
:
|
||||
renderSpecificDataPoints(data)
|
||||
}
|
||||
{!hideDataPoints2 ?
|
||||
renderDataPoints(
|
||||
data2,
|
||||
dataPointsShape2,
|
||||
dataPointsWidth2,
|
||||
dataPointsHeight2,
|
||||
dataPointsColor2,
|
||||
dataPointsRadius2,
|
||||
textColor2,
|
||||
textFontSize2,
|
||||
)
|
||||
:
|
||||
renderSpecificDataPoints(data2)
|
||||
}
|
||||
{!hideDataPoints1
|
||||
? renderDataPoints(
|
||||
data,
|
||||
dataPointsShape1,
|
||||
dataPointsWidth1,
|
||||
dataPointsHeight1,
|
||||
dataPointsColor1,
|
||||
dataPointsRadius1,
|
||||
textColor1,
|
||||
textFontSize1,
|
||||
)
|
||||
: renderSpecificDataPoints(data)}
|
||||
{!hideDataPoints2
|
||||
? renderDataPoints(
|
||||
data2,
|
||||
dataPointsShape2,
|
||||
dataPointsWidth2,
|
||||
dataPointsHeight2,
|
||||
dataPointsColor2,
|
||||
dataPointsRadius2,
|
||||
textColor2,
|
||||
textFontSize2,
|
||||
)
|
||||
: renderSpecificDataPoints(data2)}
|
||||
</Svg>
|
||||
</View>
|
||||
);
|
||||
@ -971,7 +985,6 @@ export const LineChart = (props: propTypes) => {
|
||||
strokeWidth={currentLineThickness || thickness}
|
||||
/>
|
||||
|
||||
|
||||
{/*********************** For Area Chart ************/}
|
||||
|
||||
{areaChart && (
|
||||
@ -1004,41 +1017,40 @@ export const LineChart = (props: propTypes) => {
|
||||
|
||||
{/******************************************************************/}
|
||||
|
||||
|
||||
{renderSpecificVerticalLines(data)}
|
||||
{renderSpecificVerticalLines(data2)}
|
||||
|
||||
{!hideDataPoints1 ?
|
||||
renderDataPoints(
|
||||
data,
|
||||
dataPointsShape1,
|
||||
dataPointsWidth1,
|
||||
dataPointsHeight1,
|
||||
dataPointsColor1,
|
||||
dataPointsRadius1,
|
||||
textColor1,
|
||||
textFontSize1,
|
||||
) :
|
||||
renderSpecificDataPoints(data)}
|
||||
{!hideDataPoints2 ?
|
||||
renderDataPoints(
|
||||
data2,
|
||||
dataPointsShape2,
|
||||
dataPointsWidth2,
|
||||
dataPointsHeight2,
|
||||
dataPointsColor2,
|
||||
dataPointsRadius2,
|
||||
textColor2,
|
||||
textFontSize2,
|
||||
) :
|
||||
renderSpecificDataPoints(data2)}
|
||||
{!hideDataPoints1
|
||||
? renderDataPoints(
|
||||
data,
|
||||
dataPointsShape1,
|
||||
dataPointsWidth1,
|
||||
dataPointsHeight1,
|
||||
dataPointsColor1,
|
||||
dataPointsRadius1,
|
||||
textColor1,
|
||||
textFontSize1,
|
||||
)
|
||||
: renderSpecificDataPoints(data)}
|
||||
{!hideDataPoints2
|
||||
? renderDataPoints(
|
||||
data2,
|
||||
dataPointsShape2,
|
||||
dataPointsWidth2,
|
||||
dataPointsHeight2,
|
||||
dataPointsColor2,
|
||||
dataPointsRadius2,
|
||||
textColor2,
|
||||
textFontSize2,
|
||||
)
|
||||
: renderSpecificDataPoints(data2)}
|
||||
</Svg>
|
||||
</Animated.View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { height: containerHeight }]}>
|
||||
<View style={[styles.container, {height: containerHeight}]}>
|
||||
{props.hideAxesAndRules !== true && renderHorizSections()}
|
||||
{/* {sectionsOverlay()} */}
|
||||
<ScrollView
|
||||
@ -1097,49 +1109,49 @@ export const LineChart = (props: propTypes) => {
|
||||
|
||||
{isAnimated
|
||||
? renderAnimatedLine(
|
||||
points,
|
||||
animatedWidth,
|
||||
thickness1,
|
||||
color1,
|
||||
fillPoints,
|
||||
startFillColor1,
|
||||
endFillColor1,
|
||||
startOpacity1,
|
||||
endOpacity1,
|
||||
)
|
||||
points,
|
||||
animatedWidth,
|
||||
thickness1,
|
||||
color1,
|
||||
fillPoints,
|
||||
startFillColor1,
|
||||
endFillColor1,
|
||||
startOpacity1,
|
||||
endOpacity1,
|
||||
)
|
||||
: renderLine(
|
||||
points,
|
||||
thickness1,
|
||||
color1,
|
||||
fillPoints,
|
||||
startFillColor1,
|
||||
endFillColor1,
|
||||
startOpacity1,
|
||||
endOpacity1,
|
||||
)}
|
||||
points,
|
||||
thickness1,
|
||||
color1,
|
||||
fillPoints,
|
||||
startFillColor1,
|
||||
endFillColor1,
|
||||
startOpacity1,
|
||||
endOpacity1,
|
||||
)}
|
||||
{points2
|
||||
? isAnimated
|
||||
? renderAnimatedLine(
|
||||
points2,
|
||||
animatedWidth2,
|
||||
thickness2,
|
||||
color2,
|
||||
fillPoints2,
|
||||
startFillColor2,
|
||||
endFillColor2,
|
||||
startOpacity2,
|
||||
endOpacity2,
|
||||
)
|
||||
points2,
|
||||
animatedWidth2,
|
||||
thickness2,
|
||||
color2,
|
||||
fillPoints2,
|
||||
startFillColor2,
|
||||
endFillColor2,
|
||||
startOpacity2,
|
||||
endOpacity2,
|
||||
)
|
||||
: renderLine(
|
||||
points2,
|
||||
thickness2,
|
||||
color2,
|
||||
fillPoints2,
|
||||
startFillColor2,
|
||||
endFillColor2,
|
||||
startOpacity2,
|
||||
endOpacity2,
|
||||
)
|
||||
points2,
|
||||
thickness2,
|
||||
color2,
|
||||
fillPoints2,
|
||||
startFillColor2,
|
||||
endFillColor2,
|
||||
startOpacity2,
|
||||
endOpacity2,
|
||||
)
|
||||
: null}
|
||||
{data.map((item: itemType, index: number) => {
|
||||
// console.log('item', item)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user