react-native-gifted-charts 1.4.17 → 1.4.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.17",
+  "version": "1.4.19",
   "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.18"
   },
   "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 {
@@ -138,6 +139,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
         {showYAxisIndices && index !== noOfSections ? (
           <View
             style={{
+              position: 'absolute',
               height: yAxisIndicesHeight,
               width: yAxisIndicesWidth,
               left:
@@ -183,7 +185,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

@@ -299,6 +299,7 @@ export const LineChart = (props: LineChartPropsType) => {
     stripWidth,
     stripColor,
     stripOpacity,
+    stripStrokeDashArray,
     unFocusOnPressOut,
     delayBeforeUnFocus,
     containerHeightIncludingBelowXAxis,
@@ -313,6 +314,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 +461,7 @@ export const LineChart = (props: LineChartPropsType) => {
   ]);
 
   const renderLabel = (
+    top: boolean,
     index: number,
     label: String,
     labelTextStyle: any,
@@ -468,7 +472,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 +493,7 @@ export const LineChart = (props: LineChartPropsType) => {
           <Text
             style={[{textAlign: 'center'}, labelTextStyle]}
             numberOfLines={xAxisTextNumberOfLines}>
-            {label || ''}
+            {label}
           </Text>
         )}
       </View>
@@ -493,6 +501,7 @@ export const LineChart = (props: LineChartPropsType) => {
   };
 
   const renderAnimatedLabel = (
+    top: boolean,
     index: number,
     label: String,
     labelTextStyle: any,
@@ -506,7 +515,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 +538,7 @@ export const LineChart = (props: LineChartPropsType) => {
           <Text
             style={[{textAlign: 'center'}, labelTextStyle]}
             numberOfLines={xAxisTextNumberOfLines}>
-            {label || ''}
+            {label}
           </Text>
         )}
       </Animated.View>
@@ -647,9 +662,22 @@ export const LineChart = (props: LineChartPropsType) => {
       const currentStripHeight = item.stripHeight ?? stripHeight;
       const currentStripWidth = item.stripWidth ?? stripWidth;
       const currentStripOpacity = item.stripOpacity ?? stripOpacity;
+      const currentStripStrokeDashArray =
+        item.stripStrokeDashArray ?? stripStrokeDashArray ?? '';
       const currentStripColor = item.stripColor || stripColor;
       const position = I18nManager.isRTL ? 'right' : 'left';
 
+      const y1 = currentStripHeight
+        ? containerHeight - currentStripHeight + 8
+        : containerHeight -
+          dataPointsHeight / 2 +
+          14 -
+          (item.value * containerHeight) / maxValue;
+
+      const actualStripHeight =
+        currentStripHeight ||
+        (item.value * containerHeight) / maxValue - 2 + overflowTop;
+
       return (
         <Fragment key={index}>
           {focusEnabled ? (
@@ -680,23 +708,15 @@ export const LineChart = (props: LineChartPropsType) => {
           ) : null}
           {item.showStrip ||
           (focusEnabled && index === selectedIndex && showStripOnFocus) ? (
-            <Rect
-              x={initialSpacing + spacing * index - currentStripWidth / 2 - 1}
-              y={
-                currentStripHeight
-                  ? containerHeight - currentStripHeight + 8
-                  : containerHeight -
-                    dataPointsHeight / 2 +
-                    14 -
-                    (item.value * containerHeight) / maxValue
-              }
-              width={currentStripWidth}
-              height={
-                currentStripHeight ||
-                (item.value * containerHeight) / maxValue - 2 + overflowTop
-              }
+            <Line
+              x1={initialSpacing + spacing * index - currentStripWidth / 2 - 1}
+              y1={y1}
+              x2={initialSpacing + spacing * index - currentStripWidth / 2 - 1}
+              y2={y1 + actualStripHeight}
+              strokeWidth={currentStripWidth}
+              stroke={currentStripColor}
+              strokeDasharray={currentStripStrokeDashArray}
               opacity={currentStripOpacity}
-              fill={currentStripColor}
             />
           ) : null}
           {hideDataPoints ? null : (
@@ -2142,10 +2162,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 +2183,7 @@ export const LineChart = (props: LineChartPropsType) => {
                     item.labelComponent,
                   )
                 : renderLabel(
+                    false,
                     index,
                     item.label ||
                       (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
@@ -2163,7 +2192,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>
           );
         })}