Prise en charge d'un nouveau module highcharts dans un plugin?

[Bison]

Bonjour,

Le but étant de faire afficher le graphique en le gérant dans le fichier html du répertoire « core/template/dashboard » du plugin

Le code de démo : Highcharts Demo - JSFiddle - Code Playground

L’erreur dans la console :

Uncaught Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=xrange

J’ai basiquement essayé ça :

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

Mais peut-être que Jeedom bloque l’accès à ces fichiers ou bien il continu d’interroger le core de Jeedom et pas ceux-là ?

J’ai également essayé de les incorporer dans 3rdparty mais idem ce que j’ai essayé ne donne rien.

Si vous aviez une petite idée de la façon de faire ça

[kiboost]

Tu a essayé un include file 3rdparty highchart frange ?

[Bison]

Salut,

Non, il faudrait l’écrire comment puisque c’est un fichier .html le fichier du template ?

Tu veux dire mettre un <?php include_file('3rdparty', 'highcharts', 'js', 'xrange');?> dans un autre fichier (php) ? mais lequel ?

[kiboost]

Peu etre passer par un tohtml du plugin ?
Un peu bourrin pour l’instant mais en 4.4 les js et css de 3rdparty seront mis en cache et loadé qu’une fois.

[Bison]

Je passe bien par un toHtml pour charger le template
J’ai essayé include_file('3rdparty/highcharts', 'highcharts', 'js', __CLASS__); dans cette fonction

En ayant ajouté les fichiers dans cette structure histoire de charger le highcharts.js

Mais là j’ai une belle erreur SyntaxError: invalid escape sequence ce qui ne me semble pas anormal.

J’ai essayé de l’inclure dans le fichier plugin.php du core/php mais ça ne fonctionne pas (même problème qu’au départ)

[kiboost]

Pas la peine de surcharger un highchart dans le plugin alors que tout est deja dans le core.

include_file(‹ 3rdparty ›, ‹ highstock/modules/xrange ›, ‹ js ›);

[Bison]

Ok vu mais c’est dans quel fichier faudrait-il faire cette inclusion ?

J’ai essayé include_file('3rdparty', 'highstock/modules/xrange', 'js') dans les fichiers :

• desktop/php/plugin.php
• core/php/plugin.inc.php

Mais ça ne fonctionne pas (toujours même erreur de missingModuleFor=xrange)

Et directement dans la fonction toHtml j’ai le SyntaxError: invalid escape sequence

[jpty]

Quand j’avais utilisé des annotations highcharts dans le plugin heliotrope, j’avais mis ça dans le template html :

    <!-- TODO prevent multiload -->
  <script type="text/javascript" src="3rdparty/highstock/modules/annotations.js"></script>

Annotations abandonnées depuis car elles ne fonctionnaient pas partout. Sinon il aurait fallu que je fasse ce qui est en commentaire …

[Bison]

Merci c’est bien ça qu’il fallait faire

Placé en début du fichier de template

<script type="text/javascript" src="3rdparty/highstock/modules/xrange.js"></script>

2 erreurs depuis le début :

• Je n’avais pas vu que le xrange.js était déjà dans le core
• J’avais ajouté la ligne de script à la fin de fichier

Du coup ensuite j’ai fini par faire un peu n’importe quoi !

Merci @jpty et merci @kiboost

[kiboost]

test si il est deja loadé avant de le loader plusieurs fois…

[jpty]

C’est sur ça que j’avais buté. Comment tester qu’il a déjà été loadé par le navigateur ?
Je n’avais la moindre idée de comment le faire.

[kiboost]

plusieurs solutions

if (document.getelementbyid('highstockxrange') == null {
<script id="highstockxrange" type="text/javascript" src="3rdparty/highstock/modules/xrange.js"></script>
}

ou plutôt

let src = '3rdparty/highstock/modules/xrange.js'
if (document.queryselector('[src*="'+src +'"]') == null {
<script type="text/javascript" src="3rdparty/highstock/modules/xrange.js"></script>
}

A tester, tapé comme çà.

En 4.4 ce sera automatique, tous les 3rdparty sont loadés dans le head et pas reloadés

[Bison]

Ok merci Kiboost je ne savais pas faire non plus

@kiboost en même temps … j’ai encore un soucis pur écrire ça :

<script>
  let src = '3rdparty/highstock/modules/xrange.js';
  if (document.queryselector('[src*="'+src +'"]') == null) {
	<script type="text/javascript" src="3rdparty/highstock/modules/xrange.js"></script>
  }
</script>

Ne fonctionne pas

Et

<script>
  let src = '3rdparty/highstock/modules/xrange.js';
  if (document.queryselector('[src*="'+src +'"]') == null) {
</script>
	<script type="text/javascript" src="3rdparty/highstock/modules/xrange.js"></script>
<script>
  }
</script>

Provoque des erreurs dans la console (mais load bien xrange.js)

Je cherche la bonne syntaxe …

[noodom]

Hello,

• Pour le premier cas, tu inclus une balise html (<script/>) dans du javascript.
• Pour le deuxième cas, tu as 3 balises <script/> indépendantes donc il va les traiter indépendamment.
  • La première il va considérer qu’il lui manque '}'.
  • La deuxième, il va faire l’include (ce que tu as constaté).
  • La troisième, il va juste avoir '}', ce qui doit pas trop lui plaire

A voir (non testé) si un truc du genre peut suffire :

<script>
  let src = '3rdparty/highstock/modules/xrange.js';
  if (document.queryselector('[src*="'+src +'"]') == null) {
	document.write ('<script type="text/javascript" src="3rdparty/highstock/modules/xrange.js"></script>');
  }
</script>

C’est possible que tu doives décomposer le contenu du write à cause du mot clé script :

	document.write ('<scr' + 'ipt type="text/javascr' + 'ipt" src="3rdparty/highstock/modules/xrange.js></sc' + 'ript>');

[Bison]

Salut @noodom,

Merci pour le coup de main

Alors les 2 propositions ne fonctionnent pas chez moi car les fonctions sont inexistantes

<script>
	if (document.getelementbyid('highstockxrange') == null) {
      document.write ('<scr' + 'ipt id="highstockxrange" type="text/javascr' + 'ipt" src="3rdparty/highstock/modules/xrange.js></sc' + 'ript>');
}
</script>

TypeError: document.getelementbyid is not a function

<script>
  let src = '3rdparty/highstock/modules/xrange.js';
  if (document.queryselector('[src*="'+src +'"]') == null) {
	document.write ('<scr' + 'ipt type="text/javascr' + 'ipt" src="3rdparty/highstock/modules/xrange.js></sc' + 'ript>');
  }
</script>

TypeError: document.queryselector is not a function
SyntaxError: redeclaration of let src

[noodom]

La bonne syntaxe est getElementById et querySelector.
Dis-moi ce que ça donne.

Sinon, remplace let src par let src2 pour voir si src n’est pas déjà utilisé avant (et remplace src par src2 pour la suite ).

[Bison]

<script>
  let src2 = '3rdparty/highstock/modules/xrange.js';
  if (document.querySelector('[src*="'+src2 +'"]') == null) {
	document.write ('<scr' + 'ipt type="text/javascr' + 'ipt" src="3rdparty/highstock/modules/xrange.js"></sc' + 'ript>');
  }
</script>

→ Ecran blanc, plus de Jeedom (enfin la page du dashboard où il y a ce template)

[noodom]

Rien dans la console ? A voir si il faut revoir la décomposition du contenu du write sinon.
Ou alors, le problème est ailleurs et le write ne fonctionne pas pour pour ce problème

[Bison]

Pas d’erreur dans la console non.
J’ai bien regardé s’il n’y avait pas d’erreur dans la décomposition (quote et double quote) mais je n’ai trouvé qu’un oubli dans une double quote que j’ai rajouté (le code que j’avais mis en dernier).

Bon c’était bien tenté … je vois pas bien comment décomposer autrement … là le mot script n’apparait jamais