Adaptation du widget Solid Gauge à Jeedom 4.4

Utilisation du core de Jeedom Widgets
,
18

Pour préparer l’avenir :wink:, version Full JS :

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <!-- 
    https://community.jeedom.com/t/partage-solid-gauge-en-4-1/43922/22
      https://community.jeedom.com/t/widget-solid-gauge/124148/1
        https://community.jeedom.com/t/adaptation-du-widget-solid-gauge-a-jeedom-4-4/124125/16
    // For theme not "Legacy"
	// Full JS for Core >= 4.4
  -->  
  <div class="title #hide_name#">
    <span class="cmdName">#name_display#</span>
  </div>
  <div class="content-sm">
    <div class="gaugearnog23-#uid# #history#" data-cmd_id="#id#" id="gaugearnog23-#uid#"></div>
  </div>
  <div class="timeCmd label label-default #history#" data-type="info"></div>
  <div class="cmdStats #hide_history#">
    <span title='{{Minimum}}' class='tooltips'>#minHistoryValue#</span>|<span title='{{Moyenne}}' class='tooltips'>#averageHistoryValue#</span>|<span title='{{Maximum}}' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
  </div>
  <template>
    <div>time : duration|date (Affiche durée ou date de la valeur).</div>
    <div>tickInterval : intervalle des graduations.</div>
    <div>color1 : couleur si valeur &lt; 30%.</div>
    <div>color2 : couleur si valeur &lt;= 60%.</div>
    <div>color3 : couleur si valeur &gt; 60%.</div>
  </template>
  
  <style>
    :root {
      --color1-#uid#: rgb(0, 255, 0);
      --color2-#uid#: rgb(255, 255, 0);
      --color3-#uid#: rgb(255, 0, 0);
    }
    .gaugearnog23-#uid# { width: 105px; height: 105px; }
    .gaugearnog23-#uid# .highcharts-pane { fill: var(--el-defaultColor); }
    .gaugearnog23-#uid# .highcharts-container .highcharts-axis-line { stroke: transparent; }
    .gaugearnog23-#uid# .highcharts-yaxis-grid .highcharts-grid-line { stroke: none !important; }
    [data-theme="core2019_Dark"] .gaugearnog23-#uid# .highcharts-tick {  stroke: rgb(38, 38, 38); }
    [data-theme="core2019_Light"] .gaugearnog23-#uid# .highcharts-tick {  stroke: rgb(249, 249, 250); }
  </style>
  <script src="/3rdparty/highstock/modules/solid-gauge.js"></script>
  <script>
    if ('#color1#' != '#'+'color1#') document.documentElement.style.setProperty('--color1-#uid#', '#color1#')
    if ('#color2#' != '#'+'color2#') document.documentElement.style.setProperty('--color2-#uid#', '#color2#')
    if ('#color3#' != '#'+'color3#') document.documentElement.style.setProperty('--color3-#uid#', '#color3#')
    setTimeout(function() { //temps mort pour charger la lib
      jeedom.cmd.update['#id#'] = function(_options) {
        if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
          if (chart#uid#) chart#uid#.series[0].points[0].update(_options.value)
          else document.getElementById('gaugearnog23-#uid#').innerHTML = '<span class="label label-danger">' + _options.value + '#unite#</span>'
          cmd.setAttribute('title', '{{Date de valeur}}: ' + _options.valueDate + '<br>{{Date de collecte}}: ' + _options.collectDate)
          if ('#time#' == 'duration' || '#time#' == 'date') jeedom.cmd.displayDuration(_options.valueDate, cmd.querySelector('.timeCmd'), '#time#')
        }
      }
      if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
        if (is_numeric('#state#')) {
          document.getElementById('gaugearnog23-#uid#').empty()
          var chart#uid# = Highcharts.chart('gaugearnog23-#uid#', {
            chart: {
              style: { fontFamily: 'Roboto' },
              type: 'solidgauge',
              plotBackgroundColor: null,
              plotBackgroundImage: null,
              backgroundColor: null,
              plotBorderWidth: 0,
              plotShadow: false,
              height: 106,
              spacingTop: 0,
              spacingLeft: 0,
              spacingRight: 0,
              spacingBottom: 0,
              borderWidth : 0
            },
            title: null,
            pane: {
              center: ['50%', '50%'],
              size: 85,
              startAngle: 180,
              endAngle: 540,
              background: {
                innerRadius: '70%',
                outerRadius: '100%',
                shape: 'arc',
                borderWidth: 0,
              }
            },
            tooltip: { enabled: false },
            // the value axis
            yAxis: {
              stops: [
                [0.3, 'var(--color1-#uid#)'],
                [0.6, 'var(--color2-#uid#)'],
                [0.9, 'var(--color3-#uid#)']
              ],
              lineWidth: 0,
              minorTickInterval: null,
              tickInterval: (is_numeric('#tickInterval#') ? parseFloat('#tickInterval#') : 25),
              tickWidth: 4,
              tickLength: 15,
              tickPosition: 'inside',
              labels : {enabled: false},
              min: parseFloat('#minValue#'),
              max: parseFloat('#maxValue#'),
              zIndex: 6,
              title: { text: '' }
            },
            labels : {enabled: false},
            plotOptions: {
              solidgauge: {
                dataLabels: {
                  y: 9,
                  borderWidth: 0,
                  useHTML: true
                }
              }
            },
            credits: { enabled: false },
            exporting : { enabled: false },
            series: [{
              name: '',
              data: [Math.round(parseFloat('#state#') * 10) / 10],
              radius: '100%',
              innerRadius: '70%',
              dataLabels: {
                y: -22,
    	        format: '<span style="color: var(--link-color); font-size: 24px;">{y}</span> <span style="color: var(--link-color); font-size: 12px; position: relative; top: -8px;">#unite#</span>'
              },
            }]
          })
        } else document.getElementById('gaugearnog23-#uid#').innerHTML = '<span class="label label-danger">#state#</span>'
      } 
      jeedom.cmd.update['#id#']({value:'#value#', display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'})
    }, 250)
  </script>
</div>
5 « J'aime »