Accès aux données historisées et best practice sur l'affichage

ido · Août 12, 2023, 8:24

Hello,

Encore nouveau sur la partie développement sous Jeedom, je suis à la recherche des bonnes commandes pour accéder aux données historisés.

Mon objectif pour le plugin Jeedom Market
J’aimerais pouvoir cliquer sur un des trois rond pour ouvrir une graphique d’historisation.

Je ne connais pas du tout les best practice, sachant que j’aimerais que le graphique ne soit pas uniquement de la données sur laquel on a cliqué (par exemple la consommation de la maison) mais de faire un graphique avec les 3 valeurs (production/ conso/ grille)

exemple de graphique journalier :

J’histoirise les 3 données et je sais pas si je dois appeler une modal pour avoir un graph custom. Sachant que j’aimerais que le graph s’ouvre sur la journée en cours et donne la possibilité à l’utilisation de remonter sur plusieurs jours ou changer l’affichage jour / semaine/mois/année

Je vois à peut près comment faire mon graph en utilisant Highcharts, mais vraiment aucune idée de comment appelers données de la base

Par ailleurs sur la partie basse du plugin j’aimerais faire un graphique en forme de bâtons , sur les données récoltés sachant qu’elles sont remise à zero en chaque début de journée.

En gros pour cette partie j’ai besoin de récupérer la valeur max d’aujourd’hui qui a été historisé, valeur max de chaque jours précédent. Je sais comment le faire en SQL mais j’ai pas vraiment d’idée de comment le faire proprement dans un plugin jeedom
Exemple de graphique mensuel avec uniquement la valeur max de chaque commandes

Actuellement pour mon plugin j’ai fais un template dans core/template/dashboard/datamanager.html et je charge tout dedans, Puis dans mon fichier core/class/datamanager.class.php je fais un toHtml() pour rendre ma page et replace les infos, et j’ai tout mis dans ma page, est-ce la bonne manière de faire ?

voici ma page html :

<div class="eqLogic eqLogic-widget allowResize #custom_layout# #eqLogic_class# #class#" data-eqType="#eqType#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#" data-translate-category="#translate_category#" data-category="#category#" data-tags="#tags#" style="width: #width#;height: #height#;#style#; min-height:300px;">
  <center class="widget-name">
    <span class="cmd refresh pull-right cursor" data-cmd_id="#refresh_id#">
      <i class="fas fa-sync"></i>
    </span>
    <span class="reportModeVisible">#name_display# <span class="object_name">#object_name#</span></span>
    <a href="#eqLink#" class="reportModeHidden">#name_display# <span class="object_name">#object_name#</span></a>
  </center>

 
    <div class="cmds #isVerticalAlign#">
 <center>
      <div class="fronius"  style="--sunCurrentSpeed:#sunCurrentSpeed#;--houseCurrentSpeed:#houseCurrentSpeed#;">
        <div id="motion-demo"></div>
        <div class="icon sun #animated_solar# #history#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-cmd_id="#id#" data-cmd_uid="#uid#" >
            <div class="dots"></div>
            <div class="dots"></div>
            <div class="dots"></div>
            <svg viewBox="0 0 33.37 23.99" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g >
                <path d="m25.23,14.35c-2.22,0-4.4,0-6.63,0,2.2-2.98,5.95-7.93,8.14-10.89,2.2,0,4.39,0,6.63,0-2.16,2.91-5.93,7.89-8.14,10.89Z"  fill="currentColor"  opacity="0.3" />
                <path d="m25.07,3.5c-2.23,3.01-5.92,7.88-8.08,10.81-2.19,0-4.35,0-6.56,0,2.11-2.85,5.87-7.81,8.08-10.81,2.17,0,4.36,0,6.56,0Z"  fill="currentColor"  opacity="0.3" />
                <path d="m18.1,15.25h6.54c-2.19,2.97-4.3,5.81-6.46,8.73h-6.54c2.18-2.94,4.33-5.86,6.46-8.73Z"  fill="currentColor"  opacity="0.3" />
                <path d="m3.35,23.96c2.13-2.88,4.22-5.71,6.38-8.62,2.18,0,4.33,0,6.55,0-2.13,2.88-4.22,5.7-6.38,8.62-2.15,0-4.31,0-6.55,0Z"  fill="currentColor"  opacity="0.3" />
                <path d="m.67,10.35c.35.27.62.62.83,1,.33.61.46,1.26.39,1.95-.05.53-.24,1.02-.52,1.47-.01.02-.01.05-.02.07.02,0,.05.01.07.01.22.02.44.03.66.05.69.07,1.28.36,1.77.83.75.7,1.13,1.57,1.09,2.6,0,.04,0,.09,0,.16.15-.11.3-.18.45-.26L15.89,4.02s-.04-.03-.05-.04c-.73-.72-1.05-1.61-.97-2.66-.88.58-1.81.74-2.79.48-.98-.26-1.71-.87-2.17-1.79-.47.93-1.2,1.54-2.18,1.8-.98.25-1.91.11-2.78-.47,0,.09,0,.16,0,.23,0,.2,0,.4-.03.59-.17.92-.64,1.66-1.4,2.2-.3.22-.64.38-1,.48-.35.1-.71.13-1.08.12-.03,0-.07,0-.11,0,.55.86.74,1.78.47,2.77-.27.98-.87,1.71-1.8,2.17.04.03.07.05.1.07.19.12.39.24.57.37Z"  fill="currentColor" />
              </g>
            </svg>
            <div class="consoTxt production">#fronius_pac#<sup>#fronius_pac_unite#<sup></div>
        </div>

        <div class="icon house animated #reverseWay#">
          <div class="dots"></div>
          <div class="dots"></div>
          <div class="dots"></div>
          <svg viewBox="0 0 28 26"  width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g>
              <g >
                <polygon  fill="currentColor"  opacity="0.5" points="21.02 5.26 23.54 5.73 21.44 8.43 23.6 8.85 18.02 14.07 20.31 9.91 18.49 9.57 21.02 5.26"/>
              </g>
              <polygon  fill="currentColor"  opacity="0.3" points="24.82 8.5 23.66 9.59 28 13 28 11 24.82 8.5"/>
              <polygon  fill="currentColor"  opacity="0.3" points="23.15 7.19 22.49 8.04 24.81 8.5 23.15 7.19"/>
              <polygon  fill="currentColor"  opacity="0.3" points="20.46 5.07 14 0 7 5.5 7 2 3 2 3 8.64 0 11 0 13 14 2 19.65 6.44 20.46 5.07"/>
              <polygon  fill="currentColor"   points="22.5 10.68 15.74 17.01 19.41 10.34 17.56 10 18.85 7.81 14 4 3 12.64 3 26 12 26 12 18 16 18 16 26 25 26 25 12.64 22.5 10.68"/>
            </g>
          </svg>
          <div class="consoTxt consomation">#home_instant_consomation#<sup>#home_instant_consomation_unite#<sup></div>
        </div>

        <div class="icon grid">
          <svg  width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"viewBox="0 0 23.55 27.51">
            <g>
              <polygon fill="currentColor" points="11.44 14.72 13.62 14.72 12.28 17.32 14.16 17.34 10.28 22.6 11.56 18.74 9.97 18.74 11.44 14.72"/>
              <g fill="currentColor">
                <polygon  fill="currentColor"   opacity="0.5" points=".11 11.55 9.08 8.91 14.91 8.91 23.55 11.11 23.55 12.6 0 12.6 .11 11.55"/>
              </g>
              <g  fill="currentColor" opacity="0.3" >
                <polygon  points="14.66 8.12 14.26 5.12 9.5 5.12 9.08 8.12 14.66 8.12"/>
                <path    d="m15.33,13.12h-6.95l-2,14.39,10.88-.03-1.93-14.36Zm-5.71,5.86l1.64-4.5h2.75l-1.34,2.6,1.96.02-5.05,6.85,1.65-4.97h-1.6Z"/>
              </g>
              <polygon  fill="currentColor"  opacity="0.5" points="9.02 0 15.07 .06 19.86 2.59 19.86 4.02 3.96 4.02 3.96 2.7 9.02 0"/>
            </g>
          </svg>
          <div class="consoTxt reseau">#fronius_powerreal_p_sum#<sup>#fronius_powerreal_p_sum_unite#</sup></div>
        </div>
      </div>

      <div class="consos">
        <div class="production">
          Production <span>#fronius_day_energy#<sup>#fronius_day_energy_unite#h</sup></span>
        </div>
        <div class="autoconso">
          AutoConso <span>#daily_autoconsomation#<sup>#daily_autoconsomation_unite#h</sup></span>
        </div>
        <div class="achat">
          Achat <span>#daily_cumulativeImport#<sup>#daily_cumulativeImport_unite#h</sup></span>
        </div>
        <div class="revente">
          Revente <span>#daily_cumulativeExport#<sup>#daily_cumulativeExport_unite#h</sup></span>
        </div>
      </div>
  </center>  
    </div>
</div>

<link href="/plugins/datamanager/desktop/css/datamanager.css?202308" rel="stylesheet">
  <script>
  if ('#refresh_id#' != '') {
    $('.eqLogic[data-eqLogic_uid=#uid#] .refresh').on('click', function () {
      jeedom.cmd.execute({id: '#refresh_id#'})
    })
  } else {
   $('.eqLogic[data-eqLogic_uid=#uid#] .refresh').remove()
  }
</script>

Je sais pas si j’ai été claire, mais j’espère que vous saurez m’aider ^^

Phpvarious · Août 13, 2023, 8:04

Bonjour,

Je partirai plutôt sur un panel (modal), tu pourra dans je js faire des appels ajax pour récupérer les données et ainsi générer ton graph.

Le plugin qui me vient en tête et qui pourrai très bien t’aider sur le code a implémenter est le plugin thermostat, celui-ci utilise 2 types de graph dont les barres…

shun84 · Août 13, 2023, 12:27

Hello,

tu peux voir comment j’ai fait avec mon plugin Oklyn, j’ai combiné 2 graphes dans le panel

Je te donne GitHub - shun84/jeedom-plugin-oklyn
Aussi celui de MullerIntuitiv fait avec des barres

ido · Août 13, 2023, 4:44

Hello, merci pour vos retours je vais fouiller les plugins ^^

@shun84 Est-ce que tu pourrais orienter ma recherche dans ton plugin ?
J’ai regardé dans le forder modal mais le seul fichier est vide.
Et dans la partie core/template/dashboard je suis pas certain d’avoir trouvé mon bonheur ^^

Phpvarious · Août 13, 2023, 4:52

Regarde du coté desktop/php/panel.php

ido · Août 13, 2023, 4:54

ah moi je suis ici : GitHub - shun84/jeedom-plugin-mullerintuitiv mdr ! je pensais que c’était le même plugins ^^

Phpvarious · Août 13, 2023, 5:01

Change de branch pour mullerintuitiv le panel est en beta.

shun84 · Août 13, 2023, 5:03

Oui mullerintutiv est en beta

ido · Août 13, 2023, 5:09

J’ai essayé en mode manuel le code suivant:

                    jeedom.history.drawChart({
                        cmd_id: 2831,
                        dateStart: "2023-08-13 00:00:00",
                        dateEnd: "2023-08-13 23:59:59",
                        el: 'oklyn_air_water',
                        option: {
                            graphColor: '#406db0',
                            derive : 0,
                            graphZindex : 0
                        }
                    });

J’ai bien un graph qui pop dans mon élément #ajaaa par contre j’ai pas de data, je suppose que c’est ailleurs que je dois faire une requête ? (là je me suis basé sur la page /desktop/js/panel.js

shun84 · Août 13, 2023, 5:22

C’est dans le fichier js il y ça qui appel la fonction js

 $.ajax({
            type: 'POST',
            url: 'plugins/oklyn/core/ajax/oklyn.ajax.php',
            data: {
                action: 'getOklyn',
                object_id: object_id,
                version: 'dashboard',
                dateStart : _dateStart,
                dateEnd : _dateEnd
            },
            dataType: 'json',
            error: function (request, status, error) {
                handleAjaxError(request, status, error);
            },
            success: function (data) {
                if (data.state !== 'ok') {
                    $.fn.showAlert({
                        message: data.result,
                        level: 'danger'
                    })
                }
                let icon = '';
                if (isset(data.result.object.display) && isset(data.result.object.display.icon)) {
                    icon = data.result.object.display.icon
                }
                document.getElementById('oklynname').innerHTML = icon + ' ' + data.result.object.name

                for (let i in data.result.eqLogics) {
                    graphesOklyn(
                        data.result.eqLogics[i].eqLogic.id,
                        data.result.eqLogics[i].eqLogic.configuration.packoklyn,
                        data.result.date.start,
                        data.result.date.end
                    );
                }
            }
        });

Ensuite pour les données, c’est coté ajax plugins/oklyn/core/ajax/oklyn.ajax.php la fonction getOklyn

if (init('action') == 'getOklyn') {
        $object = jeeObject::byId(init('object_id'));

        if (!is_object($object)) {
            throw new Exception(__('Oklyn non trouvé', __FILE__));
        }

        $return = ['object' => utils::o2a($object)];

        $date = [
            'start' => init('dateStart'),
            'end' => init('dateEnd'),
        ];

        if ($date['start'] == '') {
            $date['start'] = date('Y-m-d', strtotime('-1 months ' . date('Y-m-d')));
        }
        if ($date['end'] == '') {
            $date['end'] = date('Y-m-d', strtotime('+1 days ' . date('Y-m-d')));
        }
        $return['date'] = $date;

        foreach ($object->getEqLogic(true, false, 'oklyn') as $eqLogic) {
            $return['eqLogics'][] = [
                'eqLogic' => utils::o2a($eqLogic)
            ];
        }

        ajax::success($return);
    }

ido · Août 13, 2023, 5:45

Je suis pas sûr de comprendre la partie ajax.php.
Pour moi tu get ton objet avec son ID et tu retourne l’objet et ses commandes
est-ce que les données sont inclues dans ?

$return = ['object' => utils::o2a($object)];

Là dans un premier temps j’aimerais faire un truc en dur, avec la commande id : 2832, récupérer ses données et afficher un graph,

Pour l’instant le JS que j’ai posté plus haut me sors :

j’ai tenté d’utiliser la commande :

github.com

jeedom/core/blob/alpha/core/js/history.class.js

/* This file is part of Jeedom.
 *
 * Jeedom is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Jeedom is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Jeedom. If not, see <http://www.gnu.org/licenses/>.
 */

jeedom.history = function() {};
jeedom.history.chart = [];
jeedom.history.chartDrawTime = 150

This file has been truncated. show original

En faisant un

let h = jeedom.history.get({cmd_id:2832,dateStart:"2023-08-12",dateEnd:"2023-08-13"});
console.log(h);

cela me retourne l’erreur : Undefined

il me manque une étape ^^

ido · Août 13, 2023, 6:13

Alors la commande :

jeedom.history.get({cmd_id:2831,dateStart:"2023-08-12",dateEnd:"2023-08-13"});

me retourne ca dans la partie réseau :

Et le code:

                    jeedom.history.drawChart({
                        cmd_id: 2831,
                        dateStart: "<?= date('Y-m-d', strtotime('-1 months ' . date('Y-m-d')));?>",
                        dateEnd: "<?= date('Y-m-d', strtotime('+1 days ' . date('Y-m-d')));?>",
                        el: 'oklyn_air_water',
                        option: {
                            graphColor: '#406db0',
                            derive : 0,
                            graphZindex : 0
                        }
                    });

Les données semblent bien arriver dans la console en revanche pas dans le plugin highchart …

Phpvarious · Août 14, 2023, 11:20

met des simples quote autour de ton id :

                    jeedom.history.drawChart({
                        cmd_id: '2831',
                        dateStart: "<?= date('Y-m-d', strtotime('-1 months ' . date('Y-m-d')));?>",
                        dateEnd: "<?= date('Y-m-d', strtotime('+1 days ' . date('Y-m-d')));?>",
                        el: 'oklyn_air_water',
                        option: {
                            graphColor: '#406db0',
                            derive : 0,
                            graphZindex : 0
                        }
                    });

ido · Août 14, 2023, 8:36

Merci @Phpvarious effectivement le simple quote me draw le graphique comme il faut. C’est top
Par contre vu que j’aimerais un style plus personnalisé
dans ce genre là : https://codepen.io/idoExperiences/pen/eYQwwee

Je pensais récupérer les datas des 3 courbes et les mixé dans un seul graphique

j’imaginais récupérer les series via ce genre de commandes, mais je pense que je fais la mauvaise requête ou alors les infos partent dans le dom mais je sais pas les récupérer …

var h = jeedom.history.get({cmd_id:'2831',dateStart:"2023-08-12",dateEnd:"2023-08-13"});
console.log(h);

Phpvarious · Août 15, 2023, 7:57

Effectivement cette méthode nécessite de passer par un success :

var h = jeedom.history.get({
    cmd_id:'2831',
    dateStart:"2023-08-12",
    dateEnd:"2023-08-15",
    success: function(h) {
      console.table(h);
    }
  });

C’est tout a fait possible, c’est d’ailleurs la méthode utiliser par @shun84.
Exemple :

dans panel.php tu as l’élément :
<div id="oklyn_air_water"></div>

dans panel.js :
on génère un nouveau container dans l’élément oklyn_air_water qui contiendra le ou les graph :

const histoairwater = document.getElementById('oklyn_air_water')
histoairwater.innerHTML = '<div class="chartContainer" id="div_graph1"></div>'
jeedom.history.chart['div_graph1'] = null;

il te restera plus qu’a insérer les valeurs avec jeedom.history.drawChart avec l’option :
el: 'div_graph1'

Pour une deuxième courbe il suffit simplement de créer une nouvelle série dans le même élément :

jeedom.history.drawChart({ ....., el: 'div_graph1', ... })

ido · Septembre 4, 2023, 2:49

Hello,

merci pour ton retour, c’était les vacances donc j’ai laché le projet je vais m’y remettre.

Je pensais que la fonction drawChart créais un graphique pour chaque valeurs, je ne savais pas qu’on pouvais les empiler ! ce qui est cool !

J’ai réussit à stacker 3 graphique, par contre je pateauge pour la personnalisation des graph :

j’aimerais me faire un trucs dans ce style là :

j’ai le code pour highcharts par contre directement depuis la class history de jeedom je sais pas trop où aller, pour le moment j’ai fais ca :

// production
jeedom.history.drawChart({
    cmd_id: '2837',
    dateStart: "<?= $date_start?>",
    dateEnd: "<?= $date_end;?>",
    el: 'oklyn_air_water',
    option: {
        graphColor: '#fed308',
        backgroundColor: '#ff0000',
        derive : 0,
        graphZindex : 0
    }
});

// Conso
jeedom.history.drawChart({
    cmd_id: '2831',
    dateStart: "<?= $date_start?>",
    dateEnd: "<?= $date_end;?>",
    el: 'oklyn_air_water',
    option: {
        graphColor: '#25b2e8',
        derive : 0,
        graphZindex : 0
    }
});

// Grille
jeedom.history.drawChart({
    cmd_id: '2846',
    dateStart: "<?= $date_start?>",
    dateEnd: "<?= $date_end;?>",
    el: 'oklyn_air_water',
    option: {
        graphColor: '#d1d3d3',
        derive : 0,
        graphZindex : 0,
        negativeColor: '#47ac34',
    }
});

D’ailleurs comme vous pouvez le voir j’utilise les ID en dur, comment faire pour récupérer l’ID d’une commande de l’objet en question ?

Merci pour vos retours

Phpvarious · Septembre 4, 2023, 6:33

Hello,
J’en est fait des choses entre temps , faut que je me remette le sujet dans la tête

C’est justement a toi de le construire :

dans le template du widget il faudra créer une écoute sur évènement du click et ouvrir le panel (en modale) avec une data en plus (eqLogic_id) dans l’url → ex : index.php?v=d&m=monplugin&p=panel&eqLogic_id=#eqLogic_id#
ensuite dans ton panel.php, il suffit en début de fichier d’utiliser cette fonction du core qui permet d’injecter une variable js en php :
sendVarToJs('eqLogic_id', init('eqLogic_id'));
ensuite le reste ce passe dans le panel.js, il te faudra faire appel a une fonction :
displayMesdatas(eqLogic_id,'','');

et ensuite, suivre ce qu’a fait @shun84 dans son plugin , avec un méthode ajax, où tu pourra construire les infos que tu souhaites en fonction de l’eqLogic_id envoyé