feat: add ability to change active point border width or remove it

Malaa-tech · Nov 13, 2023 · a8e1034 · a8e1034
1 parent ebb7121
commit a8e1034
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/src/ActivePoint.tsx b/src/ActivePoint.tsx
@@ -29,6 +29,7 @@ const ActivePoint = ({
   onPointChange,
   color,
   borderColor,
+  borderWidth,
   radius,
   showVerticalLine,
   showActivePointCircle,
@@ -48,6 +49,7 @@ const ActivePoint = ({
   onPointChange?: (point?: DataPoint) => void;
   color: ColorValue;
   borderColor: ColorValue;
+  borderWidth: number;
   radius: number;
   showVerticalLine: boolean;
   showActivePointCircle: boolean;
@@ -195,7 +197,7 @@ const ActivePoint = ({
           <AnimatedCircle
             fill={borderColor}
             animatedProps={activePointProps}
-            r={radius * 1.3}
+            r={radius + borderWidth}
           />
           <AnimatedCircle
             fill={color}

diff --git a/src/SvgPath.tsx b/src/SvgPath.tsx
@@ -291,6 +291,12 @@ const LineComponent = ({
             line?.activePointConfig?.borderColor ||
             ACTIVE_POINT_CONFIG.borderColor
           }
+          borderWidth={
+            line?.activePointConfig?.borderWidth !== undefined &&
+            line?.activePointConfig?.borderWidth >= 0
+              ? line?.activePointConfig?.borderWidth
+              : ACTIVE_POINT_CONFIG.borderWidth
+          }
           showVerticalLine={
             line?.activePointConfig?.showVerticalLine !== undefined
               ? line?.activePointConfig?.showVerticalLine

diff --git a/src/defaults.tsx b/src/defaults.tsx
@@ -3,6 +3,7 @@ import { Dimensions } from 'react-native';
 export const ACTIVE_POINT_CONFIG = {
   color: 'black',
   borderColor: 'black',
+  borderWidth: 2,
   radius: 4,
   showVerticalLine: false,
   showActivePointCircle: true,

diff --git a/src/types.ts b/src/types.ts
@@ -127,17 +127,22 @@ export interface EndPointConfig {
  */
 export interface ActivePointConfig {
   /**
-   * The color of the active point
+   * The color of the active point circle
    * @default 'black'
    */
   color?: ColorValue;
   /**
-   * the border color for the active point
+   * the border color for the active point circle
    * @default 'black'
    */
   borderColor?: ColorValue;
   /**
-   * the border radius for the active point
+   * the border width for the active point circle
+   * @default 2
+   */
+  borderWidth?: number;
+  /**
+   * the border radius for the active point circle
    * @default 4
    */
   radius?: number;