chore: revive maintenance release

.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm install --legacy-peer-deps --ignore-scripts
+
+      - name: Build
+        run: npm run build

App.js

@@ -113,7 +113,7 @@ export default class App extends React.Component {
     const height = 256;
     return (
       <ScrollableTabView renderTabBar={this.renderTabBar}>
-        {chartConfigs.map(chartConfig => {
+        {chartConfigs.map((chartConfig, index) => {
           const labelStyle = {
             color: chartConfig.color(),
             marginVertical: 10,
@@ -126,7 +126,7 @@ export default class App extends React.Component {
           };
           return (
             <ScrollView
-              key={Math.random()}
+              key={`chart-config-${index}`}
               style={{
                 backgroundColor: chartConfig.backgroundColor
               }}

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## v6.12.1
+
+- prepare next patch release after v6.12.0
+- add GitHub Actions build verification
+- replace unstable random React keys in chart renders
+- prefix generated SVG definition IDs to avoid collisions across charts
+- replace ContributionGraph's unsafe prop lifecycle with componentDidUpdate
+- fix stale root source exports
+
 ## v6.11
 
 - added a prop to customize vertical labels heigh

contributing.md

@@ -4,23 +4,43 @@
 
 Suggestions and pull requests are highly encouraged! Have a look at the [open issues](https://github.com/indiespirit/react-native-chart-kit/issues).
 
+## Branch names
+
+Use lowercase kebab-case branch names in this format:
+
+```sh
+<type>/<short-summary>
+```
+
+Use these branch types:
+
+- `fix/` for user-visible bug fixes
+- `feat/` for new public functionality
+- `docs/` for documentation-only changes
+- `ci/` for automation and CI changes
+- `chore/` for maintenance, release hygiene, and dependency upkeep
+- `refactor/` for internal changes that do not intentionally change behavior
+- `release/` for version bump and publishing prep
+
+Include an issue number when the branch maps to a specific issue, for example `fix/733-svg-gradient-ids`. Keep each branch scoped to one pull request.
+
 ## Workflow
 
 First clone:
 
 ```sh
 git clone git@github.com:indiespirit/react-native-chart-kit.git
 cd react-native-chart-kit
-yarn install
+npm install --legacy-peer-deps
 ```
 
-In order to run it, you are gonna have to flip values for "main" and "_main" in package json. This is nessesary because both npm and expo have a notion of a main file, but for npm it's the file that you run when you import this library in your app; and for expo it's the file that it uses to display the example app.
+In order to run it, you are gonna have to flip values for "main" and "\_main" in package json. This is nessesary because both npm and expo have a notion of a main file, but for npm it's the file that you run when you import this library in your app; and for expo it's the file that it uses to display the example app.
 
 Don't forget to flip it back before commiting.
 
 **After you update fix the package.json**
 
 ```sh
-yarn start # And get you expo app ready on your phone
+npm start # And get your Expo app ready on your phone
+npm run build # Verify the package build
 ```
-

index.js

@@ -1,10 +1,10 @@
-import AbstractChart from "./src/abstract-chart";
+import AbstractChart from "./src/AbstractChart";
 import LineChart from "./src/line-chart";
-import BarChart from "./src/bar-chart";
-import PieChart from "./src/pie-chart";
-import ProgressChart from "./src/progress-chart";
+import BarChart from "./src/BarChart";
+import PieChart from "./src/PieChart";
+import ProgressChart from "./src/ProgressChart";
 import ContributionGraph from "./src/contribution-graph";
-import StackedBarChart from "./src/stackedbar-chart";
+import StackedBarChart from "./src/StackedBarChart";
 
 export {
   AbstractChart,

package.json

@@ -1,7 +1,8 @@
 {
   "name": "react-native-chart-kit",
-  "version": "6.11.0",
+  "version": "6.12.1",
   "devDependencies": {
+    "@types/react": "16.14.8",
     "@types/react-native": "^0.62.13",
     "babel-eslint": "10.x",
     "babel-plugin-module-resolver": "^3.1.1",
@@ -24,7 +25,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.4.5"
   },
   "_main": "./node_modules/expo/AppEntry.js",
   "main": "./dist/index.js",
@@ -38,10 +39,10 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "test": "jest",
+    "typecheck": "tsc --noEmit",
     "build": "tsc",
     "dev": "tsc --watch",
-    "prepublish": "yarn build",
-    "prepare": "yarn build"
+    "prepare": "npm run build"
   },
   "jest": {
     "preset": "jest-expo"
@@ -67,6 +68,9 @@
     "type": "git",
     "url": "https://github.com/indiespirit/react-native-chart-kit"
   },
+  "overrides": {
+    "@types/react": "16.14.8"
+  },
   "resolutions": {
     "@types/react": "16.14.8"
   }

src/AbstractChart.tsx

@@ -38,13 +38,27 @@ export type AbstractChartState = {};
 
 export const DEFAULT_X_LABELS_HEIGHT_PERCENTAGE = 0.75;
 
+let nextChartId = 0;
+
 class AbstractChart<
   IProps extends AbstractChartProps,
   IState extends AbstractChartState
 > extends Component<AbstractChartProps & IProps, AbstractChartState & IState> {
+  private chartId = nextChartId++;
+
+  protected getGradientId = (id: string) => {
+    return `chart-kit-${this.chartId}-${id}`;
+  };
+
+  protected getGradientUrl = (id: string) => {
+    return `url(#${this.getGradientId(id)})`;
+  };
+
   calcScaler = (data: number[]) => {
     if (this.props.fromZero && this.props.fromNumber) {
-      return Math.max(...data, this.props.fromNumber) - Math.min(...data, 0) || 1;
+      return (
+        Math.max(...data, this.props.fromNumber) - Math.min(...data, 0) || 1
+      );
     } else if (this.props.fromZero) {
       return Math.max(...data, 0) - Math.min(...data, 0) || 1;
     } else if (this.props.fromNumber) {
@@ -148,7 +162,7 @@ class AbstractChart<
       const y = (basePosition / count) * i + paddingTop;
       return (
         <Line
-          key={Math.random()}
+          key={`horizontal-line-${i}`}
           x1={paddingRight}
           y1={y}
           x2={width}
@@ -169,7 +183,7 @@ class AbstractChart<
     } = config;
     return (
       <Line
-        key={Math.random()}
+        key="horizontal-line"
         x1={paddingRight}
         y1={height * verticalLabelsHeightPercentage + paddingTop}
         x2={width}
@@ -227,7 +241,7 @@ class AbstractChart<
         <Text
           rotation={horizontalLabelRotation}
           origin={`${x}, ${y}`}
-          key={Math.random()}
+          key={`horizontal-label-${i}-${yLabel}`}
           x={x}
           textAnchor="end"
           y={y}
@@ -298,7 +312,7 @@ class AbstractChart<
         <Text
           origin={`${x}, ${y}`}
           rotation={verticalLabelRotation}
-          key={Math.random()}
+          key={`vertical-label-${i}-${label}`}
           x={x}
           y={y}
           textAnchor={verticalLabelRotation === 0 ? "middle" : "start"}
@@ -336,7 +350,7 @@ class AbstractChart<
       (_, i) => {
         return (
           <Line
-            key={Math.random()}
+            key={`vertical-line-${i}`}
             x1={Math.floor(
               ((width - paddingRight) / (data.length / yAxisInterval)) * i +
                 paddingRight
@@ -364,7 +378,7 @@ class AbstractChart<
     "height" | "paddingRight" | "paddingTop" | "verticalLabelsHeightPercentage"
   >) => (
     <Line
-      key={Math.random()}
+      key="vertical-line"
       x1={Math.floor(paddingRight)}
       y1={0}
       x2={Math.floor(paddingRight)}
@@ -469,7 +483,7 @@ class AbstractChart<
     return (
       <Defs>
         <LinearGradient
-          id="backgroundGradient"
+          id={this.getGradientId("backgroundGradient")}
           x1={0}
           y1={height}
           x2={width}
@@ -487,10 +501,10 @@ class AbstractChart<
             stopOpacity={toOpacity}
           />
         </LinearGradient>
-        {useShadowColorFromDataset ? (
+        {useShadowColorFromDataset && data ? (
           data.map((dataset, index) => (
             <LinearGradient
-              id={`fillShadowGradientFrom_${index}`}
+              id={this.getGradientId(`fillShadowGradientFrom_${index}`)}
               key={`${index}`}
               x1={0}
               y1={0}
@@ -518,7 +532,7 @@ class AbstractChart<
           ))
         ) : (
           <LinearGradient
-            id="fillShadowGradientFrom"
+            id={this.getGradientId("fillShadowGradientFrom")}
             x1={0}
             y1={0}
             x2={0}