{"_id":"@a3tai/mittsu-charts","name":"@a3tai/mittsu-charts","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@a3tai/mittsu-charts","version":"0.1.0","description":"Svelte 5 chart components for @a3tai/mittsu, rendered with SVG and powered by D3.","homepage":"https://mittsu.dev","repository":{"type":"git","url":"git+https://github.com/a3tai/mittsu.git","directory":"packages/charts"},"bugs":{"url":"https://github.com/a3tai/mittsu/issues"},"private":false,"type":"module","scripts":{"check":"svelte-check --tsconfig ./tsconfig.json","test":"vitest run","test:watch":"vitest"},"peerDependencies":{"d3-array":"^3.2.0","d3-scale":"^4.0.0","d3-shape":"^3.2.0","svelte":"^5.0.0"},"devDependencies":{"@types/d3-array":"^3.2.0","@types/d3-scale":"^4.0.0","@types/d3-shape":"^3.1.0","d3-array":"^3.2.0","d3-scale":"^4.0.0","d3-shape":"^3.2.0","svelte":"^5.0.0","svelte-check":"^4.0.0","typescript":"^5.6.3","vitest":"^2.1.0"},"keywords":["svelte","svelte5","charts","d3","dataviz","mittsu"],"license":"MIT","gitHead":"692a1837645a4dfad05bdcc55ef0a586acbddc93","_id":"@a3tai/mittsu-charts@0.1.0","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-f8s1z2o0/M6Dog2yw8F39mkv/ePVstqh14cC4jiPw04zIgWAHvOpMevFYMHihWDJbi3qZdzFvwgXJnbFkOljuA==","shasum":"7ca635ba961e41dcdec6a6f104f3c814575b9830","tarball":"https://registry.npmjs.org/@a3tai/mittsu-charts/-/mittsu-charts-0.1.0.tgz","fileCount":26,"unpackedSize":112015,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCBM8MP/zyWL6xUp5U+geviCrHesJ5YQqis96tG9UP8JQIhAMA5kwf+GElaq4r2M5CnQ+MikPaf3Zd4GhKbkdCUnzzK"}]},"_npmUser":{"name":"a3tai","email":"steve@a3t.ai"},"directories":{},"maintainers":[{"name":"a3tai","email":"steve@a3t.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mittsu-charts_0.1.0_1778406619012_0.22235861142166602"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-10T09:50:18.891Z","0.1.0":"2026-05-10T09:50:19.165Z","modified":"2026-05-10T09:50:19.689Z"},"maintainers":[{"name":"a3tai","email":"steve@a3t.ai"}],"description":"Svelte 5 chart components for @a3tai/mittsu, rendered with SVG and powered by D3.","homepage":"https://mittsu.dev","keywords":["svelte","svelte5","charts","d3","dataviz","mittsu"],"repository":{"type":"git","url":"git+https://github.com/a3tai/mittsu.git","directory":"packages/charts"},"bugs":{"url":"https://github.com/a3tai/mittsu/issues"},"license":"MIT","readme":"# @a3tai/mittsu-charts\n\nSvelte 5 chart components for `@a3tai/mittsu`.\n\nThe package follows the same source-first model as the core UI package:\ncomponents are plain Svelte files with sibling global CSS files. D3 is used\nfor chart math — scales, ticks, paths, arcs, and stacking — while Svelte\nowns rendering and interaction state.\n\n## Components\n\n- `ChartFrame` — shared figure shell: header, description, legend, metrics,\n  footer.\n- `ChartTooltip` — tooltip content with label, marker, unit, icon, and\n  total variants.\n- `AreaChart` — time / numeric / categorical area chart with stacked and\n  expanded modes.\n- `LineChart` — time / numeric / categorical x-axis line chart with step,\n  monotone, and linear curves.\n- `BarChart` — grouped, stacked, vertical, or horizontal categorical bars\n  with a negative-value variant.\n- `DonutChart` — pie or donut chart with labels (inside / outside), active\n  slices, legend, and center total.\n- `RadarChart` — polygon or circular radar with filled, line-only, and dot\n  variants.\n- `RadialChart` — radial progress rings or stacked gauge arcs.\n\n## Install\n\n```bash\nnpm install d3-array d3-scale d3-shape\nnpx @a3tai/mittsu add line-chart \\\n  --registry https://raw.githubusercontent.com/a3tai/mittsu/main/packages/charts/registry.json\n```\n\nCharts pull from individual D3 sub-packages so you don't ship the full\n`d3` umbrella. If you already have `d3` installed, those sub-packages\ncome with it — no extra step needed.\n\nThe CLI copies the requested component plus shared `lib/` and `tokens/`\nfiles into your project. Import the resulting CSS once at the root of\nyour app:\n\n```css\n/* design tokens — load before component CSS */\n@import './lib/styles/charts.css';        /* tokens/charts.css */\n@import './lib/styles/charts.shared.css'; /* lib/charts.shared.css */\n\n/* per chart you've copied */\n@import './lib/components/ui/chart-frame/chart-frame.css';\n@import './lib/components/ui/chart-tooltip/chart-tooltip.css';\n@import './lib/components/ui/line-chart/line-chart.css';\n```\n\nThe exact destination paths depend on your CLI config; the structure\nabove mirrors what most consumers end up with. The package also ships\nthe source tree directly (`packages/charts/...`) so you can import via\npackage path during development:\n\n```css\n@import '@a3tai/mittsu-charts/tokens/charts.css';\n@import '@a3tai/mittsu-charts/lib/charts.shared.css';\n@import '@a3tai/mittsu-charts/components/chart-frame/chart-frame.css';\n@import '@a3tai/mittsu-charts/components/chart-tooltip/chart-tooltip.css';\n@import '@a3tai/mittsu-charts/components/line-chart/line-chart.css';\n```\n\n## Tokens\n\nChart tokens (`tokens/charts.css`) are layered on top of\n`@a3tai/mittsu-svelte5/tokens/tokens.css`. Every reference includes a\nfallback so charts render in isolation, but you'll get the intended look\nwhen the base tokens are also imported.\n\nThe palette includes both categorical tokens (`--uin-chart-1` through\n`--uin-chart-8`) and semantic tokens for product data:\n\n- `--uin-chart-critical`, `--uin-chart-danger`, and `--uin-chart-warning` for security risk and failed states.\n- `--uin-chart-success` and `--uin-chart-info` for healthy, remediated, selected, or informational series.\n- `--uin-chart-neutral` for baselines, archived states, and low-emphasis comparisons.\n\nLLM-friendly chart rule: generate plain `data` arrays first, then a small\n`series` array with explicit `key`, `label`, and semantic `color` values.\nAvoid one-off hex colors in examples and prefer tokens that explain intent.\n\n## Usage\n\n```svelte\n<script lang=\"ts\">\n  import LineChart from '@a3tai/mittsu-charts/components/line-chart/line-chart.svelte';\n\n  const data = [\n    {date: new Date('2025-01-01'), desktop: 1240, mobile: 940},\n    {date: new Date('2025-02-01'), desktop: 1380, mobile: 1110},\n    {date: new Date('2025-03-01'), desktop: 1610, mobile: 1280},\n  ];\n</script>\n\n<LineChart\n  xKey=\"date\"\n  {data}\n  series={[\n    {key: 'desktop', label: 'Desktop'},\n    {key: 'mobile',  label: 'Mobile'},\n  ]}\n  title=\"Active visitors\"\n  description=\"Last 90 days\"\n  showPoints\n/>\n```\n\n`BarChart`, `AreaChart`, and `LineChart` share `data` + `series` shape.\n`DonutChart` and `RadialChart` accept a flat `{label, value, color?}[]`\nlist. `RadarChart` uses the `data` + `series` pattern with an\n`xKey` (default `\"axis\"`).\n\n## Local development\n\n```bash\nnpm --workspace @a3tai/mittsu-charts run check\n```\n","readmeFilename":"README.md","_rev":"1-f06379f42302766ca4ae204eda583c43"}