react-native-gifted-charts 1.3.17 → 1.3.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.3.17",
+  "version": "1.3.18",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [

package/src/BarChart/index.tsx

@@ -6,6 +6,7 @@ import {
   getArrowPoints,
   getAxesAndRulesProps,
   getExtendedContainerHeightWithPadding,
+  getLineConfigForBarChart,
   getSecondaryDataWithOffsetIncluded,
   getXForLineInBar,
   getYForLineInBar,
@@ -29,6 +30,7 @@ import {Pointer} from '../Components/common/Pointer';
 export const BarChart = (props: BarChartPropsType) => {
   const scrollRef = props.scrollRef ?? useRef(null);
   const [points, setPoints] = useState('');
+  const [points2, setPoints2] = useState('');
   const [arrowPoints, setArrowPoints] = useState('');
   const [selectedIndex, setSelectedIndex] = useState(-1);
   const showLine = props.showLine || BarDefaults.showLine;
@@ -81,6 +83,8 @@ export const BarChart = (props: BarChartPropsType) => {
     return props.lineData;
   }, [props.yAxisOffset, props.lineData, data, props.stackData]);
 
+  const lineData2 = props.lineData2;
+
   const lineBehindBars = props.lineBehindBars || BarDefaults.lineBehindBars;
 
   defaultLineConfig.initialSpacing = initialSpacing;
@@ -88,75 +92,10 @@ export const BarChart = (props: BarChartPropsType) => {
   defaultLineConfig.animationDuration = animationDuration;
 
   const lineConfig = props.lineConfig
-    ? {
-        initialSpacing:
-          props.lineConfig.initialSpacing ?? defaultLineConfig.initialSpacing,
-        curved: props.lineConfig.curved || defaultLineConfig.curved,
-        curvature: props.lineConfig.curvature ?? defaultLineConfig.curvature,
-        curveType: props.lineConfig.curveType ?? defaultLineConfig.curveType,
-        isAnimated: props.lineConfig.isAnimated || defaultLineConfig.isAnimated,
-        animationDuration:
-          props.lineConfig.animationDuration ||
-          defaultLineConfig.animationDuration,
-        thickness: props.lineConfig.thickness || defaultLineConfig.thickness,
-        color: props.lineConfig.color || defaultLineConfig.color,
-        hideDataPoints:
-          props.lineConfig.hideDataPoints || defaultLineConfig.hideDataPoints,
-        dataPointsShape:
-          props.lineConfig.dataPointsShape || defaultLineConfig.dataPointsShape,
-        dataPointsHeight:
-          props.lineConfig.dataPointsHeight ||
-          defaultLineConfig.dataPointsHeight,
-        dataPointsWidth:
-          props.lineConfig.dataPointsWidth || defaultLineConfig.dataPointsWidth,
-        dataPointsColor:
-          props.lineConfig.dataPointsColor || defaultLineConfig.dataPointsColor,
-        dataPointsRadius:
-          props.lineConfig.dataPointsRadius ||
-          defaultLineConfig.dataPointsRadius,
-        textColor: props.lineConfig.textColor || defaultLineConfig.textColor,
-        textFontSize:
-          props.lineConfig.textFontSize || defaultLineConfig.textFontSize,
-        textShiftX: props.lineConfig.textShiftX || defaultLineConfig.textShiftX,
-        textShiftY: props.lineConfig.textShiftY || defaultLineConfig.textShiftY,
-        shiftX: props.lineConfig.shiftX || defaultLineConfig.shiftX,
-        shiftY: props.lineConfig.shiftY || defaultLineConfig.shiftY,
-        delay: props.lineConfig.delay || defaultLineConfig.delay,
-        startIndex: props.lineConfig.startIndex || defaultLineConfig.startIndex,
-        endIndex:
-          props.lineConfig.endIndex === 0
-            ? 0
-            : props.lineConfig.endIndex || defaultLineConfig.endIndex,
-
-        showArrow: props.lineConfig.showArrow ?? defaultLineConfig.showArrow,
-        arrowConfig: {
-          length:
-            props.lineConfig.arrowConfig?.length ??
-            defaultLineConfig.arrowConfig?.length,
-          width:
-            props.lineConfig.arrowConfig?.width ??
-            defaultLineConfig.arrowConfig?.width,
-
-          strokeWidth:
-            props.lineConfig.arrowConfig?.strokeWidth ??
-            defaultLineConfig.arrowConfig?.strokeWidth,
-
-          strokeColor:
-            props.lineConfig.arrowConfig?.strokeColor ??
-            defaultLineConfig.arrowConfig?.strokeColor,
-
-          fillColor:
-            props.lineConfig.arrowConfig?.fillColor ??
-            defaultLineConfig.arrowConfig?.fillColor,
-
-          showArrowBase:
-            props.lineConfig.arrowConfig?.showArrowBase ??
-            defaultLineConfig.arrowConfig?.showArrowBase,
-        },
-        customDataPoint: props.lineConfig.customDataPoint,
-        isSecondary:
-          props.lineConfig.isSecondary ?? defaultLineConfig.isSecondary,
-      }
+    ? getLineConfigForBarChart(props.lineConfig)
+    : defaultLineConfig;
+  const lineConfig2 = props.lineConfig2
+    ? getLineConfigForBarChart(props.lineConfig2)
     : defaultLineConfig;
   const noOfSections = props.noOfSections ?? AxesAndRulesDefaults.noOfSections;
   const containerHeight =
@@ -397,7 +336,8 @@ export const BarChart = (props: BarChartPropsType) => {
 
   useEffect(() => {
     if (showLine) {
-      let pp = '';
+      let pp = '',
+        pp2 = '';
       const firstBarWidth =
         (props.stackData ?? data)?.[0].barWidth ?? props.barWidth ?? 30;
       if (!lineConfig.curved) {
@@ -488,6 +428,67 @@ export const BarChart = (props: BarChartPropsType) => {
           setPoints(xx);
         }
       }
+      if (lineData2?.length) {
+        if (!lineConfig2?.curved) {
+          for (let i = 0; i < lineData2.length; i++) {
+            if (i < lineConfig2.startIndex || i > lineConfig2.endIndex)
+              continue;
+            const currentBarWidth =
+              data?.[i]?.barWidth ?? props.barWidth ?? BarDefaults.barWidth;
+            const currentValue = lineData2[i].value;
+            pp2 +=
+              'L' +
+              getXForLineInBar(
+                i,
+                firstBarWidth,
+                currentBarWidth,
+                yAxisLabelWidth,
+                lineConfig2,
+                spacing,
+              ) +
+              ' ' +
+              getYForLineInBar(
+                currentValue,
+                lineConfig2.shiftY,
+                containerHeight,
+                lineConfig2.isSecondary ? secondaryMaxValue : maxValue,
+              ) +
+              ' ';
+          }
+          setPoints2(pp2.replace('L', 'M'));
+        } else {
+          let p2Array: Array<Array<number>> = [];
+          for (let i = 0; i < lineData2.length; i++) {
+            if (i < lineConfig2.startIndex || i > lineConfig2.endIndex)
+              continue;
+            const currentBarWidth =
+              data?.[i]?.barWidth ?? props.barWidth ?? BarDefaults.barWidth;
+            const currentValue = lineData2[i].value;
+            p2Array.push([
+              getXForLineInBar(
+                i,
+                firstBarWidth,
+                currentBarWidth,
+                yAxisLabelWidth,
+                lineConfig2,
+                spacing,
+              ),
+              getYForLineInBar(
+                currentValue,
+                lineConfig2.shiftY,
+                containerHeight,
+                lineConfig2.isSecondary ? secondaryMaxValue : maxValue,
+              ),
+            ]);
+            let xx = svgPath(
+              p2Array,
+              lineConfig2.curveType,
+              lineConfig2.curvature,
+            );
+            setPoints2(xx);
+          }
+        }
+      }
       if (lineConfig.isAnimated) {
         setTimeout(() => decreaseWidth(), lineConfig.delay || 0);
       }
@@ -866,11 +867,14 @@ export const BarChart = (props: BarChartPropsType) => {
     spacing,
     showLine,
     lineConfig,
+    lineConfig2,
     maxValue,
     lineData,
+    lineData2,
     animatedWidth,
     lineBehindBars,
     points,
+    points2,
     arrowPoints,
     renderChartContent,
     remainingScrollViewProps,

package/src/BarChart/types.ts

@@ -53,7 +53,9 @@ export type BarChartPropsType = {
   sideWidth?: number;
   showLine?: boolean;
   lineData?: any;
+  lineData2?: any;
   lineConfig?: lineConfigType;
+  lineConfig2?: lineConfigType;
   lineBehindBars?: boolean;
 
   cappedBars?: boolean;

package/src/Components/BarAndLineChartsWrapper/index.tsx

@@ -44,11 +44,14 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     spacing,
     showLine,
     lineConfig,
+    lineConfig2,
     maxValue,
     lineData,
+    lineData2,
     animatedWidth,
     lineBehindBars,
     points,
+    points2,
     arrowPoints,
     renderChartContent,
     remainingScrollViewProps,
@@ -114,7 +117,8 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     axesAndRulesProps.rulesThickness ?? AxesAndRulesDefaults.rulesThickness;
   const rulesColor =
     axesAndRulesProps.rulesColor ?? AxesAndRulesDefaults.rulesColor;
-  const rulesConfigArray = axesAndRulesProps.rulesConfigArray ?? AxesAndRulesDefaults.rulesConfigArray;
+  const rulesConfigArray =
+    axesAndRulesProps.rulesConfigArray ?? AxesAndRulesDefaults.rulesConfigArray;
   const showYAxisIndices = axesAndRulesProps.showYAxisIndices ?? false;
   const yAxisIndicesHeight =
     axesAndRulesProps.yAxisIndicesHeight ??
@@ -250,6 +254,12 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     scrollEventThrottle,
     xAxisLabelsVerticalShift,
   };
+  const lineInBarChartProps2 = {
+    ...lineInBarChartProps,
+    lineConfig: lineConfig2,
+    points: points2,
+    data: lineData2,
+  };
   const extendedContainerHeight = containerHeight + 10;
   const containerHeightIncludingBelowXAxis =
     extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight;
@@ -356,8 +366,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
                 ? 0
                 : yAxisLabelWidth + yAxisThickness,
             position: 'absolute',
-            bottom:
-              (chartType === chartTypes.LINE_BI_COLOR ? 0 : xAxisThickness),
+            bottom: chartType === chartTypes.LINE_BI_COLOR ? 0 : xAxisThickness,
           },
           !!props.width && {width: props.width},
           horizontal && {
@@ -404,6 +413,12 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
             // Only For Bar Charts-
             showLine ? <RenderLineInBarChart {...lineInBarChartProps} /> : null
           }
+          {
+            // Only For Bar Charts-
+            showLine && points2?.length ? (
+              <RenderLineInBarChart {...lineInBarChartProps2} />
+            ) : null
+          }
           {
             // Only For Line Charts-
             chartType === chartTypes.LINE &&

package/src/LineChart/LineChartBicolor.tsx

@@ -1344,12 +1344,15 @@ export const LineChartBicolor = (props: propTypes) => {
     setSelectedIndex,
     spacing,
     showLine: false,
-    lineConfig: null,
+    lineConfig: null, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    lineConfig2: null, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     maxValue,
     lineData: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    lineData2: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     animatedWidth,
     lineBehindBars: false,
     points: pointsArray,
+    points2: '', // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     arrowPoints: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     renderChartContent,
     remainingScrollViewProps: {},

package/src/LineChart/index.tsx

@@ -35,6 +35,9 @@ import {
   getAllArrowProperties,
   computeMaxAndMinItems,
   clone,
+  getCurvePathWithSegments,
+  getSegmentedPathObjects,
+  getSegmentString,
 } from '../utils';
 import {
   AxesAndRulesDefaults,
@@ -46,7 +49,11 @@ import {
 } from '../utils/constants';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
 import {LineChartPropsType, itemType} from './types';
-import {BarAndLineChartsWrapperTypes} from '../utils/types';
+import {
+  BarAndLineChartsWrapperTypes,
+  EdgePosition,
+  LineSvgProps,
+} from '../utils/types';
 import {StripAndLabel} from '../Components/common/StripAndLabel';
 import {Pointer} from '../Components/common/Pointer';
 
@@ -228,6 +235,12 @@ export const LineChart = (props: LineChartPropsType) => {
   const startIndex5 = props.startIndex5 || 0;
   const endIndex5 = props.endIndex5 ?? data5.length - 1;
 
+  const lineSegments = props.lineSegments;
+  const lineSegments2 = props.lineSegments2;
+  const lineSegments3 = props.lineSegments3;
+  const lineSegments4 = props.lineSegments4;
+  const lineSegments5 = props.lineSegments5;
+
   if (!initialData) {
     initialData = [...data];
     animations = initialData.map(item => new Animated.Value(item.value));
@@ -387,6 +400,8 @@ export const LineChart = (props: LineChartPropsType) => {
   const stepChart4 = props.stepChart4 ?? false;
   const stepChart5 = props.stepChart5 ?? false;
 
+  const edgePosition = props.edgePosition ?? LineDefaults.edgePosition;
+
   const textFontSize1 =
     props.textFontSize1 ?? props.textFontSize ?? LineDefaults.textFontSize;
   const textFontSize2 =
@@ -792,6 +807,35 @@ export const LineChart = (props: LineChartPropsType) => {
       ' '
     );
   };
+
+  const getNextPoint = (data, index, around) => {
+    const isLast = index === data.length - 1;
+    return isLast && !around
+      ? ' '
+      : ' L' +
+          (getX(index) + (around ? (isLast ? 0 : spacing / 2) : spacing)) +
+          ' ' +
+          getY(data[index].value) +
+          ' ';
+  };
+  const getStepPath = (data, i) => {
+    const around = edgePosition === EdgePosition.AROUND_DATA_POINT;
+    return (
+      'L' +
+      (getX(i) - (around && i > 0 ? spacing / 2 : 0)) +
+      ' ' +
+      getY(data[i].value) +
+      getNextPoint(data, i, around)
+    );
+  };
+  const getSegmentPath = (data, i, lineSegment) =>
+    'L' +
+    getX(i) +
+    ' ' +
+    getY(data[i].value) +
+    ' ' +
+    getSegmentString(lineSegment, i);
+
   useEffect(() => {
     let pp = '',
       pp2 = '',
@@ -802,82 +846,38 @@ export const LineChart = (props: LineChartPropsType) => {
       for (let i = 0; i < data.length; i++) {
         if (i >= startIndex1 && i <= endIndex1 && !animateOnDataChange) {
           if (stepChart || stepChart1) {
-            pp +=
-              'L' +
-              (getX(i) - spacing / 2) +
-              ' ' +
-              getY(data[i].value) +
-              ' L' +
-              (getX(i) + spacing / 2) +
-              ' ' +
-              getY(data[i].value) +
-              ' ';
+            pp += getStepPath(data, i);
           } else {
-            pp += 'L' + getX(i) + ' ' + getY(data[i].value) + ' ';
+            pp += getSegmentPath(data, i, lineSegments);
           }
         }
         if (data2.length && i >= startIndex2 && i <= endIndex2) {
           if (stepChart || stepChart2) {
-            pp2 +=
-              'L' +
-              (getX(i) - spacing / 2) +
-              ' ' +
-              getY(data2[i].value) +
-              ' L' +
-              (getX(i) + spacing / 2) +
-              ' ' +
-              getY(data2[i].value) +
-              ' ';
+            pp2 += getStepPath(data2, i);
+            (' ');
           } else {
-            pp2 += 'L' + getX(i) + ' ' + getY(data2[i].value) + ' ';
+            pp2 += getSegmentPath(data2, i, lineSegments2);
           }
         }
         if (data3.length && i >= startIndex3 && i <= endIndex3) {
           if (stepChart || stepChart3) {
-            pp3 +=
-              'L' +
-              (getX(i) - spacing / 2) +
-              ' ' +
-              getY(data3[i].value) +
-              ' L' +
-              (getX(i) + spacing / 2) +
-              ' ' +
-              getY(data3[i].value) +
-              ' ';
+            pp3 += getStepPath(data3, i);
           } else {
-            pp3 += 'L' + getX(i) + ' ' + getY(data3[i].value) + ' ';
+            pp3 += getSegmentPath(data2, i, lineSegments2);
           }
         }
         if (data4.length && i >= startIndex4 && i <= endIndex4) {
           if (stepChart || stepChart4) {
-            pp4 +=
-              'L' +
-              (getX(i) - spacing / 2) +
-              ' ' +
-              getY(data4[i].value) +
-              ' L' +
-              (getX(i) + spacing / 2) +
-              ' ' +
-              getY(data4[i].value) +
-              ' ';
+            pp4 += getStepPath(data4, i);
           } else {
-            pp4 += 'L' + getX(i) + ' ' + getY(data4[i].value) + ' ';
+            pp4 += getSegmentPath(data4, i, lineSegments4);
           }
         }
         if (data5.length && i >= startIndex5 && i <= endIndex5) {
           if (stepChart || stepChart5) {
-            pp5 +=
-              'L' +
-              (getX(i) - spacing / 2) +
-              ' ' +
-              getY(data5[i].value) +
-              ' L' +
-              (getX(i) + spacing / 2) +
-              ' ' +
-              getY(data5[i].value) +
-              ' ';
+            pp5 += getStepPath(data5, i);
           } else {
-            pp5 += 'L' + getX(i) + ' ' + getY(data5[i].value) + ' ';
+            pp5 += getSegmentPath(data5, i, lineSegments5);
           }
         }
       }
@@ -1087,11 +1087,11 @@ export const LineChart = (props: LineChartPropsType) => {
       let xx4 = svgPath(p4Array, curveType, curvature);
       let xx5 = svgPath(p5Array, curveType, curvature);
 
-      setPoints(xx);
-      setPoints2(xx2);
-      setPoints3(xx3);
-      setPoints4(xx4);
-      setPoints5(xx5);
+      setPoints(getCurvePathWithSegments(xx, lineSegments));
+      setPoints2(getCurvePathWithSegments(xx2, lineSegments2));
+      setPoints3(getCurvePathWithSegments(xx3, lineSegments3));
+      setPoints4(getCurvePathWithSegments(xx4, lineSegments4));
+      setPoints5(getCurvePathWithSegments(xx5, lineSegments5));
 
       if (data.length > 1 && (props.showArrow1 || props.showArrows)) {
         let arrowTipY = p1Array[p1Array.length - 1][1];
@@ -2167,39 +2167,63 @@ export const LineChart = (props: LineChartPropsType) => {
     arrowStrokeColor,
     arrowFillColor,
   ) => {
+    const isCurved = points.includes('C');
+    let ar: [any] = [{}];
+    if (points.includes('segmentStart')) {
+      ar = getSegmentedPathObjects(
+        points,
+        color,
+        currentLineThickness,
+        thickness,
+        strokeDashArray,
+        isCurved,
+      );
+    }
+    const lineSvgPropsOuter: LineSvgProps = {
+      d: points,
+      fill: 'none',
+      stroke: lineGradient
+        ? props.lineGradientId
+          ? `url(#${props.lineGradientId})`
+          : `url(#lineGradient)`
+        : color,
+      strokeWidth: currentLineThickness || thickness,
+    };
+    if (
+      strokeDashArray &&
+      strokeDashArray.length === 2 &&
+      typeof strokeDashArray[0] === 'number' &&
+      typeof strokeDashArray[1] === 'number'
+    ) {
+      lineSvgPropsOuter.strokeDasharray = strokeDashArray;
+    }
     return (
       <Svg>
         {lineGradient && getLineGradientComponent()}
-        {strokeDashArray &&
-        strokeDashArray.length === 2 &&
-        typeof strokeDashArray[0] === 'number' &&
-        typeof strokeDashArray[1] === 'number' ? (
-          <Path
-            d={points}
-            fill="none"
-            stroke={
-              lineGradient
+        {points.includes('segmentStart') ? (
+          ar.map((item, index) => {
+            const lineSvgProps: LineSvgProps = {
+              d: item.d,
+              fill: 'none',
+              stroke: lineGradient
                 ? props.lineGradientId
                   ? `url(#${props.lineGradientId})`
                   : `url(#lineGradient)`
-                : color
+                : item.color,
+              strokeWidth: item.strokeWidth,
+            };
+            if (
+              item.strokeDashArray &&
+              item.strokeDashArray.length === 2 &&
+              typeof item.strokeDashArray[0] === 'number' &&
+              typeof item.strokeDashArray[1] === 'number'
+            ) {
+              lineSvgProps.strokeDasharray = item.strokeDashArray;
             }
-            strokeWidth={currentLineThickness || thickness}
-            strokeDasharray={strokeDashArray}
-          />
+            return <Path key={index} {...lineSvgProps} />;
+          })
         ) : (
-          <Path
-            d={points}
-            fill="none"
-            stroke={
-              lineGradient
-                ? props.lineGradientId
-                  ? `url(#${props.lineGradientId})`
-                  : `url(#lineGradient)`
-                : color
-            }
-            strokeWidth={currentLineThickness || thickness}
-          />
+          <Path {...lineSvgPropsOuter} />
         )}
 
         {/***********************      For Area Chart        ************/}
@@ -3198,12 +3222,15 @@ export const LineChart = (props: LineChartPropsType) => {
     setSelectedIndex,
     spacing,
     showLine: false,
-    lineConfig: null,
+    lineConfig: null, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    lineConfig2: null, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     maxValue,
     lineData: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    lineData2: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     animatedWidth,
     lineBehindBars: false,
     points,
+    points2: '', // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     arrowPoints: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     renderChartContent,
     remainingScrollViewProps,

package/src/LineChart/types.ts

@@ -2,6 +2,8 @@ import {ColorValue} from 'react-native';
 import {yAxisSides} from '../utils/constants';
 import {
   CurveType,
+  EdgePosition,
+  LineSegment,
   Pointer,
   RuleType,
   RulesConfig,
@@ -110,6 +112,7 @@ export type LineChartPropsType = {
   stepChart3?: boolean;
   stepChart4?: boolean;
   stepChart5?: boolean;
+  edgePosition?: EdgePosition;
 
   disableScroll?: boolean;
   pointerConfig?: Pointer;
@@ -300,6 +303,11 @@ export type LineChartPropsType = {
   lineGradientDirection?: string;
   lineGradientStartColor?: string;
   lineGradientEndColor?: string;
+  lineSegments?: Array<LineSegment>;
+  lineSegments2?: Array<LineSegment>;
+  lineSegments3?: Array<LineSegment>;
+  lineSegments4?: Array<LineSegment>;
+  lineSegments5?: Array<LineSegment>;
 };
 
 type referenceConfigType = {

package/src/index.tsx

@@ -3,4 +3,4 @@ export {PieChart} from './PieChart';
 export {LineChart} from './LineChart';
 export {LineChartBicolor} from './LineChart/LineChartBicolor';
 export {chartTypes, yAxisSides, ruleTypes} from './utils/constants';
-export {CurveType} from './utils/types';
+export {CurveType, EdgePosition} from './utils/types';

package/src/utils/constants.ts

@@ -1,5 +1,5 @@
 import {defaultLineConfigType} from '../BarChart/types';
-import {CurveType, RuleTypes} from './types';
+import {CurveType, EdgePosition, RuleTypes} from './types';
 import {Dimensions} from 'react-native';
 
 // Global
@@ -205,6 +205,7 @@ export const LineDefaults = {
   stripWidth: 2,
   unFocusOnPressOut: true,
   delayBeforeUnFocus: 300,
+  edgePosition: EdgePosition.AT_DATA_POINT,
 };
 
 export const defaultPointerConfig = {

package/src/utils/index.tsx

@@ -1,4 +1,5 @@
-import {arrowConfigType, CurveType} from './types';
+import {defaultLineConfig} from './constants';
+import {arrowConfigType, CurveType, LineProperties, LineSegment} from './types';
 
 export const getCumulativeWidth = (
   data: any,
@@ -110,7 +111,7 @@ export const svgPath = (
     (acc, point, i, a) =>
       i === 0
         ? // if first point
-          `M ${point[0]},${point[1]}`
+          `M${point[0]},${point[1]}`
         : // else
           `${acc} ${bezierCommand(point, i, a, curvature)}`,
     '',
@@ -162,7 +163,153 @@ export const bezierCommand = (
   const [cpsX, cpsY] = controlPoint(curvature, a[i - 1], a[i - 2], point);
   // end control point
   const [cpeX, cpeY] = controlPoint(curvature, point, a[i - 1], a[i + 1], true);
-  return `C ${cpsX},${cpsY} ${cpeX},${cpeY} ${point[0]},${point[1]}`;
+  return `C${cpsX},${cpsY} ${cpeX},${cpeY} ${point[0]},${point[1]}`;
+};
+
+export const getSegmentString = (lineSegment, index) => {
+  const segment = lineSegment?.find(segment => segment.startIndex === index);
+  return segment ? 'segmentStart' + JSON.stringify(segment) + 'segmentEnd' : '';
+};
+
+export const getCurvePathWithSegments = (
+  path: string,
+  lineSegment: LineSegment[] | undefined,
+) => {
+  if (!lineSegment?.length) return path;
+  let newPath = '';
+  const pathArray = path.split('C');
+  for (let i = 0; i < pathArray.length; i++) {
+    const segment = lineSegment?.find(segment => segment.startIndex === i);
+    newPath +=
+      (pathArray[i].startsWith('M') ? '' : 'C') +
+      pathArray[i] +
+      (segment ? 'segmentStart' + JSON.stringify(segment) + 'segmentEnd' : '');
+  }
+  return newPath;
+};
+
+export const getPreviousSegmentsLastPoint = (isCurved, previousSegment) => {
+  const prevSegmentLastPoint = isCurved
+    ? previousSegment.substring(previousSegment.trim().lastIndexOf(' '))
+    : previousSegment
+        .substring(previousSegment.lastIndexOf('L'))
+        .replace('L', 'M');
+
+  return (
+    (prevSegmentLastPoint.trim()[0] === 'M' ? '' : 'M') + prevSegmentLastPoint
+  );
+};
+
+export const getSegmentedPathObjects = (
+  points,
+  color,
+  currentLineThickness,
+  thickness,
+  strokeDashArray,
+  isCurved,
+) => {
+  const ar: [any] = [{}];
+  let tempStr = points;
+
+  if (!points.startsWith('segmentStart')) {
+    const lineSvgProps: LineProperties = {
+      d: points.substring(0, points.indexOf('segmentStart')),
+      color,
+      strokeWidth: currentLineThickness || thickness,
+    };
+    if (strokeDashArray) {
+      lineSvgProps.strokeDashArray = strokeDashArray;
+    }
+    ar.push(lineSvgProps);
+  }
+
+  while (tempStr.includes('segmentStart')) {
+    const startDelimeterIndex = tempStr.indexOf('segmentStart');
+    const endDelimeterIndex = tempStr.indexOf('segmentEnd');
+
+    const segmentConfig = JSON.parse(
+      tempStr.substring(
+        startDelimeterIndex + 'segmentStart'.length,
+        endDelimeterIndex,
+      ),
+    );
+
+    const {startIndex, endIndex} = segmentConfig;
+    const segmentLength = endIndex - startIndex;
+    let segment = tempStr.substring(endDelimeterIndex + 'segmentEnd'.length);
+    let c = 0,
+      s = 0,
+      i;
+    for (i = 0; i < segment.length; i++) {
+      if (segment[i] === (isCurved ? 'C' : 'L')) c++;
+      if (c === segmentLength) {
+        if (segment[i] === ' ') s++;
+        if (s === (isCurved ? 3 : 2)) break;
+      }
+    }
+    segment = segment.substring(0, i);
+
+    const previousSegment = ar[ar.length - 1].d;
+    const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
+      isCurved,
+      previousSegment,
+    );
+
+    const lineSvgProps: LineProperties = {
+      d: moveToLastPointOfPreviousSegment + segment,
+      color: segmentConfig.color ?? color,
+      strokeWidth:
+        segmentConfig.thickness ?? (currentLineThickness || thickness),
+    };
+    if (segmentConfig.strokeDashArray) {
+      lineSvgProps.strokeDashArray = segmentConfig.strokeDashArray;
+    }
+    ar.push(lineSvgProps);
+
+    tempStr = tempStr.substring(endDelimeterIndex + 'segmentEnd'.length + i);
+
+    const nextDelimiterIndex = tempStr.indexOf('segmentStart');
+    const stringUptoNextSegment = tempStr.substring(0, nextDelimiterIndex);
+    if (
+      nextDelimiterIndex !== -1 &&
+      stringUptoNextSegment.indexOf('C') !== -1
+    ) {
+      const previousSegment = ar[ar.length - 1].d;
+      const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
+        isCurved,
+        previousSegment,
+      );
+      const lineSvgProps: LineProperties = {
+        d: moveToLastPointOfPreviousSegment + ' ' + stringUptoNextSegment,
+        color,
+        strokeWidth: currentLineThickness || thickness,
+      };
+      if (strokeDashArray) {
+        lineSvgProps.strokeDashArray = strokeDashArray;
+      }
+      ar.push(lineSvgProps);
+    }
+  }
+
+  if (tempStr.length) {
+    const previousSegment = ar[ar.length - 1].d;
+    const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
+      isCurved,
+      previousSegment,
+    );
+    const lineSvgProps: LineProperties = {
+      d: moveToLastPointOfPreviousSegment + tempStr,
+      color,
+      strokeWidth: currentLineThickness || thickness,
+    };
+    if (strokeDashArray) {
+      lineSvgProps.strokeDashArray = strokeDashArray;
+    }
+    ar.push(lineSvgProps);
+  }
+
+  ar.shift();
+  return ar;
 };
 
 export const getArrowPoints = (
@@ -619,3 +766,68 @@ export const clone = obj => {
   }
   return temp;
 };
+
+export const getLineConfigForBarChart = lineConfig => {
+  return {
+    initialSpacing:
+      lineConfig.initialSpacing ?? defaultLineConfig.initialSpacing,
+    curved: lineConfig.curved || defaultLineConfig.curved,
+    curvature: lineConfig.curvature ?? defaultLineConfig.curvature,
+    curveType: lineConfig.curveType ?? defaultLineConfig.curveType,
+    isAnimated: lineConfig.isAnimated || defaultLineConfig.isAnimated,
+    animationDuration:
+      lineConfig.animationDuration || defaultLineConfig.animationDuration,
+    thickness: lineConfig.thickness || defaultLineConfig.thickness,
+    color: lineConfig.color || defaultLineConfig.color,
+    hideDataPoints:
+      lineConfig.hideDataPoints || defaultLineConfig.hideDataPoints,
+    dataPointsShape:
+      lineConfig.dataPointsShape || defaultLineConfig.dataPointsShape,
+    dataPointsHeight:
+      lineConfig.dataPointsHeight || defaultLineConfig.dataPointsHeight,
+    dataPointsWidth:
+      lineConfig.dataPointsWidth || defaultLineConfig.dataPointsWidth,
+    dataPointsColor:
+      lineConfig.dataPointsColor || defaultLineConfig.dataPointsColor,
+    dataPointsRadius:
+      lineConfig.dataPointsRadius || defaultLineConfig.dataPointsRadius,
+    textColor: lineConfig.textColor || defaultLineConfig.textColor,
+    textFontSize: lineConfig.textFontSize || defaultLineConfig.textFontSize,
+    textShiftX: lineConfig.textShiftX || defaultLineConfig.textShiftX,
+    textShiftY: lineConfig.textShiftY || defaultLineConfig.textShiftY,
+    shiftX: lineConfig.shiftX || defaultLineConfig.shiftX,
+    shiftY: lineConfig.shiftY || defaultLineConfig.shiftY,
+    delay: lineConfig.delay || defaultLineConfig.delay,
+    startIndex: lineConfig.startIndex || defaultLineConfig.startIndex,
+    endIndex:
+      lineConfig.endIndex === 0
+        ? 0
+        : lineConfig.endIndex || defaultLineConfig.endIndex,
+
+    showArrow: lineConfig.showArrow ?? defaultLineConfig.showArrow,
+    arrowConfig: {
+      length:
+        lineConfig.arrowConfig?.length ?? defaultLineConfig.arrowConfig?.length,
+      width:
+        lineConfig.arrowConfig?.width ?? defaultLineConfig.arrowConfig?.width,
+
+      strokeWidth:
+        lineConfig.arrowConfig?.strokeWidth ??
+        defaultLineConfig.arrowConfig?.strokeWidth,
+
+      strokeColor:
+        lineConfig.arrowConfig?.strokeColor ??
+        defaultLineConfig.arrowConfig?.strokeColor,
+
+      fillColor:
+        lineConfig.arrowConfig?.fillColor ??
+        defaultLineConfig.arrowConfig?.fillColor,
+
+      showArrowBase:
+        lineConfig.arrowConfig?.showArrowBase ??
+        defaultLineConfig.arrowConfig?.showArrowBase,
+    },
+    customDataPoint: lineConfig.customDataPoint,
+    isSecondary: lineConfig.isSecondary ?? defaultLineConfig.isSecondary,
+  };
+};

package/src/utils/types.ts

@@ -14,6 +14,11 @@ export enum CurveType {
   QUADRATIC,
 }
 
+export enum EdgePosition {
+  AT_DATA_POINT,
+  AROUND_DATA_POINT,
+}
+
 export type RulesConfig = {
   rulesLength?: number;
   rulesColor?: ColorValue;
@@ -21,7 +26,7 @@ export type RulesConfig = {
   rulesType?: RuleType;
   dashWidth?: number;
   dashGap?: number;
-}
+};
 
 export type secondaryYAxisType = {
   noOfSections?: number;
@@ -190,11 +195,14 @@ export type BarAndLineChartsWrapperTypes = {
   spacing: number;
   showLine: boolean;
   lineConfig: any;
+  lineConfig2: any;
   maxValue: number;
   lineData: Array<any>;
+  lineData2: Array<any>;
   animatedWidth: any;
   lineBehindBars: boolean;
   points: string | Array<any>;
+  points2: string | Array<any>;
   arrowPoints: any;
   renderChartContent: any;
   remainingScrollViewProps: any;
@@ -265,3 +273,26 @@ export type Pointer = {
   strokeDashArray?: Array<number>;
   barTouchable?: boolean;
 };
+
+export type LineSegment = {
+  startIndex: number;
+  endIndex: number;
+  color?: string | ColorValue;
+  thickness?: number;
+  strokeDashArray?: Array<number>;
+};
+
+export type LineSvgProps = {
+  d: string;
+  fill: string;
+  stroke: string | ColorValue;
+  strokeWidth: number;
+  strokeDasharray?: Array<number>;
+};
+
+export type LineProperties = {
+  d: string;
+  color: string | ColorValue;
+  strokeWidth: number;
+  strokeDashArray?: Array<number>;
+};