[COMPOSITE] Etiquette Energétique

[WITNicolas]

Composite pour l'affichage de l'étiquette énergétique. En entrée, mettre la valeur attendue en kwh/m2/an

Possibilité de régler la largeur et longueur des fleches

@manufitoussiwit @Raphwit merci pour le cours accéléré sur le CSS !

SYNAPPS-STUDIO-COMPOSITE|{"config":{"key":"energyLabel","name":"energyLabel","properties":{"width":"200px"},"additionalDefs":{"prop1":{"type":"number","label":"Conso","value":16,"min":0},"prop3":{"type":"number","label":"Largeur Fleche","value":20},"prop4":{"type":"number","label":"Longueur Fleche","value":50}}},"leadActor":{"type":"layout/stack","key":"stackRoot","children":[{"type":"display/html","key":"titre","properties":{"content":"Etiquette Energétique <br> <sup>(kWh/m2/an)</sup>","textAlign":"center"}},{"type":"layout/stack","key":"stack4","properties":{"orientation":"horizontal"},"children":[{"type":"layout/stack","key":"stack2","properties":{"orientation":"horizontal","marginRight":"2px","marginLeft":"2px"},"children":[{"type":"display/text","key":"text1","properties":{"content":"50","borderStyle":"solid","marginTop":"8px","paddingRight":"2px","paddingLeft":"2px","width":"40px","textAlign":"center","backgroundColor":"white","fontWeight":"bold"},"additionalDefs":{"prop2":{"type":"number","label":"Largeur"},"prop3":{"type":"number","label":"Longueur"}},"bindings":{"properties.marginTop":"actor#text1@properties.content","additionals.prop2":"stage@properties.prop3","additionals.prop3":"stage@properties.prop3","properties.height":"stage@properties.prop3","properties.content":"stage@properties.prop1"},"events":{"properties/marginTop/binding/onReadTransform":["var maTaille = this.additionals.prop3","","if (context.value <= 50) {","  return '2px'","}","","if (context.value > 50 && context.value <= 90) {","  return 4+maTaille+'px'","}","","if (context.value > 90 && context.value <= 150) {","  return 6+2*maTaille+'px'","}","","if (context.value > 150 && context.value <= 230) {","  return 8+3*maTaille+'px'","}","","if (context.value > 230 && context.value <= 330) {","  return 10+4*maTaille+'px'","}","","if (context.value > 330 && context.value <= 450) {","  return 12+5*maTaille+'px'","}","","if (context.value > 450 ) {","  return 14+6*maTaille+'px'","}"]}}]},{"type":"layout/stack","key":"stack3","children":[{"type":"display/html","key":"htmlStyle","properties":{"content":"<style>\n\n\n.energy-class {\n  position: relative;\n  width: 155px;\n  font-family : sans-serif;\n  --ma-taille: {{flecheLargeur}}px;\n  --ma-tailleL: {{flecheLongueur}}px;\n}\n.energy-class span {\n  display: block;\n  position: absolute;\n  left: 110%;\n  background: #000;\n  width: 30px;\n  height: 30px;\n}\n.energy-class span.a {\n  top: 0px;\n}\n.energy-class span.b {\n  top: 20px;\n}\n.energy-class span.c {\n  top: 40px;\n}\n.energy-class span.d {\n  top: 60px;\n}\n.energy-class span.e {\n  top: 80px;\n}\n.energy-class span.f {\n  top: 100px;\n}\n.energy-class span.g {\n  top: 120px;\n}\n.energy-class span:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 100%;\n  width: 0;\n  height: 0;\n  border-top: 15px solid transparent;\n  border-right: 15px solid #000;\n  border-bottom: 15px solid transparent;\n}\n.energy-class span:after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 30px;\n  line-height: 30px;\n  text-align: center;\n  color: #fff;\n  font-size: 30px;\n  text-transform: uppercase;\n}\n.energy-class span.a:after {\n  content: ' a ';\n}\n.energy-class span.b:after {\n  content: ' b ';\n}\n.energy-class span.c:after {\n  content: ' c ';\n}\n.energy-class span.d:after {\n  content: ' d ';\n}\n.energy-class span.e:after {\n  content: ' e ';\n}\n.energy-class span.f:after {\n  content: ' f ';\n}\n.energy-class span.g:after {\n  content: ' g ';\n}\n.energy-class div {\n  position: relative;\n  height: var(--ma-taille);\n  margin: 2px 0;\n}\n.energy-class div:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 100%;\n  background: transparent;\n  width: 0;\n  height: 0;\n  border-top: calc(var(--ma-taille) / 2) solid transparent;\n  border-bottom: calc(var(--ma-taille) / 2) solid transparent;\n}\n.energy-class div:after {\n  position: absolute;\n  top: 0;\n  right: 0.25em;\n  height: var(--ma-taille);\n  line-height: var(--ma-taille);\n  color: #fff;\n  text-shadow: 0 0 2px #000;\n  text-transform: uppercase;\n}\n.energy-class div.a {\n  background: #3b7634;\n  width: var(--ma-tailleL);\n}\n.energy-class div.a:before {\n  border-left: 8px solid #3b7634;\n}\n.energy-class div.a:after {\n  content: ' a ';\n}\n.energy-class div.b {\n  background: #5da436;\n  width: calc(var(--ma-tailleL)*1.3);\n}\n.energy-class div.b:before {\n  border-left: 8px solid #5da436;\n}\n.energy-class div.b:after {\n  content: ' b ';\n}\n.energy-class div.c {\n  background: #a3cf2a;\n  width: calc(var(--ma-tailleL)*1.6);\n}\n.energy-class div.c:before {\n  border-left: 8px solid #a3cf2a;\n}\n.energy-class div.c:after {\n  content: ' c ';\n}\n.energy-class div.d {\n  background: #f6df1b;\n  width: calc(var(--ma-tailleL)*1.9);\n}\n.energy-class div.d:before {\n  border-left: 8px solid #f6df1b;\n}\n.energy-class div.d:after {\n  content: ' d ';\n}\n.energy-class div.e {\n  background: #f29020;\n  width: calc(var(--ma-tailleL)*2.2);\n}\n.energy-class div.e:before {\n  border-left: 8px solid #f29020;\n}\n.energy-class div.e:after {\n  content: ' e ';\n}\n.energy-class div.f {\n  background: #eb422c;\n  width: calc(var(--ma-tailleL)*2.5);\n}\n.energy-class div.f:before {\n  border-left: 8px solid #eb422c;\n}\n.energy-class div.f:after {\n  content: ' f ';\n}\n.energy-class div.g {\n  background: #ea2039;\n  width: calc(var(--ma-tailleL)*2.8);\n}\n.energy-class div.g:before {\n  border-left: 8px solid #ea2039;\n}\n.energy-class div.g:after {\n  content: ' g ';\n}\n\n</style>","horizontalAlignment":"expand","verticalAlignment":"expand"},"additionalDefs":{"flecheLargeur":{"type":"number"},"flecheLongueur":{"type":"number"}},"additionals":{"flecheLargeur":20},"bindings":{"additionals.flecheLargeur":"stage@properties.prop3","additionals.flecheLongueur":"stage@properties.prop4"}},{"type":"display/html","key":"htmlEtiquette","properties":{"content":"<div class=\"energy-class\">\n  <div class=\"a\"></div>\n  <div class=\"b\"></div>\n  <div class=\"c\"></div>\n  <div class=\"d\"></div>\n  <div class=\"e\"></div>\n  <div class=\"f\"></div>\n  <div class=\"g\"></div>\n  <!-- <span class=\"c\"></span> -->\n</div>"}}],"properties":{"horizontalAlignment":"expand"}}]}]}}