| 1 | --- |
| 2 | const accent = "var(--alc-accent-deep)"; |
| 3 | const danger = "var(--alc-danger)"; |
| 4 | const ok = "var(--alc-success)"; |
| 5 | --- |
| 6 | |
| 7 | <svg viewBox="0 0 280 130" width="100%" height="100%" aria-hidden="true" preserveAspectRatio="xMidYMid meet"> |
| 8 | <!-- chart background --> |
| 9 | <g transform="translate(28 22)"> |
| 10 | <rect width="224" height="74" rx="8" fill="var(--alc-bg-code)" stroke="var(--alc-hairline-2)" stroke-width="1" /> |
| 11 | |
| 12 | <!-- axis label --> |
| 13 | <text x="10" y="14" font-family="var(--alc-font-mono)" font-size="9" fill="var(--alc-fg-3)">p99 latency</text> |
| 14 | <text x="214" y="14" text-anchor="end" font-family="var(--alc-font-mono)" font-size="9" fill={danger} font-weight="700">▲ ALARM</text> |
| 15 | |
| 16 | <!-- gridlines --> |
| 17 | <line x1="10" y1="32" x2="214" y2="32" stroke="var(--alc-hairline-2)" stroke-width="0.8" opacity="0.5" /> |
| 18 | <line x1="10" y1="50" x2="214" y2="50" stroke="var(--alc-hairline-2)" stroke-width="0.8" opacity="0.5" /> |
| 19 | |
| 20 | <!-- threshold dashed --> |
| 21 | <line x1="10" y1="38" x2="214" y2="38" stroke={danger} stroke-width="1" stroke-dasharray="4 4" opacity="0.7" /> |
| 22 | <text x="208" y="36" text-anchor="end" font-family="var(--alc-font-mono)" font-size="8" fill={danger} opacity="0.85">500ms</text> |
| 23 | |
| 24 | <!-- sparkline rising and crossing threshold --> |
| 25 | <path |
| 26 | d="M 10 60 L 30 56 L 50 58 L 70 50 L 90 52 L 110 46 L 130 48 L 150 42 L 170 38 L 185 32 L 200 24 L 214 18" |
| 27 | stroke={danger} |
| 28 | stroke-width="1.6" |
| 29 | fill="none" |
| 30 | stroke-linecap="round" |
| 31 | stroke-linejoin="round" |
| 32 | /> |
| 33 | <circle cx="214" cy="18" r="3" fill={danger} /> |
| 34 | <!-- threshold cross marker --> |
| 35 | <circle cx="185" cy="32" r="2" fill={ok} opacity="0.7" /> |
| 36 | </g> |
| 37 | |
| 38 | <!-- caption --> |
| 39 | <text x="140" y="118" text-anchor="middle" font-family="var(--alc-font-hand)" font-size="13" fill={accent} font-style="italic"> |
| 40 | OTel · dashboards · alarms — in code |
| 41 | </text> |
| 42 | </svg> |