{"_id":"@avoraui/av-chart-js","name":"@avoraui/av-chart-js","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@avoraui/av-chart-js","version":"0.0.1","description":"A customizable Angular Chart.js component","keywords":["angular","chart","chartjs"],"author":{"name":"Dileesha Ekanayake"},"license":"MIT","peerDependencies":{"@angular/common":"^20.1.0","@angular/core":"^20.1.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"publishConfig":{"access":"public"},"module":"fesm2022/avoraui-av-chart-js.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/avoraui-av-chart-js.mjs"}},"_id":"@avoraui/av-chart-js@0.0.1","gitHead":"580cd1a8bbb253d89d483fab183305e9412ff78a","_nodeVersion":"22.12.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-Ylfpz8AK6YOdDr+pCQs3nqjDA2rdAEfl5xDcABDMGOnmDKs/LBV0epseirvXHPjAsjiy+H/DNq7HnDi/OELaiA==","shasum":"18127397b863ad272816dd769c6d2e0ba4e45cb3","tarball":"https://registry.npmjs.org/@avoraui/av-chart-js/-/av-chart-js-0.0.1.tgz","fileCount":6,"unpackedSize":54989,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCnEY9bycpZ6ojTNeJgngglc/LVqKtAm1iOjbIAHU7NGQIgcViItACFaFbEzRljnHsvqKlrHR6XUiSS+DQI0X2skS8="}]},"_npmUser":{"name":"avoraui","email":"dileesha65@gmail.com"},"directories":{},"maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/av-chart-js_0.0.1_1753276635098_0.42546155899151805"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-23T13:17:15.002Z","0.0.1":"2025-07-23T13:17:15.277Z","modified":"2025-07-23T13:17:15.571Z"},"maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"description":"A customizable Angular Chart.js component","keywords":["angular","chart","chartjs"],"author":{"name":"Dileesha Ekanayake"},"license":"MIT","readme":"# AvChartJs Component (AvoraUI)\r\n\r\nA customizable Angular Chart.js component that supports various chart types with advanced features like dual Y-axes, tooltips, and PDF export. This component is built with Angular Material and integrates seamlessly with reactive forms.\r\n\r\n## Features\r\n\r\n- ✅ **Multiple Chart Types**: Supports pie, bar, doughnut, line, radar, polarArea, bubble, and scatter charts\r\n- ✅ **Customizable Tooltips**: Configurable tooltips with currency formatting and percentage calculations\r\n- ✅ **Dual Y-Axis Support**: Allows two Y-axes for complex datasets\r\n- ✅ **PDF Export**: Export charts as PDF with high-quality rendering\r\n- ✅ **Responsive Design**: Adjustable responsiveness and aspect ratio\r\n- ✅ **Material Design**: Built with Angular Material components\r\n- ✅ **Dynamic Updates**: Updates chart data and configuration dynamically\r\n\r\n## Dependencies\r\n\r\nThis component requires the following Angular Material modules:\r\n\r\n```typescript\r\nimport { MatCard, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card';\r\nimport { MatButton } from '@angular/material/button';\r\nimport { MatIcon } from '@angular/material/icon';\r\n```\r\n\r\nExternal libraries:\r\n- Chart.js (via CDN: `https://cdn.jsdelivr.net/npm/chart.js`)\r\n- html2canvas (`^1.4.1`)\r\n- jspdf (`^3.0.1`)\r\n\r\n## Installation\r\n\r\n1. Ensure you have Angular Material installed in your project\r\n2. Include Chart.js in your `index.html`:\r\n   ```html\r\n   <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\r\n   ```\r\n3. Install dependencies:\r\n   ```bash\r\n   npm install html2canvas@^1.4.1 jspdf@^3.0.1\r\n   ```\r\n4. Import the component in your module or use it directly (standalone component)\r\n\r\n## Usage\r\n\r\n### Basic Usage\r\n\r\n```html\r\n<av-chart-js\r\n  chartTitle=\"Title\"\r\n  [show_print_button]=\"true\"\r\n  [chartType]=\"'pie'\"\r\n  [data]=\"[12, 15, 20, 25, 30]\"\r\n  [labels]=\"['Admins', 'Teachers', 'Students', 'Clark', 'Supporters']\"\r\n  [legend]=\"'left'\"\r\n  [responsive]=\"true\">\r\n</av-chart-js>\r\n```\r\n\r\n### Advanced Usage\r\n\r\n```typescript\r\n// Component\r\nexport class MyComponent {\r\n  bookingsDatasets: ChartDataset[] = [\r\n    {\r\n      label: 'Bookings',\r\n      data: [45, 78, 66, 89, 92, 110, 98],\r\n      borderColor: '#4c6ef5',\r\n      backgroundColor: 'rgba(76, 110, 245, 0.1)',\r\n      borderWidth: 3,\r\n      tension: 0.3,\r\n      fill: true\r\n    },\r\n    {\r\n      label: 'Revenue ($)',\r\n      data: [8500, 14200, 12400, 16800, 17500, 20800, 19200],\r\n      borderColor: '#10b981',\r\n      backgroundColor: 'rgba(16, 185, 129, 0.1)',\r\n      borderWidth: 3,\r\n      tension: 0.3,\r\n      fill: true,\r\n      yAxisID: 'y1'\r\n    }\r\n  ];\r\n\r\n  labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];\r\n}\r\n```\r\n\r\n```html\r\n<!-- Template -->\r\n<av-chart-js\r\n  chartTitle=\"Title\"\r\n  [show_print_button]=\"true\"\r\n  [chartType]=\"'line'\"\r\n  [labels]=\"labels\"\r\n  [datasets]=\"bookingsDatasets\"\r\n  [legend]=\"'top'\"\r\n  [dualYAxis]=\"true\"\r\n  [maintainAspectRatio]=\"false\">\r\n</av-chart-js>\r\n```\r\n\r\n## Input Properties\r\n\r\n| Property | Type | Required | Default | Description |\r\n|----------|------|----------|---------|-------------|\r\n| `chartType` | `ChartType` | No | `'bar'` | Type of chart to render |\r\n| `chartTitle` | `string` | No | `''` | Title of the chart |\r\n| `show_print_button` | `boolean` | No | `false` | Whether to show the print button |\r\n| `data` | `number[]` | No | `undefined` | Data array for single dataset |\r\n| `backgroundColor` | `string[]` | No | `undefined` | Background colors for data |\r\n| `borderColor` | `string[]` | No | `undefined` | Border colors for data |\r\n| `borderWidth` | `number` | No | `1` | Width of data borders |\r\n| `borderRadius` | `number` | No | `0` | Radius for bar chart corners |\r\n| `toolTipOptions` | `any` | No | `{...}` | Custom tooltip configuration |\r\n| `datasets` | `ChartDataset[]` | No | `undefined` | Array of dataset objects |\r\n| `labels` | `string[]` | Yes | `undefined` | Labels for the chart data |\r\n| `X_Axis_title` | `AxisTitles` | No | `undefined` | Title and font size for X-axis |\r\n| `Y_Axis_title` | `AxisTitles` | No | `undefined` | Title and font size for Y-axis |\r\n| `legend` | `Legend` | No | `'top'` | Position of the legend |\r\n| `responsive` | `boolean` | No | `true` | Whether the chart is responsive |\r\n| `beginAtZero` | `boolean` | No | `true` | Whether Y-axis starts at zero |\r\n| `maintainAspectRatio` | `boolean` | No | `false` | Whether to maintain aspect ratio |\r\n| `cutout` | `string` | No | `undefined` | Cutout percentage for doughnut charts |\r\n| `dualYAxis` | `boolean` | No | `false` | Enable dual Y-axes |\r\n| `Y1_Axis_title` | `AxisTitles` | No | `undefined` | Title and font size for second Y-axis |\r\n\r\n## Component Behavior\r\n\r\n### Chart Rendering\r\n- Renders the specified chart type with provided data and labels\r\n- Supports dynamic updates when inputs change\r\n\r\n### Tooltip Customization\r\n- Displays tooltips with formatted numbers and percentages\r\n- Customizable via `toolTipOptions` input\r\n\r\n### Print Functionality\r\n- Exports the chart as a PDF when the print button is clicked\r\n- Uses html2canvas and jsPDF for high-quality rendering\r\n\r\n### Form Integration\r\nThe component can be integrated with forms, though it primarily serves as a display component.\r\n\r\n## Data Format\r\n\r\n**Input**:\r\n- `data`: Array of numbers for a single dataset\r\n- `datasets`: Array of `ChartDataset` objects for multiple datasets\r\n- `labels`: Array of strings for chart labels\r\n\r\n**Output**: No direct output; chart is rendered visually.\r\n\r\n## Error Handling\r\n\r\nThe component includes error handling for:\r\n- Missing `labels` or `data/datasets` (logs error and prevents rendering)\r\n- PDF generation errors (logs error to console)\r\n\r\n## Memory Management\r\n\r\nThe component automatically:\r\n- Destroys the previous chart instance before redrawing\r\n- Manages canvas references via ViewChild\r\n\r\n## Styling\r\n\r\nThe component uses CSS classes that can be customized:\r\n\r\n- `.chart-card` - Main card container\r\n- `.header-container` - Header section\r\n- `.centered-title` - Chart title styling\r\n- `.chart-card-content` - Chart content area\r\n\r\n## Browser Compatibility\r\n\r\nThis component uses modern browser APIs:\r\n- Chart.js for charting\r\n- html2canvas and jsPDF for PDF export\r\n\r\nEnsure your target browsers support these libraries or include appropriate polyfills.\r\n\r\n## Requirements\r\n\r\n- Angular 17+\r\n- Angular Material\r\n- Chart.js (via CDN)\r\n- html2canvas (^1.4.1)\r\n- jspdf (^3.0.1)\r\n\r\n## Browser Support\r\n\r\n- Chrome/Edge 57+\r\n- Firefox 52+\r\n- Safari 10.1+\r\n\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License - see the LICENSE file for details.\r\n\r\n## Changelog\r\n\r\n### v0.0.1\r\n- Initial release\r\n- Basic chart rendering with multiple types\r\n- Tooltip and legend customization\r\n- PDF export functionality\r\n- Material design integration\r\n","readmeFilename":"README.md","_rev":"1-2b6851f01aafe719135034e868a03340"}