@sparkle-learning/core 0.0.56 → 0.0.57

package/dist/sparkle-core/sparkle-card.entry.js

@@ -0,0 +1,61 @@
+import { r as registerInstance, k as h, n as Host } from './index-1dec9544.js';
+import { O as Outbound } from './icons-758d1417.js';
+
+const cardCss = "sparkle-card{display:block;font-size:12px;max-width:30em}.Card{background-color:var(--background);border-radius:4px;box-shadow:0px 0.175em 0.5em rgba(2, 8, 20, 0.1), 0px 0.085em 0.175em rgba(2, 8, 20, 0.08);color:var(--text-color--light);display:flex;flex-direction:column;font-size:inherit;font-weight:normal;height:100%;justify-content:flex-start;line-height:1.6;transition:box-shadow 150ms ease, transform 150ms ease;width:100%;overflow:hidden}.Card-with-image{grid-row:span 2}.Card-without-image{font-size:12px}.Card-container{padding:1.65em 2em 1.65em}.Card-image{width:100%;height:auto}.Card-icon,.Card-iconset__container{width:48px;height:48px;margin-bottom:1.2em;border-radius:50%;object-fit:cover;background:rgb(246, 248, 251)}.Card-icon-hover{display:none}.Card-iconset__container{position:relative}.Card-iconset__container .Card-icon{position:absolute;opacity:0;transition:0.8s opacity}.Card-iconset__container .Card-icon--active{opacity:1}.Card-ionicon{width:48px;height:48px;float:left;margin-right:1em}@media (hover: hover){.Card[href]:hover{box-shadow:0 0.35em 1.175em rgba(2, 8, 20, 0.1), 0 0.175em 0.5em rgba(2, 8, 20, 0.08);transform:translateY(-1px)}.Card[href]:hover .Card-icon-default{display:none}.Card[href]:hover .Card-icon-hover{display:block}}.Card-content>*:first-child{margin-top:0}.Card-content>*:last-child{margin-bottom:0}.Card-content>*{margin:0 0 0.65em}.Card-header{color:var(--text-color--dark);font-size:1.4em;font-weight:500;line-height:1.4;margin-bottom:0.45em}.Card-without-image .Card-header{margin-bottom:0.3em}.Card-header>svg{fill:currentColor;height:1em;margin-bottom:-0.125em;width:auto}.Card-size-lg{font-size:14px}.Card-size-lg .Card-icon,.Card-size-lg .Card-ionicon,.Card-size-lg .Card-iconset__container{width:80px;height:80px}.Card-size-lg.Card-without-image .Card-header{font-size:20px}sparkle-card.disabled,sparkle-card[disabled]{position:relative}sparkle-card.disabled::after,sparkle-card[disabled]::after{position:absolute;top:0;right:0;left:0;bottom:0;background:rgba(232, 232, 232, 0.5);pointer-events:none;content:''}aside sparkle-card{max-width:240px}aside .Card-container{display:grid;grid-template-columns:minmax(0, max-content) 1fr;grid-template-rows:minmax(0, min-content);grid-template-areas:'icon title'\r\n    'icon body'}aside .Card-icon{width:32px;height:32px;margin-right:16px;margin-bottom:0;grid-area:icon}aside .Card-header{grid-area:title}aside .Card-header::after{background-image:url('/docs/assets/img/new-tab.svg');display:inline-block;height:13px;width:13px;background-size:13px 13px;margin-left:4px;content:''}aside .Card-content{grid-area:body;max-height:42px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}aside .Card-icon+.Card-content{margin-top:-6px}.markdown-content p sparkle-card{margin-top:1em}";
+
+const SparkleCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.activeIndex = 0;
+    this.rotationTime = 6000; // 4 seconds
+  }
+  hostData() {
+    return {
+      class: {
+        'Card-with-image': typeof this.img !== 'undefined',
+        'Card-without-image': typeof this.img === 'undefined',
+        'Card-size-lg': this.size === 'lg',
+      }
+    };
+  }
+  componentWillLoad() {
+    if (typeof this.iconset !== 'undefined') {
+      return;
+    }
+    this.activeIndex = 0;
+    this.rotationTime = 4000 + (Math.random() * 2000); // 4 - 6 seconds - randomize it a bit
+    // make the first transiton happen a bit faster
+    setInterval(this.tic.bind(this), this.rotationTime);
+    setTimeout(this.tic.bind(this), this.rotationTime / 3);
+  }
+  componentWillUnload() {
+    clearInterval(this.interval);
+  }
+  tic() {
+    if (typeof this.iconset !== 'undefined' && this.activeIndex >= this.iconset.split(',').length - 1) {
+      return this.activeIndex = 0;
+    }
+    this.activeIndex++;
+  }
+  __stencil_render() {
+    const isStatic = typeof this.href === 'undefined';
+    const isOutbound = typeof this.href !== 'undefined' ? /^http/.test(this.href) : false;
+    const header = this.header === 'undefined' ? null : (h("header", { class: "Card-header" }, this.header, " ", isOutbound ? h(Outbound, null) : null));
+    const hoverIcon = this.hoverIcon || this.icon;
+    const content = [
+      this.img && h("img", { src: this.img, class: "Card-image" }),
+      h("div", { class: "Card-container" }, this.icon && h("img", { src: this.icon, class: "Card-icon Card-icon-default" }), hoverIcon && h("img", { src: hoverIcon, class: "Card-icon Card-icon-hover" }), this.ionicon && h("ion-icon", { name: this.ionicon, class: "Card-ionicon" }), this.iconset && h("div", { class: "Card-iconset__container" }, this.iconset.split(',').map((icon, index) => h("img", { src: icon, class: `Card-icon ${index === this.activeIndex ? 'Card-icon--active' : ''}`, "data-index": index }))), header, h("div", { class: "Card-content" }, h("slot", null)))
+    ];
+    if (isStatic) {
+      return (h("div", { class: "Card" }, content));
+    }
+    if (isOutbound) {
+      return (h("a", { class: "Card", href: this.href }, content));
+    }
+    return (h("stencil-route-link", { url: this.href, anchorClass: "Card" }, content));
+  }
+  render() { return h(Host, this.hostData(), this.__stencil_render()); }
+};
+SparkleCard.style = cardCss;
+
+export { SparkleCard as sparkle_card };

package/dist/sparkle-core/sparkle-cards.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, k as h } from './index-1dec9544.js';
+
+const cardsCss = "sparkle-cards{display:grid;font-size:12px;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));grid-gap:1.35rem}sparkle-cards>sparkle-card{font-size:inherit;max-width:none}sparkle-cards>sparkle-card.tall{grid-row:span 2}sparkle-cards>sparkle-card.wide{grid-column:span 2}sparkle-cards.prioritized>sparkle-card:nth-child(-n+5){font-size:1.25em}sparkle-cards.prioritized>sparkle-card:first-child{grid-row:span 2}sparkle-cards.max-measure>sparkle-card{max-width:50%}";
+
+const SparkleCards = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h("slot", null);
+  }
+};
+SparkleCards.style = cardsCss;
+
+export { SparkleCards as sparkle_cards };

package/dist/sparkle-core/sparkle-character-intro.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, k as h, n as Host, h as getAssetPath, o as getElement } from './index-1dec9544.js';
+
+const sparkleCharacterIntroCss = "sparkle-character-intro{--sparkle-character-background-color:#e7e7e7}sparkle-character-intro .character-phrase-block{display:flex;width:100%;min-height:200px;align-items:center;padding:20px}sparkle-character-intro.shift-up .character-phrase-block{padding-top:0px !important}sparkle-character-intro.shift-up-overlap .character-phrase-block{padding-top:0px !important;margin-top:-50px !important}sparkle-character-intro .character-phrase-block.right{justify-content:flex-end}sparkle-character-intro .character-phrase-block.left{justify-content:flex-start}sparkle-character-intro .character-phrase-block.left .character-box{order:2}sparkle-character-intro .character-phrase-block.left .character-image-block{order:1}sparkle-character-intro .character-box{width:80%;border-radius:15px;background:var(--sparkle-character-background-color);color:var(--text-color);padding:20px;text-align:center;position:relative;box-shadow:0px 1px 3px rgba(2, 8, 20, 0.06), 0px 1px 2px rgba(2, 8, 20, 0.04)}sparkle-character-intro .character-box.right:before{content:\"\";width:0px;height:0px;position:absolute;border-left:15px solid var(--sparkle-character-background-color);border-right:15px solid transparent;border-top:15px solid var(--sparkle-character-background-color);border-bottom:15px solid transparent;right:-16px;top:0px}sparkle-character-intro .character-box.left:before{content:\"\";width:0px;height:0px;position:absolute;border-left:15px solid transparent;border-right:15px solid var(--sparkle-character-background-color);border-top:15px solid var(--sparkle-character-background-color);border-bottom:15px solid transparent;left:-16px;top:0px}sparkle-character-intro img{max-width:100%;border:0}sparkle-character-intro .character-image-block{float:left;width:20%}sparkle-character-intro .character-image-block.right{transform:rotateY(180deg)}";
+
+const SparkleCharacterIntro = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.character = 'jen';
+    this.position = 'right';
+  }
+  componentDidLoad() {
+    console.log(this.character);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: `character-phrase-block ${this.position}` }, h("div", { class: `character-box ${this.position}` }, h("slot", null)), h("div", { class: `character-image-block ${this.position}` }, h("img", { class: "image-animation", src: getAssetPath('./assets/characters/' + this.character + '.png') })))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return getElement(this); }
+};
+SparkleCharacterIntro.style = sparkleCharacterIntroCss;
+
+export { SparkleCharacterIntro as sparkle_character_intro };

package/dist/sparkle-core/sparkle-code.entry.js

@@ -0,0 +1,39 @@
+import { r as registerInstance, k as h, n as Host, o as getElement } from './index-1dec9544.js';
+import { C as CheckmarkSoft } from './icons-758d1417.js';
+
+const codeCss = "code[class*=\"language-\"],pre[class*=\"language-\"]{color:#4d4d4c;background:none;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=\"language-\"],:not(pre)>code[class*=\"language-\"]{background:hsl(30, 20%, 25%)}pre[class*=\"language-\"]{padding:1em;margin:.5em 0;overflow:auto;border:.3em solid hsl(30, 20%, 40%);border-radius:.5em;box-shadow:1px 1px .5em black inset}:not(pre)>code[class*=\"language-\"]{padding:.15em .2em .05em;border-radius:.3em;border:.13em solid hsl(30, 20%, 40%);box-shadow:1px 1px .3em -.1em black inset;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#8c9296}.token.punctuation{opacity:.7}.namespace{opacity:.7}.token.tag{color:#91c5ff}.token.tag .token.tag{color:#2b90ff}.token.property,.token.attr-name,.token.boolean,.token.number,.token.constant,.token.symbol{color:#8454ff}.token.selector,.token.char,.token.function,.token.builtin,.token.inserted{color:#ff6810}.token.operator,.token.string,.token.entity,.token.url,.token.attr-value,.language-css .token.string,.style .token.string,.token.variable{color:#42b983}.token.atrule{color:#ffbb01}.token.regex,.token.keyword,.token.important{color:#f55073}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}.token.deleted{color:red}sparkle-code[language=\"shell\"]>pre{background-color:var(--text-color--dark);border-radius:7px}sparkle-code[language=\"shell\"]:before{display:none}sparkle-code[language=\"shell\"] code{color:rgba(255, 255, 255, 0.7);font-size:13px}sparkle-code[language=\"shell\"] .token{color:inherit}sparkle-code[language=\"shell\"] .token.prompt{color:#fb96f9;user-select:none}sparkle-code[language=\"shell\"] .token.comment{color:rgba(255, 255, 255, 0.45)}sparkle-code{display:block;position:relative}sparkle-code:before{color:#bdc5d1;content:attr(language);font-family:var(--code-font-family);font-size:10px;letter-spacing:0.05em;line-height:1;padding:0.75em;position:absolute;right:0;text-transform:uppercase;top:0}sparkle-code[language=\"shell\"] pre{white-space:pre-wrap}.code-text__copy{position:absolute;right:0;top:-1.6rem;height:20px}.code-text__copy-link,.code-text__copy-confirmation{padding:4px 5px;font-size:12px;line-height:12px;font-weight:600;position:absolute;right:0;top:0}.code-text__copy-link{transition:0.2s transform ,\r\n    0.2s opacity,\r\n    0.2s color;color:#70A4FF;background-color:#E0EEFF;border-radius:4px;display:inline-block;cursor:pointer;opacity:1;transform:translate3d(0,0,0);z-index:5}.code-text__copy-link:hover{color:var(--blue)}.code-text__copy-confirmation{transition:0.2s transform ,\r\n    0.2s opacity;color:#0ec254;opacity:0;transform:translate3d(0,5px,0);z-index:1;display:flex;align-items:center;height:20px;padding:0}.code-text__copy-confirmation svg{fill:#0ec254;margin-right:-4px}.show-confirmation .code-text__copy-link{opacity:0;transform:translate3d(0,-5px,0);pointer-events:none}.show-confirmation .code-text__copy-confirmation{opacity:1;transform:translate3d(0,0,0)}";
+
+const SparkleCode = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.language = '';
+    this.showCopyConfirmation = false;
+  }
+  copyCodeText() {
+    this.showCopyConfirmation = true;
+    const codeEl = this.el.querySelector('code');
+    const codeText = codeEl && codeEl.textContent || '';
+    const el = document.createElement('textarea');
+    el.value = codeText;
+    el.setAttribute('readonly', '');
+    el.style.position = 'absolute';
+    el.style.left = '-9999px';
+    document.body.appendChild(el);
+    el.select();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+    setTimeout(() => {
+      this.showCopyConfirmation = false;
+    }, 2000);
+  }
+  render() {
+    // Only show copy button if the area is not a shell script.
+    return (h(Host, null, !['shell', 'bash', 'sh'].includes(this.language) ?
+      h("div", { class: { 'code-text__copy': true, 'show-confirmation': this.showCopyConfirmation } }, h("a", { class: "code-text__copy-link", onClick: this.copyCodeText.bind(this) }, "Copy"), h("span", { class: "code-text__copy-confirmation" }, CheckmarkSoft({ height: '26px', width: '26px' }), "Copied"))
+      : ''));
+  }
+  get el() { return getElement(this); }
+};
+SparkleCode.style = codeCss;
+
+export { SparkleCode as sparkle_code };

package/dist/sparkle-core/sparkle-compass-post.entry.js

@@ -0,0 +1,129 @@
+import { r as registerInstance, k as h, o as getElement } from './index-1dec9544.js';
+
+const sparkleCompassPostCss = "gi-compass-post .compass-post{padding-top:10px}gi-compass-post .compass-post-header{padding:15px;background-color:rgba(213, 213, 213, 0.5);text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}gi-compass-post .compass-post-header ion-avatar{width:32px;height:32px}gi-compass-post .compass-post-header h3{color:#333;padding-top:0px;padding-bottom:0px;margin:0px}gi-compass-post .compass-post-body{padding:15px;background-color:#fff}gi-compass-post .error{color:red}gi-compass-post .success{color:green}gi-compass-post .footer{display:flex;justify-content:space-between}";
+
+const SparkleCompassPost = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.resiliance = 0;
+    this.care = 0;
+    this.compassData = {};
+  }
+  componentDidLoad() {
+  }
+  componentWillUpdate() {
+    console.log('Component will update and re-render');
+  }
+  async renderCompass(data) {
+    var sectionObj = {};
+    for (var i = 0; i < data.length; i++) {
+      if (data[i] && data[i].extraData && data[i].extraData.compass) {
+        if (typeof sectionObj[data[i].extraData.compass] === 'undefined') {
+          sectionObj[data[i].extraData.compass] = 0;
+        }
+        sectionObj[data[i].extraData.compass] += data[i].response || 0;
+      }
+    }
+    for (var propertyName in sectionObj) {
+      sectionObj[propertyName] = Math.floor(sectionObj[propertyName] * 0.25);
+    }
+    console.log(sectionObj);
+  }
+  loadOldData() {
+    // this.dataSvc.getServerData("/api/compass/recent").subscribe((x) => {
+    //   if (x && x.AppJsonData) {
+    //     var obj = JSON.parse(x.AppJsonData)
+    //     this.compassData = { ...this.compassData, ...obj };
+    //     const compassCmp = this.el.querySelector('gi-compass') as HTMLGiCompassElement;
+    //     compassCmp.drawOnCompass();
+    //     // compassCmp.drawOnCompass()
+    //   }
+    // });
+  }
+  submitPost() {
+    // this.errorMessage = "";
+    // this.successMessage = "";
+    // var previousEl = this.el.previousElementSibling as HTMLGiOpinionElement;
+    // var data = previousEl.getQuizResults();
+    // if (data.length == 8) {
+    //   var sectionObj = {};
+    //   for (var i = 0; i < data.length; i++) {
+    //     if (data[i] && data[i].extraData && data[i].extraData.compass) {
+    //       if (typeof sectionObj[data[i].extraData.compass] === 'undefined') {
+    //         sectionObj[data[i].extraData.compass] = 0;
+    //       }
+    //       sectionObj[data[i].extraData.compass] += data[i].response;
+    //     }
+    //   }
+    // this.dataSvc.getServerData("/api/compass/recent").subscribe(x => {
+    //   combineObj = {};
+    //   if (x && x.AppJsonData) {
+    //     var oldObj = JSON.parse(x.AppJsonData);
+    //     for (var propertyName in oldObj) {
+    //       oldObj[propertyName] = Math.floor(oldObj[propertyName] * 4);
+    //     }
+    //     var combineObj = { ...oldObj, ...sectionObj };
+    //   }
+    //   else {
+    //     combineObj = sectionObj;
+    //   }
+    //   var componentString = "<gi-compass";
+    //   for (var propertyName in combineObj) {
+    //     combineObj[propertyName] = Math.floor(combineObj[propertyName] * 0.25);
+    //     componentString += ' ' + propertyName + '="' + combineObj[propertyName] + '"';
+    //   }
+    //   componentString += "></gi-compass>";
+    //   var isPublic = this.el.getElementsByClassName("IsPublic")[0] as HTMLInputElement;
+    //   var appJsonData = JSON.stringify(combineObj);
+    //   var postData = {
+    //     AppJsonData: appJsonData,
+    //     PostText: componentString,
+    //     ExternalResourceUrl: "",
+    //     IsPublic: isPublic.checked,
+    //   };
+    //   console.log(postData);
+    //   this.dataSvc.saveData(postData, "/api/compass/add/")
+    //     .subscribe(x => {
+    //       this.successMessage = "Posted Successfully";
+    //     }, error => {
+    //       this.errorMessage = "Something went wrong.";
+    //     });
+    // }, error => {
+    //   this.errorMessage = "Something went wrong.";
+    // });
+    // }
+    // else {
+    //   this.errorMessage = "Please answer all of the above questions";
+    // }
+  }
+  getTokenData() {
+    let tokenStr = window.localStorage["currentUser"];
+    if (tokenStr) {
+      let token = JSON.parse(tokenStr);
+      token = JSON.parse(token);
+      if (new Date(token["Expiration"]).getTime() > new Date().getTime()) {
+        return token;
+      }
+    }
+    return null;
+  }
+  renderUserInfo() {
+    var tokenInfo = this.getTokenData();
+    if (tokenInfo != null && tokenInfo.Token) {
+      return (h("ion-avatar", { class: "header-avatar", slot: "end" }, tokenInfo.ProfileImageUrl
+        ? h("img", { src: tokenInfo.ProfileImageUrl })
+        : h("img", { src: "/assets/img/avatar.png" })));
+    }
+    else {
+      return (h("ion-button", { slot: "end", href: "/login" }, "Login to Post"));
+    }
+  }
+  render() {
+    const userInfo = this.renderUserInfo();
+    return (h("div", { class: "compass-post" }, h("div", { class: "compass-post-header" }, "Bulletin Board", userInfo), h("div", { class: "compass-post-body" }, h("form", null, h("ion-item", null, h("ion-label", null, "Public"), h("ion-radio", { class: "IsPublic", slot: "end", color: "primary", value: "IsPublic", name: "IsPublic" })), h("gi-compass", null), h("ion-item", { class: "footer" }, h("div", null, h("div", { class: "error" }, this.errorMessage), h("div", { class: "success" }, this.successMessage)), h("ion-button", { slot: "end", size: "default", onClick: (evt) => this.submitPost(), disabled: this.getTokenData() == null }, "Post"))))));
+  }
+  get el() { return getElement(this); }
+};
+SparkleCompassPost.style = sparkleCompassPostCss;
+
+export { SparkleCompassPost as sparkle_compass_post };

package/dist/sparkle-core/sparkle-compass.entry.js

@@ -0,0 +1,122 @@
+import { r as registerInstance, k as h, h as getAssetPath, o as getElement } from './index-1dec9544.js';
+
+const sparkleCompassCss = "#compassImage{position:absolute;z-index:1;width:100%}#compassOverImage{position:absolute;z-index:30;top:11.6%;left:11.8%;width:76.5%;height:76.5%}.myCanvas{position:relative;z-index:20}#container{display:inline-block;margin:0 auto;position:relative}";
+
+const SparkleCompass = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    this.drawOnCompass();
+    window.addEventListener('resize', () => this.drawOnCompass());
+    //context.beginPath();
+    // context.fillStyle = "rgba(96, 187,70, 0.5)";
+    // // Go to center of the Chart
+    //context.moveTo(centerX, centerY);
+    // // Draw an Arc
+    // // arc(centerX, centerY, radius, angleStart, angleEnd)
+    // var radius = this.getRadiusFromSection(this.resilence);
+    // context.arc(centerX, centerY, radius, 0, Math.PI / 4);
+    // // Draw a line to close the pie slice
+    // //context.lineTo(centerX, centerY);
+    // // Print the path
+    // //context.stroke();
+    // context.fill();
+  }
+  // @Listen("window:resize")
+  // resize() {
+  //     this.drawOnCompass()
+  // }
+  async drawOnCompass() {
+    this.canvas = this.el.querySelector(".myCanvas");
+    this.canvase_container = this.el.querySelector("#container");
+    this.canvase_container.style.width = "100%";
+    this.canvas.width = this.canvase_container.offsetWidth;
+    this.canvas.height = this.canvase_container.offsetWidth;
+    this.canvas.style.width = this.canvase_container.offsetWidth + "px";
+    this.canvas.style.height = this.canvase_container.offsetWidth + "px";
+    //this.canvase_container.style.height = this.canvas.offsetWidth + "px";
+    var context = this.canvas.getContext('2d');
+    var centerX = this.canvas.width / 2;
+    var centerY = this.canvas.height / 2;
+    //DRAW CARE FOR BODY
+    context.beginPath();
+    context.moveTo(centerX, centerY);
+    context.fillStyle = "rgba(96, 187,70, 0.5)";
+    var radius = this.getRadiusFromSection(this.resiliance);
+    context.arc(centerX, centerY, radius, 0, Math.PI / 4);
+    context.fill();
+    //DRAW CARE FOR BODY
+    context.beginPath();
+    context.moveTo(centerX, centerY);
+    context.fillStyle = "rgba(96, 187,70, 0.6)";
+    var radius = this.getRadiusFromSection(this.care);
+    context.arc(centerX, centerY, radius, Math.PI / 4, Math.PI / 2);
+    context.fill();
+    //DRAW ORGANIZATION
+    context.beginPath();
+    context.moveTo(centerX, centerY);
+    context.fillStyle = "rgba(44, 160,217, 0.5)";
+    var radius = this.getRadiusFromSection(this.organization);
+    context.arc(centerX, centerY, radius, Math.PI / 2, Math.PI * 0.75);
+    context.fill();
+    //DRAW SCHOOL AND WORK
+    context.beginPath();
+    context.moveTo(centerX, centerY);
+    context.fillStyle = "rgba(44, 160,217, 0.6)";
+    var radius = this.getRadiusFromSection(this.school);
+    context.arc(centerX, centerY, radius, Math.PI * 0.75, Math.PI);
+    context.fill();
+    //DRAW RELATIONSHIP
+    context.beginPath();
+    context.moveTo(centerX, centerY);
+    context.fillStyle = "rgba(220, 24,98, 0.5)";
+    var radius = this.getRadiusFromSection(this.relationship);
+    context.arc(centerX, centerY, radius, Math.PI, Math.PI * 1.25);
+    context.fill();
+    //DRAW EMOTIONS
+    context.beginPath();
+    context.moveTo(centerX, centerY);
+    context.fillStyle = "rgba(220, 24,98, 0.6)";
+    var radius = this.getRadiusFromSection(this.emotions);
+    context.arc(centerX, centerY, radius, Math.PI * 1.25, Math.PI * 1.5);
+    context.fill();
+    //DRAW SPIRITUALITY
+    context.beginPath();
+    context.moveTo(centerX, centerY);
+    context.fillStyle = "rgba(224,117,33, 0.5)";
+    var radius = this.getRadiusFromSection(this.spirituality);
+    context.arc(centerX, centerY, radius, Math.PI * 1.5, Math.PI * 1.75);
+    context.fill();
+    //DRAW REST AND PLAY
+    context.beginPath();
+    context.moveTo(centerX, centerY);
+    context.fillStyle = "rgba(224,117,33, 0.6)";
+    var radius = this.getRadiusFromSection(this.rest);
+    context.arc(centerX, centerY, radius, Math.PI * 1.75, Math.PI * 2);
+    context.fill();
+  }
+  getRadiusFromSection(section) {
+    var defaultRadius = 0.09 * this.canvas.width;
+    var sectionRadius = 0.028 * this.canvas.width;
+    if (section == 0) {
+      return 0;
+    }
+    else if (section == 1) {
+      return defaultRadius;
+    }
+    else {
+      if (section > 5) {
+        return defaultRadius + (section - 1) * sectionRadius + 1;
+      }
+      return defaultRadius + (section - 1) * sectionRadius;
+    }
+  }
+  render() {
+    return (h("div", { id: "container" }, h("img", { id: "compassImage", class: "src-image", src: getAssetPath(`../assets/img/compass.png`) }), h("canvas", { class: "myCanvas" }, "Your browser does not support the HTML5 canvas tag."), h("img", { id: "compassOverImage", src: getAssetPath(`../assets/img/compass-over.png`) })));
+  }
+  get el() { return getElement(this); }
+};
+SparkleCompass.style = sparkleCompassCss;
+
+export { SparkleCompass as sparkle_compass };