{"_id":"@aniruddha1806/boxplot-chart","_rev":"3-761775df300c2c9491dd6e30e1da3799","name":"@aniruddha1806/boxplot-chart","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@aniruddha1806/boxplot-chart","version":"1.0.0","keywords":["react","box-plot","chart","visualization","statistics","data-visualization"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/boxplot-chart@1.0.0","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"1e1701c983306e916c08a9b9adc96db8b0cea951","tarball":"https://registry.npmjs.org/@aniruddha1806/boxplot-chart/-/boxplot-chart-1.0.0.tgz","fileCount":14,"integrity":"sha512-MBTMUkYQZqT8xGTzX2PNrJFKBim5UQ3Fnblo6BpCSHqvpSr4WpExm+ulaIvOpRPv94F9NeQhYJ6HtQnrXj7S9g==","signatures":[{"sig":"MEUCIQCD1Khd/CE1h0eshrMCKQLCwmd2XGzZNmKkILSJGyrXNAIgHnl8OeqYRregQcSXhjBbWQYYKtp/b4iGkhIgA+S/Ppw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35135},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","scripts":{"build":"rollup -c && tsc --emitDeclarationOnly","clean":"rimraf dist","prebuild":"npm run clean"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A responsive and customizable Box Plot component for React","directories":{},"_nodeVersion":"20.14.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.4.0","eslint":"^8.15.0","rimraf":"^3.0.2","rollup":"^2.73.0","postcss":"^8.4.13","typescript":"^5.0.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","rollup-plugin-dts":"^4.2.1","rollup-plugin-terser":"^7.0.2","rollup-plugin-postcss":"^4.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/boxplot-chart_1.0.0_1744127872172_0.8843776723740899","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aniruddha1806/boxplot-chart","version":"1.0.1","keywords":["react","box-plot","chart","visualization","statistics","data-visualization"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/boxplot-chart@1.0.1","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"982399a820980b1683fb20bc1f25c0a56650210a","tarball":"https://registry.npmjs.org/@aniruddha1806/boxplot-chart/-/boxplot-chart-1.0.1.tgz","fileCount":14,"integrity":"sha512-qrOqWX7h326fJxEUTk5OOz1Oyemxwe0aDSVnNW5IbzKBJr/dBBfuTQT0Ms9jLsWebnp3gxC1VOMhAoCtpxOpkA==","signatures":[{"sig":"MEYCIQCFRc20pZ/PnVLa/kYlcshXPeTNMH+BCRwdNQCvk7fugQIhAPYTu3IVxEtrr8bYldlIkCRdzDNenmBjH5KVPyW/FPj4","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35536},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","scripts":{"build":"rollup -c && tsc --emitDeclarationOnly","clean":"rimraf dist","prebuild":"npm run clean"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A responsive and customizable Box Plot component for React","directories":{},"_nodeVersion":"20.14.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.4.0","eslint":"^8.15.0","rimraf":"^3.0.2","rollup":"^2.73.0","postcss":"^8.4.13","typescript":"^5.0.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","rollup-plugin-dts":"^4.2.1","rollup-plugin-terser":"^7.0.2","rollup-plugin-postcss":"^4.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/boxplot-chart_1.0.1_1744131418073_0.982608605427524","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aniruddha1806/boxplot-chart","version":"1.0.2","description":"A responsive and customizable Box Plot component for React","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c && tsc --emitDeclarationOnly","clean":"rimraf dist","prebuild":"npm run clean"},"keywords":["react","box-plot","chart","visualization","statistics","data-visualization"],"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.2.0","@types/react-dom":"^18.2.0","eslint":"^8.15.0","postcss":"^8.4.13","rimraf":"^3.0.2","rollup":"^2.73.0","rollup-plugin-dts":"^4.2.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","tslib":"^2.4.0","typescript":"^5.0.0"},"_id":"@aniruddha1806/boxplot-chart@1.0.2","gitHead":"a7346815540bdaae1449310d25fb483d6916a32f","_nodeVersion":"20.14.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-cpf/u0k3oLJF9niK47wgAfq1y4l5QuVU+jizvJiphZ5uYLPYOSzc6vuNOtWhtiyfTFPRmCxBDNwuYE7cz/ODCw==","shasum":"9ffb9d3338328ecb0876c121c179688ee89da4ae","tarball":"https://registry.npmjs.org/@aniruddha1806/boxplot-chart/-/boxplot-chart-1.0.2.tgz","fileCount":15,"unpackedSize":44464,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBtVLb2s1teYEqsMRvcZ8cbUEFQW1GqRWgRmeNzqunY1AiAVcb+RFmL2GbkhDEIdHp+FhaubKSes+4s+h9WPFsqe3g=="}]},"_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/boxplot-chart_1.0.2_1749140891857_0.7888101498262754"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-08T15:57:52.119Z","modified":"2025-06-05T16:28:12.216Z","1.0.0":"2025-04-08T15:57:52.347Z","1.0.1":"2025-04-08T16:56:58.262Z","1.0.2":"2025-06-05T16:28:12.061Z"},"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","keywords":["react","box-plot","chart","visualization","statistics","data-visualization"],"description":"A responsive and customizable Box Plot component for React","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"readme":"# React Box Plot Chart\r\n\r\nA powerful, customizable box plot chart component for React applications with TypeScript support. Perfect for visualizing statistical distributions, quartiles, outliers, and data spread across categories.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @aniruddha1806/boxplot-chart\r\n\r\n```\r\n\r\n## Features\r\n\r\n- 📊 Interactive box plot charts with statistical calculations\r\n- 📈 Automatic quartile, median, and outlier detection\r\n- ðŸŽĻ Customizable colors and styling for all chart elements\r\n- ðŸ“ą Responsive design with automatic scaling\r\n- ðŸ–ąïļ Interactive tooltips with detailed statistics\r\n- ðŸŽŊ Outlier visualization with toggle option\r\n- 📏 Customizable axis labels and titles\r\n- ðŸŽĻ CSS class support for advanced styling\r\n- 📝 TypeScript support with full type definitions\r\n- â™ŋ Accessibility features\r\n- ðŸŠķ Zero dependencies for chart rendering\r\n\r\n## Quick Start\r\n\r\n### Basic Box Plot\r\n\r\n```jsx\r\nimport BoxPlot from '@aniruddha1806/boxplot-chart';\r\n\r\nfunction App() {\r\n const data = {\r\n 'Group A': [12, 15, 18, 20, 22, 25, 28, 30, 35, 40],\r\n 'Group B': [8, 12, 16, 18, 20, 24, 26, 28, 32, 38],\r\n 'Group C': [10, 14, 17, 19, 21, 23, 27, 29, 33, 36]\r\n };\r\n\r\n return (\r\n \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` | `Dataset \\| string` | `{}` | Chart data as object or CSV string |\r\n| `width` | `number \\| string` | `\"100%\"` | Chart width |\r\n| `height` | `number \\| string` | `400` | Chart height |\r\n| `title` | `string` | `\"Box Plot\"` | Chart title |\r\n| `xAxisLabel` | `string` | `\"\"` | X-axis label |\r\n| `yAxisLabel` | `string` | `\"\"` | Y-axis label |\r\n\r\n### Styling Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `className` | `string` | `\"\"` | CSS class for container |\r\n| `boxClassName` | `string` | `\"\"` | CSS class for box elements |\r\n| `medianClassName` | `string` | `\"\"` | CSS class for median lines |\r\n| `whiskerClassName` | `string` | `\"\"` | CSS class for whiskers |\r\n| `outlierClassName` | `string` | `\"\"` | CSS class for outliers |\r\n\r\n### Color Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `colors.box` | `string` | `\"#3b82f6\"` | Box fill color |\r\n| `colors.median` | `string` | `\"#1e40af\"` | Median line color |\r\n| `colors.whisker` | `string` | `\"#93c5fd\"` | Whisker color |\r\n| `colors.outlier` | `string` | `\"#ef4444\"` | Outlier point color |\r\n\r\n### Feature Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `showOutliers` | `boolean` | `true` | Display outlier points |\r\n| `showTooltip` | `boolean` | `true` | Enable interactive tooltips |\r\n\r\n### Data Types\r\n\r\n```typescript\r\ntype DataPoint = number;\r\ntype Category = string;\r\ntype Dataset = Record;\r\n\r\ninterface BoxPlotStats {\r\n min: number;\r\n q1: number;\r\n median: number;\r\n q3: number;\r\n max: number;\r\n outliers: number[];\r\n}\r\n```\r\n\r\n## Examples\r\n\r\n### Basic Statistical Analysis\r\n\r\nSimple box plot for comparing distributions:\r\n\r\n```jsx\r\nimport BoxPlot from '@aniruddha1806/boxplot-chart';\r\n\r\nfunction StatisticalAnalysisExample() {\r\n const testScores = {\r\n 'Math': [78, 82, 85, 88, 90, 92, 95, 98, 100, 85, 87, 89],\r\n 'Science': [75, 80, 83, 86, 88, 91, 94, 96, 99, 82, 84, 87],\r\n 'English': [80, 83, 86, 89, 91, 93, 96, 98, 100, 88, 90, 92],\r\n 'History': [72, 76, 79, 82, 85, 88, 91, 94, 97, 80, 83, 86]\r\n };\r\n\r\n return (\r\n
\r\n

Student Test Scores by Subject

\r\n \r\n
\r\n );\r\n}\r\n```\r\n\r\n\r\n### Custom Styled Box Plot\r\n\r\nApply custom styling with CSS classes:\r\n\r\n```jsx\r\nimport BoxPlot from '@aniruddha1806/boxplot-chart';\r\nimport './custom-boxplot.css'; // Your custom CSS\r\n\r\nfunction CustomStyledExample() {\r\n const performanceData = {\r\n 'Q1': [85, 88, 92, 95, 98, 90, 87, 93, 96, 89],\r\n 'Q2': [88, 91, 95, 98, 101, 93, 90, 96, 99, 92],\r\n 'Q3': [90, 93, 97, 100, 103, 95, 92, 98, 101, 94],\r\n 'Q4': [92, 95, 99, 102, 105, 97, 94, 100, 103, 96]\r\n };\r\n\r\n return (\r\n \r\n );\r\n}\r\n```\r\n\r\nCSS file (custom-boxplot.css):\r\n```css\r\n.custom-boxplot {\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n border-radius: 12px;\r\n box-shadow: 0 8px 32px rgba(0,0,0,0.1);\r\n}\r\n\r\n.custom-boxplot .chart-title {\r\n color: white;\r\n font-size: 20px;\r\n font-weight: bold;\r\n}\r\n\r\n.custom-boxplot .axis-label {\r\n fill: white;\r\n font-weight: bold;\r\n}\r\n\r\n.custom-boxplot .tick text {\r\n fill: white;\r\n}\r\n\r\n.custom-box {\r\n stroke-width: 2;\r\n filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));\r\n}\r\n\r\n.custom-median {\r\n stroke-width: 3;\r\n}\r\n\r\n.custom-whisker {\r\n stroke-width: 2;\r\n stroke-dasharray: 5,5;\r\n}\r\n\r\n.custom-outlier {\r\n stroke: white;\r\n stroke-width: 2;\r\n filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));\r\n}\r\n\r\n.custom-outlier:hover {\r\n r: 6;\r\n transition: r 0.2s ease;\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 BoxPlot, { BoxPlotProps, BoxPlotStats, Dataset } from '@aniruddha1806/boxplot-chart';\r\nimport { useState, useEffect } from 'react';\r\n\r\ninterface AnalyticsData {\r\n categories: string[];\r\n values: number[][];\r\n}\r\n\r\ninterface ChartConfig {\r\n title: string;\r\n colors: {\r\n box: string;\r\n median: string;\r\n whisker: string;\r\n outlier: string;\r\n };\r\n}\r\n\r\nconst AnalyticsChart: React.FC = () => {\r\n const [data, setData] = useState({});\r\n const [stats, setStats] = useState>({});\r\n\r\n const calculateStats = (dataset: Dataset): Record => {\r\n const result: Record = {};\r\n \r\n Object.entries(dataset).forEach(([category, values]) => {\r\n const sorted = [...values].sort((a, b) => a - b);\r\n const q1 = sorted[Math.floor(sorted.length * 0.25)];\r\n const median = sorted[Math.floor(sorted.length * 0.5)];\r\n const q3 = sorted[Math.floor(sorted.length * 0.75)];\r\n const iqr = q3 - q1;\r\n \r\n const outliers = sorted.filter(v => \r\n v < q1 - 1.5 * iqr || v > q3 + 1.5 * iqr\r\n );\r\n \r\n result[category] = {\r\n min: Math.min(...sorted),\r\n q1,\r\n median,\r\n q3,\r\n max: Math.max(...sorted),\r\n outliers\r\n };\r\n });\r\n \r\n return result;\r\n };\r\n\r\n useEffect(() => {\r\n // Fetch or generate data\r\n const sampleData: Dataset = {\r\n 'Category A': [10, 15, 20, 25, 30],\r\n 'Category B': [12, 18, 22, 28, 32],\r\n 'Category C': [8, 14, 19, 24, 29]\r\n };\r\n \r\n setData(sampleData);\r\n setStats(calculateStats(sampleData));\r\n }, []);\r\n\r\n const chartConfig: ChartConfig = {\r\n title: 'Statistical Analysis',\r\n colors: {\r\n box: '#3b82f6',\r\n median: '#1e40af',\r\n whisker: '#93c5fd',\r\n outlier: '#ef4444'\r\n }\r\n };\r\n\r\n const boxPlotProps: BoxPlotProps = {\r\n data,\r\n title: chartConfig.title,\r\n colors: chartConfig.colors,\r\n width: '100%',\r\n height: 400,\r\n showTooltip: true,\r\n showOutliers: true,\r\n xAxisLabel: 'Categories',\r\n yAxisLabel: 'Values'\r\n };\r\n\r\n return (\r\n
\r\n \r\n
\r\n

Statistics Summary:

\r\n {Object.entries(stats).map(([category, stat]) => (\r\n
\r\n

{category}

\r\n

Median: {stat.median}, IQR: {stat.q3 - stat.q1}

\r\n
\r\n ))}\r\n
\r\n
\r\n );\r\n};\r\n```\r\n\r\n## Statistical Calculations\r\n\r\nThe component automatically calculates:\r\n\r\n### Quartiles\r\n- **Q1 (25th percentile)**: First quartile\r\n- **Q2 (50th percentile)**: Median\r\n- **Q3 (75th percentile)**: Third quartile\r\n\r\n### Outlier Detection\r\n- **Lower bound**: Q1 - 1.5 × IQR\r\n- **Upper bound**: Q3 + 1.5 × IQR\r\n- **Outliers**: Values outside these bounds\r\n\r\n### Whiskers\r\n- **Lower whisker**: Minimum non-outlier value\r\n- **Upper whisker**: Maximum non-outlier value\r\n\r\n","readmeFilename":"README.md"}