gifted-charts-core 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gifted-charts-core",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Mathematical and logical utilities used by react-gifted-charts and react-native-gifted-charts",
   "main": "index.ts",
   "files": [

package/src/BarChart/index.ts

@@ -684,6 +684,7 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
 
     onEndReached: props.onEndReached,
     onStartReached: props.onStartReached,
+    endReachedOffset: props.endReachedOffset ?? BarDefaults.endReachedOffset,
   };
 
   return {

package/src/BarChart/types.ts

@@ -1,5 +1,5 @@
-import {ColorValue, GestureResponderEvent} from 'react-native';
-import {yAxisSides} from '../utils/constants';
+import { ColorValue, GestureResponderEvent } from "react-native";
+import { yAxisSides } from "../utils/constants";
 import {
   CurveType,
   Pointer,
@@ -7,11 +7,12 @@ import {
   RulesConfig,
   referenceConfigType,
   secondaryYAxisType,
-} from '../utils/types';
-import {Component, ReactNode} from 'react';
+} from "../utils/types";
+import { Component, ReactNode } from "react";
 
 export type stackDataItem = {
   onPress?: any;
+  onLongPress?: any;
   label?: String;
   barWidth?: number;
   spacing?: number;
@@ -75,6 +76,7 @@ export type StackedBarChartPropsType = {
   data?: any;
   barWidth?: number;
   onPress?: Function;
+  onLongPress?: Function;
 
   rotateLabel?: boolean;
   showXAxisIndices: boolean;
@@ -90,7 +92,10 @@ export type StackedBarChartPropsType = {
   barBorderTopRightRadius?: number;
   barBorderBottomLeftRadius?: number;
   barBorderBottomRightRadius?: number;
-  barInnerComponent?: (item?: barDataItem | stackDataItem, index?: number) => ReactNode;
+  barInnerComponent?: (
+    item?: barDataItem | stackDataItem,
+    index?: number
+  ) => ReactNode;
   stackBorderRadius?: number;
   stackBorderTopLeftRadius?: number;
   stackBorderTopRightRadius?: number;
@@ -219,7 +224,7 @@ export type BarChartPropsType = {
 
   disableScroll?: boolean;
   showScrollIndicator?: boolean;
-  indicatorColor?: 'black' | 'default' | 'white';
+  indicatorColor?: "black" | "default" | "white";
   roundedTop?: boolean;
   roundedBottom?: boolean;
   disablePress?: boolean;
@@ -274,11 +279,15 @@ export type BarChartPropsType = {
   patternId?: String;
   barMarginBottom?: number;
   onPress?: Function;
+  onLongPress?: Function;
   renderTooltip?: Function;
   leftShiftForTooltip?: number;
   leftShiftForLastIndexTooltip?: number;
   barStyle?: object;
-  barInnerComponent?: (item?: stackDataItem | barDataItem, index?: number) => ReactNode;
+  barInnerComponent?: (
+    item?: stackDataItem | barDataItem,
+    index?: number
+  ) => ReactNode;
 
   secondaryData?: Array<barDataItem>;
   secondaryYAxis?: secondaryYAxisType | boolean;
@@ -288,6 +297,7 @@ export type BarChartPropsType = {
 
   onEndReached?: () => void;
   onStartReached?: () => void;
+  endReachedOffset?: number;
 };
 type lineConfigType = {
   initialSpacing?: number;
@@ -364,6 +374,7 @@ type sectionType = {
 export type barDataItem = {
   value: number;
   onPress?: any;
+  onLongPress?: any;
   frontColor?: ColorValue;
   sideColor?: ColorValue;
   topColor?: ColorValue;
@@ -546,4 +557,3 @@ export type animatedBarPropTypes = {
   item: any;
   index: number;
 };
-

package/src/LineChart/LineChartBiColor.ts

@@ -1,6 +1,13 @@
 import { useEffect, useMemo, useState } from "react";
-import { AxesAndRulesDefaults, LineDefaults, chartTypes } from "../utils/constants";
-import { getAxesAndRulesProps, getExtendedContainerHeightWithPadding } from "../utils";
+import {
+  AxesAndRulesDefaults,
+  LineDefaults,
+  chartTypes,
+} from "../utils/constants";
+import {
+  getAxesAndRulesProps,
+  getExtendedContainerHeightWithPadding,
+} from "../utils";
 import { bicolorLineDataItem } from "./types";
 import { BarAndLineChartsWrapperTypes } from "../utils/types";
 
@@ -464,7 +471,7 @@ export const useLineChartBiColor = (props) => {
     lineData2: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     lineBehindBars: false,
     points: pointsArray,
-    points2: '', // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    points2: "", // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     arrowPoints: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     remainingScrollViewProps: {},
 
@@ -494,7 +501,8 @@ export const useLineChartBiColor = (props) => {
     pointerIndex: 0,
     pointerX: 0,
     pointerY: 0,
-  }
+    endReachedOffset: props.endReachedOffset ?? LineDefaults.endReachedOffset,
+  };
 
   return {
     toggle,

package/src/LineChart/index.ts

@@ -1698,7 +1698,7 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
     setPointerY5(y5);
   };
 
-  const barAndLineChartsWrapperProps:BarAndLineChartsWrapperTypes = {
+  const barAndLineChartsWrapperProps: BarAndLineChartsWrapperTypes = {
     chartType: chartTypes.LINE,
     containerHeight,
     noOfSectionsBelowXAxis,
@@ -1734,7 +1734,7 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
     lineData2: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     lineBehindBars: false,
     points,
-    points2: '', // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    points2: "", // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     arrowPoints: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
 
     //horizSectionProps-
@@ -1764,7 +1764,8 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
 
     onEndReached: props.onEndReached,
     onStartReached: props.onStartReached,
-  }
+    endReachedOffset: props.endReachedOffset ?? LineDefaults.endReachedOffset,
+  };
 
   return {
     curvature,

package/src/LineChart/types.ts

@@ -1,5 +1,5 @@
-import {ColorValue} from 'react-native';
-import {yAxisSides} from '../utils/constants';
+import { ColorValue } from "react-native";
+import { yAxisSides } from "../utils/constants";
 import {
   CurveType,
   DataSet,
@@ -13,7 +13,7 @@ import {
   referenceConfigType,
   secondaryLineConfigType,
   secondaryYAxisType,
-} from '../utils/types';
+} from "../utils/types";
 
 export type LineChartPropsType = {
   height?: number;
@@ -121,7 +121,7 @@ export type LineChartPropsType = {
   disableScroll?: boolean;
   pointerConfig?: Pointer;
   showScrollIndicator?: boolean;
-  indicatorColor?: 'black' | 'default' | 'white';
+  indicatorColor?: "black" | "default" | "white";
 
   //Indices
 
@@ -318,6 +318,7 @@ export type LineChartPropsType = {
 
   onEndReached?: () => void;
   onStartReached?: () => void;
+  endReachedOffset?: number;
 };
 
 export type lineDataItem = {
@@ -489,7 +490,7 @@ export type LineChartBicolorPropsType = {
 
   disableScroll?: boolean;
   showScrollIndicator?: boolean;
-  indicatorColor?: 'black' | 'default' | 'white';
+  indicatorColor?: "black" | "default" | "white";
 
   //Indices
 

package/src/components/BarAndLineChartsWrapper/index.ts

@@ -1,8 +1,13 @@
 import { useEffect, useState } from "react";
 import { AxesAndRulesDefaults, BarDefaults } from "../../utils/constants";
-import { horizSectionPropTypes } from "../../utils/types";
+import {
+  BarAndLineChartsWrapperTypes,
+  horizSectionPropTypes,
+} from "../../utils/types";
 
-export const useBarAndLineChartsWrapper = (props) => {
+export const useBarAndLineChartsWrapper = (
+  props: BarAndLineChartsWrapperTypes
+) => {
   const {
     chartType,
     containerHeight,
@@ -52,6 +57,7 @@ export const useBarAndLineChartsWrapper = (props) => {
     pointerY,
 
     scrollEventThrottle,
+    endReachedOffset,
   } = props;
 
   let yAxisAtTop = rtl ? !props.yAxisAtTop : props.yAxisAtTop;
@@ -313,7 +319,7 @@ export const useBarAndLineChartsWrapper = (props) => {
   const isCloseToEnd = ({ layoutMeasurement, contentOffset, contentSize }) => {
     return (
       layoutMeasurement.width + contentOffset.x >=
-      contentSize.width - initialSpacing
+      contentSize.width - initialSpacing - endReachedOffset
     );
   };
 

package/src/utils/constants.ts

@@ -1,7 +1,7 @@
-import {defaultLineConfigType} from '../BarChart/types';
-import {CurveType, EdgePosition, RuleTypes} from './types';
-import {Dimensions} from 'react-native';
-import {FontStyle} from 'react-native-svg';
+import { defaultLineConfigType } from "../BarChart/types";
+import { CurveType, EdgePosition, RuleTypes } from "./types";
+import { Dimensions } from "react-native";
+import { FontStyle } from "react-native-svg";
 
 // Global
 
@@ -11,12 +11,13 @@ export enum chartTypes {
   LINE_BI_COLOR,
 }
 
-export const screenWidth = Dimensions.get('window').width;
+export const screenWidth = Dimensions.get("window").width;
 
 const defaultCurvature = 0.2;
 const defaultCurveType = CurveType.CUBIC;
 const defaultAnimationDuration = 800;
 const defaultScrollEventThrottle = 0;
+const defaultEndReachedOffset = 80;
 
 // Bar and Line chart Specific
 
@@ -31,38 +32,38 @@ export enum loc {
   DOWN,
 }
 
-export const SEGMENT_START = 'segmentStart';
-export const SEGMENT_END = 'segmentEnd';
-export const RANGE_ENTER = 'RangeEnter';
-export const RANGE_EXIT = 'RangeExit';
-export const STOP = 'stop';
+export const SEGMENT_START = "segmentStart";
+export const SEGMENT_END = "segmentEnd";
+export const RANGE_ENTER = "RangeEnter";
+export const RANGE_EXIT = "RangeExit";
+export const STOP = "stop";
 
 export const ruleTypes: RuleTypes = {
-  SOLID: 'solid',
-  DASHED: 'dashed',
-  DOTTED: 'dotted',
+  SOLID: "solid",
+  DASHED: "dashed",
+  DOTTED: "dotted",
 };
 
 export const AxesAndRulesDefaults = {
   yAxisSide: yAxisSides.LEFT,
-  yAxisColor: 'black',
+  yAxisColor: "black",
   yAxisExtraHeight: 0,
   yAxisThickness: 1,
   trimYAxisAtTop: false,
   overflowTop: 0,
-  xAxisColor: 'black',
+  xAxisColor: "black",
   xAxisThickness: 1,
   xAxisType: ruleTypes.SOLID,
   xAxisTextNumberOfLines: 1,
   xAxisLabelsVerticalShift: 0,
   dashWidth: 4,
   dashGap: 8,
-  backgroundColor: 'transparent',
+  backgroundColor: "transparent",
 
   hideRules: false,
   rulesType: ruleTypes.DASHED,
   rulesThickness: 1,
-  rulesColor: 'lightgray',
+  rulesColor: "lightgray",
   rulesConfigArray: [],
 
   rotateLabel: false,
@@ -70,12 +71,12 @@ export const AxesAndRulesDefaults = {
   showYAxisIndices: false,
   yAxisIndicesHeight: 2,
   yAxisIndicesWidth: 4,
-  yAxisIndicesColor: 'black',
+  yAxisIndicesColor: "black",
 
   showXAxisIndices: false,
   xAxisIndicesHeight: 2,
   xAxisIndicesWidth: 4,
-  xAxisIndicesColor: 'black',
+  xAxisIndicesColor: "black",
 
   hideOrigin: false,
   hideYAxisText: false,
@@ -83,8 +84,8 @@ export const AxesAndRulesDefaults = {
 
   showVerticalLines: false,
   verticalLinesThickness: 1,
-  verticalLinesColor: 'lightgray',
-  verticalLinesStrokeDashArray: '',
+  verticalLinesColor: "lightgray",
+  verticalLinesStrokeDashArray: "",
   verticalLinesShift: 0,
   verticalLinesZIndex: -1,
   verticalLinesSpacing: 0,
@@ -109,8 +110,8 @@ export const defaultArrowConfig = {
   length: 10,
   width: 10,
   strokeWidth: 1,
-  strokeColor: 'black',
-  fillColor: 'none',
+  strokeColor: "black",
+  fillColor: "none",
   showArrowBase: true,
 };
 
@@ -120,9 +121,9 @@ export const BarDefaults = {
   barWidth: 30,
   spacing: 20,
   capThickness: 6,
-  capColor: 'gray',
+  capColor: "gray",
   capRadius: 0,
-  barBorderColor: 'gray',
+  barBorderColor: "gray",
 
   horizontal: false,
   rtl: false,
@@ -140,15 +141,16 @@ export const BarDefaults = {
   showScrollIndicator: false,
   scrollEventThrottle: defaultScrollEventThrottle,
 
-  side: '',
+  side: "",
   isAnimated: false,
   animationDuration: 800,
   opacity: 1,
   isThreeD: false,
-  threeDBarGradientColor: 'white',
-  threeDBarFrontColor: '#C0CA3A',
-  threeDBarSideColor: '#887A24',
-  threeDBarTopColor: '#D9E676',
+  threeDBarGradientColor: "white",
+  threeDBarFrontColor: "#C0CA3A",
+  threeDBarSideColor: "#887A24",
+  threeDBarTopColor: "#D9E676",
+  endReachedOffset: defaultEndReachedOffset,
 };
 
 export const defaultLineConfig: defaultLineConfigType = {
@@ -159,14 +161,14 @@ export const defaultLineConfig: defaultLineConfigType = {
   isAnimated: false,
   animationDuration: defaultAnimationDuration,
   thickness: 1,
-  color: 'black',
+  color: "black",
   hideDataPoints: false,
-  dataPointsShape: 'circular',
+  dataPointsShape: "circular",
   dataPointsWidth: 4,
   dataPointsHeight: 4,
-  dataPointsColor: 'black',
+  dataPointsColor: "black",
   dataPointsRadius: 3,
-  textColor: 'gray',
+  textColor: "gray",
   textFontSize: 10,
   textShiftX: 0,
   textShiftY: 0,
@@ -183,7 +185,7 @@ export const defaultLineConfig: defaultLineConfigType = {
 // Line chart specific
 
 export const LineDefaults = {
-  color: 'black',
+  color: "black",
   curvature: defaultCurvature,
   curveType: defaultCurveType,
   thickness: 2,
@@ -204,19 +206,19 @@ export const LineDefaults = {
   dataPointsHeight: 4,
   dataPointsWidth: 4,
   dataPointsRadius: 3,
-  dataPointsColor: 'black',
-  dataPointsColor2: 'blue',
-  dataPointsColor3: 'red',
-  dataPointsShape: 'circular',
+  dataPointsColor: "black",
+  dataPointsColor2: "blue",
+  dataPointsColor3: "red",
+  dataPointsShape: "circular",
 
   textFontSize: 10,
-  textColor: 'gray',
+  textColor: "gray",
 
-  startFillColor: 'gray',
-  endFillColor: 'white',
+  startFillColor: "gray",
+  endFillColor: "white",
   lineGradient: false,
-  lineGradientStartColor: 'lightgreen',
-  lineGradientEndColor: 'orange',
+  lineGradientStartColor: "lightgreen",
+  lineGradientEndColor: "orange",
   startOpacity: 1,
   endOpacity: 1,
 
@@ -228,18 +230,19 @@ export const LineDefaults = {
   unFocusOnPressOut: true,
   delayBeforeUnFocus: 300,
   edgePosition: EdgePosition.AT_DATA_POINT,
+  endReachedOffset: defaultEndReachedOffset,
 };
 
 export const defaultPointerConfig = {
   height: 0,
   width: 0,
   radius: 5,
-  pointerColor: 'red',
+  pointerColor: "red",
   pointerComponent: null,
   showPointerStrip: true,
   pointerStripHeight: AxesAndRulesDefaults.containerHeight, // gets updated to actual containerHeight
   pointerStripWidth: 1,
-  pointerStripColor: 'black',
+  pointerStripColor: "black",
   pointerStripUptoDataPoint: false,
   pointerLabelComponent: null,
   stripOverPointer: false,
@@ -269,41 +272,41 @@ export const defaultPointerConfig = {
 // Pie chart specific
 
 export const pieColors = [
-  'cyan',
-  'green',
-  'orange',
-  'purple',
-  '#bbff00',
-  'red',
-  'blue',
-  'pink',
+  "cyan",
+  "green",
+  "orange",
+  "purple",
+  "#bbff00",
+  "red",
+  "blue",
+  "pink",
 ];
 
 export const populationDefaults = {
   height: 200,
   width: screenWidth,
-  verticalMarginBetweenBars : 1,
+  verticalMarginBetweenBars: 1,
   barsMapToYAxisSections: true,
 
   xAxisNoOfSections: 4,
   showXAxisIndices: true,
   xAxisIndicesWidth: 2,
   xAxisIndicesHeight: 4,
-  xAxisIndicesColor: 'black',
+  xAxisIndicesColor: "black",
   showXAxisLabelTexts: true,
   xAxisRoundToDigits: 0,
 
   showVerticalLines: true,
-  verticalLinesColor: 'lightgray',
+  verticalLinesColor: "lightgray",
   verticalLinesThickness: 1,
   verticalLinesType: ruleTypes.DASHED,
-  verticalLinesStrokeDashArray: [4,8],
+  verticalLinesStrokeDashArray: [4, 8],
 
   defaultFontSize: 12,
-  defaultFontColor: 'black',
-  defaultFontStyle: <FontStyle>'normal',
+  defaultFontColor: "black",
+  defaultFontStyle: <FontStyle>"normal",
   defaultFontWeight: 1,
-  defaultFontFamily: '',
+  defaultFontFamily: "",
 
   yAxisLabelTextMarginRight: 4,
   showValuesAsBarLabels: false,
@@ -314,10 +317,10 @@ export const populationDefaults = {
   leftBarLabelWidth: 30,
   rightBarLabelWidth: 30,
 
-  leftBarColor: 'skyblue',
-  rightBarColor: 'orange',
-  leftBarBorderColor: 'blue',
-  rightBarBorderColor: 'red',
+  leftBarColor: "skyblue",
+  rightBarColor: "orange",
+  leftBarBorderColor: "blue",
+  rightBarBorderColor: "red",
   leftBarBorderWidth: 0,
   rightBarBorderWidth: 0,
   leftBarBorderRadius: 0,
@@ -326,12 +329,12 @@ export const populationDefaults = {
   showSurplus: false,
   showSurplusLeft: false,
   showSurplusRight: false,
-  leftSurplusColor: '#334790',
-  leftSurplusBorderColor: 'blue',
-  rightSurplusColor: '#AC343C',
-  rightSurplusBorderColor: 'red',
+  leftSurplusColor: "#334790",
+  leftSurplusBorderColor: "blue",
+  rightSurplusColor: "#AC343C",
+  rightSurplusBorderColor: "red",
   leftSurplusBorderWidth: 0,
   rightSurplusBorderWidth: 0,
-  prefix: '',
-  suffix: '',
-}
+  prefix: "",
+  suffix: "",
+};

package/src/utils/types.ts

@@ -1,8 +1,8 @@
-import {ColorValue} from 'react-native';
-import {chartTypes, yAxisSides} from './constants';
-import {lineDataItem} from '../LineChart/types';
+import { ColorValue } from "react-native";
+import { chartTypes, yAxisSides } from "./constants";
+import { lineDataItem } from "../LineChart/types";
 
-export type RuleType = 'solid' | 'dashed' | 'dotted' | string;
+export type RuleType = "solid" | "dashed" | "dotted" | string;
 
 export type RuleTypes = {
   SOLID: RuleType;
@@ -29,7 +29,7 @@ export type RulesConfig = {
   dashGap?: number;
 };
 
-export type PointerEvents = 'box-none' | 'none' | 'box-only' | 'auto';
+export type PointerEvents = "box-none" | "none" | "box-only" | "auto";
 
 export type secondaryYAxisType = {
   noOfSections?: number;
@@ -211,7 +211,7 @@ export type BarAndLineChartsWrapperTypes = {
   scrollToEnd: boolean;
   scrollToIndex: number | undefined;
   scrollAnimation: boolean;
-  indicatorColor: 'black' | 'default' | 'white' | undefined;
+  indicatorColor: "black" | "default" | "white" | undefined;
   setSelectedIndex: any;
   spacing: number;
   showLine: boolean;
@@ -256,6 +256,7 @@ export type BarAndLineChartsWrapperTypes = {
 
   onEndReached?: () => void;
   onStartReached?: () => void;
+  endReachedOffset: number;
 };
 
 export type Pointer = {