{"_id":"@darkvoice/gauge-chart","_rev":"10-fc8b18f7b9ba74b63adccb9bf5112b2d","name":"@darkvoice/gauge-chart","dist-tags":{"latest":"3.0.3"},"versions":{"1.0.1":{"name":"@darkvoice/gauge-chart","version":"1.0.1","author":{"url":"https://github.com/darkvoicegit","name":"darkvoicegit"},"_id":"@darkvoice/gauge-chart@1.0.1","maintainers":[{"name":"darkvoice","email":"npm@alsbih.net"}],"homepage":"https://DarkvoiceGit.github.io/gaugeChart","dist":{"shasum":"43a81805db1c84d1a198731e49479bd1ab089fe2","tarball":"https://registry.npmjs.org/@darkvoice/gauge-chart/-/gauge-chart-1.0.1.tgz","fileCount":54,"integrity":"sha512-Dj2a3/1Fy+8kB4zewBUNLqjjXeJhYNokHBEgAL6slV0r2wxei208ap7Rb4kVDWBMjAhGF8nWBikmOt1ZfMhamg==","signatures":[{"sig":"MEUCIQDHM9uai96Wj35rzu/X3WpTEXMvRdbDFoQC4AdyYzVQQAIgX7xiU+/Z79Fj1YsUEG3L6aMwZ7MS2Lw4yGNhYaHhZZ8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":109332},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"8f0a97122493b8c6c103f5e6bce575b200863afb","private":false,"scripts":{"lint":"eslint .","build":"tsc -p tsconfig.build.json","test:coverage":"vitest run --coverage","prepublishOnly":"npm run build"},"_npmUser":{"name":"darkvoice","email":"npm@alsbih.net"},"_npmVersion":"10.8.2","description":"A highly customizable gauge chart component for React applications, built with D3.js.","directories":{},"_nodeVersion":"18.20.8","dependencies":{"d3":"^7.9.0","@types/d3":"^7.4.3"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^26.1.0","eslint":"^9.32.0","vitest":"^3.2.4","globals":"^16.3.0","@eslint/js":"^9.17.0","typescript":"~5.8.3","@types/react":"^19.1.8","@types/react-dom":"^19.1.6","typescript-eslint":"^8.38.0","@vitest/coverage-v8":"^3.2.4","@vitejs/plugin-react":"^4.7.0","@testing-library/react":"^16.3.0","@testing-library/jest-dom":"^6.6.3","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gauge-chart_1.0.1_1753547043994_0.9727647844686573","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@darkvoice/gauge-chart","version":"2.0.0","keywords":["react","react-component","chart","charts","gauge","gauge-chart","gaugechart","radial-gauge","speedometer","meter","visualization","d3","data-visualization","dashboard","kpi"],"author":{"url":"https://github.com/darkvoicegit","name":"darkvoicegit"},"_id":"@darkvoice/gauge-chart@2.0.0","maintainers":[{"name":"darkvoice","email":"npm@alsbih.net"}],"homepage":"https://DarkvoiceGit.github.io/gaugeChart","bugs":{"url":"https://github.com/DarkvoiceGit/gaugeChart/issues"},"dist":{"shasum":"02a78cfe55a47b351aef74a6da1f5f5eba7acd19","tarball":"https://registry.npmjs.org/@darkvoice/gauge-chart/-/gauge-chart-2.0.0.tgz","fileCount":57,"integrity":"sha512-p7CInlmO1H+SMieQsaKqiof/VXBHbkudAiZGqpYZs53qmBtag4Uu0W2cXDATRfBiKx1/dSySgcEEVqQD+JWzNg==","signatures":[{"sig":"MEUCIQCToVTVE1AlzMY4GrYRI4XjCueIThf1h0y+W+urJyxDigIgF2GyHyoDYAMdYnOA0oPhtujER9NWPG7p7CI81coWsOE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":627457},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"9fc0551c809782f3fa1b38f29250cbf814d8c064","private":false,"scripts":{"lint":"eslint .","build":"tsc -p tsconfig.build.json","test:coverage":"vitest run --coverage","prepublishOnly":"npm run build"},"_npmUser":{"name":"darkvoice","email":"npm@alsbih.net"},"repository":{"url":"git+https://github.com/DarkvoiceGit/gaugeChart.git","type":"git"},"_npmVersion":"10.9.0","description":"Responsive, D3-powered gauge chart component for React with tile segments, primary/secondary values, and rich configuration.","directories":{},"_nodeVersion":"22.17.1","dependencies":{"d3":"^7.9.0","@types/d3":"^7.4.3"},"publishConfig":{"registry":"https://npm.pkg.github.com"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^26.1.0","eslint":"^9.39.3","vitest":"^3.2.4","globals":"^16.5.0","@eslint/js":"^9.39.3","typescript":"^5.8.3","@types/react":"^19.1.8","@types/react-dom":"^19.1.6","typescript-eslint":"^8.56.1","@vitest/coverage-v8":"^3.2.4","@vitejs/plugin-react":"^4.7.0","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.26"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gauge-chart_2.0.0_1771982924865_0.08241522015405711","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@darkvoice/gauge-chart","version":"2.0.1","keywords":["react","react-component","chart","charts","gauge","gauge-chart","gaugechart","radial-gauge","speedometer","meter","visualization","d3","data-visualization","dashboard","kpi"],"author":{"url":"https://github.com/darkvoicegit","name":"darkvoicegit"},"_id":"@darkvoice/gauge-chart@2.0.1","maintainers":[{"name":"darkvoice","email":"npm@alsbih.net"}],"homepage":"https://DarkvoiceGit.github.io/gaugeChart","bugs":{"url":"https://github.com/DarkvoiceGit/gaugeChart/issues"},"dist":{"shasum":"c171d138b6f5353da5d7f4e0a3306b1933efde24","tarball":"https://registry.npmjs.org/@darkvoice/gauge-chart/-/gauge-chart-2.0.1.tgz","fileCount":57,"integrity":"sha512-Qm6m3WgG+vIRNDO1Z7X3b438AX/8d/C6Gc1aLUbtcUtX0IyBUtH2o97Mt/2jbvOcW6YJwmaDj/nmtIVf4vt+tw==","signatures":[{"sig":"MEQCIF3RHsQlre0+FLfMj4yNYI1vEGEBe8Iar8oqgp7QcUnDAiABYt7X7SJYoFlDidINXcKM1QMkc7SLm3omKXCZEMUdgg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":628001},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"9ffd8ea9db7ea359380bbff0ded97bffbeecb9c0","private":false,"scripts":{"lint":"eslint .","build":"tsc -p tsconfig.build.json","test:coverage":"vitest run --coverage","prepublishOnly":"npm run build"},"_npmUser":{"name":"darkvoice","email":"npm@alsbih.net"},"repository":{"url":"git+https://github.com/DarkvoiceGit/gaugeChart.git","type":"git"},"_npmVersion":"10.9.0","description":"Responsive, D3-powered gauge chart component for React with tile segments, primary/secondary values, and rich configuration.","directories":{},"_nodeVersion":"22.17.1","dependencies":{"d3":"^7.9.0","@types/d3":"^7.4.3"},"publishConfig":{"registry":"https://npm.pkg.github.com"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^26.1.0","eslint":"^9.39.3","vitest":"^3.2.4","globals":"^16.5.0","@eslint/js":"^9.39.3","typescript":"^5.8.3","@types/react":"^19.1.8","@types/react-dom":"^19.1.6","typescript-eslint":"^8.56.1","@vitest/coverage-v8":"^3.2.4","@vitejs/plugin-react":"^4.7.0","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.26"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gauge-chart_2.0.1_1772063799134_0.8351950338292702","host":"s3://npm-registry-packages-npm-production"}},"3.0.0":{"name":"@darkvoice/gauge-chart","version":"3.0.0","keywords":["react","react-component","chart","charts","gauge","gauge-chart","gaugechart","radial-gauge","speedometer","meter","visualization","d3","data-visualization","dashboard","kpi"],"author":{"url":"https://github.com/darkvoicegit","name":"darkvoicegit"},"_id":"@darkvoice/gauge-chart@3.0.0","maintainers":[{"name":"darkvoice","email":"npm@alsbih.net"}],"homepage":"https://DarkvoiceGit.github.io/gaugeChart","bugs":{"url":"https://github.com/DarkvoiceGit/gaugeChart/issues"},"dist":{"shasum":"26f0817ac72cbdc89cc27a74193b0f8dca44abf5","tarball":"https://registry.npmjs.org/@darkvoice/gauge-chart/-/gauge-chart-3.0.0.tgz","fileCount":194,"integrity":"sha512-eOIOXNao5V0hpglc9duOlVoWHUn+4K+NjYZ+CujtcgpifX9cuqSHoWly72RYAqNUxSq4pf57WE5I9DJJf3E2Qw==","signatures":[{"sig":"MEQCIGyWRuHFl/2BUHaWcSCh0w9OnQqaDdL7hzo8vidz9IRsAiBdB8vf/eOGkJe74GiUjVfvK+cuzYcoOQt//4cGwXRaMA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCIQCEUecbulldW27sYOT5ax1SfZqDdHTsNCh+2qbaILEe3gIgKRM/OosJadnPGwS8KBVBvTs4G3KnRu6KnzKtvGA5Qd4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@darkvoice%2fgauge-chart@3.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":292336},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"5cb7ee08daa8a1af6a406f975597ce0ea2aae163","private":false,"scripts":{"lint":"eslint .","build":"tsc -p tsconfig.build.json","test:coverage":"vitest run --coverage","prepublishOnly":"npm run build"},"_npmUser":{"name":"darkvoice","email":"npm@alsbih.net"},"repository":{"url":"git+https://github.com/DarkvoiceGit/gaugeChart.git","type":"git"},"_npmVersion":"10.8.2","description":"Responsive, D3-powered gauge chart component for React with tile segments, primary/secondary values, and rich configuration.","directories":{},"_nodeVersion":"20.20.2","dependencies":{"d3":"^7.9.0"},"publishConfig":{"registry":"https://npm.pkg.github.com"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^26.1.0","eslint":"^9.39.4","vitest":"^3.2.6","globals":"^16.5.0","@types/d3":"^7.4.3","@eslint/js":"^9.39.4","typescript":"^5.9.3","@types/react":"^19.2.17","@types/react-dom":"^19.2.3","typescript-eslint":"^8.62.0","@vitest/coverage-v8":"^3.2.6","@vitejs/plugin-react":"^4.7.0","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.5.3"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gauge-chart_3.0.0_1787255175480_0.6869121806919791","host":"s3://npm-registry-packages-npm-production"}},"3.0.1":{"name":"@darkvoice/gauge-chart","version":"3.0.1","keywords":["react","react-component","chart","charts","gauge","gauge-chart","gaugechart","radial-gauge","speedometer","meter","visualization","d3","data-visualization","dashboard","kpi"],"author":{"url":"https://github.com/darkvoicegit","name":"darkvoicegit"},"_id":"@darkvoice/gauge-chart@3.0.1","maintainers":[{"name":"darkvoice","email":"npm@alsbih.net"}],"homepage":"https://DarkvoiceGit.github.io/gaugeChart","bugs":{"url":"https://github.com/DarkvoiceGit/gaugeChart/issues"},"dist":{"shasum":"7bfbce2a861cd33746b6d422240d4f1bdbfa4be3","tarball":"https://registry.npmjs.org/@darkvoice/gauge-chart/-/gauge-chart-3.0.1.tgz","fileCount":194,"integrity":"sha512-QOyYGCs276QTeAidV3C2cIWL5bgT+K7ZWq5ojUrDYA35/gPRWCz1jD07aaKYQ4/W0DISZPGkQdX5vLbA6EGMNg==","signatures":[{"sig":"MEUCIEYDC+MGigZ1EDXTku0bY7PssigrhJK0MJW4KYjCC2uKAiEAz8VrL/ujwvhGj7aTH3f6Rx84sVsLU7iRyQcnoQ3cDgI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCIQC5lrZJAo4WjrAb4NzIkPmUU72boRFO4nGGg/9rGSGEYAIgUAG3Zfl/+Qhz2iCgt4ooSR7SwbS7CkCeGMgWuSXDCFQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@darkvoice%2fgauge-chart@3.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":292473},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"c53e916d6c435cf5a892aba20b93bdd8acd83982","private":false,"scripts":{"lint":"eslint .","build":"tsc -p tsconfig.build.json","test:coverage":"vitest run --coverage","prepublishOnly":"npm run build"},"_npmUser":{"name":"darkvoice","email":"npm@alsbih.net"},"repository":{"url":"git+https://github.com/DarkvoiceGit/gaugeChart.git","type":"git"},"_npmVersion":"10.8.2","description":"Responsive, D3-powered gauge chart component for React with tile segments, primary/secondary values, and rich configuration.","directories":{},"_nodeVersion":"20.20.2","dependencies":{"d3":"^7.9.0"},"publishConfig":{"registry":"https://npm.pkg.github.com"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^30.0.1","eslint":"^10.8.1","vitest":"^4.1.11","globals":"^17.11.0","@types/d3":"^7.4.3","@eslint/js":"^10.0.1","typescript":"^6.0.3","@types/react":"^19.2.18","@types/react-dom":"^19.2.4","typescript-eslint":"^8.67.0","@vitest/coverage-v8":"^4.1.10","@vitejs/plugin-react":"^6.0.5","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^7.0.1","eslint-plugin-react-hooks":"^7.1.1","eslint-plugin-react-refresh":"^0.5.4"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gauge-chart_3.0.1_1787256655567_0.3821505444691833","host":"s3://npm-registry-packages-npm-production"}},"3.0.2":{"name":"@darkvoice/gauge-chart","version":"3.0.2","keywords":["react","react-component","chart","charts","gauge","gauge-chart","gaugechart","radial-gauge","speedometer","meter","visualization","d3","data-visualization","dashboard","kpi"],"author":{"url":"https://github.com/darkvoicegit","name":"darkvoicegit"},"_id":"@darkvoice/gauge-chart@3.0.2","maintainers":[{"name":"darkvoice","email":"npm@alsbih.net"}],"homepage":"https://DarkvoiceGit.github.io/gaugeChart","bugs":{"url":"https://github.com/DarkvoiceGit/gaugeChart/issues"},"dist":{"shasum":"219aca93fe0d283d2d053aec12fa2266442398ad","tarball":"https://registry.npmjs.org/@darkvoice/gauge-chart/-/gauge-chart-3.0.2.tgz","fileCount":194,"integrity":"sha512-lOKizhrUjnfDfaKITEOub1PAZnWkmUcgi8OpcGjnPkC9Xi6QV57FCj2mZ72r1WFpBCD0PFoO7MyftaSo7jkUIw==","signatures":[{"sig":"MEUCIHSI9DO+Xi+ji/ALZvdczgKAKOsF9mBpUD6CxnGO+vZXAiEAxgZZcn96awv5tEzk8Yx/BThb4OZzzppy4m5Z1pHFy5Y=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCIQDksCAw4TRpXG87s3K2iT+rhjESB4wGcukNu2zHtVOC/AIgeeugIm9bWg3wG9+j6BqC1qLtrnCXWoU/UMPj6gzn7DA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@darkvoice%2fgauge-chart@3.0.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":294265},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"c5ba1ed2aff09c2173b02ca8ee4fb08fb6c0c812","private":false,"scripts":{"lint":"eslint .","build":"tsc -p tsconfig.build.json","test:coverage":"vitest run --coverage","prepublishOnly":"npm run build"},"_npmUser":{"name":"darkvoice","email":"npm@alsbih.net"},"repository":{"url":"git+https://github.com/DarkvoiceGit/gaugeChart.git","type":"git"},"_npmVersion":"11.17.0","description":"Responsive, D3-powered gauge chart component for React with tile segments, primary/secondary values, and rich configuration.","directories":{},"_nodeVersion":"24.19.0","dependencies":{"d3":"^7.9.0"},"publishConfig":{"registry":"https://npm.pkg.github.com"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^30.0.1","eslint":"^10.8.1","vitest":"^4.1.11","globals":"^17.11.0","@types/d3":"^7.4.3","@eslint/js":"^10.0.1","typescript":"^6.0.3","@types/react":"^19.2.18","@types/react-dom":"^19.2.4","typescript-eslint":"^8.67.0","@vitest/coverage-v8":"^4.1.10","@vitejs/plugin-react":"^6.0.5","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^7.0.1","eslint-plugin-react-hooks":"^7.1.1","eslint-plugin-react-refresh":"^0.5.4"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gauge-chart_3.0.2_1787266164280_0.005097315643213696","host":"s3://npm-registry-packages-npm-production"}},"3.0.3":{"_id":"@darkvoice/gauge-chart@3.0.3","bugs":{"url":"https://github.com/DarkvoiceGit/gaugeChart/issues"},"dist":{"shasum":"328625e66e51d1bdce0707be42332a9feef4a1db","tarball":"https://registry.npmjs.org/@darkvoice/gauge-chart/-/gauge-chart-3.0.3.tgz","fileCount":194,"integrity":"sha512-d5dYV7i5oX+YXwvDEb/RwdQmsIjGnyKP6QwT9d5kPFXy7gPl6RQoK0VCx3MDXSrXJJJZ7akn9kxpwHzXq16zsA==","signatures":[{"sig":"MEUCIQDwt5UWZSiD/4mVk66xinFe1DAHV8ubG+TupIQnSIKtFAIgN4s2s9WVyDICOKFqDh1HpdEx2b9nVdReyoAUBhbiYAo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBV4DqA6/GdJdxwxqrE6+2LtqYWLDbKrKvaVDUZAMAseAiEAg+YrLQylcqeJO+aGPXYVPHh0doOjg9J4A1Vu5V75vIo="}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@darkvoice%2fgauge-chart@3.0.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":294265},"main":"dist/index.js","name":"@darkvoice/gauge-chart","type":"module","types":"dist/index.d.ts","author":{"url":"https://github.com/darkvoicegit","name":"darkvoicegit"},"module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"7e76de580ace8fee80fe1be3b321fd720ffabef8","private":false,"scripts":{"lint":"eslint .","build":"tsc -p tsconfig.build.json","test:coverage":"vitest run --coverage","prepublishOnly":"npm run build"},"version":"3.0.3","_npmUser":{"name":"darkvoice","email":"npm@alsbih.net"},"homepage":"https://DarkvoiceGit.github.io/gaugeChart","keywords":["react","react-component","chart","charts","gauge","gauge-chart","gaugechart","radial-gauge","speedometer","meter","visualization","d3","data-visualization","dashboard","kpi"],"repository":{"url":"git+https://github.com/DarkvoiceGit/gaugeChart.git","type":"git"},"_npmVersion":"11.17.0","description":"Responsive, D3-powered gauge chart component for React with tile segments, primary/secondary values, and rich configuration.","directories":{},"maintainers":[{"name":"darkvoice","email":"npm@alsbih.net"}],"_nodeVersion":"24.19.0","dependencies":{"d3":"^7.9.0"},"publishConfig":{"registry":"https://npm.pkg.github.com"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^30.0.1","eslint":"^10.9.1","vitest":"^4.1.11","globals":"^17.11.0","@types/d3":"^7.4.3","@eslint/js":"^10.0.1","typescript":"^6.0.3","@types/react":"^19.2.18","@types/react-dom":"^19.2.5","typescript-eslint":"^8.69.0","@vitest/coverage-v8":"^4.1.10","@vitejs/plugin-react":"^6.1.1","@testing-library/react":"^16.3.3","@testing-library/jest-dom":"^7.0.1","eslint-plugin-react-hooks":"^7.1.1","eslint-plugin-react-refresh":"^0.5.5"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/gauge-chart_3.0.3_1788379952245_0.4552822279076556"}}},"time":{"created":"2025-07-26T16:24:03.930Z","modified":"2026-09-02T20:12:33.033Z","1.0.0":"2025-07-26T15:48:01.522Z","1.0.1":"2025-07-26T16:24:04.172Z","2.0.0":"2026-02-25T01:28:45.041Z","2.0.1":"2026-02-25T23:56:39.356Z","3.0.0":"2026-08-20T19:46:15.582Z","3.0.1":"2026-08-20T20:10:55.715Z","3.0.2":"2026-08-20T22:49:24.379Z","3.0.3":"2026-09-02T20:12:32.334Z"},"bugs":{"url":"https://github.com/DarkvoiceGit/gaugeChart/issues"},"author":{"url":"https://github.com/darkvoicegit","name":"darkvoicegit"},"homepage":"https://DarkvoiceGit.github.io/gaugeChart","keywords":["react","react-component","chart","charts","gauge","gauge-chart","gaugechart","radial-gauge","speedometer","meter","visualization","d3","data-visualization","dashboard","kpi"],"repository":{"url":"git+https://github.com/DarkvoiceGit/gaugeChart.git","type":"git"},"description":"Responsive, D3-powered gauge chart component for React with tile segments, primary/secondary values, and rich configuration.","maintainers":[{"name":"darkvoice","email":"npm@alsbih.net"}],"readme":"# GaugeChart\n\nHighly customizable **gauge and bar chart components** for React applications, built with D3.js. Both charts share the same scale, layer, interaction, formatter, animation, and theme concepts.\n\n\n## Demo & Package\n\n\n| Desc                                                             | Url                                                                                                          |\n|------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------|\n| You can see a live demo of the GaugeChart component at           | [https://DarkvoiceGit.github.io/gaugeChart](https://DarkvoiceGit.github.io/gaugeChart)                       |\n| <img src=\"NPM.svg\" alt=\"NPM\" style=\"width:60px; height:60px;\" /> | [https://www.npmjs.com/package/@darkvoice/gauge-chart](https://www.npmjs.com/package/@darkvoice/gauge-chart) |\n\n\n## Features\n\n- Generic layer-based GaugeChart and BarChart APIs\n- Solid and segmented layers\n- Absolute, cumulative, and offset value modes\n- Optional pointers per layer\n- Independent gauge radii and bar tracks per layer\n- Layer ordering with `zIndex`\n- Hover interaction and tooltips\n- Configurable scale and optional color zones\n- Configurable ticks and value formatters\n- Configurable gauge center hub\n- Animation support\n- Theme overrides\n- React 16.8 through React 19 support\n\n## Installation\n\n```bash\nnpm install @darkvoice/gauge-chart\n```\n\nIf you are testing a local `.tgz` build:\n\n```bash\nnpm install ./your-package-file.tgz\n```\n\nThen import the component by its package name:\n\n```tsx\nimport { GaugeChart, BarChart } from '@darkvoice/gauge-chart';\n```\n\n## Requirements\n\nPeer dependencies:\n\n- React `^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0`\n- React DOM `^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0`\n\nRuntime dependency:\n\n- D3 `^7.9.0`\n\n## Basic Usage\n\n```tsx\nimport { GaugeChart } from '@darkvoice/gauge-chart';\n\nexport function ExampleGauge() {\n  return (\n    <GaugeChart\n      scale={{\n        min: 0,\n        max: 80,\n      }}\n      layers={[\n        {\n          id: 'tiles',\n          value: 75,\n          radius: 0.72,\n          thickness: 0.28,\n          grow: 'inward',\n          render: 'segmented',\n          segments: 8,\n          color: '#35ff00',\n          backgroundColor: '#dddddd',\n          hoverable: true,\n          zIndex: 3,\n        },\n        {\n          id: 'base',\n          value: 40,\n          valueMode: 'absolute',\n          radius: 0.7,\n          thickness: 0.12, \n          grow: 'inward',\n          render: 'solid',\n          color: '#000000',\n          pointer: {\n            enabled: true,\n            color: '#0ed30e',\n            scale: 1,\n            strokeScale: 1,\n          },\n          tooltip: {\n            label: 'Base',\n          },\n          hoverable: true,\n          zIndex: 2,\n        },\n        {\n          id: 'additional',\n          value: 35,\n          valueMode: 'cumulative',\n          baseLayerId: 'base',\n          radius: 0.7,\n          thickness: 0.12,\n          grow: 'inward',\n          render: 'solid',\n          color: '#aaaaaa',\n          pointer: {\n            enabled: true,\n            color: '#025bff',\n            scale: 1,\n            strokeScale: 1,\n          },\n          tooltip: {\n            label: 'Additional',\n          },\n          hoverable: true,\n          zIndex: 1,\n        },\n      ]}\n      ticks={{\n        enabled: true,\n        step: 10,\n        labelColor: '#ffffff',\n        tickColor: '#777777',\n        radiusScale: 1.12,\n      }}\n      hub={{\n        color: '#000000',\n        scale: 0.5,\n      }}\n      interaction={{\n        tooltips: true,\n        tooltipMode: 'all',\n        hoverDimming: true,\n      }}\n      animation={{\n        enabled: true,\n        durationMs: 400,\n      }}\n      size=\"xl\"\n    />\n  );\n}\n```\n\n## Core Model\n\nThe component is configured with two required props:\n\n```ts\nscale: GaugeScale;\nlayers: GaugeLayer[];\n```\n\nThe scale defines the numeric range. Each layer defines how a value is rendered inside that range.\n\n```tsx\n<GaugeChart\n  scale={{ min: 0, max: 100 }}\n  layers={[...]}\n/>\n```\n\n## `GaugeChart` Props\n\n```ts\ninterface GaugeChartProps {\n  size?: GaugeSize;\n  scale: GaugeScale;\n  layers: GaugeLayer[];\n  geometry?: GaugeGeometryConfig;\n  ticks?: GaugeTicksConfig;\n  interaction?: GaugeInteractionConfig;\n  hub?: GaugeHubConfig;\n  formatters?: GaugeFormatters;\n  animation?: GaugeAnimationConfig;\n  theme?: DeepPartial<GaugeTheme>;\n  debugMode?: boolean;\n}\n```\n\n| Prop | Type | Description |\n|---|---|---|\n| `size` | `GaugeSize` | Optional preset size. |\n| `scale` | `GaugeScale` | Numeric range used by all layers. |\n| `layers` | `GaugeLayer[]` | Gauge layers to render. |\n| `geometry` | `GaugeGeometryConfig` | Optional gauge geometry overrides. |\n| `ticks` | `GaugeTicksConfig` | Tick visibility and styling. |\n| `interaction` | `GaugeInteractionConfig` | Hover and tooltip behavior. |\n| `hub` | `GaugeHubConfig` | Center hub configuration. |\n| `formatters` | `GaugeFormatters` | Value and tick formatting functions. |\n| `animation` | `GaugeAnimationConfig` | Animation configuration. |\n| `theme` | `DeepPartial<GaugeTheme>` | Partial theme override. |\n| `debugMode` | `boolean` | Enables debug output / behavior where supported. |\n\n## Size Presets\n\n```ts\ntype GaugeSize =\n  | 'default'\n  | 'xxs'\n  | 'xs'\n  | 's'\n  | 'sm'\n  | 'm'\n  | 'l'\n  | 'xl'\n  | 'xxl'\n  | 'xxxl';\n```\n\nExample:\n\n```tsx\n<GaugeChart\n  size=\"xl\"\n  scale={{ max: 80 }}\n  layers={layers}\n/>\n```\n\n## Scale\n\n```ts\ninterface GaugeScale {\n  min?: number;\n  max: number;\n  zones?: GaugeZone[];\n}\n```\n\n`max` is required. `min` is optional.\n\n```tsx\nscale={{\n  min: 0,\n  max: 80,\n}}\n```\n\n### Zones\n\nZones are optional.\n\n```ts\ninterface GaugeZone {\n  upTo: number;\n  color: string;\n}\n```\n\nExample:\n\n```tsx\nscale={{\n  min: 0,\n  max: 80,\n  zones: [\n    { upTo: 40, color: '#00ff00' },\n    { upTo: 60, color: '#ffff00' },\n    { upTo: 80, color: '#ff0c4d' },\n  ],\n}}\n```\n\nYou do not need zones if you set layer colors directly.\n\n## Layers\n\n```ts\ninterface GaugeLayer {\n  id: string;\n  value: number;\n  radius: number;\n  thickness: number;\n  grow?:  'inward' | 'outward' | 'center'\n  render: 'solid' | 'segmented';\n\n  segments?: number;\n\n  valueMode?: 'absolute' | 'cumulative' | 'offset';\n  baseLayerId?: string;\n  offsetValue?: number;\n\n  color: string;\n  fillStyle?: TileFillStyle;\n  backgroundColor?: string;\n  borderColor?: string;\n  borderThickness?: number;\n\n  gradient?: LayerGradientConfig;\n  arc?: Partial<ArcConfig>;\n  pointer?: LayerPointerConfig;\n  tooltip?: LayerTooltipConfig;\n\n  hoverable?: boolean;\n  zIndex?: number;\n}\n```\n\n### Required Layer Properties\n\nEvery layer requires:\n\n```ts\nid\nvalue\nradius\nthickness\nrender\ncolor\n```\n\nExample:\n\n```tsx\n{\n  id: 'capacity',\n  value: 65,\n  radius: 0.7,\n  thickness: 0.15,\n  grow: 'inward',      \n  render: 'solid',\n  color: '#222222',\n}\n```\n\n## Render Modes\n\n### Solid\n\nUse `render: 'solid'` for a continuous arc.\n\n```tsx\n{\n  id: 'base',\n  value: 40,\n  radius: 0.7,\n  thickness: 0.12,\n  grow: 'inward',      \n  render: 'solid',\n  color: '#000000',\n}\n```\n\n### Segmented\n\nUse `render: 'segmented'` for tiles / discrete segments.\n\n```tsx\n{\n  id: 'tiles',\n  value: 75,\n  radius: 1,\n  thickness: 0.28,\n  grow: 'inward',      \n  render: 'segmented',\n  segments: 8,\n  color: '#35ff00',\n  backgroundColor: '#dddddd',\n}\n```\n\n## Value Modes\n\n```ts\ntype LayerValueMode = 'absolute' | 'cumulative' | 'offset';\n```\n\n### Absolute\n\nThe layer starts at the beginning of the gauge and ends at its own value.\n\n```tsx\n{\n  id: 'base',\n  value: 40,\n  valueMode: 'absolute',\n  ...\n}\n```\n\nFor a `0..80` scale this represents:\n\n```text\n0 ---------- 40\n```\n\n### Cumulative\n\nA cumulative layer starts at the end of another layer.\n\n```tsx\n{\n  id: 'additional',\n  value: 35,\n  valueMode: 'cumulative',\n  baseLayerId: 'base',\n  ...\n}\n```\n\nWith:\n\n```text\nbase  = 40\nadditional = 35\n```\n\nthis conceptually represents:\n\n```text\n0 ---------- 40 ---------- 75\n   base          additional\n```\n\n`value` remains the layer's own value (`35`). `baseLayerId` identifies the layer after which it should be placed.\n\n### Offset\n\nAn offset layer starts at `offsetValue` and spans its own `value`.\n\n```tsx\n{\n  id: 'window',\n  value: 20,\n  valueMode: 'offset',\n  offsetValue: 30,\n  ...\n}\n```\n\nConceptually:\n\n```text\n30 ---------- 50\n```\n\n## Layer Radius\n\nEach layer defines its radial position using `radius`, `thickness´, and optional `grow`:\n\n```ts\nradius: number; // reference point (0..1 relative to gauge radius)\nthickness: number; // band width (0..1)\ngrow?: 'inward' | 'outward' | 'center' // default: 'inward'\n```\nResolution:\n```text\ngrow: 'inward'  -> outer = radius,           inner = radius - thickness\ngrow: 'outward' -> inner = radius,           outer = radius + thickness\ngrow: 'center'  -> inner = radius -t/2,      outer = radius + t/2\n\n```\n\nExample outer ring (inward from max radius:\n\n```tsx\nradius: 1,\nthickness: 0.28,\ngrow: 'inward'\n```\n\nExample inner ring:\n\n```tsx\nradius: 0.54,\nthickness: 0.12,\ngrow: 'inward'\n```\n\nResolved radii must stay within `0..1`\n\n## Layer Ordering\n\nUse `zIndex` to control the normal rendering order.\n\n```tsx\n{\n  id: 'tiles',\n  zIndex: 3,\n  ...\n}\n```\n\nHigher values are intended to render above lower values.\n\n## Pointer Configuration\n\nPointers are optional and configured per layer.\n\n```ts\ninterface LayerPointerConfig {\n  enabled?: boolean;\n  scale?: number;\n  strokeScale?: number;\n  color?: string;\n  lengthRatio?: number;\n}\n```\n\nExample:\n\n```tsx\npointer={{\n  enabled: true,\n  color: '#025bff',\n  scale: 1,\n  strokeScale: 1,\n}}\n```\n\n## Arc Configuration\n\nEach layer can override arc styling:\n\n```ts\ninterface ArcConfig {\n  padAngle: number;\n  padRadius: number;\n  cornerRadius: number;\n}\n```\n\nExample:\n\n```tsx\narc={{\n  padAngle: 2,\n  padRadius: 2,\n  cornerRadius: 5,\n}}\n```\n\nAll fields are optional when passed through a layer because `arc` is `Partial<ArcConfig>`.\n\n## Gradient Configuration\n\n```ts\ninterface LayerGradientConfig {\n  enabled?: boolean;\n  type?: GradientType | string;\n}\n```\n\nExample:\n\n```tsx\ngradient={{\n  enabled: true,\n  type: 'tile',\n}}\n```\n\n## Fill Styles\n\nThe package exports `TileFillStyle`.\n\n```tsx\nimport {\n  GaugeChart,\n  TileFillStyle,\n} from '@darkvoice/gauge-chart';\n```\n\nAvailable values:\n\n```ts\nTileFillStyle.FILLED\nTileFillStyle.DOTTED\nTileFillStyle.DASHED\nTileFillStyle.OUTLINED\n```\n\nExample:\n\n```tsx\n{\n  id: 'tiles',\n  render: 'segmented',\n  fillStyle: TileFillStyle.OUTLINED,\n  borderColor: '#000000',\n  borderThickness: 1,\n  ...\n}\n```\n\n## Tooltips\n\nTooltips are controlled globally through `interaction` and labeled per layer.\n\n```ts\ninterface GaugeInteractionConfig {\n  hoverDimming?: boolean;\n  tooltips?: boolean;\n  tooltipMode?: 'layer' | 'all';\n}\n```\n\nEnable them with:\n\n```tsx\ninteraction={{\n  tooltips: true,\n  tooltipMode: 'all',\n  hoverDimming: true,\n}}\n```\n\n### Tooltip Modes\n\n`'layer'` shows the hovered layer's tooltip information.\n\n```tsx\ninteraction={{\n  tooltips: true,\n  tooltipMode: 'layer',\n}}\n```\n\n`'all'` shows tooltip information for all relevant layers.\n\n```tsx\ninteraction={{\n  tooltips: true,\n  tooltipMode: 'all',\n}}\n```\n\n### Tooltip Labels\n\nLabels are configured per layer:\n\n```tsx\n{\n  id: 'base',\n  tooltip: {\n    label: 'Base',\n  },\n  hoverable: true,\n  ...\n}\n```\n\nThe current public type is:\n\n```ts\ninterface LayerTooltipConfig {\n  enabled?: boolean;\n  label?: string;\n  mode?: 'self' | 'all' | 'none';\n  color?: string;\n}\n```\n\n## Hover Interaction\n\nSet `hoverable: true` on layers that should react to hover.\n\n```tsx\n{\n  id: 'base',\n  hoverable: true,\n  ...\n}\n```\n\nGlobal hover dimming is configured with:\n\n```tsx\ninteraction={{\n  hoverDimming: true,\n}}\n```\n\n## Ticks\n\n```ts\ninterface GaugeTicksConfig {\n  enabled?: boolean;\n  step?: number;\n  hideCrowdedEndTick?: boolean | number;\n  fontSize?: string;\n  labelColor?: string;\n  tickColor?: string;\n  radiusScale?: number;\n}\n```\n\nExample:\n\n```tsx\nticks={{\n  enabled: true,\n  step: 10,\n  fontSize: '1rem',\n  labelColor: '#ffffff',\n  tickColor: '#777777',\n  radiusScale: 1.12,\n}}\n```\n\n## `BarChart`\n\nThe package also exports `BarChart`. It uses the same `scale`, layer value modes, render modes, ticks, interactions, formatters, animation, theme overrides, and size presets as `GaugeChart`, but lays layers out on linear tracks.\n\n```ts\ninterface BarChartProps {\n  orientation?: 'horizontal' | 'vertical';\n  size?: GaugeSize;\n  scale: GaugeScale;\n  layers: BarLayer[];\n  ticks?: GaugeTicksConfig;\n  interaction?: GaugeInteractionConfig;\n  formatters?: GaugeFormatters;\n  animation?: GaugeAnimationConfig;\n  theme?: DeepPartial<GaugeTheme>;\n  debugMode?: boolean;\n}\n\ninterface BarLayer extends BaseLayer {\n  track: number;\n  bar?: {\n    cornerRadius?: number;\n    gap?: number;\n    pad?: number;\n  };\n}\n```\n\n`track` is a ratio on the chart's cross axis. Together with `thickness` and `grow`, it determines the layer's occupied band. As with gauge layers, each bar layer needs a unique `id`, a positive `thickness`, a `render` mode, a `color`, and a value.\n\n### Basic Bar Example\n\n```tsx\nimport { BarChart } from '@darkvoice/gauge-chart';\n\nexport function CapacityBar() {\n  return (\n    <BarChart\n      orientation=\"horizontal\"\n      size=\"m\"\n      scale={{ min: 0, max: 100 }}\n      layers={[\n        {\n          id: 'capacity',\n          value: 72,\n          track: 0.7,\n          thickness: 0.18,\n          grow: 'inward',\n          render: 'solid',\n          color: '#35ff00',\n          backgroundColor: '#dddddd',\n          hoverable: true,\n          tooltip: { label: 'Capacity' },\n        },\n      ]}\n      ticks={{ enabled: true, step: 20 }}\n      interaction={{ tooltips: true, hoverDimming: true }}\n      animation={{ enabled: true, durationMs: 300 }}\n    />\n  );\n}\n```\n\nFor segmented bars, set `render: 'segmented'` and provide `segments`. The optional `bar.gap`, `bar.pad`, and `bar.cornerRadius` settings customize tile spacing, track padding, and corner rounding.\n\n## Formatters\n\nUse `formatters.value` for tooltip / value text and `formatters.tick` for ticks.\n\n```ts\ninterface GaugeFormatters {\n  value?: (value: number) => string;\n  tick?: (value: number) => string;\n}\n```\n\nExample with a unit:\n\n```tsx\n<GaugeChart\n  scale={{ max: 80 }}\n  layers={layers}\n  formatters={{\n    value: (value) => `${value} km`,\n    tick: (value) => `${value} km`,\n  }}\n/>\n```\n\nIf you want units only in tooltips but not on every tick:\n\n```tsx\nformatters={{\n  value: (value) => `${value} km`,\n  tick: (value) => `${value}`,\n}}\n```\n\n## Hub\n\nThe center hub can be customized using:\n\n```ts\ninterface GaugeHubConfig {\n  scale?: number;\n  color?: string;\n}\n```\n\nExample:\n\n```tsx\nhub={{\n  color: '#000000',\n  scale: 0.5,\n}}\n```\n\n## Animation\n\n```ts\ninterface GaugeAnimationConfig {\n  enabled?: boolean;\n  durationMs?: number;\n}\n```\n\nExample:\n\n```tsx\nanimation={{\n  enabled: true,\n  durationMs: 400,\n}}\n```\n\n## Geometry\n\nThe optional `geometry` prop is a partial `GaugeThemeGeometry` configuration.\n\n```tsx\n<GaugeChart\n  geometry={{\n    // override supported geometry fields\n  }}\n  scale={{ max: 80 }}\n  layers={layers}\n/>\n```\n\nBecause `GaugeGeometryConfig` is defined from the theme geometry type, see the exported TypeScript declarations for the exact geometry fields available in the installed version.\n\n## Theme Overrides\n\nThe `theme` prop accepts a deep partial `GaugeTheme`.\n\n```tsx\n<GaugeChart\n  theme={{\n    // partial theme overrides\n  }}\n  scale={{ max: 80 }}\n  layers={layers}\n/>\n```\n\n## Complete Example: Base + Additional + Tiles\n\n```tsx\nimport { GaugeChart } from '@darkvoice/gauge-chart';\n\nexport function CapacityGauge() {\n  const base = 40;\n  const additional = 35;\n  const max = 80;\n\n  return (\n    <GaugeChart\n      size=\"xl\"\n      scale={{\n        min: 0,\n        max,\n      }}\n      layers={[\n        {\n          id: 'tiles',\n          value: base + additional,\n          radius: 1,\n          thickness: 0.28,\n          grow: 'inward',  \n          render: 'segmented',\n          segments: 8,\n          color: '#35ff00',\n          backgroundColor: '#dddddd',\n          gradient: {\n            enabled: true,\n            type: 'tile',\n          },\n          tooltip: {\n            label: 'Total',\n          },\n          hoverable: true,\n          zIndex: 3,\n        },\n        {\n          id: 'base',\n          value: base,\n          valueMode: 'absolute',\n          radius: 0.7,\n          thickness: 0.12,\n          grow: 'inward',\n          render: 'solid',\n          color: '#000000',\n          backgroundColor: 'transparent',\n          pointer: {\n            enabled: true,\n            color: '#0ed30e',\n            scale: 1,\n            strokeScale: 1,\n          },\n          tooltip: {\n            label: 'Base',\n          },\n          hoverable: true,\n          zIndex: 2,\n        },\n        {\n          id: 'additional',\n          value: additional,\n          valueMode: 'cumulative',\n          baseLayerId: 'base',\n          radius: 0.7,\n          thickness: 0.12,\n          grow: 'inward',\n          render: 'solid',\n          color: '#aaaaaa',\n          backgroundColor: 'transparent',\n          pointer: {\n            enabled: true,\n            color: '#025bff',\n            scale: 1,\n            strokeScale: 1,\n          },\n          tooltip: {\n            label: 'Additional',\n          },\n          hoverable: true,\n          zIndex: 1,\n        },\n      ]}\n      ticks={{\n        enabled: true,\n        step: 10,\n        fontSize: '1rem',\n        labelColor: '#ffffff',\n        tickColor: '#777777',\n        radiusScale: 1.12,\n      }}\n      interaction={{\n        tooltips: true,\n        tooltipMode: 'all',\n        hoverDimming: true,\n      }}\n      hub={{\n        color: '#000000',\n        scale: 0.5,\n      }}\n      animation={{\n        enabled: true,\n        durationMs: 400,\n      }}\n      formatters={{\n        value: (value) => `${value} m`,\n        tick: (value) => `${value}`,\n      }}\n    />\n  );\n}\n```\n\n## Migration from the Legacy API\n\nOlder versions of the README documented a fixed API using props such as:\n\n```tsx\n<GaugeChart\n  primary={40}\n  secondary={35}\n  options={...}\n  tileArc={...}\n  primaryArcConfig={...}\n  secondaryArcConfig={...}\n/>\n```\n\nThat is no longer the current public API of this package build.\n\nThe current model uses:\n\n```tsx\n<GaugeChart\n  scale={{ min: 0, max: 80 }}\n  layers={[...]}\n/>\n```\n\nA former primary value typically becomes an absolute solid layer:\n\n```tsx\n{\n  id: 'primary',\n  value: 40,\n  valueMode: 'absolute',\n  render: 'solid',\n  ...\n}\n```\n\nA former secondary value that should continue after the primary layer can be expressed as a cumulative layer:\n\n```tsx\n{\n  id: 'secondary',\n  value: 35,\n  valueMode: 'cumulative',\n  baseLayerId: 'primary',\n  render: 'solid',\n  ...\n}\n```\n\nA former tile arc becomes a segmented layer:\n\n```tsx\n{\n  id: 'tiles',\n  value: 75,\n  render: 'segmented',\n  segments: 8,\n  ...\n}\n```\n\n## TypeScript\n\nThe package ships TypeScript declarations. The package ships declarations for both chart components. Primary exports include `GaugeChartProps`, `GaugeLayer`, `BarChartProps`, `BarLayer`, `BarOrientation`, `BarConfig`, and the shared scale, interaction, tick, formatter, animation, geometry, and theme types.\n\nExample:\n\n```tsx\nimport {\n  GaugeChart,\n  type GaugeLayer,\n} from '@darkvoice/gauge-chart';\n\nconst layers: GaugeLayer[] = [\n  {\n    id: 'value',\n    value: 50,\n    radius: 0.7,\n    thickness: 0.15,\n    grow: 'inward',  \n    render: 'solid',\n    color: '#000000',\n  },\n];\n```\n\n## Debug Mode\n\nEnable debug mode with:\n\n```tsx\n<GaugeChart\n  debugMode\n  scale={{ max: 80 }}\n  layers={layers}\n/>\n```\n\nUse this during development only when you need the package's debug behavior.\n\n## Notes\n\n- `scale.max` is required.\n- Every layer needs a unique `id`.\n- Gauge layers use `radius`; bar layers use `track`.\n- Every layer requires `value`, `radius`, `thickness`, `render`, and `color`.\n- Use `hoverable: true` when a layer should participate in hover interaction.\n- `segments` is relevant for segmented layers.\n- `baseLayerId` is used by cumulative layers.\n- `offsetValue` is used by offset layers.\n- Tooltip labels are configured per layer, while the current tooltip display mode is configured globally through `interaction.tooltipMode`.\n\n## Technologies\n\nThis project is built with:\n\n- [React](https://reactjs.org/) - UI library\n- [TypeScript](https://www.typescriptlang.org/) - Type-safe JavaScript\n- [D3.js](https://d3js.org/) - Data visualization library\n- [Vite](https://vitejs.dev/) - Build tool and development server\n- [Vitest](https://vitest.dev/) - Testing framework\n\n## License\n\nMIT\n","readmeFilename":"README.md"}