gifted-charts-core 0.1.5 → 0.1.6

package/package.json

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

package/src/BarChart/index.d.ts

@@ -3,12 +3,12 @@ import { type lineConfigType, type BarChartPropsType, type barDataItem, type sta
 import { type BarAndLineChartsWrapperTypes, type secondaryYAxisType } from '../utils/types';
 import { type Animated } from 'react-native';
 export interface extendedBarChartPropsType extends BarChartPropsType {
+    parentWidth: number;
     heightValue?: Animated.Value;
     widthValue?: Animated.Value;
     opacValue?: Animated.Value;
     verticalLinesUptoDataPoint?: boolean;
     secondaryYAxis?: secondaryYAxisType | boolean;
-    screenWidth?: number;
 }
 export declare const useBarChart: (props: extendedBarChartPropsType) => {
     lineConfig: lineConfigType;

package/src/BarChart/index.js

@@ -30,11 +30,11 @@ 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, _48 = props.screenWidth, screenWidth = _48 === void 0 ? 300 : _48;
-    var _49 = __read(useState(''), 2), points = _49[0], setPoints = _49[1];
-    var _50 = __read(useState(''), 2), points2 = _50[0], setPoints2 = _50[1];
-    var _51 = __read(useState(''), 2), arrowPoints = _51[0], setArrowPoints = _51[1];
-    var _52 = __read(useState(-1), 2), selectedIndex = _52[0], setSelectedIndex = _52[1];
+    var heightValue = props.heightValue, widthValue = props.widthValue, opacValue = props.opacValue, yAxisOffset = props.yAxisOffset, adjustToWidth = props.adjustToWidth, parentWidth = props.parentWidth;
+    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 showLine = (_a = props.showLine) !== null && _a !== void 0 ? _a : BarDefaults.showLine;
     var data = useMemo(function () {
         if (!props.data) {
@@ -51,11 +51,15 @@ export var useBarChart = function (props) {
     var yAxisLabelWidth = (_b = props.yAxisLabelWidth) !== null && _b !== void 0 ? _b : (props.hideYAxisText
         ? AxesAndRulesDefaults.yAxisEmptyLabelWidth
         : AxesAndRulesDefaults.yAxisLabelWidth);
-    var autoComputedSectionWidth = (screenWidth - yAxisLabelWidth) / (data.length + 1);
-    var autoComputedBarWidth = autoComputedSectionWidth * .6;
-    var defaultBarWidth = adjustToWidth ? autoComputedBarWidth : BarDefaults.barWidth;
+    var autoComputedSectionWidth = props.initialSpacing !== undefined
+        ? (parentWidth - yAxisLabelWidth) / data.length - props.initialSpacing
+        : (parentWidth - yAxisLabelWidth) / (data.length + 0.5);
+    var autoComputedBarWidth = autoComputedSectionWidth * 0.6;
+    var defaultBarWidth = adjustToWidth
+        ? autoComputedBarWidth
+        : BarDefaults.barWidth;
     var barWidth = (_c = props.barWidth) !== null && _c !== void 0 ? _c : defaultBarWidth;
-    var autoComputedSpacing = autoComputedSectionWidth * .4;
+    var autoComputedSpacing = autoComputedSectionWidth * 0.4;
     var spacing = (_d = props.spacing) !== null && _d !== void 0 ? _d : (adjustToWidth ? autoComputedSpacing : BarDefaults.spacing);
     var initialSpacing = (_e = props.initialSpacing) !== null && _e !== void 0 ? _e : spacing;
     var endSpacing = (_f = props.endSpacing) !== null && _f !== void 0 ? _f : spacing;
@@ -119,7 +123,8 @@ export var useBarChart = function (props) {
                 minItem = stackSumMin;
             }
             totalWidth +=
-                ((_b = (_a = stackItem.stacks[0].barWidth) !== null && _a !== void 0 ? _a : props.barWidth) !== null && _b !== void 0 ? _b : defaultBarWidth) + spacing;
+                ((_b = (_a = stackItem.stacks[0].barWidth) !== null && _a !== void 0 ? _a : props.barWidth) !== null && _b !== void 0 ? _b : defaultBarWidth) +
+                    spacing;
         });
     }
     else {
@@ -177,12 +182,12 @@ export var useBarChart = function (props) {
     var barBorderColor = (_13 = props.barBorderColor) !== null && _13 !== void 0 ? _13 : BarDefaults.barBorderColor;
     var extendedContainerHeight = getExtendedContainerHeightWithPadding(containerHeight, 0);
     var containerHeightIncludingBelowXAxis = extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight;
-    var _53 = __read(useState(-1), 2), pointerIndex = _53[0], setPointerIndex = _53[1];
-    var _54 = __read(useState(0), 2), pointerX = _54[0], setPointerX = _54[1];
-    var _55 = __read(useState(0), 2), pointerY = _55[0], setPointerY = _55[1];
-    var _56 = __read(useState(), 2), pointerItem = _56[0], setPointerItem = _56[1];
-    var _57 = __read(useState(0), 2), responderStartTime = _57[0], setResponderStartTime = _57[1];
-    var _58 = __read(useState(false), 2), responderActive = _58[0], setResponderActive = _58[1];
+    var _52 = __read(useState(-1), 2), pointerIndex = _52[0], setPointerIndex = _52[1];
+    var _53 = __read(useState(0), 2), pointerX = _53[0], setPointerX = _53[1];
+    var _54 = __read(useState(0), 2), pointerY = _54[0], setPointerY = _54[1];
+    var _55 = __read(useState(), 2), pointerItem = _55[0], setPointerItem = _55[1];
+    var _56 = __read(useState(0), 2), responderStartTime = _56[0], setResponderStartTime = _56[1];
+    var _57 = __read(useState(false), 2), responderActive = _57[0], setResponderActive = _57[1];
     var pointerConfig = props.pointerConfig;
     var getPointerProps = (_14 = props.getPointerProps) !== null && _14 !== void 0 ? _14 : null;
     var pointerHeight = (_15 = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.height) !== null && _15 !== void 0 ? _15 : defaultPointerConfig.height;

package/src/BarChart/index.ts

@@ -32,16 +32,23 @@ import {
 import { type Animated } from 'react-native'
 
 export interface extendedBarChartPropsType extends BarChartPropsType {
+  parentWidth: number,
   heightValue?: Animated.Value
   widthValue?: Animated.Value
   opacValue?: Animated.Value
   verticalLinesUptoDataPoint?: boolean
   secondaryYAxis?: secondaryYAxisType | boolean
-  screenWidth?: number
 }
 
 export const useBarChart = (props: extendedBarChartPropsType) => {
-  const { heightValue, widthValue, opacValue, yAxisOffset, adjustToWidth, screenWidth=300 } = props
+  const {
+    heightValue,
+    widthValue,
+    opacValue,
+    yAxisOffset,
+    adjustToWidth,
+    parentWidth,
+  } = props
   const [points, setPoints] = useState('')
   const [points2, setPoints2] = useState('')
   const [arrowPoints, setArrowPoints] = useState('')
@@ -66,16 +73,22 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
     (props.hideYAxisText
       ? AxesAndRulesDefaults.yAxisEmptyLabelWidth
       : AxesAndRulesDefaults.yAxisLabelWidth)
-    
-  const autoComputedSectionWidth =  (screenWidth - yAxisLabelWidth) / (data.length + 1)
-  const autoComputedBarWidth = autoComputedSectionWidth * .6
 
-  const defaultBarWidth = adjustToWidth ? autoComputedBarWidth : BarDefaults.barWidth
+  const autoComputedSectionWidth =
+    props.initialSpacing !== undefined
+      ? (parentWidth - yAxisLabelWidth) / data.length - props.initialSpacing
+      : (parentWidth - yAxisLabelWidth) / (data.length + 0.5)
+
+  const autoComputedBarWidth = autoComputedSectionWidth * 0.6
+  const defaultBarWidth = adjustToWidth
+    ? autoComputedBarWidth
+    : BarDefaults.barWidth
   const barWidth = props.barWidth ?? defaultBarWidth
 
-  const autoComputedSpacing = autoComputedSectionWidth * .4
+  const autoComputedSpacing = autoComputedSectionWidth * 0.4
 
-  const spacing = props.spacing ?? ( adjustToWidth ? autoComputedSpacing : BarDefaults.spacing)
+  const spacing =
+    props.spacing ?? (adjustToWidth ? autoComputedSpacing : BarDefaults.spacing)
   const initialSpacing = props.initialSpacing ?? spacing
   const endSpacing = props.endSpacing ?? spacing
   const showFractionalValues =
@@ -93,7 +106,6 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
   const animationDuration =
     props.animationDuration ?? BarDefaults.animationDuration
 
-
   const secondaryData = getSecondaryDataWithOffsetIncluded(
     props.secondaryData,
     props.secondaryYAxis
@@ -168,9 +180,8 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
         minItem = stackSumMin
       }
       totalWidth +=
-        (stackItem.stacks[0].barWidth ??
-          props.barWidth ??
-          defaultBarWidth) + spacing
+        (stackItem.stacks[0].barWidth ?? props.barWidth ?? defaultBarWidth) +
+        spacing
     })
   } else {
     data.forEach((item: barDataItem) => {

package/src/BarChart/types.d.ts

@@ -279,6 +279,7 @@ export interface BarChartPropsType {
     focusBarOnPress?: boolean;
     focusedBarConfig?: FocusedBarConfig;
     adjustToWidth?: boolean;
+    parentWidth?: number;
 }
 export interface FocusedBarConfig {
     color?: ColorValue;
@@ -465,7 +466,7 @@ export interface RenderBarsPropsType {
     spacing: number;
     propSpacing?: number;
     data?: any;
-    barWidth?: number;
+    barWidth: number;
     sideWidth?: number;
     labelWidth?: number;
     isThreeD?: boolean;

package/src/BarChart/types.ts

@@ -315,6 +315,7 @@ export interface BarChartPropsType {
   focusedBarConfig?: FocusedBarConfig
 
   adjustToWidth?: boolean
+  parentWidth?: number
 }
 
 export interface FocusedBarConfig {
@@ -508,7 +509,7 @@ export interface RenderBarsPropsType {
   spacing: number
   propSpacing?: number
   data?: any
-  barWidth?: number
+  barWidth: number
   sideWidth?: number
   labelWidth?: number
 

package/src/LineChart/LineChartBiColor.d.ts

@@ -5,7 +5,10 @@ interface Points {
     points: string;
     color: string;
 }
-export declare const useLineChartBiColor: (props: LineChartBicolorPropsType) => {
+interface extendedLineChartBicolorPropsType extends LineChartBicolorPropsType {
+    parentWidth: number;
+}
+export declare const useLineChartBiColor: (props: extendedLineChartBicolorPropsType) => {
     toggle: boolean;
     setToggle: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     pointsArray: Points[];

package/src/LineChart/LineChartBiColor.ts

@@ -19,7 +19,11 @@ interface Points {
   color: string
 }
 
-export const useLineChartBiColor = (props: LineChartBicolorPropsType) => {
+interface extendedLineChartBicolorPropsType extends LineChartBicolorPropsType {
+  parentWidth: number
+}
+
+export const useLineChartBiColor = (props: extendedLineChartBicolorPropsType) => {
   const [toggle, setToggle] = useState(false)
   const [pointsArray, setPointsArray] = useState<Points[]>([])
   const [fillPointsArray, setFillPointsArray] = useState<Points[]>([])

package/src/LineChart/index.d.ts

@@ -4,7 +4,7 @@ import { type BarAndLineChartsWrapperTypes, EdgePosition, type LineSegment } fro
 import { type Animated } from 'react-native';
 export interface extendedLineChartPropsType extends LineChartPropsType {
     animations?: Animated.Value[];
-    screenWidth: number;
+    parentWidth: number;
 }
 export declare const useLineChart: (props: extendedLineChartPropsType) => {
     curvature: number;

package/src/LineChart/index.js

@@ -31,7 +31,7 @@ import { adjustToOffset, computeMaxAndMinItems, getAllArrowProperties, getArrowP
 import { EdgePosition } from '../utils/types';
 export var useLineChart = 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, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82, _83, _84, _85, _86, _87, _88, _89, _90, _91, _92, _93, _94, _95, _96, _97, _98, _99, _100, _101, _102, _103, _104, _105, _106, _107, _108, _109, _110, _111, _112, _113, _114, _115, _116, _117, _118, _119, _120, _121, _122, _123, _124, _125, _126, _127, _128, _129, _130, _131, _132, _133, _134, _135, _136, _137, _138, _139, _140, _141, _142, _143, _144, _145, _146, _147, _148, _149, _150, _151, _152, _153, _154, _155, _156, _157, _158, _159, _160, _161, _162, _163, _164, _165, _166, _167, _168, _169, _170, _171, _172, _173, _174, _175, _176, _177, _178, _179, _180, _181, _182, _183, _184, _185, _186, _187, _188, _189, _190, _191, _192, _193, _194, _195, _196, _197, _198, _199, _200, _201, _202, _203, _204, _205, _206, _207, _208, _209, _210, _211, _212, _213, _214, _215, _216, _217, _218, _219, _220, _221, _222, _223, _224, _225, _226, _227, _228, _229, _230, _231, _232, _233, _234, _235, _236, _237, _238, _239, _240, _241, _242, _243, _244, _245, _246, _247, _248, _249, _250, _251, _252, _253, _254, _255, _256, _257, _258, _259, _260, _261, _262, _263, _264, _265, _266, _267, _268, _269, _270, _271, _272, _273, _274, _275, _276, _277, _278, _279, _280, _281, _282, _283, _284, _285, _286, _287, _288, _289, _290, _291;
-    var animations = props.animations, showDataPointsForMissingValues = props.showDataPointsForMissingValues, _292 = props.interpolateMissingValues, interpolateMissingValues = _292 === void 0 ? true : _292, onlyPositive = props.onlyPositive, yAxisOffset = props.yAxisOffset, screenWidth = props.screenWidth;
+    var animations = props.animations, showDataPointsForMissingValues = props.showDataPointsForMissingValues, _292 = props.interpolateMissingValues, interpolateMissingValues = _292 === void 0 ? true : _292, onlyPositive = props.onlyPositive, yAxisOffset = props.yAxisOffset, parentWidth = props.parentWidth;
     var curvature = (_a = props.curvature) !== null && _a !== void 0 ? _a : LineDefaults.curvature;
     var curveType = (_b = props.curveType) !== null && _b !== void 0 ? _b : LineDefaults.curveType;
     var _293 = __read(useState(0), 2), scrollX = _293[0], setScrollX = _293[1];
@@ -156,7 +156,7 @@ export var useLineChart = function (props) {
         ? AxesAndRulesDefaults.yAxisEmptyLabelWidth
         : AxesAndRulesDefaults.yAxisLabelWidth);
     var spacing = (_5 = props.spacing) !== null && _5 !== void 0 ? _5 : (adjustToWidth
-        ? (((_6 = props.width) !== null && _6 !== void 0 ? _6 : screenWidth - yAxisLabelWidth) - initialSpacing) /
+        ? (((_6 = props.width) !== null && _6 !== void 0 ? _6 : parentWidth - yAxisLabelWidth) - initialSpacing) /
             Math.max((data0 !== null && data0 !== void 0 ? data0 : data).length - 1, 1)
         : LineDefaults.spacing);
     var xAxisThickness = (_7 = props.xAxisThickness) !== null && _7 !== void 0 ? _7 : AxesAndRulesDefaults.xAxisThickness;

package/src/LineChart/index.ts

@@ -43,7 +43,7 @@ export interface extendedLineChartPropsType extends LineChartPropsType {
   // heightValue: Animated.Value
   // widthValue: Animated.Value
   // opacValue: Animated.Value
-  screenWidth: number
+  parentWidth: number
 }
 
 export const useLineChart = (props: extendedLineChartPropsType) => {
@@ -53,7 +53,7 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
     interpolateMissingValues = true,
     onlyPositive,
     yAxisOffset,
-    screenWidth
+    parentWidth
   } = props
   const curvature = props.curvature ?? LineDefaults.curvature
   const curveType = props.curveType ?? LineDefaults.curveType
@@ -245,7 +245,7 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
   const spacing =
     props.spacing ??
     (adjustToWidth
-      ? ((props.width ?? screenWidth - yAxisLabelWidth) - initialSpacing) /
+      ? ((props.width ?? parentWidth - yAxisLabelWidth) - initialSpacing) /
         Math.max((data0 ?? data).length - 1, 1)
       : LineDefaults.spacing)
 

package/src/LineChart/types.d.ts

@@ -292,6 +292,7 @@ export interface LineChartPropsType {
     showDataPointsForMissingValues?: boolean;
     interpolateMissingValues?: boolean;
     onlyPositive?: boolean;
+    parentWidth?: number;
 }
 export interface lineDataItem {
     value: number;
@@ -522,6 +523,7 @@ export interface LineChartBicolorPropsType {
     formatYLabel?: (label: string) => string;
     onScroll?: Function;
     endReachedOffset?: number;
+    parentWidth?: number;
 }
 export interface IDataSanitisationProps {
     showDataPointsForMissingValues: boolean | undefined;

package/src/LineChart/types.ts

@@ -325,6 +325,7 @@ export interface LineChartPropsType {
   showDataPointsForMissingValues?: boolean
   interpolateMissingValues?: boolean
   onlyPositive?: boolean
+  parentWidth?: number
 }
 
 export interface lineDataItem {
@@ -584,6 +585,7 @@ export interface LineChartBicolorPropsType {
   formatYLabel?: (label: string) => string
   onScroll?: Function
   endReachedOffset?: number
+  parentWidth?: number
 }
 
 export interface IDataSanitisationProps {

package/src/utils/index.js

@@ -531,6 +531,7 @@ export var getAxesAndRulesProps = function (props, stepValue, maxValue) {
         verticalLinesHeight: props.verticalLinesHeight,
         verticalLinesColor: props.verticalLinesColor,
         verticalLinesShift: props.verticalLinesShift,
+        verticalLinesStrokeDashArray: props.verticalLinesStrokeDashArray,
         verticalLinesZIndex: props.verticalLinesZIndex,
         verticalLinesSpacing: props.verticalLinesSpacing,
         noOfVerticalLines: props.noOfVerticalLines,

package/src/utils/index.ts

@@ -711,6 +711,7 @@ export const getAxesAndRulesProps = (
     verticalLinesHeight: props.verticalLinesHeight,
     verticalLinesColor: props.verticalLinesColor,
     verticalLinesShift: props.verticalLinesShift,
+    verticalLinesStrokeDashArray: props.verticalLinesStrokeDashArray,
     verticalLinesZIndex: props.verticalLinesZIndex,
     verticalLinesSpacing: props.verticalLinesSpacing,
     noOfVerticalLines: props.noOfVerticalLines,