Source: marketdatacard.js

  1. /**
  2.  * Marketdatacard Component<BR>
  3.  * <BR><BR><img src=/tk/lib/components/w/img/MarketDataCard.png width=30% style="border:1px lime dashed;padding:20px">
  4.  * <BR><BR><a href="/tk/lib/components/w/html/MarketDataCard.html">DEMO</a>
  5.  */
  6. class Marketdatacard extends HTMLElement {
  7.     constructor() {
  8.         wc.group("Marketdatacard.constructor")
  9. 	
  10.         super();
  12.         wc.groupEnd();
  13.     };
  14.     
  15.     /**
  16.      * Set observable values here. When Changed, attributeChangedCallback is invoked
  17.      * @observedAttributes
  18.      */
  19.     static get observedAttributes() {
  20.         wc.group("Marketdatacard.observedAttributes");
  22. 	this.observables = [];
  24.         wc.groupEnd();
  25.         return this.observables;
  26.     };
  28.     /**
  29.      * Called when this is attached to DOM
  30.      * @connectedCallback. 
  31.      */
  32.     connectedCallback() {
  33.         wc.group("Marketdatacard.connectedCallback")
  34. 	
  35. 	let self = this;
  37. 	// ADD A RANDOM ID IF NONE EXIST
  38. 	if (!this.id) {
  39. 	    this.id = this.constructor.name.toLowerCase() + "-" + wc.uid();
  40. 	}
  42. 	// GET PROPERTIES AND INTERESTING ELEMENTS
  43. 	this._initialize();
  45. 	// ADD COMPONENT MARKTOP
  46. 	this.innerHTML = this._template()
  48. 	// PUBLISH ALL EVENTS OF INTEREST
  49. 	this._publish();
  50. 	
  51. 	// SUBSCRIBE TO ALL EVENTS OF INTEREST
  52. 	this._subscribe();
  54. 	// ADD STATS AND OTHER FINAL STUFF
  55. 	this._finalize();
  57. 	ga('send', {'hitType': 'event','eventCategory': 'wc-connected','eventAction': 'connected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  59.         wc.groupEnd();
  60.     };
  62.     /**
  63.      * Initial Markup
  64.      * @private
  65.      * @_template
  66.      */
  67.     _template() {
  68.         wc.group("Marketdatacard.template");
  69. 	
  70. 	let self = this;
  72. 	var temp = `
  73. <span class="marketdatacard-container">
  74.     <span class="marketdatacard-logo-container clearfix">
  75. 	<span class="marketdatacard-logo float-left">
  76. 	    <img src="/tk/img/common/crypto/${this.properties.asset}.png" alt="${this.properties.asset}" />
  77. 	</span>
  78. 	<span class="marketdatacard-asset float-left">
  79. 	    <h1 class="wc-font-b">${this.properties.asset}</h1>
  80. 	    <h3 class="wc-font-m">${this.properties.assetname}</h3>
  81. 	</span>
  82.     </span>
  83.     
  84.     <span class="marketdatacard-chart-container pt-3">
  85. 	<svg class="sparkline sparkline-${this.properties.color}" width="500" height="40" stroke-width="4"></svg>
  86.     </span>
  87. </span>`
  89. 	setTimeout(function(){
  90. 	    document.querySelectorAll(`#${self.id} .sparkline`).forEach(function (svg) {
  91. 		sparkline.sparkline(svg, JSON.parse(self.properties.data));
  92. 	    });
  93. 	}, 10);
  95.         wc.groupEnd();
  96.         return temp;
  97.     };
  99.     /**
  100.      * Called with .setAttribute(...) function call
  101.      * @attributeChangedCallback
  102.      */
  103.     attributeChangedCallback(attr, oldval, newval) {
  104.         wc.group("Marketdatacard.attributeChangedCallback:", attr, oldval, newval);
  106. 	this.properties = this.properties || [];
  108. 	let obs = Marketdatacard.observedAttributes;
  110. 	for (let i = 0; i < obs.length; i++) {
  111. 	    if (newval) {
  112. 		this.properties[obs[i]] = newval;
  113. 	    }
  114. 	}
  115. 	
  116. 	// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  117. 	try {
  118. 	    switch(attr) 
  119. 	    {
  120. 		case "header":
  121. 		//this.querySelector("h1").innerHTML = newval;
  122. 		break;
  123. 		
  124. 		default:
  125. 		break;
  126. 	    }
  127. 	} catch(e) {
  128. 	    wc.warn(e.name + ' > ' + e.message);
  129. 	}
  131.         wc.groupEnd();
  132.     };
  134.     /**
  135.      * Stores DOM elements of interest for future use
  136.      * @private
  137.      * @_fetchElements
  138.      */
  139.     _fetchElements() {
  140. 	wc.group("Marketdatacard._fetchElements");
  141. 	
  142. 	this.dom = this.dom || [];
  143. 	this.dom.content = this.innerHTML;
  145. 	wc.groupEnd();
  146.     };
  148.     /**
  149.      * Component attributes are _fetched and defaults are set if undefined
  150.      * @private
  151.      * @_fetchAttributes
  152.      */
  153.     _fetchAttributes() {
  154. 	wc.group("Marketdatacard._fetchAttributes");
  155. 	
  156. 	this.properties = {
  157. 	    uparam	: "",
  158. 	    cname	: "Marketdatacard",
  159. 	    author	: "Mel M. Heravi, Ph.D.",
  160. 	    version	: "1.0"
  161. 	};
  162. 	
  163. 	// SAVE WIDGET SPECIFIC PROPERTIES
  164. 	this.propertiesW = [];
  165. 	
  166. 	// SAVE ALL OTHER PROPERTIES
  167. 	let attrs = wc.getAttributes(this)
  168. 	
  169.  	for (var key in attrs) {
  170. 	    let attr = this.getAttribute(key) || this.properties.key;
  171. 	    this.properties[key]  = this.getAttribute(key);
  172. 	    this.propertiesW[key] = this.getAttribute(key);
  173. 	    wc.log(key + ": " + attrs[key]);
  174. 	}
  176. 	// SET ALL INITIAL ATTRIBUTES
  177.  	for (var key in this.properties) {
  178. 	    switch(key) 
  179. 	    {
  180. 		case "header":
  181. 		break;
  182. 		
  183. 		default:
  184. 		break;
  185. 	    }
  186. 	}
  188. 	wc.log("ATTRIBUTES: ", this.properties);
  190. 	wc.groupEnd();
  191.     };
  193.     /**
  194.      * configure the instance object and artifacts
  195.      * @configure
  196.      * @param {string} data use data if exist else use 'this.properties.cfg' parameter
  197.      */
  198.     configure(data) {
  199. 	wc.group("Marketdatacard.configure:", data);
  201. 	// IF JSON VARIABLE (data) IS PROVIDED
  202. 	if (data) {
  203. 	    this._process(data);
  204. 	} else {
  205. 	    let self = this;
  207. 	    $.getJSON(this.properties.cfg, function(data) {
  208. 		self._process(data);
  209. 	    }).fail(function(jqXHR, textStatus, errorThrown) {
  210. 		alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
  211. 	    });
  212. 	}
  214. 	wc.groupEnd();
  215.     };
  217.     /**
  218.      * _process the instance object and artifacts
  219.      * @private
  220.      * @_process
  221.      */
  222.     _process(data) {
  223. 	wc.group("Marketdatacard._process:", data);
  224. 	
  225. 	// DO WHATEVER WITH THE DATA
  226. 	
  227. 	wc.groupEnd();
  228.     };
  230.     /**
  231.      * Initialize component
  232.      * @private
  233.      * @_initialize
  234.      */
  235.     _initialize() {
  236. 	wc.group("Marketdatacard._initialize:", this.id);
  238. 	// FETCH ALL INTERESTING ELEMENTS
  239. 	this._fetchElements();
  241. 	// FETCH ALL ATTRIBUTES
  242. 	this._fetchAttributes();
  243. 	
  244. 	wc.groupEnd();
  245.     };
  247.     /**
  248.      * Save data for analytics and final wrap up
  249.      * @private
  250.      * @_finalize
  251.      */
  252.     _finalize() {
  253. 	wc.group("Marketdatacard._finalize:", this.id);
  255. 	this.classList.add("wc");
  257. 	// ADD ANALYTICS HERE
  258. 	wc.setStats(this, this.properties.cname, this.properties.version);
  259. 	
  260. 	// SHOW IT NOW (NO FLICKERS) 
  261. 	this.style.visibility = "visible";
  263. 	wc.groupEnd();
  264.     };
  266.     /**
  267.      * Invoked When component is removed. Usually with a .remove() function call
  268.      * @disconnectedCallback
  269.      */
  270.     disconnectedCallback() {
  271.         wc.group("Marketdatacard.disconnectedCallback")
  273. 	ga('send', {'hitType': 'event','eventCategory': 'wc-disconnected','eventAction': 'disconnected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  275.         wc.groupEnd();
  276.     };
  278.     /**
  279.      * Destroy the instance object and artifacts
  280.      * @destroy
  281.      */
  282.     destroy() {
  283. 	wc.group("Marketdatacard.destroy");
  285. 	// FREE ALL MEMORY
  286. 	// you should delete all created objects here
  287. 	
  288. 	// FREE POINTER
  289. 	delete this;
  290. 	
  291. 	// REMOVE ITEM FROM DOM
  292. 	this.parentNode.removeChild(this);
  294. 	ga('send', {'hitType': 'event','eventCategory': 'wc-destroyed','eventAction': 'distroy','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  296. 	wc.groupEnd();
  297.     };
  299.     /**
  300.      * @_publish
  301.      */
  302.     _publish() {
  303. 	wc.group("Marketdatacard._publish");
  305. 	let self = this;
  307. 	// PUBLISH CLICK EVENTS
  308. 	$(this).on("click", () => {
  309. 	    wc.publish("wc-marketdatacard", {
  310. 		id: self.id,
  311. 		time: new Date().getTime(),
  312. 		action: "click"
  313. 	    });
  315. 	    ga('send', {'hitType': 'event','eventCategory': 'wc-MarketDataCard','eventAction': 'click','eventLabel': self.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
  316. 	});
  318. 	wc.groupEnd();
  319. 	return true;
  320.     };
  322.     /**
  323.      * Subscribe all to events of interest
  324.      * @private
  325.      * @_subscribe
  326.      */
  327.     _subscribe() {
  328. 	wc.group("Marketdatacard._subscribe:", this.id);
  329. 	
  330. 	let self = this;
  332. 	wc.subscribe("wc-marketdatacard", function(msg, e) {
  333. 	    console.log(">>>>>> E:", self.id, JSON.stringify(e));
  335. 	    if (e.id == self.id && e.action == "update") {
  336. 		self._update(e.id, e.data);
  337. 	    }
  339. 	    wc.info("'wc-marketdatacard-update' subscription was triggered:", JSON.stringify(e));
  340. 	});
  342. 	wc.groupEnd();
  343.     }
  345.     /**
  346.      * @private
  347.      * @_update
  348.      */
  349.     _update(id, data) {
  350. 	wc.group("Marketdatacard._update:", id, JSON.stringify(data));
  351. 	
  352. 	let self = this;
  354. 	document.querySelectorAll(`#${id} .sparkline`).forEach(function (svg) {
  355. 	    sparkline.sparkline(svg, JSON.parse(data));
  356. 	});
  358. 	wc.groupEnd();
  359.     }
  361.     /**
  362.      * @_request
  363.      */
  364.     _request(e) {
  365. 	wc.group("Marketdatacard._request:", this.id, JSON.stringify(e.detail));
  366. 	
  367. 	switch(e.detail.request) 
  368. 	{
  369. 	    case "label":
  370. 	    let h1 = this.querySelector("h1");
  371. 	    h1.innerHTML = e.detail.str;
  372. 	    this._publish("labelChanged");
  373. 	    break;
  375. 	    default:
  376. 	    alert("DO NOT HAVE SUCH REQUEST: " + e.detail.request);
  377. 	    break;
  378. 	}
  380. 	wc.groupEnd();
  381. 	return true;
  382.     };
  384.     /**
  385.      * @test
  386.      */
  387.     static test(what) {
  388. 	wc.group("Marketdatacard.test:", what);
  390. 	switch(what) 
  391. 	{
  392. 	    case "label":
  393. 	    wc.publish("my-MarketDataCard", {time:new Date().getTime(), requestor:"my-MarketDataCard", request:"label", str:"Hello Mel !"})
  394. 	    break;
  395. 	}
  396. 	
  397. 	wc.groupEnd();
  398. 	return true;
  399.     }
  400. }
  402. window.customElements.define('wc-marketdatacard', Marketdatacard);
  404. var sparkline=function(t){var e={};function r(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=1)}([function(t,e,r){var n=r(2),o=r(3),i=r(4);t.exports=function(t){return n(t)||o(t)||i()}},function(t,e,r){"use strict";r.r(e),r.d(e,"sparkline",function(){return c});var n=r(0),o=r.n(n);function i(t,e,r,n){return parseFloat((e-n*e/t+r).toFixed(2))}function a(t){return t.value}function u(t,e){var r=document.createElementNS("http://www.w3.org/2000/svg",t);for(var n in e)r.setAttribute(n,e[n]);return r}function c(t,e,r){var n;if(n=t,o()(n.querySelectorAll("*")).forEach(function(t){return n.removeChild(t)}),!(e.length<=1)){r=r||{},"number"==typeof e[0]&&(e=e.map(function(t){return{value:t}}));var c=r.onmousemove,l=r.onmouseout,s="interactive"in r?r.interactive:!!c,f=r.spotRadius||2,p=2*f,d=r.cursorWidth||2,v=parseFloat(t.attributes["stroke-width"].value),b=r.fetch||a,h=e.map(function(t){return b(t)}),y=parseFloat(t.attributes.width.value)-2*p,x=parseFloat(t.attributes.height.value),m=x-2*v-p,g=Math.max.apply(Math,o()(h)),A=-1e3,w=h.length-1,j=y/w,k=[],O=i(g,m,v+f,h[0]),S="M".concat(p," ").concat(O);h.forEach(function(t,r){var n=r*j+p,o=i(g,m,v+f,t);k.push(Object.assign({},e[r],{index:r,x:n,y:o})),S+=" L ".concat(n," ").concat(o)});var M=u("path",{class:"sparkline--line",d:S,fill:"none"}),C=u("path",{class:"sparkline--fill",d:"".concat(S," V ").concat(x," L ").concat(p," ").concat(x," Z"),stroke:"none"});if(t.appendChild(C),t.appendChild(M),s){var E=u("line",{class:"sparkline--cursor",x1:A,x2:A,y1:0,y2:x,"stroke-width":d}),_=u("circle",{class:"sparkline--spot",cx:A,cy:A,r:f});t.appendChild(E),t.appendChild(_);var F=u("rect",{width:t.attributes.width.value,height:t.attributes.height.value,style:"fill: transparent; stroke: transparent",class:"sparkline--interaction-layer"});t.appendChild(F),F.addEventListener("mouseout",function(t){E.setAttribute("x1",A),E.setAttribute("x2",A),_.setAttribute("cx",A),l&&l(t)}),F.addEventListener("mousemove",function(t){var e=t.offsetX,r=k.find(function(t){return t.x>=e});r||(r=k[w]);var n,o=k[k.indexOf(r)-1],i=(n=o?o.x+(r.x-o.x)/2<=e?r:o:r).x,a=n.y;_.setAttribute("cx",i),_.setAttribute("cy",a),E.setAttribute("x1",i),E.setAttribute("x2",i),c&&c(t,n)})}}}e.default=c},function(t,e){t.exports=function(t){if(Array.isArray(t)){for(var e=0,r=new Array(t.length);e<t.length;e++)r[e]=t[e];return r}}},function(t,e){t.exports=function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}},function(t,e){t.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}}]);
  405. //# sourceMappingURL=sparkline.js.map