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 docs

This commit is contained in:
Abhinandan Kushwaha 2021-08-03 15:36:06 +05:30
parent 66f8046d62
commit bac0c352e4
8 changed files with 135 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -48,6 +48,12 @@ const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
<PieChart data = {data} donut /> <PieChart data = {data} donut />
``` ```
## Props
[a BarChart](docs/BarChart/BarChartProps.md)
[a LineChart](docs/LineChart/LineChartProps.md)
[a PieChart](docs/PieChart/PieChartProps.md)
## Contributing ## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

90
docs/BarChart/BarChartProps.md Normal file
View File

@ -0,0 +1,90 @@
# Bar Chart Props
### Basic props
| Prop | Type | Description | Default value |
| --------------- | -------------- | ------------------------------------------------------------------------------------------------- | ------------------- |
| data | Array of items | An item object represents a bar in the bar chart. The item object 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 |
| stepValue | number | Value 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 |
### Item description
| Key | Value type | Description |
| ---------------------- | ---------- | ------------------------------------------------------------------------------ |
| value | number | Value of the item representing height of the bar |
| barWidth | number | Width of the bar |
| onPress | function | Function called on click of the bar |
| disablePress | Boolean | Prop to disable the press action, defaults to false |
| frontColor | ColorValue | Color of the bar |
| 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, gradientColor 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 |
| 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 |
| cappedBars | Boolean | To show caps on the top of bar |
| capThickness | number | Thickness of the bar cap |
| capColor | ColorValue | Color of the bar cap |
| capRadius | number | Border radius of the bar cap |
### 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 |
| 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 |
### Bar related props
| Prop | Type | Description | Default value |
| ------------- | ---------- | -------------------------------------------------------------------------- | ------------------------ |
| barWidth | number | Width of the bar | 30 |
| 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 |
| activeOpacity | number | activeOpacity on pressing the bar | 0.2 |
#### Bar related props for making Capped Bar chart
| Prop | Type | Description | Default value |
| ------------ | ---------- | ------------------------------- | ------------- |
| cappedBars | Boolean | To show caps on the top of bars | false |
| capThickness | number | Thickness of the bar caps | 6 |
| capColor | ColorValue | Color of the bar caps | gray |
| capRadius | number | Border radius of the bar caps | 0 |

0
docs/LineChart/LineChartProps.md Normal file
View File

0
docs/PieChart/PieChartProps.md Normal file
View File

0
docs/docs.md Normal file
View File

24
src/BarChart/RenderBars.tsx
View File

@ -44,10 +44,10 @@ type Props = {
capThickness?: number; capThickness?: number;
capColor?: ColorValue; capColor?: ColorValue;
capRadius?: number; capRadius?: number;
showVerticalRules: Boolean; showVerticalLines: Boolean;
verticalRulesThickness: number; verticalLinesThickness: number;
verticalRulesColor: ColorValue; verticalLinesColor: ColorValue;
verticalRulesZIndex: number; verticalLinesZIndex: number;
showXAxisIndices: Boolean; showXAxisIndices: Boolean;
xAxisIndicesHeight: number; xAxisIndicesHeight: number;
xAxisIndicesWidth: number; xAxisIndicesWidth: number;
@ -199,8 +199,8 @@ const RenderBars = (props: Props) => {
height: height:
item.capThickness === 0 item.capThickness === 0
? 0 ? 0
: item.capThickness || props.capThickness || 0, : item.capThickness || props.capThickness || 6,
backgroundColor: item.capColor || props.capColor || 'black', backgroundColor: item.capColor || props.capColor || 'gray',
borderTopLeftRadius: borderTopLeftRadius:
item.capRadius === 0 item.capRadius === 0
? 0 ? 0
@ -279,8 +279,8 @@ const RenderBars = (props: Props) => {
height: height:
item.capThickness === 0 item.capThickness === 0
? 0 ? 0
: item.capThickness || props.capThickness || 0, : item.capThickness || props.capThickness || 6,
backgroundColor: item.capColor || props.capColor || 'black', backgroundColor: item.capColor || props.capColor || 'gray',
borderTopLeftRadius: borderTopLeftRadius:
item.capRadius === 0 item.capRadius === 0
? 0 ? 0
@ -336,16 +336,16 @@ const RenderBars = (props: Props) => {
// { backgroundColor: item.frontColor || props.frontColor || 'black' }, // { backgroundColor: item.frontColor || props.frontColor || 'black' },
side !== 'right' && {zIndex: data.length - index}, side !== 'right' && {zIndex: data.length - index},
]}> ]}>
{props.showVerticalRules && ( {props.showVerticalLines && (
<View <View
style={{ style={{
zIndex: props.verticalRulesZIndex, zIndex: props.verticalLinesZIndex,
position: 'absolute', position: 'absolute',
height: (containerHeight || 200) + 15, height: (containerHeight || 200) + 15,
width: props.verticalRulesThickness, width: props.verticalLinesThickness,
bottom: 0, bottom: 0,
left: (item.barWidth || props.barWidth || 30) / 2, left: (item.barWidth || props.barWidth || 30) / 2,
backgroundColor: props.verticalRulesColor, backgroundColor: props.verticalLinesColor,
}} }}
/> />
)} )}

27
src/BarChart/index.tsx
View File

@ -39,10 +39,10 @@ type PropTypes = {
hideRules?: Boolean; hideRules?: Boolean;
rulesColor?: ColorValue; rulesColor?: ColorValue;
rulesThickness?: number; rulesThickness?: number;
showVerticalRules?: Boolean; showVerticalLines?: Boolean;
verticalRulesThickness?: number; verticalLinesThickness?: number;
verticalRulesColor?: ColorValue; verticalLinesColor?: ColorValue;
verticalRulesZIndex?: number; verticalLinesZIndex?: number;
showYAxisIndices?: Boolean; showYAxisIndices?: Boolean;
showXAxisIndices?: Boolean; showXAxisIndices?: Boolean;
@ -118,14 +118,14 @@ export const BarChart = (props: PropTypes) => {
const opacity = props.opacity || 1; const opacity = props.opacity || 1;
const isThreeD = props.isThreeD || false; const isThreeD = props.isThreeD || false;
const showVerticalRules = props.showVerticalRules || false; const showVerticalLines = props.showVerticalLines || false;
const rulesThickness = const rulesThickness =
props.rulesThickness === 0 ? 0 : props.rulesThickness || 1; props.rulesThickness === 0 ? 0 : props.rulesThickness || 1;
const rulesColor = props.rulesColor || 'lightgray'; const rulesColor = props.rulesColor || 'lightgray';
const verticalRulesThickness = const verticalLinesThickness =
props.verticalRulesThickness === 0 ? 0 : props.verticalRulesThickness || 1; props.verticalLinesThickness === 0 ? 0 : props.verticalLinesThickness || 1;
const verticalRulesColor = props.verticalRulesColor || 'lightgray'; const verticalLinesColor = props.verticalLinesColor || 'lightgray';
const verticalRulesZIndex = props.verticalRulesZIndex || -1; const verticalLinesZIndex = props.verticalLinesZIndex || -1;
const showYAxisIndices = props.showYAxisIndices || false; const showYAxisIndices = props.showYAxisIndices || false;
const showXAxisIndices = props.showXAxisIndices || false; const showXAxisIndices = props.showXAxisIndices || false;
@ -309,6 +309,7 @@ export const BarChart = (props: PropTypes) => {
{ {
height: containerHeight, height: containerHeight,
}, },
props.width && {width: props.width},
horizontal && {transform: [{rotate: '90deg'}, {translateY: -15}]}, horizontal && {transform: [{rotate: '90deg'}, {translateY: -15}]},
]}> ]}>
{props.hideAxesAndRules !== true && renderHorizSections()} {props.hideAxesAndRules !== true && renderHorizSections()}
@ -363,10 +364,10 @@ export const BarChart = (props: PropTypes) => {
capThickness={props.capThickness} capThickness={props.capThickness}
capColor={props.capColor} capColor={props.capColor}
capRadius={props.capRadius} capRadius={props.capRadius}
showVerticalRules={showVerticalRules} showVerticalLines={showVerticalLines}
verticalRulesThickness={verticalRulesThickness} verticalLinesThickness={verticalLinesThickness}
verticalRulesColor={verticalRulesColor} verticalLinesColor={verticalLinesColor}
verticalRulesZIndex={verticalRulesZIndex} verticalLinesZIndex={verticalLinesZIndex}
showXAxisIndices={showXAxisIndices} showXAxisIndices={showXAxisIndices}
xAxisIndicesHeight={xAxisIndicesHeight} xAxisIndicesHeight={xAxisIndicesHeight}
xAxisIndicesWidth={xAxisIndicesWidth} xAxisIndicesWidth={xAxisIndicesWidth}

26
src/LineChart/index.tsx
View File

@ -41,10 +41,10 @@ type propTypes = {
hideRules?: Boolean; hideRules?: Boolean;
rulesColor?: ColorValue; rulesColor?: ColorValue;
rulesThickness?: number; rulesThickness?: number;
showVerticalRules?: Boolean; showVerticalLines?: Boolean;
verticalRulesThickness?: number; verticalLinesThickness?: number;
verticalRulesColor?: ColorValue; verticalLinesColor?: ColorValue;
verticalRulesZIndex?: number; verticalLinesZIndex?: number;
hideAxesAndRules?: Boolean; hideAxesAndRules?: Boolean;
areaChart?: Boolean; areaChart?: Boolean;
@ -187,10 +187,10 @@ export const LineChart = (props: propTypes) => {
const rulesThickness = const rulesThickness =
props.rulesThickness === 0 ? 0 : props.rulesThickness || 1; props.rulesThickness === 0 ? 0 : props.rulesThickness || 1;
const rulesColor = props.rulesColor || 'lightgray'; const rulesColor = props.rulesColor || 'lightgray';
const verticalRulesThickness = const verticalLinesThickness =
props.verticalRulesThickness === 0 ? 0 : props.verticalRulesThickness || 1; props.verticalLinesThickness === 0 ? 0 : props.verticalLinesThickness || 1;
const verticalRulesColor = props.verticalRulesColor || 'lightgray'; const verticalLinesColor = props.verticalLinesColor || 'lightgray';
const verticalRulesZIndex = props.verticalRulesZIndex || -1; const verticalLinesZIndex = props.verticalLinesZIndex || -1;
const gradientDirection = props.gradientDirection || 'vertical'; const gradientDirection = props.gradientDirection || 'vertical';
// const animationEasing = props.animationEasing || Easing.ease // const animationEasing = props.animationEasing || Easing.ease
@ -206,7 +206,7 @@ export const LineChart = (props: propTypes) => {
const hideRules = props.hideRules || false; const hideRules = props.hideRules || false;
const areaChart = props.areaChart || false; const areaChart = props.areaChart || false;
const showVerticalRules = props.showVerticalRules || false; const showVerticalLines = props.showVerticalLines || false;
const showYAxisIndices = props.showYAxisIndices || false; const showYAxisIndices = props.showYAxisIndices || false;
const showXAxisIndices = props.showXAxisIndices || false; const showXAxisIndices = props.showXAxisIndices || false;
@ -916,17 +916,17 @@ export const LineChart = (props: propTypes) => {
bottom: stepHeight * -0.5 - 60, //stepHeight * -0.5 + xAxisThickness, bottom: stepHeight * -0.5 - 60, //stepHeight * -0.5 + xAxisThickness,
paddingRight: 100, paddingRight: 100,
}}> }}>
{showVerticalRules && {showVerticalLines &&
data.map((item: itemType, index: number) => { data.map((item: itemType, index: number) => {
return ( return (
<View <View
key={index} key={index}
style={{ style={{
position: 'absolute', position: 'absolute',
zIndex: verticalRulesZIndex || -1, zIndex: verticalLinesZIndex || -1,
height: containerHeight + 15, height: containerHeight + 15,
width: verticalRulesThickness, width: verticalLinesThickness,
backgroundColor: verticalRulesColor, backgroundColor: verticalLinesColor,
bottom: 60, bottom: 60,
left: left:
index * spacing + (initialSpacing - dataPointsWidth1 / 2), index * spacing + (initialSpacing - dataPointsWidth1 / 2),