react-native-gifted-charts 1.3.33 → 1.4.1

package/src/Components/AnimatedThreeDBar/index.tsx

@@ -1,8 +1,7 @@
-import React, {ReactNode, useEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {
   View,
   StyleSheet,
-  ColorValue,
   LayoutAnimation,
   Platform,
   UIManager,
@@ -11,45 +10,13 @@ import {
 import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
 import {styles} from './styles';
-import {barDataItem} from '../../BarChart/types';
+import { useAnimatedThreeDBar, animatedBarPropTypes, trianglePropTypes, BarDefaults } from 'gifted-charts-core';
 
 if (Platform.OS === 'android') {
   UIManager.setLayoutAnimationEnabledExperimental &&
     UIManager.setLayoutAnimationEnabledExperimental(true);
 }
 
-type trianglePropTypes = {
-  style: any;
-  width: number;
-  color: ColorValue;
-};
-
-type animatedBarPropTypes = {
-  isAnimated?: boolean;
-  animationDuration: number;
-  width: number;
-  sideWidth: number;
-  height: number;
-  showGradient: boolean;
-  gradientColor: any;
-  frontColor: ColorValue;
-  sideColor: ColorValue;
-  topColor: ColorValue;
-  opacity: number;
-  side: String;
-  horizontal: boolean;
-  intactTopLabel: boolean;
-  showValuesAsTopLabel: boolean;
-  topLabelContainerStyle?: any;
-  topLabelTextStyle?: any;
-  barBackgroundPattern?: Function;
-  barInnerComponent?: (item?: barDataItem, index?: number) => ReactNode;
-  patternId?: String;
-  barStyle?: object;
-  item: any;
-  index: number;
-};
-
 const TriangleCorner = (props: trianglePropTypes) => {
   return (
     <View
@@ -78,6 +45,10 @@ const triangleStyles = StyleSheet.create({
 });
 
 const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
+  const [height, setHeight] = useState(
+    props.isAnimated ? (Platform.OS === 'ios' ? 0 : 20) : props.height,
+  );
+
   const {
     isAnimated,
     animationDuration,
@@ -95,10 +66,16 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
     topLabelTextStyle,
   } = props;
 
-  const [initialRender, setInitialRender] = useState(isAnimated);
-  const [height, setHeight] = useState(
-    isAnimated ? (Platform.OS === 'ios' ? 0 : 20) : props.height,
-  );
+  const {
+    showGradient,
+    gradientColor,
+    frontColor,
+    sideColor,
+    topColor,
+    opacity,
+    initialRender,
+    setInitialRender,
+  } = useAnimatedThreeDBar(props);
 
   useEffect(() => {
     if (isAnimated) {
@@ -130,15 +107,6 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
     setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
   };
 
-  const showGradient = props.showGradient || false;
-  const gradientColor = props.gradientColor || 'white';
-
-  const frontColor = props.frontColor || '#fe2233';
-  const sideColor = props.sideColor || '#cc2233';
-  const topColor = props.topColor || '#ff4433';
-
-  const opacity = props.opacity || 1;
-
   return (
     <View style={styles.container}>
       {!initialRender && (

package/src/Components/BarAndLineChartsWrapper/index.tsx

@@ -4,15 +4,11 @@ import {renderHorizSections} from './renderHorizSections';
 import RenderLineInBarChart from './renderLineInBarChart';
 import RenderVerticalLines from './renderVerticalLines';
 import {
-  AxesAndRulesDefaults,
-  BarDefaults,
   chartTypes,
   yAxisSides,
-} from '../../utils/constants';
-import {
   BarAndLineChartsWrapperTypes,
-  horizSectionPropTypes,
-} from '../../utils/types';
+  useBarAndLineChartsWrapper,
+} from 'gifted-charts-core';
 
 const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
   const {
@@ -23,14 +19,9 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     labelsExtraHeight,
     yAxisLabelWidth,
     horizontal,
-    rtl,
-    shiftX,
-    shiftY,
     scrollRef,
     initialSpacing,
     data,
-    stackData,
-    secondaryData,
     barWidth,
     xAxisThickness,
     totalWidth,
@@ -40,33 +31,12 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     scrollToIndex,
     scrollAnimation,
     indicatorColor,
-    setSelectedIndex,
     spacing,
     showLine,
-    lineConfig,
-    lineConfig2,
-    maxValue,
-    lineData,
-    lineData2,
-    animatedWidth,
-    lineBehindBars,
-    points,
     points2,
-    arrowPoints,
     renderChartContent,
     remainingScrollViewProps,
-
-    width,
-    horizSections,
     endSpacing,
-    horizontalRulesStyle,
-    noOfSections,
-    showFractionalValues,
-    axesAndRulesProps,
-
-    yAxisLabelTexts,
-    yAxisOffset,
-    rotateYAxisTexts,
     hideAxesAndRules,
 
     showXAxisIndices,
@@ -80,262 +50,34 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     pointerX,
     pointerY,
 
-    scrollEventThrottle,
+    onEndReached,
+    onStartReached,
   } = props;
 
-  let yAxisAtTop = rtl ? !props.yAxisAtTop : props.yAxisAtTop;
-
-  const hideOrigin =
-    axesAndRulesProps.hideOrigin ?? AxesAndRulesDefaults.hideOrigin;
-
-  const yAxisSide =
-    axesAndRulesProps.yAxisSide ?? AxesAndRulesDefaults.yAxisSide;
-  const yAxisLabelContainerStyle = axesAndRulesProps.yAxisLabelContainerStyle;
-  const yAxisColor =
-    axesAndRulesProps.yAxisColor ?? AxesAndRulesDefaults.yAxisColor;
-  const yAxisExtraHeight =
-    axesAndRulesProps.yAxisExtraHeight ?? containerHeight / 20;
-  const trimYAxisAtTop =
-    axesAndRulesProps.trimYAxisAtTop ?? AxesAndRulesDefaults.trimYAxisAtTop;
-  const overflowTop =
-    axesAndRulesProps.overflowTop ?? AxesAndRulesDefaults.overflowTop;
-  const yAxisThickness =
-    axesAndRulesProps.yAxisThickness ?? AxesAndRulesDefaults.yAxisThickness;
-  const xAxisColor =
-    axesAndRulesProps.xAxisColor ?? AxesAndRulesDefaults.xAxisColor;
-  const xAxisLength = axesAndRulesProps.xAxisLength;
-  const xAxisType =
-    axesAndRulesProps.xAxisType ?? AxesAndRulesDefaults.xAxisType;
-  const xAxisLabelsVerticalShift =
-    axesAndRulesProps.xAxisLabelsVerticalShift ??
-    AxesAndRulesDefaults.xAxisLabelsVerticalShift;
-  const xAxisLabelsHeight = axesAndRulesProps.xAxisLabelsHeight;
-  const xAxisTextNumberOfLines = axesAndRulesProps.xAxisTextNumberOfLines;
-  const dashWidth =
-    axesAndRulesProps.dashWidth ?? AxesAndRulesDefaults.dashWidth;
-  const dashGap = axesAndRulesProps.dashGap ?? AxesAndRulesDefaults.dashGap;
-  const backgroundColor =
-    axesAndRulesProps.backgroundColor ?? AxesAndRulesDefaults.backgroundColor;
-  const hideRules =
-    axesAndRulesProps.hideRules ?? AxesAndRulesDefaults.hideRules;
-  const rulesLength = axesAndRulesProps.rulesLength;
-  const rulesType =
-    axesAndRulesProps.rulesType ?? AxesAndRulesDefaults.rulesType;
-  const rulesThickness =
-    axesAndRulesProps.rulesThickness ?? AxesAndRulesDefaults.rulesThickness;
-  const rulesColor =
-    axesAndRulesProps.rulesColor ?? AxesAndRulesDefaults.rulesColor;
-  const rulesConfigArray =
-    axesAndRulesProps.rulesConfigArray ?? AxesAndRulesDefaults.rulesConfigArray;
-  const showYAxisIndices = axesAndRulesProps.showYAxisIndices ?? false;
-  const yAxisIndicesHeight =
-    axesAndRulesProps.yAxisIndicesHeight ??
-    AxesAndRulesDefaults.yAxisIndicesHeight;
-  const yAxisIndicesWidth =
-    axesAndRulesProps.yAxisIndicesWidth ??
-    AxesAndRulesDefaults.yAxisIndicesWidth;
-  const yAxisIndicesColor =
-    axesAndRulesProps.yAxisIndicesColor ??
-    AxesAndRulesDefaults.yAxisIndicesColor;
-  const hideYAxisText =
-    axesAndRulesProps.hideYAxisText ?? AxesAndRulesDefaults.hideYAxisText;
-  const yAxisTextNumberOfLines =
-    axesAndRulesProps.yAxisTextNumberOfLines ??
-    AxesAndRulesDefaults.yAxisTextNumberOfLines;
-  const yAxisLabelPrefix = axesAndRulesProps.yAxisLabelPrefix ?? '';
-  const yAxisLabelSuffix = axesAndRulesProps.yAxisLabelSuffix ?? '';
-  const yAxisTextStyle = axesAndRulesProps.yAxisTextStyle;
-  const secondaryYAxis = axesAndRulesProps.secondaryYAxis;
-  const stepValue = axesAndRulesProps.stepValue;
-  const roundToDigits = axesAndRulesProps.roundToDigits;
-
-  const referenceLinesConfig = axesAndRulesProps.referenceLinesConfig;
-  const referenceLinesOverChartContent =
-    referenceLinesConfig.referenceLinesOverChartContent ??
-    AxesAndRulesDefaults.referenceLinesOverChartContent;
-
-  const showVerticalLines =
-    axesAndRulesProps.showVerticalLines ??
-    AxesAndRulesDefaults.showVerticalLines;
-  const verticalLinesThickness =
-    axesAndRulesProps.verticalLinesThickness ??
-    AxesAndRulesDefaults.verticalLinesThickness;
-  const verticalLinesHeight = axesAndRulesProps.verticalLinesHeight;
-  const verticalLinesColor =
-    axesAndRulesProps.verticalLinesColor ??
-    AxesAndRulesDefaults.verticalLinesColor;
-  const verticalLinesStrokeDashArray =
-    axesAndRulesProps.verticalLinesStrokeDashArray ??
-    AxesAndRulesDefaults.verticalLinesStrokeDashArray;
-  const verticalLinesShift =
-    axesAndRulesProps.verticalLinesShift ??
-    AxesAndRulesDefaults.verticalLinesShift;
-  const verticalLinesZIndex =
-    axesAndRulesProps.verticalLinesZIndex ??
-    AxesAndRulesDefaults.verticalLinesZIndex;
-  const verticalLinesSpacing =
-    axesAndRulesProps.verticalLinesSpacing ??
-    AxesAndRulesDefaults.verticalLinesSpacing;
-  const verticalLinesUptoDataPoint =
-    axesAndRulesProps.verticalLinesUptoDataPoint ??
-    AxesAndRulesDefaults.verticalLinesUptoDataPoint;
-  const noOfVerticalLines = axesAndRulesProps.noOfVerticalLines;
-
-  const verticalLinesAr = noOfVerticalLines
-    ? [...Array(noOfVerticalLines).keys()]
-    : [...Array(stackData ? stackData.length : data.length).keys()];
-
-  const horizSectionProps: horizSectionPropTypes = {
-    width,
-    horizSections,
-    noOfSectionsBelowXAxis,
-    totalWidth,
-    endSpacing,
-    yAxisSide,
-    horizontalRulesStyle,
-    noOfSections,
-    stepHeight,
-    yAxisLabelWidth,
-    yAxisLabelContainerStyle,
-    yAxisThickness,
-    yAxisColor,
-    yAxisExtraHeight,
+  const {
+    containerHeightIncludingBelowXAxis,
+    xAxisLabelsVerticalShift,
     trimYAxisAtTop,
-    xAxisThickness,
-    xAxisColor,
-    xAxisLength,
-    xAxisType,
-    dashWidth,
-    dashGap,
-    backgroundColor,
-    hideRules,
-    rulesLength,
-    rulesType,
-    rulesThickness,
-    rulesColor,
-    rulesConfigArray,
-    spacing,
-    showYAxisIndices,
-    yAxisIndicesHeight,
-    yAxisIndicesWidth,
-    yAxisIndicesColor,
-
-    hideOrigin,
-    hideYAxisText,
-    showFractionalValues,
-    yAxisTextNumberOfLines,
-    yAxisLabelPrefix,
-    yAxisLabelSuffix,
-    yAxisTextStyle,
-    rotateYAxisTexts,
-    rtl,
-
-    containerHeight,
+    yAxisExtraHeight,
     overflowTop,
-    maxValue,
-
-    referenceLinesConfig,
-
-    yAxisLabelTexts,
-    yAxisOffset,
-
-    horizontal,
+    xAxisLabelsHeight,
+    xAxisTextNumberOfLines,
+    actualContainerWidth,
+    transformForHorizontal,
+    horizSectionProps,
+    referenceLinesOverChartContent,
+    setCanMomentum,
+    isCloseToStart,
+    isCloseToEnd,
+    canMomentum,
     yAxisAtTop,
-
-    stepValue,
-    roundToDigits,
-
-    secondaryData,
-    secondaryYAxis,
-    formatYLabel: axesAndRulesProps.formatYLabel,
-  };
-
-  const lineInBarChartProps = {
-    yAxisLabelWidth,
-    initialSpacing,
-    spacing,
-    containerHeight,
-    lineConfig,
-    maxValue: secondaryYAxis?.maxValue ?? maxValue,
-    animatedWidth,
-    lineBehindBars,
-    points,
-    arrowPoints,
-    data: lineData?.length ? lineData : stackData ?? data,
-    totalWidth,
-    barWidth,
-    labelsExtraHeight,
-    scrollEventThrottle,
-    xAxisLabelsVerticalShift,
-  };
-  const lineInBarChartProps2 = {
-    ...lineInBarChartProps,
-    lineConfig: lineConfig2,
-    points: points2,
-    data: lineData2,
-  };
-  const extendedContainerHeight = containerHeight + overflowTop + 10;
-  const containerHeightIncludingBelowXAxis =
-    extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight;
-  const verticalLinesProps = {
-    verticalLinesAr,
-    verticalLinesSpacing,
-    spacing: lineConfig?.spacing ?? spacing,
-    initialSpacing,
-    verticalLinesZIndex,
-    verticalLinesHeight,
-    verticalLinesThickness,
-    verticalLinesColor,
-    verticalLinesStrokeDashArray,
-    verticalLinesShift,
-    verticalLinesUptoDataPoint,
-    xAxisThickness,
-    labelsExtraHeight,
-    containerHeight,
-    data,
-    stackData,
-    barWidth,
-    maxValue,
-    chartType,
-    containerHeightIncludingBelowXAxis,
-    yAxisLabelWidth,
-    totalWidth,
-    xAxisLabelsVerticalShift,
-  };
-
-  const actualContainerHeight =
-    containerHeightIncludingBelowXAxis + labelsExtraHeight - 10;
-  const actualContainerWidth = (width ?? totalWidth) + yAxisLabelWidth;
-
-  /*******************************************************************************************************************************************/
-  /***************                                 horizontal chart related calculations                                   *******************/
-  /*******************************************************************************************************************************************/
-
-  const containerHeightIncludingXaxisLabels =
-    actualContainerHeight + BarDefaults.labelsWidthForHorizontal;
-
-  const difBwWidthHeight =
-    actualContainerWidth - containerHeightIncludingXaxisLabels;
-
-  const transformForHorizontal = [
-    {rotate: rtl ? '-90deg' : '90deg'},
-    {
-      translateY:
-        -shiftX + (rtl ? -difBwWidthHeight + 14 : difBwWidthHeight) / 2 - 20,
-    },
-    {
-      translateX:
-        shiftY +
-        (rtl
-          ? (props.width ? -98 - endSpacing : -75 - endSpacing) -
-            difBwWidthHeight
-          : props.width
-            ? difBwWidthHeight
-            : difBwWidthHeight - 40) /
-          2 +
-        (yAxisAtTop ? (rtl ? (props.width ? 12 : 40) : 12) : 52),
-    },
-  ];
+    yAxisThickness,
+    yAxisSide,
+    showVerticalLines,
+    verticalLinesProps,
+    lineInBarChartProps,
+    lineInBarChartProps2,
+  } = useBarAndLineChartsWrapper(props);
 
   useEffect(() => {
     if (pointerConfig && getPointerProps) {
@@ -378,6 +120,19 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
           })
         : null}
       <ScrollView
+        onScrollBeginDrag={() => {
+          setCanMomentum(true);
+        }}
+        onMomentumScrollEnd={({nativeEvent}) => {
+          if (isCloseToEnd(nativeEvent) && canMomentum) {
+            onEndReached ? onEndReached() : null;
+            setCanMomentum(false);
+          }
+          if (isCloseToStart(nativeEvent) && canMomentum) {
+            onStartReached ? onStartReached() : null;
+            setCanMomentum(false);
+          }
+        }}
         scrollEventThrottle={
           props.scrollEventThrottle ? props.scrollEventThrottle : 16
         }