{"_id":"@builtnorth/charts","name":"@builtnorth/charts","dist-tags":{"latest":"1.3.0"},"versions":{"1.3.0":{"name":"@builtnorth/charts","version":"1.3.0","description":"Clean and minimal chart components using visx for WordPress admin screens.","main":"./build/index.js","module":"./src/index.js","sideEffects":false,"scripts":{"build":"mkdir -p build && cp -r src build/ && cp README.md build/ 2>/dev/null || true","format":"wp-scripts format","lint:js":"wp-scripts lint-js","lint:md:docs":"wp-scripts lint-md-docs","lint:pkg-json":"wp-scripts lint-pkg-json"},"repository":{"type":"git","url":"git+https://github.com/builtnorth/charts.git"},"author":{"name":"Built North"},"license":"GPL-2.0-or-later","bugs":{"url":"https://github.com/builtnorth/charts/issues"},"homepage":"https://github.com/builtnorth/charts#readme","exports":{".":"./src/index.js","./dashboard-panel":"./src/dashboard-panel/load.js","./utils":"./src/utils/index.js","./components":"./src/components/index.js","./components/*":"./src/components/*/index.js"},"dependencies":{"@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@visx/axis":"^3.10.1","@visx/curve":"^3.3.0","@visx/event":"^3.3.0","@visx/gradient":"^3.3.0","@visx/group":"^3.3.0","@visx/legend":"^3.10.3","@visx/responsive":"^3.10.2","@visx/scale":"^3.5.0","@visx/shape":"^3.5.0","@visx/tooltip":"^3.3.0","d3-array":"^3.2.4","d3-format":"^3.1.0","d3-time-format":"^4.1.0"},"devDependencies":{},"_id":"@builtnorth/charts@1.3.0","gitHead":"ddb3be99edce4cf9e64a87c62ec961dde8927d74","_nodeVersion":"22.23.2","_npmVersion":"10.9.8","dist":{"integrity":"sha512-LC2Y5i6u0+Pyx2EPJkn+BAzQ9lRDt7SV2ioQ6YfSvQmIdPVd6NirJ8/vGc0I+IlQZsPzWxN4jVrvnUIT9CePuw==","shasum":"b5567ca43091be02db052745c1c8743e99b3c53c","tarball":"https://registry.npmjs.org/@builtnorth/charts/-/charts-1.3.0.tgz","fileCount":43,"unpackedSize":85474,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDXTrls5dx+gaWx3oAAdAwazH6hx6MswOIsZGLfKkxO7QIgQFJ6XUx1awdjNdCz1IujMbQ7T4vdwAdzghGEznZ8iYs="}]},"_npmUser":{"name":"builtnorth","email":"hello@builtnorth.co"},"directories":{},"maintainers":[{"name":"builtnorth","email":"hello@builtnorth.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/charts_1.3.0_1788968202440_0.3936611004987687"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-09T15:36:42.097Z","1.3.0":"2026-09-09T15:36:42.580Z","modified":"2026-09-09T15:36:43.072Z"},"maintainers":[{"name":"builtnorth","email":"hello@builtnorth.co"}],"description":"Clean and minimal chart components using visx for WordPress admin screens.","homepage":"https://github.com/builtnorth/charts#readme","repository":{"type":"git","url":"git+https://github.com/builtnorth/charts.git"},"author":{"name":"Built North"},"bugs":{"url":"https://github.com/builtnorth/charts/issues"},"license":"GPL-2.0-or-later","readme":"# @builtnorth/charts\n\nClean and minimal chart components using visx for WordPress admin screens.\n\n## Installation\n\n```bash\nnpm install @builtnorth/charts\n```\n\n## Features\n\n- 📊 **Bar Chart** - Clean bar charts with customizable colors and tooltips\n- 📈 **Line Chart** - Smooth line charts with optional area fill and multi-line support  \n- 🍩 **Doughnut Chart** - Interactive doughnut charts with legends\n- 🎨 **CSS Variables** - Fully customizable using CSS variables\n- 📱 **Responsive** - Automatically adjusts to container size\n- 💡 **Tooltips** - Interactive tooltips on all chart types\n- 🎯 **WordPress Ready** - Designed to work seamlessly with WordPress admin styles\n\n## Usage\n\n```javascript\nimport { BarChart, LineChart, DoughnutChart } from '@builtnorth/charts';\n\n// Bar Chart\n<BarChart\n  data={[\n    { label: 'Jan', value: 30 },\n    { label: 'Feb', value: 45 },\n    { label: 'Mar', value: 28 }\n  ]}\n  xAxisLabel=\"Month\"\n  yAxisLabel=\"Sales\"\n  formatTooltip={d => `$${d}k`}\n/>\n\n// Line Chart\n<LineChart\n  data={[\n    { date: new Date('2024-01-01'), value: 30 },\n    { date: new Date('2024-02-01'), value: 45 }\n  ]}\n  showArea={true}\n  formatTooltip={d => `${d} visitors`}\n/>\n\n// Doughnut Chart\n<DoughnutChart\n  data={[\n    { label: 'Desktop', value: 45 },\n    { label: 'Mobile', value: 35 },\n    { label: 'Tablet', value: 20 }\n  ]}\n  donutThickness={80}\n/>\n```\n\n## Props\n\n### BarChart\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| data | array | required | Array of data objects |\n| xAccessor | function | d => d.label | Function to access x value |\n| yAccessor | function | d => d.value | Function to access y value |\n| color | string | CSS variable | Bar color |\n| showXAxis | boolean | true | Show x axis |\n| showYAxis | boolean | true | Show y axis |\n| xAxisLabel | string | '' | X axis label |\n| yAxisLabel | string | '' | Y axis label |\n| formatTick | function | d => d | Format axis ticks |\n| formatTooltip | function | d => d | Format tooltip values |\n| onBarClick | function | undefined | Click handler |\n\n### LineChart\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| data | array | required | Array of data objects |\n| xAccessor | function | d => d.date | Function to access x value |\n| yAccessor | function | d => d.value | Function to access y value |\n| color | string | CSS variable | Line color |\n| showArea | boolean | false | Show area under line |\n| multiLines | boolean | false | Enable multiple lines |\n| lines | array | [] | Array of line configs for multiLines (`name`, `color`, `data`, optional `yAxis: 'left' \\| 'right'`) |\n| showRightYAxis | boolean | true | When any line uses `yAxis: 'right'`, render a second Y axis (visx `AxisRight`) |\n| formatTick | function | d => d | Format left Y axis ticks |\n| formatTickRight | function | formatTick | Format right Y axis ticks |\n| formatXTick | function | timeFormat | Format x axis ticks |\n| formatTooltip | function | d => d | Format tooltip values |\n| minRightYDomainMax | number | 0 | Minimum right-axis domain max (same semantics as `minYDomainMax`) |\n\n### DoughnutChart\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| data | array | required | Array of data objects |\n| valueAccessor | function | d => d.value | Function to access value |\n| labelAccessor | function | d => d.label | Function to access label |\n| colors | array | defaultColors | Array of colors |\n| donutThickness | number | 60 | Thickness of donut |\n| showLegend | boolean | true | Show legend |\n| formatTooltip | function | d => d | Format tooltip values |\n| onSliceClick | function | undefined | Click handler |\n\n## CSS Variables\n\nThe charts use CSS variables for styling that automatically inherit from WordPress admin:\n\n```css\n--chart--color-primary: var(--wp-admin-theme-color, #007cba);\n--chart--color-primary-hover: var(--wp-admin-theme-color-darker, #005a87);\n--chart--color-base: rgb(247, 247, 247);\n--chart--color-white: #ffffff;\n--chart--color-black: #000000;\n--chart--color-light-gray: #f0f0f0;\n--chart--color-medium-gray: #757575;\n--chart--color-dark-gray: #333333;\n--chart--color-border-gray: rgb(217, 219, 222);\n--chart--color-success: #00a32a;\n--chart--color-warning: #dba617;\n--chart--color-error: #d63638;\n--chart--color-info: #72aee6;\n```\n\n## License\n\nGPL-2.0-or-later","readmeFilename":"README.md","_rev":"1-c583c74f74b5c16aec59ba619fa3b543"}