diff --git a/docs/LineChart/LineChartProps.md b/docs/LineChart/LineChartProps.md index de02c51..42deeb1 100644 --- a/docs/LineChart/LineChartProps.md +++ b/docs/LineChart/LineChartProps.md @@ -272,7 +272,11 @@ When you are using the `dataPointLabelComponent`, make sure to provide the `data **Note** If you are setting yAxisSide to yAxisSide.RIGHT, make sure to specify the width of the chart, using the `width` prop ```ts -type RuleType = 'solid' | 'dashed' | 'dotted'; +type RuleType = 'solid' | 'dashed' | 'dotted'; // can be imported from gifted-charts-core +``` + +```ts +type Linecap = 'butt' | 'square' | 'round'; // can be imported from gifted-charts-core ``` ```ts @@ -381,6 +385,7 @@ type secondaryLineConfigType = { thickness?: number; zIndex1?: number; strokeDashArray?: Array; + strokeLinecap?: Linecap; startIndex?: number; endIndex?: number; hideDataPoints?: boolean; @@ -448,6 +453,12 @@ All the properties of **secondaryLineConfig** are optional. Properties not provi | strokeDashArray3 | Array | Array of 2 numbers denoting the dashWidth and dashGap of line3. Used to render dashed/dotted line chart | undefined OR strokeDashArray | | strokeDashArray4 | Array | Array of 2 numbers denoting the dashWidth and dashGap of line4. Used to render dashed/dotted line chart | undefined OR strokeDashArray | | strokeDashArray5 | Array | Array of 2 numbers denoting the dashWidth and dashGap of line5. Used to render dashed/dotted line chart | undefined OR strokeDashArray | +| strokeLinecap | Linecap | Linecap of the lines (see `stroke-linecap` in svg) | butt | +| strokeLinecap1 | Linecap | Linecap of the first line (see `stroke-linecap` in svg) | strokeLinecap (from props) | +| strokeLinecap2 | Linecap | Linecap of the second line (see `stroke-linecap` in svg) | strokeLinecap (from props) | +| strokeLinecap3 | Linecap | Linecap of the third line (see `stroke-linecap` in svg) | strokeLinecap (from props) | +| strokeLinecap4 | Linecap | Linecap of the fourth line (see `stroke-linecap` in svg) | strokeLinecap (from props) | +| strokeLinecap5 | Linecap | Linecap of the fifth line (see `stroke-linecap` in svg) | strokeLinecap (from props) | | lineSegments | Array | Array of objects used to customize segments (parts) of line | \_ | | lineSegments2 | Array | Array of objects used to customize segments (parts) of line2 | \_ | | lineSegments3 | Array | Array of objects used to customize segments (parts) of line3 | \_ | diff --git a/docs/RadarChart/RadarChartProps.md b/docs/RadarChart/RadarChartProps.md index ca9f1ed..105b57b 100644 --- a/docs/RadarChart/RadarChartProps.md +++ b/docs/RadarChart/RadarChartProps.md @@ -23,6 +23,9 @@ | dataLabelsConfig | LabelConfig | | | | labelsPositionOffset | number | | 5 | | dataLabelsPositionOffset | number | | 5 | +| isAnimated | boolean | | false | +| animationDuration | number | | 800 | +| animateTogether | boolean | | false | ### GridConfig @@ -80,6 +83,8 @@ type PolygonConfig = { showGradient?: boolean; opacity?: number; gradientOpacity?: number; + isAnimated?: boolean; + animationDuration?: number; }; ``` diff --git a/package.json b/package.json index 4ded768..6bd819f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-gifted-charts", - "version": "1.4.53", + "version": "1.4.54", "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid and Radar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.", "main": "dist/index.js", "files": [ @@ -26,7 +26,7 @@ "registry": "https://registry.npmjs.org/" }, "dependencies": { - "gifted-charts-core": "0.1.55" + "gifted-charts-core": "0.1.56" }, "devDependencies": { "@babel/cli": "^7.24.8", diff --git a/release-notes/release-notes.md b/release-notes/release-notes.md index 026ffaf..3ca2fba 100644 --- a/release-notes/release-notes.md +++ b/release-notes/release-notes.md @@ -1,3 +1,31 @@ +## 🎉 1.4.54 + +### ✨ Features added- + +1. Added `strokeLinecap` to Line charts to support `'butt' | 'square' | 'round'` linecaps. See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/961
+ Following props have been added- + +- strokeLinecap +- strokeLinecap1 +- strokeLinecap2 +- strokeLinecap3 +- strokeLinecap4 +- strokeLinecap5 +- Added the `strokeLinecap` property in `secondaryLineConfig` and in the items of `dataSet` array + +2. Added support for animation in `Radar` charts. Following props have been added- + +- isAnimated +- animationDuration (default 800) +- animateTogether (default false) +- Added the `isAnimated` and `animationDuration` properties in the objects of `polygonConfigArray` + +--- + +--- + +--- + ## 🎉 1.4.53 Upgraded `gifted-charts-core` version to `0.1.55`, had accidentally pushed the previous version with faulty version `0.1.54` of `gifted-charts-core` diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx index 6aa57c7..e14a4e7 100644 --- a/src/LineChart/index.tsx +++ b/src/LineChart/index.tsx @@ -47,6 +47,7 @@ import { LineDefaults, pointsWithPaddedRepititions, lineDataItemNullSafe, + Linecap, } from 'gifted-charts-core'; import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper'; import {StripAndLabel} from '../Components/common/StripAndLabel'; @@ -218,6 +219,11 @@ export const LineChart = (props: LineChartPropsType) => { strokeDashArray3, strokeDashArray4, strokeDashArray5, + strokeLinecap1, + strokeLinecap2, + strokeLinecap3, + strokeLinecap4, + strokeLinecap5, rotateLabel, isAnimated, hideDataPoints1, @@ -1370,6 +1376,7 @@ export const LineChart = (props: LineChartPropsType) => { startOpacity: number, endOpacity: number, strokeDashArray: Array | undefined | null, + strokeLinecap: Linecap, showArrow: boolean, arrowPoints: any, arrowStrokeWidth: any, @@ -1433,6 +1440,7 @@ export const LineChart = (props: LineChartPropsType) => { : `url(#lineGradient)` : color, strokeWidth: currentLineThickness || thickness, + strokeLinecap, }; if ( strokeDashArray && @@ -1459,6 +1467,7 @@ export const LineChart = (props: LineChartPropsType) => { : `url(#lineGradient)` : item.color, strokeWidth: item.strokeWidth, + strokeLinecap, }; if ( item.strokeDashArray && @@ -1704,6 +1713,7 @@ export const LineChart = (props: LineChartPropsType) => { startOpacity: number, endOpacity: number, strokeDashArray: Array | undefined | null, + strokeLinecap: Linecap, showArrow: any, arrowPoints: any, arrowStrokeWidth: any, @@ -1798,6 +1808,7 @@ export const LineChart = (props: LineChartPropsType) => { startOpacity, endOpacity, strokeDashArray, + strokeLinecap, showArrow, arrowPoints, arrowStrokeWidth, @@ -1837,6 +1848,7 @@ export const LineChart = (props: LineChartPropsType) => { startOpacity: number, endOpacity: number, strokeDashArray: Array | undefined | null, + strokeLinecap: Linecap, showArrow: any, arrowPoints: any, arrowStrokeWidth: any, @@ -1932,6 +1944,7 @@ export const LineChart = (props: LineChartPropsType) => { startOpacity, endOpacity, strokeDashArray, + strokeLinecap, showArrow, arrowPoints, arrowStrokeWidth, @@ -2081,6 +2094,7 @@ export const LineChart = (props: LineChartPropsType) => { set.startOpacity ?? startOpacity1, set.endOpacity ?? endOpacity1, set.strokeDashArray ?? strokeDashArray1, + set.strokeLinecap ?? strokeLinecap1, set.showArrow || props.showArrows, arrowPointsFromSet[index], arrowStrokeWidthsFromSet?.[index], @@ -2116,6 +2130,7 @@ export const LineChart = (props: LineChartPropsType) => { set.startOpacity ?? startOpacity1, set.endOpacity ?? endOpacity1, set.strokeDashArray ?? strokeDashArray1, + set.strokeLinecap ?? strokeLinecap1, set.showArrow || props.showArrows, arrowPointsFromSet[index], arrowStrokeWidthsFromSet?.[index], @@ -2155,6 +2170,7 @@ export const LineChart = (props: LineChartPropsType) => { startOpacity1, endOpacity1, strokeDashArray1, + strokeLinecap1, props.showArrow1 || props.showArrows, arrow1Points, arrowStrokeWidth1, @@ -2189,6 +2205,7 @@ export const LineChart = (props: LineChartPropsType) => { startOpacity1, endOpacity1, strokeDashArray1, + strokeLinecap1, props.showArrow1 || props.showArrows, arrow1Points, arrowStrokeWidth1, @@ -2226,6 +2243,7 @@ export const LineChart = (props: LineChartPropsType) => { secondaryLineConfig.startOpacity, secondaryLineConfig.endOpacity, secondaryLineConfig.strokeDashArray, + secondaryLineConfig.strokeLinecap, secondaryLineConfig.showArrow, secondaryArrowPoints, secondaryLineConfig.arrowConfig?.strokeWidth, @@ -2260,6 +2278,7 @@ export const LineChart = (props: LineChartPropsType) => { secondaryLineConfig.startOpacity, secondaryLineConfig.endOpacity, secondaryLineConfig.strokeDashArray, + secondaryLineConfig.strokeLinecap, secondaryLineConfig.showArrow, secondaryArrowPoints, secondaryLineConfig.arrowConfig?.strokeWidth, @@ -2298,6 +2317,7 @@ export const LineChart = (props: LineChartPropsType) => { startOpacity2, endOpacity2, strokeDashArray2, + strokeLinecap2, props.showArrow2 || props.showArrows, arrow2Points, arrowStrokeWidth2, @@ -2332,6 +2352,7 @@ export const LineChart = (props: LineChartPropsType) => { startOpacity2, endOpacity2, strokeDashArray2, + strokeLinecap2, props.showArrow2 || props.showArrows, arrow2Points, arrowStrokeWidth2, @@ -2370,6 +2391,7 @@ export const LineChart = (props: LineChartPropsType) => { startOpacity3, endOpacity3, strokeDashArray3, + strokeLinecap3, props.showArrow3 || props.showArrows, arrow3Points, arrowStrokeWidth3, @@ -2404,6 +2426,7 @@ export const LineChart = (props: LineChartPropsType) => { startOpacity3, endOpacity3, strokeDashArray3, + strokeLinecap3, props.showArrow3 || props.showArrows, arrow3Points, arrowStrokeWidth3, @@ -2442,6 +2465,7 @@ export const LineChart = (props: LineChartPropsType) => { startOpacity4, endOpacity4, strokeDashArray4, + strokeLinecap4, props.showArrow4 || props.showArrows, arrow4Points, arrowStrokeWidth4, @@ -2476,6 +2500,7 @@ export const LineChart = (props: LineChartPropsType) => { startOpacity4, endOpacity4, strokeDashArray4, + strokeLinecap4, props.showArrow4 || props.showArrows, arrow4Points, arrowStrokeWidth4, @@ -2514,6 +2539,7 @@ export const LineChart = (props: LineChartPropsType) => { startOpacity5, endOpacity5, strokeDashArray5, + strokeLinecap5, props.showArrow5 || props.showArrows, arrow5Points, arrowStrokeWidth5, @@ -2548,6 +2574,7 @@ export const LineChart = (props: LineChartPropsType) => { startOpacity5, endOpacity5, strokeDashArray5, + strokeLinecap5, props.showArrow5 || props.showArrows, arrow5Points, arrowStrokeWidth5, diff --git a/src/RadarChart/index.tsx b/src/RadarChart/index.tsx index b321d06..ed8fb39 100644 --- a/src/RadarChart/index.tsx +++ b/src/RadarChart/index.tsx @@ -1,5 +1,5 @@ -import React, {Fragment} from 'react'; -import {View} from 'react-native'; +import {Fragment, useEffect} from 'react'; +import {Animated, View} from 'react-native'; import Svg, { Line, Polygon, @@ -46,19 +46,94 @@ export const RadarChart = (props: RadarChartProps) => { polygonShowGradient, polygonOpacity, polygonGradientOpacity, + polygonIsAnimated, + polygonAnimationDuration, asterLinesStroke, asterLinesStrokeWidth, asterLinesStrokeDashArray, polygonPoints, + initialPolygonPoints, polygonPointsArray, + initialPolygonPointsArray, polygonConfigArray, angleStep, circular, hideGrid, hideAsterLines, getGridLevelProps, + animateTogether, } = useRadarChart(props); + const initialPolygonPointsAr = initialPolygonPoints.split(' '); + const finalPolygonPointsAr = polygonPoints.split(' '); + + const AnimatedPolygon = Animated.createAnimatedComponent(Polygon); + + const animatedValues = data.map(_ => new Animated.Value(0)); + const animatedPaths = data.map((_, index) => + animatedValues[index]?.interpolate({ + inputRange: [0, 1], + outputRange: [initialPolygonPointsAr[index], finalPolygonPointsAr[index]], + }), + ); + + useEffect(() => { + if (dataSet?.length) return; + animatedValues.forEach(animatedValue => + Animated.timing(animatedValue, { + toValue: 1, + duration: polygonAnimationDuration, + useNativeDriver: false, + }).start(), + ); + }, [data]); + + /******************************************************************************************/ + /********************* Animation handling for dataSet *********************/ + + let animatedValuesForSet: Animated.Value[][] = []; + let animatedPathsForSet: any[] = []; + + if (dataSet?.length) { + polygonConfigArray?.forEach((_, index) => { + const set = dataSet[index]; + const initialPolygonPointsAr = + initialPolygonPointsArray[index].split(' '); + const finalPolygonPointsAr = polygonPointsArray[index].split(' '); + + const animatedValues = set.map((_: any) => new Animated.Value(0)); + animatedValuesForSet.push(animatedValues); + const animatedPaths = set.map((i: any, ind: number) => + animatedValues[ind].interpolate({ + inputRange: [0, 1], + outputRange: [initialPolygonPointsAr[ind], finalPolygonPointsAr[ind]], + }), + ); + animatedPathsForSet.push(animatedPaths); + }); + } + + useEffect(() => { + if (!dataSet?.length) return; + animatedValuesForSet?.forEach((animatedValues, index) => { + setTimeout( + () => { + animatedValues?.forEach(animatedValue => + Animated.timing(animatedValue, { + toValue: 1, + duration: polygonAnimationDuration, + useNativeDriver: false, + }).start(), + ); + }, + animateTogether ? 0 : index * polygonAnimationDuration, + ); + }); + }); + + /******************************************************************************************/ + /******************************************************************************************/ + return ( @@ -67,7 +142,7 @@ export const RadarChart = (props: RadarChartProps) => { const {fill, gradientColor, opacity, gradientOpacity} = polygonConfigItem; return ( - + { {dataSet ? ( polygonConfigArray?.map((item, index) => { const polygonPoints = polygonPointsArray[index]; + const animatedPolygonPoints = animatedPathsForSet[index]; const { stroke, strokeWidth, @@ -196,12 +272,13 @@ export const RadarChart = (props: RadarChartProps) => { fill, showGradient, opacity, + isAnimated = polygonIsAnimated, } = item; return ( - { ); }) ) : ( -