Bonjour, Je cherche depuis un moment de mettre en oeuvre des jauge en mode solide. Voici ce que j’ai pu obtenir et le code qui suit.
Notez qu’il y a quelques varibales a définir dans le widget en lui meme :
#badcol# = couleur de la jauge proche du mini
#goodcol# = couleur de la jauge proche du maxi
#minval# = valeur mini a afficher
#maxval# = valeur max a afficher
pour la couleur, il y a 2 façons de procéder puisque le core de jeedom ne nous laisse pas vraiment jouer avec :
Soit on part sur une couleur fixe, et a ce moment la il faut redefinir le root css en creeant un contenu HTML qui sera invisible, mais ecrase le CSS core : badcol et goodcol devient de fait inutiles.
Semi bourrin…
Soit on va tripoter le /var/www/html/desktop/css/desktop.main.css
et enlever le :
.highcharts-color-0 { fill: var(--link-color); }```
Bourrin mais efficace. car du coup les graphs changent de couleur correctement.
<div class="cmd cmd-widget arcgauge #history#" style="color:grey; width:100%; height:100%;" data-type="info" data-subtype="numeric" data-template="default" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" title="{{Date de valeur}} : #valueDate#<br/>{{Date de collecte}} : #collectDate#" >
<div class="title #hide_name#">
<span class="cmdName">#name_display#</span>
</div>
<div>
<div class="gauge cursor #history#" style="width:100% !important; height:100%!important; color:grey !important;" data-cmd_id="#id#"></div>
</div>
<div class="cmdStats #hide_history#">
<span title='{{Min}}' class='tooltips'>#minHistoryValue#</span>|<span title='{{Moyenne}}' class='tooltips'>#averageHistoryValue#</span>|<span title='{{Max}}' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
$('.cmd[data-cmd_id=#id#]').attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate)
$('.cmd[data-cmd_uid=#uid#] .gauge').series[0].points[0].update()
}
if (is_numeric('#state#')) {
$('.cmd[data-cmd_uid=#uid#] .gauge').empty().highcharts({
chart: {
style: {
fontFamily: 'Comfortaa'
},
type: 'solidgauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
backgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
width:'150',
height:'100',
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0,
spacingBottom: 0,
borderWidth : 0
},
title: null,
pane: {
center: ['65%', '90%'],
size: '140%',
startAngle: - 90,
endAngle: 20,
background: {
backgroundColor:'#EEE',
innerRadius: '65%',
outerRadius: '70%',
shape: 'arc',
borderWidth: 0
}
},
tooltip: {
enabled: false
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.3, '#badcol#'], // green
[0.6, '#DDDF0D'], // yellow
[1, '#goodcol#'] // red
],
lineWidth: 2,
minorTickInterval: null,
tickLength: -3,
tickPixelInterval: 10,
showFirstLabel: true,
showLastLabel: true,
tickWidth: 2,
max: #maxval#,
min: #minval#,
title: {
text: ''
},
labels: {
distance:10,
x:-5,
}
},
credits: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -20,
borderWidth: 0,
useHTML: true
}
}
},
series: [{
name: '',
data: [#state#],
radius: 92,
innerRadius: 72,
dataLabels: {
y: 15,
x: 0,
format:
'<div style="text-align:right">' +
'<span style="color:grey">{y} </span>' +
'<span style="color:grey;opacity:0.4">#unite#' +
'<br/>'+'#name#</span>'+
'</div>'
},
}]
})
} else {
$('.cmd[data-cmd_uid=] .gauge#uid#').append('<center><span class="label label-danger">#state#</span></center>')
}
</script>
</div>
