mirror_php/Cachet
1
0
Fork 0
mirror of https://github.com/CachetHQ/Cachet.git synced 2025-01-16 13:09:06 +01:00
Code Issues Projects Releases Wiki Activity

Improve Metric component

Browse Source
This commit is contained in:
James Brooks 2023-10-27 13:22:57 +01:00
parent abc1015c0f
commit 13aa8f40a5
2 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
resources/assets/js/components/status-page/Metric.vue
View File

@ -24,7 +24,7 @@
</div>
<div class="row">
<div class="col-xs-12">
<canvas :id="metricId" height="160" width="600"></canvas>
<canvas :id="metricId" height="200" width="900"></canvas>
</div>
</div>
</div>
@ -32,20 +32,14 @@
<script>
const Chart = require('chart.js')
const _ = require('lodash')
// Configure Chart.js
Chart.defaults.global.elements.point.hitRadius = 10
Chart.defaults.global.responsiveAnimationDuration = 1000
Chart.defaults.global.legend.display = false
module.exports = {
props: [
'metric',
'theme',
'theme-light',
'theme-dark'
],
export default {
props: {
metric: Object,
theme: String,
themeLight: String,
themeDark: String,
},
data () {
return {
canvas: null,
@ -77,15 +71,15 @@ module.exports = {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
this.context.fillStyle = "#666"
this.context.font = '44px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
this.context.font = '20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
const textString = "Loading data",
textWidth = this.context.measureText(textString).width
const textString = "Loading metrics..."
const textWidth = this.context.measureText(textString).width
this.canvas.textBaseline = 'middle'
this.canvas.textAlign = "center"
this.context.fillText(textString , (this.canvas.width / 2) - (textWidth / 2), 100)
this.context.fillText(textString, (this.canvas.width / 2) - (textWidth / 2), 100)
}
},
methods: {
@ -134,6 +128,7 @@ module.exports = {
data_keys[i] = data_keys[i].substr(11);
}
}
this.chart = new Chart(this.context, {
type: 'line',
data: {
@ -149,6 +144,14 @@ module.exports = {
}]
},
options: {
elements: {
point: {
hitRadius: 5
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {

2
resources/views/partials/modules/metrics.blade.php
View File

@ -4,7 +4,7 @@
<ul class="list-group">
@foreach($metrics as $metric)
<li class="list-group-item metric" data-metric-id="{{ $metric->id }}">
<metric-chart :metric="{{ $metric->toJson() }}" :theme-light="{{ json_encode($themeMetrics) }}" :theme="{{ json_encode(color_darken($themeMetrics, -0.1)) }}" :theme-dark="{{ json_encode(color_darken($themeMetrics, -0.2)) }}"></metric-chart>
<metric-chart :metric="{{ $metric->toJson() }}" theme-light="{{ $themeMetrics }}" theme="{{ color_darken($themeMetrics, -0.1) }}" theme-dark="{{ color_darken($themeMetrics, -0.2) }}"></metric-chart>
</li>
@endforeach
</ul>