{"_id":"@aniruddha1806/pie-chart","_rev":"4-c1e73edf6d6b702f831f994760250a96","name":"@aniruddha1806/pie-chart","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@aniruddha1806/pie-chart","version":"1.0.0","keywords":["react","chart","pie-chart","donut-chart","visualization","data-visualization","svg","lightweight"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/pie-chart@1.0.0","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"4798844d6286f27c68d514e9ec4bd85e672a3d12","tarball":"https://registry.npmjs.org/@aniruddha1806/pie-chart/-/pie-chart-1.0.0.tgz","fileCount":11,"integrity":"sha512-bwV5x9sVRsh6MYNSRxNvSFgzUh4IdjNaIucUHwHmZZnPJXU3TjZ3I4Hmm2gnZuz8cHjOtZ+4eCHraDyiwZHEHQ==","signatures":[{"sig":"MEQCIEYnQ3L3O3VXRPMVAMtgR1834yPwpbgmwPZmqi5G+v8YAiAnvDDkguMLg/KPSagbVfklPEjknkJXEY2Arxz9IMO3fg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":97692},"main":"dist/cjs/index.js","type":"module","types":"dist/index.d.ts","module":"dist/esm/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A lightweight, interactive, and reusable Pie Chart component for React with no external dependencies","directories":{},"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.4.0"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","tslib":"^2.4.0","rollup":"^2.75.0","react-dom":"^18.0.0","typescript":"^4.7.2","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","rollup-plugin-dts":"^4.2.2","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-typescript":"^8.3.2","@rollup/plugin-node-resolve":"^13.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/pie-chart_1.0.0_1744141540394_0.18077393715162815","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aniruddha1806/pie-chart","version":"1.0.1","keywords":["react","chart","pie-chart","donut-chart","visualization","data-visualization","svg","lightweight"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/pie-chart@1.0.1","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"6ba78e653592762f98bacfbb97b24f288e35920f","tarball":"https://registry.npmjs.org/@aniruddha1806/pie-chart/-/pie-chart-1.0.1.tgz","fileCount":11,"integrity":"sha512-ayUMs/c5FwjNAHyVBANeGalN7v1K/gyTF3yvcIyuUaa64NrxDWxoko8NgMaUB1oT/bkiF+wkYsftEVV34wXrmg==","signatures":[{"sig":"MEQCIAsPvx29k+lV3iQ6/iw689+vyXjnAw8TqgR38FOncvSsAiAxMhkBAFqTynHEuU7qjibdYbJyDyEZx7DtdKPneD/2nA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":98895},"main":"dist/cjs/index.js","type":"module","types":"dist/index.d.ts","module":"dist/esm/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A lightweight, interactive, and reusable Pie Chart component for React with no external dependencies","directories":{},"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.4.0"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","tslib":"^2.4.0","rollup":"^2.75.0","react-dom":"^18.0.0","typescript":"^4.7.2","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","rollup-plugin-dts":"^4.2.2","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-typescript":"^8.3.2","@rollup/plugin-node-resolve":"^13.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/pie-chart_1.0.1_1744142212417_0.9204043682097678","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aniruddha1806/pie-chart","version":"1.0.2","keywords":["react","chart","pie-chart","donut-chart","visualization","data-visualization","svg","lightweight"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/pie-chart@1.0.2","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"78e3ce1f7be7ff57a9cfc403dc49a2285ecbe799","tarball":"https://registry.npmjs.org/@aniruddha1806/pie-chart/-/pie-chart-1.0.2.tgz","fileCount":11,"integrity":"sha512-NgHTA9NvvikXQgMwpzDLBen6vOp1MtibOZcDp1m6HJCQtXbTIguOdslvvARpPZD7G3w+yt99vJoQK96eM5knRw==","signatures":[{"sig":"MEUCIFLZDVJTVSyAqY9FK/gqaGsN8qux8SUXBHQnHsbroeTqAiEAtvB6fTZlTQszEIA2MYOhs8IESOVlOZgic+wSMjmzozA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":100801},"main":"dist/cjs/index.js","type":"module","types":"dist/index.d.ts","module":"dist/esm/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A lightweight, interactive, and reusable Pie Chart component for React with no external dependencies","directories":{},"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.4.0"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","tslib":"^2.4.0","rollup":"^2.75.0","react-dom":"^18.0.0","typescript":"^4.7.2","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","rollup-plugin-dts":"^4.2.2","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-typescript":"^8.3.2","@rollup/plugin-node-resolve":"^13.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/pie-chart_1.0.2_1744142508251_0.47470078662239334","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@aniruddha1806/pie-chart","version":"1.0.3","description":"A lightweight, interactive, and reusable Pie Chart component for React with no external dependencies","main":"dist/cjs/index.js","type":"module","module":"dist/esm/index.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","test":"echo \"Error: no test specified\" && exit 1","prepublishOnly":"npm run build"},"keywords":["react","chart","pie-chart","donut-chart","visualization","data-visualization","svg","lightweight"],"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-node-resolve":"^13.3.0","@rollup/plugin-typescript":"^8.3.2","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","react":"^18.0.0","react-dom":"^18.0.0","rollup":"^2.75.0","rollup-plugin-dts":"^4.2.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-terser":"^7.0.2","typescript":"^4.7.2","tslib":"^2.4.0"},"dependencies":{"tslib":"^2.4.0"},"_id":"@aniruddha1806/pie-chart@1.0.3","_nodeVersion":"20.14.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-3eSVZl3E9OnAyIwDOlj+4kOkdkZwyePdxieHZex9Ai3BeaKMPJS87keaD5kVWV10Ks7tTFOYqy5MWlgqFvmD5g==","shasum":"8838d16d6fa089755e03f67c20ce87d830d91940","tarball":"https://registry.npmjs.org/@aniruddha1806/pie-chart/-/pie-chart-1.0.3.tgz","fileCount":12,"unpackedSize":109402,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHgOiZsIQQiWnp1mqarYrCocpViJxbMm7xegxL9h39DpAiEAmI970WSZbtgoXOafvjOfK5+CbEmLPCFbSbU7HH5z3co="}]},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"directories":{},"maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/pie-chart_1.0.3_1749144904372_0.5027067897030635"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-08T19:45:40.339Z","modified":"2025-06-05T17:35:04.771Z","1.0.0":"2025-04-08T19:45:40.591Z","1.0.1":"2025-04-08T19:56:52.600Z","1.0.2":"2025-04-08T20:01:48.551Z","1.0.3":"2025-06-05T17:35:04.571Z"},"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","keywords":["react","chart","pie-chart","donut-chart","visualization","data-visualization","svg","lightweight"],"description":"A lightweight, interactive, and reusable Pie Chart component for React with no external dependencies","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"readme":"# React Pie Chart\r\n\r\nA powerful, customizable pie chart component for React applications with TypeScript support. Perfect for visualizing proportional data with interactive features, animations, and flexible styling options.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @aniruddha1806/pie-chart\r\n```\r\n\r\n## Features\r\n\r\n- ðŸĨ§ Interactive pie charts and donut charts\r\n- 🎭 Smooth animations with multiple easing options\r\n- ðŸ–ąïļ Hover effects and click handlers\r\n- 📊 Interactive tooltips with customizable formatting\r\n- 🏷ïļ Configurable legend with multiple positioning options\r\n- ðŸŽĻ Extensive customization (colors, radius, thickness, start angle)\r\n- ðŸ“ą Responsive SVG-based rendering\r\n- 🔄 Scroll-triggered animations\r\n- 📝 TypeScript support with full type definitions\r\n- â™ŋ Accessibility-friendly structure\r\n- ðŸŠķ Zero dependencies for chart rendering\r\n\r\n## Quick Start\r\n\r\n### Basic Pie Chart\r\n\r\n```jsx\r\nimport PieChart from '@aniruddha1806/pie-chart';\r\n\r\nfunction App() {\r\n const data = [\r\n { label: 'Desktop', value: 45, color: '#3b82f6' },\r\n { label: 'Mobile', value: 35, color: '#10b981' },\r\n { label: 'Tablet', value: 20, color: '#f59e0b' }\r\n ];\r\n\r\n return (\r\n \r\n );\r\n}\r\n```\r\n\r\n### Donut Chart\r\n\r\n```jsx\r\nimport PieChart from '@aniruddha1806/pie-chart';\r\n\r\nfunction DonutExample() {\r\n const data = [\r\n { label: 'Sales', value: 120000 },\r\n { label: 'Marketing', value: 80000 },\r\n { label: 'Development', value: 150000 },\r\n { label: 'Support', value: 60000 }\r\n ];\r\n\r\n return (\r\n \r\n );\r\n}\r\n```\r\n\r\n## Props\r\n\r\n### Core Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `data` | `PieChartData[]` | `required` | Chart data array |\r\n| `width` | `number \\| string` | `\"100%\"` | Chart width |\r\n| `height` | `number \\| string` | `\"100%\"` | Chart height |\r\n| `radius` | `number` | `50` | Chart radius (SVG units) |\r\n\r\n### Styling Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `className` | `string` | `undefined` | CSS class for container |\r\n| `sliceClassName` | `string` | `undefined` | CSS class for slices |\r\n| `tooltipClassName` | `string` | `undefined` | CSS class for tooltips |\r\n| `legendClassName` | `string` | `undefined` | CSS class for legend |\r\n| `colors` | `string[]` | `default palette` | Color palette for slices |\r\n\r\n### Donut Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `donut` | `boolean` | `false` | Enable donut chart mode |\r\n| `donutThickness` | `number` | `30` | Thickness of donut ring |\r\n\r\n### Animation Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `animate` | `boolean` | `true` | Enable animations |\r\n| `animationDuration` | `number` | `500` | Animation duration (ms) |\r\n| `animationEasing` | `\"linear\" \\| \"easeIn\" \\| \"easeOut\" \\| \"easeInOut\"` | `\"easeOut\"` | Animation easing |\r\n| `animateOnScroll` | `boolean` | `true` | Trigger animation on scroll |\r\n| `startAngle` | `number` | `0` | Starting angle (degrees) |\r\n\r\n### Legend Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `showLegend` | `boolean` | `true` | Show legend |\r\n| `legendPosition` | `\"top\" \\| \"right\" \\| \"bottom\" \\| \"left\"` | `\"right\"` | Legend position |\r\n\r\n### Interaction Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `onSliceClick` | `(data: PieChartData, index: number) => void` | `undefined` | Slice click handler |\r\n| `tooltipFormat` | `(label: string, value: number, percentage: number) => string` | `undefined` | Custom tooltip formatter |\r\n| `percentageFormatter` | `(percentage: number) => string` | `default` | Percentage formatter |\r\n\r\n### Data Types\r\n\r\n```typescript\r\ntype PieChartData = {\r\n label: string;\r\n value: number;\r\n color?: string;\r\n};\r\n```\r\n\r\n## Examples\r\n\r\n### Sales Dashboard\r\n\r\nComplete sales breakdown with interactive features:\r\n\r\n```jsx\r\nimport { useState } from 'react';\r\nimport PieChart from '@aniruddha1806/pie-chart';\r\n\r\nfunction SalesDashboard() {\r\n const [selectedSlice, setSelectedSlice] = useState(null);\r\n\r\n const salesData = [\r\n { label: 'Online Sales', value: 450000, color: '#3b82f6' },\r\n { label: 'Retail Stores', value: 320000, color: '#10b981' },\r\n { label: 'Wholesale', value: 180000, color: '#f59e0b' },\r\n { label: 'Direct Sales', value: 120000, color: '#ef4444' },\r\n { label: 'Partnerships', value: 80000, color: '#8b5cf6' }\r\n ];\r\n\r\n const handleSliceClick = (data, index) => {\r\n setSelectedSlice(data);\r\n console.log(`Clicked on ${data.label}: $${data.value.toLocaleString()}`);\r\n };\r\n\r\n const formatTooltip = (label, value, percentage) => {\r\n return `${label}: $${value.toLocaleString()} (${percentage.toFixed(1)}%)`;\r\n };\r\n\r\n return (\r\n
\r\n

Sales Breakdown by Channel

\r\n \r\n \r\n \r\n {selectedSlice && (\r\n
\r\n

Selected: {selectedSlice.label}

\r\n

Revenue: ${selectedSlice.value.toLocaleString()}

\r\n

Percentage: {((selectedSlice.value / salesData.reduce((sum, item) => sum + item.value, 0)) * 100).toFixed(1)}%

\r\n
\r\n )}\r\n
\r\n );\r\n}\r\n```\r\n\r\n\r\n## TypeScript Usage\r\n\r\nThe component provides full TypeScript support:\r\n\r\n```typescript\r\nimport PieChart, { PieChartData, PieChartProps } from '@aniruddha1806/pie-chart';\r\nimport { useState, useCallback } from 'react';\r\n\r\ninterface SalesData {\r\n category: string;\r\n amount: number;\r\n color?: string;\r\n}\r\n\r\ninterface ChartConfig {\r\n title: string;\r\n showPercentages: boolean;\r\n animationSettings: {\r\n duration: number;\r\n easing: \"linear\" | \"easeIn\" | \"easeOut\" | \"easeInOut\";\r\n };\r\n}\r\n\r\nconst SalesAnalytics: React.FC = () => {\r\n const [salesData, setSalesData] = useState([\r\n { category: 'Product A', amount: 150000, color: '#3b82f6' },\r\n { category: 'Product B', amount: 120000, color: '#10b981' },\r\n { category: 'Product C', amount: 90000, color: '#f59e0b' }\r\n ]);\r\n\r\n const transformToChartData = useCallback((data: SalesData[]): PieChartData[] => {\r\n return data.map(item => ({\r\n label: item.category,\r\n value: item.amount,\r\n color: item.color\r\n }));\r\n }, []);\r\n\r\n const handleSliceClick = useCallback((data: PieChartData, index: number): void => {\r\n console.log(`Clicked on \\${data.label}: \\${data.value}`);\r\n // Handle slice click logic\r\n }, []);\r\n\r\n const formatTooltip = useCallback((\r\n label: string, \r\n value: number, \r\n percentage: number\r\n ): string => {\r\n return `\\${label}: $\\${value.toLocaleString()} (\\${percentage.toFixed(1)}%)`;\r\n }, []);\r\n\r\n const chartConfig: ChartConfig = {\r\n title: 'Sales by Product',\r\n showPercentages: true,\r\n animationSettings: {\r\n duration: 1000,\r\n easing: 'easeInOut'\r\n }\r\n };\r\n\r\n const chartData = transformToChartData(salesData);\r\n\r\n const pieChartProps: PieChartProps = {\r\n data: chartData,\r\n width: 500,\r\n height: 400,\r\n donut: true,\r\n donutThickness: 50,\r\n animate: true,\r\n animationDuration: chartConfig.animationSettings.duration,\r\n animationEasing: chartConfig.animationSettings.easing,\r\n onSliceClick: handleSliceClick,\r\n tooltipFormat: formatTooltip,\r\n legendPosition: 'right',\r\n showLegend: true\r\n };\r\n\r\n return (\r\n
\r\n

{chartConfig.title}

\r\n \r\n \r\n
\r\n

Sales Summary:

\r\n {salesData.map(item => (\r\n
\r\n {item.category}: ${item.amount.toLocaleString()}\r\n
\r\n ))}\r\n
\r\n
\r\n );\r\n};\r\n```\r\n\r\n","readmeFilename":"README.md"}