broken

src/components/ping_pong/cert.pem

@@ -0,0 +1,18 @@
+-----BEGIN CERTIFICATE-----
+MIIC0DCCAbgCCQDwCB4gJQVLgjANBgkqhkiG9w0BAQsFADAqMSgwJgYJKoZIhvcN
+AQkBFhlydXNzZWxsamdhcm5lckBnb29nbGUuY29tMB4XDTIwMDUwNDIzMjc1NFoX
+DTIxMDUwNDIzMjc1NFowKjEoMCYGCSqGSIb3DQEJARYZcnVzc2VsbGpnYXJuZXJA
+Z29vZ2xlLmNvbTCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBALGGZhQ6
+mxskaRCnQlThZUsLVBvAU9PCxiOQGATmKnXuqJzxkEvp2HDuA9HZyh2tsd0RaZJS
+cuxz2dGXNGcQTRn2SmvN6O74oSAm58NtWrnbtP+zT/0sT7cDrPlV8ld7GNE2Nhh1
+2zHgrUlANr3isiK/veYxdM3iOZL0rke1Gp+t3nFoqHJ3oNx6LrhcvSnpjl7fy7fP
+Is6+fLTZFeItm/pjtbo/QVqR0eW+ER1q9jtZQ2pXE52gEewDIiZc6DCS+6Qg0lk7
+Tdj5+umiJUHbGaVyetssRg4TFACrFrq+0cjFAuKi/bHE/HsQRE4Nu+EQykKTh2Im
+rD2TmslpYbwjnJ0CAwEAATANBgkqhkiG9w0BAQsFAAOCAQEAoLCjHE93QljRjEvc
+XPKlqV+HngMjzCRGQ6KzREJDCrK7RhNFK2xB/YZLQB7SQRNgO+0CEV00slYGfULo
+O/UmCowvlI0eizf8hZ2Avoz+2z7LyNbR1rLo6aj1+vvrKbB8i5JYFiVZgWFQuq3v
+WPY5MAfViMTeKPld1Ot3Amh1jTvzo9Uua5QmUc996NpUdXYwv/x1Ws0ltdNDowao
+Rla7zbHw1yrWH/Ps+gAAF+SHdMfH172UuEWLtUErQoPGmkhqlVkDJsiYh+OblvNz
+kNHxBEcFXgFcNf1mEhSkTwv9NnZuTeYjFi+F5HAWHz3V0LQJ4XMvCI/ENzvl2IYa
+MOutvA==
+-----END CERTIFICATE-----

src/components/ping_pong/key.pem

@@ -0,0 +1,30 @@
+-----BEGIN ENCRYPTED PRIVATE KEY-----
+MIIFHzBJBgkqhkiG9w0BBQ0wPDAbBgkqhkiG9w0BBQwwDgQI/4tiIsiLJaQCAggA
+MB0GCWCGSAFlAwQBKgQQQDINIq2LodIwX8rxzhIWNwSCBNCg1lU0AvXlQ4IQBq32
+Fd89v9LW9w/clNohFwKQnKiWrdcVdJQkfj8ow26cNzSL9qOEqb8lJOTQ5s+/UrUj
+zZ5MOGccZOGVejc8Zdh5+5qQ8QM3JnVsIsU/U7nK4VabNadjRrMcyPsloISqYrbB
+salSO7by7SLEsDSiA7EMbfjuA1HMxNLknttcYfNjQH0T8v1nMFoyIW8/oO3r/IZe
+87Kbk0uahhELB54ic7Ib/4OOHxysZTvWizCcTX2778AYBuCvd0sY6YGtBviwLQEb
+XGfvuIocj/ZN81i2zR1o+jI0gMJlpq99p7Fv//4GrttMWKVG5BDUw+9AUYieIdoM
+Hmw/3ILHJD4DpiOGdJ233dodlsG5QsFjGAngStiQHerR1aoP0NqbTn3K/e70vlfM
+TASuU4xel8KxXAsFvWSePp7algQaWbFuFSYeQjEjW4nVXA/mWcVmOzzfa8EWWsA+
+2OM9N2EWrVDNvtEfENGilimbjWZMQMAeQybGDplZVCG0cyu9hkq4AXXptymEoNOo
+DIEWXC+3XBPjQVYTNrn+GazjmjcxigcoAcDGJCQJ5dtC7wpJPLR08whzdcEz+hQ6
+lpuc5yHgTe8wVd5+mUqzeAtil8W9f8GDgLsddS2XPmPBRf2RCPCXFyxNPNnxEtHE
+kvaUVqHq7/Xu4zK6dAEJMlDNEurJanTScssQ7UIdWhOFOSvIKIfojaogGfsGMwnW
+0ycvWnzvEYVefJTVmBzImGoA7ysuTCWY7wCnEcwIEbn2eqKOmL+t2rJ+L37Zni01
+3l6FsigpsNFPqVVNfJ5otkz3e9tgNlItVrJBn2Zjpjxd7WKIh1EebcMV2uEUb07a
+WJWZv/jVLo9GSOUiZ1kV4Vx7AjBeKAApp5XlH9vW2tX7H/ShDoTNt6q1u3wlvpn/
+2xJ6/ABaBG0uDTiTOiXrPUCommkvuiRAqbaJ+AE4C1Nwak47JnkfZe6kQEUnGiYD
+/cuJwEMakgH6gPN4yuLTdetXs1Khchm2wJLv6/VdE06xPfPG3cTQDe06IGnVtFms
+gJGgmyBcjzCKn4Ex6n71FoDff4t5kkxvQsM7Mo62RtwuXcMBL3USU27OoP+j6fPo
+pco+qzsDdYHu/E1H+0XO6F99zADqNb1vLgKc3Yrubg7me7u3fsUJaSWur+pIg25t
+cUzs/MsNM+7MVQYo9BBmF64SkGoTeJ4lvqU6jLMIIVO+gcY3cP6RVZlzH616Ikyg
+Eh2T/8NJzdgZj2s7wGu/t7RgJUhuDpWwHt6sANRftiaKm0JPusFy/CH+MbmnogLw
+cm7amkAp8RhO45g4jeNUIcbQWLU5KzvjpFHkUe5HCZILee/yGkPVdV1ySAIiPiL+
+oi6yMPfUolnIoh2nu3mcmrvp7aqVVFg5Sa0/5tBdF6o0P+Jh+B8GVvslW2fOqhA9
+ZlSUPf439L+nA88J5MdPRndn+dwftVHoTNaBG/dgF8Ur2XwPwy8zrXO3jRe2zDmp
+8Oc3lwU12glDXwOV6NBoBWYFXuHnRf6YXTdJcXLP+fQOme0fPFLyGnjYIRN+hgxV
+sY0yh2Y5/ikd8Mo72X+e8sJrefqCxN+Tgc30tFH1c3ZaMnKFYWEEDS1sjiUVVZcG
+qSbBGoAxREhsp5sUEkXAFv9Jlg==
+-----END ENCRYPTED PRIVATE KEY-----

src/components/ping_pong/layout component.js

@@ -0,0 +1,176 @@
+return function() {
+  async function getConfigData(key) {
+    //replace url with static asset in Arcadia
+    const config = await fetch(`/arc/reports/staticasset/raw/4.js`, {
+      cache: "no-store"
+    })
+      .then(res => {
+        if (res.ok) {
+          return res.json();
+        } else {
+          throw Error(`Request rejected with status ${res.status}`);
+        }
+      })
+      .catch();
+    return config[key];
+  }
+  const service = {
+    getLegends: async () => {
+      return getConfigData("legend");
+    },
+    getStyles: async () => {
+      return getConfigData("styles");
+    }
+  };
+
+  let f = function() {};
+  f.version = '1';
+  f.settings = () => [];
+
+  f.disableDraw = () => true;
+  f.beforeDraw = () => {
+    document.getElementById(arcapi.chartId()).innerHTML = "";
+  };
+
+  f.afterDraw = () => {
+    let chart = document.getElementById(arcapi.chartId());
+    chart.appendChild(document.createElement("pingpong-layout"));
+    chart.style.setProperty("height", "100vh");
+    chart.style.setProperty("text-align", "center");
+  };
+
+  class PingPongLayout extends HTMLElement {
+    constructor() {
+      super();
+      this.element = this.attachShadow({ mode: "open" });
+      this.records = [];
+    }
+
+    async render() {
+      const styles = await service.getStyles();
+      const legends = await service.getLegends();
+
+      const template = document.createElement("template");
+      template.innerHTML = `
+          <style>
+            :host {
+              font-family: inconsolata,Monaco,lucida console,Consolas,courier new;
+              display: inline-block;
+              color: white;
+            }
+            #header {
+              display: inline-block;
+              position: absolute;
+              top: 10px;
+              left: 20px;
+            }
+            #latency span {
+              vertical-align: middle;
+              display: inline-block;
+              margin-top: -25px;
+            }
+            #footer {
+              position: absolute;
+              text-align: left;
+              padding: 10px;
+              font-size: 14px;
+              width: 465px;
+              margin: 0 auto;
+              left: 20px;
+              bottom: 10px;
+            }
+            #footer ul {
+              padding-left: 20px;
+              list-style-type: decimal;
+            }
+            #footer li {
+              padding-bottom: 5px;
+              line-height: 15px;
+              list-style-type: none;
+            }
+            .dot {
+              height: 8px;
+              width: 8px;
+              border-radius: 50%;
+              display: inline-block;
+              margin-right: 10px;
+              border-style:solid;
+              border-width: 2px;
+            }
+            h1, h3 {
+              font-weight: 400;
+            }
+          </style>
+          <div id="main-wrapper">
+              <div id="header">
+                  <h1 id="current-time">00:00:00xx</h1>
+                  <h2 id="time-zone">(IST)</h2>
+                  <h3>
+                      Customer Activity Movement (CAM)<br>
+                      a.k.a. Ping-Pong Chart
+                  </h3>
+                  <div id="latency">
+                    <svg height="32px" version="1.1" viewBox="0 0 32 32" width="32px" xmlns="http://www.w3.org/2000/svg">
+                        <g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
+                            <g fill="#FF0000" id="101 Warning">
+                                <path d="M14.4242327,6.14839275 C15.2942987,4.74072976 16.707028,4.74408442 17.5750205,6.14839275 L28.3601099,23.59738 C29.5216388,25.4765951 28.6755462,27 26.4714068,27 L5.5278464,27 C3.32321557,27 2.47386317,25.4826642 3.63914331,23.59738 Z M16,20 C16.5522847,20 17,19.5469637 17,19.0029699 L17,12.9970301 C17,12.4463856 16.5561352,12 16,12 C15.4477153,12 15,12.4530363 15,12.9970301 L15,19.0029699 C15,19.5536144 15.4438648,20 16,20 Z M16,24 C16.5522848,24 17,23.5522848 17,23 C17,22.4477152 16.5522848,22 16,22 C15.4477152,22 15,22.4477152 15,23 C15,23.5522848 15.4477152,24 16,24 Z M16,24" id="Triangle 29" />
+                            </g>
+                        </g>
+                    </svg>
+                    <span id="latency-time">12:00:00pm</span>
+                  </div>
+              </div>
+              <div id="footer">
+                <p>Legend:</p>
+                <ul>
+                ${legends
+                  .map(legend => {
+                    const style = styles.find(
+                      style => style.id == legend.style
+                    );
+                    return `
+                  <li>
+                    <span class="dot" style="background:${
+                      style.fill
+                    };border-color:${style.stroke || "transparent"};"></span>
+                      ${legend.description}
+                    </li>
+                `;
+                  })
+                  .join(" ")}
+                </ul>
+              </div>
+            <ping-pong></ping-pong>
+          </div>
+        `;
+
+      this.element.appendChild(template.content.cloneNode(true));
+
+      this.element.addEventListener("pingpong.time", e => {
+        const currentTime = this.element.getElementById("current-time");
+        currentTime.textContent = e.detail;
+      });
+
+      this.element.addEventListener("pingpong.latency", e => {
+        const latencyContainer = this.element.getElementById("latency");
+        latencyContainer.style.display = e.detail.show
+          ? "inline-block"
+          : "none";
+        if (e.detail.show) {
+          const latencyTime = this.element.getElementById("latency-time");
+          latencyTime.textContent = e.detail.time;
+        }
+      });
+    }
+
+    // connnectedCallback is like ComponentWillMount
+    connectedCallback() {
+      this.render();
+    }
+  }
+  if (!customElements.get("pingpong-layout")) {
+    customElements.define("pingpong-layout", PingPongLayout);
+  }
+
+  return f;
+}();

src/components/ping_pong/pyserv.py

@@ -0,0 +1,12 @@
+import BaseHTTPServer, SimpleHTTPServer
+import ssl
+
+
+httpd = BaseHTTPServer.HTTPServer(('localhost', 4443),
+        SimpleHTTPServer.SimpleHTTPRequestHandler)
+
+httpd.socket = ssl.wrap_socket (httpd.socket,
+        keyfile="key.pem",
+        certfile='cert.pem', server_side=True)
+
+httpd.serve_forever()