react-native-gifted-charts 1.4.20 → 1.4.21

package/src/BarChart/index.tsx

@@ -1,391 +0,0 @@
-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: any) => {
-      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,
-    autoShiftLabelsForNegativeStacks,
-  } = 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: any) => {
-    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];
-            let stackSum = 0;
-            if ('stacks' in item) {
-              stackSum = item.stacks.reduce(
-                (acc: number, stack: any) => 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];
-            let stackSum = 0;
-            if ('stacks' in item) {
-              item.stacks?.reduce(
-                (acc: number, stack: any) => 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
-            key={index}
-            stackData={props.stackData || []}
-            isAnimated={isAnimated}
-            animationDuration={animationDuration}
-            stackBorderRadius={props.stackBorderRadius}
-            stackBorderTopLeftRadius={props.stackBorderTopLeftRadius}
-            stackBorderTopRightRadius={props.stackBorderTopRightRadius}
-            stackBorderBottomLeftRadius={props.stackBorderBottomLeftRadius}
-            stackBorderBottomRightRadius={props.stackBorderBottomRightRadius}
-            autoShiftLabelsForNegativeStacks={autoShiftLabelsForNegativeStacks}
-            {...getPropsCommonForBarAndStack(item, index)}
-          />
-        );
-      });
-    } else {
-      return data.map((item, index) => (
-        <RenderBars
-          key={index}
-          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}
-      nestedScrollEnabled={props.nestedScrollEnabled}
-    />
-  );
-};

package/src/BarChart/styles.tsx

@@ -1,47 +0,0 @@
-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

@@ -1,258 +0,0 @@
-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

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