{"id":14974697,"url":"https://github.com/fidum/laravel-dashboard-chart-tile","last_synced_at":"2025-05-16T01:05:24.372Z","repository":{"id":44495055,"uuid":"263876438","full_name":"fidum/laravel-dashboard-chart-tile","owner":"fidum","description":"Create all the charts you want for your laravel dashboard","archived":false,"fork":false,"pushed_at":"2025-02-24T23:21:11.000Z","size":489,"stargazers_count":163,"open_issues_count":0,"forks_count":9,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-08T11:14:35.470Z","etag":null,"topics":["chart","dashboard","laravel","laravel-framework","spatie","tile"],"latest_commit_sha":null,"homepage":"https://github.com/spatie/laravel-dashboard","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fidum.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"dmason30"}},"created_at":"2020-05-14T09:50:39.000Z","updated_at":"2025-03-31T14:22:05.000Z","dependencies_parsed_at":"2024-03-05T20:25:35.340Z","dependency_job_id":"a8d3903d-8b0e-4468-ad34-d8ce8d20bd81","html_url":"https://github.com/fidum/laravel-dashboard-chart-tile","commit_stats":{"total_commits":75,"total_committers":4,"mean_commits":18.75,"dds":0.1333333333333333,"last_synced_commit":"bf267e5ec3e1a26fac7f62014c87e5f261e0a970"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fidum%2Flaravel-dashboard-chart-tile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fidum%2Flaravel-dashboard-chart-tile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fidum%2Flaravel-dashboard-chart-tile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fidum%2Flaravel-dashboard-chart-tile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fidum","download_url":"https://codeload.github.com/fidum/laravel-dashboard-chart-tile/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253347091,"owners_count":21894285,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","dashboard","laravel","laravel-framework","spatie","tile"],"created_at":"2024-09-24T13:50:56.921Z","updated_at":"2025-05-16T01:05:21.595Z","avatar_url":"https://github.com/fidum.png","language":"PHP","funding_links":["https://github.com/sponsors/dmason30"],"categories":[],"sub_categories":[],"readme":"# Laravel Dashboard Charting Tile\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/fidum/laravel-dashboard-chart-tile.svg?style=for-the-badge)](https://packagist.org/packages/fidum/laravel-dashboard-chart-tile)\n[![GitHub Workflow Status (with branch)](https://img.shields.io/github/actions/workflow/status/fidum/laravel-dashboard-chart-tile/run-tests.yml?branch=main\u0026style=for-the-badge)](https://github.com/fidum/laravel-dashboard-chart-tile/actions?query=workflow%3Arun-tests+branch%3Amaster)\n[![Codecov](https://img.shields.io/codecov/c/github/fidum/laravel-dashboard-chart-tile?logo=codecov\u0026logoColor=white\u0026style=for-the-badge)](https://codecov.io/gh/fidum/laravel-dashboard-chart-tile)\n[![Twitter Follow](https://img.shields.io/badge/follow-%40danmasonmp-1DA1F2?logo=twitter\u0026style=for-the-badge)](https://twitter.com/danmasonmp)  \n\nShow off your charting skills with this easy to use tile. Supports line, bar, pie, doughnut and many more! \n\n![Preview](docs/preview.png)\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require fidum/laravel-dashboard-chart-tile\n```\n\n## Usage\nIn the `dashboard` config file, you can optionally add this configuration in the `tiles` key. \n\n```php\n// in config/dashboard.php\nreturn [\n    // ...\n    'tiles' =\u003e [\n        'charts' =\u003e [     \n            'refresh_interval_in_seconds' =\u003e 300, // Default: 300 seconds (5 minutes)\n        ],\n    ],\n];\n```\nThis tile uses  `chart.js` to render the charts with the help of `Laravel Charts`  package see links to \ndocumentation for both below:  \n\n- [Laravel Charts Documentation](https://charts.erik.cat/)\n- [Chart.js Documentation](https://www.chartjs.org/docs/latest/charts/)\n\n\nSo that you can easily add your datasets and configure your charts exactly how you want them you need to create \na chart class that implements the `Fidum\\ChartTile\\Contracts\\ChartFactory` interface. \n\nSee chart example below:\n\n```php\nnamespace App\\Charts;\n\nuse Carbon\\Carbon;\nuse Fidum\\ChartTile\\Charts\\Chart;\nuse Fidum\\ChartTile\\Contracts\\ChartFactory;\n\nclass ExampleBarChart implements ChartFactory\n{\n    public static function make(array $settings): ChartFactory\n    {\n        return new static;\n    }\n\n    public function chart(): Chart\n    {\n        $date = Carbon::now()-\u003esubMonth()-\u003estartOfDay();\n\n        $data = collect(range(0, 12))-\u003emap(function ($days) use ($date) {\n            return [\n                'x' =\u003e $date-\u003eclone()-\u003eaddDays($days)-\u003etoDateString(),\n                'y' =\u003e rand(100, 500),\n            ];\n        });\n\n        $chart = (new Chart)\n            -\u003elabels($data-\u003epluck('x')-\u003etoArray())\n            -\u003eoptions([\n                  'responsive' =\u003e true,\n                  'maintainAspectRatio' =\u003e false,\n                  // etc...\n             ], true);\n\n        $chart-\u003edataset('Example Data', 'bar', $data-\u003etoArray())\n            -\u003ebackgroundColor('#848584');\n\n        return $chart;\n    }\n}\n```\n\nIn your dashboard view you can use the below component as many times as needed. Pass your chart class \nreference to the component and that will be used to generate the chart.\n\n```blade\n\u003cx-dashboard\u003e\n    \u003clivewire:chart-tile chartFactory=\"{{App\\Charts\\DailyUsersChart::class}}\" position=\"a1:a3\" /\u003e\n\u003c/x-dashboard\u003e\n```\n\n### Optional properties: \n- `chartFilters` optional key value array of settings that is passed to your chart `static::make` method. \n**Only use this for passing simple values `strings`, `integers`, `arrays` etc.** \nTo use this you will have to use `@livewire` syntax over the component syntax in order set the array value. \n```blade\n@livewire('chart-tile', [\n    'chartFactory' =\u003e App\\Charts\\DailyUsersChart::class, \n    'chartFilters' =\u003e ['type' =\u003e 'customer'],\n])\n```\n\n- `height` sets the height of the chart, depending on your dashboard layout you may need to adjust this (defaults to `100%`).\n\n- `refreshIntervalInSeconds` use this to override the refresh rate of an individual tile (defaults to `300` seconds) \n\n## Examples\nWe have provided some chart factory examples to help get you started [here](examples). \nYou can use the below dashboard layout to have an instant showcase of these examples:\n\n```blade\n\u003cx-dashboard\u003e\n    \u003clivewire:chart-tile chartFactory=\"{{\\Fidum\\ChartTile\\Examples\\ExamplePieChart::class}}\" position=\"a1:a2\" height=\"140%\"/\u003e\n    \u003clivewire:chart-tile chartFactory=\"{{\\Fidum\\ChartTile\\Examples\\ExampleDoughnutChart::class}}\" position=\"b1:b2\" height=\"140%\"/\u003e\n    \u003clivewire:chart-tile chartFactory=\"{{\\Fidum\\ChartTile\\Examples\\ExamplePieChart::class}}\" position=\"c1:c2\" height=\"140%\" /\u003e\n    \u003clivewire:chart-tile chartFactory=\"{{\\Fidum\\ChartTile\\Examples\\ExampleDoughnutChart::class}}\" position=\"d1:d2\" height=\"140%\" /\u003e\n    \u003clivewire:chart-tile chartFactory=\"{{\\Fidum\\ChartTile\\Examples\\ExampleBarChart::class}}\" position=\"a3:b4\" /\u003e\n    \u003clivewire:chart-tile chartFactory=\"{{\\Fidum\\ChartTile\\Examples\\ExampleLineChart::class}}\" position=\"c3:d4\" /\u003e\n    \u003clivewire:chart-tile chartFactory=\"{{\\Fidum\\ChartTile\\Examples\\ExampleLineChart::class}}\" position=\"a5:b6\" /\u003e\n    \u003clivewire:chart-tile chartFactory=\"{{\\Fidum\\ChartTile\\Examples\\ExampleBarChart::class}}\" position=\"c5:d6\" /\u003e\n    \u003clivewire:chart-tile chartFactory=\"{{\\Fidum\\ChartTile\\Examples\\ExampleBarChart::class}}\" position=\"a7:b8\" /\u003e\n    \u003clivewire:chart-tile chartFactory=\"{{\\Fidum\\ChartTile\\Examples\\ExampleLineChart::class}}\" position=\"c7:d8\" /\u003e\n\u003c/x-dashboard\u003e\n```\n\n## Testing\n```bash\ncomposer test\n```\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n## Security\n\nIf you discover any security related issues, please email :author_email instead of using the issue tracker.\n\n## Credits\n\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffidum%2Flaravel-dashboard-chart-tile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffidum%2Flaravel-dashboard-chart-tile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffidum%2Flaravel-dashboard-chart-tile/lists"}