[WIDGET] Historique et Tendance

Bonjour @ajja17orange
Je peux retrouver ton widget sonde température quelque part ?

tu as plus d’info ?
Il y en a 1 ou 2 de n’adapterai pas en v4 « vu le temps que ça prend, enfin ça peu me piquer »
celui du sujet j’ai pas, hormis le refaire !

Salut, merci mais je ne vois pas cette option

Pas grave je vais fouiller. Merci.

Salut,

Si j’ai bien compris ta question et que ce qu’il te manque c’est le min/max alors pour les voir tu vas dans ton virtuel « Salle de douche » ensuite onglet « Commandes »,
Tu cliques sur l’engrenage de ta température et ensuite onglet « Affichage » puis tu coche « Afficher les statistiques »

Salut,

Mais je n’ai pas la case Afficher les statistiques

Salut,

il faut activer l’option Afficher les statistiques sur les widgets dans la configuration Jeedom :

1 « J'aime »

ha nickel merci beaucoup :hugs: ça marche parfaitement à présent

Bonjour,

J’ai le même message que toi lors de refresh de page du dashboard.
Confirmé par un F12 dans mon navigateur Chrome.

Pb sur le data.split :

Uncaught TypeError: Cannot read property ‹ split › of undefined
at durationSinceLastUpdate (:3:27)
at :113:9

Sur ligne de code var arrDate = _date.split(/-|\s|:/);

As-tu trouvé ?

Jeedom V4.0.61

EDIT 12/01/21 : Plus d’ano en prenant le code dans le post et pas le 1er.

Bonne année 2021 !!

Pour info, j’ai fait une petite modif après passage à la version 4.1: jqueryLoadingDiv est remplacé par div_jeedomLoading.

Pensez bien à vider le cache de Widget.

  //var loadingDiv = document.getElementById("jqueryLoadingDiv");
  var loadingDiv = document.getElementById("div_jeedomLoading");
  loadingDiv.className='hidden';
1 « J'aime »

Bonjour,
J’aimerais utiliser le calcul de la tendance utilisé ici sur ce widget:

Pourriez-vous dans un 1er temps m’aider à isoler ce qui doit être modifié?
La partie de code concernée semble être celle-ci:

      <div class="statsPart1 #hide_history#">
        <div class="stats"><span title='Min' class='tooltips'>Min : #minHistoryValue#</span></div>
        <div class="stats"><span title='Max' class='tooltips'>Max : #maxHistoryValue#</span></div>
        <div class="stats"><span title='Moyenne' class='tooltips'>Moy : #averageHistoryValue#</span></div>
      </div>
    </div>
  </div>
  <div class="#hide_history#">
      <div class="stats"><span title='Tendance' class='tooltips'>Tendance : <i class="#tendance#"></i></span></div>
  </div>

Au niveau de la partie script c’est déjà plus compliqué.

Bonjour,

Je reviens sur le widget tendance, histo de @moafrancky34.
J’ai utilisé le code du widget et l’ai intégré dans mon Jeedom, j’affiche correctement les données.

image

Malheureusement j’ai des messages d’erreur javascript qui reviennent systématiquement et qui me font planter certaines commandes.

Uncaught TypeError: Cannot read properties of undefined (reading 'split')

En cherchant un peu je constate effectivement que l’erreur provient de la ligne de script du widget histo et tendance.

Une idée pour corriger cela ?

Merci, Joël

Bonjour,

Je crois que le sujet ne concerne pas ton soucis car de mémoire ici il y avait besoin d’une actualisation au changement de valeur

Même si ça y ressemble, j’ai bien vu ta question sur un autre sujet mais on voit pas tous le code.(je vois pas l’utilisation de la variable arrdate

Sinon

Recherche a quoi correspond cette erreur

Exemple

Donc dans ton Split (date)

Il te faut décortiquer par des console log


Aussi

Et si c’est trop compliqué « c’est compréhensible »
Trouvé la (les) bonne(s) formule(s) avec le testeur d’expression (api PHP)

Que tu réutilises en JS

En utilisant l’API history

récupéré tous
Valeur et temps
selon une tranche de date
Ton script recherche le mini max

et convertis ton dernière changement de valeur par rapport à maintenant

Ça les widget core jeedom le fait (sauf si tu veux une actu comme se sujet) 2 lignes en HTML et idem en js

Via le testeur d’expression c’est jeedom (machine) en tâche de fond.

J’aurai pas le temps de t’aider se WE

Salut voici le code dans son entier,

<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#">
  <div class="title #hide_name#">
    <div  class="cmdName">#name_display#</div>
  </div>
  <div class="myrow">
    <div class="mycolumn state" style="font-size: 110%; white-space: nowrap;">-</div>
    <div class="mycolumn mytendance">
      <i class="fas fa-arrow-minus"></i>
    </div>
    <div class="mycolumn cmdStats #hide_history#" style="line-height: 1; font-size: 100%; white-space: nowrap; text-align: right;">
      <div class="myrow">
        <div class="mycolumn minHistoryValue" style="font-size: 100%; font-family:consolas; white-space: nowrap;">-</div>
      </div>
      <div class="myrow">
        <div class="mycolumn maxHistoryValue" style="font-size: 100%; font-family:consolas; white-space: nowrap;">-</div>
      </div>
      <div class="myrow">
        <div class="mycolumn timeCmd" style="font-size: 100%; font-family:consolas; white-space: nowrap;">-</div>
      </div> 
    </div>       
  </div>
  
  <style>
    .myrow {
      display: flex;
      flex-direction: row;
      width: 100%;
    }

    .mycolumn {
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: center;
    }      
  </style>

  <script>
    durationSinceLastUpdate = function(_date,_el){
      var arrDate = _date.split(/-|\s|:/);
      var timeInMillis = new Date(arrDate[0], arrDate[1] -1, arrDate[2], arrDate[3], arrDate[4], arrDate[5]).getTime();

      if(timeInMillis < (Date.now()+ jeeFrontEnd.clientServerDiffDatetime)){
        var d = ((Date.now() + jeeFrontEnd.clientServerDiffDatetime) - timeInMillis) / 1000;
        var j = Math.floor(d / 86400);
        var h = Math.floor(d % 86400 / 3600);
        var m = Math.floor(d % 3600 / 60);
        var s = Math.floor( d - (j*86400 + h*3600 + m*60) );
        if (d > 86399) {
          var interval = 3600000;
          _el.empty().append((j + " j").padStart(6," ").replace(/ /g, '&nbsp;'));
        } else if (d > 3599 && d < 86400) {
          var interval = 60000;
          _el.empty().append((h + " h").padStart(6," ").replace(/ /g, '&nbsp;'));
        } else {
          var interval = 10000;
          _el.empty().append((m + " min").padStart(6," ").replace(/ /g, '&nbsp;'));
        }
      }else{
        _el.empty().append(("-").padStart(6," ").replace(/ /g, '&nbsp;'));
      }
    }     

    function getHistory(id, start, end, unite) {
       // console.log(id + ', requesting history');
       jeedom.history.get ({ 
        cmd_id:id,
        dateStart:start,
        dateEnd:end,  
        success:  function(resultat){
          // This function is run asynchronously
          
          $('.cmd[data-cmd_id='+id+'] .minHistoryValue').empty().text(resultat.minValue);
          $('.cmd[data-cmd_id='+id+'] .maxHistoryValue').empty().text(resultat.maxValue);
 
          var prevDifferentValue;
          var currentValue;

          $( resultat.data ).each(function( index ) {
            var num = resultat.data[index][1];            

            if (currentValue != num) {
              prevDifferentValue=currentValue;
              currentValue=num;
            }

            if (num == resultat.maxValue) {
              var maxdate = new Date(resultat.data[index][0]);
              $('.cmd[data-cmd_id='+id+'] .maxHistoryValue').attr('title','Max ' + resultat.maxValue + ' ' + unite + ' // ' + formatDate(maxdate));
            }

            if (num == resultat.minValue) {
              var minidate = new Date(resultat.data[index][0]);
              $('.cmd[data-cmd_id='+id+'] .minHistoryValue').attr('title','Min ' + resultat.minValue + ' ' + unite + ' // ' + formatDate(minidate));
            }     
          });
          
          // console.log(id + ', currentValue ' + currentValue + ', prevDifferentValue ' + prevDifferentValue);
          
          if (currentValue >= prevDifferentValue + 0.1) {
            $('.cmd[data-cmd_id='+id+'] .mytendance').empty().html('<i class="fas fa-arrow-up"></i>');
          }
          else if (currentValue <= prevDifferentValue - 0.1) {
            $('.cmd[data-cmd_id='+id+'] .mytendance').html('<i class="fas fa-arrow-down"></i>');
          }
          else {
            $('.cmd[data-cmd_id='+id+'] .mytendance').empty().html('<i class="fas fa-minus"></i>');        
          }
          
          $('.cmd[data-cmd_id='+id+'] .mytendance').attr('title','Evolution ' + prevDifferentValue + ' --> ' + currentValue);
 
        }
      })
    }

    function formatDate(date) {
      var d = date.getDate();
      var m = date.getMonth() + 1; //Month from 0 to 11
      var y = date.getFullYear();
      var hh = date.getHours();
      var mn = date.getMinutes();
      var ss = date.getSeconds();

      return ((y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d)+' '+(hh<=9 ? '0' + hh : hh)+':'+(mn<=9 ? '0' + mn : mn)+':'+(ss<=9 ? '0' + ss : ss)));
    }
    
    jeedom.cmd.update['#id#'] = function(_options){
      $('.cmd[data-cmd_id=#id#] .state').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
      $('.cmd[data-cmd_id=#id#] .state').attr('valueDate',_options.valueDate)
      
      var loadingDiv = document.getElementById("div_jeedomLoading");
  	  loadingDiv.className='hidden';
      // avant 4.1 
      // var loadingDiv = document.getElementById("jqueryLoadingDiv");
      // avant 4.1 
	  //loadingDiv.className='hidden';
      
      var today = new Date();
      var yesterday = new Date();
      yesterday.setDate(today.getDate() - 1);
      
      getHistory('#id#', formatDate(yesterday), formatDate(today), '#unite#');

      $('.cmd[data-cmd_id=#id#] .state').empty().append(Number.parseFloat(_options.display_value).toFixed(1) + " #unite#");			
            
      durationSinceLastUpdate(_options.valueDate, $('.cmd[data-cmd_id=#id#]').find('.timeCmd'));      

      // Every 60s, durationSinceLastUpdate is computed
      var _el = $('.cmd[data-cmd_id=#id#]').find('.timeCmd');
      if(_el.attr('data-interval') != undefined){
        clearInterval(_el.attr('data-interval'));
      }  
      var myinterval = setInterval(function(){      
        durationSinceLastUpdate($('.cmd[data-cmd_id=#id#] .state').attr('valueDate'), _el);      
      }, 60000);
      _el.attr('data-interval', myinterval);
    }

    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'/*,minHistoryValue:'#minHistoryValue#'*/});

  </script>
</div>

Merci pour ton aide.