{"_id":"@benlau/tech-radar","_rev":"1-3409db0f3734a789493d825850979503","name":"@benlau/tech-radar","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.1-alpha.0":{"name":"@benlau/tech-radar","version":"0.0.1-alpha.0","keywords":["tech-radar","d3"],"author":{"name":"Ben Lau","email":"xbenlau@gmail.com"},"license":"MIT","_id":"@benlau/tech-radar@0.0.1-alpha.0","maintainers":[{"name":"benlau","email":"xbenlau@gmail.com"}],"dist":{"shasum":"e5e29cfb8822c3cf1f4b9b761f3ee0cc7feb5571","tarball":"https://registry.npmjs.org/@benlau/tech-radar/-/tech-radar-0.0.1-alpha.0.tgz","fileCount":24,"integrity":"sha512-BN5bDClhW8vTwgzvn2lzdCBSrihwOMFrkwYMiiwyyQgGbpCZH6uRX4su3PCzSxMMAvOJp9rafuQ0UDLxz9tu0A==","signatures":[{"sig":"MEYCIQCqq978Rz+bVE10SjszZLTJ6qQCuTtCM3GKNGRhTc2eOQIhAJGbLcuAIZMFNSCk9jWWzwcsvo9n+sAsp2FwGO5pjDcR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1377039},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","browser":"dist/index.umd.js","scripts":{"lint":"eslint src/**/*.ts stories/**/*.ts","pack":"npm pack","build":"rollup -c","format":"prettier --write \"src/**/*.ts\" \"stories/**/*.ts\"","prettier":"prettier --list-different \"src/*.{js,jsx,ts,tsx,css,scss}\" \"stories/*.{js,jsx,ts,tsx,css,scss}\"","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"benlau","email":"xbenlau@gmail.com"},"_npmVersion":"10.2.3","description":"Tech Radar Renderer","directories":{},"_nodeVersion":"20.10.0","dependencies":{"d3":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^7.32.0","rollup":"^2.75.0","prettier":"^2.3.2","@types/d3":"^7.0.0","storybook":"^8.3.5","typescript":"^4.3.5","@babel/core":"^7.15.0","@storybook/html":"^8.3.5","@storybook/test":"^8.3.5","@storybook/blocks":"^8.3.5","rollup-plugin-dts":"^4.2.2","@rollup/plugin-terser":"^0.4.0","@storybook/addon-links":"^8.3.5","@rollup/plugin-commonjs":"^22.0.2","eslint-plugin-storybook":"^0.9.0","@chromatic-com/storybook":"^1.9.0","@storybook/html-webpack5":"^8.3.5","@rollup/plugin-typescript":"^8.3.2","@typescript-eslint/parser":"^4.29.2","@rollup/plugin-node-resolve":"^13.3.0","@storybook/addon-essentials":"^8.3.5","@storybook/addon-interactions":"^8.3.5","@typescript-eslint/eslint-plugin":"^4.29.2","@storybook/addon-webpack5-compiler-swc":"^1.0.5"},"_npmOperationalInternal":{"tmp":"tmp/tech-radar_0.0.1-alpha.0_1728836889471_0.46249353610396526","host":"s3://npm-registry-packages"}},"0.1.0":{"name":"@benlau/tech-radar","version":"0.1.0","description":"Tech Radar Renderer","main":"dist/index.js","module":"dist/index.esm.js","browser":"dist/index.umd.js","types":"dist/index.d.ts","homepage":"https://github.com/benlau/tech-radar","scripts":{"build":"rollup -c","pack":"npm pack","lint":"eslint src/**/*.ts stories/**/*.ts","format":"prettier --write \"src/**/*.ts\" \"stories/**/*.ts\"","prettier":"prettier --list-different \"src/*.{js,jsx,ts,tsx,css,scss}\" \"stories/*.{js,jsx,ts,tsx,css,scss}\"","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"keywords":["tech-radar","d3"],"author":{"name":"Ben Lau","email":"xbenlau@gmail.com"},"license":"MIT","devDependencies":{"@babel/core":"^7.15.0","@chromatic-com/storybook":"^1.9.0","@rollup/plugin-commonjs":"^22.0.2","@rollup/plugin-node-resolve":"^13.3.0","@rollup/plugin-terser":"^0.4.0","@rollup/plugin-typescript":"^8.3.2","@storybook/addon-essentials":"^8.3.5","@storybook/addon-interactions":"^8.3.5","@storybook/addon-links":"^8.3.5","@storybook/addon-webpack5-compiler-swc":"^1.0.5","@storybook/blocks":"^8.3.5","@storybook/html":"^8.3.5","@storybook/html-webpack5":"^8.3.5","@storybook/test":"^8.3.5","@types/d3":"^7.0.0","@typescript-eslint/eslint-plugin":"^4.29.2","@typescript-eslint/parser":"^4.29.2","eslint":"^7.32.0","eslint-plugin-storybook":"^0.9.0","prettier":"^2.3.2","rollup":"^2.75.0","rollup-plugin-dts":"^4.2.2","storybook":"^8.3.5","typescript":"^4.3.5"},"dependencies":{"d3":"^7.0.0"},"_id":"@benlau/tech-radar@0.1.0","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-XyktdSDfqAjr+FOmusywgVEzumS7HdzkrX9oLRijqu1CHlo6LZZSZk/7MPv6Vwh9SnBBXMEqY0/nkmBV5QrFRA==","shasum":"de42a0ee75fd5ff65f8d2a6cfb44f72c52d98e49","tarball":"https://registry.npmjs.org/@benlau/tech-radar/-/tech-radar-0.1.0.tgz","fileCount":25,"unpackedSize":1381480,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlevWqTUDsyKxA7czwkfYC6OFH34va/RvNWmhPKBFLuwIgEVQvi9yWwjTBjYp+0brLjgV5pkrOU729L99G54EzC6E="}]},"_npmUser":{"name":"benlau","email":"xbenlau@gmail.com"},"directories":{},"maintainers":[{"name":"benlau","email":"xbenlau@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tech-radar_0.1.0_1728879535639_0.18808992586126738"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-13T16:28:09.369Z","modified":"2024-10-14T04:18:56.150Z","0.0.1-alpha.0":"2024-10-13T16:28:09.761Z","0.1.0":"2024-10-14T04:18:55.982Z"},"author":{"name":"Ben Lau","email":"xbenlau@gmail.com"},"license":"MIT","keywords":["tech-radar","d3"],"description":"Tech Radar Renderer","maintainers":[{"name":"benlau","email":"xbenlau@gmail.com"}],"readme":"# Tech Radar Renderer\n\nThis library provides a customizable Tech Radar visualization tool. It allows you to create and render a tech radar chart with configurable blips, categories, and statuses.\n\n**Full Size Tech Radar**\n\n\n\n**Partial Tech Radar**\n\n\n\n**Live Demo**\n\n- [Storybook](https://benlau.github.io/tech-radar)\n\n## Installation\n\nTo install the Tech Radar library, use npm:\n\n```\nnpm i @benlau/tech-radar\n```\n\n## Installation via CDN\n\nIf you prefer not to use npm, you can also include the Tech Radar library directly in your HTML file using a CDN. This method is suitable for quickly prototyping or for projects that don't use a module bundler.\n\nAdd the following script tag to your HTML file:\n\n```\n\n```\n\n## Usage\n\nHere's a basic example of how to use the Tech Radar library:\n\n```typescript\nimport { TechRadar, BlipItem, TechRadarConfig } from '@benlau/tech-radar';\n\n// Define your blip items\nconst blipItems: BlipItem[] = [\n { name: \"React\", category: \"languages\", status: \"adopt\" },\n { name: \"Angular\", category: \"languages\", status: \"assess\" },\n { name: \"Svelte\", category: \"languages\", status: \"trial\" }, \n { name: \"Vue\", category: \"languages\", status: \"hold\", angle: 0.5, radius: 0.3 },\n // The optional `angle` and `radius` properties allow for manual positioning of blips on the Tech Radar:\n // - `angle`: Specifies the angular position of the blip in the category. It's a value between 0 and 1.\n // - `radius`: Determines how far the blip is from the start point inside the category. It's a value between 0 and 1.\n // If these are not provided, the position will be determined using a number generated from the name.\n];\n\n// Obtain the default configuration to render the radar\nconst config = TechRadar.getDefaultConfig();\n\n// You may modify the config to render the radar in different style\n\n// Create a new TechRadar instance using default config\nconst techRadar = new TechRadar(blipItems, config);\n// Render the Tech Radar\ntechRadar.render('#tech-radar-container');\n```\n\nMake sure you have a container element in your HTML:\n\n```html\n\n```\n\n\nIf you're using the CDN version, the `TechRadar` object is globally available. Here's how you can use it:\n\n```typescript\nconst techRadar = new TechRadar.TechRadar(blipItems);\n```\n\nSee the demo example at [demo/umd/index.html](./demo/umd/index.html)\n\n## Downloading the Tech Radar as SVG\n\nThe Tech Radar library provides a convenient method to download the rendered radar as an SVG file. This is useful for sharing or embedding the radar in other documents.\n\nTo download the Tech Radar as an SVG file, you can use the `downloadSVG()` method:\n\n```typescript\ntechRadar.render(\"#tech-radar\");\ndocument.getElementById(\"download-button\").addEventListener(\"click\", () => {\n techRadar1.downloadSVG(); // You must run render function first\n});\n```\n\n## Customization\n\nYou can customize the Tech Radar by passing a configuration object when creating a new TechRadar instance. The configuration object allows you to modify various aspects of the chart, such as colors, sizes, and labels.\n\n```\nexport interface TechRadarConfig {\n // Size of the canvas for the Tech Radar\n canvasSize: { width: number; height: number };\n // Determines how the radar scales within its container. It can be \"none\" | \"scaleToFit\"\n scaleMode: keyof typeof TechRadarScaleMode;\n\n // Width of the radar's circular lines\n strokeWidth: number;\n // Color of the radar's circular lines\n strokeColour: string;\n\n // Default color of the blips\n blipColor: string;\n // Color of blips when hovered over\n blipHoverColor: string;\n // Font size for blip labels\n blipFontSize: number;\n\n // Size of the blip points\n blipPointSize: number;\n // Distance between blip points and their labels\n blipLabelOffset: number;\n\n // Define the statuses used in the radar\n statuses: TechRadarStatus[];\n\n // Position of the status labels relative to the radar\n statusLabelPosition: \"up\" | \"down\" | \"left\" | \"right\";\n // Whether to show status labels\n statusLabelVisible: boolean;\n\n // Width of the status label\n statusLabelWidth: number;\n // Height of the status label\n statusLabelHeight: number;\n // Corner radius of the status label\n statusLabelRadius: number;\n // Font size of the status label text\n statusLabelFontSize: number;\n // Color of the status label text\n statusLabelColor: string;\n // Background color of the status label\n statusLabelBackgroundColor: string;\n\n // Move the center of the radar to a specific position\n centerOffset: { x: number; y: number };\n\n // Categories to be displayed on the radar\n categories: string[];\n // Color of the category text\n categoryColor: string;\n // Whether to show category labels\n categoryVisble: boolean;\n}\n```\n\nExample:\n\n```typescript\nconst customConfig: TechRadarConfig = {\n canvasSize: { width: 800, height: 800 },\n strokeWidth: 2,\n strokeColour: \"#fff\",\n categoryColor: \"#444\",\n categoryVisble: true,\n blipColor: \"#5f5f5f\",\n blipHoverColor: \"#5f5f5f7f\",\n blipFontSize: 16,\n blipPointSize: 2,\n blipLabelOffset: 5,\n scaleMode: \"none\",\n statusLabelPosition: \"up\",\n statusLabelVisible: true,\n centerOffset: { x: 0, y: 0 },\n statuses: [\n { name: \"no-go\", color: \"#d8e5ee\", length: 60 },\n { name: \"hold\", color: \"#c1d8e8\", length: 60 },\n { name: \"assess\", color: \"#afcadd\", length: 60 },\n { name: \"trial\", color: \"#9ebcd6\", length: 60 },\n { name: \"adopt\", color: \"#8eafd2\", length: 60 },\n ],\n categories: [\"platform & frameworks\", \"tools\", \"techniques\", \"languages\"],\n statusLabelWidth: 72,\n statusLabelHeight: 24,\n statusLabelRadius: 5,\n statusLabelFontSize: 14,\n statusLabelColor: \"#7f7f7f\",\n statusLabelBackgroundColor: \"white\",\n};\n\nconst customTechRadar = new TechRadar(blipItems, customConfig);\n```\n","readmeFilename":"README.md","homepage":"https://github.com/benlau/tech-radar"}