mirror of
https://github.com/CachetHQ/Cachet.git
synced 2025-02-23 11:16:05 +01:00
107 lines
4.1 KiB
PHP
107 lines
4.1 KiB
PHP
@if($metrics->count() > 0)
|
|
<ul class="list-group">
|
|
@foreach($metrics as $metric)
|
|
<li class="list-group-item metric" data-metric-id="{{ $metric->id }}">
|
|
<div class="row">
|
|
<div class="col-xs-10">
|
|
<strong>
|
|
{{ $metric->name }}
|
|
@if($metric->description)
|
|
<i class="ion ion-ios-help-outline" data-toggle="tooltip" data-title="{{ $metric->description }}"></i>
|
|
@endif
|
|
</strong>
|
|
</div>
|
|
<div class="col-xs-2">
|
|
<div class="dropdown pull-right">
|
|
<a href="javascript: void(0);" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class='filter'>{{ trans('cachet.metrics.filter.'.$metric->trans_string_name) }}</span> <span class="caret"></span></a>
|
|
<ul class="dropdown-menu dropdown-menu-right">
|
|
<li><a href="#" data-filter-type="last_hour">{{ trans('cachet.metrics.filter.last_hour') }}</a></li>
|
|
<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>
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<div>
|
|
<canvas id="metric-{{ $metric->id }}" data-metric-name="{{ $metric->name }}" data-metric-suffix="{{ $metric->suffix }}" data-metric-id="{{ $metric->id }}" data-metric-group="{{ $metric->view_name }}" height="160" width="600"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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').text);
|
|
|
|
var defaultData = {
|
|
showTooltips: false,
|
|
labels: [],
|
|
datasets: [{
|
|
// fillColor: "rgba(220,220,220,0.1)",
|
|
fillColor: "{{$theme_metrics}}",
|
|
// strokeColor: "{{ $theme_metrics }}",
|
|
pointColor: "{{ color_darken($theme_metrics, -0.1) }}",
|
|
pointStrokeColor: "{{ color_darken($theme_metrics, -0.1) }}",
|
|
pointHighlightFill: "{{ color_darken($theme_metrics, -0.2) }}",
|
|
pointHighlightStroke: "{{ color_darken($theme_metrics, -0.2) }}",
|
|
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: $el.data('metric-name') + ": <{{ '%' }}= value %> " + $el.data('metric-suffix'),
|
|
scaleShowVerticalLines: true,
|
|
scaleShowLabels: false,
|
|
responsive: true,
|
|
maintainAspectRatio: false
|
|
});
|
|
}
|
|
}());
|
|
</script>
|
|
@endif
|