[ACTEUR] Charts Donut/Pie ou Polaire

[WITNicolas]

Merci @Raphwit d'avoir mis les mains dedans pour sortir la premiere brique !
C'est un acteur que l'on peut liaisonner à 3 valeurs (il suffit de le customiser pour rajouter d'autres éléments, ça se passe dans l'Even POSTINIT
Il est basé sur la librairie chart.js embarquée dans STUDIO.

Donut/Pie, Polaire, Couleurs, Bordure, Centre sont paramétrables via des additionnelles. Les changements ne sont visibles qu'au 1er chargement, il faut donc rafraichir la scene pour voir les modifications.
Seule contrainte, il faut que la propriété ID soit unique. (il y a surement une subtilité pour s'en passer mais je ne la connais pas, je ne suis pas développeur .... :) )

SYNAPPS-STUDIO-ACTOR|{"type":"display/html","key":"donut1","properties":{"content":"<canvas id={{donutID}}></canvas>","horizontalAlignment":"expand","verticalAlignment":"expand","height":"360px","width":"340px","top":"160px","left":"220px"},"additionalDefs":{"val1Lib":{"type":"text","label":"Titre 1"},"val2Lib":{"type":"text","label":"Titre 2"},"val3Lib":{"type":"text","label":"Titre 3"},"val1Color":{"type":"color","label":"Couleur 1"},"val2Color":{"type":"color","label":"Couleur 2"},"val3Color":{"type":"color","label":"Couleur 3"},"val1Index":{"type":"number","label":"Valeur 1"},"val2Index":{"type":"number","label":"Valeur 2"},"val3Index":{"type":"number","label":"Valeur 3"},"donutBordure":{"type":"color","label":"Couleur Bordure"},"donutBordureW":{"type":"number","label":"Taille Bordure"},"donutCenter":{"type":"number","label":"Taille Centre","min":0,"unit":"px"},"donutID":{"type":"text","label":"ID"},"propType":{"type":"select","options":"[\n  {\n    \"value\": \"doughnut\",\n    \"text\": \"Donut\"\n  },\n  {\n    \"value\": \"polarArea\",\n    \"text\": \"Polaire\"\n  }\n]"}},"additionals":{"val1Lib":"Titre 1","val2Lib":"Titre 2","val3Lib":"Titre 3","val1Color":"salmon","val2Color":"aquamarine","val3Color":"moccasin","val1Index":8,"val2Index":26,"val3Index":12,"donutBordure":"rgba(255, 255, 255, 1)","donutBordureW":10,"donutCenter":60,"donutID":"donut1","propType":"doughnut"},"events":{"onPostInit":["var data = {","  labels: [this.additionals.val1Lib, this.additionals.val2Lib, this.additionals.val3Lib],","  datasets: [{","    data: [this.additionals.val1Index, this.additionals.val2Index, this.additionals.val3Index],","    backgroundColor: [","      this.additionals.val1Color,","      this.additionals.val2Color,","      this.additionals.val3Color","    ],","    borderColor: [","      this.additionals.donutBordure,","      this.additionals.donutBordure,","      this.additionals.donutBordure","    ],","    borderWidth: this.additionals.donutBordureW","  }]","};","","// Options du graphique","var options = {","  responsive: true,","  maintainAspectRatio: false,","  cutout: this.additionals.donutCenter, // Pour faire un graphique donut","};","","// Créer un graphique de donut","var ctx = document.getElementById(this.additionals.donutID).getContext('2d');","var donutChart = new Chart(ctx, {","  type: this.additionals.propType,","  data: data,","  options: options","});"]}}

[WITNicolas]

Un acteur plus complet ici mais un peu plus contraignant dans le format de donnée qui peut rendre un autre service
#628

[Guillaume31a]

Bonjour, je rencontre un problème d'utilisation sur cet acteur ;
Voici ma scène :


on peut voir les valeurs dans le donuts qui sont fixes, mais lorsque je lie à une température que je définis ici ;

et que je vais chercher avec un acteur texte :

donc on peut voir que je vais bien chercher la valeur "10". Mais lorsque je lie de cette manière :

je me retrouve avec ça :

L'acteur prends la valeur "0" ??
Merci d'avance pour votre aide

[Guillaume31a]

Salut, merci pour votre réponse. Comme montré dans mon exemple, je cherche cette mise à jour des valeurs sur des valeurs liées à l'automate et non des valeurs fixes. voici ce que j’obtiens avec votre exemple :

J'ai les valeurs 10, 50 et 100 on peut donc voir que les parts du donut sont inégales, rien d’anormal.
Mais lorsque je lie les valeurs fixes à l'automate, par exemple à une température extérieure :

et que je copie la liaison, rien ne se passe alors que les parts sont cessées être égales:

Merci d'avance pour votre aide.

[Raphwit]

Bonjour, comme mentionné par @manufitoussiwit il faut bien veiller a ce qu'il y ait un script 'onPropertyChange' qui se charge de mettre à jour votre graphique au changement de valeur.

Avec le script fourni plus haut, vous devriez voir votre graphique se mettre à jour, je vous invite également à consulter la section de mise à jour des données de la librairie ChartJS : https://www.chartjs.org/docs/latest/developers/updates.html

[Guillaume31a]

Bonjour, pour ce qui est de la partie 'onpropertychange', elle est présente dans le script utilisé dans l'exemple :

"onPropertyChanged": [
"switch (context.propertyPath) {",
"",
" // dans le cas ou le changement de propriété est engendré par les additionnelles qui stockent les valeurs:",
" case 'additionals.val1Index':",
" case 'additionals.val2Index':",
" case 'additionals.val3Index':",
" // on modifie les valeurs",
" this.chart.data.datasets[0].data = [",
" this.additionals.val1Index,",
" this.additionals.val2Index,",
" this.additionals.val3Index,",
" ];",
"",
" // et on demande le rafraichissement du chart.",
" this.chart.update();",
" break;",
"",
" // même chose avec les labels",
" case 'additionals.val1Lib':",
" case 'additionals.val2Lib':",
" case 'additionals.val3Lib':",
" this.chart.data.labels = [",
" this.additionals.val1Lib,",
" this.additionals.val2Lib,",
" this.additionals.val3Lib,",
" ];",
" this.chart.update();",
" break;",
"",
" // meme chose avec les couleurs:",
" case 'additionals.val1Color':",
" case 'additionals.val2Color':",
" case 'additionals.val3Color':",
" this.chart.data.datasets[0].backgroundColor = [",
" this.additionals.val1Color,",
" this.additionals.val2Color,",
" this.additionals.val3Color",
" ];",
"",
" this.chart.update();",
" break;",
"",
" case 'additionals.donutBordure':",
" this.chart.data.datasets[0].borderColor = [",
" this.additionals.donutBordure,",
" this.additionals.donutBordure,",
" this.additionals.donutBordure,",
" ];",
"",
" this.chart.update();",
" break;",
"",
" case 'additionals.donutBordureW':",
" this.chart.data.datasets[0].borderWidth = this.additionals.donutBordureW;",
"",
" this.chart.update();",
" break;",
"",
" case 'additionals.donutCenter':",
" this.chart.options.cutout = this.additionals.donutCenter;",
" this.chart.update();",
" break;",
"",
"}"
],

Le graphique se met a jour uniquement avec des valeurs fixes.

Ma demande n'est donc pas en adéquation avec votre réponse.

Il faudrait que le donut se rafraichisse avec des valeurs de l'automate et non des valeurs fixes.

J'aimerais savoir si il était possible d'avoir un exemple avec les contraintes exprimées ci-dessus ou sinon un rendez vous Teams pour que nous puissions en parler,

Merci d'avance pour votre aide.

[manufitoussiwit]

Bonjour,
Une liaison ne fait rien d'autre que d'aller chercher une valeur quelque part et l'inscrire dans la propriété ou additionnelle choisie.
Si le format de la valeur récupérée est le bon (un nombre), il n'y a pas de différence entre changer la valeur à la main dans l'inspecteur de l'acteur ou de placer une liaison.
J'ai fait l'essai avec l'exemple que j'ai donné, en allant chercher une valeur sur OutdoorTemp d'une ressource courbe de chauffe. ça fonctionne très bien :

Au début du gif, j'ai changé à la main les valeurs pour montrer comment se passe la mise à jour sur le chart. Après je définis la liaison sur une des valeurs puis je la colle sur les autres. On voit bien comment le chart se met à jour.

Si vous n'avez pas de mise à jour du chart ne serait-ce qu'en changeant une valeur à la main, je dirai alors qu'il y a eu un pb lors du copier/coller de l'exemple que j'ai donné, le script s'est mal copié ou quelque chose dans le genre.
Du coup c'est normal que ça ne marche pas non plus avec les liaison.

L'autre possibilité serait que la donnée de la liaison n'est pas dans le bon format (un nombre) mais j'en doute ici.

L'idée générale de tout ça est de montrer de manière collaborative ce qu'il est possible de réaliser avec Synapps en lui ajoutant des outils tiers comme ChartJS, de comprendre des notions un peu avancées de développement avec Synapps sur des exemples plus ou moins utilisables sur site. Ici, les exemples donnés sont une bonne base de travail à utiliser, modifier, casser, réparer et pour finir apprivoiser afin de placer sereinement sur site 😊

Bien cordialement

[Guillaume31a]

C'est parfait, merci beaucoup pour votre aide, votre patience et votre temps accordé ! ^^

[Guillaume31a]

Quelqu'un a t-il trouvé une solution ?
( PS : j'ai essayé sans "Écriture" coché dans la liaison ).
Merci d'avance

[WITNicolas]

Je ne vois pas ce qui peut bloquer, le mieux serait de copier/coller la scene dans le GITHUB pour nous puissions analyser plus précisement.
Sur les imprim'ecrans tout parait cohérent pourtant.

[Guillaume31a]

Voici la scène ; j'ai lié une ressource qui a pour valeur 70 au donut mais il ne se passe rien... il ne prends pas la valeur. J'ai egalement créé un texte avec la même liaison qui lui affiche bien 70.
Merci d'avance pour votre aide
SYNAPPS-STUDIO-SCENE|{"config":{"key":"scene21","name":"Copie de Scène 17"},"leadActor":{"type":"layout/canvas","key":"canvas1","children":[{"type":"display/html","key":"donut1","properties":{"content":"","horizontalAlignment":"expand","verticalAlignment":"expand","height":"680px","width":"800px","top":"30px","left":"70px"},"additionalDefs":{"val1Lib":{"type":"text","label":"Titre 1"},"val2Lib":{"type":"text","label":"Titre 2"},"val3Lib":{"type":"text","label":"Titre 3"},"val1Color":{"type":"color","label":"Couleur 1"},"val2Color":{"type":"color","label":"Couleur 2"},"val3Color":{"type":"color","label":"Couleur 3"},"val1Index":{"type":"number","label":"Valeur 1"},"val2Index":{"type":"number","label":"Valeur 2"},"val3Index":{"type":"number","label":"Valeur 3"},"donutBordure":{"type":"color","label":"Couleur Bordure"},"donutBordureW":{"type":"number","label":"Taille Bordure"},"donutCenter":{"type":"number","label":"Taille Centre","min":0,"unit":"px"},"donutID":{"type":"text","label":"ID"},"propType":{"type":"select","options":"[\n {\n "value": "doughnut",\n "text": "Donut"\n },\n {\n "value": "polarArea",\n "text": "Polaire"\n }\n]"}},"additionals":{"val1Lib":"Titre 1","val2Lib":"Titre 2","val3Lib":"Titre 3","val1Color":"salmon","val2Color":"aquamarine","val3Color":"moccasin","val1Index":8,"val2Index":26,"val3Index":12,"donutBordure":"rgba(255, 255, 255, 1)","donutBordureW":10,"donutCenter":60,"donutID":"donut1","propType":"doughnut"},"bindings":{"additionals.val1Index":{"relativeTo":"global/resources","relativePath":"R00053.R00173.R00045.R00056.SP_M30","fieldName":"value","dataReadMode":"always","source":"redy/wos-relative-variable"}},"events":{"onPostInit":["var data = {"," labels: [this.additionals.val1Lib, this.additionals.val2Lib, this.additionals.val3Lib],"," datasets: [{"," data: [this.additionals.val1Index, this.additionals.val2Index, this.additionals.val3Index],"," backgroundColor: ["," this.additionals.val1Color,"," this.additionals.val2Color,"," this.additionals.val3Color"," ],"," borderColor: ["," this.additionals.donutBordure,"," this.additionals.donutBordure,"," this.additionals.donutBordure"," ],"," borderWidth: this.additionals.donutBordureW"," }]","};","","// Options du graphique","var options = {"," responsive: true,"," maintainAspectRatio: false,"," cutout: this.additionals.donutCenter, // Pour faire un graphique donut","};","","// Créer un graphique de donut","var ctx = document.getElementById(this.additionals.donutID).getContext('2d');","var donutChart = new Chart(ctx, {"," type: this.additionals.propType,"," data: data,"," options: options","});"]}},{"type":"display/text","key":"text1","properties":{"content":"Text","height":"180px","width":"190px","top":"270px","left":"1000px","fontSize":"0.5in"},"bindings":{"properties.content":{"relativeTo":"global/resources","relativePath":"R00053.R00173.R00045.R00056.SP_M30","fieldName":"value","dataReadMode":"always","source":"redy/wos-relative-variable"}}}]}}

[Guillaume31a]

autre exemple avec un fournisseur de variable :
SYNAPPS-STUDIO-SCENE|{"config":{"key":"scene21","name":"Copie de Scène 17"},"leadActor":{"type":"layout/canvas","key":"canvas1","children":[{"type":"display/html","key":"donut1","properties":{"content":"","horizontalAlignment":"expand","verticalAlignment":"expand","height":"680px","width":"800px","top":"30px","left":"70px"},"additionalDefs":{"val1Lib":{"type":"text","label":"Titre 1"},"val2Lib":{"type":"text","label":"Titre 2"},"val3Lib":{"type":"text","label":"Titre 3"},"val1Color":{"type":"color","label":"Couleur 1"},"val2Color":{"type":"color","label":"Couleur 2"},"val3Color":{"type":"color","label":"Couleur 3"},"val1Index":{"type":"number","label":"Valeur 1"},"val2Index":{"type":"number","label":"Valeur 2"},"val3Index":{"type":"number","label":"Valeur 3"},"donutBordure":{"type":"color","label":"Couleur Bordure"},"donutBordureW":{"type":"number","label":"Taille Bordure"},"donutCenter":{"type":"number","label":"Taille Centre","min":0,"unit":"px"},"donutID":{"type":"text","label":"ID"},"propType":{"type":"select","options":"[\n {\n "value": "doughnut",\n "text": "Donut"\n },\n {\n "value": "polarArea",\n "text": "Polaire"\n }\n]"}},"additionals":{"val1Lib":"Titre 1","val2Lib":"Titre 2","val3Lib":"Titre 3","val1Color":"salmon","val2Color":"aquamarine","val3Color":"moccasin","val1Index":8,"val2Index":10,"val3Index":10,"donutBordure":"rgba(255, 255, 255, 1)","donutBordureW":10,"donutCenter":60,"donutID":"donut1","propType":"doughnut"},"bindings":{"additionals.val1Index":{"relativeTo":"wos-variable1","relativePath":"Y1","fieldName":"state","dataReadMode":"always","source":"redy/wos-relative-variable"}},"events":{"onPostInit":["var data = {"," labels: [this.additionals.val1Lib, this.additionals.val2Lib, this.additionals.val3Lib],"," datasets: [{"," data: [this.additionals.val1Index, this.additionals.val2Index, this.additionals.val3Index],"," backgroundColor: ["," this.additionals.val1Color,"," this.additionals.val2Color,"," this.additionals.val3Color"," ],"," borderColor: ["," this.additionals.donutBordure,"," this.additionals.donutBordure,"," this.additionals.donutBordure"," ],"," borderWidth: this.additionals.donutBordureW"," }]","};","","// Options du graphique","var options = {"," responsive: true,"," maintainAspectRatio: false,"," cutout: this.additionals.donutCenter, // Pour faire un graphique donut","};","","// Créer un graphique de donut","var ctx = document.getElementById(this.additionals.donutID).getContext('2d');","var donutChart = new Chart(ctx, {"," type: this.additionals.propType,"," data: data,"," options: options","});"]}},{"type":"display/text","key":"text1","properties":{"content":"Text","height":"180px","width":"190px","top":"270px","left":"1000px","fontSize":"0.5in"},"bindings":{"properties.content":{"relativeTo":"wos-variable1","relativePath":"Y1","fieldName":"state","dataReadMode":"always","source":"redy/wos-relative-variable"}}},{"type":"redy/data-source/wos-variable","key":"wos-variable1","properties":{"path":":easy.RESS.R00053.R00173.R00045.R00056.PTS_LOI_O","fieldName":"value"}}]}}

[cinematographes]

Bonjours une question car je vois des programme comme le votre un peux partout surtout sur le Wikipédia mais je comprend pas ou il faut coller sais programme.

[Guillaume31a]

cinematographes ça dépend du début de ton code, si il y a écrit "SYNAPPS-STUDIO-ACTOR" c'est un acteur tu peux directement coller dans un stack ou "empilement". si il y a écrit "SYNAPPS-STUDIO-COMPOSITE", C'est un composite à coller dans l’arborescence des composites. Là dans cette discussion, nous parlons d'un acteur SCENE donc même principe, à copier coller dans l’arborescence des scenes

[cinematographes]

oki je viens de comprendre merci beaucoup