gifted-charts-core 0.1.11 → 0.1.13

package/package.json

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

package/src/BarChart/index.js

@@ -111,12 +111,12 @@ export var useBarChart = function (props) {
     var scrollAnimation = (_t = props.scrollAnimation) !== null && _t !== void 0 ? _t : BarDefaults.scrollAnimation;
     var scrollEventThrottle = (_u = props.scrollEventThrottle) !== null && _u !== void 0 ? _u : BarDefaults.scrollEventThrottle;
     var labelsExtraHeight = (_v = props.labelsExtraHeight) !== null && _v !== void 0 ? _v : AxesAndRulesDefaults.labelsExtraHeight;
-    var totalWidth = initialSpacing;
+    var totalWidth = initialSpacing + endSpacing;
     var maxItem = 0;
     var minItem = 0;
     if (props.stackData) {
-        props.stackData.forEach(function (stackItem) {
-            var _a, _b;
+        props.stackData.forEach(function (stackItem, index) {
+            var _a, _b, _c;
             var stackSumMax = stackItem.stacks.reduce(function (acc, stack) { return acc + (stack.value >= 0 ? stack.value : 0); }, 0);
             var stackSumMin = stackItem.stacks.reduce(function (acc, stack) { return acc + (stack.value < 0 ? stack.value : 0); }, 0);
             if (stackSumMax > maxItem) {
@@ -127,11 +127,11 @@ export var useBarChart = function (props) {
             }
             totalWidth +=
                 ((_b = (_a = stackItem.stacks[0].barWidth) !== null && _a !== void 0 ? _a : props.barWidth) !== null && _b !== void 0 ? _b : defaultBarWidth) +
-                    spacing;
+                    (index === data.length - 1 ? 0 : (_c = stackItem.spacing) !== null && _c !== void 0 ? _c : spacing);
         });
     }
     else {
-        data.forEach(function (item) {
+        data.forEach(function (item, index) {
             var _a, _b, _c;
             if (item.value > maxItem) {
                 maxItem = item.value;
@@ -141,7 +141,7 @@ export var useBarChart = function (props) {
             }
             totalWidth +=
                 ((_b = (_a = item.barWidth) !== null && _a !== void 0 ? _a : props.barWidth) !== null && _b !== void 0 ? _b : defaultBarWidth) +
-                    ((_c = item.spacing) !== null && _c !== void 0 ? _c : spacing);
+                    (index === data.length - 1 ? spacing : (_c = item.spacing) !== null && _c !== void 0 ? _c : spacing);
         });
     }
     var secondaryMaxItem = 0;
@@ -391,7 +391,7 @@ export var useBarChart = function (props) {
     });
     var animatedWidth = widthValue === null || widthValue === void 0 ? void 0 : widthValue.interpolate({
         inputRange: [0, 1],
-        outputRange: [0, initialSpacing + totalWidth + endSpacing]
+        outputRange: [0, initialSpacing + totalWidth]
     });
     var getPropsCommonForBarAndStack = function (item, index) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;

package/src/BarChart/index.ts

@@ -167,11 +167,11 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
   const labelsExtraHeight =
     props.labelsExtraHeight ?? AxesAndRulesDefaults.labelsExtraHeight
 
-  let totalWidth = initialSpacing
+  let totalWidth = initialSpacing + endSpacing
   let maxItem = 0
   let minItem = 0
   if (props.stackData) {
-    props.stackData.forEach((stackItem) => {
+    props.stackData.forEach((stackItem, index) => {
       const stackSumMax = stackItem.stacks.reduce(
         (acc, stack) => acc + (stack.value >= 0 ? stack.value : 0),
         0
@@ -190,10 +190,10 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
       }
       totalWidth +=
         (stackItem.stacks[0].barWidth ?? props.barWidth ?? defaultBarWidth) +
-        spacing
+        (index === data.length - 1 ? 0 : stackItem.spacing ?? spacing)
     })
   } else {
-    data.forEach((item: barDataItem) => {
+    data.forEach((item: barDataItem, index) => {
       if (item.value > maxItem) {
         maxItem = item.value
       }
@@ -202,7 +202,7 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
       }
       totalWidth +=
         (item.barWidth ?? props.barWidth ?? defaultBarWidth) +
-        (item.spacing ?? spacing)
+        (index === data.length - 1 ? spacing : item.spacing ?? spacing)
     })
   }
 
@@ -632,7 +632,7 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
 
   const animatedWidth = widthValue?.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, initialSpacing + totalWidth + endSpacing]
+    outputRange: [0, initialSpacing + totalWidth]
   })
 
   const getPropsCommonForBarAndStack = (item: any, index: number) => {

package/src/LineChart/LineChartBiColor.js

@@ -81,17 +81,17 @@ export var useLineChartBiColor = function (props) {
     var areaChart = (_w = props.areaChart) !== null && _w !== void 0 ? _w : false;
     var textFontSize1 = (_x = props.textFontSize) !== null && _x !== void 0 ? _x : LineDefaults.textFontSize;
     var textColor1 = (_y = props.textColor) !== null && _y !== void 0 ? _y : LineDefaults.textColor;
-    var totalWidth = initialSpacing;
+    var totalWidth = initialSpacing + endSpacing;
     var maxItem = 0;
     var minItem = 0;
-    data.forEach(function (item) {
+    data.forEach(function (item, index) {
         if (item.value > maxItem) {
             maxItem = item.value;
         }
         if (item.value < minItem) {
             minItem = item.value;
         }
-        totalWidth += spacing;
+        totalWidth += index === data.length - 1 ? 0 : spacing;
     });
     if ((_z = props.showFractionalValues) !== null && _z !== void 0 ? _z : props.roundToDigits) {
         maxItem *= 10 * ((_0 = props.roundToDigits) !== null && _0 !== void 0 ? _0 : 1);

package/src/LineChart/LineChartBiColor.ts

@@ -99,17 +99,17 @@ export const useLineChartBiColor = (
   const textFontSize1 = props.textFontSize ?? LineDefaults.textFontSize
   const textColor1 = props.textColor ?? LineDefaults.textColor
 
-  let totalWidth = initialSpacing
+  let totalWidth = initialSpacing + endSpacing
   let maxItem = 0
   let minItem = 0
-  data.forEach((item: bicolorLineDataItem) => {
+  data.forEach((item: bicolorLineDataItem, index) => {
     if (item.value > maxItem) {
       maxItem = item.value
     }
     if (item.value < minItem) {
       minItem = item.value
     }
-    totalWidth += spacing
+    totalWidth += index === data.length - 1 ? 0 : spacing
   })
 
   if (props.showFractionalValues ?? props.roundToDigits) {

package/src/LineChart/index.js

@@ -233,7 +233,7 @@ export var useLineChart = function (props) {
     var textColor3 = (_93 = (_92 = props.textColor3) !== null && _92 !== void 0 ? _92 : props.textColor) !== null && _93 !== void 0 ? _93 : LineDefaults.textColor;
     var textColor4 = (_95 = (_94 = props.textColor4) !== null && _94 !== void 0 ? _94 : props.textColor) !== null && _95 !== void 0 ? _95 : LineDefaults.textColor;
     var textColor5 = (_97 = (_96 = props.textColor5) !== null && _96 !== void 0 ? _96 : props.textColor) !== null && _97 !== void 0 ? _97 : LineDefaults.textColor;
-    var totalWidth = initialSpacing + spacing * (data0 !== null && data0 !== void 0 ? data0 : data).length;
+    var totalWidth = initialSpacing + spacing * (data0 !== null && data0 !== void 0 ? data0 : data).length - 1 + endSpacing;
     var _339 = computeMaxAndMinItems(data0 !== null && data0 !== void 0 ? data0 : data, props.roundToDigits, props.showFractionalValues), maxItem = _339.maxItem, minItem = _339.minItem;
     var maxValue = getMaxValue(props.maxValue, props.stepValue, noOfSections, maxItem);
     var mostNegativeValue = (_98 = props.mostNegativeValue) !== null && _98 !== void 0 ? _98 : minItem;
@@ -253,6 +253,9 @@ export var useLineChart = function (props) {
         animations.forEach(function (item, index) {
             item.addListener(function (val) {
                 var _a, _b, _c, _d, _e, _f, _g, _h;
+                if (typeof data[index] === 'undefined') {
+                    return;
+                }
                 var temp = (_b = (_a = data[index]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 0;
                 data[index].value = (_c = val === null || val === void 0 ? void 0 : val.value) !== null && _c !== void 0 ? _c : 0;
                 var pp = '';

package/src/LineChart/index.ts

@@ -428,7 +428,8 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
   const textColor5 =
     props.textColor5 ?? props.textColor ?? LineDefaults.textColor
 
-  const totalWidth = initialSpacing + spacing * (data0 ?? data).length
+  const totalWidth =
+    initialSpacing + spacing * (data0 ?? data).length - 1 + endSpacing
 
   const { maxItem, minItem } = computeMaxAndMinItems(
     data0 ?? data,
@@ -469,6 +470,10 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
   if (animateOnDataChange && animations) {
     animations.forEach((item, index) => {
       item.addListener((val) => {
+        if (typeof data[index] === 'undefined') {
+          return
+        }
+
         const temp = data[index]?.value ?? 0
         data[index].value = val?.value ?? 0
         let pp = ''

package/src/PieChart/index.js

@@ -17,14 +17,18 @@ var __read = (this && this.__read) || function (o, n) {
 import { useEffect, useState } from 'react';
 import { getTextSizeForPieLabels } from '../utils';
 export var usePieChart = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     var radius = (_a = props.radius) !== null && _a !== void 0 ? _a : 120;
     var extraRadiusForFocused = (_b = props.extraRadiusForFocused) !== null && _b !== void 0 ? _b : (((_c = props.focusOnPress) !== null && _c !== void 0 ? _c : props.sectionAutoFocus) ? radius / 10 : 0);
     var pi = props.semiCircle ? Math.PI / 2 : Math.PI;
-    var _v = __read(useState(-1), 2), selectedIndex = _v[0], setSelectedIndex = _v[1]; // at the start, nothing is selected
+    var _w = __read(useState((_d = props.focusedPieIndex) !== null && _d !== void 0 ? _d : -1), 2), selectedIndex = _w[0], setSelectedIndex = _w[1]; // at the start, nothing is selected
     // because we're going to use a useEffect, we need startAngle and total to be state variables
-    var _w = __read(useState((_d = props.initialAngle) !== null && _d !== void 0 ? _d : (props.semiCircle ? -pi : 0)), 2), startAngle = _w[0], setStartAngle = _w[1];
-    var _x = __read(useState(0), 2), total = _x[0], setTotal = _x[1];
+    var _x = __read(useState((_e = props.initialAngle) !== null && _e !== void 0 ? _e : (props.semiCircle ? -pi : 0)), 2), startAngle = _x[0], setStartAngle = _x[1];
+    var _y = __read(useState(0), 2), total = _y[0], setTotal = _y[1];
+    useEffect(function () {
+        var _a;
+        setSelectedIndex((_a = props.focusedPieIndex) !== null && _a !== void 0 ? _a : -1);
+    }, [props.focusedPieIndex]);
     useEffect(function () {
         var _a;
         // Update the total, this could be use to replace the forEach : const newTotal = props.data.reduce((acc, item) => acc + item.value, 0);
@@ -63,30 +67,30 @@ export var usePieChart = function (props) {
             }
         }
     }, [selectedIndex]);
-    var pro = props.pro, data = props.data, donut = props.donut, isThreeD = props.isThreeD, semiCircle = props.semiCircle, _y = props.inwardExtraLengthForFocused, inwardExtraLengthForFocused = _y === void 0 ? 0 : _y, _z = props.isAnimated, isAnimated = _z === void 0 ? false : _z, edgesRadius = props.edgesRadius;
-    var endAngle = (_e = props.endAngle) !== null && _e !== void 0 ? _e : startAngle + Math.PI * (semiCircle ? 1 : 2);
+    var pro = props.pro, data = props.data, donut = props.donut, isThreeD = props.isThreeD, semiCircle = props.semiCircle, _z = props.inwardExtraLengthForFocused, inwardExtraLengthForFocused = _z === void 0 ? 0 : _z, _0 = props.isAnimated, isAnimated = _0 === void 0 ? false : _0, edgesRadius = props.edgesRadius;
+    var endAngle = (_f = props.endAngle) !== null && _f !== void 0 ? _f : startAngle + Math.PI * (semiCircle ? 1 : 2);
     var canvasWidth = radius * 2;
     var canvasHeight = isThreeD ? radius * 2.3 : radius * 2;
-    var strokeWidth = (_f = props.strokeWidth) !== null && _f !== void 0 ? _f : 0;
-    var innerRadius = (_g = props.innerRadius) !== null && _g !== void 0 ? _g : radius / 2.5;
-    var innerCircleColor = (_j = (_h = props.innerCircleColor) !== null && _h !== void 0 ? _h : props.backgroundColor) !== null && _j !== void 0 ? _j : 'white';
-    var innerCircleBorderWidth = (_k = props.innerCircleBorderWidth) !== null && _k !== void 0 ? _k : (props.innerCircleBorderColor ? strokeWidth || 2 : 0);
-    var innerCircleBorderColor = (_l = props.innerCircleBorderColor) !== null && _l !== void 0 ? _l : 'lightgray';
-    var shiftInnerCenterX = (_m = props.shiftInnerCenterX) !== null && _m !== void 0 ? _m : 0;
-    var shiftInnerCenterY = (_o = props.shiftInnerCenterY) !== null && _o !== void 0 ? _o : 0;
-    var tiltAngle = (_p = props.tiltAngle) !== null && _p !== void 0 ? _p : '55deg';
+    var strokeWidth = (_g = props.strokeWidth) !== null && _g !== void 0 ? _g : 0;
+    var innerRadius = (_h = props.innerRadius) !== null && _h !== void 0 ? _h : radius / 2.5;
+    var innerCircleColor = (_k = (_j = props.innerCircleColor) !== null && _j !== void 0 ? _j : props.backgroundColor) !== null && _k !== void 0 ? _k : 'white';
+    var innerCircleBorderWidth = (_l = props.innerCircleBorderWidth) !== null && _l !== void 0 ? _l : (props.innerCircleBorderColor ? strokeWidth || 2 : 0);
+    var innerCircleBorderColor = (_m = props.innerCircleBorderColor) !== null && _m !== void 0 ? _m : 'lightgray';
+    var shiftInnerCenterX = (_o = props.shiftInnerCenterX) !== null && _o !== void 0 ? _o : 0;
+    var shiftInnerCenterY = (_p = props.shiftInnerCenterY) !== null && _p !== void 0 ? _p : 0;
+    var tiltAngle = (_q = props.tiltAngle) !== null && _q !== void 0 ? _q : '55deg';
     var isDataShifted = false;
     data.forEach(function (item) {
         if (item.shiftX || item.shiftY) {
             isDataShifted = true;
         }
     });
-    var textSize = getTextSizeForPieLabels((_q = props.textSize) !== null && _q !== void 0 ? _q : 0, radius);
-    var paddingHorizontal = ((_r = props.paddingHorizontal) !== null && _r !== void 0 ? _r : props.labelsPosition === 'onBorder')
-        ? ((_s = props.textBackgroundRadius) !== null && _s !== void 0 ? _s : textSize) * 2 + 6
+    var textSize = getTextSizeForPieLabels((_r = props.textSize) !== null && _r !== void 0 ? _r : 0, radius);
+    var paddingHorizontal = ((_s = props.paddingHorizontal) !== null && _s !== void 0 ? _s : props.labelsPosition === 'onBorder')
+        ? ((_t = props.textBackgroundRadius) !== null && _t !== void 0 ? _t : textSize) * 2 + 6
         : 0;
-    var paddingVertical = ((_t = props.paddingVertical) !== null && _t !== void 0 ? _t : props.labelsPosition === 'onBorder')
-        ? ((_u = props.textBackgroundRadius) !== null && _u !== void 0 ? _u : textSize) * 2 + 6
+    var paddingVertical = ((_u = props.paddingVertical) !== null && _u !== void 0 ? _u : props.labelsPosition === 'onBorder')
+        ? ((_v = props.textBackgroundRadius) !== null && _v !== void 0 ? _v : textSize) * 2 + 6
         : 0;
     return {
         radius: radius,

package/src/PieChart/index.ts

@@ -44,13 +44,19 @@ export const usePieChart = (props: IPieChartPropsType): IusePieChart => {
     props.extraRadiusForFocused ??
     (props.focusOnPress ?? props.sectionAutoFocus ? radius / 10 : 0)
   const pi = props.semiCircle ? Math.PI / 2 : Math.PI
-  const [selectedIndex, setSelectedIndex] = useState(-1) // at the start, nothing is selected
+  const [selectedIndex, setSelectedIndex] = useState(
+    props.focusedPieIndex ?? -1
+  ) // at the start, nothing is selected
   // because we're going to use a useEffect, we need startAngle and total to be state variables
   const [startAngle, setStartAngle] = useState(
     props.initialAngle ?? (props.semiCircle ? -pi : 0)
   )
   const [total, setTotal] = useState(0)
 
+  useEffect(() => {
+    setSelectedIndex(props.focusedPieIndex ?? -1)
+  }, [props.focusedPieIndex])
+
   useEffect(() => {
     // Update the total, this could be use to replace the forEach : const newTotal = props.data.reduce((acc, item) => acc + item.value, 0);
     let newTotal = 0

package/src/PieChart/types.d.ts

@@ -58,6 +58,7 @@ export interface PieChartPropsType {
     edgesRadius?: number;
     isAnimated?: boolean;
     animationDuration?: number;
+    focusedPieIndex?: number;
 }
 export interface pieDataItem {
     value: number;

package/src/PieChart/types.ts

@@ -61,6 +61,7 @@ export interface PieChartPropsType {
   edgesRadius?: number
   isAnimated?: boolean
   animationDuration?: number
+  focusedPieIndex?: number
 }
 export interface pieDataItem {
   value: number

package/src/components/BarAndLineChartsWrapper/getHorizSectionsVals.js

@@ -112,7 +112,7 @@ export var getHorizSectionVals = function (props) {
     var showReferenceLine1 = referenceLinesConfig.showReferenceLine1, referenceLine1Position = referenceLinesConfig.referenceLine1Position, referenceLine1Config = referenceLinesConfig.referenceLine1Config, showReferenceLine2 = referenceLinesConfig.showReferenceLine2, referenceLine2Position = referenceLinesConfig.referenceLine2Position, referenceLine2Config = referenceLinesConfig.referenceLine2Config, showReferenceLine3 = referenceLinesConfig.showReferenceLine3, referenceLine3Position = referenceLinesConfig.referenceLine3Position, referenceLine3Config = referenceLinesConfig.referenceLine3Config;
     var defaultReferenceConfig = {
         thickness: rulesThickness,
-        width: (width || totalWidth - spacing) + endSpacing,
+        width: (width || totalWidth - endSpacing) + endSpacing,
         color: 'black',
         type: rulesType,
         dashWidth: dashWidth,

package/src/components/BarAndLineChartsWrapper/getHorizSectionsVals.ts

@@ -228,7 +228,7 @@ export const getHorizSectionVals = (props: horizSectionPropTypes) => {
 
   const defaultReferenceConfig = {
     thickness: rulesThickness,
-    width: (width || totalWidth - spacing) + endSpacing,
+    width: (width || totalWidth - endSpacing) + endSpacing,
     color: 'black',
     type: rulesType,
     dashWidth,

package/src/components/BarAndLineChartsWrapper/index.js

@@ -91,6 +91,7 @@ export var useBarAndLineChartsWrapper = function (props) {
     var verticalLinesAr = noOfVerticalLines
         ? __spreadArray([], __read(Array(noOfVerticalLines).keys()), false) : __spreadArray([], __read(Array(stackData ? stackData.length : data.length).keys()), false);
     var horizSectionProps = {
+        chartType: chartType,
         width: width,
         horizSections: horizSections,
         noOfSectionsBelowXAxis: noOfSectionsBelowXAxis,

package/src/components/BarAndLineChartsWrapper/index.ts

@@ -168,6 +168,7 @@ export const useBarAndLineChartsWrapper = (
     : [...Array(stackData ? stackData.length : data.length).keys()]
 
   const horizSectionProps: horizSectionPropTypes = {
+    chartType,
     width,
     horizSections,
     noOfSectionsBelowXAxis,

package/src/utils/index.js

@@ -544,7 +544,8 @@ export var getAxesAndRulesProps = function (props, stepValue, negativeStepValue,
         formatYLabel: props.formatYLabel
     };
     if (((_c = props.secondaryYAxis) !== null && _c !== void 0 ? _c : (_d = props.lineConfig) === null || _d === void 0 ? void 0 : _d.isSecondary) &&
-        maxValue !== undefined) {
+        maxValue !== undefined &&
+        secondaryYAxis.maxValue === undefined) {
         axesAndRulesProps.secondaryYAxis = __assign(__assign({}, secondaryYAxis), { maxValue: maxValue });
     }
     return axesAndRulesProps;

package/src/utils/index.ts

@@ -743,7 +743,8 @@ export const getAxesAndRulesProps = (
   }
   if (
     (props.secondaryYAxis ?? props.lineConfig?.isSecondary) &&
-    maxValue !== undefined
+    maxValue !== undefined &&
+    secondaryYAxis.maxValue === undefined
   ) {
     axesAndRulesProps.secondaryYAxis = { ...secondaryYAxis, maxValue }
   }

package/src/utils/types.d.ts

@@ -110,6 +110,7 @@ export interface arrowConfigType {
     showArrowBase: boolean;
 }
 export interface horizSectionPropTypes {
+    chartType: chartTypes;
     width: number | undefined;
     horizSections: any[];
     noOfSectionsBelowXAxis: number;

package/src/utils/types.ts

@@ -125,6 +125,7 @@ export interface arrowConfigType {
 }
 
 export interface horizSectionPropTypes {
+  chartType: chartTypes
   width: number | undefined
   horizSections: any[]
   noOfSectionsBelowXAxis: number