add chartPrefix to ids. Fixes #733

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "daily"

.github/workflows/node.js.yml

@@ -0,0 +1,28 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: ["master"]
+  pull_request:
+    branches: ["master"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [22.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v5
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v5
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: yarn install
+      - run: yarn test

package.json

@@ -24,7 +24,7 @@
     "react-native-scrollable-tab-view": "^1.0.0",
     "react-native-svg": "11.0.1",
     "react-test-renderer": "16.7.0",
-    "typescript": "^3.9.5"
+    "typescript": "^5.9.2"
   },
   "_main": "./node_modules/expo/AppEntry.js",
   "main": "./dist/index.js",
@@ -37,7 +37,7 @@
     "eject": "expo eject",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "build": "tsc",
     "dev": "tsc --watch",
     "prepublish": "yarn build",

src/BarChart.tsx

@@ -46,17 +46,25 @@ export interface BarChartProps extends AbstractChartProps {
   showValuesOnTopOfBars?: boolean;
   withCustomBarColorFromData?: boolean;
   flatColor?: boolean;
-
 }
 
 type BarChartState = {};
 
 class BarChart extends AbstractChart<BarChartProps, BarChartState> {
+  private chartPrefix: string;
   getBarPercentage = () => {
     const { barPercentage = 1 } = this.props.chartConfig;
     return barPercentage;
   };
 
+  constructor(props) {
+    super(props);
+    // Unique per chart instance
+    this.chartPrefix = Math.random()
+      .toString(36)
+      .substr(2, 6);
+  }
+
   renderBars = ({
     data,
     width,
@@ -94,7 +102,7 @@ class BarChart extends AbstractChart<BarChartProps, BarChartState> {
           height={(Math.abs(barHeight) / 4) * 3}
           fill={
             withCustomBarColorFromData
-              ? `url(#customColor_0_${i})`
+              ? `url(#customColor_${this.chartPrefix}_0_${i})`
               : "url(#fillShadowGradientFrom)"
           }
         />
@@ -150,7 +158,7 @@ class BarChart extends AbstractChart<BarChartProps, BarChartState> {
 
           return (
             <LinearGradient
-              id={`customColor_${index}_${colorIndex}`}
+              id={`customColor_${this.chartPrefix}_${index}_${colorIndex}`}
               key={`${index}_${colorIndex}`}
               x1={0}
               y1={0}
@@ -161,8 +169,8 @@ class BarChart extends AbstractChart<BarChartProps, BarChartState> {
               {flatColor ? (
                 <Stop offset="1" stopColor={highOpacityColor} stopOpacity="1" />
               ) : (
-                  <Stop offset="1" stopColor={lowOpacityColor} stopOpacity="0" />
-                )}
+                <Stop offset="1" stopColor={lowOpacityColor} stopOpacity="0" />
+              )}
             </LinearGradient>
           );
         })}
@@ -185,13 +193,12 @@ class BarChart extends AbstractChart<BarChartProps, BarChartState> {
     const baseHeight = this.calcBaseHeight(data, height);
 
     const renderLabel = (value: number) => {
-      if(this.props.chartConfig.formatTopBarValue) {
-        return this.props.chartConfig.formatTopBarValue(value)
-      }
-      else {
-        return value
+      if (this.props.chartConfig.formatTopBarValue) {
+        return this.props.chartConfig.formatTopBarValue(value);
+      } else {
+        return value;
       }
-    }
+    };
     return data.map((x, i) => {
       const barHeight = this.calcHeight(x, data, height);
       const barWidth = 32 * this.getBarPercentage();
@@ -202,7 +209,6 @@ class BarChart extends AbstractChart<BarChartProps, BarChartState> {
             paddingRight +
             (i * (width - paddingRight)) / data.length +
             barWidth / 1
-
           }
           y={((baseHeight - barHeight) / 4) * 3 + paddingTop - 1}
           fill={this.props.chartConfig.color(0.6)}
@@ -246,12 +252,12 @@ class BarChart extends AbstractChart<BarChartProps, BarChartState> {
         (this.props.chartConfig && this.props.chartConfig.decimalPlaces) ?? 2,
       formatYLabel:
         (this.props.chartConfig && this.props.chartConfig.formatYLabel) ||
-        function (label) {
+        function(label) {
           return label;
         },
       formatXLabel:
         (this.props.chartConfig && this.props.chartConfig.formatXLabel) ||
-        function (label) {
+        function(label) {
           return label;
         }
     };
@@ -278,32 +284,32 @@ class BarChart extends AbstractChart<BarChartProps, BarChartState> {
           <G>
             {withInnerLines
               ? this.renderHorizontalLines({
-                ...config,
-                count: segments,
-                paddingTop
-              })
+                  ...config,
+                  count: segments,
+                  paddingTop
+                })
               : null}
           </G>
           <G>
             {withHorizontalLabels
               ? this.renderHorizontalLabels({
-                ...config,
-                count: segments,
-                data: data.datasets[0].data,
-                paddingTop: paddingTop as number,
-                paddingRight: paddingRight as number
-              })
+                  ...config,
+                  count: segments,
+                  data: data.datasets[0].data,
+                  paddingTop: paddingTop as number,
+                  paddingRight: paddingRight as number
+                })
               : null}
           </G>
           <G>
             {withVerticalLabels
               ? this.renderVerticalLabels({
-                ...config,
-                labels: data.labels,
-                paddingRight: paddingRight as number,
-                paddingTop: paddingTop as number,
-                horizontalOffset: barWidth * this.getBarPercentage()
-              })
+                  ...config,
+                  labels: data.labels,
+                  paddingRight: paddingRight as number,
+                  paddingTop: paddingTop as number,
+                  horizontalOffset: barWidth * this.getBarPercentage()
+                })
               : null}
           </G>
           <G>

src/contribution-graph/index.tsx

@@ -19,7 +19,7 @@ export interface ContributionGraphProps extends AbstractChartProps {
   showOutOfRangeDays?: boolean;
   accessor?: string;
   getMonthLabel?: (monthIndex: number) => string;
-  onDayPress?: ({ count: number, date: Date }) => void;
+  onDayPress?: ({ count, date }: { count: number; date: Date }) => void;
   classForValue?: (value: string) => string;
   style?: Partial<ViewStyle>;
   titleForValue?: (value: ContributionChartValue) => string;

tsconfig.json

@@ -21,6 +21,8 @@
     "inlineSources": true,
     "esModuleInterop": true,
     "noErrorTruncation": true,
-    "jsx": "react-native"
-  }
+    "jsx": "react-native",
+    "skipLibCheck": true
+  },
+  "exclude": ["dist"]
 }