better CSS; use color-scheme on demo page; make default sizes bigger;…

… bump to v1.0.0
chrisburnell · Jan 23, 2024 · fa02eac · fa02eac
1 parent 135e364
commit fa02eac
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -117,15 +117,15 @@ Make sure you include the `<script>` in your project (choose one of these):
 <!-- 3rd party CDN, not recommended for production use -->
 <script
   type="module"
-  src="https://www.unpkg.com/@chrisburnell/svg-sparkline@0.0.9/svg-sparkline.js"
+  src="https://www.unpkg.com/@chrisburnell/svg-sparkline@1.0.0/svg-sparkline.js"
 ></script>
 ```
 
 ```html
 <!-- 3rd party CDN, not recommended for production use -->
 <script
   type="module"
-  src="https://esm.sh/@chrisburnell/svg-sparkline@0.0.9"
+  src="https://esm.sh/@chrisburnell/svg-sparkline@1.0.0"
 ></script>
 ```
 

diff --git a/demo.html b/demo.html
@@ -6,6 +6,13 @@
     <meta name="description" content="Demo of svg-sparkline Web Component" />
     <title>svg-sparkline Web Component Demo</title>
 
+    <style>
+      @media (prefers-color-scheme: dark) {
+        :root {
+          color-scheme: dark;
+        }
+      }
+    </style>
     <script type="module" src="svg-sparkline.js"></script>
   </head>
   <body>
@@ -49,9 +56,13 @@ <h2>Defined endpoint color</h2>
     <p>
         <svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8" endpoint-color="red"></svg-sparkline>
     </p>
+    <h2>Without endpoint</h2>
+    <p>
+        <svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8" endpoint="false"></svg-sparkline>
+    </p>
     <h2>Defined size</h2>
     <p>
-        <svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8" width="300" height="50"></svg-sparkline>
+        <svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8" width="400" height="50"></svg-sparkline>
     </p>
     <h2>Defined line width</h2>
     <p>
@@ -61,9 +72,5 @@ <h2>Defined endpoint width</h2>
     <p>
         <svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8" endpoint-width="10"></svg-sparkline>
     </p>
-    <h2>Without endpoint</h2>
-    <p>
-        <svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8" endpoint="false"></svg-sparkline>
-    </p>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chrisburnell/svg-sparkline",
-  "version": "0.0.9",
+  "version": "1.0.0",
   "description": "A Web Component that builds an SVG Sparkline.",
   "main": "svg-sparkline.js",
   "scripts": {

diff --git a/svg-sparkline.js b/svg-sparkline.js
@@ -12,33 +12,33 @@ class SVGSparkline extends HTMLElement {
       grid-template-columns: 1fr 1fr;
       grid-template-rows: 1fr auto;
     }
-    :host svg {
+    svg {
       inline-size: auto;
       grid-column: 1 / 3;
       grid-row: 1 / 2;
       padding: var(--svg-sparkline-padding, 0.375rem);
       overflow: visible;
     }
-    :host span {
+    span {
       padding-inline: var(--svg-sparkline-padding, 0.375rem);
     }
-    :host span:nth-of-type(1) {
+    span:nth-of-type(1) {
       grid-column: 1 / 2;
       text-align: start;
     }
-    :host span:nth-of-type(2) {
+    span:nth-of-type(2) {
         grid-column: 2 / 3;
         text-align: end;
     }
     @media (prefers-reduced-motion: no-preference) {
       :host([animate]) svg:first-of-type {
         clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
-        animation: swipe var(--svg-sparkline-animation-duration, var(--animation-duration, 1s)) linear var(--svg-sparkline-animation-delay, var(--svg-sparkline-animation-duration, var(--animation-duration, 1s))) forwards;
+        animation: swipe var(--svg-sparkline-animation-duration, var(--animation-duration, 1s)) linear var(--svg-sparkline-animation-delay, var(--svg-sparkline-animation-duration, var(--animation-delay, var(--animation-duration, 1s)))) forwards;
       }
       :host([animate]) svg:last-of-type,
       :host([animate]) span {
         opacity: 0;
-        animation: fadein var(--svg-sparkline-animation-duration, var(--animation-duration, 1s)) linear calc(2 * var(--svg-sparkline-animation-delay, var(--svg-sparkline-animation-duration, var(--animation-duration, 1s)))) forwards;
+        animation: fadein var(--svg-sparkline-animation-duration, var(--animation-duration, 1s)) linear calc(2 * var(--svg-sparkline-animation-delay, var(--svg-sparkline-animation-duration, var(--animation-delay, var(--animation-duration, 1s))))) forwards;
       }
     }
     @keyframes swipe {
@@ -53,7 +53,7 @@ class SVGSparkline extends HTMLElement {
     }
   `
 
-  static observedAttributes = ["values", "width", "height", "color", "curve", "animation-duration", "endpoint", "endpoint-color", "endpoint-width", "fill", "gradient", "gradient-color", "line-width", "start-label", "end-label"]
+  static observedAttributes = ["values", "width", "height", "color", "curve", "endpoint", "endpoint-color", "endpoint-width", "fill", "gradient", "gradient-color", "fill-color", "line-width", "start-label", "end-label", "animation-duration", "animation-delay"]
 
   connectedCallback() {
     if (!this.getAttribute("values")) {
@@ -70,11 +70,10 @@ class SVGSparkline extends HTMLElement {
     }
 
     this.values = this.getAttribute("values").split(",")
-    this.width = parseFloat(this.getAttribute("width")) || 160
-    this.height = parseFloat(this.getAttribute("height")) || 28
+    this.width = parseFloat(this.getAttribute("width")) || 200
+    this.height = parseFloat(this.getAttribute("height")) || 36
     this.color = this.getAttribute("color") || "currentColor"
     this.curve = this.getAttribute("curve") === "true"
-    this.animationDuration = this.getAttribute("animation-duration") || "1s"
     this.endpoint = this.getAttribute("endpoint") !== "false"
     this.endpointColor = this.getAttribute("endpoint-color") || this.color
     this.endpointWidth = parseFloat(this.getAttribute("endpoint-width")) || 6
@@ -137,17 +136,37 @@ class SVGSparkline extends HTMLElement {
       content.push(`<span>${this.endLabel}</span>`)
     }
 
-    if (this.animate) {
-      content.push(`
-        <style>
-          :host {
-            --animation-duration: ${this.animationDuration};
-          }
-        </style>
+    return content.join("")
+  }
+
+  getBaseCSS() {
+    let sheet = new CSSStyleSheet()
+    sheet.replaceSync(SVGSparkline.css)
+
+    return sheet
+  }
+
+  setCSS() {
+    let stylesheets = [this.getBaseCSS()]
+    if (this.hasAttribute("animation-duration")) {
+      let sheet = new CSSStyleSheet()
+      sheet.replaceSync(`
+        :host {
+          --animation-duration: ${this.getAttribute("animation-duration")};
+        }
       `)
+      stylesheets.push(sheet)
     }
-
-    return content.join("")
+    if (this.hasAttribute("animation-delay")) {
+      let sheet = new CSSStyleSheet()
+      sheet.replaceSync(`
+        :host {
+          --animation-delay: ${this.getAttribute("animation-delay")};
+        }
+      `)
+      stylesheets.push(sheet)
+    }
+    this.shadowRoot.adoptedStyleSheets = stylesheets
   }
 
   initTemplate() {
@@ -156,15 +175,13 @@ class SVGSparkline extends HTMLElement {
       return
     }
 
-    let shadowroot = this.attachShadow({ mode: "open" })
+    this.attachShadow({ mode: "open" })
 
-    let sheet = new CSSStyleSheet()
-    sheet.replaceSync(SVGSparkline.css)
-    shadowroot.adoptedStyleSheets = [sheet]
+    this.setCSS()
 
     let template = document.createElement("template")
     template.innerHTML = this.render()
-    shadowroot.appendChild(template.content.cloneNode(true))
+    this.shadowRoot.appendChild(template.content.cloneNode(true))
   }
 
   init() {
@@ -173,6 +190,7 @@ class SVGSparkline extends HTMLElement {
 
   attributeChangedCallback() {
     this.initTemplate()
+    this.setCSS()
   }
 
   static maxDecimals(value, decimals = 2) {