{"_id":"@ahmed_alsanadi/react-d3-charts","_rev":"1-83fc5f4133d02671199e7269b952472d","name":"@ahmed_alsanadi/react-d3-charts","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@ahmed_alsanadi/react-d3-charts","version":"0.1.0","keywords":["react","d3","charts","visualization","network-graph","line-chart","bar-chart","typescript"],"author":{"name":"Ahmed Alsanadi"},"license":"MIT","_id":"@ahmed_alsanadi/react-d3-charts@0.1.0","maintainers":[{"name":"ahmed_alsanadi","email":"ahmed11alsanadi11@gmail.com"}],"homepage":"https://github.com/ahmedalsanadi/react-d3-charts#readme","bugs":{"url":"https://github.com/ahmedalsanadi/react-d3-charts/issues"},"dist":{"shasum":"865ddb154d7659d8e6a54a59e72c4ad9a2fdb54e","tarball":"https://registry.npmjs.org/@ahmed_alsanadi/react-d3-charts/-/react-d3-charts-0.1.0.tgz","fileCount":7,"integrity":"sha512-JfP+9CrDcF1ICSH0QkSu+tjgZ3wE64oD4Cu/Daido4xDGR6cfaDpTthHVhm6nPXjMO6NOOOhCDYNJ9JWgIQIIg==","signatures":[{"sig":"MEUCID8adkZn5Ezs2RqTSYkhk2GlVQLSbLJ3q7PSkX7qgQD2AiEArz2pBFgaiGJ3BUlhxshCW4r49F2vWqGxKkjDiznyAK4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":226552},"main":"dist/index.umd.js","type":"module","types":"dist/types/index.d.ts","module":"dist/index.es.js","gitHead":"351c659d7bfa624943dd5bbb27b8838ce7979ec0","private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"vite build","prepare":"npm run build","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"ahmed_alsanadi","email":"ahmed11alsanadi11@gmail.com"},"repository":{"url":"git+https://github.com/ahmedalsanadi/react-d3-charts.git","type":"git"},"_npmVersion":"11.1.0","description":"Beautiful, interactive React charting library built with D3.js featuring line charts, bar charts, and network graphs","directories":{},"sideEffects":false,"_nodeVersion":"20.17.0","dependencies":{"zustand":"^4.5.2","lucide-react":"^0.344.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.2","eslint":"^9.9.1","globals":"^15.9.0","postcss":"^8.4.35","@types/d3":"^7.4.3","@eslint/js":"^9.9.1","typescript":"^5.5.3","@types/node":"^22.13.5","tailwindcss":"^3.4.1","@types/react":"^18.3.5","autoprefixer":"^10.4.18","vite-plugin-dts":"^3.7.3","@types/react-dom":"^18.3.0","typescript-eslint":"^8.3.0","@vitejs/plugin-react":"^4.3.1","eslint-plugin-react-hooks":"^5.1.0-rc.0","eslint-plugin-react-refresh":"^0.4.11"},"peerDependencies":{"d3":"^7.0.0","react":"^16.8.0 || ^17.0.0 || ^18.0.0","@types/d3":"^7.4.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-d3-charts_0.1.0_1740438160371_0.8502977801308431","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@ahmed_alsanadi/react-d3-charts","version":"0.2.0","description":"Beautiful, interactive React charting library built with D3.js featuring line charts, bar charts, and network graphs","private":false,"type":"module","main":"dist/index.umd.js","module":"dist/index.es.js","types":"dist/types/index.d.ts","sideEffects":false,"keywords":["react","d3","charts","visualization","network-graph","line-chart","bar-chart","typescript"],"scripts":{"dev":"vite","build":"vite build","prepare":"npm run build","lint":"eslint .","preview":"vite preview","prepublishOnly":"npm run build"},"peerDependencies":{"d3":"^7.0.0","@types/d3":"^7.4.0","react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"dependencies":{"lucide-react":"^0.344.0","zustand":"^4.5.2"},"devDependencies":{"@eslint/js":"^9.9.1","@types/d3":"^7.4.3","@types/node":"^22.13.5","@types/react":"^18.3.5","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.3.1","autoprefixer":"^10.4.18","eslint":"^9.9.1","eslint-plugin-react-hooks":"^5.1.0-rc.0","eslint-plugin-react-refresh":"^0.4.11","globals":"^15.9.0","postcss":"^8.4.35","tailwindcss":"^3.4.1","typescript":"^5.5.3","typescript-eslint":"^8.3.0","vite":"^5.4.2","vite-plugin-dts":"^3.7.3"},"repository":{"type":"git","url":"git+https://github.com/ahmedalsanadi/react-d3-charts.git"},"author":{"name":"Ahmed Alsanadi"},"license":"MIT","bugs":{"url":"https://github.com/ahmedalsanadi/react-d3-charts/issues"},"homepage":"https://github.com/ahmedalsanadi/react-d3-charts#readme","_id":"@ahmed_alsanadi/react-d3-charts@0.2.0","gitHead":"01f2037dd3b26b0a8536caac560b4a2d9430677f","_nodeVersion":"20.17.0","_npmVersion":"11.1.0","dist":{"integrity":"sha512-Fa/JfJu8Mf5b9B5zVGiUiIb8XlBkWzUeFiDQ79ZNCrDwfFAgjMiRyR6Hk6WjeuhSJupwzV1k1tcs3AIa+8UBOA==","shasum":"babc138cad363887ba9c8cf1e796ee80aa3abb0d","tarball":"https://registry.npmjs.org/@ahmed_alsanadi/react-d3-charts/-/react-d3-charts-0.2.0.tgz","fileCount":7,"unpackedSize":252360,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICYboJL18waChx25LRLdCQxgdWH1szJ7mkiucdtP2cRDAiB7ElyQuqmwJhJoGehvhoEyCJdovqo7Wgltxb5inMKjMQ=="}]},"_npmUser":{"name":"ahmed_alsanadi","email":"ahmed11alsanadi11@gmail.com"},"directories":{},"maintainers":[{"name":"ahmed_alsanadi","email":"ahmed11alsanadi11@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-d3-charts_0.2.0_1740613951549_0.6889686960728099"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-24T23:02:40.269Z","modified":"2025-02-26T23:52:32.315Z","0.1.0":"2025-02-24T23:02:40.547Z","0.2.0":"2025-02-26T23:52:32.138Z"},"bugs":{"url":"https://github.com/ahmedalsanadi/react-d3-charts/issues"},"author":{"name":"Ahmed Alsanadi"},"license":"MIT","homepage":"https://github.com/ahmedalsanadi/react-d3-charts#readme","keywords":["react","d3","charts","visualization","network-graph","line-chart","bar-chart","typescript"],"repository":{"type":"git","url":"git+https://github.com/ahmedalsanadi/react-d3-charts.git"},"description":"Beautiful, interactive React charting library built with D3.js featuring line charts, bar charts, and network graphs","maintainers":[{"name":"ahmed_alsanadi","email":"ahmed11alsanadi11@gmail.com"}],"readme":"# React D3 Charts\n\nA modern, lightweight React charting library built with D3.js.\n\n## Features\n\n- 📊 Line Charts\n- 📊 Bar Charts\n- 🕸️ Interactive Network Graphs\n- 🎨 Customizable colors and dimensions\n- 📱 Responsive design\n- 🔧 TypeScript support\n- ⚡️ Zero dependencies (except React and D3)\n\n## Installation\n\n```bash\nnpm install @ahmed_alsanadi/react-d3-charts\n```\n\n## Usage\n\n### Line Chart\n\n```tsx\nimport { LineChart } from '@ahmed_alsanadi/react-d3-charts';\n\nconst data = [\n  { x: 0, y: 10 },\n  { x: 1, y: 15 },\n  { x: 2, y: 35 },\n  { x: 3, y: 25 },\n];\n\nfunction App() {\n  return (\n    <LineChart\n      data={data}\n      width={600}\n      height={400}\n      color=\"#3b82f6\"\n    />\n  );\n}\n```\n\n### Bar Chart\n\n```tsx\nimport { BarChart } from '@ahmed_alsanadi/react-d3-charts';\n\nconst data = [\n  { x: 'A', y: 10 },\n  { x: 'B', y: 15 },\n  { x: 'C', y: 35 },\n  { x: 'D', y: 25 },\n];\n\nfunction App() {\n  return (\n    <BarChart\n      data={data}\n      width={600}\n      height={400}\n      color=\"#10b981\"\n    />\n  );\n}\n```\n\n### Network Graph\n\n```tsx\nimport { NetworkGraph } from '@ahmed_alsanadi/react-d3-charts';\n\nconst data = {\n  id: 'root',\n  label: 'Root',\n  children: [\n    {\n      id: 'group1',\n      label: 'Group 1',\n      children: [\n        { id: 'node1', label: 'Node 1' },\n        { id: 'node2', label: 'Node 2' },\n      ],\n    },\n    // ... more nodes\n  ],\n};\n\nfunction App() {\n  return (\n    <NetworkGraph\n      data={data}\n      width={800}\n      height={600}\n      nodeColor=\"#6366f1\"\n    />\n  );\n}\n```\n\n## API Reference\n\n### LineChart Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| data | LineDataPoint[] | required | Array of data points |\n| width | number | 600 | Chart width |\n| height | number | 400 | Chart height |\n| margin | Margin | { top: 20, right: 30, bottom: 30, left: 40 } | Chart margins |\n| xAccessor | (d: DataPoint) => number | d => d.x | Function to access x values |\n| yAccessor | (d: DataPoint) => number | d => d.y | Function to access y values |\n| color | string | 'steelblue' | Line color |\n| className | string | '' | Additional CSS classes |\n\n### BarChart Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| data | BarDataPoint[] | required | Array of data points |\n| width | number | 600 | Chart width |\n| height | number | 400 | Chart height |\n| margin | Margin | { top: 20, right: 30, bottom: 30, left: 40 } | Chart margins |\n| xAccessor | (d: DataPoint) => string | d => d.x | Function to access x values |\n| yAccessor | (d: DataPoint) => number | d => d.y | Function to access y values |\n| color | string | 'steelblue' | Bar color |\n| className | string | '' | Additional CSS classes |\n\n### NetworkGraph Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| data | NetworkNode | required | Root node of the network |\n| width | number | 800 | Graph width |\n| height | number | 600 | Graph height |\n| nodeRadius | number | 20 | Radius of nodes |\n| nodeColor | string | '#3b82f6' | Color of nodes |\n| linkColor | string | '#94a3b8' | Color of links |\n| linkWidth | number | 2 | Width of links |\n| className | string | '' | Additional CSS classes |\n\n## License\n\nMIT","readmeFilename":"README.md"}