Skill · 1.0.0 verzió

Diagramkönyvtár integrálása

Meglévő frontendhez illeszti a diagramot következetes témával, reszponzív mérettel és tudatos erőforrás-felszabadítással.

chart-library-integration

Nézd meg, miben segít

Mikor hasznos?

Akkor használd, ha diagramot illesztenél az alkalmazásba újabb könyvtár vagy erőforrásszivárgás nélkül.

Miben segít neked?

A meglévő diagramkönyvtárat használja, csak a szükséges részek importálásával.
Az átméretezést és takarítást a komponens életciklusához kapcsolja.
A színeket, betűket és lokalizált értékeket a dizájntokenekhez igazítja.

Például ezt kérheted

Készíts reszponzív bevételdiagramot a telepített könyvtárral, és ellenőrizd az erőforrások felszabadítását navigáláskor. Méretezd át a diagramot, válts témát, majd többször nyisd újra. A feliratok maradjanak olvashatók, a bezárt diagram figyelői szabaduljanak fel.

Részletes dokumentáció

Itt a skill eredeti útmutatóját, példáit és ellenőrzési szempontjait olvashatod az eredeti nyelven.

Részletek…Összecsukás

Chart Library Integration

Use this skill when building or extending charts using the project's established charting library or selecting a library when none exists yet.

Adapt to the Project's Ecosystem First

Inspect Existing Dependencies Before Introducing a New Library:
- Check package.json and existing dashboard components first. Do not bundle a second heavy charting library alongside an existing one without clear architectural justification.
- Apply library-specific best practices:
  - Apache ECharts: Use tree-shakable modular imports (echarts/core, specific chart/component modules), bind ResizeObserver to chart.resize(), call chart.dispose() on unmount, and use dataset + dataZoom cleanly.
  - Recharts / Visx: Memoize data arrays and custom tooltip/tick components so parent state updates do not trigger full SVG re-mounts; disable initial mount animations when updating high-frequency live data.
  - Chart.js: Register only required controllers/scales/plugins (Chart.register(...)), provide explicit container aspect-ratio/height wrappers so resize loops cannot occur, and destroy instances on unmount.
  - Observable Plot / Vega-Lite: Use declarative mark composition and explicit scale/channel definitions with responsive width bindings.

Design System Token & Theme Alignment

Bind Colors, Typography, and Spacing to Design Tokens:
- Coordinate with the design system and UI/UX designer so chart axes, gridlines, tooltip surfaces, font families, and categorical/sequential/diverging palettes pull from semantic theme tokens (supporting both light and dark modes).
- Keep gridlines subtle and non-competing (low-opacity neutral stroke) so data marks carry the highest visual prominence (Tufte's data-ink ratio).
Consistent Number, Currency & Date Formatting:
- Format axis ticks with compact notation ($1.2M, 45k) while showing exact formatted values ($1,245,890.00) in tooltips and tables using locale-aware Intl.NumberFormat and Intl.DateTimeFormat.

Checklist

Does the implementation reuse the project's existing charting library and tree-shake unused modules?
Are chart instances, event listeners, and ResizeObserver hooks properly disposed on unmount?
Do colors, fonts, gridlines, and tooltips adapt cleanly to the project's light and dark design tokens?
Do axis ticks use concise locale-aware formatting while tooltips and tables expose exact values?

Csomagban lévő fájlok 1

SKILL.md