@harveylx/react-native-gifted-charts 1.4.731 → 1.4.733

package/dist/Components/BarAndLineChartsWrapper/index.js

@@ -27,10 +27,10 @@ var isCloseToLeft = function (_a, endReachedOffset) {
         contentSize.width - endReachedOffset);
 };
 var BarAndLineChartsWrapper = function (props) {
-    var _a, _b, _c, _d, _e;
-    var chartType = props.chartType, containerHeight = props.containerHeight, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, stepHeight = props.stepHeight, labelsExtraHeight = props.labelsExtraHeight, yAxisLabelWidth = props.yAxisLabelWidth, horizontal = props.horizontal, scrollRef = props.scrollRef, initialSpacing = props.initialSpacing, data = props.data, barWidth = props.barWidth, xAxisThickness = props.xAxisThickness, totalWidth = props.totalWidth, disableScroll = props.disableScroll, showScrollIndicator = props.showScrollIndicator, scrollToEnd = props.scrollToEnd, scrollToIndex = props.scrollToIndex, scrollAnimation = props.scrollAnimation, indicatorColor = props.indicatorColor, spacing = props.spacing, renderChartContent = props.renderChartContent, remainingScrollViewProps = props.remainingScrollViewProps, endSpacing = props.endSpacing, hideAxesAndRules = props.hideAxesAndRules, showXAxisIndices = props.showXAxisIndices, xAxisIndicesHeight = props.xAxisIndicesHeight, xAxisIndicesWidth = props.xAxisIndicesWidth, xAxisIndicesColor = props.xAxisIndicesColor, pointerConfig = props.pointerConfig, getPointerProps = props.getPointerProps, pointerIndex = props.pointerIndex, pointerX = props.pointerX, pointerY = props.pointerY, onEndReached = props.onEndReached, onStartReached = props.onStartReached, endReachedOffset = props.endReachedOffset, onMomentumScrollEnd = props.onMomentumScrollEnd, onScrollEndDrag = props.onScrollEndDrag, nestedScrollEnabled = props.nestedScrollEnabled, _f = props.extraWidthDueToDataPoint, extraWidthDueToDataPoint = _f === void 0 ? 0 : _f, // extraWidthDueToDataPoint will be receved from props onlhy in case of LineCharts, for other charts it will be undefined and will default to 0
-    showBackgroundSlices = props.showBackgroundSlices;
-    var _g = useBarAndLineChartsWrapper(__assign(__assign({}, props), { isRTL: I18nManager.isRTL })), containerHeightIncludingBelowXAxis = _g.containerHeightIncludingBelowXAxis, xAxisLabelsVerticalShift = _g.xAxisLabelsVerticalShift, trimYAxisAtTop = _g.trimYAxisAtTop, yAxisExtraHeight = _g.yAxisExtraHeight, overflowTop = _g.overflowTop, xAxisLabelsHeight = _g.xAxisLabelsHeight, xAxisTextNumberOfLines = _g.xAxisTextNumberOfLines, actualContainerWidth = _g.actualContainerWidth, transformForHorizontal = _g.transformForHorizontal, horizSectionProps = _g.horizSectionProps, referenceLinesOverChartContent = _g.referenceLinesOverChartContent, setCanMomentum = _g.setCanMomentum, isCloseToStart = _g.isCloseToStart, isCloseToEnd = _g.isCloseToEnd, canMomentum = _g.canMomentum, yAxisAtTop = _g.yAxisAtTop, yAxisThickness = _g.yAxisThickness, yAxisSide = _g.yAxisSide, showVerticalLines = _g.showVerticalLines, verticalLinesProps = _g.verticalLinesProps;
+    var _a, _b, _c, _d, _e, _f;
+    var chartType = props.chartType, containerHeight = props.containerHeight, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, stepHeight = props.stepHeight, labelsExtraHeight = props.labelsExtraHeight, yAxisLabelWidth = props.yAxisLabelWidth, horizontal = props.horizontal, scrollRef = props.scrollRef, initialSpacing = props.initialSpacing, data = props.data, barWidth = props.barWidth, xAxisThickness = props.xAxisThickness, totalWidth = props.totalWidth, disableScroll = props.disableScroll, showScrollIndicator = props.showScrollIndicator, scrollToEnd = props.scrollToEnd, scrollToIndex = props.scrollToIndex, scrollAnimation = props.scrollAnimation, indicatorColor = props.indicatorColor, spacing = props.spacing, renderChartContent = props.renderChartContent, remainingScrollViewProps = props.remainingScrollViewProps, endSpacing = props.endSpacing, hideAxesAndRules = props.hideAxesAndRules, showXAxisIndices = props.showXAxisIndices, xAxisIndicesHeight = props.xAxisIndicesHeight, xAxisIndicesWidth = props.xAxisIndicesWidth, xAxisIndicesColor = props.xAxisIndicesColor, pointerConfig = props.pointerConfig, getPointerProps = props.getPointerProps, pointerIndex = props.pointerIndex, pointerX = props.pointerX, pointerY = props.pointerY, onEndReached = props.onEndReached, onStartReached = props.onStartReached, endReachedOffset = props.endReachedOffset, onMomentumScrollEnd = props.onMomentumScrollEnd, onScrollEndDrag = props.onScrollEndDrag, nestedScrollEnabled = props.nestedScrollEnabled, _g = props.extraWidthDueToDataPoint, extraWidthDueToDataPoint = _g === void 0 ? 0 : _g, // extraWidthDueToDataPoint will be receved from props onlhy in case of LineCharts, for other charts it will be undefined and will default to 0
+    backgroundSlices = props.backgroundSlices;
+    var _h = useBarAndLineChartsWrapper(__assign(__assign({}, props), { isRTL: I18nManager.isRTL })), containerHeightIncludingBelowXAxis = _h.containerHeightIncludingBelowXAxis, xAxisLabelsVerticalShift = _h.xAxisLabelsVerticalShift, trimYAxisAtTop = _h.trimYAxisAtTop, yAxisExtraHeight = _h.yAxisExtraHeight, overflowTop = _h.overflowTop, xAxisLabelsHeight = _h.xAxisLabelsHeight, xAxisTextNumberOfLines = _h.xAxisTextNumberOfLines, actualContainerWidth = _h.actualContainerWidth, transformForHorizontal = _h.transformForHorizontal, horizSectionProps = _h.horizSectionProps, referenceLinesOverChartContent = _h.referenceLinesOverChartContent, setCanMomentum = _h.setCanMomentum, isCloseToStart = _h.isCloseToStart, isCloseToEnd = _h.isCloseToEnd, canMomentum = _h.canMomentum, yAxisAtTop = _h.yAxisAtTop, yAxisThickness = _h.yAxisThickness, yAxisSide = _h.yAxisSide, showVerticalLines = _h.showVerticalLines, verticalLinesProps = _h.verticalLinesProps;
     useEffect(function () {
         if (pointerConfig && getPointerProps) {
             getPointerProps({ pointerIndex: pointerIndex, pointerX: pointerX, pointerY: pointerY });
@@ -128,7 +128,7 @@ var BarAndLineChartsWrapper = function (props) {
                             animated: scrollAnimation,
                         });
                     }
-                } }, remainingScrollViewProps, { children: _jsxs(Fragment, { children: [showBackgroundSlices && chartType === chartTypes.LINE ? (_jsx(View, { style: {
+                } }, remainingScrollViewProps, { children: _jsxs(Fragment, { children: [(backgroundSlices === null || backgroundSlices === void 0 ? void 0 : backgroundSlices.length) && chartType === chartTypes.LINE ? (_jsx(View, { style: {
                                 position: 'absolute',
                                 bottom: 61 + xAxisLabelsVerticalShift,
                                 left: initialSpacing,
@@ -136,7 +136,8 @@ var BarAndLineChartsWrapper = function (props) {
                                 width: totalWidth,
                                 zIndex: -1,
                             }, children: renderBackgroundSlices({
-                                data: data || [],
+                                backgroundSlices: backgroundSlices,
+                                dataLength: (_f = data === null || data === void 0 ? void 0 : data.length) !== null && _f !== void 0 ? _f : 0,
                                 endSpacing: endSpacing,
                                 totalWidth: totalWidth,
                             }) })) : null, showVerticalLines ? (_jsx(RenderVerticalLines, __assign({}, verticalLinesProps))) : null, 

package/dist/Components/BarAndLineChartsWrapper/renderBackgroundSlices.d.ts

@@ -1,7 +1,9 @@
+import { BackgroundSlice } from '@harveylx/gifted-charts-core';
 interface RenderBackgroundSlicesProps {
-    data: any[];
+    backgroundSlices: BackgroundSlice[];
+    dataLength: number;
     endSpacing?: number;
     totalWidth: number;
 }
-export declare const renderBackgroundSlices: (props: RenderBackgroundSlicesProps) => (import("react/jsx-runtime").JSX.Element | null)[] | null;
+export declare const renderBackgroundSlices: (props: RenderBackgroundSlicesProps) => import("react/jsx-runtime").JSX.Element[] | null;
 export {};

package/dist/Components/BarAndLineChartsWrapper/renderBackgroundSlices.js

@@ -1,30 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { View } from 'react-native';
+import { View, PixelRatio } from 'react-native';
 export var renderBackgroundSlices = function (props) {
-    var data = props.data, totalWidth = props.totalWidth, _a = props.endSpacing, endSpacing = _a === void 0 ? 0 : _a;
-    if (!data || data.length === 0) {
+    var backgroundSlices = props.backgroundSlices, dataLength = props.dataLength, totalWidth = props.totalWidth, _a = props.endSpacing, endSpacing = _a === void 0 ? 0 : _a;
+    if (!backgroundSlices.length || dataLength === 0) {
         return null;
     }
-    // Calculate total chart width
     var totalChartWidth = totalWidth - endSpacing;
-    // Each slice gets equal width based on TOTAL data length (not filtered)
-    var sliceWidth = totalChartWidth / data.length;
-    // Map over ALL data items, preserving original index positions
-    return data.map(function (item, index) {
-        // Skip rendering if no background slice color specified
-        if (!item.backgroundSliceColor) {
-            return null;
-        }
-        // Use original data index for position
+    var unitWidth = totalChartWidth / dataLength;
+    return backgroundSlices.map(function (slice, i) {
+        var left = PixelRatio.roundToNearestPixel(unitWidth * slice.from);
+        var right = PixelRatio.roundToNearestPixel(unitWidth * slice.to);
         return (_jsx(View, { style: {
                 position: 'absolute',
-                left: sliceWidth * index,
+                left: left,
                 top: 0,
                 bottom: 0,
-                width: sliceWidth,
-                backgroundColor: item.backgroundSliceColor,
+                width: right - left,
+                backgroundColor: slice.color,
                 zIndex: -100,
                 opacity: 1,
-            } }, "bg-slice-".concat(item.id, "-").concat(index)));
+            } }, "bg-slice-".concat(i)));
     });
 };

package/dist/LineChart/index.js

@@ -1137,5 +1137,5 @@ export var LineChart = function (props) {
                         pointerConfig.dynamicLegendContainerStyle,
                     ], children: pointerConfig.dynamicLegendComponent(pointerItemLocal, pointerIndex) })) : null] }));
     };
-    return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { dataSet: dataSet, scrollRef: scrollRef, animatedWidth: widthValue, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps, nestedScrollEnabled: props.nestedScrollEnabled, showBackgroundSlices: props.showBackgroundSlices })));
+    return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { dataSet: dataSet, scrollRef: scrollRef, animatedWidth: widthValue, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps, nestedScrollEnabled: props.nestedScrollEnabled, backgroundSlices: props.backgroundSlices })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harveylx/react-native-gifted-charts",
-  "version": "1.4.731",
+  "version": "1.4.733",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid and Radar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "dist/index.js",
   "files": [
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@react-native/babel-preset": "^0.76.9",
-    "@harveylx/gifted-charts-core": "0.1.731"
+    "@harveylx/gifted-charts-core": "0.1.733"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",