react-native-gifted-charts 1.4.17 → 1.4.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.17",
+  "version": "1.4.18",
   "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": "src/index.tsx",
   "files": [
@@ -25,7 +25,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "^0.1.15"
+    "gifted-charts-core": "^0.1.16"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

package/src/BarChart/Animated2DWithGradient.tsx

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
 import {View, LayoutAnimation, Platform, UIManager, Text} from 'react-native';
 import Svg, {Defs, Rect} from 'react-native-svg';
 import Cap from '../Components/BarSpecificComponents/cap';
-import LinearGradient from "../Components/common/LinearGradient";
+import LinearGradient from '../Components/common/LinearGradient';
 import {Animated2DWithGradientPropsType} from 'gifted-charts-core';
 
 if (Platform.OS === 'android') {
@@ -22,8 +22,6 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
     animationDuration,
     noGradient,
     noAnimation,
-    containerHeight,
-    maxValue,
     barMarginBottom,
     barInnerComponent,
     intactTopLabel,
@@ -46,6 +44,8 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
       } else {
         elevate();
       }
+    } else {
+      setHeight(props.height);
     }
   }, [props.height]);
 

package/src/BarChart/RenderBars.tsx

@@ -33,7 +33,9 @@ const RenderBars = (props: RenderBarsPropsType) => {
     animationDuration,
     autoShiftLabels,
     label,
+    secondaryLabel,
     labelTextStyle,
+    secondaryLabelTextStyle,
     xAxisTextNumberOfLines,
     xAxisLabelsVerticalShift,
     renderTooltip,
@@ -59,6 +61,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
     negativeStepHeight,
     negativeStepValue,
     autoCenterTooltip,
+    secondaryXAxis,
   } = props;
 
   const heightFactor =
@@ -91,7 +94,12 @@ const RenderBars = (props: RenderBarsPropsType) => {
       ? 0
       : item.barMarginBottom || props.barMarginBottom || 0;
 
-  const renderLabel = (label: String, labelTextStyle: any, value: number) => {
+  const renderLabel = (
+    top: boolean,
+    label: String,
+    labelTextStyle: any,
+    value: number,
+  ) => {
     return (
       <View
         style={[
@@ -104,12 +112,16 @@ const RenderBars = (props: RenderBarsPropsType) => {
             left: spacing / -2,
             position: 'absolute',
             height: props.xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18,
-            bottom:
-              (rotateLabel
-                ? -40
-                : -6 - xAxisTextNumberOfLines * 18 - xAxisLabelsVerticalShift) -
-              barMarginBottom -
-              labelsDistanceFromXaxis,
+            bottom: top
+              ? (containerHeight || 200) +
+                (secondaryXAxis?.labelsDistanceFromXaxis ?? 15)
+              : (rotateLabel
+                  ? -40
+                  : -6 -
+                    xAxisTextNumberOfLines * 18 -
+                    xAxisLabelsVerticalShift) -
+                barMarginBottom -
+                labelsDistanceFromXaxis,
           },
           rotateLabel
             ? horizontal
@@ -136,7 +148,21 @@ const RenderBars = (props: RenderBarsPropsType) => {
                   }
                 : {},
         ]}>
-        {item.labelComponent ? (
+        {top ? (
+          item.secondaryLabelComponent ? (
+            item.secondaryLabelComponent()
+          ) : (
+            <Text
+              style={[
+                {textAlign: 'center'},
+                rtl && horizontal && {transform: [{rotate: '180deg'}]},
+                labelTextStyle,
+              ]}
+              numberOfLines={xAxisTextNumberOfLines}>
+              {label}
+            </Text>
+          )
+        ) : item.labelComponent ? (
           item.labelComponent()
         ) : (
           <Text
@@ -146,7 +172,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
               labelTextStyle,
             ]}
             numberOfLines={xAxisTextNumberOfLines}>
-            {label || ''}
+            {label}
           </Text>
         )}
       </View>
@@ -154,6 +180,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
   };
 
   const renderAnimatedLabel = (
+    top: boolean,
     label: String,
     labelTextStyle: any,
     value: number,
@@ -170,11 +197,14 @@ const RenderBars = (props: RenderBarsPropsType) => {
             left: spacing / -2,
             position: 'absolute',
             height: props.xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18,
-            bottom:
-              (rotateLabel
-                ? -40
-                : -6 - xAxisTextNumberOfLines * 18 - xAxisLabelsVerticalShift) -
-              barMarginBottom,
+            bottom: top
+              ? (containerHeight || 200) +
+                (secondaryXAxis?.labelsDistanceFromXaxis ?? 15)
+              : (rotateLabel
+                  ? -40
+                  : -6 -
+                    xAxisTextNumberOfLines * 18 -
+                    xAxisLabelsVerticalShift) - barMarginBottom,
             opacity: appearingOpacity,
           },
           value < 0 && {transform: [{rotate: '180deg'}]},
@@ -197,7 +227,21 @@ const RenderBars = (props: RenderBarsPropsType) => {
                   }
                 : {},
         ]}>
-        {item.labelComponent ? (
+        {top ? (
+          item.secondaryLabelComponent ? (
+            item.secondaryLabelComponent()
+          ) : (
+            <Text
+              style={[
+                {textAlign: 'center'},
+                rtl && horizontal && {transform: [{rotate: '180deg'}]},
+                labelTextStyle,
+              ]}
+              numberOfLines={xAxisTextNumberOfLines}>
+              {label}
+            </Text>
+          )
+        ) : item.labelComponent ? (
           item.labelComponent()
         ) : (
           <Text
@@ -207,7 +251,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
               labelTextStyle,
             ]}
             numberOfLines={xAxisTextNumberOfLines}>
-            {label || ''}
+            {label}
           </Text>
         )}
       </Animated.View>
@@ -399,8 +443,23 @@ const RenderBars = (props: RenderBarsPropsType) => {
           animated2DWithGradient(true, true)
         )}
         {isAnimated
-          ? renderAnimatedLabel(label, labelTextStyle, item.value)
-          : renderLabel(label, labelTextStyle, item.value)}
+          ? renderAnimatedLabel(false, label, labelTextStyle, item.value)
+          : renderLabel(false, label, labelTextStyle, item.value)}
+        {secondaryXAxis
+          ? isAnimated
+            ? renderAnimatedLabel(
+                true,
+                secondaryLabel,
+                secondaryLabelTextStyle,
+                item.value,
+              )
+            : renderLabel(
+                true,
+                secondaryLabel,
+                secondaryLabelTextStyle,
+                item.value,
+              )
+          : null}
       </>
     );
   };

package/src/Components/BarAndLineChartsWrapper/renderHorizSections.tsx

@@ -62,6 +62,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
     secondaryYAxis,
     onlyReferenceLines,
     renderReferenceLines,
+    secondaryXAxis,
   } = props;
 
   const {
@@ -183,7 +184,12 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
         style={[
           styles.leftPart,
           {
-            borderColor: yAxisColor,
+            borderLeftColor: yAxisColor,
+            borderRightColor: yAxisColor,
+            borderTopColor: secondaryXAxis?.color ?? xAxisColor,
+            borderTopWidth: secondaryXAxis
+              ? secondaryXAxis.thickness ?? xAxisThickness
+              : 0,
             backgroundColor: backgroundColor,
             width: (props.width || totalWidth - spacing) + endSpacing,
           },

package/src/LineChart/index.tsx

@@ -313,6 +313,8 @@ export const LineChart = (props: LineChartPropsType) => {
     parentWidth: props.parentWidth ?? screenWidth,
   });
 
+  const {secondaryXAxis} = props;
+
   const widthValuesFromSet = useMemo(
     () => dataSet?.map(set => new Animated.Value(0)),
     [],
@@ -458,6 +460,7 @@ export const LineChart = (props: LineChartPropsType) => {
   ]);
 
   const renderLabel = (
+    top: boolean,
     index: number,
     label: String,
     labelTextStyle: any,
@@ -468,7 +471,11 @@ export const LineChart = (props: LineChartPropsType) => {
         style={[
           {
             position: 'absolute',
-            bottom: 54 - xAxisTextNumberOfLines * 18,
+            bottom: top
+              ? containerHeight +
+                60 +
+                (secondaryXAxis?.labelsDistanceFromXaxis ?? 15)
+              : 54 - xAxisTextNumberOfLines * 18,
             zIndex: 10,
             width: spacing + labelsExtraHeight,
             left:
@@ -485,7 +492,7 @@ export const LineChart = (props: LineChartPropsType) => {
           <Text
             style={[{textAlign: 'center'}, labelTextStyle]}
             numberOfLines={xAxisTextNumberOfLines}>
-            {label || ''}
+            {label}
           </Text>
         )}
       </View>
@@ -493,6 +500,7 @@ export const LineChart = (props: LineChartPropsType) => {
   };
 
   const renderAnimatedLabel = (
+    top: boolean,
     index: number,
     label: String,
     labelTextStyle: any,
@@ -506,7 +514,13 @@ export const LineChart = (props: LineChartPropsType) => {
               ? 40
               : props.xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18,
             position: 'absolute',
-            bottom: rotateLabel ? 10 : 54 - xAxisTextNumberOfLines * 18,
+            bottom: top
+              ? containerHeight +
+                60 +
+                (secondaryXAxis?.labelsDistanceFromXaxis ?? 15)
+              : rotateLabel
+                ? 10
+                : 54 - xAxisTextNumberOfLines * 18,
             zIndex: 10,
             width: spacing,
             left:
@@ -523,7 +537,7 @@ export const LineChart = (props: LineChartPropsType) => {
           <Text
             style={[{textAlign: 'center'}, labelTextStyle]}
             numberOfLines={xAxisTextNumberOfLines}>
-            {label || ''}
+            {label}
           </Text>
         )}
       </Animated.View>
@@ -2142,10 +2156,18 @@ export const LineChart = (props: LineChartPropsType) => {
           </View>
         ) : null}
         {(data0 ?? data).map((item: lineDataItem, index: number) => {
+          const secondaryLabel =
+            item.secondaryLabel ?? secondaryXAxis?.labelTexts?.[index] ?? '';
+          const secondaryLabelTextStyle =
+            item.secondaryLabelTextStyle ??
+            secondaryXAxis?.labelsTextStyle ??
+            item.labelTextStyle ??
+            props.xAxisLabelTextStyle;
           return (
             <View key={index}>
               {isAnimated
                 ? renderAnimatedLabel(
+                    false,
                     index,
                     item.label ||
                       (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
@@ -2155,6 +2177,7 @@ export const LineChart = (props: LineChartPropsType) => {
                     item.labelComponent,
                   )
                 : renderLabel(
+                    false,
                     index,
                     item.label ||
                       (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
@@ -2163,7 +2186,23 @@ export const LineChart = (props: LineChartPropsType) => {
                     item.labelTextStyle || props.xAxisLabelTextStyle,
                     item.labelComponent,
                   )}
-              {/* {renderLabel(index, item.label, item.labelTextStyle)} */}
+              {secondaryXAxis
+                ? isAnimated
+                  ? renderAnimatedLabel(
+                      true,
+                      index,
+                      secondaryLabel,
+                      secondaryLabelTextStyle,
+                      item.secondaryLabelComponent,
+                    )
+                  : renderLabel(
+                      true,
+                      index,
+                      secondaryLabel,
+                      secondaryLabelTextStyle,
+                      item.secondaryLabelComponent,
+                    )
+                : null}
             </View>
           );
         })}