Merge pull request #810 from Abhinandan-Kushwaha/development

v1.4.31 added avoidOverlappingOfLabels, pointers for both quads, expo…
Abhinandan-Kushwaha · Sep 1, 2024 · 60fc869 · 60fc869
2 parents 918c25a + 574ae41
commit 60fc869
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 20 deletions.
diff --git a/docs/PieChart/PieChartProps.md b/docs/PieChart/PieChartProps.md
@@ -87,6 +87,7 @@ type LabelLineConfig = {
   labelComponentWidth?: number; // default 20
   labelComponentHeight?: number; // default 10
   labelComponentMargin?: number; // default 4
+  avoidOverlappingOfLabels?: boolean; // default true
 };
 ```
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.30",
+  "version": "1.4.31",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "dist/index.js",
   "files": [
@@ -25,7 +25,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "^0.1.31"
+    "gifted-charts-core": "^0.1.32"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",

diff --git a/release-notes/release-notes.md b/release-notes/release-notes.md
@@ -1,3 +1,26 @@
+# 🎉 1.4.31
+
+## ✨ Features added-
+
+1. Pointer lines will now be displayed in both positive and negative values of the Line and Area charts (1st and 4th quadrant). See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/799
+
+2. Added the property `avoidOverlappingOfLabels` to the prop `labelLineConfig` for Pie and donut charts. The default being true, it auto shifts overlapping external labels in Pie charts rendered using `showExternalLabels` and `externalLabelComponent`. See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/801
+**Note:** Only the labels overlapping near the poles (at the top and bottom) will be auto-shifted. Auto-shifting can be disabled by setting `avoidOverlappingOfLabels: false` inside the `labelLineConfig` object.
+
+## 🐛 Bug fixes
+
+1. Fixed the issue- Vertical lines displayed using the `showVerticalLines` prop are incomplete in Bar and Line charts when run on web (using Expo). See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/794
+
+2. Fixed the issue- Line chart is shifted up and some data cannot be displayed (on web using Expo). See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/778
+
+3. Fixed the issue- Focused section always getting the color of the 1st section on web (using Expo) See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/800#issuecomment-2313079219
+
+---
+
+---
+
+---
+
 # 🎉 1.4.30
 
 ## ✨ Features added-

diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx
@@ -175,6 +175,7 @@ export const BarChart = (props: BarChartPropsType) => {
       pointerIndex,
       width: totalWidth,
       screenWidth,
+      containsNegative: false,
     });
   };
 

diff --git a/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/index.tsx b/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/index.tsx
@@ -64,7 +64,6 @@ const RenderLineInBarChart = (props: LineInBarChartPropsType) => {
   };
 
   const renderAnimatedLine = () => {
-    // console.log('animatedWidth is-------->', animatedWidth);
     return (
       <Animated.View
         pointerEvents="none"

diff --git a/src/Components/BarAndLineChartsWrapper/renderVerticalLines.tsx b/src/Components/BarAndLineChartsWrapper/renderVerticalLines.tsx
@@ -61,10 +61,11 @@ const RenderVerticalLines = (props: any) => {
         position: 'absolute',
         height: extendedContainerHeight,
         bottom: 60 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
+        left: 0,
         width: totalWidth,
         zIndex: verticalLinesZIndex || -1,
       }}>
-      <Svg>
+      <Svg height={containerHeightIncludingBelowXAxis} width={totalWidth}>
         {verticalLinesAr.map((item: any, index: number) => {
           let totalSpacing = initialSpacing;
           if (verticalLinesSpacing) {

diff --git a/src/Components/common/StripAndLabel.tsx b/src/Components/common/StripAndLabel.tsx
@@ -29,6 +29,7 @@ export const StripAndLabel = (props: StripAndLabelProps) => {
     isBarChart,
     pointerIndex,
     hasDataSet,
+    containsNegative,
   } = props;
 
   const {top, left} = getTopAndLeftForStripAndLabel(props);
@@ -51,16 +52,20 @@ export const StripAndLabel = (props: StripAndLabelProps) => {
           style={{
             position: 'absolute',
             left: (pointerRadius || pointerWidth) - pointerStripWidth / 4,
-            top: pointerStripUptoDataPoint
-              ? pointerRadius || pointerStripHeight / 2
-              : -pointerYLocal + 8,
+            top: containsNegative
+              ? 0
+              : pointerStripUptoDataPoint
+                ? pointerRadius || pointerStripHeight / 2
+                : -pointerYLocal + 8,
             width: pointerStripWidth,
             height: pointerStripUptoDataPoint
-              ? containerHeight - pointerYLocal + 5 - xAxisThickness
-              : pointerStripHeight,
+              ? containerHeight - pointerYLocal + 10 - xAxisThickness
+              : pointerStripHeight + (containsNegative ? 10 : 0),
             marginTop: pointerStripUptoDataPoint
               ? 0
-              : containerHeight - pointerStripHeight,
+              : containsNegative
+                ? -pointerYLocal
+                : containerHeight - pointerStripHeight,
           }}>
           <Svg>
             <Line
@@ -76,8 +81,8 @@ export const StripAndLabel = (props: StripAndLabelProps) => {
               x2={0}
               y2={
                 pointerStripUptoDataPoint
-                  ? containerHeight - pointerYLocal + 5 - xAxisThickness
-                  : pointerStripHeight
+                  ? containerHeight - pointerYLocal + 10 - xAxisThickness
+                  : pointerStripHeight + 10
               }
             />
           </Svg>

diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx
@@ -56,6 +56,7 @@ export const LineChart = (props: LineChartPropsType) => {
   const widthValue5 = useMemo(() => new Animated.Value(0), []);
 
   const {
+    curveType,
     scrollX,
     setScrollX,
     arrow1Points,
@@ -305,12 +306,14 @@ export const LineChart = (props: LineChartPropsType) => {
     stripStrokeDashArray,
     unFocusOnPressOut,
     delayBeforeUnFocus,
+    containerHeightIncludingBelowXAxis = 0,
     lineGradient,
     lineGradientDirection,
     lineGradientStartColor,
     lineGradientEndColor,
     barAndLineChartsWrapperProps,
     areaChart,
+    mostNegativeValue,
   } = useLineChart({
     ...props,
     parentWidth: props.parentWidth ?? screenWidth,
@@ -497,6 +500,7 @@ export const LineChart = (props: LineChartPropsType) => {
       labelsExtraHeight -
       xAxisThickness -
       (props.overflowBottom ?? dataPointsRadius1),
+    left: 0,
     zIndex: 1,
     transform: [{scaleX: I18nManager.isRTL ? -1 : 1}],
   };
@@ -1053,6 +1057,7 @@ export const LineChart = (props: LineChartPropsType) => {
       width: totalWidth,
       screenWidth,
       hasDataSet: !!dataSet,
+      containsNegative: mostNegativeValue < 0,
     });
   };
 
@@ -1164,7 +1169,7 @@ export const LineChart = (props: LineChartPropsType) => {
     showValuesAsDataPointsText: any,
   ) => {
     if (!points) return null;
-    const isCurved = points.includes('C');
+    const isCurved = points.includes('C') || points.includes('Q');
     const isNthAreaChart = !!dataSet
       ? (dataSet[Number(key)].areaChart ?? areaChart)
       : getIsNthAreaChart(key ?? 0);
@@ -1180,6 +1185,7 @@ export const LineChart = (props: LineChartPropsType) => {
         RANGE_ENTER,
         STOP,
         RANGE_EXIT,
+        curveType,
       );
     } else if (points.includes(SEGMENT_START)) {
       ar = getSegmentedPathObjects(
@@ -1191,6 +1197,7 @@ export const LineChart = (props: LineChartPropsType) => {
         isCurved,
         SEGMENT_START,
         SEGMENT_END,
+        curveType,
       );
     }
     const lineSvgPropsOuter: LineSvgProps = {
@@ -1212,7 +1219,13 @@ export const LineChart = (props: LineChartPropsType) => {
       lineSvgPropsOuter.strokeDasharray = strokeDashArray;
     }
     return (
-      <Svg onPress={props.onBackgroundPress}>
+      <Svg
+        height={
+          containerHeightIncludingBelowXAxis +
+          (props.overflowBottom ?? dataPointsRadius1)
+        }
+        width={totalWidth}
+        onPress={props.onBackgroundPress}>
         {lineGradient && getLineGradientComponent()}
         {points.includes(SEGMENT_START) || points.includes(RANGE_ENTER) ? (
           ar.map((item, index) => {
@@ -1261,7 +1274,7 @@ export const LineChart = (props: LineChartPropsType) => {
                   ? `url(#${props.areaGradientId})`
                   : `url(#Gradient)`
               }
-              stroke={'transparent'}
+              stroke={'none'}
               strokeWidth={currentLineThickness || thickness}
             />
           ) : (
@@ -1273,7 +1286,7 @@ export const LineChart = (props: LineChartPropsType) => {
                   ? `url(#${props.areaGradientId})`
                   : `url(#Gradient)`
               }
-              stroke={'transparent'}
+              stroke={'none'}
               strokeWidth={currentLineThickness || thickness}
             />
           )
@@ -1512,7 +1525,10 @@ export const LineChart = (props: LineChartPropsType) => {
         // }}
         style={[
           svgWrapperViewStyle as ViewStyle,
-          {width: totalWidth, height: containerHeightIncludingBelowXAxis},
+          {
+            width: totalWidth,
+            height: containerHeightIncludingBelowXAxis,
+          },
         ]}>
         {lineSvgComponent(
           points,

diff --git a/src/PieChart/index.tsx b/src/PieChart/index.tsx
@@ -121,6 +121,7 @@ export const PieChart = (props: PieChartPropsType) => {
               position: 'absolute',
               top: -extraRadius,
               left: -extraRadius,
+              zIndex: -1, // was not getting displayed in web (using Expo)
             }}>
             <PieChartMain
               {...props}

diff --git a/src/PieChart/main.tsx b/src/PieChart/main.tsx
@@ -64,6 +64,9 @@ export const PieChartMain = (props: PieChartMainProps) => {
     getExternaLabelProperties,
   } = getPieChartMainProps(props);
 
+  let prevSide = 'right';
+  let prevLabelComponentX = 0;
+
   return (
     <View
       pointerEvents="box-none"
@@ -188,7 +191,7 @@ export const PieChartMain = (props: PieChartMainProps) => {
                       ? `url(#grad${index})`
                       : item.color || pieColors[index % 9]
                 }
-                onPress={() => {
+                onPressIn={() => {
                   if (item.onPress) {
                     item.onPress();
                   } else if (props.onPress) {
@@ -265,8 +268,20 @@ export const PieChartMain = (props: PieChartMainProps) => {
               outY,
               finalX,
               labelComponentX,
+              labelComponentY,
               localExternalLabelComponent,
-            } = getExternaLabelProperties(item, mx, my, cx, cy);
+              isRightHalf,
+            } = getExternaLabelProperties(
+              item,
+              mx,
+              my,
+              cx,
+              cy,
+              prevSide,
+              prevLabelComponentX,
+            );
+            prevSide = isRightHalf ? 'right' : 'left';
+            prevLabelComponentX = labelComponentX;
 
             return (
               <React.Fragment key={index}>
@@ -291,7 +306,7 @@ export const PieChartMain = (props: PieChartMainProps) => {
                     {localExternalLabelComponent ? (
                       <G
                         x={labelComponentX}
-                        y={outY + labelComponentHeight / 2}>
+                        y={labelComponentY + labelComponentHeight / 2}>
                         {localExternalLabelComponent?.(item, index) ?? null}
                       </G>
                     ) : null}