{"_id":"@aangelinux/chart-generator","name":"@aangelinux/chart-generator","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@aangelinux/chart-generator","version":"1.0.0","description":"Generates bar charts, line graphs, and pie charts.","type":"module","main":"lib/public/chart.js","directories":{"lib":"lib"},"jest":{"testEnvironment":"jsdom"},"scripts":{"test":"node --experimental-vm-modules node_modules/jest/bin/jest.js","dev":"vite","build":"vite build"},"repository":{"type":"git","url":"git+https://github.com/aangelinux/1DV610-L2.git"},"author":{"name":"Angelina Larsson"},"license":"MIT","devDependencies":{"jest":"^30.2.0","jest-environment-jsdom":"^30.2.0","vite":"^6.3.6"},"_id":"@aangelinux/chart-generator@1.0.0","gitHead":"e0c46210cb6a7bef9c13ab5daf6846f42e00a10d","bugs":{"url":"https://github.com/aangelinux/1DV610-L2/issues"},"homepage":"https://github.com/aangelinux/1DV610-L2#readme","_nodeVersion":"22.7.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-vsZgv04coL6XbiDja1kQnybzjXb0w7Abv4YLvEyDe3iyHJVeymhulGmLXMJzcApUNYctJ6GnvAFke1l5Jl2suw==","shasum":"5262deeb2fa771c17ff53f4fb44f44d2fc48e008","tarball":"https://registry.npmjs.org/@aangelinux/chart-generator/-/chart-generator-1.0.0.tgz","fileCount":14,"unpackedSize":40469,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAWDcAnbmzbx7DKwkh5nALomNcoo7gY6A3FJLvqjgEyaAiEA6eOeCbMkbwTrJRJluoyU+8Eq4pKK9lSQhTwI2hivZUQ="}]},"_npmUser":{"name":"aangelinux","email":"angelinalarsson03@gmail.com"},"maintainers":[{"name":"aangelinux","email":"angelinalarsson03@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/chart-generator_1.0.0_1759315076286_0.9630836450881239"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-01T10:37:56.208Z","1.0.0":"2025-10-01T10:37:56.491Z","modified":"2025-10-01T10:37:56.754Z"},"maintainers":[{"name":"aangelinux","email":"angelinalarsson03@gmail.com"}],"description":"Generates bar charts, line graphs, and pie charts.","homepage":"https://github.com/aangelinux/1DV610-L2#readme","repository":{"type":"git","url":"git+https://github.com/aangelinux/1DV610-L2.git"},"author":{"name":"Angelina Larsson"},"bugs":{"url":"https://github.com/aangelinux/1DV610-L2/issues"},"license":"MIT","readme":"# Chart Generator Library\r\n## Introduction\r\nThis library generates bar charts, line graphs, and pie charts from user data. The charts are rendered with SVG elements, and can be styled by passing an options object with user-defined values.  \r\n  \r\n![bar](./images/barChart.png)\r\n![line](./images/lineGraph.png)\r\n![pie](./images/pieChart.png)\r\n  \r\n\r\n## Installation\r\n```\r\nnpm install @aangelinux/chart-generator\r\n```\r\nIn your program:  \r\n```\r\nimport { Chart } from '@aangelinux/chart-generator'\r\n```\r\n  \r\n\r\n## Usage\r\n### Methods\r\nTo use the interface, you create an instance of class Chart. The interface contains three main methods:  \r\n- createBarChart(data, options)\r\n- createLineGraph(data, options)\r\n- createPieChart(data, options)\r\n  \r\nEach method accepts two parameters and returns a div element containing the chart. Only one chart can be rendered per Chart instance; if you call one of these methods on a Chart instance that already contains a rendered chart, it will be overwritten.  \r\n  \r\nTo create a simple bar chart with a custom style:  \r\n```\r\nconst data = [\r\n    {\r\n        name: \"Stockholm\",\r\n        value: 22\r\n    },\r\n    {\r\n        name: \"Oslo\",\r\n        value: 14\r\n    }\r\n]\r\n\r\nconst linearOptions = {\r\n    width: 500,\r\n    height: 250,\r\n    title: \"Monthly Rainfall By City\",\r\n    color: \"blue\",\r\n    font: \"Monaco, monospace\"\r\n}\r\n\r\nconst chart = new Chart()\r\nconst rainfallChart = chart.createBarChart(data, linearOptions)\r\n```\r\n  \r\n---\r\nStatic style rules are stored in a default CSS template, which can be replaced by calling:  \r\n- replaceStaticCSS(template)  \r\n  \r\nTo pass a custom stroke color for pie charts:  \r\n```\r\nconst template = `\r\n<style>\r\n    #slice {\r\n        stroke-color: blue;\r\n        stroke-width: 4;\r\n    }\r\n</style>\r\n`\r\n\r\nchart.replaceStaticCSS(template)\r\n```\r\nYou will need to rewrite all static CSS rules if you want to use your own template, or use from the default template: [template](https://github.com/aangelinux/1DV610-L2/blob/main/lib/styles/cssTemplate.js)\r\n  \r\n---\r\nPassing an options object is optional. It is also not required to pass an options object containing all the keys defined in the schema, the chart will use the default options as defined in the table below.  \r\nThe options object has two different schemas depending on the type of chart being created. See **Options Schemas** and **Data Schema** below.  \r\n  \r\nData and options are automatically validated before rendering the chart, and an exception is thrown if they fail any validation checks. If you want to validate either object before creating a chart, you can call these methods:\r\n- validateData(data)\r\n- validateOptions(options)\r\n  \r\nExample:  \r\n```\r\nchart.validateData(newData)\r\nchart.validateOptions(newOptions)\r\n```\r\n  \r\nFinally, you can call any of these helper methods:  \r\n- get chart()\r\n- resetChart()\r\n  \r\n### Default options\r\n| Key    | Values            |\r\n| ------ | ----------------- |\r\n| width  | 550               |\r\n| height | 300               |\r\n| radius | 150               |\r\n| title  | Data Chart        |\r\n| color  | darkred           |\r\n| font   | Monaco, monospace |\r\n   \r\n  \r\n    \r\n## Valid Objects\r\n| Object  | Type   | Elements                   | Limit  |\r\n| ------- | ------ | -------------------------- | ------ |\r\n| Data    | Array  | Objects                    | 2 - 10 |\r\n| Data[i] | Object | Keys (see Data Schema)     | 2      |\r\n| Options | Object | Keys (see Options Schemas) | 0 - 5  |\r\n  \r\n---\r\n### Data Schema\r\n| Key   | Type   | Allowed values           |\r\n| ----- | ------ | ------------------------ |\r\n| name  | string |                          |\r\n| value | number | (-1 000 000) - 1 000 000 |\r\n  \r\n---\r\n### Options Schemas\r\n#### Options: Linear Charts\r\n| Key    | Type   | Allowed values                                            |\r\n| ------ | ------ | --------------------------------------------------------- |\r\n| width  | number | 200 - 1000                                                |\r\n| height | number | 150 - 800                                                 |\r\n| title  | string |                                                           |\r\n| color  | string | darkred, red, orange, yellow, green, blue, indigo, violet |\r\n| font   | string | (Monaco, monospace), Arial, Verdana, Tahoma, Times New Roman, Georgia|\r\n  \r\n---\r\n#### Options: Radial Charts\r\n| Key    | Type   | Allowed values                                   |\r\n| ------ | ------ | ------------------------------------------------ |\r\n| radius | number | 100 - 400                                        |\r\n| title  | string |                                                  |\r\n| font   | string | (Monaco, monospace), Arial, Verdana, Tahoma, Times New Roman, Georgia |\r\n  \r\n### Errors\r\nIf any exceptions are thrown, the chart will not be rendered.  \r\nObject values that are outside the defined ranges will throw a RangeError.  \r\nObject keys that are not of the correct types will throw a TypeError.  \r\nObject keys that are invalid will throw a SyntaxError.  \r\n  \r\n  \r\n## Contributions\r\nContributions are welcome:  \r\n\r\n- Fork the repository and create a separate branch.\r\n- Make your changes, write clear commit messages.\r\n- Open a pull request and describe your changes.\r\n- For bugfixes/requests, open an issue.\r\n   \r\n  \r\n## Version\r\n1.0.0\r\n\r\n\r\n## License\r\nLicensed under the MIT License.  \r\n  \r\n\r\n## Badges\r\n![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)\r\n![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)\r\n![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)\r\n![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)\r\n![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)\r\n![Made with love and](https://img.shields.io/badge/KFC-F40027?style=for-the-badge&logo=kfc&logoColor=white)\r\n![Made with love and](https://img.shields.io/badge/Spotify-1ED760?&style=for-the-badge&logo=spotify&logoColor=white)","readmeFilename":"README.md","_rev":"1-80c740310c132bed6ff48ad41e89fcf0"}