lucas.mathieu/cachet-docker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added metrics filter dropdown. Closes #518

Browse Source
This commit is contained in:
James Brooks
2015-08-02 15:43:20 +01:00
committed by James Brooks
parent 4a22b1b053
commit d99f95b2d6
15 changed files with 348 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/lang/de/cachet.php
+3 -3
View File
@@ -52,9 +52,9 @@ return [
// Metrics
'metrics' => [
'filter' => [
'hourly' => 'Stündlich',
'daily' => 'Täglich',
'monthly' => 'Monatlich',
'hourly' => 'Last 12 Hours',
'weekly' => 'Week',
'monthly' => 'Month',
],
],
resources/lang/en/cachet.php
+3 -3
View File
@@ -52,9 +52,9 @@ return [
// Metrics
'metrics' => [
'filter' => [
'hourly' => 'Hourly',
'daily' => 'Daily',
'monthly' => 'Monthly',
'hourly' => 'Last 12 Hours',
'weekly' => 'Week',
'monthly' => 'Month',
],
],
resources/lang/es/cachet.php
+3 -3
View File
@@ -50,9 +50,9 @@ return [
// Metrics
'metrics' => [
'filter' => [
'hourly' => 'Hourly',
'daily' => 'Daily',
'monthly' => 'Monthly',
'hourly' => 'Last 12 Hours',
'weekly' => 'Week',
'monthly' => 'Month',
],
],
resources/lang/fr/cachet.php
+3 -3
View File
@@ -52,9 +52,9 @@ return [
// Metrics
'metrics' => [
'filter' => [
'hourly' => 'Toutes les heures',
'daily' => 'Tous les jours',
'monthly' => 'Mensuel',
'hourly' => 'Last 12 Hours',
'weekly' => 'Week',
'monthly' => 'Month',
],
],
resources/lang/id/cachet.php
+3 -3
View File
@@ -52,9 +52,9 @@ return [
// Metrics
'metrics' => [
'filter' => [
'hourly' => 'Per jam',
'daily' => 'Harian',
'monthly' => 'Bulanan',
'hourly' => 'Last 12 Hours',
'weekly' => 'Week',
'monthly' => 'Month',
],
],
resources/lang/ko/cachet.php
+3 -3
View File
@@ -52,9 +52,9 @@ return [
// Metrics
'metrics' => [
'filter' => [
'hourly' => '시간별',
'daily' => '일별',
'monthly' => '월별',
'hourly' => 'Last 12 Hours',
'weekly' => 'Week',
'monthly' => 'Month',
],
],
resources/lang/nl/cachet.php
+3 -3
View File
@@ -52,9 +52,9 @@ return [
// Metrics
'metrics' => [
'filter' => [
'hourly' => 'Ieder uur',
'daily' => 'Dagelijks',
'monthly' => 'Maandelijks',
'hourly' => 'Last 12 Hours',
'weekly' => 'Week',
'monthly' => 'Month',
],
],
resources/lang/pl/cachet.php
+3 -3
View File
@@ -52,9 +52,9 @@ return [
// Metrics
'metrics' => [
'filter' => [
'hourly' => 'Godzinowo',
'daily' => 'Dziennie',
'monthly' => 'Miesięcznie',
'hourly' => 'Last 12 Hours',
'weekly' => 'Week',
'monthly' => 'Month',
],
],
resources/lang/pt-BR/cachet.php
+3 -3
View File
@@ -52,9 +52,9 @@ return [
// Metrics
'metrics' => [
'filter' => [
'hourly' => '',
'daily' => '',
'monthly' => '',
'hourly' => 'Last 12 Hours',
'weekly' => 'Week',
'monthly' => 'Month',
],
],
resources/lang/ru/cachet.php
+3 -3
View File
@@ -52,9 +52,9 @@ return [
// Metrics
'metrics' => [
'filter' => [
'hourly' => 'Ежечасно',
'daily' => 'Ежедневно',
'monthly' => 'Ежемесячно',
'hourly' => 'Last 12 Hours',
'weekly' => 'Week',
'monthly' => 'Month',
],
],
resources/lang/zh-CN/cachet.php
+3 -3
View File
@@ -52,9 +52,9 @@ return [
// Metrics
'metrics' => [
'filter' => [
'hourly' => '每小时的',
'daily' => '每日的',
'monthly' => '每月的',
'hourly' => 'Last 12 Hours',
'weekly' => 'Week',
'monthly' => 'Month',
],
],
resources/views/partials/metrics.blade.php
+79 -47
View File
@@ -1,14 +1,7 @@
@if($metrics->count() > 0)
<ul class="list-group metrics">
@foreach($metrics as $metric)
<?php
$hourPoints = [];
foreach (range(1, 11) as $hour) {
$hourPoints[$hour] = $metric->getValuesByHour($hour);
}
$hourPoints = array_reverse($hourPoints);
?>
<li class="list-group-item metric">
<li class="list-group-item metric" data-metric-id="{{ $metric->id }}">
<div class="row">
<div class="col-xs-10">
<h4>
@@ -19,55 +12,94 @@
</h4>
</div>
<div class="col-xs-2 text-right">
<small>{{ trans('cachet.metrics.filter.hourly') }}</small>
<div class="dropdown">
<a href="javascript: void(0);" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class='filter'>{{ trans('cachet.metrics.filter.hourly') }}</span> <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#" data-filter-type="today">{{ trans('cachet.metrics.filter.hourly') }}</a></li>
<li><a href="#" data-filter-type="week">{{ trans('cachet.metrics.filter.weekly') }}</a></li>
<li><a href="#" data-filter-type="month">{{ trans('cachet.metrics.filter.monthly') }}</a></li>
</ul>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<div>
<canvas id="metric-{{ $metric->id }}" height="125" width="600"></canvas>
<canvas id="metric-{{ $metric->id }}" data-metric-id="{{ $metric->id }}" data-metric-group="today" height="125" width="600"></canvas>
</div>
</div>
</div>
<script>
(function () {
Chart.defaults.global.pointHitDetectionRadius = 1;
var hourList = [], date = new Date();
for (var i = 10; i >= 1; i--) {
hourList.push(moment(date).subtract(i, 'hours').seconds(0).format('HH:ss'));
}
hourList.push(moment(date).seconds(0).format('HH:ss'));
var hourPoints = [{{ implode(',', $hourPoints) }}];
var data = {
showTooltips: false,
labels: hourList,
datasets: [{
fillColor: "rgba(220,220,220,0.1)",
strokeColor: "rgba(52,152,219,0.6)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: hourPoints
}],
};
var ctx = document.getElementById("metric-{{ $metric->id }}").getContext("2d");
new Chart(ctx).Line(data, {
tooltipTemplate: "{!! $metric->name !!}: <%= value %> {!! $metric->suffix !!}",
scaleShowVerticalLines: true,
responsive: true,
maintainAspectRatio: false
});
}());
</script>
</li>
@endforeach
</ul>
<script type="text/json" id="metricData">
{!! json_encode($metric_data) !!}
</script>
<script>
(function () {
Chart.defaults.global.pointHitDetectionRadius = 1;
var charts = JSON.parse(document.getElementById('metricData').innerText);
var defaultData = {
showTooltips: false,
labels: [],
datasets: [{
fillColor: "rgba(220,220,220,0.1)",
strokeColor: "rgba(52,152,219,0.6)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: []
}],
};
$('a[data-filter-type]').on('click', function(e) {
e.preventDefault();
var $this = $(this);
// Change the selected view.
var $li = $this.parents('li')
$li.find('a[data-toggle=dropdown] span.filter').text($this.text());
var $canvas = $li.find('canvas');
$canvas.data('metric-group', $this.data('filter-type'));
drawChart($canvas);
});
$('canvas[data-metric-id]').each(function() {
var $this = $(this);
drawChart($this);
});
function drawChart($el) {
var metricId = $el.data('metric-id');
var metricGroup = $el.data('metric-group');
charts[metricId].context = document.getElementById("metric-"+metricId).getContext("2d");
if (typeof charts[metricId].chart !== 'undefined') {
charts[metricId].chart.destroy();
}
var chartConfig = defaultData;
var charter = charts[metricId][metricGroup];
chartConfig.labels = _.keys(charter);
chartConfig.datasets[0].data = _.values(charter);
charts[metricId].chart = new Chart(charts[metricId].context).Line(chartConfig, {
tooltipTemplate: "{!! $metric->name !!}: <%= value %> {!! $metric->suffix !!}",
scaleShowVerticalLines: true,
scaleShowLabels: false,
responsive: true,
maintainAspectRatio: false
});
}
}());
</script>
@endif