codebase-onboarder 0.1.0

package/public/js/components/MetricSparkline.js

@@ -0,0 +1,89 @@
+export class MetricSparkline extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  static get observedAttributes() {
+    return ['values', 'label'];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      this.render();
+    }
+  }
+
+  render() {
+    const valuesStr = this.getAttribute('values') || '';
+    const label = this.getAttribute('label') || '';
+    const values = valuesStr.split(',').map(n => parseFloat(n)).filter(n => !isNaN(n));
+    
+    if (values.length === 0) {
+      this.shadowRoot.innerHTML = '';
+      return;
+    }
+
+    const width = 120;
+    const height = 32;
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const range = max - min || 1;
+    
+    const points = values.map((val, i) => {
+      const x = (i / (values.length - 1)) * width;
+      const y = height - ((val - min) / range) * (height - 4) - 2;
+      return `${x},${y}`;
+    }).join(' ');
+
+    const fillPoints = `0,${height} ${points} ${width},${height}`;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-flex;
+          flex-direction: column;
+          align-items: center;
+          width: var(--sparkline-width, 120px);
+        }
+        svg {
+          width: 100%;
+          height: var(--sparkline-height, 32px);
+        }
+        polyline {
+          fill: none;
+          stroke: var(--sparkline-color, #2196F3);
+          stroke-width: 2;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+        polygon {
+          fill: url(#grad);
+          opacity: 0.2;
+        }
+        .label {
+          font-size: 10px;
+          color: #666;
+          margin-top: 4px;
+        }
+      </style>
+      <svg viewBox="0 0 ${width} ${height}" preserveAspectRatio="none">
+        <defs>
+          <linearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="var(--sparkline-color, #2196F3)"/>
+            <stop offset="100%" stop-color="var(--sparkline-color, #2196F3)" stop-opacity="0"/>
+          </linearGradient>
+        </defs>
+        <polygon points="${fillPoints}" />
+        <polyline points="${points}" />
+      </svg>
+      ${label ? `<div class="label">${label}</div>` : ''}
+    `;
+  }
+}
+
+customElements.define('metric-sparkline', MetricSparkline);

package/public/js/components/RiskBadge.js

@@ -0,0 +1,105 @@
+export class RiskBadge extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  static get observedAttributes() {
+    return ['score'];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'score' && oldValue !== newValue) {
+      this.updateScore(parseInt(newValue, 10) || 0);
+    }
+  }
+
+  getScoreColor(score) {
+    if (score <= 33) return 'rgb(76, 175, 80)';
+    if (score <= 66) return 'rgb(255, 193, 7)';
+    return 'rgb(244, 67, 54)';
+  }
+
+  render() {
+    const score = parseInt(this.getAttribute('score') || '0', 10);
+    const size = 48;
+    const strokeWidth = 4;
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          width: var(--risk-size, 48px);
+          height: var(--risk-size, 48px);
+        }
+        svg {
+          transform: rotate(-90deg);
+          width: 100%;
+          height: 100%;
+        }
+        .bg {
+          fill: none;
+          stroke: rgba(128, 128, 128, 0.2);
+          stroke-width: ${strokeWidth};
+        }
+        .arc {
+          fill: none;
+          stroke: ${this.getScoreColor(score)};
+          stroke-width: ${strokeWidth};
+          stroke-linecap: round;
+          stroke-dasharray: ${circumference};
+          stroke-dashoffset: ${circumference};
+        }
+        .text {
+          position: absolute;
+          font-family: monospace;
+          font-size: 14px;
+          font-weight: bold;
+        }
+      </style>
+      <svg viewBox="0 0 ${size} ${size}">
+        <circle class="bg" cx="${size/2}" cy="${size/2}" r="${radius}" />
+        <circle class="arc" cx="${size/2}" cy="${size/2}" r="${radius}" />
+      </svg>
+      <span class="text">${score}</span>
+    `;
+    this.updateScore(score);
+  }
+
+  updateScore(score) {
+    if (!this.shadowRoot.querySelector('.arc')) return;
+    
+    const size = 48;
+    const strokeWidth = 4;
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (score / 100) * circumference;
+    
+    const arc = this.shadowRoot.querySelector('.arc');
+    const text = this.shadowRoot.querySelector('.text');
+    
+    const color = this.getScoreColor(score);
+    arc.style.stroke = color;
+    text.textContent = score;
+
+    arc.animate([
+      { strokeDashoffset: circumference },
+      { strokeDashoffset: offset }
+    ], {
+      duration: 1000,
+      easing: 'ease-out',
+      fill: 'forwards'
+    });
+  }
+}
+
+customElements.define('risk-badge', RiskBadge);