gifted-charts-core 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gifted-charts-core",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Mathematical and logical utilities used by react-gifted-charts and react-native-gifted-charts",
   "main": "./src/index.js",
   "files": [

package/src/BarChart/RenderStackBars.js

@@ -17,7 +17,7 @@ var __read = (this && this.__read) || function (o, n) {
 import { useState } from 'react';
 export var useRenderStackBars = function (props) {
     var _a, _b, _c, _d, _e, _f;
-    var item = props.item, index = props.index, containerHeight = props.containerHeight, maxValue = props.maxValue, propSpacing = props.propSpacing, initialSpacing = props.initialSpacing, stackData = props.stackData, isAnimated = props.isAnimated;
+    var item = props.item, index = props.index, containerHeight = props.containerHeight, maxValue = props.maxValue, propSpacing = props.propSpacing, initialSpacing = props.initialSpacing, stackData = props.stackData, isAnimated = props.isAnimated, xAxisThickness = props.xAxisThickness;
     var cotainsNegative = item.stacks.some(function (item) { return item.value < 0; });
     var noAnimation = cotainsNegative || !isAnimated;
     var localBarInnerComponent = (_a = item.barInnerComponent) !== null && _a !== void 0 ? _a : props.barInnerComponent;
@@ -44,7 +44,7 @@ export var useRenderStackBars = function (props) {
         var height = getBarHeight(item.stacks[index].value, item.stacks[index].marginBottom);
         var itemValue = item.stacks[index].value;
         var isNegative = itemValue <= 0;
-        var position = isNegative ? -(height || 0) : 0;
+        var position = isNegative ? -(height || 0) - xAxisThickness : 0;
         for (var i = 0; i < index; i++) {
             var valueOnIndex = item.stacks[i].value;
             if (isNegative && valueOnIndex <= 0) {

package/src/BarChart/RenderStackBars.ts

@@ -10,7 +10,8 @@ export const useRenderStackBars = (props: StackedBarChartPropsType) => {
     propSpacing,
     initialSpacing,
     stackData,
-    isAnimated
+    isAnimated,
+    xAxisThickness
   } = props
   const cotainsNegative = item.stacks.some((item) => item.value < 0)
   const noAnimation = cotainsNegative || !isAnimated
@@ -60,7 +61,7 @@ export const useRenderStackBars = (props: StackedBarChartPropsType) => {
 
     const itemValue = item.stacks[index].value
     const isNegative = itemValue <= 0
-    let position = isNegative ? -(height || 0) : 0
+    let position = isNegative ? -(height || 0) - xAxisThickness : 0
 
     for (let i = 0; i < index; i++) {
       const valueOnIndex = item.stacks[i].value

package/src/BarChart/index.d.ts

@@ -70,6 +70,7 @@ export declare const useBarChart: (props: extendedBarChartPropsType) => {
     xAxisIndicesHeight: number;
     xAxisIndicesWidth: number;
     xAxisIndicesColor: import("react-native").ColorValue;
+    autoShiftLabelsForNegativeStacks: boolean | undefined;
     horizontal: boolean;
     rtl: boolean;
     intactTopLabel: boolean;
@@ -134,6 +135,7 @@ export declare const useBarChart: (props: extendedBarChartPropsType) => {
         xAxisIndicesHeight: number;
         xAxisIndicesWidth: number;
         xAxisIndicesColor: import("react-native").ColorValue;
+        labelsDistanceFromXaxis: any;
         horizontal: boolean;
         rtl: boolean;
         intactTopLabel: boolean;
@@ -174,6 +176,7 @@ export declare const useBarChart: (props: extendedBarChartPropsType) => {
         pointerConfig: import("../utils/types").Pointer | undefined;
         yAxisExtraHeightAtTop: number;
         yAxisOffset: number;
+        focusedBarIndex: number | undefined;
     };
     barAndLineChartsWrapperProps: BarAndLineChartsWrapperTypes;
     yAxisExtraHeightAtTop: number;

package/src/BarChart/index.js

@@ -30,12 +30,15 @@ import { getArrowPoints, getAxesAndRulesProps, getExtendedContainerHeightWithPad
 import { AxesAndRulesDefaults, BarDefaults, chartTypes, defaultLineConfig, defaultPointerConfig } from '../utils/constants';
 export var useBarChart = function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47;
-    var heightValue = props.heightValue, widthValue = props.widthValue, opacValue = props.opacValue, yAxisOffset = props.yAxisOffset, adjustToWidth = props.adjustToWidth, parentWidth = props.parentWidth;
+    var heightValue = props.heightValue, widthValue = props.widthValue, opacValue = props.opacValue, yAxisOffset = props.yAxisOffset, adjustToWidth = props.adjustToWidth, parentWidth = props.parentWidth, labelsDistanceFromXaxis = props.labelsDistanceFromXaxis, autoShiftLabelsForNegativeStacks = props.autoShiftLabelsForNegativeStacks, focusedBarIndex = props.focusedBarIndex;
     var _48 = __read(useState(''), 2), points = _48[0], setPoints = _48[1];
     var _49 = __read(useState(''), 2), points2 = _49[0], setPoints2 = _49[1];
     var _50 = __read(useState(''), 2), arrowPoints = _50[0], setArrowPoints = _50[1];
-    var _51 = __read(useState(-1), 2), selectedIndex = _51[0], setSelectedIndex = _51[1];
+    var _51 = __read(useState(focusedBarIndex !== null && focusedBarIndex !== void 0 ? focusedBarIndex : -1), 2), selectedIndex = _51[0], setSelectedIndex = _51[1];
     var showLine = (_a = props.showLine) !== null && _a !== void 0 ? _a : BarDefaults.showLine;
+    useEffect(function () {
+        setSelectedIndex(focusedBarIndex !== null && focusedBarIndex !== void 0 ? focusedBarIndex : -1);
+    }, [focusedBarIndex]);
     var data = useMemo(function () {
         if (!props.data) {
             return [];
@@ -164,7 +167,7 @@ export var useBarChart = function (props) {
         : maxValue;
     var mostNegativeValue = (_x = props.mostNegativeValue) !== null && _x !== void 0 ? _x : maxAndMin.minItem;
     var stepValue = (_y = props.stepValue) !== null && _y !== void 0 ? _y : maxValue / noOfSections;
-    var noOfSectionsBelowXAxis = (_z = props.noOfSectionsBelowXAxis) !== null && _z !== void 0 ? _z : -mostNegativeValue / stepValue;
+    var noOfSectionsBelowXAxis = (_z = props.noOfSectionsBelowXAxis) !== null && _z !== void 0 ? _z : Math.round(Math.ceil(-mostNegativeValue / stepValue));
     var showScrollIndicator = (_0 = props.showScrollIndicator) !== null && _0 !== void 0 ? _0 : BarDefaults.showScrollIndicator;
     var side = (_1 = props.side) !== null && _1 !== void 0 ? _1 : BarDefaults.side;
     var rotateLabel = (_2 = props.rotateLabel) !== null && _2 !== void 0 ? _2 : AxesAndRulesDefaults.rotateLabel;
@@ -391,7 +394,7 @@ export var useBarChart = function (props) {
         outputRange: [0, initialSpacing + totalWidth + endSpacing]
     });
     var getPropsCommonForBarAndStack = function (item, index) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return {
             key: index,
             item: item,
@@ -409,6 +412,7 @@ export var useBarChart = function (props) {
             xAxisIndicesHeight: xAxisIndicesHeight,
             xAxisIndicesWidth: xAxisIndicesWidth,
             xAxisIndicesColor: xAxisIndicesColor,
+            labelsDistanceFromXaxis: (_d = item.labelsDistanceFromXaxis) !== null && _d !== void 0 ? _d : labelsDistanceFromXaxis,
             horizontal: horizontal,
             rtl: rtl,
             intactTopLabel: intactTopLabel,
@@ -437,18 +441,19 @@ export var useBarChart = function (props) {
             xAxisLabelsHeight: props.xAxisLabelsHeight,
             xAxisLabelsVerticalShift: xAxisLabelsVerticalShift,
             renderTooltip: props.renderTooltip,
-            leftShiftForTooltip: (_d = props.leftShiftForTooltip) !== null && _d !== void 0 ? _d : 0,
+            leftShiftForTooltip: (_e = props.leftShiftForTooltip) !== null && _e !== void 0 ? _e : 0,
             initialSpacing: initialSpacing,
             selectedIndex: selectedIndex,
             setSelectedIndex: setSelectedIndex,
-            activeOpacity: (_e = props.activeOpacity) !== null && _e !== void 0 ? _e : 0.2,
+            activeOpacity: (_f = props.activeOpacity) !== null && _f !== void 0 ? _f : 0.2,
             noOfSectionsBelowXAxis: noOfSectionsBelowXAxis,
-            leftShiftForLastIndexTooltip: (_f = props.leftShiftForLastIndexTooltip) !== null && _f !== void 0 ? _f : 0,
-            label: (_g = item.label) !== null && _g !== void 0 ? _g : (((_h = props.xAxisLabelTexts) === null || _h === void 0 ? void 0 : _h[index]) ? props.xAxisLabelTexts[index] : ''),
-            labelTextStyle: (_j = item.labelTextStyle) !== null && _j !== void 0 ? _j : props.xAxisLabelTextStyle,
+            leftShiftForLastIndexTooltip: (_g = props.leftShiftForLastIndexTooltip) !== null && _g !== void 0 ? _g : 0,
+            label: (_h = item.label) !== null && _h !== void 0 ? _h : (((_j = props.xAxisLabelTexts) === null || _j === void 0 ? void 0 : _j[index]) ? props.xAxisLabelTexts[index] : ''),
+            labelTextStyle: (_k = item.labelTextStyle) !== null && _k !== void 0 ? _k : props.xAxisLabelTextStyle,
             pointerConfig: pointerConfig,
             yAxisExtraHeightAtTop: yAxisExtraHeightAtTop,
-            yAxisOffset: yAxisOffset !== null && yAxisOffset !== void 0 ? yAxisOffset : 0
+            yAxisOffset: yAxisOffset !== null && yAxisOffset !== void 0 ? yAxisOffset : 0,
+            focusedBarIndex: focusedBarIndex
         };
     };
     var barAndLineChartsWrapperProps = {
@@ -577,6 +582,7 @@ export var useBarChart = function (props) {
         xAxisIndicesHeight: xAxisIndicesHeight,
         xAxisIndicesWidth: xAxisIndicesWidth,
         xAxisIndicesColor: xAxisIndicesColor,
+        autoShiftLabelsForNegativeStacks: autoShiftLabelsForNegativeStacks,
         horizontal: horizontal,
         rtl: rtl,
         intactTopLabel: intactTopLabel,

package/src/BarChart/index.ts

@@ -32,7 +32,7 @@ import {
 import { type Animated } from 'react-native'
 
 export interface extendedBarChartPropsType extends BarChartPropsType {
-  parentWidth: number,
+  parentWidth: number
   heightValue?: Animated.Value
   widthValue?: Animated.Value
   opacValue?: Animated.Value
@@ -48,13 +48,20 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
     yAxisOffset,
     adjustToWidth,
     parentWidth,
+    labelsDistanceFromXaxis,
+    autoShiftLabelsForNegativeStacks,
+    focusedBarIndex
   } = props
   const [points, setPoints] = useState('')
   const [points2, setPoints2] = useState('')
   const [arrowPoints, setArrowPoints] = useState('')
-  const [selectedIndex, setSelectedIndex] = useState(-1)
+  const [selectedIndex, setSelectedIndex] = useState(focusedBarIndex ?? -1)
   const showLine = props.showLine ?? BarDefaults.showLine
 
+  useEffect(() => {
+    setSelectedIndex(focusedBarIndex ?? -1)
+  }, [focusedBarIndex])
+
   const data = useMemo(() => {
     if (!props.data) {
       return []
@@ -241,7 +248,8 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
 
   const stepValue = props.stepValue ?? maxValue / noOfSections
   const noOfSectionsBelowXAxis =
-    props.noOfSectionsBelowXAxis ?? -mostNegativeValue / stepValue
+    props.noOfSectionsBelowXAxis ??
+    Math.round(Math.ceil(-mostNegativeValue / stepValue))
   const showScrollIndicator =
     props.showScrollIndicator ?? BarDefaults.showScrollIndicator
   const side = props.side ?? BarDefaults.side
@@ -638,6 +646,8 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
       xAxisIndicesHeight,
       xAxisIndicesWidth,
       xAxisIndicesColor,
+      labelsDistanceFromXaxis:
+        item.labelsDistanceFromXaxis ?? labelsDistanceFromXaxis,
       horizontal,
       rtl,
       intactTopLabel,
@@ -680,7 +690,8 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
       labelTextStyle: item.labelTextStyle ?? props.xAxisLabelTextStyle,
       pointerConfig,
       yAxisExtraHeightAtTop,
-      yAxisOffset: yAxisOffset ?? 0
+      yAxisOffset: yAxisOffset ?? 0,
+      focusedBarIndex
     }
   }
 
@@ -821,6 +832,7 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
     xAxisIndicesHeight,
     xAxisIndicesWidth,
     xAxisIndicesColor,
+    autoShiftLabelsForNegativeStacks,
     horizontal,
     rtl,
     intactTopLabel,

package/src/BarChart/types.d.ts

@@ -9,6 +9,7 @@ export interface stackDataItem {
     onLongPress?: any;
     onPressOut?: any;
     label?: string;
+    labelsDistanceFromXaxis?: number;
     barWidth?: number;
     spacing?: number;
     labelTextStyle?: any;
@@ -59,6 +60,8 @@ export interface StackedBarChartPropsType {
     opacity?: number;
     label: string;
     labelTextStyle?: any;
+    autoShiftLabelsForNegativeStacks?: boolean;
+    labelsDistanceFromXaxis?: number;
     disablePress?: boolean;
     item: stackDataItem;
     index: number;
@@ -255,6 +258,8 @@ export interface BarChartPropsType {
     scrollAnimation?: boolean;
     scrollEventThrottle?: number;
     labelsExtraHeight?: number;
+    labelsDistanceFromXaxis?: number;
+    autoShiftLabelsForNegativeStacks?: boolean;
     barBackgroundPattern?: () => ReactNode;
     patternId?: string;
     barMarginBottom?: number;
@@ -278,6 +283,7 @@ export interface BarChartPropsType {
     onMomentumScrollEnd?: Function;
     focusBarOnPress?: boolean;
     focusedBarConfig?: FocusedBarConfig;
+    focusedBarIndex?: number;
     adjustToWidth?: boolean;
     parentWidth?: number;
 }
@@ -374,6 +380,7 @@ export interface barDataItem {
     showGradient?: boolean;
     gradientColor?: any;
     label?: string;
+    labelsDistanceFromXaxis?: number;
     barWidth?: number;
     sideWidth?: number;
     labelTextStyle?: any;
@@ -472,6 +479,7 @@ export interface RenderBarsPropsType {
     isThreeD?: boolean;
     isAnimated?: boolean;
     rotateLabel?: boolean;
+    labelsDistanceFromXaxis?: number;
     animatedHeight?: any;
     appearingOpacity?: any;
     animationDuration?: number;
@@ -519,6 +527,7 @@ export interface RenderBarsPropsType {
     xAxisThickness?: number;
     pointerConfig?: Pointer;
     focusBarOnPress?: boolean;
+    focusedBarIndex?: number;
     noOfSectionsBelowXAxis?: number;
     yAxisOffset: number;
 }

package/src/BarChart/types.ts

@@ -21,6 +21,7 @@ export interface stackDataItem {
   onLongPress?: any
   onPressOut?: any
   label?: string
+  labelsDistanceFromXaxis?: number
   barWidth?: number
   spacing?: number
   labelTextStyle?: any
@@ -72,6 +73,8 @@ export interface StackedBarChartPropsType {
   opacity?: number
   label: string
   labelTextStyle?: any
+  autoShiftLabelsForNegativeStacks?: boolean
+  labelsDistanceFromXaxis?: number
   disablePress?: boolean
 
   item: stackDataItem
@@ -284,6 +287,8 @@ export interface BarChartPropsType {
   scrollAnimation?: boolean
   scrollEventThrottle?: number
   labelsExtraHeight?: number
+  labelsDistanceFromXaxis?: number
+  autoShiftLabelsForNegativeStacks?: boolean
   barBackgroundPattern?: () => ReactNode
   patternId?: string
   barMarginBottom?: number
@@ -313,6 +318,7 @@ export interface BarChartPropsType {
 
   focusBarOnPress?: boolean
   focusedBarConfig?: FocusedBarConfig
+  focusedBarIndex?: number
 
   adjustToWidth?: boolean
   parentWidth?: number
@@ -414,6 +420,7 @@ export interface barDataItem {
   showGradient?: boolean
   gradientColor?: any
   label?: string
+  labelsDistanceFromXaxis?: number
   barWidth?: number
   sideWidth?: number
   labelTextStyle?: any
@@ -516,6 +523,7 @@ export interface RenderBarsPropsType {
   isThreeD?: boolean
   isAnimated?: boolean
   rotateLabel?: boolean
+  labelsDistanceFromXaxis?: number
   animatedHeight?: any
   appearingOpacity?: any
   animationDuration?: number
@@ -566,6 +574,7 @@ export interface RenderBarsPropsType {
   xAxisThickness?: number
   pointerConfig?: Pointer
   focusBarOnPress?: boolean
+  focusedBarIndex?: number
   noOfSectionsBelowXAxis?: number
   yAxisOffset: number
 }

package/src/LineChart/LineChartBiColor.js

@@ -312,7 +312,7 @@ export var useLineChartBiColor = function (props) {
     var horizSections = [{ value: '0' }];
     var stepHeight = (_8 = props.stepHeight) !== null && _8 !== void 0 ? _8 : containerHeight / noOfSections;
     var stepValue = (_9 = props.stepValue) !== null && _9 !== void 0 ? _9 : maxValue / noOfSections;
-    var noOfSectionsBelowXAxis = (_10 = props.noOfSectionsBelowXAxis) !== null && _10 !== void 0 ? _10 : -mostNegativeValue / stepValue;
+    var noOfSectionsBelowXAxis = (_10 = props.noOfSectionsBelowXAxis) !== null && _10 !== void 0 ? _10 : Math.round(Math.ceil(-mostNegativeValue / stepValue));
     var thickness1 = (_11 = props.thickness) !== null && _11 !== void 0 ? _11 : LineDefaults.thickness;
     var zIndex = (_12 = props.zIndex) !== null && _12 !== void 0 ? _12 : 0;
     var strokeDashArray1 = props.strokeDashArray;

package/src/LineChart/LineChartBiColor.ts

@@ -361,7 +361,8 @@ export const useLineChartBiColor = (
   const stepHeight = props.stepHeight ?? containerHeight / noOfSections
   const stepValue = props.stepValue ?? maxValue / noOfSections
   const noOfSectionsBelowXAxis =
-    props.noOfSectionsBelowXAxis ?? -mostNegativeValue / stepValue
+    props.noOfSectionsBelowXAxis ??
+    Math.round(Math.ceil(-mostNegativeValue / stepValue))
   const thickness1 = props.thickness ?? LineDefaults.thickness
   const zIndex = props.zIndex ?? 0
 

package/src/LineChart/index.js

@@ -901,7 +901,7 @@ export var useLineChart = function (props) {
     var horizSections = [{ value: '0' }];
     var stepHeight = (_237 = props.stepHeight) !== null && _237 !== void 0 ? _237 : containerHeight / noOfSections;
     var stepValue = (_238 = props.stepValue) !== null && _238 !== void 0 ? _238 : maxValue / noOfSections;
-    var noOfSectionsBelowXAxis = (_239 = props.noOfSectionsBelowXAxis) !== null && _239 !== void 0 ? _239 : -mostNegativeValue / (stepValue || 1);
+    var noOfSectionsBelowXAxis = (_239 = props.noOfSectionsBelowXAxis) !== null && _239 !== void 0 ? _239 : Math.round(Math.ceil(-mostNegativeValue / stepValue));
     var showXAxisIndices = (_240 = props.showXAxisIndices) !== null && _240 !== void 0 ? _240 : AxesAndRulesDefaults.showXAxisIndices;
     var xAxisIndicesHeight = (_241 = props.xAxisIndicesHeight) !== null && _241 !== void 0 ? _241 : AxesAndRulesDefaults.xAxisIndicesHeight;
     var xAxisIndicesWidth = (_242 = props.xAxisIndicesWidth) !== null && _242 !== void 0 ? _242 : AxesAndRulesDefaults.xAxisIndicesWidth;

package/src/LineChart/index.ts

@@ -1532,7 +1532,8 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
   const stepHeight = props.stepHeight ?? containerHeight / noOfSections
   const stepValue = props.stepValue ?? maxValue / noOfSections
   const noOfSectionsBelowXAxis =
-    props.noOfSectionsBelowXAxis ?? -mostNegativeValue / (stepValue || 1)
+    props.noOfSectionsBelowXAxis ??
+    Math.round(Math.ceil(-mostNegativeValue / stepValue))
 
   const showXAxisIndices =
     props.showXAxisIndices ?? AxesAndRulesDefaults.showXAxisIndices