gifted-charts-core 0.0.1 → 0.0.3

package/index.ts

@@ -36,7 +36,7 @@ export {
 
 export { usePieChart } from "./src/PieChart";
 export { getPieChartMainProps } from "./src/PieChart/main";
-export { PieChartPropsType, pieDataItem } from "./src/PieChart/types";
+export { PieChartPropsType, pieDataItem, PieChartMainProps } from "./src/PieChart/types";
 
 /***********************************************************************************************************************/
 /************************************          Population Pyramid Chart             ************************************/
@@ -115,6 +115,8 @@ export {
   RuleType,
   RuleTypes,
   RulesConfig,
+  CurveType,
+  EdgePosition,
   PointerEvents,
   secondaryYAxisType,
   secondaryLineConfigType,

package/package.json

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

package/src/BarChart/Animated2DWithGradient.ts

@@ -84,6 +84,12 @@ export const getPropsForAnimated2DWithGradient = (props) => {
       borderTopRightRadius: (item.barWidth || barWidth || 30) / 2,
     });
   }
+  const barStyleWithBackground: ViewStyle[] = [
+    ...commonStyleForBar,
+    {
+      backgroundColor: item.frontColor || props.frontColor || "black",
+    },
+  ];
 
   const commonPropsFor2Dand3Dbars = {
     barBackgroundPattern: item.barBackgroundPattern || barBackgroundPattern,
@@ -107,6 +113,7 @@ export const getPropsForAnimated2DWithGradient = (props) => {
 
   return {
     commonStyleForBar,
+    barStyleWithBackground,
     commonPropsFor2Dand3Dbars,
   };
 };

package/src/BarChart/index.ts

@@ -1,11 +1,8 @@
-import {
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import { useEffect, useMemo, useState } from "react";
 import { BarChartPropsType, barDataItem } from "./types";
 import {
   getArrowPoints,
+  getAxesAndRulesProps,
   getExtendedContainerHeightWithPadding,
   getLineConfigForBarChart,
   getSecondaryDataWithOffsetIncluded,
@@ -17,9 +14,11 @@ import {
 import {
   AxesAndRulesDefaults,
   BarDefaults,
+  chartTypes,
   defaultLineConfig,
   defaultPointerConfig,
 } from "../utils/constants";
+import { BarAndLineChartsWrapperTypes } from "../utils/types";
 
 interface extendedBarChartPropsType extends BarChartPropsType {
   heightValue;
@@ -28,8 +27,7 @@ interface extendedBarChartPropsType extends BarChartPropsType {
 }
 
 export const useBarChart = (props: extendedBarChartPropsType) => {
-  const { heightValue, widthValue, opacValue } =
-    props;
+  const { heightValue, widthValue, opacValue } = props;
   const [points, setPoints] = useState("");
   const [points2, setPoints2] = useState("");
   const [arrowPoints, setArrowPoints] = useState("");
@@ -554,6 +552,140 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
     outputRange: [0, totalWidth],
   });
 
+  const getPropsCommonForBarAndStack = (item, index) => {
+    return {
+      key: index,
+      item: item,
+      index: index,
+      containerHeight: containerHeight,
+      maxValue: maxValue,
+      spacing: item.spacing ?? spacing,
+      propSpacing: spacing,
+      xAxisThickness: xAxisThickness,
+      barWidth: props.barWidth,
+      opacity: opacity,
+      disablePress: item.disablePress || props.disablePress,
+      rotateLabel: rotateLabel,
+      showXAxisIndices: showXAxisIndices,
+      xAxisIndicesHeight: xAxisIndicesHeight,
+      xAxisIndicesWidth: xAxisIndicesWidth,
+      xAxisIndicesColor: xAxisIndicesColor,
+      horizontal: horizontal,
+      rtl: rtl,
+      intactTopLabel: intactTopLabel,
+      showValuesAsTopLabel: props.showValuesAsTopLabel,
+      topLabelContainerStyle: props.topLabelContainerStyle,
+      topLabelTextStyle: props.topLabelTextStyle,
+      barBorderWidth: props.barBorderWidth,
+      barBorderColor: barBorderColor,
+      barBorderRadius: props.barBorderRadius,
+      barBorderTopLeftRadius: props.barBorderTopLeftRadius,
+      barBorderTopRightRadius: props.barBorderTopRightRadius,
+      barBorderBottomLeftRadius: props.barBorderBottomLeftRadius,
+      barBorderBottomRightRadius: props.barBorderBottomRightRadius,
+      barInnerComponent,
+      color: props.color,
+      showGradient: props.showGradient,
+      gradientColor: props.gradientColor,
+      barBackgroundPattern: props.barBackgroundPattern,
+      patternId: props.patternId,
+      onPress: props.onPress,
+      xAxisTextNumberOfLines: xAxisTextNumberOfLines,
+      xAxisLabelsHeight: props.xAxisLabelsHeight,
+      xAxisLabelsVerticalShift,
+      renderTooltip: props.renderTooltip,
+      leftShiftForTooltip: props.leftShiftForTooltip || 0,
+      initialSpacing: initialSpacing,
+      selectedIndex: selectedIndex,
+      setSelectedIndex: setSelectedIndex,
+      activeOpacity: props.activeOpacity || 0.2,
+
+      leftShiftForLastIndexTooltip: props.leftShiftForLastIndexTooltip || 0,
+      label:
+        item.label ||
+        (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+          ? props.xAxisLabelTexts[index]
+          : ""),
+      labelTextStyle: item.labelTextStyle || props.xAxisLabelTextStyle,
+      pointerConfig,
+    };
+  };
+
+  const barAndLineChartsWrapperProps: BarAndLineChartsWrapperTypes = {
+    chartType: chartTypes.BAR,
+    containerHeight,
+    noOfSectionsBelowXAxis,
+    stepHeight,
+    labelsExtraHeight,
+    yAxisLabelWidth,
+    horizontal,
+    rtl,
+    shiftX: props.shiftX ?? 0,
+    shiftY: props.shiftY ?? 0,
+    yAxisAtTop,
+    initialSpacing,
+    data,
+    stackData: props.stackData,
+    secondaryData: secondaryData,
+    barWidth: props.barWidth || BarDefaults.barWidth,
+    xAxisThickness,
+    totalWidth,
+    disableScroll,
+    showScrollIndicator,
+    scrollToEnd,
+    scrollToIndex: props.scrollToIndex,
+    scrollAnimation,
+    scrollEventThrottle,
+    indicatorColor: props.indicatorColor,
+    setSelectedIndex,
+    spacing,
+    showLine,
+    lineConfig,
+    lineConfig2,
+    maxValue,
+    lineData,
+    lineData2,
+    animatedWidth,
+    lineBehindBars,
+    points,
+    points2,
+    arrowPoints,
+
+    //horizSectionProps-
+    width: widthFromProps,
+    horizSections,
+    endSpacing,
+    horizontalRulesStyle,
+    noOfSections,
+    showFractionalValues,
+
+    axesAndRulesProps: getAxesAndRulesProps(
+      props,
+      stepValue,
+      secondaryMaxValue
+    ),
+
+    yAxisLabelTexts: props.yAxisLabelTexts,
+    yAxisOffset: props.yAxisOffset,
+    rotateYAxisTexts: props.rotateYAxisTexts,
+    hideAxesAndRules: props.hideAxesAndRules,
+
+    showXAxisIndices,
+    xAxisIndicesHeight,
+    xAxisIndicesWidth,
+    xAxisIndicesColor,
+
+    // These are Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    pointerConfig,
+    getPointerProps,
+    pointerIndex,
+    pointerX,
+    pointerY,
+
+    endReached: props.endReached,
+    startReached: props.startReached,
+  };
+
   return {
     lineConfig,
     hidePointer1,
@@ -592,6 +724,7 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
     setPointerIndex,
     maxValue,
     responderStartTime,
+    responderActive,
     setResponderActive,
     activatePointersDelay,
     persistPointer,
@@ -642,8 +775,11 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
     animatedWidth,
     lineBehindBars,
     points,
+    setPoints,
     points2,
+    setPoints2,
     arrowPoints,
+    setArrowPoints,
     horizSections,
     endSpacing,
     horizontalRulesStyle,
@@ -654,5 +790,7 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
     secondaryMaxValue,
     getPointerProps,
     pointerIndex,
+    getPropsCommonForBarAndStack,
+    barAndLineChartsWrapperProps,
   };
 };

package/src/BarChart/types.ts

@@ -285,6 +285,9 @@ export type BarChartPropsType = {
   pointerConfig?: Pointer;
   getPointerProps?: Function;
   formatYLabel?: (label: string) => string;
+
+  endReached?: () => void;
+  startReached?: () => void;
 };
 type lineConfigType = {
   initialSpacing?: number;

package/src/LineChart/LineChartBiColor.ts

@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
-import { AxesAndRulesDefaults, LineDefaults } from "../utils/constants";
-import { getExtendedContainerHeightWithPadding } from "../utils";
+import { AxesAndRulesDefaults, LineDefaults, chartTypes } from "../utils/constants";
+import { getAxesAndRulesProps, getExtendedContainerHeightWithPadding } from "../utils";
 import { bicolorLineDataItem } from "./types";
+import { BarAndLineChartsWrapperTypes } from "../utils/types";
 
 let initialData: Array<bicolorLineDataItem> | null = null;
 
@@ -427,6 +428,74 @@ export const useLineChartBiColor = (props) => {
     });
   }
 
+  const barAndLineChartsWrapperProps: BarAndLineChartsWrapperTypes = {
+    chartType: chartTypes.LINE_BI_COLOR,
+    containerHeight,
+    noOfSectionsBelowXAxis,
+    stepHeight,
+    labelsExtraHeight,
+    yAxisLabelWidth,
+    horizontal,
+    rtl: false,
+    shiftX: 0,
+    shiftY: 0,
+    yAxisAtTop,
+    initialSpacing,
+    data,
+    stackData: undefined, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    secondaryData: [],
+    barWidth: 0, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    xAxisThickness,
+    totalWidth,
+    disableScroll,
+    showScrollIndicator,
+    scrollToEnd,
+    scrollToIndex: props.scrollToIndex,
+    scrollAnimation,
+    scrollEventThrottle,
+    indicatorColor: props.indicatorColor,
+    setSelectedIndex,
+    spacing,
+    showLine: false,
+    lineConfig: null, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    lineConfig2: null, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    maxValue,
+    lineData: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart 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)
+    arrowPoints: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    remainingScrollViewProps: {},
+
+    //horizSectionProps-
+    width: props.width,
+    horizSections,
+    endSpacing,
+    horizontalRulesStyle,
+    noOfSections,
+    showFractionalValues,
+
+    axesAndRulesProps: getAxesAndRulesProps(props, stepValue, undefined),
+
+    yAxisLabelTexts: props.yAxisLabelTexts,
+    yAxisOffset: props.yAxisOffset,
+    rotateYAxisTexts: 0,
+    hideAxesAndRules: props.hideAxesAndRules,
+
+    showXAxisIndices,
+    xAxisIndicesHeight,
+    xAxisIndicesWidth,
+    xAxisIndicesColor,
+
+    // These are Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    pointerConfig: undefined,
+    getPointerProps: null,
+    pointerIndex: 0,
+    pointerX: 0,
+    pointerY: 0,
+  }
+
   return {
     toggle,
     setToggle,
@@ -513,5 +582,6 @@ export const useLineChartBiColor = (props) => {
     unFocusOnPressOut,
     delayBeforeUnFocus,
     horizSections,
+    barAndLineChartsWrapperProps,
   };
 };

package/src/LineChart/index.ts

@@ -4,6 +4,7 @@ import {
   LineDefaults,
   SEGMENT_END,
   SEGMENT_START,
+  chartTypes,
   defaultArrowConfig,
   defaultPointerConfig,
   screenWidth,
@@ -13,6 +14,7 @@ import {
   computeMaxAndMinItems,
   getAllArrowProperties,
   getArrowPoints,
+  getAxesAndRulesProps,
   getCurvePathWithSegments,
   getExtendedContainerHeightWithPadding,
   getPathWithHighlight,
@@ -21,7 +23,7 @@ import {
   svgPath,
 } from "../utils";
 import { LineChartPropsType } from "./types";
-import { EdgePosition } from "../utils/types";
+import { BarAndLineChartsWrapperTypes, EdgePosition } from "../utils/types";
 
 interface extendedLineChartPropsType extends LineChartPropsType {
   animations;
@@ -1696,6 +1698,74 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
     setPointerY5(y5);
   };
 
+  const barAndLineChartsWrapperProps:BarAndLineChartsWrapperTypes = {
+    chartType: chartTypes.LINE,
+    containerHeight,
+    noOfSectionsBelowXAxis,
+    stepHeight,
+    labelsExtraHeight,
+    yAxisLabelWidth,
+    horizontal,
+    rtl: false,
+    shiftX: 0,
+    shiftY: 0,
+    yAxisAtTop,
+    initialSpacing,
+    data: data0 ?? data,
+    stackData: undefined, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    secondaryData: secondaryData,
+    barWidth: 0, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    xAxisThickness,
+    totalWidth,
+    disableScroll,
+    showScrollIndicator,
+    scrollToEnd,
+    scrollToIndex: props.scrollToIndex,
+    scrollAnimation,
+    scrollEventThrottle,
+    indicatorColor: props.indicatorColor,
+    setSelectedIndex,
+    spacing,
+    showLine: false,
+    lineConfig: null, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    lineConfig2: null, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    maxValue,
+    lineData: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    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)
+    arrowPoints: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+
+    //horizSectionProps-
+    width: props.width,
+    horizSections,
+    endSpacing,
+    horizontalRulesStyle,
+    noOfSections,
+    showFractionalValues,
+
+    axesAndRulesProps: getAxesAndRulesProps(props, stepValue, undefined),
+
+    yAxisLabelTexts: props.yAxisLabelTexts,
+    yAxisOffset: props.yAxisOffset,
+    rotateYAxisTexts: 0,
+    hideAxesAndRules: props.hideAxesAndRules,
+
+    showXAxisIndices,
+    xAxisIndicesHeight,
+    xAxisIndicesWidth,
+    xAxisIndicesColor,
+    pointerConfig,
+    getPointerProps,
+    pointerIndex,
+    pointerX,
+    pointerY,
+
+    endReached: props.endReached,
+    startReached: props.startReached,
+  }
+
   return {
     curvature,
     curveType,
@@ -2037,5 +2107,6 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
     getPointerY,
     initialisePointers,
     setPointerConfig,
+    barAndLineChartsWrapperProps,
   };
 };

package/src/LineChart/types.ts

@@ -315,6 +315,9 @@ export type LineChartPropsType = {
   lineSegments4?: Array<LineSegment>;
   lineSegments5?: Array<LineSegment>;
   highlightedRange?: HighlightedRange;
+
+  endReached?: () => void;
+  startReached?: () => void;
 };
 
 export type lineDataItem = {

package/src/PieChart/main.ts

@@ -1,11 +1,6 @@
-import { PieChartPropsType, pieDataItem } from "./types";
+import { PieChartMainProps, pieDataItem } from "./types";
 
-interface propTypes extends PieChartPropsType {
-  setSelectedIndex: Function;
-  isBiggerPie?: boolean;
-}
-
-export const getPieChartMainProps = (props: propTypes) => {
+export const getPieChartMainProps = (props: PieChartMainProps) => {
   const { isThreeD, isBiggerPie } = props;
   const propData = props.data;
   const data: Array<pieDataItem> = [];

package/src/PieChart/types.ts

@@ -75,3 +75,8 @@ export type pieDataItem = {
   peripheral?: boolean;
   pieInnerComponent?: (item?: pieDataItem, index?: number) => any;
 };
+
+export interface PieChartMainProps extends PieChartPropsType {
+  setSelectedIndex: Function;
+  isBiggerPie?: boolean;
+}

package/src/components/AnimatedThreeDBar/index.tsx

@@ -18,9 +18,9 @@ export const useAnimatedThreeDBar = (props: animatedBarPropTypes) => {
   return {
     showGradient,
     gradientColor,
-    frontColor,
-    sideColor,
-    topColor,
+    frontColor: frontColor?.toString()?.trim?.()?.length ? frontColor : BarDefaults.threeDBarFrontColor,
+    sideColor: sideColor?.toString()?.trim?.()?.length ? sideColor : BarDefaults.threeDBarSideColor,
+    topColor: topColor?.toString()?.trim?.()?.length ? topColor : BarDefaults.threeDBarTopColor,
     opacity,
     initialRender,
     setInitialRender,

package/src/components/BarAndLineChartsWrapper/getHorizSectionsVals.ts

@@ -1,6 +1,6 @@
 import { AxesAndRulesDefaults } from "../../utils/constants";
 import { HorizSectionsType, secondaryYAxisType } from "../../utils/types";
-import { computeMaxAndMinItems } from "../../utils";
+import { computeMaxAndMinItems, getLabelTextUtil } from "../../utils";
 
 export const getHorizSectionVals = (props) => {
   const {
@@ -43,6 +43,9 @@ export const getHorizSectionVals = (props) => {
     stepValue,
     roundToDigits,
 
+    yAxisOffset,
+    formatYLabel,
+
     secondaryData,
     secondaryYAxis,
   } = props;
@@ -335,6 +338,43 @@ export const getHorizSectionVals = (props) => {
       }
     : defaultReferenceConfig;
 
+    const getLabelTexts = (val, index) => {
+      return getLabelTextUtil(
+        val,
+        index,
+        showFractionalValues,
+        yAxisLabelTexts,
+        yAxisOffset,
+        yAxisLabelPrefix,
+        yAxisLabelSuffix,
+        roundToDigits ?? AxesAndRulesDefaults.roundToDigits,
+        formatYLabel,
+      );
+    };
+  
+    const getLabelTextsForSecondaryYAxis = (val, index) => {
+      const {
+        showFractionalValues,
+        yAxisLabelTexts,
+        yAxisOffset,
+        yAxisLabelPrefix,
+        yAxisLabelSuffix,
+        roundToDigits,
+        formatYLabel,
+      } = secondaryYAxisConfig;
+      return getLabelTextUtil(
+        val,
+        index,
+        showFractionalValues,
+        yAxisLabelTexts,
+        yAxisOffset,
+        yAxisLabelPrefix,
+        yAxisLabelSuffix,
+        roundToDigits ?? AxesAndRulesDefaults.roundToDigits,
+        formatYLabel,
+      );
+    };
+
   return {
     secondaryYAxisConfig,
     horizSections,
@@ -351,5 +391,7 @@ export const getHorizSectionVals = (props) => {
     referenceLine3Position,
     horizSectionsBelow,
     secondaryHorizSectionsBelow,
+    getLabelTexts,
+    getLabelTextsForSecondaryYAxis,
   };
 };

package/src/utils/constants.ts

@@ -146,9 +146,9 @@ export const BarDefaults = {
   opacity: 1,
   isThreeD: false,
   threeDBarGradientColor: 'white',
-  threeDBarFrontColor: '#fe2233',
-  threeDBarSideColor: '#fe2233',
-  threeDBarTopColor: '#fe2233',
+  threeDBarFrontColor: '#C0CA3A',
+  threeDBarSideColor: '#887A24',
+  threeDBarTopColor: '#D9E676',
 };
 
 export const defaultLineConfig: defaultLineConfigType = {

package/src/utils/types.ts

@@ -197,7 +197,7 @@ export type BarAndLineChartsWrapperTypes = {
   rtl: boolean;
   shiftX: number;
   shiftY: number;
-  scrollRef: any;
+  scrollRef?: any;
   yAxisAtTop: boolean;
   initialSpacing: number;
   data: Array<any>;
@@ -220,13 +220,13 @@ export type BarAndLineChartsWrapperTypes = {
   maxValue: number;
   lineData: Array<any>;
   lineData2: Array<any>;
-  animatedWidth: any;
+  animatedWidth?: any;
   lineBehindBars: boolean;
   points: string | Array<any>;
   points2: string | Array<any>;
   arrowPoints: any;
-  renderChartContent: any;
-  remainingScrollViewProps: any;
+  renderChartContent?: any;
+  remainingScrollViewProps?: any;
 
   width: number | undefined;
   horizSections: HorizSectionsType;
@@ -253,6 +253,9 @@ export type BarAndLineChartsWrapperTypes = {
   pointerY: number;
 
   scrollEventThrottle: number;
+
+  endReached?: () => void;
+  startReached?: () => void;
 };
 
 export type Pointer = {