Merge pull request #963 from Abhinandan-Kushwaha/development

v1.4.54 Added animation to Radar charts & strokeLinecap to Line charts
Abhinandan-Kushwaha · Jan 11, 2025 · df1b1d5 · df1b1d5
2 parents d4d8dde + 6ea222d
commit df1b1d5
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 10 deletions.
diff --git 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<number>;
+  strokeLinecap?: Linecap;
   startIndex?: number;
   endIndex?: number;
   hideDataPoints?: boolean;
@@ -448,6 +453,12 @@ All the properties of **secondaryLineConfig** are optional. Properties not provi
 | strokeDashArray3       | Array<number>      | Array of 2 numbers denoting the dashWidth and dashGap of line3. Used to render dashed/dotted line chart     | undefined OR strokeDashArray |
 | strokeDashArray4       | Array<number>      | Array of 2 numbers denoting the dashWidth and dashGap of line4. Used to render dashed/dotted line chart     | undefined OR strokeDashArray |
 | strokeDashArray5       | Array<number>      | 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<LineSegment> | Array of objects used to customize segments (parts) of line                                                 | \_                           |
 | lineSegments2          | Array<LineSegment> | Array of objects used to customize segments (parts) of line2                                                | \_                           |
 | lineSegments3          | Array<LineSegment> | Array of objects used to customize segments (parts) of line3                                                | \_                           |

diff --git 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
@@ -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
@@ -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 <br />
+   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
@@ -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<number> | 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<number> | 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<number> | 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,