@bashem/rn-charts 0.0.2

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 Bashem
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+# rn-simple-charts
+
+Experimental Charts Library
+
+## Installation
+
+
+```sh
+npm install rn-simple-charts
+```
+
+
+## Usage
+
+
+```js
+import { multiply } from 'rn-simple-charts';
+
+// ...
+
+const result = await multiply(3, 7);
+```
+
+
+## Contributing
+
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/lib/module/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+export function multiply(a, b) {
+  return a * b;
+}
+export { default as BarChart } from "./skia/BarChart/BarChart.js";
+export * from "./skia/BarChart/BarChart.js";
+export * from "./skia/PieChart/PieChart.js";
+export * from "./skia/AreaChart/AreaChart.js";
+export * from "./skia/Progress/LinearProgress.js";
+export * from "./skia/RadarChart/RadarChart.js";
+export { default as PieChart } from "./skia/PieChart/PieChart.js";
+export { default as AreaChart } from "./skia/AreaChart/AreaChart.js";
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["multiply","a","b","default","BarChart","PieChart","AreaChart"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAO,SAASA,QAAQA,CAACC,CAAS,EAAEC,CAAS,EAAU;EACrD,OAAOD,CAAC,GAAGC,CAAC;AACd;AAEA,SAASC,OAAO,IAAIC,QAAQ,QAAQ,6BAA0B;AAC9D,cAAc,6BAA0B;AACxC,cAAc,6BAA0B;AACxC,cAAc,+BAA4B;AAC1C,cAAc,mCAAgC;AAC9C,cAAc,iCAA8B;AAC5C,SAASD,OAAO,IAAIE,QAAQ,QAAQ,6BAA0B;AAC9D,SAASF,OAAO,IAAIG,SAAS,QAAQ,+BAA4B","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/module/skia/AreaChart/AreaChart.js

@@ -0,0 +1,122 @@
+"use strict";
+
+// AreaChart.tsx
+import { Canvas, Circle, Group, Path, Text } from '@shopify/react-native-skia';
+import VerticalLabel from "../Common/VerticalLabel.js";
+import { View } from 'react-native';
+import useAreaChart from "./useAreaChart.js";
+import { useState } from 'react';
+import { lighten } from "../../util/colors.js";
+import Popup from "../Popup.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function AreaChart(props) {
+  const {
+    minValue,
+    maxValue,
+    canvasHeight,
+    areaCanvasHeight,
+    labelWidth,
+    chartWidth,
+    paths,
+    xLabelsData,
+    paddingLeft,
+    paddingTop,
+    paddingHorizontal,
+    font,
+    touchLine,
+    touchHandler
+  } = useAreaChart(props);
+  const {
+    style,
+    popupStyle
+  } = props;
+  const [viewOffset, setViewOffset] = useState({
+    x: 0,
+    y: 0
+  });
+  console.log('AreaChart render', {
+    touchLine
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: [style, {
+      flexDirection: 'row'
+    }],
+    ref: view => {
+      view?.measureInWindow((fx, fy) => {
+        setViewOffset(prev => {
+          if (prev.x === fx && prev.y === fy) {
+            return prev;
+          }
+          return {
+            x: fx,
+            y: fy
+          };
+        });
+      });
+    },
+    children: [/*#__PURE__*/_jsx(VerticalLabel, {
+      minValue: minValue,
+      maxValue: maxValue,
+      styles: {
+        height: areaCanvasHeight,
+        width: labelWidth,
+        fontSize: style?.fontSize
+      },
+      labelCount: 5
+    }), /*#__PURE__*/_jsxs(Canvas, {
+      style: {
+        width: chartWidth,
+        height: canvasHeight
+      },
+      onTouchStart: event => touchHandler(event.nativeEvent.locationX, event.nativeEvent.locationY),
+      children: [paths.map(({
+        path,
+        points,
+        color
+      }, index) => {
+        return /*#__PURE__*/_jsxs(Group, {
+          children: [/*#__PURE__*/_jsx(Path, {
+            path: path,
+            color: color
+          }), style?.showPoints && color && points.map(points => /*#__PURE__*/_jsx(Circle, {
+            cx: points.x,
+            cy: points.y,
+            r: style?.pointRadius ?? 3,
+            color: lighten(color, style?.lightenPointsBy ?? 0.3)
+          }, `${points.x}-${points.y}`))]
+        }, index);
+      }), xLabelsData.map(({
+        label,
+        xPosition
+      }, index) => {
+        return /*#__PURE__*/_jsx(Text, {
+          x: xPosition,
+          y: canvasHeight,
+          text: label,
+          font: font,
+          color: 'white'
+        }, index);
+      })]
+    }), touchLine && /*#__PURE__*/_jsx(Popup, {
+      popupData: touchLine.y.map((y, index) => ({
+        x: touchLine.x,
+        y: y,
+        data: {
+          rowIndex: index,
+          colIndex: touchLine.col,
+          value: touchLine.values[index]
+        }
+      })),
+      totalWidth: chartWidth + labelWidth + paddingHorizontal,
+      totalHeight: canvasHeight,
+      touchHandler: (x, y) => {
+        console.log('Popup touchHandler', x, y);
+        touchHandler(x - labelWidth - paddingLeft, y - paddingTop);
+      },
+      viewOffset: viewOffset,
+      popupStyle: popupStyle
+    })]
+  });
+}
+export default AreaChart;
+//# sourceMappingURL=AreaChart.js.map

package/lib/module/skia/AreaChart/AreaChart.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Canvas","Circle","Group","Path","Text","VerticalLabel","View","useAreaChart","useState","lighten","Popup","jsx","_jsx","jsxs","_jsxs","AreaChart","props","minValue","maxValue","canvasHeight","areaCanvasHeight","labelWidth","chartWidth","paths","xLabelsData","paddingLeft","paddingTop","paddingHorizontal","font","touchLine","touchHandler","style","popupStyle","viewOffset","setViewOffset","x","y","console","log","flexDirection","ref","view","measureInWindow","fx","fy","prev","children","styles","height","width","fontSize","labelCount","onTouchStart","event","nativeEvent","locationX","locationY","map","path","points","color","index","showPoints","cx","cy","r","pointRadius","lightenPointsBy","label","xPosition","text","popupData","data","rowIndex","colIndex","col","value","values","totalWidth","totalHeight"],"sourceRoot":"../../../../src","sources":["skia/AreaChart/AreaChart.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/skia/AreaChart/useAreaChart.js

@@ -0,0 +1,141 @@
+"use strict";
+
+import { Skia } from "@shopify/react-native-skia";
+import { useMemo, useState } from "react";
+import { getCommonStyleFont, getPaddings } from "../common.js";
+import { isDefined } from "../../util/util.js";
+function useAreaChart({
+  data,
+  xLabels,
+  maxValue,
+  minValue,
+  style
+}) {
+  const height = style?.height ?? 200;
+  const width = style?.width ?? 200;
+  const {
+    paddingLeft,
+    paddingTop,
+    paddingHorizontal,
+    paddingVertical
+  } = getPaddings(style);
+  const canvasHeight = height - paddingVertical;
+  const labelWidth = 30;
+  const chartWidth = width - labelWidth - paddingHorizontal;
+  const xLabelHeight = xLabels && xLabels.length > 0 ? (style?.fontSize ?? 12) + 5 : 0;
+  const areaCanvasHeight = canvasHeight - xLabelHeight;
+  const {
+    font
+  } = getCommonStyleFont(style);
+  const {
+    maxValueCalculated,
+    minValueCalculated
+  } = useMemo(() => {
+    if (isDefined(maxValue) && isDefined(minValue)) {
+      return {
+        maxValueCalculated: maxValue,
+        minValueCalculated: minValue
+      };
+    }
+    let maxValueCalculated = Number.MIN_VALUE;
+    let minValueCalculated = Number.MAX_VALUE;
+    data.forEach(datum => {
+      datum.values.forEach(value => {
+        if (value > maxValueCalculated && !isDefined(maxValue)) {
+          maxValueCalculated = value;
+        }
+        if (value < minValueCalculated && !isDefined(minValue)) {
+          minValueCalculated = value;
+        }
+      });
+    });
+    return {
+      maxValueCalculated: maxValueCalculated + 10,
+      minValueCalculated
+    };
+  }, [data]);
+  const paths = useMemo(() => {
+    const pathData = [];
+    for (let datum of data) {
+      const areaData = datum.values;
+      const stepX = chartWidth / areaData.length;
+      const p = Skia.Path.Make();
+      p.moveTo(0, areaCanvasHeight);
+      const points = [];
+      const values = [];
+      areaData.forEach((y, i) => {
+        const xPos = i * stepX;
+        const yPos = Math.max(0, areaCanvasHeight - (y - minValueCalculated) / (maxValueCalculated - minValueCalculated) * areaCanvasHeight);
+        points.push({
+          x: xPos,
+          y: yPos
+        });
+        values.push(y);
+        p.lineTo(xPos, yPos);
+      });
+      p.lineTo(chartWidth, areaCanvasHeight);
+      p.close();
+      pathData.push({
+        path: p,
+        points,
+        values,
+        color: datum.color,
+        label: datum.label
+      });
+    }
+    return pathData;
+  }, [data, chartWidth, maxValueCalculated, minValueCalculated]);
+  const xLabelsData = useMemo(() => {
+    if (!xLabels || xLabels.length === 0) {
+      return [];
+    }
+    const stepX = chartWidth / xLabels.length;
+    const labels = xLabels.map((label, i) => {
+      return {
+        label,
+        xPosition: i * stepX + font.getSize()
+      };
+    });
+    return labels;
+  }, [xLabels, chartWidth]);
+  const [touchLine, setTouchLine] = useState(undefined);
+  const touchHandler = (touchedX, touchedY) => {
+    if (data.length === 0 || (data[0]?.values.length ?? 0) === 0 || touchedX < 0 || touchedY < 0 || touchedX >= chartWidth || touchedY >= areaCanvasHeight) {
+      setTouchLine(undefined);
+      return;
+    }
+    const stepX = chartWidth / data[0].values.length;
+    const xIndex = Math.round(touchedX / stepX);
+    if (xIndex < 0 || xIndex >= data[0].values.length) {
+      setTouchLine(undefined);
+      return;
+    }
+    const yValues = paths.map(path => path.points[xIndex].y);
+    const values = paths.map(path => path.values[xIndex]);
+    setTouchLine({
+      col: xIndex,
+      x: xIndex * stepX,
+      y: yValues,
+      values
+    });
+  };
+  return {
+    paths,
+    chartWidth,
+    canvasHeight,
+    paddingLeft,
+    paddingTop,
+    paddingHorizontal,
+    areaCanvasHeight,
+    labelWidth,
+    maxValue: maxValueCalculated,
+    minValue: minValueCalculated,
+    xLabelsData,
+    xLabelHeight,
+    font,
+    touchHandler,
+    touchLine
+  };
+}
+export default useAreaChart;
+//# sourceMappingURL=useAreaChart.js.map

package/lib/module/skia/AreaChart/useAreaChart.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Skia","useMemo","useState","getCommonStyleFont","getPaddings","isDefined","useAreaChart","data","xLabels","maxValue","minValue","style","height","width","paddingLeft","paddingTop","paddingHorizontal","paddingVertical","canvasHeight","labelWidth","chartWidth","xLabelHeight","length","fontSize","areaCanvasHeight","font","maxValueCalculated","minValueCalculated","Number","MIN_VALUE","MAX_VALUE","forEach","datum","values","value","paths","pathData","areaData","stepX","p","Path","Make","moveTo","points","y","i","xPos","yPos","Math","max","push","x","lineTo","close","path","color","label","xLabelsData","labels","map","xPosition","getSize","touchLine","setTouchLine","undefined","touchHandler","touchedX","touchedY","xIndex","round","yValues","col"],"sourceRoot":"../../../../src","sources":["skia/AreaChart/useAreaChart.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/skia/BarChart/BarChart.js

@@ -0,0 +1,127 @@
+"use strict";
+
+import { Fragment, useState } from 'react';
+import { View } from 'react-native';
+import { GestureDetector, Gesture, GestureHandlerRootView } from 'react-native-gesture-handler';
+import { Canvas, Rect, Text, vec, Line } from '@shopify/react-native-skia';
+import useBarChart from "./useBarChart.js";
+import VerticalLabel from "../Common/VerticalLabel.js";
+import Popup from "../Popup.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function BarChart(props) {
+  const {
+    maxValueCalculated,
+    minValueCalculated,
+    canvasHeight,
+    canvasWidth,
+    paddingRight,
+    paddingLeft,
+    paddingBottom,
+    paddingTop,
+    rectangles,
+    verticalLabelWidth,
+    chartHeight,
+    strokeWidth,
+    tooltip,
+    bottomLabelHeight,
+    font,
+    onScroll,
+    touchHandler,
+    totalHeight,
+    totalWidth
+  } = useBarChart(props);
+  const dragGesture = Gesture.Pan().runOnJS(true).onChange(event => {
+    onScroll(-event.changeX);
+  });
+  const [viewOffset, setViewOffset] = useState({
+    x: 0,
+    y: 0
+  });
+  return /*#__PURE__*/_jsx(GestureHandlerRootView, {
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        width: totalWidth,
+        flexDirection: 'row',
+        backgroundColor: props.style?.backgroundColor,
+        paddingLeft: paddingLeft,
+        paddingRight: paddingRight,
+        paddingTop: paddingTop,
+        paddingBottom: paddingBottom
+      },
+      ref: view => {
+        view?.measureInWindow((fx, fy) => {
+          setViewOffset(prev => {
+            if (prev.x === fx && prev.y === fy) {
+              return prev;
+            }
+            return {
+              x: fx,
+              y: fy
+            };
+          });
+        });
+      },
+      children: [/*#__PURE__*/_jsx(VerticalLabel, {
+        maxValue: maxValueCalculated,
+        minValue: minValueCalculated,
+        labelCount: 6,
+        styles: {
+          width: verticalLabelWidth,
+          height: chartHeight,
+          strokeWidth
+        }
+      }), /*#__PURE__*/_jsx(GestureDetector, {
+        gesture: dragGesture,
+        children: /*#__PURE__*/_jsxs(Canvas, {
+          style: {
+            width: canvasWidth,
+            height: canvasHeight,
+            paddingRight: 50,
+            backgroundColor: 'red'
+          },
+          onTouchStart: event => touchHandler(event.nativeEvent.locationX, event.nativeEvent.locationY),
+          children: [/*#__PURE__*/_jsx(Line, {
+            p1: vec(0, chartHeight),
+            p2: vec(canvasWidth, chartHeight),
+            color: "white",
+            strokeWidth: strokeWidth
+          }), rectangles.map((bar, xIndex) => {
+            if (bar.bars.length === 0) return null;
+            return /*#__PURE__*/_jsxs(Fragment, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                x: bar.bars[0].x,
+                y: chartHeight + font.getSize() + (bottomLabelHeight - font.getSize()) / 2,
+                text: bar.label ?? '',
+                color: "white",
+                font: font
+              }), bar.bars.map((item, yIndex) => {
+                let currentData = props.data[xIndex].values[yIndex];
+                let color = props?.colors?.[currentData.id ?? currentData.label] || '#4A90E2';
+                return /*#__PURE__*/_jsx(Rect, {
+                  x: item.x,
+                  y: item.y,
+                  width: item.width,
+                  height: item.height,
+                  color: color
+                }, xIndex + '-' + yIndex);
+              })]
+            }, xIndex);
+          })]
+        })
+      }), tooltip && /*#__PURE__*/_jsx(Popup, {
+        popupData: {
+          x: tooltip.centerX,
+          y: tooltip.centerY,
+          data: tooltip.data
+        },
+        popupStyle: props.popupStyle,
+        totalWidth: totalWidth,
+        totalHeight: totalHeight,
+        touchHandler: (x, y) => touchHandler(x - verticalLabelWidth - paddingLeft, y - paddingTop),
+        viewOffset: viewOffset
+      })]
+    })
+  });
+}
+export default BarChart;
+//# sourceMappingURL=BarChart.js.map

package/lib/module/skia/BarChart/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Fragment","useState","View","GestureDetector","Gesture","GestureHandlerRootView","Canvas","Rect","Text","vec","Line","useBarChart","VerticalLabel","Popup","jsx","_jsx","jsxs","_jsxs","BarChart","props","maxValueCalculated","minValueCalculated","canvasHeight","canvasWidth","paddingRight","paddingLeft","paddingBottom","paddingTop","rectangles","verticalLabelWidth","chartHeight","strokeWidth","tooltip","bottomLabelHeight","font","onScroll","touchHandler","totalHeight","totalWidth","dragGesture","Pan","runOnJS","onChange","event","changeX","viewOffset","setViewOffset","x","y","children","style","width","flexDirection","backgroundColor","ref","view","measureInWindow","fx","fy","prev","maxValue","minValue","labelCount","styles","height","gesture","onTouchStart","nativeEvent","locationX","locationY","p1","p2","color","map","bar","xIndex","bars","length","getSize","text","label","item","yIndex","currentData","data","values","colors","id","popupData","centerX","centerY","popupStyle"],"sourceRoot":"../../../../src","sources":["skia/BarChart/BarChart.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/skia/BarChart/useBarChart.js

@@ -0,0 +1,172 @@
+"use strict";
+
+import { useMemo, useState } from "react";
+import { rect } from "@shopify/react-native-skia";
+import { arrayFrom, isDefined } from "../../util/util.js";
+import { useWindowDimensions } from "react-native";
+import { getCommonStyleFont, getPaddings } from "../common.js";
+export default function useBarChart({
+  data,
+  style,
+  maxValue,
+  minValue
+}) {
+  const {
+    maxValueCalculated,
+    minValueCalculated
+  } = useMemo(() => {
+    if (isDefined(maxValue) && isDefined(minValue)) {
+      return {
+        maxValueCalculated: maxValue,
+        minValueCalculated: minValue
+      };
+    }
+    if (data.length === 0) {
+      return {
+        maxValueCalculated: maxValue ?? 100,
+        minValueCalculated: minValue ?? 0
+      };
+    }
+    let maxValueCalculated = Number.MIN_VALUE;
+    let minValueCalculated = Number.MAX_VALUE;
+    data.forEach(item => {
+      const currentValue = item.values.reduce((acc, value) => {
+        minValueCalculated = Math.min(minValueCalculated, value.value);
+        return acc + value.value;
+      }, 0);
+      maxValueCalculated = Math.max(maxValueCalculated, currentValue);
+    });
+    if (isDefined(maxValue)) maxValueCalculated = maxValue;
+    if (isDefined(minValue)) minValueCalculated = minValue;
+    return {
+      maxValueCalculated,
+      minValueCalculated
+    };
+  }, [data, maxValue]);
+  const steps = useMemo(() => arrayFrom(1, 0.2), []);
+  const [tooltip, setTooltip] = useState(undefined);
+  const [startX, setStartX] = useState(0);
+  const {
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom
+  } = getPaddings(style);
+  const chartBarWidth = style?.barWidth ?? 100;
+  const chartBarSpacing = style?.barSpacing ?? 0;
+  const verticalLabelWidth = 35;
+  const chartHeight = style?.height ?? 200;
+  const strokeWidth = 2;
+  const bottomLabelHeight = 20;
+  const canvasHeight = chartHeight + bottomLabelHeight;
+  const {
+    width: windowWidth
+  } = useWindowDimensions();
+  const totalWidth = style?.width ?? windowWidth;
+  const totalHeight = chartHeight;
+  const initialSpacing = style?.firstBarLeadingSpacing ?? 0;
+  const endSpacing = style?.lastBarTrailingSpacing ?? chartBarSpacing;
+  const scrollAreaWidth = initialSpacing + data.length * chartBarWidth + Math.max(0, data.length - 1) * chartBarSpacing + endSpacing;
+  const canvasWidth = Math.min(scrollAreaWidth, totalWidth - verticalLabelWidth - paddingRight - paddingLeft);
+  const {
+    font
+  } = getCommonStyleFont(style);
+  const rectangles = useMemo(() => {
+    let leftBoundary = Math.max(0, startX);
+    let rightBoundary = startX + totalWidth;
+    let startArrayIndex = Math.floor(Math.max(leftBoundary - initialSpacing, 0) / (chartBarWidth + chartBarSpacing));
+    let endArrayIndex = Math.min(Math.ceil(rightBoundary / (chartBarWidth + chartBarSpacing)), data.length);
+    return data.slice(startArrayIndex, endArrayIndex).map((bar, xIndex) => {
+      let previousHeight = 0;
+      const x = initialSpacing + (xIndex + startArrayIndex) * (chartBarWidth + chartBarSpacing) - leftBoundary;
+      return {
+        bars: bar.values.map((item, yIndex) => {
+          const barHeight = (item.value - minValueCalculated) / (maxValueCalculated - minValueCalculated) * chartHeight;
+          const y = chartHeight - barHeight - previousHeight - strokeWidth;
+          previousHeight += barHeight;
+          return rect(x, y, chartBarWidth, barHeight);
+        }),
+        label: bar.label,
+        dataIndex: xIndex + startArrayIndex,
+        x: x
+      };
+    });
+  }, [data, chartBarWidth, chartBarSpacing, maxValueCalculated, minValueCalculated, strokeWidth, startX]);
+  const touchHandler = (touchedX, touchedY) => {
+    if (rectangles.length === 0 || touchedX < 0 || touchedY < 0 || touchedX >= canvasWidth || touchedY >= chartHeight) {
+      setTooltip(undefined);
+      return;
+    }
+    let xIndex = -1;
+    let startingXIndex = 0;
+    if (touchedX >= rectangles[0].x && touchedX <= rectangles[0].x + rectangles[0].bars[0].width) {
+      xIndex = 0;
+      startingXIndex = Math.max(0, rectangles[0].x);
+    } else if (touchedX >= rectangles[0].x) {
+      xIndex = Math.floor((touchedX - (rectangles[0].x + chartBarWidth) - chartBarSpacing) / (chartBarWidth + chartBarSpacing)) + 1;
+      startingXIndex = rectangles[xIndex].x;
+    }
+    if (xIndex === -1 || touchedX < rectangles[xIndex].x || touchedX > rectangles[xIndex].x + chartBarWidth) {
+      console.log('Touch is outside the bar width, ignoring.');
+      setTooltip(undefined);
+      return;
+    }
+    xIndex = rectangles[xIndex].dataIndex;
+    let yIndex = 0;
+    let yPassed = 0;
+    let categoryData = data[xIndex]?.values || [];
+    let lastBarHeight = 0;
+    while (yIndex < categoryData.length && yPassed < chartHeight - touchedY) {
+      const barHeight = (categoryData[yIndex].value - minValueCalculated) / (maxValueCalculated - minValueCalculated) * chartHeight;
+      yPassed += barHeight;
+      lastBarHeight = barHeight;
+      yIndex++;
+    }
+    if (yIndex === 0 || yIndex === categoryData.length && touchedY < chartHeight - yPassed) {
+      console.log('Touch is outside the bar height, ignoring.');
+      setTooltip(undefined);
+      return;
+    }
+    setTooltip({
+      centerX: startingXIndex + chartBarWidth / 2,
+      centerY: chartHeight - yPassed - strokeWidth + lastBarHeight / 2,
+      data: categoryData[yIndex - 1]
+    });
+  };
+  function onScroll(translateX) {
+    setTooltip(undefined);
+    setStartX(prev => {
+      let newX = prev + translateX;
+      if (newX < 0) return 0;
+      if (newX + canvasWidth > scrollAreaWidth) return Math.max(0, scrollAreaWidth - canvasWidth);
+      return newX;
+    });
+  }
+  return {
+    maxValueCalculated,
+    minValueCalculated,
+    canvasHeight,
+    canvasWidth,
+    steps,
+    scrollAreaWidth,
+    chartHeight,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    verticalLabelWidth,
+    chartBarWidth,
+    chartBarSpacing,
+    strokeWidth,
+    rectangles,
+    tooltip,
+    bottomLabelHeight,
+    font,
+    setTooltip,
+    touchHandler,
+    onScroll,
+    totalHeight,
+    totalWidth
+  };
+}
+//# sourceMappingURL=useBarChart.js.map