Source: chart.js

  1. /**
  2. * Chart Component<BR>
  3. * <BR><BR><img src=/tk/lib/components/w/img/chart.png width=30% style="border:1px lime dashed;padding:20px">
  4. * <BR><BR><a href="/tk/lib/components/w/html/chart.html">DEMO</a>
  5. */
  6. class Chart extends HTMLElement {
  7. constructor() {
  8. wc.group("Chart.constructor")
  9. super();
  10. wc.groupEnd();
  11. };
  12. /**
  13. * Set observable values here. When Changed, attributeChangedCallback is invoked
  14. * @observedAttributes
  15. */
  16. static get observedAttributes() {
  17. wc.group("Chart.observedAttributes");
  18. this.observables = [];
  19. wc.groupEnd();
  20. return this.observables;
  21. };
  22. /**
  23. * This function is called when this is attached to DOM
  24. * @connectedCallback.
  25. */
  26. connectedCallback() {
  27. wc.group("Chart.connectedCallback")
  28. let self = this;
  29. // GET PROPERTIES AND INTERESTING ELEMENTS
  30. this._initialize();
  31. // REPLACE CONTENT IF NECESSARY WITH NEW STUFF
  32. this.innerHTML = `<div id="${this.id}-container"><span class="wc-loading-img"></span></div>`;
  33. // ADD STATS AND OTHER FINAL STUFF
  34. this._finalize();
  35. wc.groupEnd();
  36. };
  37. /**
  38. * Invoked When component is removed. Usually with a .remove() function call
  39. * @disconnectedCallback
  40. */
  41. disconnectedCallback() {
  42. wc.group("Chart.disconnectedCallback")
  43. /* CLEAN UP NOW */
  44. wc.groupEnd();
  45. };
  46. /**
  47. * Called with .setAttribute(...) function call
  48. * @attributeChangedCallback
  49. */
  50. attributeChangedCallback(attr, oldval, newval) {
  51. wc.group("Chart.attributeChangedCallback:", attr, oldval, newval);
  52. this.properties = this.properties || [];
  53. let obs = Chart.observedAttributes;
  54. for (let i = 0; i < obs.length; i++) {
  55. if (newval) {
  56. this.properties[obs[i]] = newval;
  57. }
  58. }
  59. // YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  60. try {
  61. switch(attr)
  62. {
  63. case "background":
  64. break;
  65. default:
  66. break;
  67. }
  68. }
  69. catch(e) {
  70. wc.warn(e.name + ' > ' + e.message);
  71. }
  72. wc.groupEnd();
  73. };
  74. /**
  75. * Stores DOM elements of interest for future use
  76. * @private
  77. * @_fetchElements
  78. */
  79. _fetchElements() {
  80. wc.group("Chart._fetchElements");
  81. this.dom = this.dom || [];
  82. this.dom.content = this.innerHTML;
  83. wc.groupEnd();
  84. };
  85. /**
  86. * Component attributes are _fetched and defaults are set if undefined
  87. * @private
  88. * @_fetchAttributes
  89. * @param {string} [modal=true] mode for our chart
  90. */
  91. _fetchAttributes() {
  92. wc.group("Chart._fetchAttributes");
  93. this.properties = {
  94. cname : "Chart",
  95. author : "Mel Heravi",
  96. version : "1.0",
  97. };
  98. // SAVE WIDGET SPECIFIC PROPERTIES
  99. this.propertiesW = [];
  100. // SAVE ALL OTHER PROPERTIES
  101. let attrs = wc.getAttributes(this)
  102. for (var key in attrs) {
  103. let attr = this.getAttribute(key) || this.properties.key;
  104. this.properties[key] = this.getAttribute(key);
  105. this.propertiesW[key] = this.getAttribute(key);
  106. wc.log(key + ": " + attrs[key]);
  107. }
  108. // SET ALL INITIAL ATTRIBUTES
  109. for (var key in this.properties) {
  110. switch(key)
  111. {
  112. case "background":
  113. break;
  114. default:
  115. break;
  116. }
  117. }
  118. wc.log("ATTRIBUTES: ", this.properties);
  119. wc.groupEnd();
  120. };
  121. /**
  122. * Destroy the instance object and artifacts
  123. * @private
  124. * @_destroy
  125. */
  126. destroy() {
  127. wc.group("Chart.destroy:", this.id);
  128. // FREE ALL MEMORY
  129. // you should delete all created objects here
  130. // FREE POINTER
  131. delete this;
  132. // REMOVE ITEM FROM DOM
  133. this.parentNode.removeChild(this);
  134. wc.groupEnd();
  135. };
  136. /**
  137. * configure the instance object and artifacts
  138. * @private
  139. * @_configure
  140. */
  141. configure(data) {
  142. wc.group("Chart.configure:", data);
  143. eval("this." + data.type + "(data)");
  144. wc.groupEnd();
  145. };
  146. /**
  147. * SAVE DATA FOR ANALYTICS
  148. * @private
  149. * @_initialize
  150. */
  151. _initialize() {
  152. wc.group("Chart._initialize:", this.id);
  153. // FETCH ALL INTERESTING ELEMENTS
  154. this._fetchElements();
  155. // FETCH ALL ATTRIBUTES
  156. this._fetchAttributes();
  157. wc.groupEnd();
  158. };
  159. /**
  160. * SAVE DATA FOR ANALYTICS
  161. * @private
  162. * @_finalize
  163. */
  164. _finalize() {
  165. wc.group("Chart._finalize:", this.id);
  166. this.classList.add("wc");
  167. // ADD ANALYTICS HERE
  168. wc.setStats(this, this.properties.cname, this.properties.version);
  169. // SHOW IT NOW (NO FLICKERS)
  170. this.style.visibility = "visible";
  171. wc.groupEnd();
  172. };
  173. /**
  174. * PIE CHART (DONUT IF INNSERSIZE SPECIFIED)
  175. * @pie
  176. */
  177. pie(data) {
  178. wc.group("Chart.pie:", data);
  179. var chart = new Highcharts.Chart({
  180. chart: {
  181. renderTo: `${this.id}-container`,
  182. type: data.type,
  183. plotShadow: false,
  184. backgroundColor:'transparent',
  185. alternateGridColor: null,
  186. },
  187. credits: {
  188. enabled: false
  189. },
  190. navigation: {
  191. buttonOptions: {
  192. enabled: false
  193. }
  194. },
  195. tooltip: {
  196. pointFormat: '<b>{point.percentage:.1f}%</b>'
  197. },
  198. plotOptions: {
  199. pie: {
  200. innerSize: '60%',
  201. size: data.size
  202. }
  203. },
  204. title:{
  205. text:data.title
  206. },
  207. series: [{
  208. marker: {
  209. enabled: false
  210. },
  211. dataLabels: {
  212. enabled: data.labels
  213. },
  214. enableMouseTracking: true,
  215. innerSize: data.innerSize,
  216. center: ['50%', '50%'],
  217. data: data.data
  218. }]
  219. });
  220. wc.groupEnd();
  221. };
  222. /**
  223. * BARS CHART (DONUT IF INNSERSIZE SPECIFIED)
  224. * @bars
  225. */
  226. column(data) {
  227. wc.group("Chart.column:", data);
  228. var chart = new Highcharts.Chart({
  229. chart: {
  230. renderTo: `${this.id}-container`,
  231. type: data.type,
  232. plotShadow: false,
  233. backgroundColor:'transparent',
  234. alternateGridColor: null,
  235. },
  236. credits: {
  237. enabled: false
  238. },
  239. navigation: {
  240. buttonOptions: {
  241. enabled: false
  242. }
  243. },
  244. title:{
  245. text:data.title
  246. },
  247. series: [{
  248. marker: {
  249. enabled: true
  250. },
  251. dataLabels: {
  252. enabled: data.labels
  253. },
  254. enableMouseTracking: true,
  255. data: data.data
  256. }]
  257. });
  258. wc.groupEnd();
  259. };
  260. }
  261. window.customElements.define('wc-chart', Chart);