Cài đặt

@michi-vz được publish lên npm dưới scope @michi-vz. Bạn chỉ cần cài một package đúng stack của mình, các wrapper framework tự kéo theo engine (@michi-vz/core). Mỗi tên package bên dưới link thẳng tới trang npm của nó.

Stack	Gói	Peer dependencies
React	@michi-vz/react	react & react-dom >= 18
Vue	@michi-vz/vue	vue >= 3
Svelte	@michi-vz/svelte	svelte >= 4
Angular	@michi-vz/angular	@angular/core >= 16
Web component	@michi-vz/wc	không có (tự chứa)
Vanilla / engine	@michi-vz/core	không có (d3 được đóng gói sẵn)

Cài đặt

React

npm i @michi-vz/react

Vue

npm i @michi-vz/vue

Svelte

npm i @michi-vz/svelte

Angular

npm i @michi-vz/angular

Web component

npm i @michi-vz/wc

Vanilla JS

npm i @michi-vz/core

Ví dụ dùng npm, nhưng pnpm add, yarn add, bun add dùng y hệt.

Peer dependencies

Các wrapper framework khai báo framework của mình là peer dependency. Bạn cài nó (hoặc đảm bảo app đã có sẵn) cùng với wrapper, nhờ vậy bạn tự quyết định version:

React

npm i @michi-vz/react react react-dom

Vue

npm i @michi-vz/vue vue

Svelte

npm i @michi-vz/svelte svelte

Angular

npm i @michi-vz/angular @angular/core

@michi-vz/wc và @michi-vz/core không có peer dependency nào, mọi thứ chúng cần (d3-scale/d3-shape, DOMPurify) đều đã được bundle sẵn.

Import một biểu đồ duy nhất

Import một biểu đồ thay vì cả barrel, để bundler có thể loại bỏ 21 biểu đồ còn lại:

React

import { RadarChart } from "@michi-vz/react/radar-chart";

Vue

import { RadarChart } from "@michi-vz/vue/radar-chart";

Svelte

import { radarChart } from "@michi-vz/svelte/radar-chart";

Angular

import { bindChart, applyRadarChartProps } from "@michi-vz/angular/radar-chart";

Web component

import "@michi-vz/wc/radar-chart"; // chỉ đăng ký <michi-vz-radar-chart>

Barrel trần @michi-vz/react / @michi-vz/vue / @michi-vz/svelte / @michi-vz/angular / @michi-vz/wc vẫn hoạt động bình thường và vẫn đăng ký mọi biểu đồ - sub-path chỉ là phần bổ sung thêm. Mỗi biểu đồ có sub-path riêng, dạng kebab-case, ví dụ @michi-vz/vue/comparable-vertical-bar-chart; xem Biểu đồ radar hoặc duyệt toàn bộ thư viện biểu đồ.

CDN / không cần build

Làm prototype, CodePen, hay một trang HTML thuần thì cứ load web component thẳng từ CDN, không cần bundler:

<script type="module" src="https://cdn.jsdelivr.net/npm/@michi-vz/wc/dist/michi-vz-wc.bundle.js"></script>

<michi-vz-line-chart id="c" width="600" height="300"></michi-vz-line-chart>
<script>
  document.getElementById("c").dataSet = [
    { label: "North", series: [{ date: 2016, value: 10, certainty: true }] },
  ];
</script>

Ghim một major version để chắc ăn, ví dụ @michi-vz/wc@1. Bundle CDN chứa mọi phần tử, nên với production thì nên cài package và chỉ import những biểu đồ bạn dùng (sub-path theo từng phần tử tree-shake được).

Styles

Engine tự chèn một core.css nhỏ (layout, tooltip, transitions) ngay lần đầu biểu đồ mount, bạn không cần import CSS nào cả. Nó cố tình không set fill/stroke: màu sắc là hợp đồng của bạn. Tô màu cho mark bằng nhãn đã sanitize, ngay trong stylesheet của riêng bạn:

.line[data-label-safe="North"] { stroke: #b23a2e; }
.bar[data-label-safe="Africa"] { fill: #cda14a; }

Vì biểu đồ render trong light DOM, CSS của bạn chạm được vào mọi mark, kể cả pixel canvas, qua một probe getComputedStyle.

Bước tiếp theo

• Render biểu đồ đầu tiên của bạn: hướng dẫn nhanh theo từng framework.
• Duyệt qua các biểu đồ: 16 ví dụ, mỗi ví dụ một trang.
• Tham chiếu API: props, event, và getContext() cho từng biểu đồ.
• LLM context: ChartContext không phụ thuộc renderer mà mỗi biểu đồ phát ra.