[ACTEUR] Charts

[WITNicolas]

Dans la même logique que le chart Donut #622 cet acteur propose un peu tous les rendus possible de data.
Merci @Raphwit pour avoir ouvert encore une porte sur le niveau Expert 👍

Les options permettent de choisir les rendus

Les données axeX, axeY et couleurs sont alimentées par des chaines de caractéres dont les valeurs sont séparées par des "|". Cela peut provenir d'un script avec une concaténation de chaine.

Contrainte pour avoir plusieurs de ces acteurs sur une même scéne, il faut que la propriété ID soit unique.

Une fois les élements sélectionnés, il faut juste recliquer sur la scene pour que le Chart prenne en compte les différents paramétres de customisation. Les données, quant à elle, sont rafraichis au changement.

SYNAPPS-STUDIO-ACTOR|{"type":"display/html","key":"chart1","properties":{"content":"  <canvas id={{barID}}></canvas>","horizontalAlignment":"middle","verticalAlignment":"middle","top":"40px","left":"390px","width":"400px"},"additionals":{"barID":"myChart1","title":"Mon Graph","axeX":"Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec","axeY":"1|2|3|4|5|6|7|8|9|10|11|12","color":"red|orange|yellow|green|blue|indigo|violet","propAxe":"x","propType":"polarArea","propBordure":"rgba(255, 255, 255, 0.67)","chartBordureW":5,"pointRadius":5},"additionalDefs":{"barID":{"type":"text","label":"ID"},"title":{"type":"text","modifier":"render","label":"Titre"},"axeX":{"type":"text","label":"Axe X"},"axeY":{"type":"text","label":"Axe Y"},"color":{"type":"text","label":"Couleur"},"propAxe":{"type":"select","label":"Inversion Axe","options":"[\n  {\n    \"value\": \"x\",\n    \"text\": \"Non\"\n  },\n  {\n    \"value\": \"y\",\n    \"text\": \"Oui\"\n  }\n]"},"propType":{"type":"select","label":"Rendu","options":"[\n  {\n    \"value\": \"bar\",\n    \"text\": \"BarGraph\"\n  },\n  {\n    \"value\": \"line\",\n    \"text\": \"Ligne\"\n  },\n  {\n    \"value\": \"doughnut\",\n    \"text\": \"Donut\"\n  },\n  {\n    \"value\": \"pie\",\n    \"text\": \"Pie\"\n  },\n  {\n    \"value\": \"polarArea\",\n    \"text\": \"Polaire\"\n  }\n]"},"propBordure":{"type":"color","label":"Couleur Bordure"},"chartBordureW":{"type":"number","label":"Taille Bordure"},"pointRadius":{"type":"number","label":"Taille Point","min":0}},"bindings":{"additionals.prop4":{"sourceType":"stage","path":"additionals.title123"},"additionals.prop3":{"sourceType":"stage","path":"additionals.color"},"additionals.prop2":{"sourceType":"stage","path":"additionals.axeY"},"additionals.prop1":{"sourceType":"stage","path":"additionals.axeX"}},"events":{"onPropertyChanged":["","","if (context.name === \"axeX\") {","  Chart.getChart(document.getElementById(this.additionals.barID).getContext('2d')).data.labels = context.newValue.split('|');","  Chart.getChart(document.getElementById(this.additionals.barID).getContext('2d')).update()","}","","if (context.name === \"axeY\") {","  Chart.getChart(document.getElementById(this.additionals.barID).getContext('2d')).data.datasets.forEach((dataset) => {","    dataset.data = context.newValue.split('|');","  })","  Chart.getChart(document.getElementById(this.additionals.barID).getContext('2d')).update()","}","","if (context.name === \"color\") {","  Chart.getChart(document.getElementById(this.additionals.barID).getContext('2d')).data.datasets.forEach((dataset) => {","    dataset.backgroundColor = context.newValue.split('|');","  })","  Chart.getChart(document.getElementById(this.additionals.barID).getContext('2d')).update()","}"],"onPostInit":["new Chart(document.getElementById(this.additionals.barID), {","  type: this.additionals.propType,","  data: {","    labels: this.additionals.axeX.split('|'),","    datasets: [{","      label: this.additionals.title,","      data: this.additionals.axeY.split('|'),","      backgroundColor: this.additionals.color.split('|'),","      borderWidth: this.additionals.chartBordureW","    }]","  },","  options: {","    // fill: true,","    pointRadius : this.additionals.pointRadius,","    indexAxis: this.additionals.propAxe,","    borderColor: this.additionals.propBordure","  }","});"]}}

[WitMarcoR]

TOP! clairement les variables AxeX, AxeY... peuvent être dynamisées et donc connectées à des fournisseurs de variables ?

[WitMarcoR]

oui, ca marche...tres bien!!