Wallogit.com
2017 © Pedro Peláez
, (*1)
, (*2)
Easy to use widgets with custom metrics, filters and drag and drop support., (*3)
Note: Documentation is still in progress., (*4)
In order to install Cockpit, just add, (*6)
"mpociot/cockpit": "~1.0"
to your composer.json. Then run composer install or composer update., (*7)
(or run composer require mpociot/cockpit if you prefere that), (*8)
Then in your config/app.php add, (*9)
Mpociot\Cockpit\CockpitServiceProvider::class
in the providers array., (*10)
Next, publish Cockpit's views, javascript files and migration and run the migrate command., (*11)
php artisan vendor:publish --provider="Mpociot\Cockpit\CockpitServiceProvider" php artisan migrate
After you've published all the needed assets and created the widgets table through the Cockpit migration, you're good to go., (*13)
Cockpit comes with some preconfigured routes, so go ahead and visit: http://your.app/cockpit/., (*14)
This is your "dashboard" which allows you to create custom widgets that will query your application and show some nice charts., (*15)
When you add a new widget, Cockpit will look in a configurable folder for all available metrics your app could define. Each metric can have multiple sub-metrics that can be queried and those sub-metrics are filterable., (*17)
Example to make the concept easier to understand:, (*18)
Your app logs all logins. On your dashboard, you want to be able to show a widget that displays:, (*19)
In this case, your metric would be Logins that has two submetrics named per_time and per_user., (*20)
, (*22)
Cockpit ships a simple Users metric, which will be copied to this directory: app/Cockpit/Metrics.
If your app is running in a different namespace or you want to change the path of your custom metrics, modify the appropriate values in the config/cockpit.php file., (*23)
The base structure of a metric is:, (*24)
use Mpociot\Cockpit\Metric;
class Logins extends Metric
{
// Visible name when selecting the metric in the UI
protected $name = "My Metric";
// Define all submetrics and which charts are available for each submetric
protected $allowedSubMetrics = [
'per_user' => ['LineChart','ColumnChart','PieChart'],
];
// Define all filters that can be applied to this metric
protected $allowedFilters = [
'username' => [
'type' => 'text',
'name' => 'Username'
]
];
/**
* Implement date filter functionality.
* This is needed for all metrics, as the time filter is always available
*/
protected function filterFromDate($query, $value)
{
return $query->where("created_at" , ">", $value);
}
protected function filterUntilDate($query, $value)
{
return $query->where("created_at" , "<=", $value);
}
/**
* Implement your custom submetrics
*/
public function calculatePerUser($filters = [])
{
// Use this Eloquent model for all queries
$query = \App\Models\Login::query();
// Apply each filter method on the query object
$query = $this->applyFilters($query, $filters);
// Get the results we need to display
$results = $query
->groupBy("username")
->get([
DB::raw('username, COUNT(*) AS `count`')
]);
// Define the columns our chart will have
$this->dataTable
->addStringColumn("Username")
->addNumberColumn("Num Logins");
// Add the database results to our chart
foreach ($results as $result) {
$this->dataTable->addRow([
$result->username,
$result->count
]);
}
return $this->dataTable;
}
/**
* Implement your custom filters
*/
protected function filterUsername($query, $value)
{
return $query->where("username",$value);
}
}
Not documented yet :(, (*26)
For further information about how the DataTable API / Chart API works, please take a look at Lavacharts., (*28)
cockpit is free software distributed under the terms of the MIT license., (*30)
MIT
laravel statistics analytics grid widgets dashboard charts cockpit
MIT
laravel statistics analytics grid widgets dashboard charts cockpit