ROUTETOPADeveloperGuidev0.1.html
182 KB
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">@import url('https://themes.googleusercontent.com/fonts/css?kit=lhDjYqiy3mZ0x6ROQEUoUw');.lst-kix_caqenjpjbamt-2>li:before{content:"\0025a0 "}.lst-kix_caqenjpjbamt-1>li:before{content:"\0025cb "}.lst-kix_caqenjpjbamt-3>li:before{content:"\0025cf "}.lst-kix_caqenjpjbamt-0>li:before{content:"\0025cf "}.lst-kix_caqenjpjbamt-4>li:before{content:"\0025cb "}.lst-kix_caqenjpjbamt-6>li:before{content:"\0025cf "}.lst-kix_caqenjpjbamt-5>li:before{content:"\0025a0 "}.lst-kix_caqenjpjbamt-7>li:before{content:"\0025cb "}.lst-kix_caqenjpjbamt-8>li:before{content:"\0025a0 "}ol.lst-kix_cktmoc41t532-0.start{counter-reset:lst-ctn-kix_cktmoc41t532-0 0}.lst-kix_w0lbiu9bsebc-1>li:before{content:"\0025cb "}.lst-kix_w0lbiu9bsebc-2>li:before{content:"\0025a0 "}ol.lst-kix_cktmoc41t532-6.start{counter-reset:lst-ctn-kix_cktmoc41t532-6 0}.lst-kix_w0lbiu9bsebc-0>li:before{content:"\0025cf "}.lst-kix_mwbvd56bd501-5>li:before{content:"\0025a0 "}ol.lst-kix_cktmoc41t532-1.start{counter-reset:lst-ctn-kix_cktmoc41t532-1 0}.lst-kix_w0lbiu9bsebc-7>li:before{content:"\0025cb "}.lst-kix_mwbvd56bd501-6>li:before{content:"\0025cf "}.lst-kix_w0lbiu9bsebc-6>li:before{content:"\0025cf "}.lst-kix_w0lbiu9bsebc-3>li:before{content:"\0025cf "}.lst-kix_w0lbiu9bsebc-5>li:before{content:"\0025a0 "}.lst-kix_mwbvd56bd501-7>li:before{content:"\0025cb "}.lst-kix_mwbvd56bd501-8>li:before{content:"\0025a0 "}.lst-kix_w0lbiu9bsebc-4>li:before{content:"\0025cb "}.lst-kix_w0lbiu9bsebc-8>li:before{content:"\0025a0 "}.lst-kix_cktmoc41t532-2>li{counter-increment:lst-ctn-kix_cktmoc41t532-2}ol.lst-kix_cktmoc41t532-7.start{counter-reset:lst-ctn-kix_cktmoc41t532-7 0}.lst-kix_cktmoc41t532-5>li{counter-increment:lst-ctn-kix_cktmoc41t532-5}.lst-kix_iy595p3cktj3-2>li:before{content:"\0025a0 "}.lst-kix_oia1ur76tkla-6>li:before{content:"\0025cf "}.lst-kix_oia1ur76tkla-4>li:before{content:"\0025cb "}.lst-kix_oia1ur76tkla-8>li:before{content:"\0025a0 "}.lst-kix_z1db35cwkqzv-0>li:before{content:"\0025cf "}.lst-kix_z1db35cwkqzv-4>li:before{content:"\0025cb "}.lst-kix_iy595p3cktj3-6>li:before{content:"\0025cf "}ul.lst-kix_xpt451iyqej1-5{list-style-type:none}ul.lst-kix_xpt451iyqej1-4{list-style-type:none}ul.lst-kix_xpt451iyqej1-3{list-style-type:none}ul.lst-kix_xpt451iyqej1-2{list-style-type:none}.lst-kix_iy595p3cktj3-4>li:before{content:"\0025cb "}.lst-kix_cktmoc41t532-4>li{counter-increment:lst-ctn-kix_cktmoc41t532-4}ul.lst-kix_xpt451iyqej1-8{list-style-type:none}ul.lst-kix_xpt451iyqej1-7{list-style-type:none}ul.lst-kix_xpt451iyqej1-6{list-style-type:none}.lst-kix_z1db35cwkqzv-6>li:before{content:"\0025cf "}.lst-kix_xpt451iyqej1-5>li:before{content:"\0025a0 "}.lst-kix_z1db35cwkqzv-8>li:before{content:"\0025a0 "}.lst-kix_iy595p3cktj3-8>li:before{content:"\0025a0 "}.lst-kix_cktmoc41t532-3>li{counter-increment:lst-ctn-kix_cktmoc41t532-3}.lst-kix_xpt451iyqej1-7>li:before{content:"\0025cb "}ol.lst-kix_cktmoc41t532-2.start{counter-reset:lst-ctn-kix_cktmoc41t532-2 0}ol.lst-kix_cktmoc41t532-5{list-style-type:none}ol.lst-kix_cktmoc41t532-6{list-style-type:none}ol.lst-kix_cktmoc41t532-7{list-style-type:none}ol.lst-kix_cktmoc41t532-8{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-8{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-6{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-7{list-style-type:none}ol.lst-kix_cktmoc41t532-0{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-4{list-style-type:none}.lst-kix_oia1ur76tkla-0>li:before{content:"\0025cf "}ol.lst-kix_cktmoc41t532-1{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-5{list-style-type:none}ol.lst-kix_cktmoc41t532-2{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-2{list-style-type:none}ol.lst-kix_cktmoc41t532-3{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-3{list-style-type:none}ol.lst-kix_cktmoc41t532-4{list-style-type:none}ul.lst-kix_w0lbiu9bsebc-0{list-style-type:none}.lst-kix_oia1ur76tkla-2>li:before{content:"\0025a0 "}ul.lst-kix_w0lbiu9bsebc-1{list-style-type:none}.lst-kix_iy595p3cktj3-0>li:before{content:"\0025cf "}.lst-kix_mwbvd56bd501-3>li:before{content:"\0025cf "}.lst-kix_z1db35cwkqzv-2>li:before{content:"\0025a0 "}.lst-kix_mwbvd56bd501-1>li:before{content:"\0025cb "}ol.lst-kix_cktmoc41t532-5.start{counter-reset:lst-ctn-kix_cktmoc41t532-5 0}.lst-kix_oldlfkxmjbuj-5>li:before{content:"\0025a0 "}.lst-kix_xpt451iyqej1-1>li:before{content:"\0025cb "}.lst-kix_oldlfkxmjbuj-7>li:before{content:"\0025cb "}.lst-kix_xpt451iyqej1-3>li:before{content:"\0025cf "}ol.lst-kix_cktmoc41t532-4.start{counter-reset:lst-ctn-kix_cktmoc41t532-4 0}ul.lst-kix_xpt451iyqej1-1{list-style-type:none}ul.lst-kix_xpt451iyqej1-0{list-style-type:none}ol.lst-kix_cktmoc41t532-3.start{counter-reset:lst-ctn-kix_cktmoc41t532-3 0}.lst-kix_cktmoc41t532-0>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-0,decimal) ". "}.lst-kix_cktmoc41t532-1>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-1,lower-latin) ". "}.lst-kix_oldlfkxmjbuj-4>li:before{content:"\0025cb "}ul.lst-kix_caqenjpjbamt-4{list-style-type:none}.lst-kix_cktmoc41t532-4>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-4,lower-latin) ". "}ul.lst-kix_caqenjpjbamt-3{list-style-type:none}ul.lst-kix_caqenjpjbamt-6{list-style-type:none}.lst-kix_oldlfkxmjbuj-3>li:before{content:"\0025cf "}ul.lst-kix_caqenjpjbamt-5{list-style-type:none}ul.lst-kix_caqenjpjbamt-8{list-style-type:none}.lst-kix_cktmoc41t532-2>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-2,lower-roman) ". "}.lst-kix_cktmoc41t532-6>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-6,decimal) ". "}ul.lst-kix_caqenjpjbamt-7{list-style-type:none}.lst-kix_cktmoc41t532-3>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-3,decimal) ". "}.lst-kix_cktmoc41t532-7>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-7,lower-latin) ". "}.lst-kix_oldlfkxmjbuj-2>li:before{content:"\0025a0 "}.lst-kix_ucxv06xdi15q-7>li:before{content:"\0025cb "}.lst-kix_oldlfkxmjbuj-1>li:before{content:"\0025cb "}.lst-kix_cktmoc41t532-5>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-5,lower-roman) ". "}.lst-kix_ucxv06xdi15q-8>li:before{content:"\0025a0 "}.lst-kix_oldlfkxmjbuj-0>li:before{content:"\0025cf "}.lst-kix_ucxv06xdi15q-1>li:before{content:"\0025cb "}.lst-kix_ucxv06xdi15q-3>li:before{content:"\0025cf "}.lst-kix_ucxv06xdi15q-2>li:before{content:"\0025a0 "}.lst-kix_ucxv06xdi15q-6>li:before{content:"\0025cf "}.lst-kix_cktmoc41t532-8>li:before{content:"" counter(lst-ctn-kix_cktmoc41t532-8,lower-roman) ". "}.lst-kix_ucxv06xdi15q-5>li:before{content:"\0025a0 "}ul.lst-kix_caqenjpjbamt-0{list-style-type:none}ul.lst-kix_caqenjpjbamt-2{list-style-type:none}.lst-kix_ucxv06xdi15q-4>li:before{content:"\0025cb "}ul.lst-kix_caqenjpjbamt-1{list-style-type:none}ul.lst-kix_ucxv06xdi15q-1{list-style-type:none}ul.lst-kix_ucxv06xdi15q-2{list-style-type:none}ul.lst-kix_ucxv06xdi15q-0{list-style-type:none}ul.lst-kix_ucxv06xdi15q-5{list-style-type:none}ul.lst-kix_ucxv06xdi15q-6{list-style-type:none}ul.lst-kix_ucxv06xdi15q-3{list-style-type:none}ul.lst-kix_ucxv06xdi15q-4{list-style-type:none}ul.lst-kix_ucxv06xdi15q-7{list-style-type:none}ul.lst-kix_ucxv06xdi15q-8{list-style-type:none}ol.lst-kix_cktmoc41t532-8.start{counter-reset:lst-ctn-kix_cktmoc41t532-8 0}.lst-kix_cktmoc41t532-8>li{counter-increment:lst-ctn-kix_cktmoc41t532-8}.lst-kix_iy595p3cktj3-1>li:before{content:"\0025cb "}.lst-kix_iy595p3cktj3-3>li:before{content:"\0025cf "}.lst-kix_oia1ur76tkla-5>li:before{content:"\0025a0 "}.lst-kix_oia1ur76tkla-7>li:before{content:"\0025cb "}.lst-kix_z1db35cwkqzv-1>li:before{content:"\0025cb "}.lst-kix_z1db35cwkqzv-3>li:before{content:"\0025cf "}.lst-kix_iy595p3cktj3-5>li:before{content:"\0025a0 "}ul.lst-kix_oldlfkxmjbuj-0{list-style-type:none}.lst-kix_z1db35cwkqzv-5>li:before{content:"\0025a0 "}.lst-kix_z1db35cwkqzv-7>li:before{content:"\0025cb "}ul.lst-kix_oldlfkxmjbuj-1{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-2{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-3{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-4{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-5{list-style-type:none}ul.lst-kix_oia1ur76tkla-1{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-6{list-style-type:none}ul.lst-kix_oia1ur76tkla-2{list-style-type:none}ul.lst-kix_oldlfkxmjbuj-7{list-style-type:none}.lst-kix_xpt451iyqej1-4>li:before{content:"\0025cb "}.lst-kix_xpt451iyqej1-6>li:before{content:"\0025cf "}ul.lst-kix_oldlfkxmjbuj-8{list-style-type:none}ul.lst-kix_oia1ur76tkla-0{list-style-type:none}ul.lst-kix_oia1ur76tkla-5{list-style-type:none}ul.lst-kix_iy595p3cktj3-8{list-style-type:none}ul.lst-kix_oia1ur76tkla-6{list-style-type:none}ul.lst-kix_oia1ur76tkla-3{list-style-type:none}ul.lst-kix_oia1ur76tkla-4{list-style-type:none}ul.lst-kix_iy595p3cktj3-5{list-style-type:none}ul.lst-kix_iy595p3cktj3-4{list-style-type:none}.lst-kix_iy595p3cktj3-7>li:before{content:"\0025cb "}ul.lst-kix_iy595p3cktj3-7{list-style-type:none}ul.lst-kix_oia1ur76tkla-7{list-style-type:none}ul.lst-kix_iy595p3cktj3-6{list-style-type:none}.lst-kix_xpt451iyqej1-8>li:before{content:"\0025a0 "}ul.lst-kix_oia1ur76tkla-8{list-style-type:none}ul.lst-kix_iy595p3cktj3-1{list-style-type:none}ul.lst-kix_iy595p3cktj3-0{list-style-type:none}ul.lst-kix_iy595p3cktj3-3{list-style-type:none}ul.lst-kix_iy595p3cktj3-2{list-style-type:none}.lst-kix_cktmoc41t532-1>li{counter-increment:lst-ctn-kix_cktmoc41t532-1}.lst-kix_oia1ur76tkla-1>li:before{content:"\0025cb "}.lst-kix_oia1ur76tkla-3>li:before{content:"\0025cf "}.lst-kix_mwbvd56bd501-4>li:before{content:"\0025cb "}.lst-kix_mwbvd56bd501-2>li:before{content:"\0025a0 "}ul.lst-kix_mwbvd56bd501-2{list-style-type:none}ul.lst-kix_mwbvd56bd501-3{list-style-type:none}ul.lst-kix_mwbvd56bd501-0{list-style-type:none}ul.lst-kix_mwbvd56bd501-1{list-style-type:none}.lst-kix_mwbvd56bd501-0>li:before{content:"\0025cf "}.lst-kix_cktmoc41t532-7>li{counter-increment:lst-ctn-kix_cktmoc41t532-7}.lst-kix_ucxv06xdi15q-0>li:before{content:"\0025cf "}ul.lst-kix_mwbvd56bd501-8{list-style-type:none}ul.lst-kix_mwbvd56bd501-6{list-style-type:none}ul.lst-kix_mwbvd56bd501-7{list-style-type:none}ul.lst-kix_mwbvd56bd501-4{list-style-type:none}ul.lst-kix_mwbvd56bd501-5{list-style-type:none}.lst-kix_cktmoc41t532-6>li{counter-increment:lst-ctn-kix_cktmoc41t532-6}.lst-kix_cktmoc41t532-0>li{counter-increment:lst-ctn-kix_cktmoc41t532-0}.lst-kix_oldlfkxmjbuj-6>li:before{content:"\0025cf "}ul.lst-kix_z1db35cwkqzv-2{list-style-type:none}ul.lst-kix_z1db35cwkqzv-3{list-style-type:none}ul.lst-kix_z1db35cwkqzv-0{list-style-type:none}.lst-kix_xpt451iyqej1-2>li:before{content:"\0025a0 "}ul.lst-kix_z1db35cwkqzv-1{list-style-type:none}.lst-kix_oldlfkxmjbuj-8>li:before{content:"\0025a0 "}ul.lst-kix_z1db35cwkqzv-8{list-style-type:none}ul.lst-kix_z1db35cwkqzv-6{list-style-type:none}ul.lst-kix_z1db35cwkqzv-7{list-style-type:none}ul.lst-kix_z1db35cwkqzv-4{list-style-type:none}ul.lst-kix_z1db35cwkqzv-5{list-style-type:none}.lst-kix_xpt451iyqej1-0>li:before{content:"\0025cf "}ol{margin:0;padding:0}.c9{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:225.7pt;border-top-color:#000000;border-bottom-style:solid}.c16{font-weight:normal;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c47{text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c2{orphans:2;widows:2;direction:ltr;height:11pt}.c39{background-color:#f9f2f4;font-size:10pt;font-family:"Consolas";color:#c7254e}.c41{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:left}.c22{background-color:#2b2b2b;font-size:8pt;font-family:"Courier New";color:#cc7832}.c55{padding-top:0pt;padding-bottom:0pt;line-height:1.15;text-align:left}.c13{font-size:16pt;font-family:"Trebuchet MS";color:#1155cc;text-decoration:underline}.c32{background-color:#2b2b2b;font-size:8pt;font-family:"Courier New";color:#e8bf6a}.c49{font-size:8pt;font-family:"Courier New";color:#9876aa}.c7{orphans:2;widows:2;direction:ltr}.c18{padding-top:10pt;padding-bottom:0pt;page-break-after:avoid}.c28{font-size:12pt;font-family:"Trebuchet MS";color:#666666}.c26{padding-top:8pt;padding-bottom:0pt;page-break-after:avoid}.c38{padding-bottom:0pt;page-break-after:avoid;text-align:center}.c43{line-height:1.15;text-align:left;height:20pt}.c57{background-color:#ffffff;max-width:451.4pt;padding:72pt 72pt 72pt 72pt}.c59{border-collapse:collapse;margin-right:auto}.c37{font-size:12pt;font-family:"Courier New";color:#e8bf6a}.c36{font-size:21pt;font-family:"Trebuchet MS"}.c17{color:#1155cc;text-decoration:underline}.c30{font-size:16pt;font-family:"Trebuchet MS"}.c51{font-size:12pt;font-family:"Trebuchet MS"}.c45{background-color:#ffffff;color:#212121}.c35{font-size:8pt;color:#e8bf6a}.c50{background-color:#ffffff;color:#dd1144}.c11{background-color:#ffffff;color:#222222}.c27{background-color:#ffffff;color:#333333}.c31{padding:0;margin:0}.c40{margin-left:72pt;padding-left:0pt}.c46{font-family:"Courier New";color:#e8bf6a}.c54{background-color:#ffffff;color:#000080}.c12{color:inherit;text-decoration:inherit}.c0{font-size:9pt;font-family:"Consolas"}.c10{margin-left:36pt;padding-left:0pt}.c21{font-size:13pt;font-family:"Trebuchet MS"}.c58{background-color:#ffffff;color:#0086b3}.c48{font-size:8pt;color:#cc7832}.c60{font-size:9pt}.c56{height:14pt}.c19{text-decoration:underline}.c20{font-weight:bold}.c15{height:0pt}.c6{color:#006666}.c42{line-height:1.0}.c25{margin-left:54pt}.c24{color:#880000}.c4{color:#666600}.c23{margin-left:36pt}.c29{margin-left:18pt}.c34{background-color:#2b2b2b}.c14{color:#008800}.c5{color:#000000}.c33{font-size:13pt}.c44{line-height:1.5}.c3{color:#660066}.c53{text-align:justify}.c8{font-style:italic}.c52{font-size:12pt}.c1{color:#000088}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c57"><p class="c7 c38 title"><a name="h.x2s7wc1lb5an"></a><span class="c36">ROUTE-TO-PA Developer Guide</span></p><p class="c2"><span class="c20 c33"></span></p><p class="c7 c29"><span class="c13"><a class="c12" href="#h.couwk1phskca">An architectural overview</a></span></p><p class="c7 c29"><span class="c13"><a class="c12" href="#h.urv1litmuehw">Code control system</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.6d53fxfci78h">Prerequisites</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.3fwzssauigko">Git</a></span></p><p class="c7 c29"><span class="c13"><a class="c12" href="#h.kq0jx6d2gu42">Keywords</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.2xi4iyxti3it">Web Component</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.waf9mw9uy47v">Polymer</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.oylshnr4dqms">webcomponents.js polyfills</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.wtrwkodajjel">Datalet</a></span></p><p class="c7 c25"><span class="c13"><a class="c12" href="#h.oa5t1t1cc2mn">Datalet lifecycle</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.qor0wy2nd780">Controllet</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.xrfgk8xj3aux">DEalEr Provider (DEEP)</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.juucc2j3piae">DEEPCLIENT</a></span></p><p class="c7 c25"><span class="c13"><a class="c12" href="#h.k19gs218be3l">DEEPCLIENT Usage:</a></span></p><p class="c7 c29"><span class="c13"><a class="c12" href="#h.pz7vvqc2atb">Components Tutorial (Polymer 1.0)</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.ig6fal8a8s2x">A behaviors based architecture</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.23494m888vls">An example of datalet for Highchart js library</a></span></p><p class="c7 c25"><span class="c13"><a class="c12" href="#h.qqdl4o86ucxr">Ajax-Json-JsonPath behavior</a></span></p><p class="c7 c25"><span class="c13"><a class="c12" href="#h.lmehzpjkgz75">Base datalet</a></span></p><p class="c7 c25"><span class="c13"><a class="c12" href="#h.6otvlqmjxt9s">base-ajax-json-jsonpath-datalet Datalet</a></span></p><p class="c7 c25"><span class="c13"><a class="c12" href="#h.5kn6d9gehrxp">Highcharts component</a></span></p><p class="c7 c25"><span class="c13"><a class="c12" href="#h.ns7fynbyet5s">Linechart datalet</a></span></p><p class="c7 c25"><span class="c13"><a class="c12" href="#h.ve1g902t8v">Barchart datalet</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.l8rhx6bh9kf">Datatable-datalet</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.p6eipyeci0pi">Component documentation</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.hchmkvzcaha3">Deploy a new component</a></span></p><p class="c7 c29"><span class="c13"><a class="c12" href="#h.j1ju11botx5f">MISC</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.lj7afoxzjwpx">Integrated Development Environment: phpStorm</a></span></p><p class="c7 c23"><span class="c13"><a class="c12" href="#h.dj5v4msbbn4q">Useful Links</a></span></p><h1 class="c7 c18"><a name="h.couwk1phskca"></a><span class="c30">An architectural overview</span></h1><p class="c2"><span class="c20 c33"></span></p><p class="c7"><span>We’ll briefly introduce our Datalet architectural design. </span></p><p class="c2"><span></span></p><p class="c7"><span>We have three actors: </span></p><ul class="c31 lst-kix_oia1ur76tkla-0 start"><li class="c7 c10"><span>client page that exploit DEEP-Client functionality</span></li><li class="c7 c10"><span>DEEP (Dealer Provider)</span></li><li class="c7 c10"><span>DEEP-Component</span></li></ul><p class="c2"><span></span></p><p class="c7"><span>The DEEP-Client ask to DEEP for a specific Datalet, DEEP responds with the information necessary for the Datalet inclusion, the DEEP-Client retrieve the Datalet from DEEP-Component and include it into the page.</span></p><p class="c7"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 624.00px; height: 342.67px;"><img alt="SPOD__1_.png" src="images/image00.png" style="width: 624.00px; height: 342.67px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><ul class="c31 lst-kix_z1db35cwkqzv-0 start"><li class="c7 c10 c42"><span class="c11">A HTML web page that includes webcomponents must include the </span><span class="c11 c20">DEEP-Client</span><span class="c11"> Javascript library, configured with the URL of the DEEP repository.</span></li><li class="c7 c10 c42"><span class="c11">In the above image, a web page contains a </span><span class="c11 c20">data-table</span><span class="c11"> webcomponent that is configured with a </span><span class="c39">data_url</span><span class="c11"> elements (an URL to a data-source) and a </span><span class="c39">params</span><span class="c11"> element (that may contain configuration parameters as requested by the webcomponent).</span></li><li class="c7 c10 c42"><span class="c11">DEEPCLIENT contacts DEEP and asks for the location of the data-table webcomponent.</span></li><li class="c7 c10 c42"><span class="c11">DEEP answers with the complete URL where the Client can download the data-table component.</span></li><li class="c7 c10 c42"><span class="c11">DEEPCLIENT sends a request to the aforementioned webcomponent URL and downloads the data-table webcomponent's code. We say that webcomponents are hosted by a DEEPCOMPONENT repository (basically a web server compatible with HTTP/Ajax that serves webcomponents' HTML code).</span></li><li class="c7 c10 c42"><span class="c11">Once downloaded the data-table webcomponent's code can be placed in the HTML client page and rendered within the browser.</span></li></ul><p class="c2 c44"><span class="c11"></span></p><h1 class="c7 c18"><a name="h.urv1litmuehw"></a><span class="c30">Code control system</span></h1><h2 class="c7 c18 c53"><a name="h.6d53fxfci78h"></a><span class="c20 c52">Prerequisites</span></h2><p class="c2"><span></span></p><ul class="c31 lst-kix_w0lbiu9bsebc-0 start"><li class="c7 c10"><span>Web server with PHP support (DEEP is currently developed in PHP)</span></li><li class="c7 c10"><span>Git client</span></li></ul><h2 class="c7 c18"><a name="h.3fwzssauigko"></a><span class="c20 c33">Git</span></h2><p class="c2"><span></span></p><p class="c7 c53"><span>Go to </span><span class="c17"><a class="c12" href="https://www.google.com/url?q=http://service.routetopa.eu:7480/users/sign_in&sa=D&usg=AFQjCNGrCFMrZzF4Ao1w1RrmCkv-Dw-s2Q">http://service.routetopa.eu:7480/users/sign_in</a></span><span> and create an account.</span></p><p class="c7 c53"><span>Send an email to GIT system administrator (specifying your email account on GIT) to be added into </span><span class="c20">WebCompDev </span><span>group.</span></p><p class="c2"><span></span></p><p class="c7"><span>From terminal:</span></p><p class="c2"><span></span></p><p class="c7"><span>$ git config --global user.name “YOUR NAME”</span></p><p class="c7"><span>$ git config --global user.mail “YOUR EMAIL ADDRESS”</span></p><p class="c7"><span> </span></p><p class="c7"><span>Create a directory inside your public HTML web server directory, then :</span></p><p class="c2"><span></span></p><p class="c7"><span>$ git clone http://service.routetopa.eu:7480/isislab/DEEP.git</span></p><p class="c7"><span>$ git clone http://service.routetopa.eu:7480/isislab/DEEPCLIENT.git</span></p><p class="c7"><span>$ git clone http://service.routetopa.eu:7480/WebCompDev/COMPONENTS.git</span></p><p class="c2"><span></span></p><p class="c7"><span>now in your web server's local directory there are 3 new directory DEEP, DEEPCLIENT, COMPONENTS. </span></p><p class="c2"><span></span></p><p class="c7"><span>Now we have to configure DEEP and DEEPCLIENT to work correctly on your environment.</span></p><p class="c7"><span>In DEEP directory edit file datalets.xml. Substitute the <components_repository_url_reference> value with the full URL of COMPONENTS/datalets just cloned, repeat the same operation for controllets.xml.</span></p><p class="c2"><span></span></p><p class="c7"><span>In DEEPCLIENT edit file index.html and substitute ComponentService.deep_url with the correct DEEP URL.</span></p><p class="c2"><span></span></p><p class="c7"><span>Now you can test the Datalet demo pointing the browser to DEEPCLIENT/index.html</span></p><p class="c2"><span></span></p><hr style="page-break-before:always;display:none;"><p class="c2"><span></span></p><h1 class="c7 c18"><a name="h.kq0jx6d2gu42"></a><span class="c30">Keywords</span></h1><p class="c2"><span class="c20"></span></p><h2 class="c7 c18"><a name="h.2xi4iyxti3it"></a><span class="c21 c20">Web Component </span></h2><p class="c7"><span>Are a set of standards currently being produced by Google engineers as a W3C specification that allow for the creation of reusable widgets or components in web documents and web applications.<br>Web Components consist of 4 main elements which can be used separately or all together:</span></p><ul class="c31 lst-kix_ucxv06xdi15q-0 start"><li class="c7 c10"><span>Custom Elements</span></li><li class="c7 c10"><span>Shadow DOM</span></li><li class="c7 c10"><span>HTML Imports</span></li><li class="c7 c10"><span>HTML Templates</span></li></ul><h2 class="c7 c18"><a name="h.waf9mw9uy47v"></a><span class="c21 c20">Polymer </span></h2><p class="c7"><span>The Polymer library developed by Google is designed to make easier and faster for developers to create reusable components for the modern web.</span></p><p class="c2"><span></span></p><h2 class="c7 c18"><a name="h.oylshnr4dqms"></a><span class="c21 c20">webcomponents.js polyfills</span></h2><p class="c7"><span>Are a set of polyfills built on top of the Web Components specifications. It makes possible for developers to use these standards today across all modern browsers. As these technologies are implemented in browsers, the polyfills will shrink and you'll gain the benefits of native implementations. webcomponents.js automatically detects native support and switches to the fast path when available. Your elements seamlessly start relying on the native implementation.</span></p><p class="c2"><span class="c20"></span></p><h2 class="c7 c18"><a name="h.wtrwkodajjel"></a><span class="c21 c20">Datalet</span></h2><p class="c7"><span>It‘s responsible for data retrieving, filtering and visualization. From technological point of view it’s a web component built with </span><span class="c8">polymer library</span><span>. In our architecture each Datalet inherit from a base web component: base-datalet. </span></p><p class="c7"><span>The base-datalet have two main attributes: data_url and query. The data_url attribute specify the data url from which to take data. This data should be json formatted and available by ajax request. The query attribute is a string which represent a selection and, optionally, filtering to apply to retrieved data. </span></p><p class="c2"><span></span></p><h3 class="c7 c23 c26"><a name="h.oa5t1t1cc2mn"></a><span class="c20 c28">Datalet lifecycle</span></h3><p class="c2 c23"><span class="c20"></span></p><p class="c7 c23"><span>Each Datalet follow this lifecycle inherit from base-datalet:</span></p><p class="c2 c23"><span></span></p><ol class="c31 lst-kix_cktmoc41t532-0 start" start="1"><li class="c7 c40"><span>Data retrieving through an ajax request</span></li><li class="c7 c40"><span>Data selection </span></li><li class="c7 c40"><span>Data filtering (optional)</span></li><li class="c7 c40"><span>Data transformation </span></li><li class="c7 c40"><span>Data presentation</span></li></ol><p class="c2"><span></span></p><p class="c2"><span></span></p><p class="c2"><span></span></p><p class="c2"><span class="c20"></span></p><p class="c2"><span class="c20"></span></p><h2 class="c7 c18"><a name="h.qor0wy2nd780"></a><span class="c20 c21">Controllet </span></h2><p class="c7"><span>It’s a web component created with Polymer library that implements control behaviour like form, slider, etc. It generally use a set of polymer core elements to realize a more complex component using composition paradigm.</span></p><p class="c2"><span class="c20"></span></p><h2 class="c7 c18"><a name="h.xrfgk8xj3aux"></a><span class="c21 c20">DEalEr Provider (DEEP)</span></h2><p class="c7"><span>The Dealer provider (DEEP) is a RESTful web service written in PHP. It make available a public discovery service that retrieve all the Datalet available into the system and a service call that provide a specific Datalet.</span></p><p class="c2"><span></span></p><h2 class="c7 c18"><a name="h.juucc2j3piae"></a><span class="c21 c20">DEEPCLIENT</span></h2><p class="c7"><span>Is a simple javascript library that allows the connection with DEEP and the inclusion of a Datalet within a HTML page.</span></p><p class="c2"><span></span></p><h3 class="c7 c26"><a name="h.k19gs218be3l"></a><span class="c28 c20">DEEPCLIENT Usage: </span></h3><p class="c2"><span></span></p><p class="c7"><span>This is a minimal example of deep client usage. </span></p><p class="c2"><span class="c54 c20 c8"></span></p><p class="c7"><span class="c0 c1"><html></span><span class="c0 c5"><br></span><span class="c0 c1"><head></span></p><p class="c7"><span class="c0 c1"><script</span><span class="c0 c5"> </span><span class="c0 c3">type</span><span class="c0 c4">=</span><span class="c0 c14">"text/javascript"</span><span class="c0 c5"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"js/jquery-1.11.2.min.js"</span><span class="c0 c1">></script></span><span class="c0 c5"><br></span><span class="c0 c1"><script</span><span class="c0 c5"> </span><span class="c0 c3">type</span><span class="c0 c4">=</span><span class="c0 c14">"text/javascript"</span><span class="c0 c5"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"js/webcomponents.js"</span><span class="c0 c1">></script></span><span class="c0 c5"><br></span><span class="c0 c1"><script</span><span class="c0 c5"> </span><span class="c0 c3">type</span><span class="c0 c4">=</span><span class="c0 c14">"text/javascript"</span><span class="c0 c5"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"js/deepClient.js"</span><span class="c0 c1">></script></span></p><p class="c7"><span class="c0 c5"> </span><span class="c0 c1"><script</span><span class="c0 c5"> </span><span class="c0 c3">type</span><span class="c0 c4">=</span><span class="c0 c14">"text/javascript"</span><span class="c0 c1">></span><span class="c0 c5"><br> jQuery(document).ready(function($) {<br> var datalet_params =</span></p><p class="c7"><span class="c0 c5"> </span><span class="c0 c4">{</span><span class="c0 c5"><br> component </span><span class="c0 c4">:</span><span class="c0 c5"> </span><span class="c0 c14">"DATALET_NAME"</span><span class="c0 c4">, </span></p><p class="c7"><span class="c0 c5"> </span><span class="c0 c1">params</span><span class="c0 c5"> </span><span class="c0 c4">:</span><span class="c0 c5"> </span><span class="c0 c4">{</span><span class="c0 c5"><br> data</span><span class="c0 c4">-</span><span class="c0 c5">url </span><span class="c0 c4">:</span><span class="c0 c5"> </span><span class="c0 c14">"DATA_URL",</span></p><p class="c7"><span class="c0 c5"> </span><span class="c0 c4">}</span><span class="c0 c5"><br> fields </span><span class="c0 c4">:</span><span class="c0 c5"> </span><span class="c0 c3">Array</span><span class="c0 c4">(</span><span class="c0 c14">"FIELD1"</span><span class="c0 c4">,</span><span class="c0 c5"> </span><span class="c0 c14">"FIELD2"</span><span class="c0 c4">),</span><span class="c0 c5"><br> placeHolder </span><span class="c0 c4">:</span><span class="c0 c5"> </span><span class="c0 c14">"HTML_PLACEHOLDER"</span></p><p class="c7"><span class="c0 c4">};</span></p><p class="c7"><span class="c0 c5"> </span><span class="c0 c3">ComponentService</span><span class="c0 c4">.</span><span class="c0 c5">deep_url </span><span class="c0 c4">=</span><span class="c0 c5"> </span><span class="c0 c14">'DEEP_URL'</span><span class="c0 c4">;</span><span class="c0 c5"><br> </span><span class="c0 c3">ComponentService</span><span class="c0 c4">.</span><span class="c0 c5">getComponent</span><span class="c0 c4">(</span><span class="c0 c5">datalet_params</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0 c5"><br> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0 c5"><br> </span><span class="c0 c1"></script></span></p><p class="c7"><span class="c0 c1"></head></span></p><p class="c7"><span class="c0 c1"><body></span></p><p class="c7"><span class="c0 c1"><div</span><span class="c0 c5"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"HTML_PLACEHOLDER"</span><span class="c0 c1">></div></span></p><p class="c7"><span class="c0 c1"></body></span></p><p class="c7"><span class="c0 c1"></html></span></p><p class="c2"><span class="c8 c54"></span></p><p class="c2"><span></span></p><p class="c7"><span>We create an empty HTML document with a single DIV. On document ready event we create a datalet_params object, this object contains information for Datalet retrieving and initialization.</span></p><p class="c2"><span></span></p><p class="c7"><span>datalet_params contains :</span></p><ul class="c31 lst-kix_iy595p3cktj3-0 start"><li class="c7 c10"><span class="c8">component :</span><span> the Datalet name to be sent to DEEP (Eg. </span><span class="c50">datatable-datalet</span><span>)</span></li><li class="c7 c10"><span class="c8">params.data-url :</span><span> the datasource URL (Eg.</span><span class="c50">http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50</span><span>)</span></li><li class="c7 c10"><span class="c8">fields :</span><span> an array with user selected fields from datasource (Eg. </span><span class="c58">Array</span><span class="c27">(</span><span class="c50">"Supplier"</span><span class="c27">, </span><span class="c50">"Amount"</span><span class="c27">)</span><span>)</span></li><li class="c7 c10"><span class="c8">placeHolder :</span><span> the ID of the DOM element where place the Datalet </span></li></ul><p class="c2"><span></span></p><p class="c7"><span class="c8 c27">ComponentService.getComponent </span><span>function</span><span class="c27 c8"> </span><span>take a datalet_params object as parameter. This function is responsible for Datalet info retrieving from DEPP and Datalet code retrieving from DEEPCOMPONENTS. Once the Datalet code is available DEEPCLIENT add the Datalet to the document DOM and initialize the Datalet with the </span><span class="c8">data </span><span>and </span><span class="c8">fields </span><span>parameters.</span></p><p class="c7"><span>Now the Datalet is able to complete its lifecycle.</span></p><p class="c2"><span></span></p><p class="c7"><span>The programmer must specify the DEEP endpoint through the variable </span><span class="c27 c8">ComponentService.deep_url.</span></p><hr style="page-break-before:always;display:none;"><p class="c2"><span></span></p><h1 class="c7 c18"><a name="h.pz7vvqc2atb"></a><span class="c30">Components Tutorial (Polymer 1.0)</span></h1><p class="c7"><span class="c20">[Knowledge required : javascript, html, Polymer 1.0]</span></p><p class="c2"><span></span></p><h2 class="c7 c18"><a name="h.ig6fal8a8s2x"></a><span class="c21 c20">A behaviors based architecture </span></h2><p class="c2"><span></span></p><p class="c7"><span>Since Polymer 1.0 doesn’t support components inheritance, we provide a way to have it in datalets, waiting for it in the next Polymer version.</span></p><p class="c7"><span>We provide a bundle of objects that implements all behaviors we want our datalets have. They are divided in two categories : BaseDataletsBehaviors and CustomDataletBehaviors. </span></p><p class="c7"><span>The BaseDataletBehaviors define the lifecycle for all Datalets. Every lifecycle step in BaseDataletBehaviors is implemented in the CustomDataletBehaviors. This mechanism provides a components hierarchy that standardize Datalet production and make reusable common behaviors.</span></p><p class="c7"><span> </span></p><p class="c7"><span>The BaseDataletBehaviors are:</span></p><ul class="c31 lst-kix_caqenjpjbamt-0 start"><li class="c7 c10"><span>BaseDataletBehavior</span></li><li class="c7 c10"><span>WorkcycleBehavior</span></li></ul><p class="c2"><span></span></p><p class="c7"><span>The BaseDataletBehavior define the mandatory attributes that all datalet must have :</span></p><p class="c2"><span></span></p><ul class="c31 lst-kix_mwbvd56bd501-0 start"><li class="c7 c10"><span class="c8">data_url (string) : </span><span>the URL used to get the data from the Open Data Provider (e.g. the CKAN API).</span></li><li class="c7 c10"><span class="c8">fields (String)</span><span>: it represents a JSON array of user selected dataset fields.</span></li><li class="c7 c10"><span class="c8">data (array): </span><span> data structure that store the data retrieved from Open Data Provider.</span></li></ul><p class="c2"><span></span></p><p class="c7"><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">BaseDataletBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> properties</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">It</span><span class="c0"> represent the data url </span><span class="c0 c1">from</span><span class="c0"> CKAN api</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@attribute</span><span class="c0"> dataUrl</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@type</span><span class="c0"> </span><span class="c0 c1">string</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@default</span><span class="c0"> </span><span class="c0 c14">'null'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> dataUrl</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">String,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">""</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">It</span><span class="c0"> represents one </span><span class="c0 c1">or</span><span class="c0"> multiple fields selected </span><span class="c0 c1">by</span><span class="c0"> user</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@attribute</span><span class="c0"> fields</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@type</span><span class="c0"> </span><span class="c0 c3">String</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@default</span><span class="c0"> empty</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> fields</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">String,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">""</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">The</span><span class="c0"> selected </span><span class="c0 c1">and</span><span class="c0"> transformed data you can </span><span class="c0 c1">use</span><span class="c0"> </span><span class="c0 c1">in</span><span class="c0"> presentation phase</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@attribute</span><span class="c0"> data</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@type</span><span class="c0"> </span><span class="c0 c3">Array</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@default</span><span class="c0"> empty</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> data</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">Array,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">[]</span></p><p class="c7"><span class="c0"> }</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> factoryImpl</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(</span><span class="c0">data_url</span><span class="c0 c4">,</span><span class="c0"> fields</span><span class="c0 c4">)</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data_url </span><span class="c0 c4">=</span><span class="c0"> data_url;</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">fields </span><span class="c0 c4">=</span><span class="c0"> fields;</span></p><p class="c7"><span class="c0"> }</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c4">};</span></p><p class="c2"><span class="c22 c20"></span></p><p class="c2"><span></span></p><p class="c2"><span></span></p><p class="c7"><span>The WorkcycleBehavior implements the workcycle of each datalets, composed by this steps :</span></p><p class="c2"><span></span></p><ul class="c31 lst-kix_oldlfkxmjbuj-0 start"><li class="c7 c10"><span class="c8">Get the data</span><span> </span><span class="c8">from a source</span><span> : It’s responsible for data retrieving from an Open Data Platform. It’s the starting point of Datalet work-cycle.</span></li><li class="c7 c10"><span class="c8">Select a subset of fields from the data</span><span> : this operation is data format dependent. It’s responsible for extract a query related subset of information from the entire dataset. An multidimensional array will be made available for the transformation step.</span></li><li class="c7 c10"><span class="c8">Filter </span><span>the data by applying logical operation( <, >, =, <=, >=, etc.): this function is designed to apply logical operation to the data created in the selection step (this step and the previous one could be merged together).</span></li><li class="c7 c10"><span class="c8">Transform </span><span>data in order to obtain a coherent data rapresentation</span></li><li class="c7 c10"><span class="c8">Present data </span><span>the data for a specific visualization : here we create the data structure necessary for visualization libraries initialization. At this point could be an interaction with component’s DOM. </span></li></ul><p class="c2"><span></span></p><p class="c7"><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">WorkcycleBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> _component</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">null,</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Request</span><span class="c0"> data </span><span class="c0 c1">from</span><span class="c0"> source</span><span class="c0 c4">(</span><span class="c0">e</span><span class="c0 c4">.</span><span class="c0">g</span><span class="c0 c4">.</span><span class="c0"> CKAN </span><span class="c0 c1">by</span><span class="c0"> api</span><span class="c0 c4">)</span><span class="c0"> </span><span class="c0 c1">using</span><span class="c0"> some kind of technology</span><span class="c0 c4">(</span><span class="c0">e</span><span class="c0 c4">.</span><span class="c0">g</span><span class="c0 c4">.</span><span class="c0"> </span><span class="c0 c3">Ajax)</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> requestData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> requestData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Select</span><span class="c0"> the fields </span><span class="c0 c1">from</span><span class="c0"> data</span><span class="c0 c4">(</span><span class="c0">typically json</span><span class="c0 c4">)</span><span class="c0"> previously retrieved </span><span class="c0 c1">by</span><span class="c0"> ajax request</span><span class="c0 c4">.</span><span class="c0"> </span><span class="c0 c3">The</span><span class="c0"> selection could be </span><span class="c0 c1">done</span><span class="c0"> </span><span class="c0 c1">by</span><span class="c0"> jsonPath but</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> it depends on the representation data format</span><span class="c0 c4">(</span><span class="c0">CKAN apies </span><span class="c0 c1">return</span><span class="c0"> a json representation of the dataset</span><span class="c0 c4">).</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> selectData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> selectData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Filter</span><span class="c0"> data previously selected</span><span class="c0 c4">.</span><span class="c0"> </span><span class="c0 c3">An</span><span class="c0"> example of filterting could be an expression such </span><span class="c0 c14">"fields > 30"</span><span class="c0"> </span><span class="c0 c1">or</span><span class="c0"> </span><span class="c0 c14">"fields = 'AAA'"</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">If</span><span class="c0"> you are </span><span class="c0 c1">using</span><span class="c0"> jsonPath to </span><span class="c0 c1">select</span><span class="c0"> the datas you can apply an expression directly </span><span class="c0 c1">in</span><span class="c0"> the jsonPath query </span><span class="c0 c1">string.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> filterData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> filterData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Transform</span><span class="c0"> the selected data </span><span class="c0 c1">in</span><span class="c0"> order to build the structure that the presentation phase needs.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> transformData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> transformData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Build</span><span class="c0"> the </span><span class="c0 c1">object</span><span class="c0 c4">/</span><span class="c0">s </span><span class="c0 c1">for</span><span class="c0"> presentation layer.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> presentData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> presentData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">This</span><span class="c0"> method represents the entire datalet workcycle.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> runWorkcycle</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> runWorkcycle</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">()</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">selectData</span><span class="c0 c4">();</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">filterData</span><span class="c0 c4">();</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">transformData</span><span class="c0 c4">();</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">presentData</span><span class="c0 c4">();</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">This</span><span class="c0"> method save the reference to the polymer </span><span class="c0 c1">object</span><span class="c0"> related to the datalet.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> init</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> init</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(</span><span class="c0">component</span><span class="c0 c4">){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component </span><span class="c0 c4">=</span><span class="c0"> component;</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">requestData</span><span class="c0 c4">();</span></p><p class="c7"><span class="c0"> }</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c4">};</span></p><p class="c2"><span class="c22 c20"></span></p><p class="c7"><span> </span></p><p class="c7"><span>The </span><span class="c8">CustomDataletBehaviors </span><span>represents the specific implementation for the work-cycle steps. </span></p><p class="c7"><span>This behaviours are a components hierarchy that use a particular communication channel, data format and visualization library.</span></p><h2 class="c7 c18"><a name="h.23494m888vls"></a><span class="c21 c20">An example of datalet for Highchart js library</span></h2><p class="c2"><span></span></p><p class="c7"><span>We’ll describe for example purpose a Datalet that use a AJAX channal, handle JSON data format and use Highcharts for data visualization and JSONPATH library for data selection.</span></p><p class="c2"><span></span></p><h3 class="c7 c26"><a name="h.qqdl4o86ucxr"></a><span class="c28 c20">Ajax-Json-JsonPath behavior</span></h3><p class="c2"><span></span></p><p class="c7"><span>Here we exploit an AJAX communication channel that handle JSON data format and extends the base behaviors (in particular the requestData method). This behavior override the </span><span class="c8">select </span><span>method in order to perform a JSONPATH query according to the user selected fields stored in the </span><span class="c8">this._component.fields </span><span>variable.</span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">AjaxJsonJsonPathBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> properties</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">It</span><span class="c0"> contains the json data </span><span class="c0 c1">from</span><span class="c0"> async xhr call returned </span><span class="c0 c1">from</span><span class="c0"> core</span><span class="c0 c4">-</span><span class="c0">ajax core component</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@attribute</span><span class="c0"> json_results</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@type</span><span class="c0"> </span><span class="c0 c1">object</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@default</span><span class="c0"> </span><span class="c0 c14">'null'.</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> json_results</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">Object,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">{}</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Make</span><span class="c0"> an AJAX call to the dataset URL</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> requestData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> requestData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> comp </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c1">this;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> $</span><span class="c0 c4">.</span><span class="c0">ajax</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> url</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">dataUrl,</span></p><p class="c7"><span class="c0"> dataType</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">"json",</span></p><p class="c7"><span class="c0"> success</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(</span><span class="c0">e</span><span class="c0 c4">){</span></p><p class="c7"><span class="c0"> comp</span><span class="c0 c4">.</span><span class="c0">handleResponse</span><span class="c0 c4">(</span><span class="c0">e</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Called</span><span class="c0"> </span><span class="c0 c1">when</span><span class="c0"> core</span><span class="c0 c4">-</span><span class="c0">ajax component receive the json data </span><span class="c0 c1">from</span><span class="c0"> called url.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> handleResponse</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> handleResponse</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(</span><span class="c0">e</span><span class="c0 c4">)</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">json_results</span><span class="c0 c4">.</span><span class="c0">value </span><span class="c0 c4">=</span><span class="c0"> e;</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">runWorkcycle</span><span class="c0 c4">();</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> selectData built a JSONPATH query based on the user selected fields </span><span class="c0 c1">then</span><span class="c0"> extract data </span><span class="c0 c1">from</span><span class="c0"> the JSON response.</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">This</span><span class="c0"> method built an objects </span><span class="c0 c4"><</span><span class="c0">name</span><span class="c0 c4">,</span><span class="c0"> data</span><span class="c0 c4">></span><span class="c0"> </span><span class="c0 c1">for</span><span class="c0"> every user selected field </span><span class="c0 c1">and</span><span class="c0"> push it </span><span class="c0 c1">into</span><span class="c0"> the data array.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> selectData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> selectData </span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c4">[];</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">fields </span><span class="c0 c4">=</span><span class="c0"> JSON</span><span class="c0 c4">.</span><span class="c0">parse</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">fields</span><span class="c0 c4">);</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0"> i</span><span class="c0 c4">=</span><span class="c0 c6">0</span><span class="c0 c4">;</span><span class="c0">i </span><span class="c0 c4"><</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">fields</span><span class="c0 c4">.</span><span class="c0">length</span><span class="c0 c4">;</span><span class="c0"> i</span><span class="c0 c4">++){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> query </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c14">"$";</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> query_elements </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">fields</span><span class="c0 c4">[</span><span class="c0">i</span><span class="c0 c4">].</span><span class="c0">split</span><span class="c0 c4">(</span><span class="c0 c14">','</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0"> j</span><span class="c0 c4">=</span><span class="c0 c6">0</span><span class="c0 c4">;</span><span class="c0"> j </span><span class="c0 c4"><</span><span class="c0"> query_elements</span><span class="c0 c4">.</span><span class="c0">length </span><span class="c0 c4">-</span><span class="c0"> </span><span class="c0 c6">1</span><span class="c0 c4">;</span><span class="c0">j</span><span class="c0 c4">++){</span></p><p class="c7"><span class="c0"> query </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">"['"</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> query_elements</span><span class="c0 c4">[</span><span class="c0">j</span><span class="c0 c4">]</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c14">"']";</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> query </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">"[*]"</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c14">"['"</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> query_elements</span><span class="c0 c4">[</span><span class="c0">query_elements</span><span class="c0 c4">.</span><span class="c0">length </span><span class="c0 c4">-</span><span class="c0"> </span><span class="c0 c6">1</span><span class="c0 c4">]</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c14">"']";</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">push</span><span class="c0 c4">({</span><span class="c0">name </span><span class="c0 c4">:</span><span class="c0"> query_elements</span><span class="c0 c4">[</span><span class="c0">query_elements</span><span class="c0 c4">.</span><span class="c0">length </span><span class="c0 c4">-</span><span class="c0"> </span><span class="c0 c6">1</span><span class="c0 c4">],</span><span class="c0"> data </span><span class="c0 c4">:</span><span class="c0"> jsonPath</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">json_results</span><span class="c0 c4">.</span><span class="c0">value</span><span class="c0 c4">,</span><span class="c0"> query</span><span class="c0 c4">)});</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> }</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c4">};</span></p><p class="c2"><span class="c22 c20"></span></p><p class="c2"><span></span></p><ul class="c31 lst-kix_mwbvd56bd501-0"><li class="c7 c10"><span class="c8">json_results(object): </span><span>the object that will store the JSON results returned from data request. It will be used from the Datalets which will use this behavior in order to access to this response object everywhere. </span></li><li class="c7 c10"><span class="c8">requestData</span><span>: it’s an override of WorkcicleBehavior component to use AJAX to request data</span></li><li class="c7 c10"><span class="c8">handleResponse</span><span>: it’s callback for AJAX request that set the </span><span class="c8">json_response </span><span>attribute that will be used by the specialized behavior that will use the data (select, filter and transform) and </span><span class="c8 c19">run the workcycle</span><span>.</span></li></ul><p class="c2"><span></span></p><h3 class="c7 c26"><a name="h.lmehzpjkgz75"></a><span class="c28 c20">Base datalet</span></h3><p class="c2"><span></span></p><p class="c7"><span>We define a </span><span class="c8">base-datalet</span><span> that include BaseDataletBehavior</span><span class="c0"> </span><span>and a footer that contain a ROUTE-TO-PA logo and data source domain information.</span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c1"><link</span><span class="c0"> </span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">"import"</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"../../bower_components/polymer/polymer.html"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1"><dom-module</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"base-datalet"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><style></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">#footer {</span></p><p class="c7"><span class="c0"> position</span><span class="c0 c4">:</span><span class="c0"> relative;</span></p><p class="c7"><span class="c0"> bottom</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">0;</span></p><p class="c7"><span class="c0"> width</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">100</span><span class="c0 c4">%;</span></p><p class="c7"><span class="c0"> font</span><span class="c0 c4">-</span><span class="c0">size</span><span class="c0 c4">:</span><span class="c0"> small;</span></p><p class="c7"><span class="c0"> }</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">#rtpalogo{</span></p><p class="c7"><span class="c0"> height</span><span class="c0 c4">:</span><span class="c0 c6">30px;</span></p><p class="c7"><span class="c0"> width</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">30px;</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></style></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><b></span><span class="c0">Source : </span><span class="c0 c1"></b><span</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"domain"</span><span class="c0 c1">></span><br><br></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><div</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"footer"</span><span class="c0 c1">></span><span class="c0">Powered by Route-to-PA&nbsp&nbsp</span><span class="c0 c1"><a</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"http://routetopa.eu/"</span><span class="c0 c1">><img</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"static/images/rtpalogo.png"</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"rtpalogo"</span><span class="c0 c1">></a></div><br></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></template></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"static/js/BaseDataletBehaviors.js"</span><span class="c0 c1">></script></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script></span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">BaseDatalet</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">is</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'base-datalet',</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">It</span><span class="c0"> </span><span class="c0 c1">is</span><span class="c0"> called after the element</span><span class="c0 c4">'</span><span class="c0">s </span><span class="c0 c1">template</span><span class="c0"> has been stamped </span><span class="c0 c1">and</span><span class="c0"> all elements inside the element</span><span class="c0 c4">'</span><span class="c0">s </span><span class="c0 c1">local</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> DOM have been configured </span><span class="c0 c4">(</span><span class="c0 c1">with</span><span class="c0"> values bound </span><span class="c0 c1">from</span><span class="c0"> parents</span><span class="c0 c4">,</span><span class="c0"> deserialized attributes</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c1">or</span><span class="c0"> </span><span class="c0 c1">else</span><span class="c0"> </span><span class="c0 c1">default</span><span class="c0"> values)</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c1">and</span><span class="c0"> had their ready method called.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Extract</span><span class="c0"> the dataset domain </span><span class="c0 c1">from</span><span class="c0"> the entire URL </span><span class="c0 c1">and</span><span class="c0"> </span><span class="c0 c1">set</span><span class="c0"> the text content of the datalet footer.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> ready</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> ready</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">$</span><span class="c0 c4">.</span><span class="c0">domain</span><span class="c0 c4">.</span><span class="c0">textContent </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">dataUrl</span><span class="c0 c4">.</span><span class="c0">split</span><span class="c0 c4">(</span><span class="c0 c14">"/"</span><span class="c0 c4">)[</span><span class="c0 c6">0</span><span class="c0 c4">]</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c14">"//"</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">dataUrl</span><span class="c0 c4">.</span><span class="c0">split</span><span class="c0 c4">(</span><span class="c0 c14">"/"</span><span class="c0 c4">)[</span><span class="c0 c6">2</span><span class="c0 c4">];</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></script></span></p><p class="c7"><span class="c0 c1"></dom-module></span></p><p class="c2"><span class="c32"></span></p><p class="c2"><span></span></p><p class="c7"><span>All components that import this one will include the BaseDataletBehavior.</span></p><p class="c2"><span></span></p><h3 class="c7 c26"><a name="h.6otvlqmjxt9s"></a><span class="c28 c20">base-ajax-json-jsonpath-datalet Datalet</span></h3><p class="c2"><span></span></p><p class="c7"><span class="c0 c1"><link</span><span class="c0"> </span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">"import"</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"../base-datalet/base-datalet.html"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1"><dom-module</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"base-ajax-json-jsonpath-datalet"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><base-datalet</span><span class="c0"> </span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">"{{dataUrl}}"</span><span class="c0"> </span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">"{{fields}}"</span><span class="c0 c1">></base-datalet></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></template></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"static/js/vendor/jsonpath-0.8.5.js"</span><span class="c0 c1">></script></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"static/js/AjaxJsonJsonPathBehavior.js"</span><span class="c0 c1">></script></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script></span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">BaseDatalet</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">is</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'base-ajax-json-jsonpath-datalet'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></script></span></p><p class="c7"><span class="c0 c1"></dom-module></span></p><p class="c2"><span></span></p><p class="c7"><span>All components that import this one will include AjaxJsonJsonPathBehavior and JSONPath library. Since this Datalet handle JSON data, we use JSONPath (</span><span class="c17"><a class="c12" href="https://www.google.com/url?q=http://goessner.net/articles/JsonPath/&sa=D&usg=AFQjCNGOqQI4Dex9zLdrZuBzOrLQrcgPrw">http://goessner.net/articles/JsonPath/</a></span><span>) to select specific fields from entire dataset (an example of query is $.result.records..Supplier $.result.records..Amount). For a new datatype a new behavior and new way to select the fields should be provided.</span></p><h3 class="c7 c26"><a name="h.5kn6d9gehrxp"></a><span class="c28 c20">Highcharts component</span></h3><p class="c2"><span class="c20 c52"></span></p><p class="c7"><span>The component we’ll present in this section include Highcharts javascript library (</span><span class="c17"><a class="c12" href="https://www.google.com/url?q=http://www.highcharts.com/&sa=D&usg=AFQjCNGff99OZ7OOqXVqP6dPX0ZQRv8QJw">http://www.highcharts.com/</a></span><span>) to visualize data in a several type of charts.</span></p><p class="c7"><span>Since all selected example charts use the same way to select the data to build the categories and series objects, we built a super Highchart component which all our specific chart datalet will “extend” in order to share the selection mechanism.</span></p><p class="c7"><span> </span></p><p class="c7"><span class="c0 c1"><link</span><span class="c0"> </span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">"import"</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html"></span></p><p class="c2"><span class="c0"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1"><dom-module</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"highcharts-datalet"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><div</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"container"</span><span class="c0"> </span><span class="c0 c3">style</span><span class="c0 c4">=</span><span class="c0 c14">"</span><span class="c0">width</span><span class="c0 c4">:</span><span class="c0 c1">auto</span><span class="c0 c4">;</span><span class="c0"> height</span><span class="c0 c4">:</span><span class="c0 c1">auto</span><span class="c0 c4">;</span><span class="c0 c14">"</span><span class="c0 c1">></div></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><base-ajax-json-jsonpath-datalet</span><span class="c0"> </span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">"{{dataUrl}}"</span><span class="c0"> </span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">"{{fields}}"</span><span class="c0 c1">></base-ajax-json-jsonpath-datalet></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></template></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"static/js/highcharts.js"</span><span class="c0 c1">></script></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"static/js/exporting.js"</span><span class="c0 c1">></script></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">HighchartsBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> properties</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> categories</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">Array,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">[]</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> series</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">Array,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">[]</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> series_type</span><span class="c0 c4">:{</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">String,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">"line"</span><span class="c0 c24">//spline,time</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Populate</span><span class="c0"> the categories </span><span class="c0 c1">and</span><span class="c0"> the series array.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> transformData</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@param</span><span class="c0"> </span><span class="c0 c4">{</span><span class="c0 c3">Event</span><span class="c0 c4">}</span><span class="c0"> e</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> transformData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0"> </span><span class="c0 c4">()</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">categories</span><span class="c0 c4">.</span><span class="c0">value </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0 c6">0</span><span class="c0 c4">].</span><span class="c0">data;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">for</span><span class="c0"> </span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0"> i </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c6">1</span><span class="c0 c4">;</span><span class="c0"> i </span><span class="c0 c4"><</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">length</span><span class="c0 c4">;</span><span class="c0"> i</span><span class="c0 c4">++)</span></p><p class="c7"><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0">i</span><span class="c0 c4">].</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">every</span><span class="c0 c4">(</span><span class="c0 c1">function</span><span class="c0"> </span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">,</span><span class="c0"> index</span><span class="c0 c4">,</span><span class="c0"> array</span><span class="c0 c4">)</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">try</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">// TODO fix this parsing mechanism</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">(</span><span class="c0">isNaN</span><span class="c0 c4">(</span><span class="c0">parseFloat</span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">)))</span><span class="c0"> </span><span class="c0 c4">?</span><span class="c0"> array</span><span class="c0 c4">[</span><span class="c0">index</span><span class="c0 c4">]</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> parseFloat</span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">.</span><span class="c0">match</span><span class="c0 c4">(</span><span class="c0 c14">/[0-9]+/</span><span class="c0">g</span><span class="c0 c4">).</span><span class="c0">join</span><span class="c0 c4">(</span><span class="c0 c14">"."</span><span class="c0 c4">))</span><span class="c0"> :</span></p><p class="c7"><span class="c0"> array</span><span class="c0 c4">[</span><span class="c0">index</span><span class="c0 c4">]</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> parseFloat</span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">}</span><span class="c0 c1">catch</span><span class="c0 c4">(</span><span class="c0">e</span><span class="c0 c4">){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">//console.log("Parsing data error. Highchart-datalet.selectData");</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">return</span><span class="c0"> </span><span class="c0 c1">true;</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">series</span><span class="c0 c4">.</span><span class="c0">value</span><span class="c0 c4">.</span><span class="c0">push</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0">i</span><span class="c0 c4">]);</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">};</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> $</span><span class="c0 c4">.</span><span class="c0">extend</span><span class="c0 c4">(</span><span class="c0 c1">true</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c4">{},</span><span class="c0"> </span><span class="c0 c3">BaseDataletBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">WorkcycleBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">AjaxJsonJsonPathBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">HighchartsBehavior</span><span class="c0 c4">);</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">HighchartsDatalet</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">is</span><span class="c0"> </span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'highcharts-datalet'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></script></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1"></dom-module></span></p><p class="c2"><span class="c32"></span></p><p class="c2"><span class="c32"></span></p><p class="c7"><span>First we have to import the base-ajax-json-jsonpath-datalet, in order to extend its behavior and include its DOM:</span></p><p class="c2"><span class="c32"></span></p><p class="c7"><span class="c0 c1"><link</span><span class="c0"> </span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">"import"</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"../base-datalet/base-datalet.html"></span></p><p class="c2"><span class="c35 c34"></span></p><p class="c2"><span class="c35 c34"></span></p><p class="c7"><span>In the template section (the DOM part of our new datalet) we include the superclass DOM (as footer) and create a div as placeholder for chart object. </span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c1"><template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><div</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"container"</span><span class="c0"> </span><span class="c0 c3">style</span><span class="c0 c4">=</span><span class="c0 c14">"</span><span class="c0">width</span><span class="c0 c4">:</span><span class="c0 c1">auto</span><span class="c0 c4">;</span><span class="c0"> height</span><span class="c0 c4">:</span><span class="c0 c1">auto</span><span class="c0 c4">;</span><span class="c0 c14">"</span><span class="c0 c1">></div></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><base-ajax-json-jsonpath-datalet</span><span class="c0"> </span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">"{{dataUrl}}"</span><span class="c0"> </span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">"{{fields}}"</span><span class="c0 c1">></base-ajax-json-jsonpath-datalet></span></p><p class="c7"><span class="c0 c1"></template></span></p><p class="c2"><span class="c32"></span></p><p class="c7"><span> </span></p><p class="c7"><span>At this point we include the Highchart javascript library used by all chart datalets which use Highchart as visualization library.</span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c1"><script</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"static/js/highcharts.js"</span><span class="c0 c1">></script></span></p><p class="c7"><span class="c0 c1"><script</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"static/js/exporting.js"</span><span class="c0 c1">></script></span></p><p class="c2"><span class="c32"></span></p><p class="c2"><span class="c34 c35"></span></p><p class="c7"><span>Now we define a new behavior with all attribute that the specialized chart datalets can share (</span><span class="c8">categories</span><span> and </span><span class="c8">series</span><span>) and the implementation of a selection method. </span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">HighchartsBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> properties</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> categories</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">Array,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">[]</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> series</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">Array,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">[]</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> series_type</span><span class="c0 c4">:{</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c3">String,</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">"line"</span><span class="c0 c24">//spline,time</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Populate</span><span class="c0"> the categories </span><span class="c0 c1">and</span><span class="c0"> the series array.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> transformData</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@param</span><span class="c0"> </span><span class="c0 c4">{</span><span class="c0 c3">Event</span><span class="c0 c4">}</span><span class="c0"> e</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> transformData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0"> </span><span class="c0 c4">()</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">categories</span><span class="c0 c4">.</span><span class="c0">value </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0 c6">0</span><span class="c0 c4">].</span><span class="c0">data;</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">for</span><span class="c0"> </span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0"> i </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c6">1</span><span class="c0 c4">;</span><span class="c0"> i </span><span class="c0 c4"><</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">length</span><span class="c0 c4">;</span><span class="c0"> i</span><span class="c0 c4">++)</span></p><p class="c7"><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0">i</span><span class="c0 c4">].</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">every</span><span class="c0 c4">(</span><span class="c0 c1">function</span><span class="c0"> </span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">,</span><span class="c0"> index</span><span class="c0 c4">,</span><span class="c0"> array</span><span class="c0 c4">)</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">try</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">// TODO fix this parsing mechanism</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">(</span><span class="c0">isNaN</span><span class="c0 c4">(</span><span class="c0">parseFloat</span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">)))</span><span class="c0"> </span><span class="c0 c4">?</span><span class="c0"> array</span><span class="c0 c4">[</span><span class="c0">index</span><span class="c0 c4">]</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> parseFloat</span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">.</span><span class="c0">match</span><span class="c0 c4">(</span><span class="c0 c14">/[0-9]+/</span><span class="c0">g</span><span class="c0 c4">).</span><span class="c0">join</span><span class="c0 c4">(</span><span class="c0 c14">"."</span><span class="c0 c4">))</span><span class="c0"> :</span></p><p class="c7"><span class="c0"> array</span><span class="c0 c4">[</span><span class="c0">index</span><span class="c0 c4">]</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> parseFloat</span><span class="c0 c4">(</span><span class="c0">element</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">}</span><span class="c0 c1">catch</span><span class="c0 c4">(</span><span class="c0">e</span><span class="c0 c4">){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">//console.log("Parsing data error. Highchart-datalet.selectData");</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">return</span><span class="c0"> </span><span class="c0 c1">true;</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">series</span><span class="c0 c4">.</span><span class="c0">value</span><span class="c0 c4">.</span><span class="c0">push</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0">i</span><span class="c0 c4">]);</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0 c4">};</span></p><p class="c2"><span class="c34 c48"></span></p><p class="c7"><span>We are overriding the </span><span class="c8">transformData </span><span>method of </span><span class="c8">WorkcycleBehavior </span><span>so to access to </span><span class="c8">data attribute</span><span> we have to use the reference to the Polymer component (</span><span class="c8">this._component</span><span>). This reference will be set by the final component that implements all workcycle (that visualize the chart in our example), as we will show you later. As you can notice in the </span><span class="c8">transformData </span><span>function we can access to </span><span class="c8">json_results </span><span>attribute defined in the Behavior that implements the communication channel.</span></p><p class="c7"><span>After defined the Behavior for Highchart component we have to extend it to include the BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior to crate a new behavior specific for our new Datalet. The order of the extension is crucial (see JQuery $.extend docs). </span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> $</span><span class="c0 c4">.</span><span class="c0">extend</span><span class="c0 c4">(</span><span class="c0 c1">true</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c4">{},</span><span class="c0"> </span><span class="c0 c3">BaseDataletBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">WorkcycleBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">AjaxJsonJsonPathBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">HighchartsBehavior</span><span class="c0 c4">);</span></p><p class="c2"><span class="c22"></span></p><p class="c2"><span></span></p><p class="c7"><span>The last thing to do is to create the Polymer javascript object.</span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c3">HighchartsDatalet</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">is</span><span class="c0"> </span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'highcharts-datalet'</span></p><p class="c7"><span class="c0 c4">});</span></p><p class="c2"><span class="c49 c34"></span></p><p class="c2"><span></span></p><h3 class="c7 c26"><a name="h.ns7fynbyet5s"></a><span class="c28 c20">Linechart datalet</span></h3><p class="c2"><span></span></p><p class="c7"><span>The linechart-datalet will use the highchart-component to visualize a linechart. To do this we override the </span><span class="c8">presentData </span><span>method, in a new behavior(</span><span class="c8">LinechartBehavior</span><span>), in order to use the categories and series attributes, generated by “super class”, to build the chart.</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1"><link</span><span class="c0"> </span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">"import"</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"../highcharts-datalet/highcharts-datalet.html"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1"><dom-module</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"linechart-datalet"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><highcharts-datalet</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"charts"</span><span class="c0"> </span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">"{{dataUrl}}"</span><span class="c0"> </span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">"{{fields}}"</span><span class="c0 c1">></highcharts-datalet></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">LinechartBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Bluid</span><span class="c0"> </span><span class="c0 c3">Highchart</span><span class="c0"> </span><span class="c0 c1">object</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> presentData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> presentData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> $</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">$</span><span class="c0 c4">.</span><span class="c0">charts</span><span class="c0 c4">.</span><span class="c0">$</span><span class="c0 c4">.</span><span class="c0">container</span><span class="c0 c4">).</span><span class="c0">highcharts</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> title</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> text</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'Line chart'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> chart</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> zoomType</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'xy'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> xAxis</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> categories</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">categories</span><span class="c0 c4">.</span><span class="c0">value</span><span class="c0 c4">,</span><span class="c0 c24">//this._component.categories,</span></p><p class="c7"><span class="c0"> title</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> text</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">null</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> yAxis</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> title</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> text</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'Units'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> plotLines</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">[{</span></p><p class="c7"><span class="c0"> value</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">0,</span></p><p class="c7"><span class="c0"> width</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">1,</span></p><p class="c7"><span class="c0"> color</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'#808080'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">}]</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> tooltip</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> valueSuffix</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">' units'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> legend</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> layout</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'vertical',</span></p><p class="c7"><span class="c0"> align</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'right',</span></p><p class="c7"><span class="c0"> verticalAlign</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'top',</span></p><p class="c7"><span class="c0"> x</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">-</span><span class="c0 c6">40,</span></p><p class="c7"><span class="c0"> y</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">100,</span></p><p class="c7"><span class="c0"> floating</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">true,</span></p><p class="c7"><span class="c0"> borderWidth</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">1,</span></p><p class="c7"><span class="c0"> backgroundColor</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">((</span><span class="c0 c3">Highcharts</span><span class="c0 c4">.</span><span class="c0">theme </span><span class="c0 c4">&&</span><span class="c0"> </span><span class="c0 c3">Highcharts</span><span class="c0 c4">.</span><span class="c0">theme</span><span class="c0 c4">.</span><span class="c0">legendBackgroundColor</span><span class="c0 c4">)</span><span class="c0"> </span><span class="c0 c4">||</span><span class="c0"> </span><span class="c0 c14">'#FFFFFF'</span><span class="c0 c4">),</span></p><p class="c7"><span class="c0"> shadow</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">true</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> credits</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> enabled</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">false</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> series</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">series</span><span class="c0 c4">.</span><span class="c0">value</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">};</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">LinechartDatalet</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">is</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'linechart-datalet',</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c14">'ready'</span><span class="c0"> callback extend the </span><span class="c0 c3">LinechartComponentBehavior</span><span class="c0"> </span><span class="c0 c1">with</span><span class="c0"> </span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0"> </span><span class="c0 c1">and</span><span class="c0"> </span><span class="c0 c3">LinechartBehavior</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c1">and</span><span class="c0"> run the </span><span class="c0 c3">Datalet</span><span class="c0"> workcycle.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> ready</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> ready</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">LinechartComponentBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> $</span><span class="c0 c4">.</span><span class="c0">extend</span><span class="c0 c4">(</span><span class="c0 c1">true</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c4">{},</span><span class="c0"> </span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">LinechartBehavior</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">LinechartComponentBehavior</span><span class="c0 c4">.</span><span class="c0">init</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></script></span></p><p class="c7"><span class="c0 c1"></dom-module></span></p><p class="c7"><span> </span></p><p class="c7"><span>After creating the main component behavior (</span><span class="c8">LinechartComponentBehavior</span><span>) extending the </span><span class="c8">HighchartComponentBehavior </span><span>previously created, we have to initialize it by passing the reference to Polymer object associated to linechart-datalet. We do it in the </span><span class="c8">ready </span><span>handler of Polymer object.</span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c3">LinechartDatalet</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">is</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'linechart-datalet',</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c14">'ready'</span><span class="c0"> callback extend the </span><span class="c0 c3">LinechartComponentBehavior</span><span class="c0"> </span><span class="c0 c1">with</span><span class="c0"> </span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0"> </span><span class="c0 c1">and</span><span class="c0"> </span><span class="c0 c3">LinechartBehavior</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c1">and</span><span class="c0"> run the </span><span class="c0 c3">Datalet</span><span class="c0"> workcycle.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> ready</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> ready</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">LinechartComponentBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> $</span><span class="c0 c4">.</span><span class="c0">extend</span><span class="c0 c4">(</span><span class="c0 c1">true</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c4">{},</span><span class="c0"> </span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">LinechartBehavior</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">LinechartComponentBehavior</span><span class="c0 c4">.</span><span class="c0">init</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0 c4">});</span></p><p class="c2"><span class="c34 c49"></span></p><p class="c2"><span></span></p><p class="c7"><span>The ready handler define a </span><span class="c45">lifecycle callback invoked when all local DOM children of this element have been created and "configured" with data bound from this element, attribute values, or defaults.</span></p><p class="c7"><span class="c45">The base behavior will use this reference to get information from the Polymer component like passed attributes, DOM, etc.</span></p><p class="c7"><span class="c45"> </span></p><p class="c7"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 624.00px; height: 322.67px;"><img alt="" src="images/image02.png" style="width: 624.00px; height: 322.67px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c2"><span></span></p><p class="c2"><span></span></p><p class="c2"><span></span></p><h3 class="c7 c26"><a name="h.ve1g902t8v"></a><span class="c28 c20">Barchart datalet</span></h3><p class="c2"><span></span></p><p class="c7"><span>The barchart-datalet will use the highchart-datalet to visualize a barchart. </span></p><p class="c2"><span class="c34 c46"></span></p><p class="c7"><span class="c0 c1"><link</span><span class="c0"> </span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">"import"</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"../highcharts-datalet/highcharts-datalet.html"></span></p><p class="c2"><span class="c0"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1"><dom-module</span><span class="c0"> </span><span class="c0 c3">name</span><span class="c0 c4">=</span><span class="c0 c14">"barchart-datalet"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><highcharts-datalet</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"charts"</span><span class="c0"> </span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">"{{dataUrl}}"</span><span class="c0"> </span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">"{{fields}}"</span><span class="c0 c1">></highcharts-datalet></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">BarchartBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c3">Bluid</span><span class="c0"> </span><span class="c0 c3">Highchart</span><span class="c0"> </span><span class="c0 c1">object</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> transformData</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> presentData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> $</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">$</span><span class="c0 c4">.</span><span class="c0">charts</span><span class="c0 c4">.</span><span class="c0">$</span><span class="c0 c4">.</span><span class="c0">container</span><span class="c0 c4">).</span><span class="c0">highcharts</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> chart</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> type</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'bar',</span></p><p class="c7"><span class="c0"> zoomType</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'xy'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> title</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> text</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'Bar chart'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> xAxis</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> categories</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">categories</span><span class="c0 c4">.</span><span class="c0">value,</span></p><p class="c7"><span class="c0"> title</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> text</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">null</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> yAxis</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> min</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">0,</span></p><p class="c7"><span class="c0"> title</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> text</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'Foreclosure (units)',</span></p><p class="c7"><span class="c0"> align</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'high'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> labels</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> overflow</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'justify'</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> tooltip</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> valueSuffix</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">' units'</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> plotOptions</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> bar</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> dataLabels</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> enabled</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">true</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> legend</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> layout</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'vertical',</span></p><p class="c7"><span class="c0"> align</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'right',</span></p><p class="c7"><span class="c0"> verticalAlign</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'top',</span></p><p class="c7"><span class="c0"> x</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">-</span><span class="c0 c6">40,</span></p><p class="c7"><span class="c0"> y</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">100,</span></p><p class="c7"><span class="c0"> floating</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">true,</span></p><p class="c7"><span class="c0"> borderWidth</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c6">1,</span></p><p class="c7"><span class="c0"> backgroundColor</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c4">((</span><span class="c0 c3">Highcharts</span><span class="c0 c4">.</span><span class="c0">theme </span><span class="c0 c4">&&</span><span class="c0"> </span><span class="c0 c3">Highcharts</span><span class="c0 c4">.</span><span class="c0">theme</span><span class="c0 c4">.</span><span class="c0">legendBackgroundColor</span><span class="c0 c4">)</span><span class="c0"> </span><span class="c0 c4">||</span><span class="c0"> </span><span class="c0 c14">'#FFFFFF'</span><span class="c0 c4">),</span></p><p class="c7"><span class="c0"> shadow</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">true</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> credits</span><span class="c0 c4">:</span><span class="c0"> {</span></p><p class="c7"><span class="c0"> enabled</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">false</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">},</span></p><p class="c7"><span class="c0"> series</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">properties</span><span class="c0 c4">.</span><span class="c0">series</span><span class="c0 c4">.</span><span class="c0">value</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">};</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">BarchartDatalet</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">is</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'barchart-datalet',</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c24">/**</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c14">'ready'</span><span class="c0"> callback extend the </span><span class="c0 c3">BarchartComponentBehavior</span><span class="c0"> </span><span class="c0 c1">with</span><span class="c0"> </span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0"> </span><span class="c0 c1">and</span><span class="c0"> </span><span class="c0 c3">BarchartBehavior</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c1">and</span><span class="c0"> run the </span><span class="c0 c3">Datalet</span><span class="c0"> workcycle.</span></p><p class="c7"><span class="c0"> *</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*</span><span class="c0"> </span><span class="c0 c6">@method</span><span class="c0"> ready</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">*/</span></p><p class="c7"><span class="c0"> ready</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">BarchartComponentBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> $</span><span class="c0 c4">.</span><span class="c0">extend</span><span class="c0 c4">(</span><span class="c0 c1">true</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c4">{},</span><span class="c0"> </span><span class="c0 c3">HighchartsComponentBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">BarchartBehavior</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">BarchartComponentBehavior</span><span class="c0 c4">.</span><span class="c0">init</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></script></span></p><p class="c7"><span class="c0 c1"></dom-module></span></p><p class="c2"><span class="c32"></span></p><p class="c7"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 624.00px; height: 324.00px;"><img alt="" src="images/image01.png" style="width: 624.00px; height: 324.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c2"><span></span></p><h3 class="c7 c26 c56"><a name="h.4krgu9mab6k2"></a></h3><h2 class="c7 c18"><a name="h.l8rhx6bh9kf"></a><span class="c21 c20">Datatable-datalet</span></h2><p class="c2"><span></span></p><p class="c7"><span>To be more complete we present another example of datalet that is slightly different from previous ones: a table based datalet which use Datatables javascript library (</span><span class="c17"><a class="c12" href="https://www.google.com/url?q=https://www.datatables.net/&sa=D&usg=AFQjCNE6nKMIs1fA5sz4RDBfC7IHuWpY5w">https://www.datatables.net/</a></span><span>) to render a table. The main difference is that datatable-datalet component has a dynamic DOM built according to the size of data.</span></p><p class="c2"><span></span></p><p class="c7"><span class="c0 c1"><link</span><span class="c0"> </span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">"import"</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0 c1"><dom-module</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"datatable-datalet"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><template></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><link</span><span class="c0"> </span><span class="c0 c3">rel</span><span class="c0 c4">=</span><span class="c0 c14">"stylesheet"</span><span class="c0"> </span><span class="c0 c3">href</span><span class="c0 c4">=</span><span class="c0 c14">"js/DataTables-master/media/css/jquery.dataTables.min.css"></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><table</span><span class="c0"> </span><span class="c0 c3">id</span><span class="c0 c4">=</span><span class="c0 c14">"datatable"</span><span class="c0"> </span><span class="c0 c3">class</span><span class="c0 c4">=</span><span class="c0 c14">"table table-striped table-bordered"</span><span class="c0"> </span><span class="c0 c3">cellspacing</span><span class="c0 c4">=</span><span class="c0 c14">"0"</span><span class="c0"> </span><span class="c0 c3">style</span><span class="c0 c4">=</span><span class="c0 c14">"</span><span class="c0">height</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">auto</span><span class="c0 c4">;</span><span class="c0"> width</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">auto</span><span class="c0 c4">;</span><span class="c0 c14">"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></table></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><base-ajax-json-jsonpath-datalet</span><span class="c0"> </span><span class="c0 c3">data-url</span><span class="c0 c4">=</span><span class="c0 c14">"{{dataUrl}}"</span><span class="c0"> </span><span class="c0 c3">fields</span><span class="c0 c4">=</span><span class="c0 c14">"{{fields}}"</span><span class="c0 c1">></base-ajax-json-jsonpath-datalet></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></template></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script</span><span class="c0"> </span><span class="c0 c3">src</span><span class="c0 c4">=</span><span class="c0 c14">"js/DataTables-master/media/js/jquery.dataTables.js"</span><span class="c0 c1">></script></span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><script></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">DatatableBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> {</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> presentData</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">if</span><span class="c0 c4">(!</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data </span><span class="c0 c4">||</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data </span><span class="c0 c4">==</span><span class="c0"> </span><span class="c0 c1">undefined</span><span class="c0 c4">)</span><span class="c0"> </span><span class="c0 c1">return;</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c14">"";</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'<thead>'+</span></p><p class="c7"><span class="c0"> </span><span class="c0 c14">'<tr>';</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0"> x </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c6">0</span><span class="c0 c4">;</span><span class="c0"> x</span><span class="c0 c4"><</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">length</span><span class="c0 c4">;</span><span class="c0"> x</span><span class="c0 c4">++){</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'<th>'</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0">x</span><span class="c0 c4">].</span><span class="c0">name </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c14">'</th>';</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'</tr>'</span><span class="c0"> +</span></p><p class="c7"><span class="c0"> </span><span class="c0 c14">'</thead>'</span><span class="c0"> +</span></p><p class="c7"><span class="c0"> </span><span class="c0 c14">'<tfoot>'</span><span class="c0"> +</span></p><p class="c7"><span class="c0"> </span><span class="c0 c14">'<tr>';</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0"> x </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c6">0</span><span class="c0 c4">;</span><span class="c0"> x</span><span class="c0 c4"><</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">length</span><span class="c0 c4">;</span><span class="c0"> x</span><span class="c0 c4">++){</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'<th>'</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0">x</span><span class="c0 c4">].</span><span class="c0">name </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c14">'</th>';</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'</tr>'</span><span class="c0"> +</span></p><p class="c7"><span class="c0"> </span><span class="c0 c14">'</tfoot>'</span><span class="c0"> +</span></p><p class="c7"><span class="c0"> </span><span class="c0 c14">'<tbody>';</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0"> i </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c6">0</span><span class="c0 c4">;</span><span class="c0"> i</span><span class="c0 c4"><</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0 c6">0</span><span class="c0 c4">].</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">length</span><span class="c0 c4">;</span><span class="c0"> i</span><span class="c0 c4">++){</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'<tr>';</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">for</span><span class="c0 c4">(</span><span class="c0 c1">var</span><span class="c0"> x </span><span class="c0 c4">=</span><span class="c0"> </span><span class="c0 c6">0</span><span class="c0 c4">;</span><span class="c0"> x</span><span class="c0 c4"><</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">.</span><span class="c0">length</span><span class="c0 c4">;</span><span class="c0"> x</span><span class="c0 c4">++){</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'<td>'</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0">x</span><span class="c0 c4">].</span><span class="c0">data</span><span class="c0 c4">[</span><span class="c0">i</span><span class="c0 c4">]</span><span class="c0"> </span><span class="c0 c4">+</span><span class="c0"> </span><span class="c0 c14">'</td>';</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'</tr>';</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> html </span><span class="c0 c4">+=</span><span class="c0"> </span><span class="c0 c14">'</tbody>';</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> $</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">$</span><span class="c0 c4">.</span><span class="c0">datatable</span><span class="c0 c4">).</span><span class="c0">append</span><span class="c0 c4">(</span><span class="c0">html</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> $</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">.</span><span class="c0">_component</span><span class="c0 c4">.</span><span class="c0">$</span><span class="c0 c4">.</span><span class="c0">datatable</span><span class="c0 c4">).</span><span class="c0 c3">DataTable</span><span class="c0 c4">();</span></p><p class="c7"><span class="c0"> }</span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">};</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">Polymer</span><span class="c0 c4">({</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">is</span><span class="c0"> </span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c14">'datatable-datalet'</span><span class="c0"> ,</span></p><p class="c7"><span class="c0"> ready</span><span class="c0 c4">:</span><span class="c0"> </span><span class="c0 c1">function</span><span class="c0 c4">(){</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1">var</span><span class="c0"> </span><span class="c0 c3">DatatableComponentBehavior</span><span class="c0"> </span><span class="c0 c4">=</span><span class="c0"> $</span><span class="c0 c4">.</span><span class="c0">extend</span><span class="c0 c4">(</span><span class="c0 c1">true</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c4">{},</span><span class="c0"> </span><span class="c0 c3">BaseDataletBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">WorkcycleBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">AjaxJsonJsonPathBehavior</span><span class="c0 c4">,</span><span class="c0"> </span><span class="c0 c3">DatatableBehavior</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> </span><span class="c0 c3">DatatableComponentBehavior</span><span class="c0 c4">.</span><span class="c0">init</span><span class="c0 c4">(</span><span class="c0 c1">this</span><span class="c0 c4">);</span></p><p class="c7"><span class="c0"> }</span></p><p class="c2"><span class="c0"></span></p><p class="c7"><span class="c0"> </span><span class="c0 c4">});</span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></script></span></p><p class="c7"><span class="c0 c1"></dom-module></span></p><h2 class="c7 c18"><a name="h.p6eipyeci0pi"></a><span class="c21 c20">Component documentation</span></h2><p class="c2"><span class="c20 c52"></span></p><p class="c7"><span>To document a web component you can use a </span><span class="c8">iron-component-page </span><span>polymer component(https://elements.polymer-project.org/elements/iron-component-page). Each component must be documented to make DEEP able to give information about available components and their usage.</span></p><p class="c7"><span>Documentation can be encoded into html comments (<!-- ... -->) or using JsDoc notation (/** ... */). Markdown format is supported.</span></p><p class="c7"><span>Once you have properly commented the code to include the new component (datalet or controllet) to documentation you have to add the component path to source attribute.</span></p><p class="c2"><span></span></p><h2 class="c7 c18"><a name="h.hchmkvzcaha3"></a><span class="c21 c20">Deploy a new component</span></h2><p class="c2"><span class="c20"></span></p><p class="c7"><span>To deploy a new component we have to :</span></p><p class="c2"><span></span></p><ul class="c31 lst-kix_xpt451iyqej1-0 start"><li class="c7 c10"><span>Upload the new component (html, javascripts and stylesheets) in /COMPONENTS/</span><span class="c20">type-of-component</span><span>{datalets/controllets}/</span><span class="c20">name-of-component</span><span> directory. For instance if you have created a </span><span class="c8">my-datalet </span><span>component you have to copy it in</span><span class="c8"> /COMPONENTS/datalets/my-datales/my-datalets-file</span><span>(html, js, css). </span></li><li class="c7 c10"><span>Add a component tag in xml file located in DEEP project: datalets.xml, for a new datalet, controllets.xml, for a new controllet. For instance if you created </span><span class="c8">my-datalet</span><span> component you have to add to datalets.xml the follow snippet:</span></li></ul><p class="c2"><span></span></p><p class="c7"><span class="c0 c1"><component></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><name></span><span class="c0">barchart-datalet</span><span class="c0 c1"></name></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><attributes></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><attribute></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><name></span><span class="c0">data-url</span><span class="c0 c1"></name></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></attribute></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><attribute></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><name></span><span class="c0">query</span><span class="c0 c1"></name></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></attribute></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></attributes></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><idm></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><inputs></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><input></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><name></span><span class="c0">Categories</span><span class="c0 c1"></name></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><description></span><span class="c0">The chart categories. Its values will be put in the horizontal axis. You need one value for each series.</span><span class="c0 c1"></description></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><scale></span><span class="c0">nominal</span><span class="c0 c1"></scale></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><role></span><span class="c0">domain</span><span class="c0 c1"></role></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><selection></span><span class="c0">11</span><span class="c0 c1"></selection></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></input></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><input></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><name></span><span class="c0">Series</span><span class="c0 c1"></name></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><description></span><span class="c0">The chart series. Its values will be put in the vertical axis.</span><span class="c0 c1"></description></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><scale></span><span class="c0">nominal</span><span class="c0 c1"></scale></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><role></span><span class="c0">domain</span><span class="c0 c1"></role></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><selection></span><span class="c0">11</span><span class="c0 c1"></selection></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></input></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><layouts></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><input></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"><name></span><span class="c0">x-axis-label</span><span class="c0 c1"></name></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></input></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></layouts></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></inputs></span></p><p class="c7"><span class="c0"> </span><span class="c0 c1"></idm></span></p><p class="c7"><span class="c0 c1"></component></span></p><p class="c2"><span class="c0 c1"></span></p><p class="c2 c23"><span class="c32"></span></p><p class="c7"><span>You should expose all attributes (adding attributes tags) in order to make the DEEP able to give this information when your component will be requested. </span></p><h1 class="c7 c18"><a name="h.j1ju11botx5f"></a><span class="c30">MISC</span></h1><h2 class="c7 c18"><a name="h.lj7afoxzjwpx"></a><span class="c20 c33">Integrated Development Environment: phpStorm</span></h2><p class="c7"><span>As an Integrated Development Environment (IDE) for PHP and web component, </span><span class="c8">JetBrains Phpstorm </span><span>(</span><span class="c17"><a class="c12" href="https://www.google.com/url?q=https://www.jetbrains.com/phpstorm/&sa=D&usg=AFQjCNEFja53k_-6LipN1wDXc50cD6czpw">https://www.jetbrains.com/phpstorm/</a></span><span> ) has been chosen, but any other ide can be used. PhpStorm provides an editor as support for PHP, HTML, Javascript, CSS and many other languages. </span></p><h2 class="c7 c18"><a name="h.dj5v4msbbn4q"></a><span class="c21 c20">Useful Links</span></h2><p class="c2"><span></span></p><a href="#" name="a37771d9fdc78727aa7a964cfa21f98ee39440b1"></a><a href="#" name="0"></a><table cellpadding="0" cellspacing="0" class="c59"><tbody><tr class="c15"><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span class="c47 c20 c5">Description</span></p></td><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span class="c47 c20 c5">Link</span></p></td></tr><tr class="c15"><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span>Web Components</span></p></td><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span class="c17 c20"><a class="c12" href="https://www.google.com/url?q=http://webcomponents.org/&sa=D&usg=AFQjCNEXztPINwsn6FIolcu896CfGQRIYA">http://webcomponents.org/</a></span><span class="c47 c20 c5"> </span></p></td></tr><tr class="c15"><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span class="c16 c5">Polymer</span></p></td><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span class="c17"><a class="c12" href="https://www.google.com/url?q=https://www.polymer-project.org/1.0/&sa=D&usg=AFQjCNFlxPkCpKMiguvzlQy1HZn5v-2LGQ">https://www.polymer-project.org/1.0/</a></span><span class="c16 c5"> </span></p></td></tr><tr class="c15"><td class="c9" colspan="1" rowspan="1"><p class="c7 c41"><span class="c16 c5">Google Web Component: a collection of web component for Google APIs, built with Polymer</span></p></td><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span class="c17"><a class="c12" href="https://www.google.com/url?q=https://googlewebcomponents.github.io/&sa=D&usg=AFQjCNEqNNdAtF8iltMOlckek-14C97pYQ">https://googlewebcomponents.github.io/</a></span><span class="c16 c5"> </span></p></td></tr><tr class="c15"><td class="c9" colspan="1" rowspan="1"><p class="c55 c7"><span class="c16 c5">Web Components Current Status</span></p><p class="c2 c41"><span class="c16 c5"></span></p></td><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span class="c17"><a class="c12" href="https://www.google.com/url?q=http://www.w3.org/standards/techs/components%23w3c_all&sa=D&usg=AFQjCNFhZyfEvNeFHc1IZSi2ejRauhat-w">http://www.w3.org/standards/techs/components#w3c_all</a></span></p></td></tr><tr class="c15"><td class="c9" colspan="1" rowspan="1"><p class="c7 c55"><span class="c5 c16">Introduction to Web Components</span></p><h1 class="c7 c18 c43"><a name="h.mlmwy1tv4rs3"></a></h1></td><td class="c9" colspan="1" rowspan="1"><p class="c41 c7"><span class="c17"><a class="c12" href="https://www.google.com/url?q=http://www.w3.org/TR/components-intro/&sa=D&usg=AFQjCNGTGtqk71CcDN1m_cXzmI3juKxK1Q">http://www.w3.org/TR/components-intro/</a></span></p></td></tr></tbody></table><p class="c2"><span></span></p><p class="c2"><span></span></p><p class="c2"><span></span></p><p class="c2"><span></span></p><p class="c2"><span></span></p></body></html>