sparkline title support

SauceLLC · Dec 1, 2024 · 908178b · 908178b
1 parent 839e0f6
commit 908178b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/pages/scss/sparkline.scss b/pages/scss/sparkline.scss
@@ -4,6 +4,18 @@
     --transition-duration: 400ms;
     --transition-timing: linear;
 
+    .sl-title {
+        font-size: 0.8em;
+        font-weight: 600;
+        opacity: 0.7;
+        font-variant: all-small-caps;
+        font-family: sans-serif;
+        pointer-events: none;
+        padding: 0.2em;
+        line-height: 1;
+        display: inline-flex;
+    }
+
     > svg.sl-root {
         stroke-width: 0.1em;
 
@@ -29,7 +41,12 @@
         .sl-visual-data-area {
             width: 100%;
             height: 100%;
-            background-image: linear-gradient(to top, #000a, red);
+            background-image: linear-gradient(to top, #000a, #f00a);
+        }
+        .sl-visual-data-area {
+            width: 100%;
+            height: 100%;
+            background-image: linear-gradient(to top, #000a, #f00a);
         }
 
         g.sl-points {

diff --git a/pages/src/sparkline.mjs b/pages/src/sparkline.mjs
@@ -14,6 +14,7 @@ export class Sparkline {
         this._yMax = options.yMax;
         this._xMin = options.xMin;
         this._xMax = options.xMax;
+        this.title = options.title;
         this.hidePoints = options.hidePoints;
         this.padding = options.padding || [4, 4, 4, 4];
         this.onTooltip = options.onTooltip;
@@ -45,11 +46,6 @@ export class Sparkline {
     }
 
     _adjustSize() {
-        if (!this._rootSvgEl) {
-            console.warn("NOPE");
-            debugger;
-            return;
-        }
         const {width, height} = this._rootSvgEl.getBoundingClientRect();
         if (!width || !height) {
             return;
@@ -91,7 +87,6 @@ export class Sparkline {
             this._resizeObserver.disconnect();
             old.removeEventListener('pointerover', this.onPointeroverForTooltips);
         }
-        const pathId = `path-def-${this.id}`;
         if (!merge) {
             el.innerHTML =
                 `<div class="sauce-sparkline sl-wrap resize-observer" style="position:relative;">
@@ -105,20 +100,26 @@ export class Sparkline {
         if (!defs) {
             throw new Error('Existing merge target element is not a sparkline');
         }
+        const pathId = `path-def-${this.id}`;
         defs.insertAdjacentHTML('beforeend', `
-            <clipPath data-sparkline-id="${this.id}" id="${pathId}-clip">
+            <clipPath data-sl-id="${this.id}" id="${pathId}-clip">
                 <path class="sl-data-def sl-area"/>
             </clipPath>`);
         el.querySelector('svg.sl-root').insertAdjacentHTML('beforeend', `
-            <g data-sparkline-id="${this.id}" class="sl-plot-region">
+            <g data-sl-id="${this.id}" class="sl-plot-region">
                 <foreignObject class="sl-css-background" clip-path="url(#${pathId}-clip)"
                                width="100%" height="100%">
                     <div class="sl-visual-data-area"></div>
                 </foreignObject>
                 <path class="sl-data-def sl-line sl-visual-data-line"/>
                 <g class="sl-points"></g>
             </g>`);
-        const qs = `[data-sparkline-id="${this.id}"]`;
+        if (this.title) {
+            el.querySelector(':scope > .sl-wrap').insertAdjacentHTML(
+                'beforeend',
+                `<div data-sl-id="${this.id}" class="sl-title">${this.title}</div>`);
+        }
+        const qs = `[data-sl-id="${this.id}"]`;
         this._rootSvgEl = el.querySelector(`svg.sl-root`);
         this._plotRegionEl = el.querySelector(`${qs}.sl-plot-region`);
         this._pointsEl = el.querySelector(`${qs} g.sl-points`);