growing-bar-graph

Eine einfache React-Komponente: ein horizontaler Balkengraph, der beim Anzeigen von 0 auf den Zielwert animiert ("wächst"). Erstellt als React-Package mit Vite (Library Mode), damit die Komponente in anderen React-Projekten via npm / node_modules genutzt werden kann.

Props

| Prop | Typ | Pflicht | Beschreibung | |--------------|--------|---------|--------------------------------------------| | value | number | ja | Zielwert des Balkens | | maxvalue | number | ja | Maximalwert (entspricht 100% Balkenbreite) | | barwidthpx | number | nein | maximale Breite des Balkens in px (Default 300) | | label | string | nein | Beschriftung über dem Balken | | color | string | nein | Balkenfarbe (Default #3f8efc) |

Verwendung (nach Installation)

import GrowingBarGraph from 'growing-bar-graph';

<GrowingBarGraph value={65} maxvalue={100} barwidthpx={400} label="Auslastung" color="#3f8efc" />

Entwicklung

npm install          # Abhängigkeiten installieren
npm run build         # Package bauen -> Ordner dist/
npm run demo           # Demo-App im Browser starten (Komponente live testen)

Veröffentlichen auf npmjs.com

npm login
npm publish --access public

Wichtig: Bei jedem erneuten Publish muss die version in package.json erhöht werden (z.B. per npm version patch).

Struktur

growing-bar-graph/
├── src/
│   ├── index.js                       # Einstiegspunkt (Export der Komponente)
│   └── components/
│       ├── GrowingBarGraph.jsx
│       └── GrowingBarGraph.css
├── demo/                              # Demo-App, wird NICHT mit veröffentlicht
│   ├── index.html
│   └── src/main.jsx
├── vite.config.js                     # Vite Library-Mode Konfiguration
└── package.json