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

enhanced Line and Pie charts

This commit is contained in:
Abhinandan Kushwaha 2021-08-02 16:41:56 +05:30
parent fb59d95d28
commit 300f2b0a99
4 changed files with 157 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
App.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import {View} from 'react-native';
import {LineChart} from './src';
import {BarChart, LineChart, PieChart} from './src';
const App = () => {
const lineData = [
@ -18,8 +18,19 @@ const App = () => {
{value: 100, text: 'May'},
];
const data = [{value: 50}, {value: 80}, {value: 90}, {value: 70}];
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
{/* <LineChart data={data} curved /> */}
{/* <BarChart
data={data}
frontColor="lightgray"
cappedBars
capThickness={2}
capColor="gray"
/> */}
{/* <PieChart data={data} donut isThreeD shadow /> */}
<LineChart
xAxisColor="red"
xAxisThickness={2}
@ -30,14 +41,15 @@ const App = () => {
animationDuration={1200}
height={300}
rotateLabel
thickness={1}
// thickness={1}
dataPointsHeight={8}
dataPointsWidth={8}
animateTogether
// textColor="skyblue"
// dataPointsShape="rectangular"
spacing={84}
initialSpacing={4}
areaChart
// areaChart
color1="skyblue"
color2="orange"
data={[...lineData]}

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "react-native-gifted-charts",
"version": "0.0.1",
"description": "The most complete library for Bar, Line, Area and Pie charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
"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",
"scripts": {
"android": "react-native run-android",

285
src/LineChart/index.tsx
View File

@ -1,4 +1,4 @@
import React, {useEffect, useState} from 'react';
import React, {Fragment, useEffect, useState} from 'react';
import {
View,
ScrollView,
@ -228,17 +228,17 @@ export const LineChart = (props: propTypes) => {
props.dataPointsHeight1 || props.dataPointsHeight || 2;
const dataPointsWidth1 = props.dataPointsWidth1 || props.dataPointsWidth || 2;
const dataPointsRadius1 =
props.dataPointsRadius1 || props.dataPointsRadius || 2;
props.dataPointsRadius1 || props.dataPointsRadius || 3;
const dataPointsColor1 =
props.dataPointsColor1 || props.dataPointsColor || 'black';
const dataPointsShape =
props.dataPointsShape || props.dataPointsShape || 'circular';
const dataPointsShape1 =
props.dataPointsShape1 || props.dataPointsShape || 'circular';
const dataPointsHeight2 =
props.dataPointsHeight2 || props.dataPointsHeight || 2;
const dataPointsWidth2 = props.dataPointsWidth2 || props.dataPointsWidth || 2;
const dataPointsRadius2 =
props.dataPointsRadius2 || props.dataPointsRadius || 2;
props.dataPointsRadius2 || props.dataPointsRadius || 3;
const dataPointsColor2 =
props.dataPointsColor2 || props.dataPointsColor || 'blue';
const dataPointsShape2 =
@ -648,6 +648,91 @@ export const LineChart = (props: propTypes) => {
);
};
const renderDataPoints = (
dataForRender,
dataPointsShape,
dataPointsWidth,
dataPointsHeight,
dataPointsColor,
dataPointsRadius,
textColor,
textFontSize,
) => {
return dataForRender.map((item: itemType, index: number) => {
// console.log('comes in');
if (dataPointsShape === 'rectangular') {
return (
<Fragment key={index}>
<Rect
x={initialSpacing - dataPointsWidth + spacing * index}
y={
containerHeight -
dataPointsHeight / 2 +
10 -
(item.value * containerHeight) / maxValue
}
width={dataPointsWidth}
height={dataPointsHeight}
fill={dataPointsColor}
/>
{item.text && (
<CanvasText
fill={item.textColor || textColor}
fontSize={item.textFontSize || textFontSize}
x={
initialSpacing -
dataPointsWidth +
spacing * index +
(item.textShiftX || 0)
}
y={
containerHeight -
dataPointsHeight / 2 +
10 -
(item.value * containerHeight) / maxValue +
(item.textShiftY || 0)
}>
{item.text}
</CanvasText>
)}
</Fragment>
);
}
return (
<Fragment key={index}>
<Circle
cx={initialSpacing - dataPointsWidth / 2 + spacing * index}
cy={
containerHeight + 10 - (item.value * containerHeight) / maxValue
}
r={dataPointsRadius}
fill={dataPointsColor}
/>
{item.text && (
<CanvasText
fill={item.textColor || textColor}
fontSize={item.textFontSize || textFontSize}
x={
initialSpacing -
dataPointsWidth +
spacing * index +
(item.textShiftX || 0)
}
y={
containerHeight -
dataPointsHeight / 2 +
10 -
(item.value * containerHeight) / maxValue +
(item.textShiftY || 0)
}>
{item.text}
</CanvasText>
)}
</Fragment>
);
});
};
const renderLine = (
points: any,
currentLineThickness: number | undefined,
@ -702,6 +787,28 @@ export const LineChart = (props: propTypes) => {
strokeWidth={currentLineThickness || thickness}
/>
)}
{!hideDataPoints1 &&
renderDataPoints(
data,
dataPointsShape1,
dataPointsWidth1,
dataPointsHeight1,
dataPointsColor1,
dataPointsRadius1,
textColor1,
textFontSize1,
)}
{!hideDataPoints2 &&
renderDataPoints(
data2,
dataPointsShape2,
dataPointsWidth2,
dataPointsHeight2,
dataPointsColor2,
dataPointsRadius2,
textColor2,
textFontSize2,
)}
</Svg>
</View>
);
@ -764,155 +871,27 @@ export const LineChart = (props: propTypes) => {
/>
)}
{!hideDataPoints1 &&
data.map((item: itemType, index: number) => {
if (dataPointsShape === 'rectangular') {
return (
<>
<Rect
x={initialSpacing - dataPointsWidth1 + spacing * index}
y={
containerHeight -
dataPointsHeight1 / 2 +
10 -
(item.value * containerHeight) / maxValue
}
width={dataPointsWidth1}
height={dataPointsHeight1}
fill={dataPointsColor1}
/>
{item.text && (
<CanvasText
fill={item.textColor || textColor1}
fontSize={item.textFontSize || textFontSize1}
x={
initialSpacing -
dataPointsWidth1 +
spacing * index +
(item.textShiftX || 0)
}
y={
containerHeight -
dataPointsHeight1 / 2 +
10 -
(item.value * containerHeight) / maxValue +
(item.textShiftY || 0)
}>
{item.text}
</CanvasText>
)}
</>
);
}
return (
<>
<Circle
cx={initialSpacing - dataPointsWidth1 / 2 + spacing * index}
cy={
containerHeight +
10 -
(item.value * containerHeight) / maxValue
}
r={dataPointsRadius1}
fill={dataPointsColor1}
/>
{item.text && (
<CanvasText
fill={item.textColor || textColor1}
fontSize={item.textFontSize || textFontSize1}
x={
initialSpacing -
dataPointsWidth1 +
spacing * index +
(item.textShiftX || 0)
}
y={
containerHeight -
dataPointsHeight1 / 2 +
10 -
(item.value * containerHeight) / maxValue +
(item.textShiftY || 0)
}>
{item.text}
</CanvasText>
)}
</>
);
})}
renderDataPoints(
data,
dataPointsShape1,
dataPointsWidth1,
dataPointsHeight1,
dataPointsColor1,
dataPointsRadius1,
textColor1,
textFontSize1,
)}
{!hideDataPoints2 &&
data2.map((item: itemType, index: number) => {
if (dataPointsShape2 === 'rectangular') {
return (
<>
<Rect
x={initialSpacing - dataPointsWidth2 + spacing * index}
y={
containerHeight -
dataPointsHeight2 / 2 +
10 -
(item.value * containerHeight) / maxValue
}
width={dataPointsWidth2}
height={dataPointsHeight2}
fill={dataPointsColor2}
/>
{item.text && (
<CanvasText
fill={item.textColor || textColor2}
fontSize={item.textFontSize || textFontSize2}
x={
initialSpacing -
dataPointsWidth2 +
spacing * index +
(item.textShiftX || 0)
}
y={
containerHeight -
dataPointsHeight2 / 2 +
10 -
(item.value * containerHeight) / maxValue +
(item.textShiftY || 0)
}>
{item.text}
</CanvasText>
)}
</>
);
}
return (
<>
<Circle
cx={initialSpacing - dataPointsWidth2 / 2 + spacing * index}
cy={
containerHeight +
10 -
(item.value * containerHeight) / maxValue
}
r={dataPointsRadius2}
fill={dataPointsColor2}
/>
{item.text && (
<CanvasText
fill={item.textColor || textColor2}
fontSize={item.textFontSize || textFontSize2}
x={
initialSpacing -
dataPointsWidth2 +
spacing * index +
(item.textShiftX || 0)
}
y={
containerHeight -
dataPointsHeight2 / 2 +
10 -
(item.value * containerHeight) / maxValue +
(item.textShiftY || 0)
}>
{item.text}
</CanvasText>
)}
</>
);
})}
renderDataPoints(
data2,
dataPointsShape2,
dataPointsWidth2,
dataPointsHeight2,
dataPointsColor2,
dataPointsRadius2,
textColor2,
textFontSize2,
)}
</Svg>
</Animated.View>
);

18
src/PieChart/index.tsx
View File

@ -6,7 +6,7 @@ const pi = Math.PI;
type propTypes = {
radius?: number;
is3D?: Boolean;
isThreeD?: Boolean;
donut?: Boolean;
innerRadius?: number;
shadow?: Boolean;
@ -32,7 +32,7 @@ type itemType = {
textColor?: string;
};
export const PieChart = (props: propTypes) => {
const {data, is3D, textColor} = props;
const {data, isThreeD, textColor} = props;
const radius = props.radius || 120;
const shadowWidth = props.shadowWidth || (4 * radius) / 3;
const backgroundColor = props.backgroundColor || 'white';
@ -59,7 +59,7 @@ export const PieChart = (props: propTypes) => {
}
});
const canvasHeight = is3D ? radius * 2.5 + 60 : radius * 2 + 60;
const canvasHeight = isThreeD ? radius * 2.5 + 60 : radius * 2 + 60;
const canvasWidth = radius * 2 + 60;
const [visibility, setVisibility] = useState(false);
@ -73,7 +73,7 @@ export const PieChart = (props: propTypes) => {
return null;
}
if (is3D) {
if (isThreeD) {
canvas.height = canvasHeight;
} else {
canvas.height = canvasHeight;
@ -86,7 +86,7 @@ export const PieChart = (props: propTypes) => {
const initialValue = 30;
/****************** SHADOW ***************/
if (is3D && shadow) {
if (isThreeD && shadow) {
ctx.beginPath();
ctx.moveTo(initialValue, radius + initialValue);
ctx.lineTo(initialValue, shadowWidth + initialValue);
@ -128,7 +128,7 @@ export const PieChart = (props: propTypes) => {
/**************** being visible inside the chart content if ***************/
/**************** the color of sections is transparent ***************/
if (is3D && shadow) {
if (isThreeD && shadow) {
ctx.beginPath();
ctx.moveTo(
@ -211,7 +211,7 @@ export const PieChart = (props: propTypes) => {
};
return (
<View style={is3D && {transform: [{scaleY: 0.5}]}}>
<View style={isThreeD && {transform: [{scaleY: 0.5}]}}>
<Canvas ref={handleCanvas} />
{visibility && donut && !isDataShifted && (
<View
@ -225,13 +225,13 @@ export const PieChart = (props: propTypes) => {
left: canvasWidth / 2 - innerRadius + shiftCenterX,
top:
canvasHeight / 2 -
innerRadius * (is3D ? 1.5 : 1) +
innerRadius * (isThreeD ? 1.5 : 1) +
shiftCenterY,
borderWidth: innerCircleBorderWidth,
borderColor: innerCircleBorderColor,
backgroundColor: innerCircleColor,
},
is3D && {
isThreeD && {
borderTopWidth: innerCircleBorderWidth * 5,
borderLeftWidth: shiftCenterX
? innerCircleBorderWidth * 2