From 300f2b0a99d1f30694c0b1fc0f649865be313e52 Mon Sep 17 00:00:00 2001 From: Abhinandan Kushwaha Date: Mon, 2 Aug 2021 16:41:56 +0530 Subject: [PATCH] enhanced Line and Pie charts --- App.js | 18 ++- package.json | 2 +- src/LineChart/index.tsx | 285 +++++++++++++++++++--------------------- src/PieChart/index.tsx | 18 +-- 4 files changed, 157 insertions(+), 166 deletions(-) diff --git a/App.js b/App.js index f0543b5..aa2a90d 100644 --- a/App.js +++ b/App.js @@ -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 ( + {/* */} + {/* */} + {/* */} { 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]} diff --git a/package.json b/package.json index fe71bc7..d391537 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx index 2b48048..78bb7b8 100644 --- a/src/LineChart/index.tsx +++ b/src/LineChart/index.tsx @@ -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 ( + + + {item.text && ( + + {item.text} + + )} + + ); + } + return ( + + + {item.text && ( + + {item.text} + + )} + + ); + }); + }; + 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, + )} ); @@ -764,155 +871,27 @@ export const LineChart = (props: propTypes) => { /> )} {!hideDataPoints1 && - data.map((item: itemType, index: number) => { - if (dataPointsShape === 'rectangular') { - return ( - <> - - {item.text && ( - - {item.text} - - )} - - ); - } - return ( - <> - - {item.text && ( - - {item.text} - - )} - - ); - })} + renderDataPoints( + data, + dataPointsShape1, + dataPointsWidth1, + dataPointsHeight1, + dataPointsColor1, + dataPointsRadius1, + textColor1, + textFontSize1, + )} {!hideDataPoints2 && - data2.map((item: itemType, index: number) => { - if (dataPointsShape2 === 'rectangular') { - return ( - <> - - {item.text && ( - - {item.text} - - )} - - ); - } - return ( - <> - - {item.text && ( - - {item.text} - - )} - - ); - })} + renderDataPoints( + data2, + dataPointsShape2, + dataPointsWidth2, + dataPointsHeight2, + dataPointsColor2, + dataPointsRadius2, + textColor2, + textFontSize2, + )} ); diff --git a/src/PieChart/index.tsx b/src/PieChart/index.tsx index 75298d5..3c8c55d 100644 --- a/src/PieChart/index.tsx +++ b/src/PieChart/index.tsx @@ -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 ( - + {visibility && donut && !isDataShifted && ( { 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