react-native-gifted-charts 1.4.12 → 1.4.13

package/src/BarChart/index.tsx

@@ -0,0 +1,373 @@
+import React, {useCallback, useEffect, useMemo, useRef} from 'react';
+import {Animated, Easing, View} from 'react-native';
+import RenderBars from './RenderBars';
+import RenderStackBars from './RenderStackBars';
+import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
+import {BarChartPropsType, useBarChart} from 'gifted-charts-core';
+import {StripAndLabel} from '../Components/common/StripAndLabel';
+import {Pointer} from '../Components/common/Pointer';
+import {screenWidth} from '../utils';
+
+export const BarChart = (props: BarChartPropsType) => {
+  const heightValue = useMemo(() => new Animated.Value(0), []);
+  const opacValue = useMemo(() => new Animated.Value(0), []);
+  const widthValue = useMemo(() => new Animated.Value(0), []);
+
+  const scrollRef = props.scrollRef ?? useRef(null);
+  const remainingScrollViewProps = {
+    onScroll: (ev: any) => props.onScroll?.(ev),
+    onTouchStart: evt => {
+      if (props.renderTooltip) {
+        setSelectedIndex(-1);
+      }
+    },
+  };
+
+  const {
+    lineConfig,
+    hidePointer1,
+    pointerItem,
+    pointerY,
+    pointerConfig,
+    pointerColor,
+    pointerX,
+    pointerComponent,
+    pointerHeight,
+    pointerRadius,
+    pointerWidth,
+    autoAdjustPointerLabelPosition,
+    pointerLabelWidth,
+    activatePointersOnLongPress,
+    yAxisLabelWidth,
+    shiftPointerLabelX,
+    pointerLabelHeight,
+    pointerStripUptoDataPoint,
+    pointerStripHeight,
+    shiftPointerLabelY,
+    showPointerStrip,
+    pointerStripWidth,
+    containerHeight,
+    xAxisThickness,
+    pointerStripColor,
+    pointerEvents,
+    setResponderStartTime,
+    setPointerY,
+    setPointerItem,
+    initialSpacing,
+    spacing,
+    data,
+    barWidth,
+    setPointerX,
+    setPointerIndex,
+    maxValue,
+    responderStartTime,
+    setResponderActive,
+    activatePointersDelay,
+    persistPointer,
+    pointerVanishDelay,
+    containerHeightIncludingBelowXAxis,
+    extendedContainerHeight,
+    totalWidth,
+    stripBehindBars,
+    noOfSectionsBelowXAxis,
+    stepHeight,
+    xAxisLabelsVerticalShift,
+    labelsExtraHeight,
+    stripOverPointer,
+    pointerLabelComponent,
+    setSelectedIndex,
+    isAnimated,
+    animationDuration,
+    side,
+    labelWidth,
+    isThreeD,
+    animatedHeight,
+    appearingOpacity,
+    autoShiftLabels,
+    getPropsCommonForBarAndStack,
+    barAndLineChartsWrapperProps,
+  } = useBarChart({...props, heightValue, widthValue, opacValue, parentWidth: props.parentWidth ?? screenWidth});
+
+  const labelsAppear = useCallback(() => {
+    opacValue.setValue(0);
+    Animated.timing(opacValue, {
+      toValue: 1,
+      duration: 500,
+      easing: Easing.ease,
+      useNativeDriver: false,
+    }).start();
+  }, [opacValue]);
+
+  const decreaseWidth = useCallback(() => {
+    widthValue.setValue(0);
+    Animated.timing(widthValue, {
+      toValue: 1,
+      duration: lineConfig.animationDuration,
+      easing: Easing.linear,
+      useNativeDriver: false,
+    }).start();
+  }, [lineConfig.animationDuration, widthValue]);
+
+  useEffect(() => {
+    if (lineConfig.isAnimated) {
+      setTimeout(() => decreaseWidth(), lineConfig.delay || 0);
+    }
+    setTimeout(() => labelsAppear(), animationDuration);
+  }, [decreaseWidth, labelsAppear, animationDuration]);
+
+  const renderPointer = (lineNumber: number) => {
+    if (lineNumber === 1 && hidePointer1) return;
+
+    const pointerItemLocal = pointerItem;
+    const pointerYLocal = pointerY;
+    const pointerColorLocal = pointerConfig?.pointer1Color || pointerColor;
+
+    return Pointer({
+      pointerX,
+      pointerYLocal,
+      pointerComponent,
+      pointerHeight,
+      pointerRadius,
+      pointerWidth,
+      pointerItemLocal,
+      pointerColorLocal,
+    });
+  };
+
+  const renderStripAndLabel = pointerLabelComponent => {
+    let pointerItemLocal,
+      pointerYLocal = pointerY;
+
+    pointerItemLocal = [pointerItem];
+    return StripAndLabel({
+      autoAdjustPointerLabelPosition,
+      pointerX,
+      pointerLabelWidth,
+      activatePointersOnLongPress,
+      yAxisLabelWidth,
+      pointerRadius,
+      pointerWidth,
+      shiftPointerLabelX,
+      pointerLabelHeight,
+      pointerYLocal,
+      pointerStripUptoDataPoint,
+      pointerStripHeight,
+      shiftPointerLabelY,
+      pointerItemLocal,
+      showPointerStrip,
+      pointerStripWidth,
+      containerHeight,
+      xAxisThickness,
+      pointerStripColor,
+      pointerConfig,
+      pointerLabelComponent,
+      scrollX: 0,
+      pointerEvents,
+      isBarChart: true,
+    });
+  };
+
+  const renderChartContent = () => {
+    if (pointerConfig) {
+      return (
+        <View
+          onStartShouldSetResponder={evt => (pointerConfig ? true : false)}
+          onMoveShouldSetResponder={evt => (pointerConfig ? true : false)}
+          onResponderGrant={evt => {
+            if (!pointerConfig) return;
+            setResponderStartTime(evt.timeStamp);
+            if (activatePointersOnLongPress) {
+              return;
+            }
+            let x = evt.nativeEvent.locationX;
+            if (
+              !activatePointersOnLongPress &&
+              x > (props.width || screenWidth)
+            )
+              return;
+            let factor =
+              (x - initialSpacing - barWidth / 2) / (spacing + barWidth);
+            factor = Math.round(factor);
+            factor = Math.min(factor, data.length - 1);
+            factor = Math.max(factor, 0);
+            let z =
+              initialSpacing +
+              (spacing + barWidth) * factor -
+              (pointerRadius || pointerWidth / 2) +
+              barWidth / 2;
+            setPointerX(z);
+            setPointerIndex(factor);
+            let item, y;
+            item = (props.stackData ?? data)[factor];
+            const stackSum = item.stacks?.reduce(
+              (acc, stack) => acc + (stack.value ?? 0),
+              0,
+            );
+            y =
+              containerHeight -
+              ((stackSum ?? item.value) * containerHeight) / maxValue -
+              (pointerRadius || pointerHeight / 2) +
+              10;
+            setPointerY(y);
+            setPointerItem(item);
+          }}
+          onResponderMove={evt => {
+            if (!pointerConfig) return;
+            if (
+              activatePointersOnLongPress &&
+              evt.timeStamp - responderStartTime < activatePointersDelay
+            ) {
+              return;
+            } else {
+              setResponderActive(true);
+            }
+            let x = evt.nativeEvent.locationX;
+            if (
+              !activatePointersOnLongPress &&
+              x > (props.width || screenWidth)
+            )
+              return;
+            let factor =
+              (x - initialSpacing - barWidth / 2) / (spacing + barWidth);
+            factor = Math.round(factor);
+            factor = Math.min(factor, (props.stackData ?? data).length - 1);
+            factor = Math.max(factor, 0);
+            let z =
+              initialSpacing +
+              (spacing + barWidth) * factor -
+              (pointerRadius || pointerWidth / 2) +
+              barWidth / 2;
+            let item, y;
+            setPointerX(z);
+            setPointerIndex(factor);
+            item = (props.stackData ?? data)[factor];
+            const stackSum = item.stacks?.reduce(
+              (acc, stack) => acc + (stack.value ?? 0),
+              0,
+            );
+            y =
+              containerHeight -
+              ((stackSum ?? item.value) * containerHeight) / maxValue -
+              (pointerRadius || pointerHeight / 2) +
+              10;
+            setPointerY(y);
+            setPointerItem(item);
+          }}
+          onResponderEnd={evt => {
+            setResponderStartTime(0);
+            setPointerIndex(-1);
+            setResponderActive(false);
+            if (!persistPointer)
+              setTimeout(() => setPointerX(0), pointerVanishDelay);
+          }}
+          onResponderTerminationRequest={evt => false}
+          style={{
+            position: 'absolute',
+            height: containerHeightIncludingBelowXAxis,
+            bottom: 60,
+            paddingLeft: initialSpacing,
+            width: totalWidth,
+            flexDirection: 'row',
+          }}>
+          {pointerX > 0 && stripBehindBars ? (
+            <View
+              pointerEvents={pointerEvents ?? 'none'}
+              style={{
+                position: 'absolute',
+                height:
+                  extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
+                bottom: xAxisLabelsVerticalShift + labelsExtraHeight,
+                width: totalWidth,
+              }}>
+              {renderStripAndLabel(null)}
+            </View>
+          ) : null}
+          {renderChart()}
+          {pointerX > 0 ? (
+            <View
+              pointerEvents={pointerEvents ?? 'none'}
+              style={{
+                position: 'absolute',
+                height:
+                  extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
+                bottom: xAxisLabelsVerticalShift + labelsExtraHeight,
+                width: totalWidth,
+                zIndex: 20,
+              }}>
+              {!stripOverPointer &&
+                !stripBehindBars &&
+                renderStripAndLabel(null)}
+              {renderPointer(1)}
+              {stripOverPointer &&
+                !stripBehindBars &&
+                renderStripAndLabel(null)}
+              {
+                pointerLabelComponent &&
+                  renderStripAndLabel(pointerLabelComponent) // no matter what, pointerLabelComponent will be rendered at last -> over the chart content
+              }
+            </View>
+          ) : null}
+        </View>
+      );
+    } else {
+      return renderChart();
+    }
+  };
+
+  const renderChart = () => {
+    if (props.stackData) {
+      return props.stackData.map((item, index) => {
+        return (
+          <RenderStackBars
+            stackData={props.stackData || []}
+            isAnimated={isAnimated}
+            animationDuration={animationDuration}
+            stackBorderRadius={props.stackBorderRadius}
+            stackBorderTopLeftRadius={props.stackBorderTopLeftRadius}
+            stackBorderTopRightRadius={props.stackBorderTopRightRadius}
+            stackBorderBottomLeftRadius={props.stackBorderBottomLeftRadius}
+            stackBorderBottomRightRadius={props.stackBorderBottomRightRadius}
+            {...getPropsCommonForBarAndStack(item, index)}
+          />
+        );
+      });
+    } else {
+      return data.map((item, index) => (
+        <RenderBars
+          data={data}
+          side={side}
+          minHeight={props.minHeight ?? (isAnimated && !isThreeD ? 0.1 : 0)}
+          sideWidth={props.sideWidth}
+          labelWidth={labelWidth}
+          isThreeD={isThreeD}
+          isAnimated={isAnimated}
+          animationDuration={animationDuration}
+          animatedHeight={animatedHeight}
+          appearingOpacity={appearingOpacity}
+          roundedTop={props.roundedTop}
+          roundedBottom={props.roundedBottom}
+          frontColor={props.frontColor}
+          sideColor={props.sideColor}
+          topColor={props.topColor}
+          cappedBars={props.cappedBars}
+          capThickness={props.capThickness}
+          capColor={props.capColor}
+          capRadius={props.capRadius}
+          autoShiftLabels={autoShiftLabels}
+          barMarginBottom={props.barMarginBottom}
+          barStyle={props.barStyle}
+          {...getPropsCommonForBarAndStack(item, index)}
+        />
+      ));
+    }
+  };
+
+  return (
+    <BarAndLineChartsWrapper
+      {...barAndLineChartsWrapperProps}
+      scrollRef={scrollRef}
+      renderChartContent={renderChartContent}
+      remainingScrollViewProps={remainingScrollViewProps}
+    />
+  );
+};

package/src/BarChart/styles.tsx

@@ -0,0 +1,47 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    marginBottom: 40,
+    marginRight: 40,
+  },
+  horizBar: {
+    flexDirection: 'row',
+  },
+  leftLabel: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  lastLeftLabel: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  leftPart: {
+    justifyContent: 'center',
+    width: '100%',
+  },
+  lastLeftPart: {
+    justifyContent: 'flex-end',
+    width: '100%',
+  },
+  line: {
+    width: '100%',
+    height: 1,
+    backgroundColor: 'gray',
+    opacity: 0.5,
+  },
+  lastLine: {
+    width: '100%',
+    height: 1,
+    backgroundColor: 'black',
+  },
+  bottomLabel: {
+    width: '100%',
+  },
+  customDataPointContainer: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/Components/AnimatedThreeDBar/index.tsx

@@ -0,0 +1,258 @@
+import React, {useEffect, useState} from 'react';
+import {
+  View,
+  StyleSheet,
+  LayoutAnimation,
+  Platform,
+  UIManager,
+  Text,
+} from 'react-native';
+import Svg, {Defs, Rect} from 'react-native-svg';
+import {styles} from './styles';
+import LinearGradient from "../common/LinearGradient";
+import {
+  useAnimatedThreeDBar,
+  animatedBarPropTypes,
+  trianglePropTypes,
+} from 'gifted-charts-core';
+
+if (Platform.OS === 'android') {
+  UIManager.setLayoutAnimationEnabledExperimental &&
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const TriangleCorner = (props: trianglePropTypes) => {
+  return (
+    <View
+      style={[
+        triangleStyles.triangleCorner,
+        props.style,
+        {
+          borderRightWidth: props.width / 2,
+          borderTopWidth: props.width / 2,
+          borderTopColor: props.color,
+        },
+      ]}
+    />
+  );
+};
+
+const triangleStyles = StyleSheet.create({
+  triangleCorner: {
+    width: 0,
+    height: 0,
+    backgroundColor: 'transparent',
+    borderStyle: 'solid',
+    borderRightColor: 'transparent',
+    transform: [{rotate: '90deg'}],
+  },
+});
+
+const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
+  const heightCopy = props.height;
+  const [height, setHeight] = useState(
+    props.isAnimated ? (Platform.OS === 'ios' ? 0 : 20) : heightCopy,
+  );
+
+  const {
+    isAnimated,
+    animationDuration,
+    item,
+    index,
+    barWidth,
+    sideWidth,
+    barStyle,
+    barBackgroundPattern,
+    barInnerComponent,
+    patternId,
+    intactTopLabel,
+    showValuesAsTopLabel,
+    topLabelContainerStyle,
+    topLabelTextStyle,
+  } = props;
+
+  const {
+    showGradient,
+    gradientColor,
+    frontColor,
+    sideColor,
+    topColor,
+    opacity,
+    initialRender,
+    setInitialRender,
+  } = useAnimatedThreeDBar(props);
+
+  useEffect(() => {
+    if (isAnimated) {
+      if (initialRender) {
+        setTimeout(() => {
+          layoutAppear();
+        }, 20);
+      } else {
+        elevate();
+      }
+    }
+  }, [props.height]);
+
+  const elevate = () => {
+    LayoutAnimation.configureNext({
+      duration: animationDuration,
+      update: {type: 'linear', property: 'scaleY'},
+    });
+    setHeight(props.height);
+  };
+
+  const layoutAppear = () => {
+    LayoutAnimation.configureNext({
+      duration: Platform.OS == 'ios' ? animationDuration : 20,
+      create: {type: 'linear', property: 'scaleY'},
+      // update: { type: 'linear' }
+    });
+    setInitialRender(false);
+    setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
+  };
+
+  return (
+    <View style={styles.container}>
+      {!initialRender && (
+        <View
+          style={[
+            styles.row,
+            {opacity: opacity, position: 'absolute', bottom: 0},
+            props.side === 'right' && {transform: [{rotateY: '180deg'}]},
+          ]}>
+          {/*******************          Top View             *****************/}
+          {props.height ? (
+            <>
+              <View style={{position: 'absolute', top: sideWidth / -2}}>
+                <TriangleCorner
+                  color={topColor}
+                  width={sideWidth}
+                  style={{transform: [{rotate: '90deg'}], opacity: opacity}}
+                />
+              </View>
+              <View style={{position: 'absolute', top: sideWidth / -2}}>
+                <View
+                  style={{
+                    width: barWidth,
+                    height: barWidth,
+                    // left: width / 2,
+                    backgroundColor: topColor,
+                    opacity: opacity,
+                  }}
+                />
+              </View>
+              <View
+                style={{
+                  position: 'absolute',
+                  top: sideWidth / -2,
+                  left: barWidth - 1,
+                }}>
+                <TriangleCorner
+                  color={topColor}
+                  width={sideWidth}
+                  style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
+                />
+              </View>
+            </>
+          ) : null}
+
+          {/*******************************************************************/}
+
+          <View style={{marginTop: sideWidth / -2 - 1}}>
+            <TriangleCorner
+              color={height ? sideColor : 'transparent'}
+              width={sideWidth}
+              style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
+            />
+            <View
+              style={{
+                width: sideWidth / 2 + 1,
+                height: height - sideWidth / 2, //animatedSideHeight
+                backgroundColor: sideColor,
+                opacity: opacity,
+              }}
+            />
+            <TriangleCorner
+              color={height ? sideColor : 'transparent'}
+              width={sideWidth + 1}
+              style={{transform: [{rotate: '90deg'}], opacity: opacity}}
+            />
+          </View>
+
+          <View
+            style={[
+              {
+                width: barWidth,
+                height: height, //animatedHeight
+                backgroundColor: frontColor,
+                borderLeftWidth: StyleSheet.hairlineWidth,
+                borderTopWidth: StyleSheet.hairlineWidth,
+                borderColor: 'white',
+                opacity: opacity,
+              },
+              item.barStyle || barStyle,
+            ]}>
+            {showGradient && (
+              <LinearGradient
+                style={{position: 'absolute', width: '100%', height: '100%'}}
+                start={{x: 0, y: 0}}
+                end={{x: 1, y: 1}}
+                colors={[gradientColor, frontColor]}
+              />
+            )}
+            {barBackgroundPattern && (
+              <Svg>
+                <Defs>{barBackgroundPattern()}</Defs>
+                <Rect
+                  stroke="transparent"
+                  x="1"
+                  y="1"
+                  width={barWidth || 30}
+                  height={height}
+                  fill={`url(#${patternId})`}
+                />
+              </Svg>
+            )}
+            {barInnerComponent ? (
+              <View style={{height: '100%', width: '100%'}}>
+                {barInnerComponent(item, index)}
+              </View>
+            ) : null}
+          </View>
+
+          {/*******************          Top Label            *****************/}
+
+          {(item.topLabelComponent || showValuesAsTopLabel) && (
+            <View
+              style={[
+                {
+                  position: 'absolute',
+                  top: barWidth * -2,
+                  height: (barWidth * 3) / 2,
+                  width: (barWidth * 3) / 2,
+                  justifyContent: 'flex-end',
+                  alignItems: 'center',
+                  opacity: opacity,
+                },
+                props.horizontal &&
+                  !intactTopLabel && {transform: [{rotate: '270deg'}]},
+                props.side === 'right' && {transform: [{rotateY: '180deg'}]},
+                topLabelContainerStyle ?? item.topLabelContainerStyle,
+              ]}>
+              {showValuesAsTopLabel ? (
+                <Text style={topLabelTextStyle}>{item.value}</Text>
+              ) : (
+                item.topLabelComponent?.()
+              )}
+            </View>
+          )}
+
+          {/*******************************************************************/}
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default AnimatedThreeDBar;

package/src/Components/AnimatedThreeDBar/styles.tsx

@@ -0,0 +1,14 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    // width: '100%',
+    // height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+  },
+});