Installatie

@michi-vz wordt gepubliceerd op npm onder de @michi-vz-scope. Installeer het ene pakket voor jouw stack - de framework-wrappers trekken de engine (@michi-vz/core) automatisch binnen. Elke pakketnaam hieronder linkt naar zijn npm-pagina.

Stack	Pakket	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	geen (self-contained)
Vanilla / engine	@michi-vz/core	geen (d3 is meegebundeld)

Installeren

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

Voorbeelden gebruiken npm; pnpm add, yarn add, en bun add werken identiek.

Peer dependencies

De framework-wrappers declareren hun framework als een peer dependency - installeer het (of zorg dat je app het al heeft) naast de wrapper, zodat jij de versie beheert:

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 en @michi-vz/core hebben geen peer dependencies - alles wat ze nodig hebben (d3-scale/d3-shape, DOMPurify) is meegebundeld.

Eén grafiek importeren

Importeer één grafiek in plaats van de barrel, zodat je bundler de andere 21 kan laten vallen:

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"; // registreert alleen <michi-vz-radar-chart>

De kale @michi-vz/react / @michi-vz/vue / @michi-vz/svelte / @michi-vz/angular / @michi-vz/wc barrel werkt nog steeds en registreert nog steeds elke grafiek - sub-paths zijn puur additief. Elke grafiek heeft zijn eigen sub-path, in kebab-case, bijv. @michi-vz/vue/comparable-vertical-bar-chart; zie Radardiagram of blader door de volledige galerij.

CDN / geen build

Voor een prototype, een CodePen, of een gewone HTML-pagina, laad de web components rechtstreeks vanaf een CDN - geen bundler nodig:

<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>

Pin een major-versie voor stabiliteit, bijv. @michi-vz/wc@1. De CDN-bundle bevat elk element, dus voor productie is het beter om het pakket te installeren en alleen de grafieken die je gebruikt te importeren (per-element sub-paths zijn tree-shakeable).

Stijlen

De engine injecteert automatisch een kleine core.css (layout, tooltip, transities) de eerste keer dat een grafiek mount - je importeert zelf geen CSS. Het stelt bewust geen fill/stroke in: kleur is jouw contract. Kleur marks via hun gesaneerde label in je eigen stylesheet:

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

Omdat grafieken renderen in light DOM, bereikt jouw CSS elke mark - inclusief canvas-pixels, via een getComputedStyle-probe.

Volgende stappen

• Render je eerste grafiek - de quickstart per framework.
• Bekijk de grafieken - 16 voorbeelden, elk op een eigen pagina.
• API-referentie - props, events, en getContext() per grafiek.
• LLM-context - de renderer-onafhankelijke ChartContext die elke grafiek afgeeft.