react-native-gifted-charts 1.4.12 → 1.4.13

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.12",
+  "version": "1.4.13",
   "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.tsx",
+  "main": "src/index.tsx",
   "files": [
-    "dist"
+    "src"
   ],
   "scripts": {
     "android": "react-native run-android",
-    "build": "babel --extensions .ts,.tsx ./src -d ./dist",
+    "build": "tsc -p .",
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
@@ -28,11 +28,7 @@
     "gifted-charts-core": "^0.1.8"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.7",
-    "@babel/core": "^7.24.7",
-    "@babel/preset-env": "^7.24.7",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
+    "@babel/core": "^7.22.5",
     "@babel/runtime": "^7.22.5",
     "@react-native-community/eslint-config": "^3.2.0",
     "@types/jest": "^29.5.2",

package/src/BarChart/Animated2DWithGradient.tsx

@@ -0,0 +1,197 @@
+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 {Animated2DWithGradientPropsType} from 'gifted-charts-core';
+
+if (Platform.OS === 'android') {
+  UIManager.setLayoutAnimationEnabledExperimental &&
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
+  const {
+    barBackgroundPattern,
+    patternId,
+    barWidth,
+    barStyle,
+    item,
+    index,
+    opacity,
+    animationDuration,
+    noGradient,
+    noAnimation,
+    containerHeight,
+    maxValue,
+    barMarginBottom,
+    barInnerComponent,
+    intactTopLabel,
+    showValuesAsTopLabel,
+    topLabelContainerStyle,
+    topLabelTextStyle,
+    commonStyleForBar,
+    barStyleWithBackground,
+    yAxisOffset,
+  } = props;
+  const [height, setHeight] = useState(noAnimation ? props.height : 0.2);
+  const [initialRender, setInitialRender] = useState(
+    noAnimation ? false : true,
+  );
+
+  useEffect(() => {
+    if (!noAnimation) {
+      if (initialRender) {
+        setTimeout(() => layoutAppear(), 20);
+      } else {
+        elevate();
+      }
+    }
+  }, [props.height]);
+
+  const elevate = () => {
+    LayoutAnimation.configureNext({
+      duration: animationDuration,
+      update: {type: 'linear', property: 'scaleXY'},
+    });
+    setHeight(props.height);
+  };
+
+  const layoutAppear = () => {
+    LayoutAnimation.configureNext({
+      duration: Platform.OS == 'ios' ? animationDuration : 20,
+      create: {type: 'linear', property: 'opacity'},
+      update: {type: 'linear', property: 'scaleXY'},
+    });
+    setInitialRender(false);
+    setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
+  };
+
+  return (
+    <>
+      {!initialRender && (
+        <View
+          style={{
+            position: 'absolute',
+            bottom: -0.5,
+            width: '100%',
+            overflow: 'hidden',
+            height:
+              (noAnimation
+                ? Math.max(props.minHeight, Math.abs(height))
+                : height) - (barMarginBottom || 0),
+          }}>
+          <View
+            style={[
+              {
+                width: '100%',
+                height:
+                  (noAnimation
+                    ? Math.max(props.minHeight, Math.abs(height))
+                    : height) - (barMarginBottom || 0),
+              },
+              item.barStyle || barStyle,
+            ]}>
+            {noGradient ? (
+              <View style={barStyleWithBackground}>
+                {props.cappedBars && item.value ? (
+                  <Cap
+                    capThicknessFromItem={item.capThickness}
+                    capThicknessFromProps={props.capThickness}
+                    capColorFromItem={item.capColor}
+                    capColorFromProps={props.capColor}
+                    capRadiusFromItem={item.capRadius}
+                    capRadiusFromProps={props.capRadius}
+                  />
+                ) : null}
+              </View>
+            ) : (
+              <LinearGradient
+                style={commonStyleForBar}
+                start={{x: 0, y: 0}}
+                end={{x: 1, y: 1}}
+                colors={[
+                  item.gradientColor || props.gradientColor || 'white',
+                  item.frontColor || props.frontColor || 'black',
+                ]}>
+                {props.cappedBars && (
+                  <View
+                    style={{
+                      position: 'absolute',
+                      width: '100%',
+                      height:
+                        item.capThickness === 0
+                          ? 0
+                          : item.capThickness || props.capThickness || 6,
+                      backgroundColor:
+                        item.capColor || props.capColor || 'black',
+                      borderTopLeftRadius:
+                        item.capRadius === 0
+                          ? 0
+                          : item.capRadius || props.capRadius || 0,
+                      borderTopRightRadius:
+                        item.capRadius === 0
+                          ? 0
+                          : item.capRadius || props.capRadius || 0,
+                    }}
+                  />
+                )}
+              </LinearGradient>
+            )}
+            {(item.barBackgroundPattern || barBackgroundPattern) && (
+              <Svg>
+                <Defs>
+                  {item.barBackgroundPattern
+                    ? item.barBackgroundPattern()
+                    : barBackgroundPattern?.()}
+                </Defs>
+                <Rect
+                  stroke="transparent"
+                  x="1"
+                  y="1"
+                  width={item.barWidth || props.barWidth || 30}
+                  height={noAnimation ? Math.abs(height) : height}
+                  fill={`url(#${item.patternId || patternId})`}
+                />
+              </Svg>
+            )}
+            {barInnerComponent ? (
+              <View style={{height: '100%', width: '100%'}}>
+                {barInnerComponent(item, index)}
+              </View>
+            ) : null}
+          </View>
+        </View>
+      )}
+      {item.topLabelComponent || showValuesAsTopLabel ? (
+        <View
+          style={[
+            {
+              position: 'absolute',
+              top: (item.barWidth || barWidth || 30) * -1,
+              height: item.barWidth || barWidth || 30,
+              width: item.barWidth || barWidth || 30,
+              justifyContent:
+                (props.horizontal && !intactTopLabel) || item.value < 0
+                  ? 'center'
+                  : 'flex-end',
+              alignItems: 'center',
+              opacity: opacity,
+            },
+            item.value < 0 && {transform: [{rotate: '180deg'}]},
+            props.horizontal &&
+              !intactTopLabel && {transform: [{rotate: '270deg'}]},
+            topLabelContainerStyle ?? item.topLabelContainerStyle,
+          ]}>
+          {showValuesAsTopLabel ? (
+            <Text style={topLabelTextStyle}>{item.value + yAxisOffset}</Text>
+          ) : (
+            item.topLabelComponent?.()
+          )}
+        </View>
+      ) : null}
+    </>
+  );
+};
+
+export default Animated2DWithGradient;

package/src/BarChart/RenderBars.tsx

@@ -0,0 +1,454 @@
+import React from 'react';
+import {View, TouchableOpacity, Animated, Text} from 'react-native';
+import AnimatedThreeDBar from '../Components/AnimatedThreeDBar';
+import Animated2DWithGradient from './Animated2DWithGradient';
+import Cap from '../Components/BarSpecificComponents/cap';
+import BarBackgroundPattern from '../Components/BarSpecificComponents/barBackgroundPattern';
+import LinearGradient from '../Components/common/LinearGradient';
+import {
+  getPropsForAnimated2DWithGradient,
+  RenderBarsPropsType,
+  barDataItem,
+  AxesAndRulesDefaults,
+} from 'gifted-charts-core';
+
+const RenderBars = (props: RenderBarsPropsType) => {
+  const {
+    item,
+    index,
+    containerHeight,
+    maxValue,
+    minHeight,
+    spacing,
+    propSpacing,
+    side,
+    data,
+    barBorderWidth,
+    barBorderColor,
+    isThreeD,
+    isAnimated,
+    rotateLabel,
+    appearingOpacity,
+    animationDuration,
+    autoShiftLabels,
+    label,
+    labelTextStyle,
+    xAxisTextNumberOfLines,
+    xAxisLabelsVerticalShift,
+    renderTooltip,
+    leftShiftForTooltip,
+    leftShiftForLastIndexTooltip,
+    initialSpacing,
+    selectedIndex,
+    setSelectedIndex,
+    xAxisThickness = AxesAndRulesDefaults.xAxisThickness,
+    horizontal,
+    rtl,
+    intactTopLabel,
+    showValuesAsTopLabel,
+    topLabelContainerStyle,
+    topLabelTextStyle,
+    pointerConfig,
+    noOfSectionsBelowXAxis,
+    yAxisOffset,
+    barWidth,
+  } = props;
+
+  const barHeight = Math.max(
+    minHeight,
+    (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200) -
+      xAxisThickness,
+  );
+
+  const {
+    commonStyleForBar,
+    barStyleWithBackground,
+    commonPropsFor2Dand3Dbars,
+    isFocused,
+    focusedBarConfig,
+    localFrontColor,
+  } = getPropsForAnimated2DWithGradient({...props, barHeight});
+
+  const itemOrPropsBarInnerComponent =
+    item.barInnerComponent ?? props.barInnerComponent;
+  const localBarInnerComponent = isFocused
+    ? focusedBarConfig?.barInnerComponent ?? itemOrPropsBarInnerComponent
+    : itemOrPropsBarInnerComponent;
+
+  const barMarginBottom =
+    item.barMarginBottom === 0
+      ? 0
+      : item.barMarginBottom || props.barMarginBottom || 0;
+
+  const renderLabel = (label: String, labelTextStyle: any, value: number) => {
+    return (
+      <View
+        style={[
+          {
+            width:
+              (item.labelWidth ||
+                props.labelWidth ||
+                item.barWidth ||
+                barWidth) + spacing,
+            left: spacing / -2,
+            position: 'absolute',
+            height: props.xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18,
+            bottom:
+              (rotateLabel
+                ? -40
+                : -6 - xAxisTextNumberOfLines * 18 - xAxisLabelsVerticalShift) -
+              barMarginBottom,
+          },
+          rotateLabel
+            ? horizontal
+              ? {transform: [{rotate: '330deg'}]}
+              : {
+                  transform: [
+                    {rotate: value < 0 ? '240deg' : '60deg'},
+                    {translateX: value < 0 ? 56 : 0},
+                    {translateY: value < 0 ? 32 : 0},
+                  ],
+                }
+            : horizontal
+              ? {transform: [{rotate: '-90deg'}]}
+              : value < 0
+                ? {
+                    transform: [
+                      {rotate: '180deg'},
+                      {
+                        translateY: autoShiftLabels
+                          ? 0
+                          : 16.5 * xAxisTextNumberOfLines + 14,
+                      },
+                    ],
+                  }
+                : {},
+        ]}>
+        {item.labelComponent ? (
+          item.labelComponent()
+        ) : (
+          <Text
+            style={[
+              {textAlign: 'center'},
+              rtl && horizontal && {transform: [{rotate: '180deg'}]},
+              labelTextStyle,
+            ]}
+            numberOfLines={xAxisTextNumberOfLines}>
+            {label || ''}
+          </Text>
+        )}
+      </View>
+    );
+  };
+
+  const renderAnimatedLabel = (
+    label: String,
+    labelTextStyle: any,
+    value: number,
+  ) => {
+    return (
+      <Animated.View
+        style={[
+          {
+            width:
+              (item.labelWidth ||
+                props.labelWidth ||
+                item.barWidth ||
+                barWidth) + spacing,
+            left: spacing / -2,
+            position: 'absolute',
+            height: props.xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18,
+            bottom:
+              (rotateLabel
+                ? -40
+                : -6 - xAxisTextNumberOfLines * 18 - xAxisLabelsVerticalShift) -
+              barMarginBottom,
+            opacity: appearingOpacity,
+          },
+          value < 0 && {transform: [{rotate: '180deg'}]},
+          rotateLabel
+            ? horizontal
+              ? {transform: [{rotate: '330deg'}]}
+              : {transform: [{rotate: '60deg'}]}
+            : horizontal
+              ? {transform: [{rotate: '-90deg'}]}
+              : value < 0
+                ? {
+                    transform: [
+                      {rotate: '180deg'},
+                      {
+                        translateY: autoShiftLabels
+                          ? 0
+                          : 16.5 * xAxisTextNumberOfLines + 14,
+                      },
+                    ],
+                  }
+                : {},
+        ]}>
+        {item.labelComponent ? (
+          item.labelComponent()
+        ) : (
+          <Text
+            style={[
+              {textAlign: 'center'},
+              rtl && horizontal && {transform: [{rotate: '180deg'}]},
+              labelTextStyle,
+            ]}
+            numberOfLines={xAxisTextNumberOfLines}>
+            {label || ''}
+          </Text>
+        )}
+      </Animated.View>
+    );
+  };
+
+  let leftSpacing = initialSpacing;
+  for (let i = 0; i < index; i++) {
+    leftSpacing +=
+      (data[i].spacing ?? propSpacing) + (data[i].barWidth || barWidth);
+  }
+
+  const static2DWithGradient = (item: barDataItem) => {
+    const localGradientColor =
+      item.gradientColor || props.gradientColor || 'white';
+    return (
+      <>
+        <LinearGradient
+          style={commonStyleForBar}
+          start={{x: 0, y: 0}}
+          end={{x: 0, y: 1}}
+          colors={[
+            isFocused
+              ? focusedBarConfig?.gradientColor ?? localGradientColor
+              : localGradientColor,
+            localFrontColor,
+          ]}>
+          {props.cappedBars && item.value ? (
+            <Cap
+              capThicknessFromItem={item.capThickness}
+              capThicknessFromProps={props.capThickness}
+              capColorFromItem={item.capColor}
+              capColorFromProps={props.capColor}
+              capRadiusFromItem={item.capRadius}
+              capRadiusFromProps={props.capRadius}
+            />
+          ) : null}
+        </LinearGradient>
+        {(item.barBackgroundPattern || props.barBackgroundPattern) && (
+          <BarBackgroundPattern
+            barBackgroundPatternFromItem={item.barBackgroundPattern}
+            barBackgroundPatternFromProps={props.barBackgroundPattern}
+            patternIdFromItem={item.patternId}
+            patternIdFromProps={props.patternId}
+          />
+        )}
+        {(item.topLabelComponent || showValuesAsTopLabel) && (
+          <View
+            style={[
+              {
+                position: 'absolute',
+                top: (item.barWidth || barWidth) * -1,
+                height: item.barWidth || barWidth,
+                width: item.barWidth || barWidth,
+                justifyContent:
+                  (horizontal && !intactTopLabel) || item.value < 0
+                    ? 'center'
+                    : 'flex-end',
+                alignItems: 'center',
+              },
+              item.value < 0 && {transform: [{rotate: '180deg'}]},
+              horizontal &&
+                !intactTopLabel && {transform: [{rotate: '270deg'}]},
+              topLabelContainerStyle ?? item.topLabelContainerStyle,
+            ]}>
+            {showValuesAsTopLabel ? (
+              <Text style={topLabelTextStyle}>{item.value + yAxisOffset}</Text>
+            ) : (
+              item.topLabelComponent?.()
+            )}
+          </View>
+        )}
+        {localBarInnerComponent ? (
+          <View style={{height: '100%', width: '100%'}}>
+            {localBarInnerComponent(item, index)}
+          </View>
+        ) : null}
+      </>
+    );
+  };
+
+  const barWrapperStyle = [
+    {
+      // overflow: 'visible',
+      marginBottom: 60 + barMarginBottom + xAxisLabelsVerticalShift - 0.5,
+      width: commonPropsFor2Dand3Dbars.barWidth,
+      height: barHeight,
+      marginRight: spacing,
+    },
+
+    pointerConfig
+      ? {
+          transform: [
+            {
+              translateY:
+                (containerHeight || 200) -
+                (barHeight - 10 + xAxisLabelsVerticalShift) +
+                (item.value < 0
+                  ? (Math.abs(item.value) * (containerHeight || 200)) /
+                    (maxValue || 200)
+                  : 0),
+            },
+          ],
+        }
+      : item.value < 0
+        ? {
+            transform: [
+              {
+                translateY:
+                  (Math.abs(item.value) * (containerHeight || 200)) /
+                  (maxValue || 200),
+              },
+              {rotateZ: '180deg'},
+            ],
+          }
+        : null,
+    side !== 'right' && {zIndex: data.length - index},
+  ];
+
+  const pressDisabled =
+    item.disablePress ||
+    props.disablePress ||
+    (pointerConfig && pointerConfig.barTouchable !== true);
+
+  const barContent = () => {
+    const isBarBelowXaxisAndInvisible =
+      item.value < 0 && !noOfSectionsBelowXAxis;
+    const animated2DWithGradient = (noGradient, noAnimation) => (
+      <Animated2DWithGradient
+        {...commonPropsFor2Dand3Dbars}
+        animationDuration={animationDuration || 800}
+        roundedBottom={props.roundedBottom || false}
+        roundedTop={props.roundedTop || false}
+        noGradient={noGradient}
+        noAnimation={noAnimation}
+        containerHeight={containerHeight}
+        maxValue={maxValue}
+        minHeight={minHeight ?? 0}
+        barMarginBottom={barMarginBottom}
+        cappedBars={props.cappedBars}
+        capThickness={props.capThickness}
+        capColor={props.capColor}
+        capRadius={props.capRadius}
+        horizontal={horizontal}
+        barBorderWidth={barBorderWidth}
+        barBorderColor={barBorderColor}
+        commonStyleForBar={commonStyleForBar}
+        barStyleWithBackground={barStyleWithBackground}
+      />
+    );
+    return (
+      <>
+        {(props.showXAxisIndices || item.showXAxisIndex) && (
+          <View
+            style={{
+              zIndex: 2,
+              position: 'absolute',
+              height: props.xAxisIndicesHeight,
+              width: props.xAxisIndicesWidth,
+              bottom: props.xAxisIndicesHeight / -2,
+              left: ((item.barWidth || barWidth) - props.xAxisIndicesWidth) / 2,
+              backgroundColor: props.xAxisIndicesColor,
+            }}
+          />
+        )}
+        {isBarBelowXaxisAndInvisible ? null : isThreeD ? (
+          <AnimatedThreeDBar
+            {...commonPropsFor2Dand3Dbars}
+            sideWidth={
+              item.sideWidth ||
+              props.sideWidth ||
+              (item.barWidth || barWidth) / 2
+            }
+            side={side || 'left'}
+            sideColor={item.sideColor || props.sideColor || ''}
+            topColor={item.topColor || props.topColor || ''}
+            horizontal={horizontal}
+            isAnimated={isAnimated}
+            animationDuration={animationDuration || 800}
+            selectedIndex={selectedIndex}
+          />
+        ) : item.showGradient || props.showGradient ? (
+          isAnimated ? (
+            animated2DWithGradient(false, false)
+          ) : (
+            static2DWithGradient(item)
+          )
+        ) : isAnimated ? (
+          animated2DWithGradient(true, false)
+        ) : (
+          animated2DWithGradient(true, true)
+        )}
+        {isAnimated
+          ? renderAnimatedLabel(label, labelTextStyle, item.value)
+          : renderLabel(label, labelTextStyle, item.value)}
+      </>
+    );
+  };
+
+  return (
+    <>
+      {pressDisabled ? (
+        <View pointerEvents="none" style={barWrapperStyle}>
+          {barContent()}
+        </View>
+      ) : (
+        <TouchableOpacity
+          activeOpacity={props.activeOpacity || 0.2}
+          onPress={() => {
+            if (renderTooltip || props.focusBarOnPress) {
+              setSelectedIndex(index);
+            }
+            item.onPress
+              ? item.onPress()
+              : props.onPress
+                ? props.onPress(item, index)
+                : null;
+          }}
+          onLongPress={() => {
+            item.onLongPress
+              ? item.onLongPress()
+              : props.onLongPress
+                ? props.onLongPress(item, index)
+                : null;
+          }}
+          onPressOut={() => {
+            item.onPressOut
+              ? item.onPressOut()
+              : props.onPressOut
+                ? props.onPressOut(item, index)
+                : null;
+          }}
+          style={barWrapperStyle}>
+          {barContent()}
+        </TouchableOpacity>
+      )}
+      {renderTooltip && selectedIndex === index && (
+        <View
+          style={{
+            position: 'absolute',
+            bottom: barHeight + 60,
+            left:
+              index === data.length - 1
+                ? leftSpacing - leftShiftForLastIndexTooltip
+                : leftSpacing -
+                  (item?.leftShiftForTooltip ?? leftShiftForTooltip ?? 0),
+            zIndex: 1000,
+          }}>
+          {renderTooltip(item, index)}
+        </View>
+      )}
+    </>
+  );
+};
+
+export default RenderBars;