Upload benchmark-chart.js with huggingface_hub

benchmark-chart.js

@@ -9,7 +9,8 @@ class ResmpBenchmarkChart extends HTMLElement {
   render() {
     const cfg = this._config;
     if (!cfg) return;
-    const all = cfg.groups.flatMap(g => g.panels.flatMap(p => Object.values(p.values)));
+    this.validate(cfg);
+    const all = cfg.groups.flatMap(g => g.panels.flatMap(p => Object.values(p.values))).filter(Number.isFinite);
     const min = Math.min(0, ...all), max = Math.max(1, ...all);
     this.innerHTML = `<section class="resmp-chart">
       <header class="chart-head">
@@ -33,13 +34,28 @@ class ResmpBenchmarkChart extends HTMLElement {
     const gap = 7, barW = Math.min(36, (width-left-right-gap*(series.length-1))/series.length);
     const total = series.length * barW + (series.length - 1) * gap, start = (width - total) / 2;
     const bars = series.map((s, i) => {
-      const v = Number(panel.values[s.id] ?? 0), yv = top + ((max - v) / (max - min)) * plotH;
+      const raw = panel.values[s.id];
+      if (raw === null || raw === undefined || !Number.isFinite(Number(raw))) {
+        const x = start + i * (barW + gap);
+        return `<g><rect x="${x}" y="${top}" width="${barW}" height="${plotH}" fill="none" stroke="${this.escape(s.color)}" stroke-dasharray="3 3" opacity=".35"/><text x="${x+barW/2}" y="${zeroY-6}" text-anchor="middle" class="value">N/A</text></g>`;
+      }
+      const v = Number(raw), yv = top + ((max - v) / (max - min)) * plotH;
       const y = Math.min(yv, zeroY), h = Math.max(1, Math.abs(zeroY - yv)), x = start + i * (barW + gap);
       const labelY = v >= 0 ? y - 5 : y + h + 11;
       return `<g><rect x="${x}" y="${y}" width="${barW}" height="${h}" fill="${this.escape(s.color)}"/><text x="${x+barW/2}" y="${labelY}" text-anchor="middle" class="value">${v.toFixed(2)}</text><text x="${x+barW/2}" y="${Math.min(y+h-7, zeroY-7)}" text-anchor="middle" class="series-code">${this.escape(s.id.slice(0,2).toUpperCase())}</text></g>`;
     }).join('');
     return `<figure><svg viewBox="0 0 ${width} ${height}" role="img" aria-label="${this.escape(panel.name)} benchmark"><line x1="${left}" y1="${zeroY}" x2="${width-right}" y2="${zeroY}" class="baseline"/>${bars}<text x="${width/2}" y="${height-8}" text-anchor="middle" class="panel-name">${this.escape(panel.name)}</text></svg></figure>`;
   }
+  validate(cfg) {
+    if (!cfg || typeof cfg !== 'object') throw new TypeError('Benchmark config must be an object.');
+    if (!Array.isArray(cfg.series) || cfg.series.length < 1) throw new TypeError('Benchmark config requires at least one series.');
+    if (!Array.isArray(cfg.groups) || cfg.groups.length < 1) throw new TypeError('Benchmark config requires at least one group.');
+    const ids = cfg.series.map(s => s.id);
+    if (new Set(ids).size !== ids.length) throw new TypeError('Series IDs must be unique.');
+    for (const group of cfg.groups) {
+      if (!Array.isArray(group.panels) || group.panels.length < 1) throw new TypeError(`Group ${group.name || '(unnamed)'} requires panels.`);
+    }
+  }
   exportSvg() {
     const chart = this.querySelector('.resmp-chart').cloneNode(true); chart.querySelector('.chart-actions')?.remove();
     const css = [...document.styleSheets].flatMap(s => { try { return [...s.cssRules].map(r=>r.cssText) } catch { return [] } }).join('\n');