Update package dependencies to use published version of chartgpu, enhance README with local development instructions, and modify example data generation for improved performance. Additionally, refine type imports in ChartGPUChart component.

Author: hunterg325

README.md

@@ -199,6 +199,33 @@ npm run dev
 
 The dev server will start at `http://localhost:3000` and open the examples page automatically.
 
+### Local Development with Linked ChartGPU
+
+To develop `chartgpu-react` against a local version of the `chartgpu` package (useful for testing changes across both repositories):
+
+```bash
+# 1. Link the chartgpu package from the sibling repo
+cd ../chart-gpu
+npm link
+
+# 2. Link chartgpu into this project
+cd ../chartgpu-react
+npm link chartgpu
+
+# 3. Build and run - will use the linked local package
+npm run build
+npm run dev
+```
+
+**Note:** After linking, `npm run build` and `npm run dev` will resolve imports to your local `chartgpu` package instead of the published version. This allows you to test changes in both repos simultaneously.
+
+To unlink and return to the published package:
+
+```bash
+npm unlink chartgpu
+npm install
+```
+
 ## Type Exports
 
 The package re-exports common types from ChartGPU for convenience:

examples/main.tsx

@@ -8,7 +8,7 @@ function LineChartExample() {
   const [error, setError] = useState<string | null>(null);
 
   // Generate sample data
-  const generateLineData = useCallback((points: number = 100) => {
+  const generateLineData = useCallback((points: number = 5000000) => {
     const data = [];
     for (let i = 0; i < points; i++) {
       const x = i;
@@ -112,9 +112,9 @@ function MultiSeriesExample() {
       {
         type: 'line',
         name: 'Revenue',
-        data: Array.from({ length: 50 }, (_, i) => ({
+        data: Array.from({ length: 500000 }, (_, i) => ({
           x: i,
-          y: 100 + Math.random() * 100 + i * 2,
+          y: 100 + Math.random() * 5000000 + i * 2,
         })),
         lineStyle: {
           width: 2,
@@ -124,7 +124,7 @@ function MultiSeriesExample() {
       {
         type: 'line',
         name: 'Expenses',
-        data: Array.from({ length: 50 }, (_, i) => ({
+        data: Array.from({ length: 500000 }, (_, i) => ({
           x: i,
           y: 80 + Math.random() * 60 + i * 1.5,
         })),
@@ -136,7 +136,7 @@ function MultiSeriesExample() {
       {
         type: 'line',
         name: 'Profit',
-        data: Array.from({ length: 50 }, (_, i) => ({
+        data: Array.from({ length: 500000 }, (_, i) => ({
           x: i,
           y: 20 + Math.random() * 40 + i * 0.5,
         })),

package-lock.json

@@ -30,7 +30,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "chartgpu": "file:../chart-gpu"
+    "chartgpu": "^0.1.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package.json

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useCallback } from 'react';
+import type { CSSProperties } from 'react';
 import { ChartGPU } from 'chartgpu';
 import type { ChartGPUOptions, ChartGPUInstance } from 'chartgpu';
 
@@ -16,7 +17,7 @@ export interface ChartGPUChartProps {
   /**
    * Optional inline styles for the container
    */
-  style?: React.CSSProperties;
+  style?: CSSProperties;
 
   /**
    * Optional callback when chart instance is created