Weave Code
Laravel Metric Cards Laravel Package
lacodix/laravel-metric-cards
WIP Laravel package for rendering metric cards with Chart.js. Ships a pre-built browser bundle (metrics.js) you can publish; no Chart.js install needed. Configure chart defaults, palette, and Colors plugin via config/metric-cards.php.
Get insights in your applications key business values with metrics visualized as livewire cards
Frequently asked questions about Laravel Metric Cards
- Can I use this package with Laravel 12 or earlier?
- No, this package is designed for Laravel 13 and leverages its architecture (Livewire 3, service container). Downgrading is unsupported, and older Laravel versions would require a fork or significant refactoring. Upgrade to Laravel 13 for compatibility.
- How do I customize the Chart.js colors beyond the config file?
- The package provides a `config/metric-cards.php` for theming, but deeper customizations require modifying the pre-built `dist/metrics.js`. You’ll need to rebuild the bundle (`npm ci && npm run build`) and commit the updated `dist/metrics.js` to your repo. Avoid this unless necessary, as it may introduce CI/CD friction.
- Is Livewire required, or can I use this with Inertia.js?
- Livewire is a hard dependency—this package is built for server-driven UIs. Inertia.js apps can use the pre-built `metrics.js` directly, but dynamic updates (e.g., real-time refreshes) won’t work without Livewire. For SPAs, consider standalone Chart.js or alternatives like Laravel Nova.
- What’s the best way to handle asset updates in production?
- The package includes a CI check (`git diff --exit-code dist/metrics.js`) to ensure the pre-built bundle matches the source. In production, automate the build step in your deployment pipeline (e.g., GitHub Actions) to avoid broken releases. Avoid manual edits to `dist/metrics.js` unless absolutely necessary.
- Does this package support real-time metrics (e.g., WebSocket updates)?
- No, this is designed for static or Livewire-triggered updates, not real-time streaming. For WebSocket-driven dashboards, pair this with Laravel Echo or use a dedicated charting library like Highcharts or custom Chart.js with Socket.io.
- How do I add a new chart type (e.g., radar or polar)?
- The package doesn’t expose an API for adding chart types—you’d need to modify the source JavaScript (`resources/js/metrics.js`), rebuild the bundle, and commit the changes. For maintainability, consider extending Chart.js directly in your app or using a more flexible alternative like Laravel Nova.
- Will this work with Laravel’s Vite or Laravel Mix?
- No, the package ships a pre-built `dist/metrics.js` and doesn’t integrate with Vite/Mix. It’s designed for simplicity, but if you need Vite support, you’ll have to manually import Chart.js and the package’s JS into your Vite config, bypassing the pre-built bundle.
- Are there performance concerns with Livewire metrics on high-traffic dashboards?
- Yes, Livewire updates trigger server-side processing. Mitigate this by caching data (e.g., Redis) or debouncing interactions. For heavy dashboards, consider client-side polling with Axios or a dedicated analytics service like Laravel Scout.
- What alternatives exist for Laravel metric cards?
- For Laravel 13: **Laravel Nova** (built-in metrics, but paid), **FilamentPHP** (free admin panel with charts), or **custom Chart.js + Inertia.js** for SPAs. For non-Laravel: **AdminLTE**, **Chart.js standalone**, or **Highcharts**. Evaluate based on your stack and need for Livewire integration.
- How do I test this package in a CI environment?
- Ensure your CI pipeline runs `npm ci && npm run build` before testing, then verifies `dist/metrics.js` is updated. Add a step like `git diff --exit-code dist/metrics.js` to fail builds if the bundle is out of sync. Test Livewire interactions with Laravel’s `act()` helper or Pest.
Weaver
How can I help you explore Laravel packages today?