{"id":51377205,"url":"https://github.com/beany-vu/michi-vz-mono","last_synced_at":"2026-07-05T21:00:32.911Z","repository":{"id":367554993,"uuid":"1281285550","full_name":"beany-vu/michi-vz-mono","owner":"beany-vu","description":"D3 charts for React, Angular, Vue, Svelte \u0026 Web Components — SVG/Canvas/WebGPU","archived":false,"fork":false,"pushed_at":"2026-07-03T22:19:46.000Z","size":4307,"stargazers_count":12,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-03T23:26:55.763Z","etag":null,"topics":["ai","canvas","charts","svg","webgpu"],"latest_commit_sha":null,"homepage":"https://michi-vz.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beany-vu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-26T11:59:22.000Z","updated_at":"2026-07-03T22:13:02.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/beany-vu/michi-vz-mono","commit_stats":null,"previous_names":["beany-vu/michi-vz-mono"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/beany-vu/michi-vz-mono","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beany-vu%2Fmichi-vz-mono","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beany-vu%2Fmichi-vz-mono/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beany-vu%2Fmichi-vz-mono/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beany-vu%2Fmichi-vz-mono/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beany-vu","download_url":"https://codeload.github.com/beany-vu/michi-vz-mono/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beany-vu%2Fmichi-vz-mono/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35168795,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-05T02:00:06.290Z","response_time":100,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","canvas","charts","svg","webgpu"],"created_at":"2026-07-03T14:00:27.944Z","updated_at":"2026-07-05T21:00:32.905Z","avatar_url":"https://github.com/beany-vu.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Charts"],"readme":"# @michi-vz\n\n**Charts that move with your stack, not against it.** One rendering engine,\nseventeen chart types, and first-class support for **React, Vue, Svelte, Angular,\nnative web components, or no framework at all**. Every chart is interactive,\naccessible, and emits an LLM-ready data context you can drop straight into a\nreport, a dashboard, or an AI feature.\n\n**[Live demos and docs -\u003e michi-vz.netlify.app](https://michi-vz.netlify.app/)**\n\n## Why @michi-vz\n\n- **For developers** - pick your framework, keep your charts. The same engine\n  powers React, Vue, Svelte, Angular, web components, and vanilla JS, so a stack\n  change never means a charting rewrite. Fully typed, tree-shakeable, light DOM,\n  and styleable with ordinary CSS.\n- **For teams and managers** - one charting standard across every project and\n  every framework your teams use. No vendor lock-in, MIT-licensed, accessible by\n  default (every chart ships a hidden screen-reader table), and ready for the AI\n  features on your roadmap.\n- **For analysts, finance, and reporting** - purpose-built financial views like\n  tornado (dual horizontal bar), range, gap, and ribbon charts, with a built-in\n  notion of certain vs. estimated values so forecasts and actuals read clearly.\n  Interactive tooltips and highlighting make the numbers easy to explore and easy\n  to put in front of a client.\n- **For everyone making charts** - clean defaults that look good out of the box,\n  smooth interactions, and copy-paste examples in the [docs](https://michi-vz.netlify.app/).\n\n## Lineage\n\n`@michi-vz` is the framework-agnostic successor to the original React-only\n[michi-vz](https://github.com/beany-vu/michi-vz)\n([live demos](https://beany-vu.github.io/michi-vz/)). That first version was\nReact-only; this rebuild extracts the same battle-tested charts into a plain-TS\nengine so they run on React, Vue, Svelte, Angular, web components, or plain\nJavaScript, while keeping the original behaviour and visual style intact.\n\n## What's inside\n\nA plain-TS rendering **engine** (`@michi-vz/core`), native **web components**\n(`@michi-vz/wc`, Lit + light DOM), thin wrappers for **React / Vue / Svelte /\nAngular**, and an opt-in client-side **AI insights** layer (`@michi-vz/insights`,\nin progress). Every chart emits a renderer-agnostic, LLM-ready **`ChartContext`**\n(structured data + stats + rule-based NL summary + a hidden a11y table mirror)\nthat is identical whether the chart renders as SVG or canvas.\n\n## Charts (17)\n\nGapChart · LineChart · FanChart (forecast) · AreaChart · ScatterPlot · VerticalStackBar ·\nComparableHorizontalBar · DualHorizontalBar (tornado) · BarBell · Range · Ribbon ·\nRadar · Treemap (realized/untapped split + mobile stack) · Pie / Donut · Bubble (gravity\ncluster + realized/untapped split) · Sankey (flow diagram) · Fountain (Jet d'Eau,\nexperimental) - each available across all five outputs (core engine, web component, and\nReact/Vue/Svelte/Angular wrappers), in SVG, canvas, and experimental WebGPU renderers.\n\n## Packages\n\nAll published to npm under the [**@michi-vz**](https://www.npmjs.com/org/michi-vz)\nscope. Every package renders the same charts from the same engine - pick the one\nthat matches your stack:\n\n| Package | Install | For |\n| --- | --- | --- |\n| [@michi-vz/core](https://www.npmjs.com/package/@michi-vz/core) | `npm i @michi-vz/core` | Framework-agnostic engine, no framework deps |\n| [@michi-vz/wc](https://www.npmjs.com/package/@michi-vz/wc) | `npm i @michi-vz/wc` | Native web components (Lit, light DOM) |\n| [@michi-vz/react](https://www.npmjs.com/package/@michi-vz/react) | `npm i @michi-vz/react` | React 18+ |\n| [@michi-vz/vue](https://www.npmjs.com/package/@michi-vz/vue) | `npm i @michi-vz/vue` | Vue 3 |\n| [@michi-vz/svelte](https://www.npmjs.com/package/@michi-vz/svelte) | `npm i @michi-vz/svelte` | Svelte |\n| [@michi-vz/angular](https://www.npmjs.com/package/@michi-vz/angular) | `npm i @michi-vz/angular` | Angular |\n| [@michi-vz/insights](https://www.npmjs.com/package/@michi-vz/insights) | `npm i @michi-vz/insights` | Opt-in AI layer: forecast, anomaly, narration, agent/MCP (experimental) |\n| [@michi-vz/devtools](https://www.npmjs.com/package/@michi-vz/devtools) | `npm i -D @michi-vz/devtools` | In-page devtools panel: inspect, diff, profile, and audit any chart |\n\n## Install\n\n```bash\nnpm i @michi-vz/core            # the engine (no framework deps)\nnpm i @michi-vz/wc              # native web components\nnpm i @michi-vz/react           # or /vue, /svelte, /angular\n```\n\n## Usage\n\n### Web component (any framework / no build)\n\n```html\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@michi-vz/wc\"\u003e\u003c/script\u003e\n\u003cmichi-vz-line-chart id=\"c\" width=\"600\" height=\"300\" chart-title=\"Sales\"\u003e\u003c/michi-vz-line-chart\u003e\n\u003cscript\u003e\n  const c = document.getElementById(\"c\");\n  c.dataSet = [{ label: \"North\", series: [{ date: 2016, value: 10, certainty: true }, /* … */] }];\n  c.addEventListener(\"michi-vz:highlight\", (e) =\u003e console.log(e.detail));\n  const ctx = c.getContext(); // LLM-ready context, identical in SVG and canvas\n\u003c/script\u003e\n```\n\n### React\n\n```tsx\nimport { LineChart } from \"@michi-vz/react\";\n\n\u003cLineChart dataSet={data} xAxisDataType=\"date_annual\" detectGaps renderer=\"svg\" /\u003e;\n```\n\n### Imperative engine (no framework)\n\n```ts\nimport { mountLineChart } from \"@michi-vz/core\";\nconst chart = mountLineChart(el, { dataSet, width: 600, height: 300 });\nchart.update(nextProps);\nchart.getContext();\nchart.destroy();\n```\n\n## Hard rules (light DOM, colour contract)\n\nCharts render into **light DOM only** - the canvas renderer resolves mark colours\nby reading consumer CSS via `getComputedStyle` on probe elements, so consumer\nrules like `.line[data-label-safe=\"North\"] { stroke: … }` reach canvas pixels.\nEvery mark carries `data-label` + `data-label-safe` (sanitized via the single\n`sanitizeForClassName`). `@michi-vz/core/styles.css` does layout/tooltip only and\nnever sets `fill`/`stroke`.\n\n## Develop\n\n```bash\npnpm install\npnpm build \u0026\u0026 pnpm typecheck \u0026\u0026 pnpm test\npnpm verify:playground   # headless-browser self-tests (expect \"N/N checks passed.\")\n```\n\nMonorepo: pnpm workspaces + Turborepo + Changesets + tsup. Run apps/docs via Docker.\n\n## License\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeany-vu%2Fmichi-vz-mono","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeany-vu%2Fmichi-vz-mono","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeany-vu%2Fmichi-vz-mono/lists"}