lukilabs--beautiful-mermaid
wehub-resource-sync
3320 行
441 KiB
HTML
3320 行
441 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="theme-color" id="theme-color-meta" content="#f9f9fa" />
|
||
<title>XY Chart Test — Beautiful Mermaid</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
--t-bg: #FFFFFF;
|
||
--t-fg: #27272A;
|
||
--t-accent: #3b82f6;
|
||
--foreground-rgb: 39, 39, 42;
|
||
--accent-rgb: 59, 130, 246;
|
||
--shadow-border-opacity: 0.08;
|
||
--shadow-blur-opacity: 0.06;
|
||
--theme-bar-bg: #f9f9fa;
|
||
|
||
font-family: 'Geist', system-ui, -apple-system, sans-serif;
|
||
background: color-mix(in srgb, var(--t-fg) 4%, var(--t-bg));
|
||
color: var(--t-fg);
|
||
line-height: 1.6;
|
||
margin: 0;
|
||
transition: background 0.2s, color 0.2s;
|
||
}
|
||
.content-wrapper {
|
||
max-width: 1440px;
|
||
margin: 0 auto;
|
||
padding: 2rem;
|
||
padding-top: 0;
|
||
}
|
||
@media (min-width: 1000px) {
|
||
.content-wrapper { padding: 3rem; padding-top: 0; }
|
||
}
|
||
|
||
body::before, body::after {
|
||
content: '';
|
||
position: fixed;
|
||
left: 0; right: 0;
|
||
height: 64px;
|
||
pointer-events: none;
|
||
z-index: 1000;
|
||
will-change: transform;
|
||
}
|
||
body::before {
|
||
top: 0;
|
||
background: linear-gradient(to bottom, var(--theme-bar-bg) 0%, transparent 100%);
|
||
}
|
||
body::after {
|
||
bottom: 0;
|
||
background: linear-gradient(to top, var(--theme-bar-bg) 0%, transparent 100%);
|
||
}
|
||
|
||
/* Theme bar */
|
||
.theme-bar {
|
||
position: sticky; top: 0; z-index: 1001;
|
||
background: transparent;
|
||
padding: 0.5rem 2rem;
|
||
display: flex; align-items: center; gap: 0.75rem;
|
||
overflow: visible;
|
||
}
|
||
.theme-label {
|
||
font-size: 0.7rem; font-weight: 600;
|
||
text-transform: uppercase; letter-spacing: 0.06em;
|
||
color: color-mix(in srgb, var(--t-fg) 35%, var(--t-bg));
|
||
white-space: nowrap;
|
||
}
|
||
.theme-pills {
|
||
display: flex; gap: 0.3rem; overflow: visible;
|
||
padding: 4px; margin: -4px; margin-left: auto;
|
||
position: relative; z-index: 2;
|
||
}
|
||
.theme-pills-inline { display: flex; gap: 0.3rem; }
|
||
@media (max-width: 1024px) {
|
||
.theme-pills-inline { display: none; }
|
||
}
|
||
.theme-pill {
|
||
display: flex; align-items: center; height: 30px;
|
||
gap: 8px; padding: 0 14px 0 12px; border: none; border-radius: 8px;
|
||
background: color-mix(in srgb, var(--t-bg) 97%, var(--t-fg));
|
||
color: color-mix(in srgb, var(--t-fg) 80%, var(--t-bg));
|
||
font-size: 12px; font-weight: 500; font-family: inherit;
|
||
cursor: pointer; white-space: nowrap;
|
||
transition: color 0.15s, background 0.15s, box-shadow 0.2s, transform 0.1s;
|
||
}
|
||
.theme-pill:hover {
|
||
color: var(--t-fg);
|
||
background: color-mix(in srgb, var(--t-bg) 92%, var(--t-fg));
|
||
}
|
||
.theme-pill.active {
|
||
color: var(--t-fg); background: var(--t-bg); font-weight: 600;
|
||
}
|
||
.theme-pill:active { transform: translateY(0.5px); }
|
||
.theme-swatch {
|
||
display: inline-block; width: 14px; height: 14px;
|
||
border-radius: 50%; flex-shrink: 0;
|
||
}
|
||
|
||
.theme-more-wrapper { position: relative; }
|
||
.theme-more-dropdown {
|
||
display: none; position: absolute; top: calc(100% + 6px); right: 0;
|
||
background: var(--t-bg); border-radius: 12px; padding: 6px;
|
||
flex-direction: column; gap: 2px; min-width: 160px; z-index: 1002;
|
||
}
|
||
.theme-more-dropdown.open { display: flex; }
|
||
.theme-more-dropdown .theme-pill {
|
||
width: 100%; justify-content: flex-start;
|
||
background: transparent; box-shadow: none;
|
||
}
|
||
.theme-more-dropdown .theme-pill:hover {
|
||
background: color-mix(in srgb, var(--t-bg) 92%, var(--t-fg));
|
||
}
|
||
.theme-more-dropdown .theme-pill.active,
|
||
.theme-more-dropdown .theme-pill.shadow-tinted {
|
||
background: var(--t-bg);
|
||
box-shadow:
|
||
rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px,
|
||
rgba(var(--foreground-rgb), 0.06) 0px 0px 0px 1px,
|
||
rgba(0,0,0,var(--shadow-blur-opacity)) 0px 1px 1px -0.5px,
|
||
rgba(0,0,0,var(--shadow-blur-opacity)) 0px 3px 3px -1.5px;
|
||
}
|
||
|
||
/* Contents button */
|
||
.contents-btn {
|
||
position: absolute; left: 50%; transform: translateX(-50%);
|
||
display: flex; align-items: center; height: 30px; gap: 6px;
|
||
padding: 0 12px; border: none; border-radius: 8px;
|
||
background: color-mix(in srgb, var(--t-bg) 97%, var(--t-fg));
|
||
color: color-mix(in srgb, var(--t-fg) 80%, var(--t-bg));
|
||
font-size: 12px; font-weight: 500; font-family: inherit;
|
||
cursor: pointer; white-space: nowrap;
|
||
transition: color 0.15s, background 0.15s, box-shadow 0.2s, transform 0.1s;
|
||
}
|
||
.contents-btn:hover {
|
||
color: var(--t-fg);
|
||
background: color-mix(in srgb, var(--t-bg) 92%, var(--t-fg));
|
||
}
|
||
.contents-btn.active { color: var(--t-fg); background: var(--t-bg); }
|
||
.contents-btn:active { transform: translateX(-50%) translateY(0.5px); }
|
||
.contents-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
|
||
|
||
/* Shadow utilities */
|
||
.shadow-minimal {
|
||
box-shadow:
|
||
rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px,
|
||
rgba(var(--foreground-rgb), 0.06) 0px 0px 0px 1px,
|
||
rgba(0,0,0,var(--shadow-blur-opacity)) 0px 1px 1px -0.5px,
|
||
rgba(0,0,0,var(--shadow-blur-opacity)) 0px 3px 3px -1.5px;
|
||
}
|
||
.shadow-modal-small {
|
||
box-shadow:
|
||
rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px,
|
||
rgba(var(--foreground-rgb), 0.06) 0px 0px 0px 1px,
|
||
rgba(0,0,0,calc(var(--shadow-blur-opacity)*0.67)) 0px 1px 1px -0.5px,
|
||
rgba(0,0,0,calc(var(--shadow-blur-opacity)*0.67)) 0px 3px 3px 0px,
|
||
rgba(0,0,0,calc(var(--shadow-blur-opacity)*0.33)) 0px 6px 6px 0px,
|
||
rgba(0,0,0,calc(var(--shadow-blur-opacity)*0.33)) 0px 12px 12px 0px,
|
||
rgba(0,0,0,calc(var(--shadow-blur-opacity)*0.33)) 0px 24px 24px 0px;
|
||
}
|
||
.shadow-tinted {
|
||
--shadow-color: 0, 0, 0;
|
||
box-shadow:
|
||
rgba(var(--shadow-color),0) 0px 0px 0px 0px, rgba(var(--shadow-color),0) 0px 0px 0px 0px,
|
||
rgba(var(--shadow-color),calc(var(--shadow-border-opacity)*1.5)) 0px 0px 0px 1px,
|
||
rgba(var(--shadow-color),var(--shadow-border-opacity)) 0px 1px 1px -0.5px,
|
||
rgba(var(--shadow-color),var(--shadow-blur-opacity)) 0px 3px 3px -1.5px,
|
||
rgba(var(--shadow-color),calc(var(--shadow-blur-opacity)*0.67)) 0px 6px 6px -3px;
|
||
}
|
||
|
||
/* Mega menu */
|
||
.mega-menu {
|
||
display: none; position: absolute; top: calc(100% + 6px);
|
||
left: 50%; transform: translateX(-50%);
|
||
max-width: 1180px; width: max-content;
|
||
background: var(--t-bg); border-radius: 12px;
|
||
padding: 1.5rem 2rem; max-height: 70vh;
|
||
overflow-y: auto; z-index: 998;
|
||
}
|
||
.mega-menu.open { display: block; }
|
||
.toc-grid { columns: 3; column-gap: 2rem; }
|
||
.toc-category {
|
||
display: inline-block; width: 100%;
|
||
margin: 0; padding-bottom: 1rem;
|
||
}
|
||
.toc-category h3 {
|
||
font-size: 0.85rem; font-weight: 600;
|
||
margin: 0 0 0.5rem 0; color: var(--t-fg);
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||
}
|
||
.toc-category ol {
|
||
padding: 0; margin: 0; list-style: none; font-size: 0.8rem;
|
||
}
|
||
.toc-category li {
|
||
margin-bottom: 0.15rem;
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||
}
|
||
.toc-category a { color: var(--t-fg); text-decoration: none; }
|
||
.toc-category a:hover { text-decoration: underline; }
|
||
.toc-num { color: color-mix(in srgb, var(--t-fg) 30%, var(--t-bg)); }
|
||
|
||
/* Sample card */
|
||
.sample {
|
||
background: var(--t-bg);
|
||
margin-bottom: 2rem;
|
||
overflow: hidden;
|
||
}
|
||
.sample-header {
|
||
padding: 1.25rem 1.5rem;
|
||
max-width: 48rem;
|
||
border-bottom: 1px solid color-mix(in srgb, var(--t-fg) 5%, var(--t-bg));
|
||
}
|
||
.sample-header h2 {
|
||
font-size: 1.5rem; font-weight: 500; color: var(--t-fg);
|
||
}
|
||
.description {
|
||
color: color-mix(in srgb, var(--t-fg) 50%, var(--t-bg));
|
||
font-size: 1rem; font-weight: 400; margin-top: 0.1rem;
|
||
}
|
||
.description code {
|
||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||
font-size: 0.875em;
|
||
color: color-mix(in srgb, var(--t-fg) 85%, var(--t-bg));
|
||
background: color-mix(in srgb, var(--t-fg) 6%, var(--t-bg));
|
||
padding: 0.15rem 0.4rem; border-radius: 3px;
|
||
}
|
||
|
||
.sample-content {
|
||
display: grid;
|
||
grid-template-columns: minmax(180px, 0.8fr) minmax(280px, 1fr) minmax(280px, 1fr);
|
||
min-height: 350px;
|
||
}
|
||
@media (max-width: 900px) {
|
||
.sample-content { grid-template-columns: 1fr; }
|
||
.chart-panel { border-left: none !important; border-top: 1px solid color-mix(in srgb, var(--t-fg) 5%, var(--t-bg)) !important; }
|
||
.svg-panel { border-left: none !important; border-top: 1px solid color-mix(in srgb, var(--t-fg) 5%, var(--t-bg)) !important; }
|
||
}
|
||
|
||
/* Source panel */
|
||
.source-panel {
|
||
padding: 0.75rem 1.5rem;
|
||
border-right: 1px solid color-mix(in srgb, var(--t-fg) 5%, var(--t-bg));
|
||
min-width: 0; overflow-y: auto;
|
||
background: color-mix(in srgb, var(--t-fg) 1.5%, var(--t-bg));
|
||
}
|
||
.source-panel .shiki {
|
||
background: transparent !important;
|
||
padding: 0.5rem 0; font-size: 0.8rem; line-height: 1.5;
|
||
overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin: 0;
|
||
}
|
||
.source-panel .shiki code {
|
||
background: transparent;
|
||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||
}
|
||
.source-panel .shiki,
|
||
.source-panel .shiki span[style*="#24292e"],
|
||
.source-panel .shiki span[style*="#24292E"] {
|
||
color: color-mix(in srgb, var(--t-fg) 70%, var(--t-bg)) !important;
|
||
}
|
||
.source-panel .shiki span[style*="#D73A49"],
|
||
.source-panel .shiki span[style*="#d73a49"] {
|
||
color: color-mix(in srgb, var(--t-fg) 90%, var(--t-bg)) !important;
|
||
font-weight: 500;
|
||
}
|
||
.source-panel .shiki span[style*="#6F42C1"],
|
||
.source-panel .shiki span[style*="#6f42c1"] {
|
||
color: color-mix(in srgb, var(--t-fg) 65%, var(--t-bg)) !important;
|
||
}
|
||
.source-panel .shiki span[style*="#E36209"],
|
||
.source-panel .shiki span[style*="#e36209"] {
|
||
color: color-mix(in srgb, var(--t-fg) 75%, var(--t-bg)) !important;
|
||
}
|
||
.source-panel .shiki span[style*="#032F62"],
|
||
.source-panel .shiki span[style*="#032f62"] {
|
||
color: color-mix(in srgb, var(--t-fg) 50%, var(--t-bg)) !important;
|
||
}
|
||
|
||
/* Chart panel */
|
||
.chart-panel {
|
||
padding: 1.25rem 1.5rem;
|
||
display: flex; align-items: center; justify-content: center;
|
||
min-width: 0;
|
||
border-right: 1px solid color-mix(in srgb, var(--t-fg) 5%, var(--t-bg));
|
||
}
|
||
.chart-panel canvas {
|
||
max-width: 100%;
|
||
max-height: 320px;
|
||
}
|
||
|
||
/* SVG panel */
|
||
.svg-panel {
|
||
padding: 1.25rem 1.5rem;
|
||
display: flex; align-items: center; justify-content: center;
|
||
min-width: 0;
|
||
background: color-mix(in srgb, var(--t-fg) 1.5%, var(--t-bg));
|
||
}
|
||
.svg-panel svg {
|
||
max-width: 100%;
|
||
max-height: 420px;
|
||
height: auto;
|
||
}
|
||
.svg-loading {
|
||
font-size: 0.85rem; font-weight: 400;
|
||
color: color-mix(in srgb, var(--t-fg) 25%, var(--t-bg));
|
||
}
|
||
|
||
/* Section title */
|
||
.section-title {
|
||
font-size: 1.875rem; font-weight: 800; line-height: 1.2;
|
||
margin: 0; padding: 2.5rem 0 1.5rem; color: var(--t-fg);
|
||
}
|
||
|
||
/* Hero header */
|
||
.hero-header {
|
||
max-width: 1440px; margin: 0 auto;
|
||
padding: 6rem 2rem 2rem; text-align: left;
|
||
}
|
||
@media (min-width: 1000px) {
|
||
.hero-header { padding: 6rem 3rem 2rem; }
|
||
}
|
||
.hero-title {
|
||
font-size: 2.25rem; font-weight: 800; line-height: 1.2;
|
||
margin: 0 0 0.25rem; color: var(--t-fg);
|
||
}
|
||
.hero-tagline {
|
||
font-size: 1rem; font-weight: 500;
|
||
color: color-mix(in srgb, var(--t-fg) 50%, var(--t-bg));
|
||
margin: 0 0 1rem;
|
||
}
|
||
.hero-description {
|
||
font-size: 0.95rem; line-height: 1.6;
|
||
color: color-mix(in srgb, var(--t-fg) 70%, var(--t-bg));
|
||
margin: 0 0 1.5rem; max-width: 680px;
|
||
}
|
||
.hero-meta { margin-top: 1.25rem; }
|
||
.hero-meta .meta {
|
||
font-size: 0.85rem;
|
||
color: color-mix(in srgb, var(--t-fg) 40%, var(--t-bg));
|
||
margin: 0.15rem 0;
|
||
}
|
||
|
||
/* Footer */
|
||
.site-footer {
|
||
position: relative; z-index: 10;
|
||
padding: 1.5rem 2rem 2rem;
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
max-width: 1440px; width: 100%; margin: 0 auto;
|
||
font-size: 12px;
|
||
color: color-mix(in srgb, var(--t-fg) 50%, var(--t-bg));
|
||
}
|
||
@media (min-width: 1000px) {
|
||
.site-footer { padding: 1.5rem 3rem 2rem; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="safari-theme-color" style="position:fixed;top:0;left:0;right:0;height:1px;background:var(--theme-bar-bg);z-index:9999;pointer-events:none;"></div>
|
||
|
||
<div class="theme-bar" id="theme-bar">
|
||
<div style="font-size:12px;font-weight:600;color:color-mix(in srgb, var(--t-fg) 80%, var(--t-bg));white-space:nowrap;">XY Chart Test</div>
|
||
<button class="contents-btn shadow-minimal" id="contents-btn"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="3" y1="4" x2="13" y2="4"/><line x1="3" y1="8" x2="13" y2="8"/><line x1="3" y1="12" x2="10" y2="12"/></svg>Contents</button>
|
||
<div class="theme-pills" id="theme-pills">
|
||
|
||
<div class="theme-pills-inline">
|
||
<button class="theme-pill shadow-minimal active" data-theme=""><span class="theme-swatch" style="background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1)"></span>Default</button>
|
||
<button class="theme-pill shadow-minimal" data-theme="dracula"><span class="theme-swatch" style="background:#282a36;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15)"></span>Dracula</button>
|
||
<button class="theme-pill shadow-minimal" data-theme="solarized-light"><span class="theme-swatch" style="background:#fdf6e3;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1)"></span>Solarized</button>
|
||
</div>
|
||
<div class="theme-more-wrapper">
|
||
<button class="theme-pill shadow-minimal" id="theme-more-btn">15 Themes</button>
|
||
<div class="theme-more-dropdown shadow-modal-small" id="theme-more-dropdown">
|
||
<button class="theme-pill shadow-minimal active" data-theme=""><span class="theme-swatch" style="background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1)"></span>Default</button>
|
||
<button class="theme-pill shadow-minimal" data-theme="zinc-dark"><span class="theme-swatch" style="background:#18181B;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15)"></span>Zinc Dark</button>
|
||
<button class="theme-pill shadow-minimal" data-theme="tokyo-night"><span class="theme-swatch" style="background:#1a1b26;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15)"></span>Tokyo Night</button>
|
||
<button class="theme-pill shadow-minimal" data-theme="tokyo-night-storm"><span class="theme-swatch" style="background:#24283b;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15)"></span>Tokyo Storm</button>
|
||
<button class="theme-pill shadow-minimal" data-theme="tokyo-night-light"><span class="theme-swatch" style="background:#d5d6db;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1)"></span>Tokyo Light</button>
|
||
<button class="theme-pill shadow-minimal" data-theme="catppuccin-mocha"><span class="theme-swatch" style="background:#1e1e2e;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15)"></span>Catppuccin</button>
|
||
<button class="theme-pill shadow-minimal" data-theme="catppuccin-latte"><span class="theme-swatch" style="background:#eff1f5;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1)"></span>Latte</button>
|
||
<button class="theme-pill shadow-minimal" data-theme="nord"><span class="theme-swatch" style="background:#2e3440;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15)"></span>Nord</button>
|
||
<button class="theme-pill shadow-minimal" data-theme="nord-light"><span class="theme-swatch" style="background:#eceff4;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1)"></span>Nord Light</button>
|
||
<button class="theme-pill shadow-minimal" data-theme="dracula"><span class="theme-swatch" style="background:#282a36;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15)"></span>Dracula</button>
|
||
<button class="theme-pill shadow-minimal" data-theme="github-light"><span class="theme-swatch" style="background:#ffffff;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1)"></span>GitHub</button>
|
||
<button class="theme-pill shadow-minimal" data-theme="github-dark"><span class="theme-swatch" style="background:#0d1117;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15)"></span>GitHub Dark</button>
|
||
<button class="theme-pill shadow-minimal" data-theme="solarized-light"><span class="theme-swatch" style="background:#fdf6e3;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1)"></span>Solarized</button>
|
||
<button class="theme-pill shadow-minimal" data-theme="solarized-dark"><span class="theme-swatch" style="background:#002b36;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15)"></span>Solar Dark</button>
|
||
<button class="theme-pill shadow-minimal" data-theme="one-dark"><span class="theme-swatch" style="background:#282c34;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15)"></span>One Dark</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mega-menu shadow-modal-small" id="mega-menu">
|
||
<div class="toc-grid">
|
||
|
||
<div class="toc-category">
|
||
<h3>Basic Bar Charts (10)</h3>
|
||
<ol start="1">
|
||
<li><a href="#sample-0"><span class="toc-num">1.</span> Simple Bar Chart</a></li>
|
||
<li><a href="#sample-1"><span class="toc-num">2.</span> Five-Category Bars</a></li>
|
||
<li><a href="#sample-2"><span class="toc-num">3.</span> Descending Values</a></li>
|
||
<li><a href="#sample-3"><span class="toc-num">4.</span> Single Bar</a></li>
|
||
<li><a href="#sample-4"><span class="toc-num">5.</span> Eight-Category Bars</a></li>
|
||
<li><a href="#sample-5"><span class="toc-num">6.</span> Small Values</a></li>
|
||
<li><a href="#sample-6"><span class="toc-num">7.</span> Uniform Values</a></li>
|
||
<li><a href="#sample-7"><span class="toc-num">8.</span> Wide Range</a></li>
|
||
<li><a href="#sample-8"><span class="toc-num">9.</span> Ten-Category Bars</a></li>
|
||
<li><a href="#sample-9"><span class="toc-num">10.</span> Bars With Y-Axis Range</a></li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="toc-category">
|
||
<h3>Basic Line Charts (10)</h3>
|
||
<ol start="11">
|
||
<li><a href="#sample-10"><span class="toc-num">11.</span> Simple Line Chart</a></li>
|
||
<li><a href="#sample-11"><span class="toc-num">12.</span> Upward Trend</a></li>
|
||
<li><a href="#sample-12"><span class="toc-num">13.</span> Downward Trend</a></li>
|
||
<li><a href="#sample-13"><span class="toc-num">14.</span> Oscillating Values</a></li>
|
||
<li><a href="#sample-14"><span class="toc-num">15.</span> Large Scale Line</a></li>
|
||
<li><a href="#sample-15"><span class="toc-num">16.</span> Flat Line</a></li>
|
||
<li><a href="#sample-16"><span class="toc-num">17.</span> Spike Pattern</a></li>
|
||
<li><a href="#sample-17"><span class="toc-num">18.</span> V-Shape Recovery</a></li>
|
||
<li><a href="#sample-18"><span class="toc-num">19.</span> Step Pattern</a></li>
|
||
<li><a href="#sample-19"><span class="toc-num">20.</span> Two Lines</a></li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="toc-category">
|
||
<h3>Combined Bar + Line (10)</h3>
|
||
<ol start="21">
|
||
<li><a href="#sample-20"><span class="toc-num">21.</span> Bar and Line Overlay</a></li>
|
||
<li><a href="#sample-21"><span class="toc-num">22.</span> Bar with Trend Line</a></li>
|
||
<li><a href="#sample-22"><span class="toc-num">23.</span> Bar with Target Line</a></li>
|
||
<li><a href="#sample-23"><span class="toc-num">24.</span> Revenue and Profit</a></li>
|
||
<li><a href="#sample-24"><span class="toc-num">25.</span> Dual Dataset Overlay</a></li>
|
||
<li><a href="#sample-25"><span class="toc-num">26.</span> Costs vs Revenue</a></li>
|
||
<li><a href="#sample-26"><span class="toc-num">27.</span> Bar with Two Lines</a></li>
|
||
<li><a href="#sample-27"><span class="toc-num">28.</span> Stacked Context</a></li>
|
||
<li><a href="#sample-28"><span class="toc-num">29.</span> Cumulative Line Over Bars</a></li>
|
||
<li><a href="#sample-29"><span class="toc-num">30.</span> Conversion Funnel</a></li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="toc-category">
|
||
<h3>Axis Configurations (15)</h3>
|
||
<ol start="31">
|
||
<li><a href="#sample-30"><span class="toc-num">31.</span> Categorical X-Axis</a></li>
|
||
<li><a href="#sample-31"><span class="toc-num">32.</span> Numeric X-Axis Range</a></li>
|
||
<li><a href="#sample-32"><span class="toc-num">33.</span> Y-Axis with Label and Range</a></li>
|
||
<li><a href="#sample-33"><span class="toc-num">34.</span> Y-Axis Range Without Label</a></li>
|
||
<li><a href="#sample-34"><span class="toc-num">35.</span> X-Axis with Title</a></li>
|
||
<li><a href="#sample-35"><span class="toc-num">36.</span> Both Axes Titled</a></li>
|
||
<li><a href="#sample-36"><span class="toc-num">37.</span> Long Category Labels</a></li>
|
||
<li><a href="#sample-37"><span class="toc-num">38.</span> Many Short Labels</a></li>
|
||
<li><a href="#sample-38"><span class="toc-num">39.</span> Wide Y-Axis Range</a></li>
|
||
<li><a href="#sample-39"><span class="toc-num">40.</span> Narrow Y-Axis Range</a></li>
|
||
<li><a href="#sample-40"><span class="toc-num">41.</span> Auto-Range Y-Axis</a></li>
|
||
<li><a href="#sample-41"><span class="toc-num">42.</span> Year Labels</a></li>
|
||
<li><a href="#sample-42"><span class="toc-num">43.</span> Percentage Y-Axis</a></li>
|
||
<li><a href="#sample-43"><span class="toc-num">44.</span> Numeric X-Axis with Bars</a></li>
|
||
<li><a href="#sample-44"><span class="toc-num">45.</span> Mixed Short and Long Labels</a></li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="toc-category">
|
||
<h3>Horizontal Orientation (10)</h3>
|
||
<ol start="46">
|
||
<li><a href="#sample-45"><span class="toc-num">46.</span> Horizontal Bar Chart</a></li>
|
||
<li><a href="#sample-46"><span class="toc-num">47.</span> Horizontal with Y-Axis</a></li>
|
||
<li><a href="#sample-47"><span class="toc-num">48.</span> Horizontal Line Chart</a></li>
|
||
<li><a href="#sample-48"><span class="toc-num">49.</span> Horizontal Combined</a></li>
|
||
<li><a href="#sample-49"><span class="toc-num">50.</span> Horizontal Ranking</a></li>
|
||
<li><a href="#sample-50"><span class="toc-num">51.</span> Horizontal Small Values</a></li>
|
||
<li><a href="#sample-51"><span class="toc-num">52.</span> Horizontal Two Bars</a></li>
|
||
<li><a href="#sample-52"><span class="toc-num">53.</span> Horizontal Wide Range</a></li>
|
||
<li><a href="#sample-53"><span class="toc-num">54.</span> Horizontal with Two Lines</a></li>
|
||
<li><a href="#sample-54"><span class="toc-num">55.</span> Horizontal Long Labels</a></li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="toc-category">
|
||
<h3>Titles & Formatting (10)</h3>
|
||
<ol start="56">
|
||
<li><a href="#sample-55"><span class="toc-num">56.</span> No Title</a></li>
|
||
<li><a href="#sample-56"><span class="toc-num">57.</span> Short Title</a></li>
|
||
<li><a href="#sample-57"><span class="toc-num">58.</span> Long Title</a></li>
|
||
<li><a href="#sample-58"><span class="toc-num">59.</span> Title with Numbers</a></li>
|
||
<li><a href="#sample-59"><span class="toc-num">60.</span> Title with Special Characters</a></li>
|
||
<li><a href="#sample-60"><span class="toc-num">61.</span> Title with Ampersand</a></li>
|
||
<li><a href="#sample-61"><span class="toc-num">62.</span> Title with Hyphen</a></li>
|
||
<li><a href="#sample-62"><span class="toc-num">63.</span> Minimal Chart</a></li>
|
||
<li><a href="#sample-63"><span class="toc-num">64.</span> Full Specification</a></li>
|
||
<li><a href="#sample-64"><span class="toc-num">65.</span> Title with Colon</a></li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="toc-category">
|
||
<h3>Large Datasets (10)</h3>
|
||
<ol start="66">
|
||
<li><a href="#sample-65"><span class="toc-num">66.</span> 12-Month Dataset</a></li>
|
||
<li><a href="#sample-66"><span class="toc-num">67.</span> 26-Point Alphabet</a></li>
|
||
<li><a href="#sample-67"><span class="toc-num">68.</span> Dense Weekly Data</a></li>
|
||
<li><a href="#sample-68"><span class="toc-num">69.</span> Multiple Series Large</a></li>
|
||
<li><a href="#sample-69"><span class="toc-num">70.</span> Two Bars Twelve Months</a></li>
|
||
<li><a href="#sample-70"><span class="toc-num">71.</span> High Frequency Data</a></li>
|
||
<li><a href="#sample-71"><span class="toc-num">72.</span> Large Values Dataset</a></li>
|
||
<li><a href="#sample-72"><span class="toc-num">73.</span> Three Lines Large</a></li>
|
||
<li><a href="#sample-73"><span class="toc-num">74.</span> Quarterly Four Years</a></li>
|
||
<li><a href="#sample-74"><span class="toc-num">75.</span> Dense Bars and Line</a></li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="toc-category">
|
||
<h3>Edge Cases (10)</h3>
|
||
<ol start="76">
|
||
<li><a href="#sample-75"><span class="toc-num">76.</span> Single Data Point</a></li>
|
||
<li><a href="#sample-76"><span class="toc-num">77.</span> All Zeros</a></li>
|
||
<li><a href="#sample-77"><span class="toc-num">78.</span> Very Large Numbers</a></li>
|
||
<li><a href="#sample-78"><span class="toc-num">79.</span> Very Small Numbers</a></li>
|
||
<li><a href="#sample-79"><span class="toc-num">80.</span> Two Data Points</a></li>
|
||
<li><a href="#sample-80"><span class="toc-num">81.</span> Single Value Repeated</a></li>
|
||
<li><a href="#sample-81"><span class="toc-num">82.</span> Extreme Outlier</a></li>
|
||
<li><a href="#sample-82"><span class="toc-num">83.</span> Descending to Zero</a></li>
|
||
<li><a href="#sample-83"><span class="toc-num">84.</span> Ascending from Zero</a></li>
|
||
<li><a href="#sample-84"><span class="toc-num">85.</span> Alternating High Low</a></li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="toc-category">
|
||
<h3>Real-World Scenarios (15)</h3>
|
||
<ol start="86">
|
||
<li><a href="#sample-85"><span class="toc-num">86.</span> Monthly Revenue Report</a></li>
|
||
<li><a href="#sample-86"><span class="toc-num">87.</span> Cumulative Registered Users</a></li>
|
||
<li><a href="#sample-87"><span class="toc-num">88.</span> Temperature Over the Year</a></li>
|
||
<li><a href="#sample-88"><span class="toc-num">89.</span> Stock Price Trend</a></li>
|
||
<li><a href="#sample-89"><span class="toc-num">90.</span> Survey Results</a></li>
|
||
<li><a href="#sample-90"><span class="toc-num">91.</span> API Response Time</a></li>
|
||
<li><a href="#sample-91"><span class="toc-num">92.</span> Website Analytics</a></li>
|
||
<li><a href="#sample-92"><span class="toc-num">93.</span> Sprint Burndown</a></li>
|
||
<li><a href="#sample-93"><span class="toc-num">94.</span> Marketing Funnel</a></li>
|
||
<li><a href="#sample-94"><span class="toc-num">95.</span> Server Error Rates</a></li>
|
||
<li><a href="#sample-95"><span class="toc-num">96.</span> Employee Growth</a></li>
|
||
<li><a href="#sample-96"><span class="toc-num">97.</span> Monthly Churn Rate</a></li>
|
||
<li><a href="#sample-97"><span class="toc-num">98.</span> A/B Test Results</a></li>
|
||
<li><a href="#sample-98"><span class="toc-num">99.</span> Cloud Cost Breakdown</a></li>
|
||
<li><a href="#sample-99"><span class="toc-num">100.</span> Release Frequency</a></li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<header class="hero-header">
|
||
<h1 class="hero-title">XY Chart Test</h1>
|
||
<p class="hero-tagline">xychart-beta rendering comparison: Chart.js vs beautiful-mermaid</p>
|
||
<p class="hero-description">
|
||
Column 1 shows the Mermaid source, Column 2 renders a Chart.js reference,
|
||
and Column 3 shows the beautiful-mermaid SVG rendering with theme support.
|
||
</p>
|
||
<div class="hero-meta">
|
||
<p class="meta">100 xychart-beta examples across 9 categories</p>
|
||
<p class="meta">Chart.js reference + beautiful-mermaid SVG comparison</p>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="content-wrapper">
|
||
|
||
<h2 class="section-title" id="cat-basic-bar-charts">Basic Bar Charts</h2>
|
||
|
||
<section class="sample" id="sample-0">
|
||
<div class="sample-header">
|
||
<h2>Simple Bar Chart</h2>
|
||
<p class="description">A minimal bar chart with three data points.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Simple Bar Chart"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">A</span><span style="color:#D73A49">,</span><span style="color:#032F62"> B</span><span style="color:#D73A49">,</span><span style="color:#032F62"> C</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">10</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 20</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 30</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-0">
|
||
<canvas id="chart-0"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-0">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-1">
|
||
<div class="sample-header">
|
||
<h2>Five-Category Bars</h2>
|
||
<p class="description">Bar chart with five categories and varied values.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Product Sales"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Widgets</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Gadgets</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Gizmos</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Doodads</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Thingamajigs</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">150</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 230</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 180</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 95</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 310</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-1">
|
||
<canvas id="chart-1"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-1">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-2">
|
||
<div class="sample-header">
|
||
<h2>Descending Values</h2>
|
||
<p class="description">Bars sorted in descending order to show ranking.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Browser Market Share"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Chrome</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Safari</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Firefox</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Edge</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Other</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">65</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 19</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 5</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-2">
|
||
<canvas id="chart-2"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-2">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-3">
|
||
<div class="sample-header">
|
||
<h2>Single Bar</h2>
|
||
<p class="description">A bar chart with only two data points.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Q1 vs Q2"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Q1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q2</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">4500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 5200</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-3">
|
||
<canvas id="chart-3"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-3">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-4">
|
||
<div class="sample-header">
|
||
<h2>Eight-Category Bars</h2>
|
||
<p class="description">Bar chart with eight categories and varied heights.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Department Headcount"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Eng</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sales</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Marketing</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Support</span><span style="color:#D73A49">,</span><span style="color:#032F62"> HR</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Finance</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Legal</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Ops</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">45</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 32</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 18</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 25</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 12</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 6</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 15</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-4">
|
||
<canvas id="chart-4"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-4">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-5">
|
||
<div class="sample-header">
|
||
<h2>Small Values</h2>
|
||
<p class="description">Bar chart with small integer values under 10.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Daily Bugs Found"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Mon</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Tue</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Wed</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Thu</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Fri</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">3</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 7</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 5</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-5">
|
||
<canvas id="chart-5"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-5">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-6">
|
||
<div class="sample-header">
|
||
<h2>Uniform Values</h2>
|
||
<p class="description">Bars with nearly identical heights.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Consistent Output"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Week 1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Week 2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Week 3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Week 4</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 102</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 99</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 101</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-6">
|
||
<canvas id="chart-6"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-6">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-7">
|
||
<div class="sample-header">
|
||
<h2>Wide Range</h2>
|
||
<p class="description">Bars with a wide range of values from small to large.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "City Population (thousands)"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Town A</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Town B</span><span style="color:#D73A49">,</span><span style="color:#032F62"> City C</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Metro D</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mega E</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">5</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 25</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 150</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3500</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-7">
|
||
<canvas id="chart-7"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-7">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-8">
|
||
<div class="sample-header">
|
||
<h2>Ten-Category Bars</h2>
|
||
<p class="description">Bar chart with ten data points showing monthly figures.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Monthly Signups"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jun</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jul</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Aug</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sep</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Oct</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 145</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 190</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 210</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 250</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 280</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 310</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 295</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 340</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 380</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-8">
|
||
<canvas id="chart-8"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-8">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-9">
|
||
<div class="sample-header">
|
||
<h2>Bars With Y-Axis Range</h2>
|
||
<p class="description">Bar chart with an explicit y-axis range.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Test Scores"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Alice</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Bob</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Carol</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Dave</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Eve</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#032F62"> "Score"</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 100</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">85</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 72</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 91</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 68</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 95</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-9">
|
||
<canvas id="chart-9"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-9">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<h2 class="section-title" id="cat-basic-line-charts">Basic Line Charts</h2>
|
||
|
||
<section class="sample" id="sample-10">
|
||
<div class="sample-header">
|
||
<h2>Simple Line Chart</h2>
|
||
<p class="description">A minimal line chart with four data points.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Simple Trend"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Q1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q4</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 150</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 130</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 180</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-10">
|
||
<canvas id="chart-10"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-10">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-11">
|
||
<div class="sample-header">
|
||
<h2>Upward Trend</h2>
|
||
<p class="description">Line chart showing a steady upward trend.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Revenue Growth"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">2019</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2020</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2021</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2022</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2023</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 620</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 780</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 950</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1200</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-11">
|
||
<canvas id="chart-11"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-11">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-12">
|
||
<div class="sample-header">
|
||
<h2>Downward Trend</h2>
|
||
<p class="description">Line chart showing a declining trend.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Declining Defect Rate"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Sprint 1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sprint 2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sprint 3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sprint 4</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sprint 5</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sprint 6</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">25</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 20</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 15</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 12</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 5</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-12">
|
||
<canvas id="chart-12"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-12">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-13">
|
||
<div class="sample-header">
|
||
<h2>Oscillating Values</h2>
|
||
<p class="description">Line chart with values that rise and fall repeatedly.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Daily Temperature Variation"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Mon</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Tue</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Wed</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Thu</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Fri</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sat</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sun</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">18</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 22</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 17</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 24</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 19</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 26</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 20</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-13">
|
||
<canvas id="chart-13"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-13">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-14">
|
||
<div class="sample-header">
|
||
<h2>Large Scale Line</h2>
|
||
<p class="description">Line chart with values in the thousands.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Website Visitors"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jun</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#032F62"> "Visitors"</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 50000</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">12000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 18000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 25000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 31000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 38000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 45000</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-14">
|
||
<canvas id="chart-14"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-14">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-15">
|
||
<div class="sample-header">
|
||
<h2>Flat Line</h2>
|
||
<p class="description">A line chart where values remain approximately constant.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Stable Metric"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">W1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W4</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W5</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W6</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">50</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 51</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 49</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 50</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 52</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 50</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-15">
|
||
<canvas id="chart-15"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-15">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-16">
|
||
<div class="sample-header">
|
||
<h2>Spike Pattern</h2>
|
||
<p class="description">Line chart with a dramatic spike in the middle.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Traffic Spike"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">6</span><span style="color:#032F62">am</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8</span><span style="color:#032F62">am</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 10</span><span style="color:#032F62">am</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 12</span><span style="color:#032F62">pm</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2</span><span style="color:#032F62">pm</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 4</span><span style="color:#032F62">pm</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 6</span><span style="color:#032F62">pm</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 350</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 4500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 900</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 300</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-16">
|
||
<canvas id="chart-16"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-16">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-17">
|
||
<div class="sample-header">
|
||
<h2>V-Shape Recovery</h2>
|
||
<p class="description">Line chart showing a sharp decline followed by recovery.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Stock Price Recovery"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jun</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 72</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 45</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 38</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 65</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 95</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-17">
|
||
<canvas id="chart-17"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-17">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-18">
|
||
<div class="sample-header">
|
||
<h2>Step Pattern</h2>
|
||
<p class="description">Line chart with staircase-like jumps between plateaus.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Pricing Tiers"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Free</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Basic</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Pro</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Team</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Enterprise</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">0</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 10</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 25</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 50</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 100</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-18">
|
||
<canvas id="chart-18"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-18">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-19">
|
||
<div class="sample-header">
|
||
<h2>Two Lines</h2>
|
||
<p class="description">Two line series plotted on the same chart.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Planned vs Actual"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Q1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q4</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 300</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 400</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">90</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 210</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 280</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 420</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-19">
|
||
<canvas id="chart-19"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-19">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<h2 class="section-title" id="cat-combined-bar-line">Combined Bar + Line</h2>
|
||
|
||
<section class="sample" id="sample-20">
|
||
<div class="sample-header">
|
||
<h2>Bar and Line Overlay</h2>
|
||
<p class="description">Bars with a line overlaid showing the same data as a trend.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Monthly Revenue"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jun</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#24292E"> "Revenue </span><span style="color:#032F62">(USD</span><span style="color:#24292E">)" </span><span style="color:#005CC5">0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 10000</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">5000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 6200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 7800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 4500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 9200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8100</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">5000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 6200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 7800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 4500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 9200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8100</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-20">
|
||
<canvas id="chart-20"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-20">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-21">
|
||
<div class="sample-header">
|
||
<h2>Bar with Trend Line</h2>
|
||
<p class="description">Bars showing actual values with a line showing the moving average trend.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Sales with Trend"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jun</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">300</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 450</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 280</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 520</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 390</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 610</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">300</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 375</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 343</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 388</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 388</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 425</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-21">
|
||
<canvas id="chart-21"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-21">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-22">
|
||
<div class="sample-header">
|
||
<h2>Bar with Target Line</h2>
|
||
<p class="description">Bars showing actual performance with a flat target line.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Performance vs Target"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jun</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#032F62"> "Units"</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 600</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">320</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 410</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 380</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 520</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 290</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 480</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">400</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 400</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 400</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 400</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 400</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 400</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-22">
|
||
<canvas id="chart-22"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-22">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-23">
|
||
<div class="sample-header">
|
||
<h2>Revenue and Profit</h2>
|
||
<p class="description">Bars for revenue with a line for profit margin.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Revenue and Profit"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Q1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q4</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">5000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 6500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 7200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8100</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">1200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2600</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-23">
|
||
<canvas id="chart-23"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-23">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-24">
|
||
<div class="sample-header">
|
||
<h2>Dual Dataset Overlay</h2>
|
||
<p class="description">Two bars and one line series for multi-metric comparison.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Orders, Returns, and Net"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 250</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 300</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 280</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 350</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">20</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 30</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 25</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 35</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 28</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">180</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 220</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 275</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 245</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 322</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-24">
|
||
<canvas id="chart-24"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-24">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-25">
|
||
<div class="sample-header">
|
||
<h2>Costs vs Revenue</h2>
|
||
<p class="description">Bars for costs with a line showing revenue growth.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Costs vs Revenue"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">2020</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2021</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2022</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2023</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2024</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">400</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 420</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 450</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 440</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 460</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">350</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 480</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 620</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 780</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 950</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-25">
|
||
<canvas id="chart-25"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-25">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-26">
|
||
<div class="sample-header">
|
||
<h2>Bar with Two Lines</h2>
|
||
<p class="description">Bars with two overlaid line series for comparison.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Actual, Forecast, Target"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jun</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 115</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 140</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 135</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 160</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">95</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 110</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 130</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 140</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 150</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 120</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-26">
|
||
<canvas id="chart-26"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-26">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-27">
|
||
<div class="sample-header">
|
||
<h2>Stacked Context</h2>
|
||
<p class="description">Multiple bar series with a line showing the total.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Channel Performance"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 140</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 160</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">80</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 90</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 110</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">180</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 210</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 240</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 270</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-27">
|
||
<canvas id="chart-27"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-27">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-28">
|
||
<div class="sample-header">
|
||
<h2>Cumulative Line Over Bars</h2>
|
||
<p class="description">Monthly bars with a cumulative line showing running total.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Monthly and Cumulative Sales"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jun</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 150</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 180</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 170</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 250</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 370</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 550</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 750</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 920</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-28">
|
||
<canvas id="chart-28"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-28">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-29">
|
||
<div class="sample-header">
|
||
<h2>Conversion Funnel</h2>
|
||
<p class="description">Bars for stage counts with a line showing conversion rate.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Funnel Analysis"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Visitors</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Signups</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Activated</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Paid</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Retained</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">10000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 500</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">10000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 500</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-29">
|
||
<canvas id="chart-29"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-29">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<h2 class="section-title" id="cat-axis-configurations">Axis Configurations</h2>
|
||
|
||
<section class="sample" id="sample-30">
|
||
<div class="sample-header">
|
||
<h2>Categorical X-Axis</h2>
|
||
<p class="description">Standard categorical x-axis with string labels.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Fruit Preferences"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Apple</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Banana</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Cherry</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Date</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Elderberry</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">45</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 32</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 28</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 15</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-30">
|
||
<canvas id="chart-30"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-30">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-31">
|
||
<div class="sample-header">
|
||
<h2>Numeric X-Axis Range</h2>
|
||
<p class="description">Numeric x-axis using the range syntax.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Distribution Curve"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 100</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">5</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 15</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 35</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 60</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 80</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 95</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 80</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 60</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 35</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 15</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 5</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-31">
|
||
<canvas id="chart-31"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-31">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-32">
|
||
<div class="sample-header">
|
||
<h2>Y-Axis with Label and Range</h2>
|
||
<p class="description">Y-axis with a title and explicit min/max range.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Temperature Log"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">6</span><span style="color:#032F62">am</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 9</span><span style="color:#032F62">am</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 12</span><span style="color:#032F62">pm</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3</span><span style="color:#032F62">pm</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 6</span><span style="color:#032F62">pm</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 9</span><span style="color:#032F62">pm</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#24292E"> "Temp </span><span style="color:#032F62">(F</span><span style="color:#24292E">)" </span><span style="color:#005CC5">50</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 100</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">58</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 65</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 78</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 85</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 76</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 62</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-32">
|
||
<canvas id="chart-32"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-32">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-33">
|
||
<div class="sample-header">
|
||
<h2>Y-Axis Range Without Label</h2>
|
||
<p class="description">Y-axis with range but no title.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Sensor Readings"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">T1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> T2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> T3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> T4</span><span style="color:#D73A49">,</span><span style="color:#032F62"> T5</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 500</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 250</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 380</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 310</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 190</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-33">
|
||
<canvas id="chart-33"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-33">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-34">
|
||
<div class="sample-header">
|
||
<h2>X-Axis with Title</h2>
|
||
<p class="description">Categorical x-axis with an axis title.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Quarterly Results"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#032F62"> "Quarter"</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Q1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q4</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#24292E"> "Revenue </span><span style="color:#032F62">($K</span><span style="color:#24292E">)" </span><span style="color:#005CC5">0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 1000</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">420</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 580</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 710</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 890</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-34">
|
||
<canvas id="chart-34"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-34">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-35">
|
||
<div class="sample-header">
|
||
<h2>Both Axes Titled</h2>
|
||
<p class="description">Both x-axis and y-axis have descriptive titles.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Experiment Results"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#032F62"> "Trial Number"</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">1</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 4</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 5</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 6</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#24292E"> "Measurement </span><span style="color:#032F62">(mm</span><span style="color:#24292E">)" </span><span style="color:#005CC5">0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 50</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">12</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 18</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 25</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 22</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 31</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 28</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-35">
|
||
<canvas id="chart-35"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-35">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-36">
|
||
<div class="sample-header">
|
||
<h2>Long Category Labels</h2>
|
||
<p class="description">X-axis with long multi-word category labels.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Department Budget"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Engineering</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Product Management</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Customer Success</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Human Resources</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">850</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 420</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 310</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 180</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-36">
|
||
<canvas id="chart-36"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-36">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-37">
|
||
<div class="sample-header">
|
||
<h2>Many Short Labels</h2>
|
||
<p class="description">X-axis with many single-character labels.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Letter Frequency"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">A</span><span style="color:#D73A49">,</span><span style="color:#032F62"> B</span><span style="color:#D73A49">,</span><span style="color:#032F62"> C</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D</span><span style="color:#D73A49">,</span><span style="color:#032F62"> E</span><span style="color:#D73A49">,</span><span style="color:#032F62"> F</span><span style="color:#D73A49">,</span><span style="color:#032F62"> G</span><span style="color:#D73A49">,</span><span style="color:#032F62"> H</span><span style="color:#D73A49">,</span><span style="color:#032F62"> I</span><span style="color:#D73A49">,</span><span style="color:#032F62"> J</span><span style="color:#D73A49">,</span><span style="color:#032F62"> K</span><span style="color:#D73A49">,</span><span style="color:#032F62"> L</span><span style="color:#D73A49">,</span><span style="color:#032F62"> M</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">82</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 15</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 28</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 43</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 127</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 22</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 20</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 61</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 70</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 40</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 24</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-37">
|
||
<canvas id="chart-37"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-37">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-38">
|
||
<div class="sample-header">
|
||
<h2>Wide Y-Axis Range</h2>
|
||
<p class="description">Y-axis spanning a large range from 0 to 100000.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Annual Revenue"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">2020</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2021</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2022</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2023</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2024</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#032F62"> "USD"</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 100000</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">15000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 28000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 45000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 67000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 92000</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-38">
|
||
<canvas id="chart-38"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-38">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-39">
|
||
<div class="sample-header">
|
||
<h2>Narrow Y-Axis Range</h2>
|
||
<p class="description">Y-axis with a tight range to emphasize small differences.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "CPU Temperature"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">10</span><span style="color:#032F62">s</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 20</span><span style="color:#032F62">s</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 30</span><span style="color:#032F62">s</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 40</span><span style="color:#032F62">s</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 50</span><span style="color:#032F62">s</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 60</span><span style="color:#032F62">s</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#032F62"> "Celsius"</span><span style="color:#005CC5"> 60</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 80</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">65</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 68</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 72</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 75</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 73</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 70</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-39">
|
||
<canvas id="chart-39"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-39">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-40">
|
||
<div class="sample-header">
|
||
<h2>Auto-Range Y-Axis</h2>
|
||
<p class="description">No y-axis declaration; auto-ranged from data.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Auto Range"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">A</span><span style="color:#D73A49">,</span><span style="color:#032F62"> B</span><span style="color:#D73A49">,</span><span style="color:#032F62"> C</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D</span><span style="color:#D73A49">,</span><span style="color:#032F62"> E</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">42</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 87</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 63</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 29</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 75</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-40">
|
||
<canvas id="chart-40"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-40">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-41">
|
||
<div class="sample-header">
|
||
<h2>Year Labels</h2>
|
||
<p class="description">X-axis with year labels as categories.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Company Growth"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">2018</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2019</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2020</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2021</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2022</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2023</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2024</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2025</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">10</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 15</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 12</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 22</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 35</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 48</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 62</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 80</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-41">
|
||
<canvas id="chart-41"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-41">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-42">
|
||
<div class="sample-header">
|
||
<h2>Percentage Y-Axis</h2>
|
||
<p class="description">Y-axis configured as percentage from 0 to 100.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Completion Rate"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Week 1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Week 2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Week 3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Week 4</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Week 5</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#032F62"> "Percent"</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 100</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">15</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 35</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 58</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 78</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 95</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-42">
|
||
<canvas id="chart-42"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-42">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-43">
|
||
<div class="sample-header">
|
||
<h2>Numeric X-Axis with Bars</h2>
|
||
<p class="description">Numeric x-axis range combined with bar data.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Histogram"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 50</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">5</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 12</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 25</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 38</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 30</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 18</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-43">
|
||
<canvas id="chart-43"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-43">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-44">
|
||
<div class="sample-header">
|
||
<h2>Mixed Short and Long Labels</h2>
|
||
<p class="description">X-axis with a mix of short and longer labels.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Regional Sales"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">US</span><span style="color:#D73A49">,</span><span style="color:#032F62"> EU</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Asia Pacific</span><span style="color:#D73A49">,</span><span style="color:#032F62"> LATAM</span><span style="color:#D73A49">,</span><span style="color:#032F62"> MEA</span><span style="color:#D73A49">,</span><span style="color:#032F62"> ANZ</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">450</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 380</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 520</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 180</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 95</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 60</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-44">
|
||
<canvas id="chart-44"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-44">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<h2 class="section-title" id="cat-horizontal-orientation">Horizontal Orientation</h2>
|
||
|
||
<section class="sample" id="sample-45">
|
||
<div class="sample-header">
|
||
<h2>Horizontal Bar Chart</h2>
|
||
<p class="description">Simple horizontal bar chart.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta horizontal</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Language Popularity"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Python</span><span style="color:#D73A49">,</span><span style="color:#032F62"> JavaScript</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Java</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Go</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Rust</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">30</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 25</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 20</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 12</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-45">
|
||
<canvas id="chart-45"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-45">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-46">
|
||
<div class="sample-header">
|
||
<h2>Horizontal with Y-Axis</h2>
|
||
<p class="description">Horizontal bars with explicit y-axis range.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta horizontal</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Sprint Velocity"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Sprint 1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sprint 2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sprint 3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sprint 4</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sprint 5</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#032F62"> "Story Points"</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 100</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">45</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 52</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 68</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 72</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 80</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-46">
|
||
<canvas id="chart-46"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-46">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-47">
|
||
<div class="sample-header">
|
||
<h2>Horizontal Line Chart</h2>
|
||
<p class="description">Line chart in horizontal orientation.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta horizontal</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Response Time Trend"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">v1.0</span><span style="color:#D73A49">,</span><span style="color:#032F62"> v1.1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> v1.2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> v1.3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> v1.4</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">450</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 380</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 320</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 280</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 210</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-47">
|
||
<canvas id="chart-47"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-47">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-48">
|
||
<div class="sample-header">
|
||
<h2>Horizontal Combined</h2>
|
||
<p class="description">Horizontal chart with both bars and a line.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta horizontal</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Budget vs Actual"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Eng</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sales</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Marketing</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Ops</span><span style="color:#D73A49">,</span><span style="color:#032F62"> HR</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 350</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 150</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 100</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">480</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 380</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 180</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 160</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 95</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-48">
|
||
<canvas id="chart-48"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-48">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-49">
|
||
<div class="sample-header">
|
||
<h2>Horizontal Ranking</h2>
|
||
<p class="description">Horizontal bars showing a ranked list.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta horizontal</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Top Features Requested"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Dark Mode</span><span style="color:#D73A49">,</span><span style="color:#032F62"> API Access</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mobile App</span><span style="color:#D73A49">,</span><span style="color:#032F62"> SSO</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Webhooks</span><span style="color:#D73A49">,</span><span style="color:#032F62"> CSV Export</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">245</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 198</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 176</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 152</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 134</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 112</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-49">
|
||
<canvas id="chart-49"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-49">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-50">
|
||
<div class="sample-header">
|
||
<h2>Horizontal Small Values</h2>
|
||
<p class="description">Horizontal bars with small single-digit values.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta horizontal</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Team Satisfaction Survey"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Culture</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Compensation</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Growth</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Balance</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Tools</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#032F62"> "Rating"</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 5</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">4</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 4</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 5</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-50">
|
||
<canvas id="chart-50"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-50">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-51">
|
||
<div class="sample-header">
|
||
<h2>Horizontal Two Bars</h2>
|
||
<p class="description">Horizontal chart with two bar series.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta horizontal</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "This Year vs Last Year"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Q1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q4</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 250</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 300</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 280</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">180</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 220</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 270</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 310</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-51">
|
||
<canvas id="chart-51"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-51">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-52">
|
||
<div class="sample-header">
|
||
<h2>Horizontal Wide Range</h2>
|
||
<p class="description">Horizontal bars with a wide value range.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta horizontal</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "GitHub Stars"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">React</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Vue</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Angular</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Svelte</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Solid</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">220000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 210000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 95000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 78000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 32000</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-52">
|
||
<canvas id="chart-52"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-52">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-53">
|
||
<div class="sample-header">
|
||
<h2>Horizontal with Two Lines</h2>
|
||
<p class="description">Horizontal chart with two line series.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta horizontal</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Planned vs Actual Delivery"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Feature A</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feature B</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feature C</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feature D</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">10</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 15</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 20</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 25</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">12</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 14</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 22</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 23</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-53">
|
||
<canvas id="chart-53"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-53">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-54">
|
||
<div class="sample-header">
|
||
<h2>Horizontal Long Labels</h2>
|
||
<p class="description">Horizontal orientation with long category labels.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta horizontal</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Error Categories"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Authentication Failure</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Database Timeout</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Rate Limit Exceeded</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Invalid Input</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">342</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 128</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 89</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 456</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-54">
|
||
<canvas id="chart-54"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-54">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<h2 class="section-title" id="cat-titles-formatting">Titles & Formatting</h2>
|
||
|
||
<section class="sample" id="sample-55">
|
||
<div class="sample-header">
|
||
<h2>No Title</h2>
|
||
<p class="description">Chart without a title declaration.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">A</span><span style="color:#D73A49">,</span><span style="color:#032F62"> B</span><span style="color:#D73A49">,</span><span style="color:#032F62"> C</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">10</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 20</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 30</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 40</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-55">
|
||
<canvas id="chart-55"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-55">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-56">
|
||
<div class="sample-header">
|
||
<h2>Short Title</h2>
|
||
<p class="description">Chart with a very short one-word title.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Sales"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 150</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-56">
|
||
<canvas id="chart-56"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-56">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-57">
|
||
<div class="sample-header">
|
||
<h2>Long Title</h2>
|
||
<p class="description">Chart with a long descriptive title.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Quarterly Revenue Comparison Across All Regional Offices 2024"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Q1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q4</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">1200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2100</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-57">
|
||
<canvas id="chart-57"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-57">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-58">
|
||
<div class="sample-header">
|
||
<h2>Title with Numbers</h2>
|
||
<p class="description">Title containing numeric values.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "FY2024 Q3 Results"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Product A</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Product B</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Product C</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">340</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 520</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 180</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-58">
|
||
<canvas id="chart-58"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-58">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-59">
|
||
<div class="sample-header">
|
||
<h2>Title with Special Characters</h2>
|
||
<p class="description">Title containing parentheses and symbols.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Growth Rate (%)"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">2020</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2021</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2022</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2023</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">5</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 12</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 15</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-59">
|
||
<canvas id="chart-59"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-59">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-60">
|
||
<div class="sample-header">
|
||
<h2>Title with Ampersand</h2>
|
||
<p class="description">Title using the ampersand character.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "R&D Investment"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">2021</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2022</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2023</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2024</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 280</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 350</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 420</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-60">
|
||
<canvas id="chart-60"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-60">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-61">
|
||
<div class="sample-header">
|
||
<h2>Title with Hyphen</h2>
|
||
<p class="description">Title containing hyphens.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Year-Over-Year Comparison"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 90</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 140</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 130</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">110</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 115</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 125</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 135</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-61">
|
||
<canvas id="chart-61"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-61">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-62">
|
||
<div class="sample-header">
|
||
<h2>Minimal Chart</h2>
|
||
<p class="description">The most minimal possible xychart with just axis and data.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">A</span><span style="color:#D73A49">,</span><span style="color:#032F62"> B</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">1</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-62">
|
||
<canvas id="chart-62"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-62">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-63">
|
||
<div class="sample-header">
|
||
<h2>Full Specification</h2>
|
||
<p class="description">Chart with every optional element specified.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Complete Chart"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#032F62"> "Category"</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Alpha</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Beta</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Gamma</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Delta</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#032F62"> "Value"</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 500</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 340</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 250</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 410</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 340</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 250</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 410</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-63">
|
||
<canvas id="chart-63"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-63">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-64">
|
||
<div class="sample-header">
|
||
<h2>Title with Colon</h2>
|
||
<p class="description">Title containing a colon separator.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Metrics: Daily Active Users"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Mon</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Tue</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Wed</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Thu</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Fri</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">1500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1700</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-64">
|
||
<canvas id="chart-64"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-64">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<h2 class="section-title" id="cat-large-datasets">Large Datasets</h2>
|
||
|
||
<section class="sample" id="sample-65">
|
||
<div class="sample-header">
|
||
<h2>12-Month Dataset</h2>
|
||
<p class="description">Full year of monthly data points.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Monthly Active Users (2024)"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jun</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jul</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Aug</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sep</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Oct</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Nov</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Dec</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">12000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 13500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 15200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 16800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 18500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 20100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 19800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 21500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 23000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 24200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 25800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 28000</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-65">
|
||
<canvas id="chart-65"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-65">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-66">
|
||
<div class="sample-header">
|
||
<h2>26-Point Alphabet</h2>
|
||
<p class="description">Bar chart with 26 data points, one per letter.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Letter Distribution"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">A</span><span style="color:#D73A49">,</span><span style="color:#032F62"> B</span><span style="color:#D73A49">,</span><span style="color:#032F62"> C</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D</span><span style="color:#D73A49">,</span><span style="color:#032F62"> E</span><span style="color:#D73A49">,</span><span style="color:#032F62"> F</span><span style="color:#D73A49">,</span><span style="color:#032F62"> G</span><span style="color:#D73A49">,</span><span style="color:#032F62"> H</span><span style="color:#D73A49">,</span><span style="color:#032F62"> I</span><span style="color:#D73A49">,</span><span style="color:#032F62"> J</span><span style="color:#D73A49">,</span><span style="color:#032F62"> K</span><span style="color:#D73A49">,</span><span style="color:#032F62"> L</span><span style="color:#D73A49">,</span><span style="color:#032F62"> M</span><span style="color:#D73A49">,</span><span style="color:#032F62"> N</span><span style="color:#D73A49">,</span><span style="color:#032F62"> O</span><span style="color:#D73A49">,</span><span style="color:#032F62"> P</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Q</span><span style="color:#D73A49">,</span><span style="color:#032F62"> R</span><span style="color:#D73A49">,</span><span style="color:#032F62"> S</span><span style="color:#D73A49">,</span><span style="color:#032F62"> T</span><span style="color:#D73A49">,</span><span style="color:#032F62"> U</span><span style="color:#D73A49">,</span><span style="color:#032F62"> V</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W</span><span style="color:#D73A49">,</span><span style="color:#032F62"> X</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Y</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Z</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">82</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 15</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 28</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 43</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 127</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 22</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 20</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 61</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 70</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 40</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 24</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 67</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 75</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 19</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 60</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 63</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 91</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 28</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 10</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 24</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 20</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-66">
|
||
<canvas id="chart-66"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-66">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-67">
|
||
<div class="sample-header">
|
||
<h2>Dense Weekly Data</h2>
|
||
<p class="description">Line chart with data for many weeks.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Weekly Downloads"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">W1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W4</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W5</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W6</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W7</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W8</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W9</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W10</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W11</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W12</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W13</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W14</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W15</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W16</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W17</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W18</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W19</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W20</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 520</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 480</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 550</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 600</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 580</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 620</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 650</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 700</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 680</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 720</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 750</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 780</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 820</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 850</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 900</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 880</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 920</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 950</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-67">
|
||
<canvas id="chart-67"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-67">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-68">
|
||
<div class="sample-header">
|
||
<h2>Multiple Series Large</h2>
|
||
<p class="description">Three data series across 12 months.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Product Lines Revenue"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jun</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jul</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Aug</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sep</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Oct</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Nov</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Dec</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 520</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 540</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 580</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 600</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 620</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 650</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 640</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 680</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 700</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 720</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 750</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">300</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 320</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 310</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 350</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 370</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 380</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 400</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 390</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 420</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 440</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 450</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 470</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 840</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 850</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 930</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 970</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1050</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1030</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1140</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1170</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1220</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-68">
|
||
<canvas id="chart-68"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-68">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-69">
|
||
<div class="sample-header">
|
||
<h2>Two Bars Twelve Months</h2>
|
||
<p class="description">Two bar series over 12 months for year comparison.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "2023 vs 2024 Monthly Sales"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jun</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jul</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Aug</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sep</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Oct</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Nov</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Dec</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">180</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 220</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 240</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 260</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 250</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 270</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 290</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 310</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 330</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 350</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 380</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">210</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 230</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 250</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 270</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 300</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 290</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 310</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 330</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 360</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 380</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 400</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 430</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-69">
|
||
<canvas id="chart-69"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-69">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-70">
|
||
<div class="sample-header">
|
||
<h2>High Frequency Data</h2>
|
||
<p class="description">Hourly data points across a full day.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Hourly Server Load"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">0</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 4</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 5</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 6</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 7</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 9</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 10</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 11</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 12</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 13</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 14</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 15</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 16</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 17</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 18</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 19</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 20</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 21</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 22</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 23</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">15</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 12</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 10</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 7</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 9</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 18</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 45</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 72</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 85</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 88</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 90</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 82</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 78</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 80</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 85</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 88</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 75</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 60</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 45</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 35</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 28</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 22</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 18</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-70">
|
||
<canvas id="chart-70"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-70">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-71">
|
||
<div class="sample-header">
|
||
<h2>Large Values Dataset</h2>
|
||
<p class="description">Dataset with values in the millions.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Cloud Spending by Month"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jun</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jul</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Aug</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sep</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Oct</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Nov</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Dec</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#032F62"> "USD"</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 500000</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">120000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 135000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 148000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 162000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 178000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 195000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 210000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 228000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 245000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 268000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 290000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 315000</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-71">
|
||
<canvas id="chart-71"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-71">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-72">
|
||
<div class="sample-header">
|
||
<h2>Three Lines Large</h2>
|
||
<p class="description">Three overlapping line series over 10 data points.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Multi-Region Latency"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">T1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> T2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> T3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> T4</span><span style="color:#D73A49">,</span><span style="color:#032F62"> T5</span><span style="color:#D73A49">,</span><span style="color:#032F62"> T6</span><span style="color:#D73A49">,</span><span style="color:#032F62"> T7</span><span style="color:#D73A49">,</span><span style="color:#032F62"> T8</span><span style="color:#D73A49">,</span><span style="color:#032F62"> T9</span><span style="color:#D73A49">,</span><span style="color:#032F62"> T10</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">45</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 48</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 42</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 50</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 55</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 52</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 47</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 44</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 49</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 46</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 115</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 125</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 118</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 122</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 130</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 128</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 135</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 132</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 127</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 210</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 195</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 205</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 215</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 220</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 208</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 212</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 218</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 225</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-72">
|
||
<canvas id="chart-72"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-72">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-73">
|
||
<div class="sample-header">
|
||
<h2>Quarterly Four Years</h2>
|
||
<p class="description">Quarterly data spanning four years.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Quarterly Earnings (2021-2024)"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">21</span><span style="color:#032F62">Q1</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 21</span><span style="color:#032F62">Q2</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 21</span><span style="color:#032F62">Q3</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 21</span><span style="color:#032F62">Q4</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 22</span><span style="color:#032F62">Q1</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 22</span><span style="color:#032F62">Q2</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 22</span><span style="color:#032F62">Q3</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 22</span><span style="color:#032F62">Q4</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 23</span><span style="color:#032F62">Q1</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 23</span><span style="color:#032F62">Q2</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 23</span><span style="color:#032F62">Q3</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 23</span><span style="color:#032F62">Q4</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 24</span><span style="color:#032F62">Q1</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 24</span><span style="color:#032F62">Q2</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 24</span><span style="color:#032F62">Q3</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 24</span><span style="color:#032F62">Q4</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 140</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 135</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 160</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 155</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 175</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 170</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 190</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 185</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 210</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 205</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 230</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 225</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 250</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 245</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 270</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-73">
|
||
<canvas id="chart-73"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-73">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-74">
|
||
<div class="sample-header">
|
||
<h2>Dense Bars and Line</h2>
|
||
<p class="description">Dense bar chart with 15 categories and an overlay line.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Daily Active Users (First 15 Days)"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">D1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D4</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D5</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D6</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D7</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D8</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D9</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D10</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D11</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D12</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D13</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D14</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D15</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 520</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 510</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 530</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 540</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 480</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 450</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 520</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 550</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 540</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 560</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 570</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 510</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 490</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 530</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 510</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 510</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 520</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 530</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 520</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 510</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 515</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 525</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 530</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 535</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 540</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 535</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 530</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 530</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-74">
|
||
<canvas id="chart-74"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-74">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<h2 class="section-title" id="cat-edge-cases">Edge Cases</h2>
|
||
|
||
<section class="sample" id="sample-75">
|
||
<div class="sample-header">
|
||
<h2>Single Data Point</h2>
|
||
<p class="description">Chart with only one data point.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Single Value"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Only</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">42</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-75">
|
||
<canvas id="chart-75"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-75">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-76">
|
||
<div class="sample-header">
|
||
<h2>All Zeros</h2>
|
||
<p class="description">Bar chart where every value is zero.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "No Activity"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Mon</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Tue</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Wed</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Thu</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Fri</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">0</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-76">
|
||
<canvas id="chart-76"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-76">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-77">
|
||
<div class="sample-header">
|
||
<h2>Very Large Numbers</h2>
|
||
<p class="description">Chart with values in the millions.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "National GDP (millions)"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Country A</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Country B</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Country C</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">5200000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3800000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2900000</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-77">
|
||
<canvas id="chart-77"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-77">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-78">
|
||
<div class="sample-header">
|
||
<h2>Very Small Numbers</h2>
|
||
<p class="description">Chart with very small decimal-like integer values.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Trace Amounts"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Sample A</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sample B</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sample C</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sample D</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">1</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-78">
|
||
<canvas id="chart-78"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-78">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-79">
|
||
<div class="sample-header">
|
||
<h2>Two Data Points</h2>
|
||
<p class="description">Minimal chart with exactly two data points.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Before and After"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Before</span><span style="color:#D73A49">,</span><span style="color:#032F62"> After</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">25</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 75</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-79">
|
||
<canvas id="chart-79"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-79">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-80">
|
||
<div class="sample-header">
|
||
<h2>Single Value Repeated</h2>
|
||
<p class="description">All bars have the identical value.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Equal Distribution"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">A</span><span style="color:#D73A49">,</span><span style="color:#032F62"> B</span><span style="color:#D73A49">,</span><span style="color:#032F62"> C</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D</span><span style="color:#D73A49">,</span><span style="color:#032F62"> E</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">50</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 50</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 50</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 50</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 50</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-80">
|
||
<canvas id="chart-80"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-80">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-81">
|
||
<div class="sample-header">
|
||
<h2>Extreme Outlier</h2>
|
||
<p class="description">One value is dramatically larger than the rest.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Revenue by Product"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Niche A</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Niche B</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Flagship</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Niche C</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Niche D</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">50</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 30</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 5000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 40</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 20</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-81">
|
||
<canvas id="chart-81"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-81">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-82">
|
||
<div class="sample-header">
|
||
<h2>Descending to Zero</h2>
|
||
<p class="description">Values that decrease to zero.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Declining Interest"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Week 1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Week 2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Week 3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Week 4</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Week 5</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 60</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 25</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-82">
|
||
<canvas id="chart-82"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-82">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-83">
|
||
<div class="sample-header">
|
||
<h2>Ascending from Zero</h2>
|
||
<p class="description">Values that start at zero and increase.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Ramp Up"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Day 1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Day 2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Day 3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Day 4</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Day 5</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">0</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 10</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 50</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 150</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 400</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-83">
|
||
<canvas id="chart-83"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-83">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-84">
|
||
<div class="sample-header">
|
||
<h2>Alternating High Low</h2>
|
||
<p class="description">Values alternating between high and low.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Alternating Pattern"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">A</span><span style="color:#D73A49">,</span><span style="color:#032F62"> B</span><span style="color:#D73A49">,</span><span style="color:#032F62"> C</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D</span><span style="color:#D73A49">,</span><span style="color:#032F62"> E</span><span style="color:#D73A49">,</span><span style="color:#032F62"> F</span><span style="color:#D73A49">,</span><span style="color:#032F62"> G</span><span style="color:#D73A49">,</span><span style="color:#032F62"> H</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 10</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 10</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 10</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 10</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-84">
|
||
<canvas id="chart-84"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-84">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<h2 class="section-title" id="cat-real-world-scenarios">Real-World Scenarios</h2>
|
||
|
||
<section class="sample" id="sample-85">
|
||
<div class="sample-header">
|
||
<h2>Monthly Revenue Report</h2>
|
||
<p class="description">Typical monthly revenue bar chart for a SaaS company.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Monthly Revenue (2024)"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jun</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jul</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Aug</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sep</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Oct</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Nov</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Dec</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#24292E"> "Revenue </span><span style="color:#032F62">($K</span><span style="color:#24292E">)" </span><span style="color:#005CC5">0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 500</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">180</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 195</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 210</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 225</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 250</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 268</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 285</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 275</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 300</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 320</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 340</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 380</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-85">
|
||
<canvas id="chart-85"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-85">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-86">
|
||
<div class="sample-header">
|
||
<h2>Cumulative Registered Users</h2>
|
||
<p class="description">Cumulative user growth over months showing accelerating adoption.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Cumulative Registered Users"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jun</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jul</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Aug</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sep</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Oct</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Nov</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Dec</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#032F62"> "Users"</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 50000</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">2500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 5200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 13100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 18000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 23500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 29200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 34800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 39500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 43200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 46500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 50000</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-86">
|
||
<canvas id="chart-86"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-86">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-87">
|
||
<div class="sample-header">
|
||
<h2>Temperature Over the Year</h2>
|
||
<p class="description">Average monthly temperature showing seasonal variation.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Average Monthly Temperature"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jun</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jul</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Aug</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sep</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Oct</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Nov</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Dec</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#24292E"> "Temp </span><span style="color:#032F62">(F</span><span style="color:#24292E">)" </span><span style="color:#005CC5">20</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 100</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">32</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 35</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 45</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 58</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 68</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 78</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 85</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 83</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 74</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 60</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 48</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 36</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-87">
|
||
<canvas id="chart-87"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-87">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-88">
|
||
<div class="sample-header">
|
||
<h2>Stock Price Trend</h2>
|
||
<p class="description">Weekly stock price movement over a quarter.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "ACME Corp Stock Price"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">W1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W4</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W5</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W6</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W7</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W8</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W9</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W10</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W11</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W12</span><span style="color:#D73A49">,</span><span style="color:#032F62"> W13</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#24292E"> "Price </span><span style="color:#032F62">($</span><span style="color:#24292E">)" </span><span style="color:#005CC5">80</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 160</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 105</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 98</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 112</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 108</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 115</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 125</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 135</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 128</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 140</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 148</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 155</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-88">
|
||
<canvas id="chart-88"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-88">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-89">
|
||
<div class="sample-header">
|
||
<h2>Survey Results</h2>
|
||
<p class="description">Customer satisfaction survey scores by category.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Customer Satisfaction Survey"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Ease of Use</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Performance</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Support</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Pricing</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Features</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Reliability</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#032F62"> "Score"</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 5</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">4</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 5</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 4</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 4</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-89">
|
||
<canvas id="chart-89"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-89">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-90">
|
||
<div class="sample-header">
|
||
<h2>API Response Time</h2>
|
||
<p class="description">P95 API response times across endpoints.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "P95 Response Time by Endpoint"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">/users</span><span style="color:#D73A49">,</span><span style="color:#032F62"> /orders</span><span style="color:#D73A49">,</span><span style="color:#032F62"> /products</span><span style="color:#D73A49">,</span><span style="color:#032F62"> /search</span><span style="color:#D73A49">,</span><span style="color:#032F62"> /auth</span><span style="color:#D73A49">,</span><span style="color:#032F62"> /reports</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#032F62"> "ms"</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 1000</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 250</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 180</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 450</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 80</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 850</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-90">
|
||
<canvas id="chart-90"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-90">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-91">
|
||
<div class="sample-header">
|
||
<h2>Website Analytics</h2>
|
||
<p class="description">Daily page views and unique visitors for a week.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Website Traffic"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Mon</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Tue</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Wed</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Thu</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Fri</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sat</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sun</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">8500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 9200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 9800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 9500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 5200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 4100</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">3200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3600</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3400</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2100</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1800</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-91">
|
||
<canvas id="chart-91"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-91">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-92">
|
||
<div class="sample-header">
|
||
<h2>Sprint Burndown</h2>
|
||
<p class="description">Remaining story points over a two-week sprint.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Sprint Burndown"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">D1</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D2</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D3</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D4</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D5</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D6</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D7</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D8</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D9</span><span style="color:#D73A49">,</span><span style="color:#032F62"> D10</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#032F62"> "Story Points"</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 80</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">72</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 65</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 58</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 50</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 45</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 38</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 30</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 22</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 12</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">72</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 65</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 58</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 50</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 43</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 36</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 29</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 22</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 14</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-92">
|
||
<canvas id="chart-92"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-92">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-93">
|
||
<div class="sample-header">
|
||
<h2>Marketing Funnel</h2>
|
||
<p class="description">Marketing conversion funnel from impressions to purchases.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Marketing Funnel"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Impressions</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Clicks</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Signups</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Trials</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Purchases</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">50000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 5000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 400</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 150</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-93">
|
||
<canvas id="chart-93"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-93">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-94">
|
||
<div class="sample-header">
|
||
<h2>Server Error Rates</h2>
|
||
<p class="description">HTTP error rates by hour during an incident.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Error Rate During Incident"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">10</span><span style="color:#032F62">am</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 11</span><span style="color:#032F62">am</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 12</span><span style="color:#032F62">pm</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1</span><span style="color:#032F62">pm</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2</span><span style="color:#032F62">pm</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3</span><span style="color:#032F62">pm</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 4</span><span style="color:#032F62">pm</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 5</span><span style="color:#032F62">pm</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#032F62"> "Errors/min"</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 500</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">5</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 12</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 45</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 380</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 420</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 250</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 35</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">5</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 12</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 45</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 380</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 420</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 250</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 35</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-94">
|
||
<canvas id="chart-94"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-94">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-95">
|
||
<div class="sample-header">
|
||
<h2>Employee Growth</h2>
|
||
<p class="description">Headcount growth at a startup over years.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Company Headcount"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">2018</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2019</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2020</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2021</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2022</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2023</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2024</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">8</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 15</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 25</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 45</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 80</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 120</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 185</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-95">
|
||
<canvas id="chart-95"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-95">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-96">
|
||
<div class="sample-header">
|
||
<h2>Monthly Churn Rate</h2>
|
||
<p class="description">Customer churn rate percentage over months.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Monthly Churn Rate"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jun</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jul</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Aug</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sep</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Oct</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Nov</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Dec</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#032F62"> "Churn %"</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 10</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">5</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 4</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 5</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 4</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 4</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-96">
|
||
<canvas id="chart-96"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-96">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-97">
|
||
<div class="sample-header">
|
||
<h2>A/B Test Results</h2>
|
||
<p class="description">Conversion rates for control vs variant across segments.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "A/B Test Conversion Rates"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Mobile</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Desktop</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Tablet</span><span style="color:#D73A49">,</span><span style="color:#032F62"> New Users</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Returning</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">3</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 5</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 4</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 6</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">4</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 7</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 5</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-97">
|
||
<canvas id="chart-97"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-97">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-98">
|
||
<div class="sample-header">
|
||
<h2>Cloud Cost Breakdown</h2>
|
||
<p class="description">Monthly cloud infrastructure costs by service.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Monthly Cloud Costs"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Compute</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Storage</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Database</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Network</span><span style="color:#D73A49">,</span><span style="color:#032F62"> CDN</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Monitoring</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Other</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> y-axis</span><span style="color:#032F62"> "USD"</span><span style="color:#005CC5"> 0</span><span style="color:#D73A49"> --></span><span style="color:#005CC5"> 20000</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">15000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 8000</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 6500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 3200</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 2800</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 1500</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 900</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-98">
|
||
<canvas id="chart-98"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-98">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sample" id="sample-99">
|
||
<div class="sample-header">
|
||
<h2>Release Frequency</h2>
|
||
<p class="description">Number of production deployments per month.</p>
|
||
</div>
|
||
<div class="sample-content">
|
||
<div class="source-panel">
|
||
<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">xychart-beta</span></span>
|
||
<span class="line"><span style="color:#D73A49"> title</span><span style="color:#032F62"> "Production Deployments per Month"</span></span>
|
||
<span class="line"><span style="color:#D73A49"> x-axis</span><span style="color:#D73A49"> [</span><span style="color:#032F62">Jan</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Feb</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Mar</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Apr</span><span style="color:#D73A49">,</span><span style="color:#032F62"> May</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jun</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Jul</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Aug</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Sep</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Oct</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Nov</span><span style="color:#D73A49">,</span><span style="color:#032F62"> Dec</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> bar</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">12</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 15</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 18</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 22</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 20</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 25</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 28</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 24</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 30</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 32</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 35</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 38</span><span style="color:#D73A49">]</span></span>
|
||
<span class="line"><span style="color:#D73A49"> line</span><span style="color:#D73A49"> [</span><span style="color:#005CC5">12</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 15</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 18</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 22</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 20</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 25</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 28</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 24</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 30</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 32</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 35</span><span style="color:#D73A49">,</span><span style="color:#005CC5"> 38</span><span style="color:#D73A49">]</span></span></code></pre>
|
||
</div>
|
||
<div class="chart-panel" id="chart-panel-99">
|
||
<canvas id="chart-99"></canvas>
|
||
</div>
|
||
<div class="svg-panel" id="svg-panel-99">
|
||
<div class="svg-loading">Rendering…</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<footer class="site-footer">
|
||
<span>© 2026 Luki Labs. MIT License.</span>
|
||
</footer>
|
||
|
||
<script>
|
||
// ============================================================================
|
||
// Theme system
|
||
// ============================================================================
|
||
var THEMES = {"zinc-dark":{"bg":"#18181B","fg":"#FAFAFA"},"tokyo-night":{"bg":"#1a1b26","fg":"#a9b1d6","line":"#3d59a1","accent":"#7aa2f7","muted":"#565f89"},"tokyo-night-storm":{"bg":"#24283b","fg":"#a9b1d6","line":"#3d59a1","accent":"#7aa2f7","muted":"#565f89"},"tokyo-night-light":{"bg":"#d5d6db","fg":"#343b58","line":"#34548a","accent":"#34548a","muted":"#9699a3"},"catppuccin-mocha":{"bg":"#1e1e2e","fg":"#cdd6f4","line":"#585b70","accent":"#cba6f7","muted":"#6c7086"},"catppuccin-latte":{"bg":"#eff1f5","fg":"#4c4f69","line":"#9ca0b0","accent":"#8839ef","muted":"#9ca0b0"},"nord":{"bg":"#2e3440","fg":"#d8dee9","line":"#4c566a","accent":"#88c0d0","muted":"#616e88"},"nord-light":{"bg":"#eceff4","fg":"#2e3440","line":"#aab1c0","accent":"#5e81ac","muted":"#7b88a1"},"dracula":{"bg":"#282a36","fg":"#f8f8f2","line":"#6272a4","accent":"#bd93f9","muted":"#6272a4"},"github-light":{"bg":"#ffffff","fg":"#1f2328","line":"#d1d9e0","accent":"#0969da","muted":"#59636e"},"github-dark":{"bg":"#0d1117","fg":"#e6edf3","line":"#3d444d","accent":"#4493f8","muted":"#9198a1"},"solarized-light":{"bg":"#fdf6e3","fg":"#657b83","line":"#93a1a1","accent":"#268bd2","muted":"#93a1a1"},"solarized-dark":{"bg":"#002b36","fg":"#839496","line":"#586e75","accent":"#268bd2","muted":"#586e75"},"one-dark":{"bg":"#282c34","fg":"#abb2bf","line":"#4b5263","accent":"#c678dd","muted":"#5c6370"}};
|
||
var chartInstances = [];
|
||
|
||
function hexToRgb(hex) {
|
||
if (!hex || typeof hex !== 'string') return null;
|
||
var v = hex.trim();
|
||
if (v[0] === '#') v = v.slice(1);
|
||
if (v.length === 3) v = v[0]+v[0]+v[1]+v[1]+v[2]+v[2];
|
||
if (v.length !== 6) return null;
|
||
var n = parseInt(v, 16);
|
||
if (Number.isNaN(n)) return null;
|
||
return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
|
||
}
|
||
|
||
function setShadowVars(theme) {
|
||
var body = document.body;
|
||
var fg = theme ? theme.fg : '#27272A';
|
||
var bg = theme ? theme.bg : '#FFFFFF';
|
||
var fgRgb = hexToRgb(fg) || { r: 39, g: 39, b: 42 };
|
||
var bgRgb = hexToRgb(bg) || { r: 255, g: 255, b: 255 };
|
||
var brightness = (bgRgb.r * 299 + bgRgb.g * 587 + bgRgb.b * 114) / 1000;
|
||
var darkMode = brightness < 140;
|
||
body.style.setProperty('--foreground-rgb', fgRgb.r + ', ' + fgRgb.g + ', ' + fgRgb.b);
|
||
body.style.setProperty('--shadow-border-opacity', darkMode ? '0.15' : '0.08');
|
||
body.style.setProperty('--shadow-blur-opacity', darkMode ? '0.12' : '0.06');
|
||
}
|
||
|
||
function updateThemeColor(fg, bg) {
|
||
var fgRgb = hexToRgb(fg) || { r: 39, g: 39, b: 42 };
|
||
var bgRgb = hexToRgb(bg) || { r: 255, g: 255, b: 255 };
|
||
var r = Math.round(bgRgb.r * 0.96 + fgRgb.r * 0.04);
|
||
var g = Math.round(bgRgb.g * 0.96 + fgRgb.g * 0.04);
|
||
var b = Math.round(bgRgb.b * 0.96 + fgRgb.b * 0.04);
|
||
var hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
||
document.getElementById('theme-color-meta').setAttribute('content', hex);
|
||
document.body.style.setProperty('--theme-bar-bg', hex);
|
||
var safariDiv = document.getElementById('safari-theme-color');
|
||
safariDiv.style.background = hex;
|
||
safariDiv.style.display = 'none';
|
||
void safariDiv.offsetHeight;
|
||
safariDiv.style.display = '';
|
||
}
|
||
|
||
function getChartColors(theme) {
|
||
var fg = theme ? theme.fg : '#27272A';
|
||
var bg = theme ? theme.bg : '#FFFFFF';
|
||
var fgRgb = hexToRgb(fg) || { r: 39, g: 39, b: 42 };
|
||
var bgRgb = hexToRgb(bg) || { r: 255, g: 255, b: 255 };
|
||
// Grid lines: 12% fg mixed into bg
|
||
var gridR = Math.round(bgRgb.r * 0.88 + fgRgb.r * 0.12);
|
||
var gridG = Math.round(bgRgb.g * 0.88 + fgRgb.g * 0.12);
|
||
var gridB = Math.round(bgRgb.b * 0.88 + fgRgb.b * 0.12);
|
||
// Tick text: 60% fg mixed into bg
|
||
var tickR = Math.round(bgRgb.r * 0.4 + fgRgb.r * 0.6);
|
||
var tickG = Math.round(bgRgb.g * 0.4 + fgRgb.g * 0.6);
|
||
var tickB = Math.round(bgRgb.b * 0.4 + fgRgb.b * 0.6);
|
||
return {
|
||
fg: fg,
|
||
bg: bg,
|
||
grid: 'rgb(' + gridR + ',' + gridG + ',' + gridB + ')',
|
||
tick: 'rgb(' + tickR + ',' + tickG + ',' + tickB + ')',
|
||
accent: theme && theme.accent ? theme.accent : '#3b82f6',
|
||
};
|
||
}
|
||
|
||
var BAR_PALETTE = [
|
||
'rgba(59,130,246,0.7)', // blue
|
||
'rgba(16,185,129,0.7)', // emerald
|
||
'rgba(245,158,11,0.7)', // amber
|
||
'rgba(239,68,68,0.7)', // red
|
||
'rgba(139,92,246,0.7)', // violet
|
||
'rgba(236,72,153,0.7)', // pink
|
||
'rgba(6,182,212,0.7)', // cyan
|
||
'rgba(132,204,22,0.7)', // lime
|
||
];
|
||
|
||
var LINE_PALETTE = [
|
||
'rgba(239,68,68,0.9)', // red
|
||
'rgba(16,185,129,0.9)', // emerald
|
||
'rgba(245,158,11,0.9)', // amber
|
||
'rgba(139,92,246,0.9)', // violet
|
||
'rgba(6,182,212,0.9)', // cyan
|
||
'rgba(236,72,153,0.9)', // pink
|
||
'rgba(59,130,246,0.9)', // blue
|
||
'rgba(132,204,22,0.9)', // lime
|
||
];
|
||
|
||
// ============================================================================
|
||
// XYChart parser
|
||
// ============================================================================
|
||
function parseXYChart(source) {
|
||
var lines = source.split('\n').map(function(l) { return l.trim(); }).filter(Boolean);
|
||
var result = {
|
||
title: '',
|
||
horizontal: false,
|
||
xLabels: null,
|
||
xRange: null,
|
||
xTitle: '',
|
||
yRange: null,
|
||
yTitle: '',
|
||
bars: [],
|
||
lines: [],
|
||
};
|
||
|
||
// Check for horizontal
|
||
if (lines.length > 0 && lines[0].indexOf('horizontal') !== -1) {
|
||
result.horizontal = true;
|
||
}
|
||
|
||
for (var i = 0; i < lines.length; i++) {
|
||
var line = lines[i];
|
||
|
||
// Title
|
||
var titleMatch = line.match(/^title\s+"([^"]+)"/);
|
||
if (titleMatch) {
|
||
result.title = titleMatch[1];
|
||
continue;
|
||
}
|
||
|
||
// x-axis with labels: x-axis "Title" [a, b, c] or x-axis [a, b, c]
|
||
var xLabelMatch = line.match(/^x-axis\s+(?:"([^"]*)"\s*)?\[([^\]]+)\]/);
|
||
if (xLabelMatch) {
|
||
if (xLabelMatch[1]) result.xTitle = xLabelMatch[1];
|
||
result.xLabels = xLabelMatch[2].split(',').map(function(s) { return s.trim(); });
|
||
continue;
|
||
}
|
||
|
||
// x-axis with range: x-axis "Title" min --> max or x-axis min --> max
|
||
var xRangeMatch = line.match(/^x-axis\s+(?:"([^"]*)"\s+)?(\d+(?:\.\d+)?)\s*-->\s*(\d+(?:\.\d+)?)/);
|
||
if (xRangeMatch) {
|
||
if (xRangeMatch[1]) result.xTitle = xRangeMatch[1];
|
||
result.xRange = [parseFloat(xRangeMatch[2]), parseFloat(xRangeMatch[3])];
|
||
continue;
|
||
}
|
||
|
||
// y-axis: y-axis "Title" min --> max or y-axis min --> max
|
||
var yRangeMatch = line.match(/^y-axis\s+(?:"([^"]*)"\s+)?(\d+(?:\.\d+)?)\s*-->\s*(\d+(?:\.\d+)?)/);
|
||
if (yRangeMatch) {
|
||
if (yRangeMatch[1]) result.yTitle = yRangeMatch[1];
|
||
result.yRange = [parseFloat(yRangeMatch[2]), parseFloat(yRangeMatch[3])];
|
||
continue;
|
||
}
|
||
|
||
// y-axis with just title (no range)
|
||
var yTitleOnly = line.match(/^y-axis\s+"([^"]+)"$/);
|
||
if (yTitleOnly) {
|
||
result.yTitle = yTitleOnly[1];
|
||
continue;
|
||
}
|
||
|
||
// bar [...]
|
||
var barMatch = line.match(/^bar\s+\[([^\]]+)\]/);
|
||
if (barMatch) {
|
||
result.bars.push(barMatch[1].split(',').map(function(s) { return parseFloat(s.trim()); }));
|
||
continue;
|
||
}
|
||
|
||
// line [...]
|
||
var lineMatch = line.match(/^line\s+\[([^\]]+)\]/);
|
||
if (lineMatch) {
|
||
result.lines.push(lineMatch[1].split(',').map(function(s) { return parseFloat(s.trim()); }));
|
||
continue;
|
||
}
|
||
}
|
||
|
||
return result;
|
||
}
|
||
|
||
function buildChartConfig(parsed, colors) {
|
||
var datasets = [];
|
||
var labels = parsed.xLabels;
|
||
|
||
// If numeric range and no labels, generate labels from range
|
||
if (!labels && parsed.xRange) {
|
||
var dataLen = 0;
|
||
if (parsed.bars.length > 0) dataLen = parsed.bars[0].length;
|
||
else if (parsed.lines.length > 0) dataLen = parsed.lines[0].length;
|
||
if (dataLen > 0) {
|
||
labels = [];
|
||
var step = (parsed.xRange[1] - parsed.xRange[0]) / (dataLen - 1 || 1);
|
||
for (var k = 0; k < dataLen; k++) {
|
||
labels.push(String(Math.round((parsed.xRange[0] + step * k) * 100) / 100));
|
||
}
|
||
}
|
||
}
|
||
|
||
// If still no labels, generate numbered labels
|
||
if (!labels) {
|
||
var maxLen = 0;
|
||
parsed.bars.forEach(function(b) { if (b.length > maxLen) maxLen = b.length; });
|
||
parsed.lines.forEach(function(l) { if (l.length > maxLen) maxLen = l.length; });
|
||
labels = [];
|
||
for (var k = 0; k < maxLen; k++) labels.push(String(k + 1));
|
||
}
|
||
|
||
// Add bar datasets
|
||
for (var b = 0; b < parsed.bars.length; b++) {
|
||
datasets.push({
|
||
type: 'bar',
|
||
label: 'Bar ' + (b + 1),
|
||
data: parsed.bars[b],
|
||
backgroundColor: BAR_PALETTE[b % BAR_PALETTE.length],
|
||
borderColor: BAR_PALETTE[b % BAR_PALETTE.length].replace('0.7', '1'),
|
||
borderWidth: 1,
|
||
order: 2,
|
||
});
|
||
}
|
||
|
||
// Add line datasets
|
||
for (var l = 0; l < parsed.lines.length; l++) {
|
||
datasets.push({
|
||
type: 'line',
|
||
label: 'Line ' + (l + 1),
|
||
data: parsed.lines[l],
|
||
borderColor: LINE_PALETTE[l % LINE_PALETTE.length],
|
||
backgroundColor: LINE_PALETTE[l % LINE_PALETTE.length].replace('0.9', '0.1'),
|
||
borderWidth: 2,
|
||
pointRadius: 3,
|
||
pointHoverRadius: 5,
|
||
tension: 0.1,
|
||
fill: false,
|
||
order: 1,
|
||
});
|
||
}
|
||
|
||
var scales = {
|
||
x: {
|
||
title: { display: !!parsed.xTitle, text: parsed.xTitle, color: colors.tick },
|
||
ticks: { color: colors.tick },
|
||
grid: { color: colors.grid },
|
||
},
|
||
y: {
|
||
title: { display: !!parsed.yTitle, text: parsed.yTitle, color: colors.tick },
|
||
ticks: { color: colors.tick },
|
||
grid: { color: colors.grid },
|
||
},
|
||
};
|
||
|
||
if (parsed.yRange) {
|
||
scales.y.min = parsed.yRange[0];
|
||
scales.y.max = parsed.yRange[1];
|
||
}
|
||
|
||
var config = {
|
||
type: datasets.length === 1 ? datasets[0].type : 'bar',
|
||
data: { labels: labels, datasets: datasets },
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: true,
|
||
indexAxis: parsed.horizontal ? 'y' : 'x',
|
||
plugins: {
|
||
title: {
|
||
display: !!parsed.title,
|
||
text: parsed.title,
|
||
color: colors.fg,
|
||
font: { size: 14, weight: '600', family: "'Geist', system-ui, sans-serif" },
|
||
},
|
||
legend: { display: datasets.length > 1, labels: { color: colors.tick } },
|
||
},
|
||
scales: scales,
|
||
},
|
||
};
|
||
|
||
return config;
|
||
}
|
||
|
||
function updateChartColors(chart, colors) {
|
||
var opts = chart.options;
|
||
if (opts.plugins.title) opts.plugins.title.color = colors.fg;
|
||
if (opts.plugins.legend && opts.plugins.legend.labels) opts.plugins.legend.labels.color = colors.tick;
|
||
if (opts.scales.x) {
|
||
if (opts.scales.x.title) opts.scales.x.title.color = colors.tick;
|
||
opts.scales.x.ticks.color = colors.tick;
|
||
opts.scales.x.grid.color = colors.grid;
|
||
}
|
||
if (opts.scales.y) {
|
||
if (opts.scales.y.title) opts.scales.y.title.color = colors.tick;
|
||
opts.scales.y.ticks.color = colors.tick;
|
||
opts.scales.y.grid.color = colors.grid;
|
||
}
|
||
chart.update('none');
|
||
}
|
||
|
||
// ============================================================================
|
||
// Theme application
|
||
// ============================================================================
|
||
function applyTheme(themeKey) {
|
||
var theme = themeKey ? THEMES[themeKey] : null;
|
||
var body = document.body;
|
||
|
||
if (theme) {
|
||
body.style.setProperty('--t-bg', theme.bg);
|
||
body.style.setProperty('--t-fg', theme.fg);
|
||
body.style.setProperty('--t-accent', theme.accent || '#3b82f6');
|
||
} else {
|
||
body.style.setProperty('--t-bg', '#FFFFFF');
|
||
body.style.setProperty('--t-fg', '#27272A');
|
||
body.style.setProperty('--t-accent', '#3b82f6');
|
||
}
|
||
setShadowVars(theme);
|
||
updateThemeColor(theme ? theme.fg : '#27272A', theme ? theme.bg : '#FFFFFF');
|
||
|
||
// Update chart panel backgrounds
|
||
for (var j = 0; j < 100; j++) {
|
||
var panel = document.getElementById('chart-panel-' + j);
|
||
if (panel) panel.style.background = theme ? theme.bg : '';
|
||
}
|
||
|
||
// Update all Chart.js instances
|
||
var colors = getChartColors(theme);
|
||
for (var j = 0; j < chartInstances.length; j++) {
|
||
updateChartColors(chartInstances[j], colors);
|
||
}
|
||
|
||
// Re-render all SVGs with new theme
|
||
renderAllSvgs(themeKey);
|
||
|
||
// Update active pill
|
||
var pills = document.querySelectorAll('.theme-pill');
|
||
for (var j = 0; j < pills.length; j++) {
|
||
var isActive = pills[j].getAttribute('data-theme') === themeKey;
|
||
pills[j].classList.toggle('active', isActive);
|
||
pills[j].classList.toggle('shadow-tinted', isActive);
|
||
}
|
||
|
||
if (themeKey) localStorage.setItem('xychart-theme', themeKey);
|
||
else localStorage.removeItem('xychart-theme');
|
||
}
|
||
|
||
// ============================================================================
|
||
// Event handlers
|
||
// ============================================================================
|
||
|
||
// Theme pills
|
||
document.getElementById('theme-pills').addEventListener('click', function(e) {
|
||
var pill = e.target.closest('.theme-pill');
|
||
if (!pill || pill.id === 'theme-more-btn') return;
|
||
applyTheme(pill.getAttribute('data-theme') || '');
|
||
var dd = document.getElementById('theme-more-dropdown');
|
||
if (dd && dd.classList.contains('open')) dd.classList.remove('open');
|
||
});
|
||
|
||
// More themes dropdown
|
||
var moreBtn = document.getElementById('theme-more-btn');
|
||
var moreDropdown = document.getElementById('theme-more-dropdown');
|
||
if (moreBtn && moreDropdown) {
|
||
moreBtn.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
moreDropdown.classList.toggle('open');
|
||
});
|
||
document.addEventListener('click', function(e) {
|
||
if (!moreDropdown.classList.contains('open')) return;
|
||
if (!e.target.closest('.theme-more-wrapper')) moreDropdown.classList.remove('open');
|
||
});
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape' && moreDropdown.classList.contains('open')) moreDropdown.classList.remove('open');
|
||
});
|
||
}
|
||
|
||
// Contents mega-menu
|
||
var contentsBtn = document.getElementById('contents-btn');
|
||
var megaMenu = document.getElementById('mega-menu');
|
||
contentsBtn.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
var isOpen = megaMenu.classList.toggle('open');
|
||
contentsBtn.classList.toggle('active', isOpen);
|
||
contentsBtn.classList.toggle('shadow-tinted', isOpen);
|
||
});
|
||
megaMenu.addEventListener('click', function(e) {
|
||
var link = e.target.closest('a');
|
||
if (!link) return;
|
||
e.preventDefault();
|
||
megaMenu.classList.remove('open');
|
||
contentsBtn.classList.remove('active');
|
||
contentsBtn.classList.remove('shadow-tinted');
|
||
var target = document.querySelector(link.getAttribute('href'));
|
||
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
});
|
||
document.addEventListener('click', function(e) {
|
||
if (!megaMenu.classList.contains('open')) return;
|
||
if (!e.target.closest('.mega-menu') && !e.target.closest('.contents-btn')) {
|
||
megaMenu.classList.remove('open');
|
||
contentsBtn.classList.remove('active');
|
||
contentsBtn.classList.remove('shadow-tinted');
|
||
}
|
||
});
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape' && megaMenu.classList.contains('open')) {
|
||
megaMenu.classList.remove('open');
|
||
contentsBtn.classList.remove('active');
|
||
contentsBtn.classList.remove('shadow-tinted');
|
||
}
|
||
});
|
||
|
||
// ============================================================================
|
||
// Restore saved theme
|
||
// ============================================================================
|
||
var savedTheme = localStorage.getItem('xychart-theme');
|
||
if (savedTheme && THEMES[savedTheme]) {
|
||
document.body.style.setProperty('--t-bg', THEMES[savedTheme].bg);
|
||
document.body.style.setProperty('--t-fg', THEMES[savedTheme].fg);
|
||
document.body.style.setProperty('--t-accent', THEMES[savedTheme].accent || '#3b82f6');
|
||
setShadowVars(THEMES[savedTheme]);
|
||
updateThemeColor(THEMES[savedTheme].fg, THEMES[savedTheme].bg);
|
||
var pills = document.querySelectorAll('.theme-pill');
|
||
for (var j = 0; j < pills.length; j++) {
|
||
var isActive = pills[j].getAttribute('data-theme') === savedTheme;
|
||
pills[j].classList.toggle('active', isActive);
|
||
pills[j].classList.toggle('shadow-tinted', isActive);
|
||
}
|
||
} else {
|
||
setShadowVars(null);
|
||
}
|
||
|
||
// ============================================================================
|
||
// Render all charts
|
||
// ============================================================================
|
||
var sources = ["xychart-beta\n title \"Simple Bar Chart\"\n x-axis [A, B, C]\n bar [10, 20, 30]","xychart-beta\n title \"Product Sales\"\n x-axis [Widgets, Gadgets, Gizmos, Doodads, Thingamajigs]\n bar [150, 230, 180, 95, 310]","xychart-beta\n title \"Browser Market Share\"\n x-axis [Chrome, Safari, Firefox, Edge, Other]\n bar [65, 19, 8, 5, 3]","xychart-beta\n title \"Q1 vs Q2\"\n x-axis [Q1, Q2]\n bar [4500, 5200]","xychart-beta\n title \"Department Headcount\"\n x-axis [Eng, Sales, Marketing, Support, HR, Finance, Legal, Ops]\n bar [45, 32, 18, 25, 8, 12, 6, 15]","xychart-beta\n title \"Daily Bugs Found\"\n x-axis [Mon, Tue, Wed, Thu, Fri]\n bar [3, 7, 2, 5, 1]","xychart-beta\n title \"Consistent Output\"\n x-axis [Week 1, Week 2, Week 3, Week 4]\n bar [100, 102, 99, 101]","xychart-beta\n title \"City Population (thousands)\"\n x-axis [Town A, Town B, City C, Metro D, Mega E]\n bar [5, 25, 150, 800, 3500]","xychart-beta\n title \"Monthly Signups\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct]\n bar [120, 145, 190, 210, 250, 280, 310, 295, 340, 380]","xychart-beta\n title \"Test Scores\"\n x-axis [Alice, Bob, Carol, Dave, Eve]\n y-axis \"Score\" 0 --> 100\n bar [85, 72, 91, 68, 95]","xychart-beta\n title \"Simple Trend\"\n x-axis [Q1, Q2, Q3, Q4]\n line [100, 150, 130, 180]","xychart-beta\n title \"Revenue Growth\"\n x-axis [2019, 2020, 2021, 2022, 2023]\n line [500, 620, 780, 950, 1200]","xychart-beta\n title \"Declining Defect Rate\"\n x-axis [Sprint 1, Sprint 2, Sprint 3, Sprint 4, Sprint 5, Sprint 6]\n line [25, 20, 15, 12, 8, 5]","xychart-beta\n title \"Daily Temperature Variation\"\n x-axis [Mon, Tue, Wed, Thu, Fri, Sat, Sun]\n line [18, 22, 17, 24, 19, 26, 20]","xychart-beta\n title \"Website Visitors\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun]\n y-axis \"Visitors\" 0 --> 50000\n line [12000, 18000, 25000, 31000, 38000, 45000]","xychart-beta\n title \"Stable Metric\"\n x-axis [W1, W2, W3, W4, W5, W6]\n line [50, 51, 49, 50, 52, 50]","xychart-beta\n title \"Traffic Spike\"\n x-axis [6am, 8am, 10am, 12pm, 2pm, 4pm, 6pm]\n line [200, 350, 1200, 4500, 2800, 900, 300]","xychart-beta\n title \"Stock Price Recovery\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun]\n line [100, 72, 45, 38, 65, 95]","xychart-beta\n title \"Pricing Tiers\"\n x-axis [Free, Basic, Pro, Team, Enterprise]\n line [0, 10, 25, 50, 100]","xychart-beta\n title \"Planned vs Actual\"\n x-axis [Q1, Q2, Q3, Q4]\n line [100, 200, 300, 400]\n line [90, 210, 280, 420]","xychart-beta\n title \"Monthly Revenue\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun]\n y-axis \"Revenue (USD)\" 0 --> 10000\n bar [5000, 6200, 7800, 4500, 9200, 8100]\n line [5000, 6200, 7800, 4500, 9200, 8100]","xychart-beta\n title \"Sales with Trend\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun]\n bar [300, 450, 280, 520, 390, 610]\n line [300, 375, 343, 388, 388, 425]","xychart-beta\n title \"Performance vs Target\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun]\n y-axis \"Units\" 0 --> 600\n bar [320, 410, 380, 520, 290, 480]\n line [400, 400, 400, 400, 400, 400]","xychart-beta\n title \"Revenue and Profit\"\n x-axis [Q1, Q2, Q3, Q4]\n bar [5000, 6500, 7200, 8100]\n line [1200, 1800, 2100, 2600]","xychart-beta\n title \"Orders, Returns, and Net\"\n x-axis [Jan, Feb, Mar, Apr, May]\n bar [200, 250, 300, 280, 350]\n bar [20, 30, 25, 35, 28]\n line [180, 220, 275, 245, 322]","xychart-beta\n title \"Costs vs Revenue\"\n x-axis [2020, 2021, 2022, 2023, 2024]\n bar [400, 420, 450, 440, 460]\n line [350, 480, 620, 780, 950]","xychart-beta\n title \"Actual, Forecast, Target\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun]\n bar [100, 120, 115, 140, 135, 160]\n line [95, 110, 120, 130, 140, 150]\n line [120, 120, 120, 120, 120, 120]","xychart-beta\n title \"Channel Performance\"\n x-axis [Jan, Feb, Mar, Apr]\n bar [100, 120, 140, 160]\n bar [80, 90, 100, 110]\n line [180, 210, 240, 270]","xychart-beta\n title \"Monthly and Cumulative Sales\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun]\n bar [100, 150, 120, 180, 200, 170]\n line [100, 250, 370, 550, 750, 920]","xychart-beta\n title \"Funnel Analysis\"\n x-axis [Visitors, Signups, Activated, Paid, Retained]\n bar [10000, 3000, 1500, 800, 500]\n line [10000, 3000, 1500, 800, 500]","xychart-beta\n title \"Fruit Preferences\"\n x-axis [Apple, Banana, Cherry, Date, Elderberry]\n bar [45, 32, 28, 15, 8]","xychart-beta\n title \"Distribution Curve\"\n x-axis 0 --> 100\n line [5, 15, 35, 60, 80, 95, 80, 60, 35, 15, 5]","xychart-beta\n title \"Temperature Log\"\n x-axis [6am, 9am, 12pm, 3pm, 6pm, 9pm]\n y-axis \"Temp (F)\" 50 --> 100\n line [58, 65, 78, 85, 76, 62]","xychart-beta\n title \"Sensor Readings\"\n x-axis [T1, T2, T3, T4, T5]\n y-axis 0 --> 500\n line [120, 250, 380, 310, 190]","xychart-beta\n title \"Quarterly Results\"\n x-axis \"Quarter\" [Q1, Q2, Q3, Q4]\n y-axis \"Revenue ($K)\" 0 --> 1000\n bar [420, 580, 710, 890]","xychart-beta\n title \"Experiment Results\"\n x-axis \"Trial Number\" [1, 2, 3, 4, 5, 6]\n y-axis \"Measurement (mm)\" 0 --> 50\n line [12, 18, 25, 22, 31, 28]","xychart-beta\n title \"Department Budget\"\n x-axis [Engineering, Product Management, Customer Success, Human Resources]\n bar [850, 420, 310, 180]","xychart-beta\n title \"Letter Frequency\"\n x-axis [A, B, C, D, E, F, G, H, I, J, K, L, M]\n bar [82, 15, 28, 43, 127, 22, 20, 61, 70, 2, 8, 40, 24]","xychart-beta\n title \"Annual Revenue\"\n x-axis [2020, 2021, 2022, 2023, 2024]\n y-axis \"USD\" 0 --> 100000\n bar [15000, 28000, 45000, 67000, 92000]","xychart-beta\n title \"CPU Temperature\"\n x-axis [10s, 20s, 30s, 40s, 50s, 60s]\n y-axis \"Celsius\" 60 --> 80\n line [65, 68, 72, 75, 73, 70]","xychart-beta\n title \"Auto Range\"\n x-axis [A, B, C, D, E]\n bar [42, 87, 63, 29, 75]","xychart-beta\n title \"Company Growth\"\n x-axis [2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025]\n line [10, 15, 12, 22, 35, 48, 62, 80]","xychart-beta\n title \"Completion Rate\"\n x-axis [Week 1, Week 2, Week 3, Week 4, Week 5]\n y-axis \"Percent\" 0 --> 100\n line [15, 35, 58, 78, 95]","xychart-beta\n title \"Histogram\"\n x-axis 0 --> 50\n bar [5, 12, 25, 38, 30, 18, 8]","xychart-beta\n title \"Regional Sales\"\n x-axis [US, EU, Asia Pacific, LATAM, MEA, ANZ]\n bar [450, 380, 520, 180, 95, 60]","xychart-beta horizontal\n title \"Language Popularity\"\n x-axis [Python, JavaScript, Java, Go, Rust]\n bar [30, 25, 20, 12, 8]","xychart-beta horizontal\n title \"Sprint Velocity\"\n x-axis [Sprint 1, Sprint 2, Sprint 3, Sprint 4, Sprint 5]\n y-axis \"Story Points\" 0 --> 100\n bar [45, 52, 68, 72, 80]","xychart-beta horizontal\n title \"Response Time Trend\"\n x-axis [v1.0, v1.1, v1.2, v1.3, v1.4]\n line [450, 380, 320, 280, 210]","xychart-beta horizontal\n title \"Budget vs Actual\"\n x-axis [Eng, Sales, Marketing, Ops, HR]\n bar [500, 350, 200, 150, 100]\n line [480, 380, 180, 160, 95]","xychart-beta horizontal\n title \"Top Features Requested\"\n x-axis [Dark Mode, API Access, Mobile App, SSO, Webhooks, CSV Export]\n bar [245, 198, 176, 152, 134, 112]","xychart-beta horizontal\n title \"Team Satisfaction Survey\"\n x-axis [Culture, Compensation, Growth, Balance, Tools]\n y-axis \"Rating\" 0 --> 5\n bar [4, 3, 4, 5, 3]","xychart-beta horizontal\n title \"This Year vs Last Year\"\n x-axis [Q1, Q2, Q3, Q4]\n bar [200, 250, 300, 280]\n bar [180, 220, 270, 310]","xychart-beta horizontal\n title \"GitHub Stars\"\n x-axis [React, Vue, Angular, Svelte, Solid]\n bar [220000, 210000, 95000, 78000, 32000]","xychart-beta horizontal\n title \"Planned vs Actual Delivery\"\n x-axis [Feature A, Feature B, Feature C, Feature D]\n line [10, 15, 20, 25]\n line [12, 14, 22, 23]","xychart-beta horizontal\n title \"Error Categories\"\n x-axis [Authentication Failure, Database Timeout, Rate Limit Exceeded, Invalid Input]\n bar [342, 128, 89, 456]","xychart-beta\n x-axis [A, B, C, D]\n bar [10, 20, 30, 40]","xychart-beta\n title \"Sales\"\n x-axis [Jan, Feb, Mar]\n bar [100, 200, 150]","xychart-beta\n title \"Quarterly Revenue Comparison Across All Regional Offices 2024\"\n x-axis [Q1, Q2, Q3, Q4]\n bar [1200, 1500, 1800, 2100]","xychart-beta\n title \"FY2024 Q3 Results\"\n x-axis [Product A, Product B, Product C]\n bar [340, 520, 180]","xychart-beta\n title \"Growth Rate (%)\"\n x-axis [2020, 2021, 2022, 2023]\n line [5, 12, 8, 15]","xychart-beta\n title \"R&D Investment\"\n x-axis [2021, 2022, 2023, 2024]\n bar [200, 280, 350, 420]","xychart-beta\n title \"Year-Over-Year Comparison\"\n x-axis [Jan, Feb, Mar, Apr, May]\n bar [100, 120, 90, 140, 130]\n line [110, 115, 100, 125, 135]","xychart-beta\n x-axis [A, B]\n bar [1, 2]","xychart-beta\n title \"Complete Chart\"\n x-axis \"Category\" [Alpha, Beta, Gamma, Delta]\n y-axis \"Value\" 0 --> 500\n bar [120, 340, 250, 410]\n line [120, 340, 250, 410]","xychart-beta\n title \"Metrics: Daily Active Users\"\n x-axis [Mon, Tue, Wed, Thu, Fri]\n line [1500, 1800, 2200, 2000, 1700]","xychart-beta\n title \"Monthly Active Users (2024)\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n line [12000, 13500, 15200, 16800, 18500, 20100, 19800, 21500, 23000, 24200, 25800, 28000]","xychart-beta\n title \"Letter Distribution\"\n x-axis [A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z]\n bar [82, 15, 28, 43, 127, 22, 20, 61, 70, 2, 8, 40, 24, 67, 75, 19, 1, 60, 63, 91, 28, 10, 24, 2, 20, 1]","xychart-beta\n title \"Weekly Downloads\"\n x-axis [W1, W2, W3, W4, W5, W6, W7, W8, W9, W10, W11, W12, W13, W14, W15, W16, W17, W18, W19, W20]\n line [500, 520, 480, 550, 600, 580, 620, 650, 700, 680, 720, 750, 800, 780, 820, 850, 900, 880, 920, 950]","xychart-beta\n title \"Product Lines Revenue\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n bar [500, 520, 540, 580, 600, 620, 650, 640, 680, 700, 720, 750]\n bar [300, 320, 310, 350, 370, 380, 400, 390, 420, 440, 450, 470]\n line [800, 840, 850, 930, 970, 1000, 1050, 1030, 1100, 1140, 1170, 1220]","xychart-beta\n title \"2023 vs 2024 Monthly Sales\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n bar [180, 200, 220, 240, 260, 250, 270, 290, 310, 330, 350, 380]\n bar [210, 230, 250, 270, 300, 290, 310, 330, 360, 380, 400, 430]","xychart-beta\n title \"Hourly Server Load\"\n x-axis [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]\n line [15, 12, 10, 8, 7, 9, 18, 45, 72, 85, 88, 90, 82, 78, 80, 85, 88, 75, 60, 45, 35, 28, 22, 18]","xychart-beta\n title \"Cloud Spending by Month\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n y-axis \"USD\" 0 --> 500000\n bar [120000, 135000, 148000, 162000, 178000, 195000, 210000, 228000, 245000, 268000, 290000, 315000]","xychart-beta\n title \"Multi-Region Latency\"\n x-axis [T1, T2, T3, T4, T5, T6, T7, T8, T9, T10]\n line [45, 48, 42, 50, 55, 52, 47, 44, 49, 46]\n line [120, 115, 125, 118, 122, 130, 128, 135, 132, 127]\n line [200, 210, 195, 205, 215, 220, 208, 212, 218, 225]","xychart-beta\n title \"Quarterly Earnings (2021-2024)\"\n x-axis [21Q1, 21Q2, 21Q3, 21Q4, 22Q1, 22Q2, 22Q3, 22Q4, 23Q1, 23Q2, 23Q3, 23Q4, 24Q1, 24Q2, 24Q3, 24Q4]\n bar [120, 140, 135, 160, 155, 175, 170, 190, 185, 210, 205, 230, 225, 250, 245, 270]","xychart-beta\n title \"Daily Active Users (First 15 Days)\"\n x-axis [D1, D2, D3, D4, D5, D6, D7, D8, D9, D10, D11, D12, D13, D14, D15]\n bar [500, 520, 510, 530, 540, 480, 450, 520, 550, 540, 560, 570, 510, 490, 530]\n line [500, 510, 510, 520, 530, 520, 510, 515, 525, 530, 535, 540, 535, 530, 530]","xychart-beta\n title \"Single Value\"\n x-axis [Only]\n bar [42]","xychart-beta\n title \"No Activity\"\n x-axis [Mon, Tue, Wed, Thu, Fri]\n bar [0, 0, 0, 0, 0]","xychart-beta\n title \"National GDP (millions)\"\n x-axis [Country A, Country B, Country C]\n bar [5200000, 3800000, 2900000]","xychart-beta\n title \"Trace Amounts\"\n x-axis [Sample A, Sample B, Sample C, Sample D]\n bar [1, 2, 1, 3]","xychart-beta\n title \"Before and After\"\n x-axis [Before, After]\n bar [25, 75]","xychart-beta\n title \"Equal Distribution\"\n x-axis [A, B, C, D, E]\n bar [50, 50, 50, 50, 50]","xychart-beta\n title \"Revenue by Product\"\n x-axis [Niche A, Niche B, Flagship, Niche C, Niche D]\n bar [50, 30, 5000, 40, 20]","xychart-beta\n title \"Declining Interest\"\n x-axis [Week 1, Week 2, Week 3, Week 4, Week 5]\n line [100, 60, 25, 8, 0]","xychart-beta\n title \"Ramp Up\"\n x-axis [Day 1, Day 2, Day 3, Day 4, Day 5]\n bar [0, 10, 50, 150, 400]","xychart-beta\n title \"Alternating Pattern\"\n x-axis [A, B, C, D, E, F, G, H]\n bar [100, 10, 100, 10, 100, 10, 100, 10]","xychart-beta\n title \"Monthly Revenue (2024)\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n y-axis \"Revenue ($K)\" 0 --> 500\n bar [180, 195, 210, 225, 250, 268, 285, 275, 300, 320, 340, 380]","xychart-beta\n title \"Cumulative Registered Users\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n y-axis \"Users\" 0 --> 50000\n line [2500, 5200, 8800, 13100, 18000, 23500, 29200, 34800, 39500, 43200, 46500, 50000]","xychart-beta\n title \"Average Monthly Temperature\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n y-axis \"Temp (F)\" 20 --> 100\n line [32, 35, 45, 58, 68, 78, 85, 83, 74, 60, 48, 36]","xychart-beta\n title \"ACME Corp Stock Price\"\n x-axis [W1, W2, W3, W4, W5, W6, W7, W8, W9, W10, W11, W12, W13]\n y-axis \"Price ($)\" 80 --> 160\n line [100, 105, 98, 112, 108, 120, 115, 125, 135, 128, 140, 148, 155]","xychart-beta\n title \"Customer Satisfaction Survey\"\n x-axis [Ease of Use, Performance, Support, Pricing, Features, Reliability]\n y-axis \"Score\" 0 --> 5\n bar [4, 3, 5, 3, 4, 4]","xychart-beta\n title \"P95 Response Time by Endpoint\"\n x-axis [/users, /orders, /products, /search, /auth, /reports]\n y-axis \"ms\" 0 --> 1000\n bar [120, 250, 180, 450, 80, 850]","xychart-beta\n title \"Website Traffic\"\n x-axis [Mon, Tue, Wed, Thu, Fri, Sat, Sun]\n bar [8500, 9200, 9800, 9500, 8800, 5200, 4100]\n line [3200, 3500, 3800, 3600, 3400, 2100, 1800]","xychart-beta\n title \"Sprint Burndown\"\n x-axis [D1, D2, D3, D4, D5, D6, D7, D8, D9, D10]\n y-axis \"Story Points\" 0 --> 80\n line [72, 65, 58, 50, 45, 38, 30, 22, 12, 0]\n line [72, 65, 58, 50, 43, 36, 29, 22, 14, 0]","xychart-beta\n title \"Marketing Funnel\"\n x-axis [Impressions, Clicks, Signups, Trials, Purchases]\n bar [50000, 5000, 1200, 400, 150]","xychart-beta\n title \"Error Rate During Incident\"\n x-axis [10am, 11am, 12pm, 1pm, 2pm, 3pm, 4pm, 5pm]\n y-axis \"Errors/min\" 0 --> 500\n bar [5, 12, 45, 380, 420, 250, 35, 8]\n line [5, 12, 45, 380, 420, 250, 35, 8]","xychart-beta\n title \"Company Headcount\"\n x-axis [2018, 2019, 2020, 2021, 2022, 2023, 2024]\n bar [8, 15, 25, 45, 80, 120, 185]","xychart-beta\n title \"Monthly Churn Rate\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n y-axis \"Churn %\" 0 --> 10\n line [5, 4, 5, 4, 3, 3, 4, 3, 3, 2, 2, 2]","xychart-beta\n title \"A/B Test Conversion Rates\"\n x-axis [Mobile, Desktop, Tablet, New Users, Returning]\n bar [3, 5, 4, 2, 6]\n bar [4, 7, 5, 3, 8]","xychart-beta\n title \"Monthly Cloud Costs\"\n x-axis [Compute, Storage, Database, Network, CDN, Monitoring, Other]\n y-axis \"USD\" 0 --> 20000\n bar [15000, 8000, 6500, 3200, 2800, 1500, 900]","xychart-beta\n title \"Production Deployments per Month\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n bar [12, 15, 18, 22, 20, 25, 28, 24, 30, 32, 35, 38]\n line [12, 15, 18, 22, 20, 25, 28, 24, 30, 32, 35, 38]"];
|
||
var activeTheme = savedTheme && THEMES[savedTheme] ? THEMES[savedTheme] : null;
|
||
var colors = getChartColors(activeTheme);
|
||
|
||
Chart.defaults.font.family = "'Geist', system-ui, sans-serif";
|
||
|
||
for (var i = 0; i < sources.length; i++) {
|
||
var canvas = document.getElementById('chart-' + i);
|
||
if (!canvas) continue;
|
||
var parsed = parseXYChart(sources[i]);
|
||
var config = buildChartConfig(parsed, colors);
|
||
try {
|
||
var chart = new Chart(canvas, config);
|
||
chartInstances.push(chart);
|
||
} catch (err) {
|
||
console.error('Chart ' + i + ' failed:', err);
|
||
}
|
||
|
||
// Set panel bg if theme is active
|
||
if (activeTheme) {
|
||
var panel = document.getElementById('chart-panel-' + i);
|
||
if (panel) panel.style.background = activeTheme.bg;
|
||
}
|
||
}
|
||
|
||
// ============================================================================
|
||
// Render beautiful-mermaid SVGs
|
||
// ============================================================================
|
||
function renderAllSvgs(themeKey) {
|
||
var theme = themeKey ? THEMES[themeKey] : null;
|
||
var opts = theme ? { bg: theme.bg, fg: theme.fg, interactive: true } : { interactive: true };
|
||
if (theme) {
|
||
if (theme.line) opts.line = theme.line;
|
||
if (theme.accent) opts.accent = theme.accent;
|
||
if (theme.muted) opts.muted = theme.muted;
|
||
if (theme.surface) opts.surface = theme.surface;
|
||
if (theme.border) opts.border = theme.border;
|
||
}
|
||
for (var i = 0; i < sources.length; i++) {
|
||
(function(idx) {
|
||
window.__mermaid.renderMermaid(sources[idx], opts).then(function(svg) {
|
||
var panel = document.getElementById('svg-panel-' + idx);
|
||
if (panel) panel.innerHTML = svg;
|
||
}).catch(function(err) {
|
||
console.error('SVG ' + idx + ' failed:', err);
|
||
var panel = document.getElementById('svg-panel-' + idx);
|
||
if (panel) panel.innerHTML = '<div class="svg-loading">Error: ' + err.message + '</div>';
|
||
});
|
||
})(i);
|
||
}
|
||
}
|
||
|
||
// Initial SVG render — wait for the module bundle to set window.__mermaid
|
||
window.__renderAllSvgs = renderAllSvgs;
|
||
window.__initThemeKey = savedTheme || '';
|
||
</script>
|
||
<script type="module">
|
||
var a7=Object.create;var{getPrototypeOf:r7,defineProperty:c6,getOwnPropertyNames:t7}=Object;var e7=Object.prototype.hasOwnProperty;var H6=($,J,K)=>{K=$!=null?a7(r7($)):{};let Q=J||!$||!$.__esModule?c6(K,"default",{value:$,enumerable:!0}):K;for(let Z of t7($))if(!e7.call(Q,Z))c6(Q,Z,{get:()=>$[Z],enumerable:!0});return Q};var $9=($,J)=>()=>(J||$((J={exports:{}}).exports,J),J.exports);var R6=(($)=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy($,{get:(J,K)=>(typeof require<"u"?require:J)[K]}):$)(function($){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+$+'" is not supported')});var G6=$9((M7,T6)=>{(function($){if(typeof M7==="object"&&typeof T6<"u")T6.exports=$();else if(typeof define==="function"&&define.amd)define([],$);else{var J;if(typeof window<"u")J=window;else if(typeof global<"u")J=global;else if(typeof self<"u")J=self;else J=this;J.dagre=$()}})(function(){var $,J,K;return function(){function Q(Z,V,B){function U(G,q){if(!V[G]){if(!Z[G]){var z=R6;if(!q&&z)return z(G,!0);if(j)return j(G,!0);var _=Error("Cannot find module '"+G+"'");throw _.code="MODULE_NOT_FOUND",_}var W=V[G]={exports:{}};Z[G][0].call(W.exports,function(F){var H=Z[G][1][F];return U(H||F)},W,W.exports,Q,Z,V,B)}return V[G].exports}for(var j=R6,P=0;P<B.length;P++)U(B[P]);return U}return Q}()({1:[function(Q,Z,V){Z.exports={graphlib:Q("@dagrejs/graphlib"),layout:Q("./lib/layout"),debug:Q("./lib/debug"),util:{time:Q("./lib/util").time,notime:Q("./lib/util").notime},version:Q("./lib/version")}},{"./lib/debug":6,"./lib/layout":8,"./lib/util":27,"./lib/version":28,"@dagrejs/graphlib":29}],2:[function(Q,Z,V){let B=Q("./greedy-fas"),U=Q("./util").uniqueId;Z.exports={run:j,undo:G};function j(q){(q.graph().acyclicer==="greedy"?B(q,_(q)):P(q)).forEach((W)=>{let F=q.edge(W);q.removeEdge(W),F.forwardName=W.name,F.reversed=!0,q.setEdge(W.w,W.v,F,U("rev"))});function _(W){return(F)=>{return W.edge(F).weight}}}function P(q){let z=[],_={},W={};function F(H){if(Object.hasOwn(W,H))return;W[H]=!0,_[H]=!0,q.outEdges(H).forEach((M)=>{if(Object.hasOwn(_,M.w))z.push(M);else F(M.w)}),delete _[H]}return q.nodes().forEach(F),z}function G(q){q.edges().forEach((z)=>{let _=q.edge(z);if(_.reversed){q.removeEdge(z);let W=_.forwardName;delete _.reversed,delete _.forwardName,q.setEdge(z.w,z.v,_,W)}})}},{"./greedy-fas":7,"./util":27}],3:[function(Q,Z,V){let B=Q("./util");Z.exports=U;function U(P){function G(q){let z=P.children(q),_=P.node(q);if(z.length)z.forEach(G);if(Object.hasOwn(_,"minRank")){_.borderLeft=[],_.borderRight=[];for(let W=_.minRank,F=_.maxRank+1;W<F;++W)j(P,"borderLeft","_bl",q,_,W),j(P,"borderRight","_br",q,_,W)}}P.children().forEach(G)}function j(P,G,q,z,_,W){let F={width:0,height:0,rank:W,borderType:G},H=_[G][W-1],M=B.addDummyNode(P,"border",F,q);if(_[G][W]=M,P.setParent(M,z),H)P.setEdge(H,M,{weight:1})}},{"./util":27}],4:[function(Q,Z,V){Z.exports={adjust:B,undo:U};function B(W){let F=W.graph().rankdir.toLowerCase();if(F==="lr"||F==="rl")j(W)}function U(W){let F=W.graph().rankdir.toLowerCase();if(F==="bt"||F==="rl")G(W);if(F==="lr"||F==="rl")z(W),j(W)}function j(W){W.nodes().forEach((F)=>P(W.node(F))),W.edges().forEach((F)=>P(W.edge(F)))}function P(W){let F=W.width;W.width=W.height,W.height=F}function G(W){W.nodes().forEach((F)=>q(W.node(F))),W.edges().forEach((F)=>{let H=W.edge(F);if(H.points.forEach(q),Object.hasOwn(H,"y"))q(H)})}function q(W){W.y=-W.y}function z(W){W.nodes().forEach((F)=>_(W.node(F))),W.edges().forEach((F)=>{let H=W.edge(F);if(H.points.forEach(_),Object.hasOwn(H,"x"))_(H)})}function _(W){let F=W.x;W.x=W.y,W.y=F}},{}],5:[function(Q,Z,V){class B{constructor(){let P={};P._next=P._prev=P,this._sentinel=P}dequeue(){let P=this._sentinel,G=P._prev;if(G!==P)return U(G),G}enqueue(P){let G=this._sentinel;if(P._prev&&P._next)U(P);P._next=G._next,G._next._prev=P,G._next=P,P._prev=G}toString(){let P=[],G=this._sentinel,q=G._prev;while(q!==G)P.push(JSON.stringify(q,j)),q=q._prev;return"["+P.join(", ")+"]"}}function U(P){P._prev._next=P._next,P._next._prev=P._prev,delete P._next,delete P._prev}function j(P,G){if(P!=="_next"&&P!=="_prev")return G}Z.exports=B},{}],6:[function(Q,Z,V){let B=Q("./util"),U=Q("@dagrejs/graphlib").Graph;Z.exports={debugOrdering:j};function j(P){let G=B.buildLayerMatrix(P),q=new U({compound:!0,multigraph:!0}).setGraph({});return P.nodes().forEach((z)=>{q.setNode(z,{label:z}),q.setParent(z,"layer"+P.node(z).rank)}),P.edges().forEach((z)=>q.setEdge(z.v,z.w,{},z.name)),G.forEach((z,_)=>{let W="layer"+_;q.setNode(W,{rank:"same"}),z.reduce((F,H)=>{return q.setEdge(F,H,{style:"invis"}),H})}),q}},{"./util":27,"@dagrejs/graphlib":29}],7:[function(Q,Z,V){let B=Q("@dagrejs/graphlib").Graph,U=Q("./data/list");Z.exports=P;let j=()=>1;function P(F,H){if(F.nodeCount()<=1)return[];let M=z(F,H||j);return G(M.graph,M.buckets,M.zeroIdx).flatMap((Y)=>F.outEdges(Y.v,Y.w))}function G(F,H,M){let R=[],Y=H[H.length-1],L=H[0],b;while(F.nodeCount()){while(b=L.dequeue())q(F,H,M,b);while(b=Y.dequeue())q(F,H,M,b);if(F.nodeCount()){for(let O=H.length-2;O>0;--O)if(b=H[O].dequeue(),b){R=R.concat(q(F,H,M,b,!0));break}}}return R}function q(F,H,M,R,Y){let L=Y?[]:void 0;return F.inEdges(R.v).forEach((b)=>{let O=F.edge(b),A=F.node(b.v);if(Y)L.push({v:b.v,w:b.w});A.out-=O,_(H,M,A)}),F.outEdges(R.v).forEach((b)=>{let O=F.edge(b),A=b.w,D=F.node(A);D.in-=O,_(H,M,D)}),F.removeNode(R.v),L}function z(F,H){let M=new B,R=0,Y=0;F.nodes().forEach((O)=>{M.setNode(O,{v:O,in:0,out:0})}),F.edges().forEach((O)=>{let A=M.edge(O.v,O.w)||0,D=H(O),T=A+D;M.setEdge(O.v,O.w,T),Y=Math.max(Y,M.node(O.v).out+=D),R=Math.max(R,M.node(O.w).in+=D)});let L=W(Y+R+3).map(()=>new U),b=R+1;return M.nodes().forEach((O)=>{_(L,b,M.node(O))}),{graph:M,buckets:L,zeroIdx:b}}function _(F,H,M){if(!M.out)F[0].enqueue(M);else if(!M.in)F[F.length-1].enqueue(M);else F[M.out-M.in+H].enqueue(M)}function W(F){let H=[];for(let M=0;M<F;M++)H.push(M);return H}},{"./data/list":5,"@dagrejs/graphlib":29}],8:[function(Q,Z,V){let B=Q("./acyclic"),U=Q("./normalize"),j=Q("./rank"),P=Q("./util").normalizeRanks,G=Q("./parent-dummy-chains"),q=Q("./util").removeEmptyRanks,z=Q("./nesting-graph"),_=Q("./add-border-segments"),W=Q("./coordinate-system"),F=Q("./order"),H=Q("./position"),M=Q("./util"),R=Q("@dagrejs/graphlib").Graph;Z.exports=Y;function Y(E,k){let x=k&&k.debugTiming?M.time:M.notime;x("layout",()=>{let n=x(" buildLayoutGraph",()=>X(E));x(" runLayout",()=>L(n,x,k)),x(" updateInputGraph",()=>b(E,n))})}function L(E,k,x){k(" makeSpaceForEdgeLabels",()=>N(E)),k(" removeSelfEdges",()=>p(E)),k(" acyclic",()=>B.run(E)),k(" nestingGraph.run",()=>z.run(E)),k(" rank",()=>j(M.asNonCompoundGraph(E))),k(" injectEdgeLabelProxies",()=>S(E)),k(" removeEmptyRanks",()=>q(E)),k(" nestingGraph.cleanup",()=>z.cleanup(E)),k(" normalizeRanks",()=>P(E)),k(" assignRankMinMax",()=>w(E)),k(" removeEdgeLabelProxies",()=>I(E)),k(" normalize.run",()=>U.run(E)),k(" parentDummyChains",()=>G(E)),k(" addBorderSegments",()=>_(E)),k(" order",()=>F(E,x)),k(" insertSelfEdges",()=>h(E)),k(" adjustCoordinateSystem",()=>W.adjust(E)),k(" position",()=>H(E)),k(" positionSelfEdges",()=>m(E)),k(" removeBorderNodes",()=>l(E)),k(" normalize.undo",()=>U.undo(E)),k(" fixupEdgeLabelCoords",()=>C(E)),k(" undoCoordinateSystem",()=>W.undo(E)),k(" translateGraph",()=>d(E)),k(" assignNodeIntersects",()=>s(E)),k(" reversePoints",()=>c(E)),k(" acyclic.undo",()=>B.undo(E))}function b(E,k){E.nodes().forEach((x)=>{let n=E.node(x),t=k.node(x);if(n){if(n.x=t.x,n.y=t.y,n.rank=t.rank,k.children(x).length)n.width=t.width,n.height=t.height}}),E.edges().forEach((x)=>{let n=E.edge(x),t=k.edge(x);if(n.points=t.points,Object.hasOwn(t,"x"))n.x=t.x,n.y=t.y}),E.graph().width=k.graph().width,E.graph().height=k.graph().height}let O=["nodesep","edgesep","ranksep","marginx","marginy"],A={ranksep:50,edgesep:20,nodesep:50,rankdir:"tb"},D=["acyclicer","ranker","rankdir","align"],T=["width","height","rank"],v={width:0,height:0},u=["minlen","weight","width","height","labeloffset"],y={minlen:1,weight:1,width:0,height:0,labeloffset:10,labelpos:"r"},f=["labelpos"];function X(E){let k=new R({multigraph:!0,compound:!0}),x=o(E.graph());return k.setGraph(Object.assign({},A,g(x,O),M.pick(x,D))),E.nodes().forEach((n)=>{let t=o(E.node(n)),J4=g(t,T);Object.keys(v).forEach((e)=>{if(J4[e]===void 0)J4[e]=v[e]}),k.setNode(n,J4),k.setParent(n,E.parent(n))}),E.edges().forEach((n)=>{let t=o(E.edge(n));k.setEdge(n,Object.assign({},y,g(t,u),M.pick(t,f)))}),k}function N(E){let k=E.graph();k.ranksep/=2,E.edges().forEach((x)=>{let n=E.edge(x);if(n.minlen*=2,n.labelpos.toLowerCase()!=="c")if(k.rankdir==="TB"||k.rankdir==="BT")n.width+=n.labeloffset;else n.height+=n.labeloffset})}function S(E){E.edges().forEach((k)=>{let x=E.edge(k);if(x.width&&x.height){let n=E.node(k.v),J4={rank:(E.node(k.w).rank-n.rank)/2+n.rank,e:k};M.addDummyNode(E,"edge-proxy",J4,"_ep")}})}function w(E){let k=0;E.nodes().forEach((x)=>{let n=E.node(x);if(n.borderTop)n.minRank=E.node(n.borderTop).rank,n.maxRank=E.node(n.borderBottom).rank,k=Math.max(k,n.maxRank)}),E.graph().maxRank=k}function I(E){E.nodes().forEach((k)=>{let x=E.node(k);if(x.dummy==="edge-proxy")E.edge(x.e).labelRank=x.rank,E.removeNode(k)})}function d(E){let k=Number.POSITIVE_INFINITY,x=0,n=Number.POSITIVE_INFINITY,t=0,J4=E.graph(),e=J4.marginx||0,G4=J4.marginy||0;function q4(M4){let{x:W4,y:n4,width:m6,height:h6}=M4;k=Math.min(k,W4-m6/2),x=Math.max(x,W4+m6/2),n=Math.min(n,n4-h6/2),t=Math.max(t,n4+h6/2)}E.nodes().forEach((M4)=>q4(E.node(M4))),E.edges().forEach((M4)=>{let W4=E.edge(M4);if(Object.hasOwn(W4,"x"))q4(W4)}),k-=e,n-=G4,E.nodes().forEach((M4)=>{let W4=E.node(M4);W4.x-=k,W4.y-=n}),E.edges().forEach((M4)=>{let W4=E.edge(M4);if(W4.points.forEach((n4)=>{n4.x-=k,n4.y-=n}),Object.hasOwn(W4,"x"))W4.x-=k;if(Object.hasOwn(W4,"y"))W4.y-=n}),J4.width=x-k+e,J4.height=t-n+G4}function s(E){E.edges().forEach((k)=>{let x=E.edge(k),n=E.node(k.v),t=E.node(k.w),J4,e;if(!x.points)x.points=[],J4=t,e=n;else J4=x.points[0],e=x.points[x.points.length-1];x.points.unshift(M.intersectRect(n,J4)),x.points.push(M.intersectRect(t,e))})}function C(E){E.edges().forEach((k)=>{let x=E.edge(k);if(Object.hasOwn(x,"x")){if(x.labelpos==="l"||x.labelpos==="r")x.width-=x.labeloffset;switch(x.labelpos){case"l":x.x-=x.width/2+x.labeloffset;break;case"r":x.x+=x.width/2+x.labeloffset;break}}})}function c(E){E.edges().forEach((k)=>{let x=E.edge(k);if(x.reversed)x.points.reverse()})}function l(E){E.nodes().forEach((k)=>{if(E.children(k).length){let x=E.node(k),n=E.node(x.borderTop),t=E.node(x.borderBottom),J4=E.node(x.borderLeft[x.borderLeft.length-1]),e=E.node(x.borderRight[x.borderRight.length-1]);x.width=Math.abs(e.x-J4.x),x.height=Math.abs(t.y-n.y),x.x=J4.x+x.width/2,x.y=n.y+x.height/2}}),E.nodes().forEach((k)=>{if(E.node(k).dummy==="border")E.removeNode(k)})}function p(E){E.edges().forEach((k)=>{if(k.v===k.w){var x=E.node(k.v);if(!x.selfEdges)x.selfEdges=[];x.selfEdges.push({e:k,label:E.edge(k)}),E.removeEdge(k)}})}function h(E){var k=M.buildLayerMatrix(E);k.forEach((x)=>{var n=0;x.forEach((t,J4)=>{var e=E.node(t);e.order=J4+n,(e.selfEdges||[]).forEach((G4)=>{M.addDummyNode(E,"selfedge",{width:G4.label.width,height:G4.label.height,rank:e.rank,order:J4+ ++n,e:G4.e,label:G4.label},"_se")}),delete e.selfEdges})})}function m(E){E.nodes().forEach((k)=>{var x=E.node(k);if(x.dummy==="selfedge"){var n=E.node(x.e.v),t=n.x+n.width/2,J4=n.y,e=x.x-t,G4=n.height/2;E.setEdge(x.e,x.label),E.removeNode(k),x.label.points=[{x:t+2*e/3,y:J4-G4},{x:t+5*e/6,y:J4-G4},{x:t+e,y:J4},{x:t+5*e/6,y:J4+G4},{x:t+2*e/3,y:J4+G4}],x.label.x=x.x,x.label.y=x.y}})}function g(E,k){return M.mapValues(M.pick(E,k),Number)}function o(E){var k={};if(E)Object.entries(E).forEach(([x,n])=>{if(typeof x==="string")x=x.toLowerCase();k[x]=n});return k}},{"./acyclic":2,"./add-border-segments":3,"./coordinate-system":4,"./nesting-graph":9,"./normalize":10,"./order":15,"./parent-dummy-chains":20,"./position":22,"./rank":24,"./util":27,"@dagrejs/graphlib":29}],9:[function(Q,Z,V){let B=Q("./util");Z.exports={run:U,cleanup:q};function U(z){let _=B.addDummyNode(z,"root",{},"_root"),W=P(z),F=Object.values(W),H=B.applyWithChunking(Math.max,F)-1,M=2*H+1;z.graph().nestingRoot=_,z.edges().forEach((Y)=>z.edge(Y).minlen*=M);let R=G(z)+1;z.children().forEach((Y)=>j(z,_,M,R,H,W,Y)),z.graph().nodeRankFactor=M}function j(z,_,W,F,H,M,R){let Y=z.children(R);if(!Y.length){if(R!==_)z.setEdge(_,R,{weight:0,minlen:W});return}let L=B.addBorderNode(z,"_bt"),b=B.addBorderNode(z,"_bb"),O=z.node(R);if(z.setParent(L,R),O.borderTop=L,z.setParent(b,R),O.borderBottom=b,Y.forEach((A)=>{j(z,_,W,F,H,M,A);let D=z.node(A),T=D.borderTop?D.borderTop:A,v=D.borderBottom?D.borderBottom:A,u=D.borderTop?F:2*F,y=T!==v?1:H-M[R]+1;z.setEdge(L,T,{weight:u,minlen:y,nestingEdge:!0}),z.setEdge(v,b,{weight:u,minlen:y,nestingEdge:!0})}),!z.parent(R))z.setEdge(_,L,{weight:0,minlen:H+M[R]})}function P(z){var _={};function W(F,H){var M=z.children(F);if(M&&M.length)M.forEach((R)=>W(R,H+1));_[F]=H}return z.children().forEach((F)=>W(F,1)),_}function G(z){return z.edges().reduce((_,W)=>_+z.edge(W).weight,0)}function q(z){var _=z.graph();z.removeNode(_.nestingRoot),delete _.nestingRoot,z.edges().forEach((W)=>{var F=z.edge(W);if(F.nestingEdge)z.removeEdge(W)})}},{"./util":27}],10:[function(Q,Z,V){let B=Q("./util");Z.exports={run:U,undo:P};function U(G){G.graph().dummyChains=[],G.edges().forEach((q)=>j(G,q))}function j(G,q){let z=q.v,_=G.node(z).rank,W=q.w,F=G.node(W).rank,H=q.name,M=G.edge(q),R=M.labelRank;if(F===_+1)return;G.removeEdge(q);let Y,L,b;for(b=0,++_;_<F;++b,++_){if(M.points=[],L={width:0,height:0,edgeLabel:M,edgeObj:q,rank:_},Y=B.addDummyNode(G,"edge",L,"_d"),_===R)L.width=M.width,L.height=M.height,L.dummy="edge-label",L.labelpos=M.labelpos;if(G.setEdge(z,Y,{weight:M.weight},H),b===0)G.graph().dummyChains.push(Y);z=Y}G.setEdge(z,W,{weight:M.weight},H)}function P(G){G.graph().dummyChains.forEach((q)=>{let z=G.node(q),_=z.edgeLabel,W;G.setEdge(z.edgeObj,_);while(z.dummy){if(W=G.successors(q)[0],G.removeNode(q),_.points.push({x:z.x,y:z.y}),z.dummy==="edge-label")_.x=z.x,_.y=z.y,_.width=z.width,_.height=z.height;q=W,z=G.node(q)}})}},{"./util":27}],11:[function(Q,Z,V){Z.exports=B;function B(U,j,P){let G={},q;P.forEach((z)=>{let _=U.parent(z),W,F;while(_){if(W=U.parent(_),W)F=G[W],G[W]=_;else F=q,q=_;if(F&&F!==_){j.setEdge(F,_);return}_=W}})}},{}],12:[function(Q,Z,V){Z.exports=B;function B(U,j=[]){return j.map((P)=>{let G=U.inEdges(P);if(!G.length)return{v:P};else{let q=G.reduce((z,_)=>{let W=U.edge(_),F=U.node(_.v);return{sum:z.sum+W.weight*F.order,weight:z.weight+W.weight}},{sum:0,weight:0});return{v:P,barycenter:q.sum/q.weight,weight:q.weight}}})}},{}],13:[function(Q,Z,V){let B=Q("@dagrejs/graphlib").Graph,U=Q("../util");Z.exports=j;function j(G,q,z,_){if(!_)_=G.nodes();let W=P(G),F=new B({compound:!0}).setGraph({root:W}).setDefaultNodeLabel((H)=>G.node(H));return _.forEach((H)=>{let M=G.node(H),R=G.parent(H);if(M.rank===q||M.minRank<=q&&q<=M.maxRank){if(F.setNode(H),F.setParent(H,R||W),G[z](H).forEach((Y)=>{let L=Y.v===H?Y.w:Y.v,b=F.edge(L,H),O=b!==void 0?b.weight:0;F.setEdge(L,H,{weight:G.edge(Y).weight+O})}),Object.hasOwn(M,"minRank"))F.setNode(H,{borderLeft:M.borderLeft[q],borderRight:M.borderRight[q]})}}),F}function P(G){var q;while(G.hasNode(q=U.uniqueId("_root")));return q}},{"../util":27,"@dagrejs/graphlib":29}],14:[function(Q,Z,V){let B=Q("../util").zipObject;Z.exports=U;function U(P,G){let q=0;for(let z=1;z<G.length;++z)q+=j(P,G[z-1],G[z]);return q}function j(P,G,q){let z=B(q,q.map((R,Y)=>Y)),_=G.flatMap((R)=>{return P.outEdges(R).map((Y)=>{return{pos:z[Y.w],weight:P.edge(Y).weight}}).sort((Y,L)=>Y.pos-L.pos)}),W=1;while(W<q.length)W<<=1;let F=2*W-1;W-=1;let H=Array(F).fill(0),M=0;return _.forEach((R)=>{let Y=R.pos+W;H[Y]+=R.weight;let L=0;while(Y>0){if(Y%2)L+=H[Y+1];Y=Y-1>>1,H[Y]+=R.weight}M+=R.weight*L}),M}},{"../util":27}],15:[function(Q,Z,V){let B=Q("./init-order"),U=Q("./cross-count"),j=Q("./sort-subgraph"),P=Q("./build-layer-graph"),G=Q("./add-subgraph-constraints"),q=Q("@dagrejs/graphlib").Graph,z=Q("../util");Z.exports=_;function _(M,R){if(R&&typeof R.customOrder==="function"){R.customOrder(M,_);return}let Y=z.maxRank(M),L=W(M,z.range(1,Y+1),"inEdges"),b=W(M,z.range(Y-1,-1,-1),"outEdges"),O=B(M);if(H(M,O),R&&R.disableOptimalOrderHeuristic)return;let A=Number.POSITIVE_INFINITY,D;for(let T=0,v=0;v<4;++T,++v){F(T%2?L:b,T%4>=2),O=z.buildLayerMatrix(M);let u=U(M,O);if(u<A)v=0,D=Object.assign({},O),A=u}H(M,D)}function W(M,R,Y){let L=new Map,b=(O,A)=>{if(!L.has(O))L.set(O,[]);L.get(O).push(A)};for(let O of M.nodes()){let A=M.node(O);if(typeof A.rank==="number")b(A.rank,O);if(typeof A.minRank==="number"&&typeof A.maxRank==="number"){for(let D=A.minRank;D<=A.maxRank;D++)if(D!==A.rank)b(D,O)}}return R.map(function(O){return P(M,O,Y,L.get(O)||[])})}function F(M,R){let Y=new q;M.forEach(function(L){let b=L.graph().root,O=j(L,b,Y,R);O.vs.forEach((A,D)=>L.node(A).order=D),G(L,Y,O.vs)})}function H(M,R){Object.values(R).forEach((Y)=>Y.forEach((L,b)=>M.node(L).order=b))}},{"../util":27,"./add-subgraph-constraints":11,"./build-layer-graph":13,"./cross-count":14,"./init-order":16,"./sort-subgraph":18,"@dagrejs/graphlib":29}],16:[function(Q,Z,V){let B=Q("../util");Z.exports=U;function U(j){let P={},G=j.nodes().filter((H)=>!j.children(H).length),q=G.map((H)=>j.node(H).rank),z=B.applyWithChunking(Math.max,q),_=B.range(z+1).map(()=>[]);function W(H){if(P[H])return;P[H]=!0;let M=j.node(H);_[M.rank].push(H),j.successors(H).forEach(W)}return G.sort((H,M)=>j.node(H).rank-j.node(M).rank).forEach(W),_}},{"../util":27}],17:[function(Q,Z,V){let B=Q("../util");Z.exports=U;function U(G,q){let z={};G.forEach((W,F)=>{let H=z[W.v]={indegree:0,in:[],out:[],vs:[W.v],i:F};if(W.barycenter!==void 0)H.barycenter=W.barycenter,H.weight=W.weight}),q.edges().forEach((W)=>{let F=z[W.v],H=z[W.w];if(F!==void 0&&H!==void 0)H.indegree++,F.out.push(z[W.w])});let _=Object.values(z).filter((W)=>!W.indegree);return j(_)}function j(G){let q=[];function z(W){return(F)=>{if(F.merged)return;if(F.barycenter===void 0||W.barycenter===void 0||F.barycenter>=W.barycenter)P(W,F)}}function _(W){return(F)=>{if(F.in.push(W),--F.indegree===0)G.push(F)}}while(G.length){let W=G.pop();q.push(W),W.in.reverse().forEach(z(W)),W.out.forEach(_(W))}return q.filter((W)=>!W.merged).map((W)=>{return B.pick(W,["vs","i","barycenter","weight"])})}function P(G,q){let z=0,_=0;if(G.weight)z+=G.barycenter*G.weight,_+=G.weight;if(q.weight)z+=q.barycenter*q.weight,_+=q.weight;G.vs=q.vs.concat(G.vs),G.barycenter=z/_,G.weight=_,G.i=Math.min(q.i,G.i),q.merged=!0}},{"../util":27}],18:[function(Q,Z,V){let B=Q("./barycenter"),U=Q("./resolve-conflicts"),j=Q("./sort");Z.exports=P;function P(z,_,W,F){let H=z.children(_),M=z.node(_),R=M?M.borderLeft:void 0,Y=M?M.borderRight:void 0,L={};if(R)H=H.filter((D)=>D!==R&&D!==Y);let b=B(z,H);b.forEach((D)=>{if(z.children(D.v).length){let T=P(z,D.v,W,F);if(L[D.v]=T,Object.hasOwn(T,"barycenter"))q(D,T)}});let O=U(b,W);G(O,L);let A=j(O,F);if(R){if(A.vs=[R,A.vs,Y].flat(!0),z.predecessors(R).length){let D=z.node(z.predecessors(R)[0]),T=z.node(z.predecessors(Y)[0]);if(!Object.hasOwn(A,"barycenter"))A.barycenter=0,A.weight=0;A.barycenter=(A.barycenter*A.weight+D.order+T.order)/(A.weight+2),A.weight+=2}}return A}function G(z,_){z.forEach((W)=>{W.vs=W.vs.flatMap((F)=>{if(_[F])return _[F].vs;return F})})}function q(z,_){if(z.barycenter!==void 0)z.barycenter=(z.barycenter*z.weight+_.barycenter*_.weight)/(z.weight+_.weight),z.weight+=_.weight;else z.barycenter=_.barycenter,z.weight=_.weight}},{"./barycenter":12,"./resolve-conflicts":17,"./sort":19}],19:[function(Q,Z,V){let B=Q("../util");Z.exports=U;function U(G,q){let z=B.partition(G,(L)=>{return Object.hasOwn(L,"barycenter")}),_=z.lhs,W=z.rhs.sort((L,b)=>b.i-L.i),F=[],H=0,M=0,R=0;_.sort(P(!!q)),R=j(F,W,R),_.forEach((L)=>{R+=L.vs.length,F.push(L.vs),H+=L.barycenter*L.weight,M+=L.weight,R=j(F,W,R)});let Y={vs:F.flat(!0)};if(M)Y.barycenter=H/M,Y.weight=M;return Y}function j(G,q,z){let _;while(q.length&&(_=q[q.length-1]).i<=z)q.pop(),G.push(_.vs),z++;return z}function P(G){return(q,z)=>{if(q.barycenter<z.barycenter)return-1;else if(q.barycenter>z.barycenter)return 1;return!G?q.i-z.i:z.i-q.i}}},{"../util":27}],20:[function(Q,Z,V){Z.exports=B;function B(P){let G=j(P);P.graph().dummyChains.forEach((q)=>{let z=P.node(q),_=z.edgeObj,W=U(P,G,_.v,_.w),F=W.path,H=W.lca,M=0,R=F[M],Y=!0;while(q!==_.w){if(z=P.node(q),Y){while((R=F[M])!==H&&P.node(R).maxRank<z.rank)M++;if(R===H)Y=!1}if(!Y){while(M<F.length-1&&P.node(R=F[M+1]).minRank<=z.rank)M++;R=F[M]}P.setParent(q,R),q=P.successors(q)[0]}})}function U(P,G,q,z){let _=[],W=[],F=Math.min(G[q].low,G[z].low),H=Math.max(G[q].lim,G[z].lim),M,R;M=q;do M=P.parent(M),_.push(M);while(M&&(G[M].low>F||H>G[M].lim));R=M,M=z;while((M=P.parent(M))!==R)W.push(M);return{path:_.concat(W.reverse()),lca:R}}function j(P){let G={},q=0;function z(_){let W=q;P.children(_).forEach(z),G[_]={low:W,lim:q++}}return P.children().forEach(z),G}},{}],21:[function(Q,Z,V){let B=Q("@dagrejs/graphlib").Graph,U=Q("../util");Z.exports={positionX:Y,findType1Conflicts:j,findType2Conflicts:P,addConflict:q,hasConflict:z,verticalAlignment:_,horizontalCompaction:W,alignCoordinates:M,findSmallestWidthAlignment:H,balance:R};function j(O,A){let D={};function T(v,u){let y=0,f=0,X=v.length,N=u[u.length-1];return u.forEach((S,w)=>{let I=G(O,S),d=I?O.node(I).order:X;if(I||S===N)u.slice(f,w+1).forEach((s)=>{O.predecessors(s).forEach((C)=>{let c=O.node(C),l=c.order;if((l<y||d<l)&&!(c.dummy&&O.node(s).dummy))q(D,C,s)})}),f=w+1,y=d}),u}return A.length&&A.reduce(T),D}function P(O,A){let D={};function T(u,y,f,X,N){let S;U.range(y,f).forEach((w)=>{if(S=u[w],O.node(S).dummy)O.predecessors(S).forEach((I)=>{let d=O.node(I);if(d.dummy&&(d.order<X||d.order>N))q(D,I,S)})})}function v(u,y){let f=-1,X,N=0;return y.forEach((S,w)=>{if(O.node(S).dummy==="border"){let I=O.predecessors(S);if(I.length)X=O.node(I[0]).order,T(y,N,w,f,X),N=w,f=X}T(y,N,y.length,X,u.length)}),y}return A.length&&A.reduce(v),D}function G(O,A){if(O.node(A).dummy)return O.predecessors(A).find((D)=>O.node(D).dummy)}function q(O,A,D){if(A>D){let v=A;A=D,D=v}let T=O[A];if(!T)O[A]=T={};T[D]=!0}function z(O,A,D){if(A>D){let T=A;A=D,D=T}return!!O[A]&&Object.hasOwn(O[A],D)}function _(O,A,D,T){let v={},u={},y={};return A.forEach((f)=>{f.forEach((X,N)=>{v[X]=X,u[X]=X,y[X]=N})}),A.forEach((f)=>{let X=-1;f.forEach((N)=>{let S=T(N);if(S.length){S=S.sort((I,d)=>y[I]-y[d]);let w=(S.length-1)/2;for(let I=Math.floor(w),d=Math.ceil(w);I<=d;++I){let s=S[I];if(u[N]===N&&X<y[s]&&!z(D,N,s))u[s]=N,u[N]=v[N]=v[s],X=y[s]}}})}),{root:v,align:u}}function W(O,A,D,T,v){let u={},y=F(O,A,D,v),f=v?"borderLeft":"borderRight";function X(w,I){let d=y.nodes(),s=d.pop(),C={};while(s){if(C[s])w(s);else C[s]=!0,d.push(s),d=d.concat(I(s));s=d.pop()}}function N(w){u[w]=y.inEdges(w).reduce((I,d)=>{return Math.max(I,u[d.v]+y.edge(d))},0)}function S(w){let I=y.outEdges(w).reduce((s,C)=>{return Math.min(s,u[C.w]-y.edge(C))},Number.POSITIVE_INFINITY),d=O.node(w);if(I!==Number.POSITIVE_INFINITY&&d.borderType!==f)u[w]=Math.max(u[w],I)}return X(N,y.predecessors.bind(y)),X(S,y.successors.bind(y)),Object.keys(T).forEach((w)=>u[w]=u[D[w]]),u}function F(O,A,D,T){let v=new B,u=O.graph(),y=L(u.nodesep,u.edgesep,T);return A.forEach((f)=>{let X;f.forEach((N)=>{let S=D[N];if(v.setNode(S),X){var w=D[X],I=v.edge(w,S);v.setEdge(w,S,Math.max(y(O,N,X),I||0))}X=N})}),v}function H(O,A){return Object.values(A).reduce((D,T)=>{let{NEGATIVE_INFINITY:v,POSITIVE_INFINITY:u}=Number;Object.entries(T).forEach(([f,X])=>{let N=b(O,f)/2;v=Math.max(X+N,v),u=Math.min(X-N,u)});let y=v-u;if(y<D[0])D=[y,T];return D},[Number.POSITIVE_INFINITY,null])[1]}function M(O,A){let D=Object.values(A),T=U.applyWithChunking(Math.min,D),v=U.applyWithChunking(Math.max,D);["u","d"].forEach((u)=>{["l","r"].forEach((y)=>{let f=u+y,X=O[f];if(X===A)return;let N=Object.values(X),S=T-U.applyWithChunking(Math.min,N);if(y!=="l")S=v-U.applyWithChunking(Math.max,N);if(S)O[f]=U.mapValues(X,(w)=>w+S)})})}function R(O,A){return U.mapValues(O.ul,(D,T)=>{if(A)return O[A.toLowerCase()][T];else{let v=Object.values(O).map((u)=>u[T]).sort((u,y)=>u-y);return(v[1]+v[2])/2}})}function Y(O){let A=U.buildLayerMatrix(O),D=Object.assign(j(O,A),P(O,A)),T={},v;["u","d"].forEach((y)=>{v=y==="u"?A:Object.values(A).reverse(),["l","r"].forEach((f)=>{if(f==="r")v=v.map((w)=>{return Object.values(w).reverse()});let X=(y==="u"?O.predecessors:O.successors).bind(O),N=_(O,v,D,X),S=W(O,v,N.root,N.align,f==="r");if(f==="r")S=U.mapValues(S,(w)=>-w);T[y+f]=S})});let u=H(O,T);return M(T,u),R(T,O.graph().align)}function L(O,A,D){return(T,v,u)=>{let y=T.node(v),f=T.node(u),X=0,N;if(X+=y.width/2,Object.hasOwn(y,"labelpos"))switch(y.labelpos.toLowerCase()){case"l":N=-y.width/2;break;case"r":N=y.width/2;break}if(N)X+=D?N:-N;if(N=0,X+=(y.dummy?A:O)/2,X+=(f.dummy?A:O)/2,X+=f.width/2,Object.hasOwn(f,"labelpos"))switch(f.labelpos.toLowerCase()){case"l":N=f.width/2;break;case"r":N=-f.width/2;break}if(N)X+=D?N:-N;return N=0,X}}function b(O,A){return O.node(A).width}},{"../util":27,"@dagrejs/graphlib":29}],22:[function(Q,Z,V){let B=Q("../util"),U=Q("./bk").positionX;Z.exports=j;function j(G){G=B.asNonCompoundGraph(G),P(G),Object.entries(U(G)).forEach(([q,z])=>G.node(q).x=z)}function P(G){let q=B.buildLayerMatrix(G),z=G.graph().ranksep,_=0;q.forEach((W)=>{let F=W.reduce((H,M)=>{let R=G.node(M).height;if(H>R)return H;else return R},0);W.forEach((H)=>G.node(H).y=_+F/2),_+=F+z})}},{"../util":27,"./bk":21}],23:[function(Q,Z,V){var B=Q("@dagrejs/graphlib").Graph,U=Q("./util").slack;Z.exports=j;function j(z){var _=new B({directed:!1}),W=z.nodes()[0],F=z.nodeCount();_.setNode(W,{});var H,M;while(P(_,z)<F)H=G(_,z),M=_.hasNode(H.v)?U(z,H):-U(z,H),q(_,z,M);return _}function P(z,_){function W(F){_.nodeEdges(F).forEach((H)=>{var M=H.v,R=F===M?H.w:M;if(!z.hasNode(R)&&!U(_,H))z.setNode(R,{}),z.setEdge(F,R,{}),W(R)})}return z.nodes().forEach(W),z.nodeCount()}function G(z,_){return _.edges().reduce((F,H)=>{let M=Number.POSITIVE_INFINITY;if(z.hasNode(H.v)!==z.hasNode(H.w))M=U(_,H);if(M<F[0])return[M,H];return F},[Number.POSITIVE_INFINITY,null])[1]}function q(z,_,W){z.nodes().forEach((F)=>_.node(F).rank+=W)}},{"./util":26,"@dagrejs/graphlib":29}],24:[function(Q,Z,V){var B=Q("./util"),U=B.longestPath,j=Q("./feasible-tree"),P=Q("./network-simplex");Z.exports=G;function G(W){var F=W.graph().ranker;if(F instanceof Function)return F(W);switch(W.graph().ranker){case"network-simplex":_(W);break;case"tight-tree":z(W);break;case"longest-path":q(W);break;case"none":break;default:_(W)}}var q=U;function z(W){U(W),j(W)}function _(W){P(W)}},{"./feasible-tree":23,"./network-simplex":25,"./util":26}],25:[function(Q,Z,V){var B=Q("./feasible-tree"),U=Q("./util").slack,j=Q("./util").longestPath,P=Q("@dagrejs/graphlib").alg.preorder,G=Q("@dagrejs/graphlib").alg.postorder,q=Q("../util").simplify;Z.exports=z,z.initLowLimValues=H,z.initCutValues=_,z.calcCutValue=F,z.leaveEdge=R,z.enterEdge=Y,z.exchangeEdges=L;function z(D){D=q(D),j(D);var T=B(D);H(T),_(T,D);var v,u;while(v=R(T))u=Y(T,D,v),L(T,D,v,u)}function _(D,T){var v=G(D,D.nodes());v=v.slice(0,v.length-1),v.forEach((u)=>W(D,T,u))}function W(D,T,v){var u=D.node(v),y=u.parent;D.edge(v,y).cutvalue=F(D,T,v)}function F(D,T,v){var u=D.node(v),y=u.parent,f=!0,X=T.edge(v,y),N=0;if(!X)f=!1,X=T.edge(y,v);return N=X.weight,T.nodeEdges(v).forEach((S)=>{var w=S.v===v,I=w?S.w:S.v;if(I!==y){var d=w===f,s=T.edge(S).weight;if(N+=d?s:-s,O(D,v,I)){var C=D.edge(v,I).cutvalue;N+=d?-C:C}}}),N}function H(D,T){if(arguments.length<2)T=D.nodes()[0];M(D,{},1,T)}function M(D,T,v,u,y){var f=v,X=D.node(u);if(T[u]=!0,D.neighbors(u).forEach((N)=>{if(!Object.hasOwn(T,N))v=M(D,T,v,N,u)}),X.low=f,X.lim=v++,y)X.parent=y;else delete X.parent;return v}function R(D){return D.edges().find((T)=>D.edge(T).cutvalue<0)}function Y(D,T,v){var{v:u,w:y}=v;if(!T.hasEdge(u,y))u=v.w,y=v.v;var f=D.node(u),X=D.node(y),N=f,S=!1;if(f.lim>X.lim)N=X,S=!0;var w=T.edges().filter((I)=>{return S===A(D,D.node(I.v),N)&&S!==A(D,D.node(I.w),N)});return w.reduce((I,d)=>{if(U(T,d)<U(T,I))return d;return I})}function L(D,T,v,u){var{v:y,w:f}=v;D.removeEdge(y,f),D.setEdge(u.v,u.w,{}),H(D),_(D,T),b(D,T)}function b(D,T){var v=D.nodes().find((y)=>!T.node(y).parent),u=P(D,v);u=u.slice(1),u.forEach((y)=>{var f=D.node(y).parent,X=T.edge(y,f),N=!1;if(!X)X=T.edge(f,y),N=!0;T.node(y).rank=T.node(f).rank+(N?X.minlen:-X.minlen)})}function O(D,T,v){return D.hasEdge(T,v)}function A(D,T,v){return v.low<=T.lim&&T.lim<=v.lim}},{"../util":27,"./feasible-tree":23,"./util":26,"@dagrejs/graphlib":29}],26:[function(Q,Z,V){let{applyWithChunking:B}=Q("../util");Z.exports={longestPath:U,slack:j};function U(P){var G={};function q(z){var _=P.node(z);if(Object.hasOwn(G,z))return _.rank;G[z]=!0;let W=P.outEdges(z).map((H)=>{if(H==null)return Number.POSITIVE_INFINITY;return q(H.w)-P.edge(H).minlen});var F=B(Math.min,W);if(F===Number.POSITIVE_INFINITY)F=0;return _.rank=F}P.sources().forEach(q)}function j(P,G){return P.node(G.w).rank-P.node(G.v).rank-P.edge(G).minlen}},{"../util":27}],27:[function(Q,Z,V){let B=Q("@dagrejs/graphlib").Graph;Z.exports={addBorderNode:H,addDummyNode:U,applyWithChunking:Y,asNonCompoundGraph:P,buildLayerMatrix:_,intersectRect:z,mapValues:y,maxRank:L,normalizeRanks:W,notime:A,partition:b,pick:u,predecessorWeights:q,range:v,removeEmptyRanks:F,simplify:j,successorWeights:G,time:O,uniqueId:T,zipObject:f};function U(X,N,S,w){var I=w;while(X.hasNode(I))I=T(w);return S.dummy=N,X.setNode(I,S),I}function j(X){let N=new B().setGraph(X.graph());return X.nodes().forEach((S)=>N.setNode(S,X.node(S))),X.edges().forEach((S)=>{let w=N.edge(S.v,S.w)||{weight:0,minlen:1},I=X.edge(S);N.setEdge(S.v,S.w,{weight:w.weight+I.weight,minlen:Math.max(w.minlen,I.minlen)})}),N}function P(X){let N=new B({multigraph:X.isMultigraph()}).setGraph(X.graph());return X.nodes().forEach((S)=>{if(!X.children(S).length)N.setNode(S,X.node(S))}),X.edges().forEach((S)=>{N.setEdge(S,X.edge(S))}),N}function G(X){let N=X.nodes().map((S)=>{let w={};return X.outEdges(S).forEach((I)=>{w[I.w]=(w[I.w]||0)+X.edge(I).weight}),w});return f(X.nodes(),N)}function q(X){let N=X.nodes().map((S)=>{let w={};return X.inEdges(S).forEach((I)=>{w[I.v]=(w[I.v]||0)+X.edge(I).weight}),w});return f(X.nodes(),N)}function z(X,N){let{x:S,y:w}=X,I=N.x-S,d=N.y-w,s=X.width/2,C=X.height/2;if(!I&&!d)throw Error("Not possible to find intersection inside of the rectangle");let c,l;if(Math.abs(d)*s>Math.abs(I)*C){if(d<0)C=-C;c=C*I/d,l=C}else{if(I<0)s=-s;c=s,l=s*d/I}return{x:S+c,y:w+l}}function _(X){let N=v(L(X)+1).map(()=>[]);return X.nodes().forEach((S)=>{let w=X.node(S),I=w.rank;if(I!==void 0)N[I][w.order]=S}),N}function W(X){let N=X.nodes().map((w)=>{let I=X.node(w).rank;if(I===void 0)return Number.MAX_VALUE;return I}),S=Y(Math.min,N);X.nodes().forEach((w)=>{let I=X.node(w);if(Object.hasOwn(I,"rank"))I.rank-=S})}function F(X){let N=X.nodes().map((s)=>X.node(s).rank),S=Y(Math.min,N),w=[];X.nodes().forEach((s)=>{let C=X.node(s).rank-S;if(!w[C])w[C]=[];w[C].push(s)});let I=0,d=X.graph().nodeRankFactor;Array.from(w).forEach((s,C)=>{if(s===void 0&&C%d!==0)--I;else if(s!==void 0&&I)s.forEach((c)=>X.node(c).rank+=I)})}function H(X,N,S,w){let I={width:0,height:0};if(arguments.length>=4)I.rank=S,I.order=w;return U(X,"border",I,N)}function M(X,N=R){let S=[];for(let w=0;w<X.length;w+=N){let I=X.slice(w,w+N);S.push(I)}return S}let R=65535;function Y(X,N){if(N.length>R){let S=M(N);return X.apply(null,S.map((w)=>X.apply(null,w)))}else return X.apply(null,N)}function L(X){let S=X.nodes().map((w)=>{let I=X.node(w).rank;if(I===void 0)return Number.MIN_VALUE;return I});return Y(Math.max,S)}function b(X,N){let S={lhs:[],rhs:[]};return X.forEach((w)=>{if(N(w))S.lhs.push(w);else S.rhs.push(w)}),S}function O(X,N){let S=Date.now();try{return N()}finally{console.log(X+" time: "+(Date.now()-S)+"ms")}}function A(X,N){return N()}let D=0;function T(X){var N=++D;return X+(""+N)}function v(X,N,S=1){if(N==null)N=X,X=0;let w=(d)=>d<N;if(S<0)w=(d)=>N<d;let I=[];for(let d=X;w(d);d+=S)I.push(d);return I}function u(X,N){let S={};for(let w of N)if(X[w]!==void 0)S[w]=X[w];return S}function y(X,N){let S=N;if(typeof N==="string")S=(w)=>w[N];return Object.entries(X).reduce((w,[I,d])=>{return w[I]=S(d,I),w},{})}function f(X,N){return X.reduce((S,w,I)=>{return S[w]=N[I],S},{})}},{"@dagrejs/graphlib":29}],28:[function(Q,Z,V){Z.exports="1.1.8"},{}],29:[function(Q,Z,V){var B=Q("./lib");Z.exports={Graph:B.Graph,json:Q("./lib/json"),alg:Q("./lib/alg"),version:B.version}},{"./lib":45,"./lib/alg":36,"./lib/json":46}],30:[function(Q,Z,V){Z.exports=B;function B(U){var j={},P=[],G;function q(z){if(Object.hasOwn(j,z))return;j[z]=!0,G.push(z),U.successors(z).forEach(q),U.predecessors(z).forEach(q)}return U.nodes().forEach(function(z){if(G=[],q(z),G.length)P.push(G)}),P}},{}],31:[function(Q,Z,V){Z.exports=B;function B(G,q,z){if(!Array.isArray(q))q=[q];var _=G.isDirected()?(M)=>G.successors(M):(M)=>G.neighbors(M),W=z==="post"?U:j,F=[],H={};return q.forEach((M)=>{if(!G.hasNode(M))throw Error("Graph does not have node: "+M);W(M,_,H,F)}),F}function U(G,q,z,_){var W=[[G,!1]];while(W.length>0){var F=W.pop();if(F[1])_.push(F[0]);else if(!Object.hasOwn(z,F[0]))z[F[0]]=!0,W.push([F[0],!0]),P(q(F[0]),(H)=>W.push([H,!1]))}}function j(G,q,z,_){var W=[G];while(W.length>0){var F=W.pop();if(!Object.hasOwn(z,F))z[F]=!0,_.push(F),P(q(F),(H)=>W.push(H))}}function P(G,q){var z=G.length;while(z--)q(G[z],z,G);return G}},{}],32:[function(Q,Z,V){var B=Q("./dijkstra");Z.exports=U;function U(j,P,G){return j.nodes().reduce(function(q,z){return q[z]=B(j,z,P,G),q},{})}},{"./dijkstra":33}],33:[function(Q,Z,V){var B=Q("../data/priority-queue");Z.exports=j;var U=()=>1;function j(G,q,z,_){return P(G,String(q),z||U,_||function(W){return G.outEdges(W)})}function P(G,q,z,_){var W={},F=new B,H,M,R=function(Y){var L=Y.v!==H?Y.v:Y.w,b=W[L],O=z(Y),A=M.distance+O;if(O<0)throw Error("dijkstra does not allow negative edge weights. Bad edge: "+Y+" Weight: "+O);if(A<b.distance)b.distance=A,b.predecessor=H,F.decrease(L,A)};G.nodes().forEach(function(Y){var L=Y===q?0:Number.POSITIVE_INFINITY;W[Y]={distance:L},F.add(Y,L)});while(F.size()>0){if(H=F.removeMin(),M=W[H],M.distance===Number.POSITIVE_INFINITY)break;_(H).forEach(R)}return W}},{"../data/priority-queue":43}],34:[function(Q,Z,V){var B=Q("./tarjan");Z.exports=U;function U(j){return B(j).filter(function(P){return P.length>1||P.length===1&&j.hasEdge(P[0],P[0])})}},{"./tarjan":41}],35:[function(Q,Z,V){Z.exports=U;var B=()=>1;function U(P,G,q){return j(P,G||B,q||function(z){return P.outEdges(z)})}function j(P,G,q){var z={},_=P.nodes();return _.forEach(function(W){z[W]={},z[W][W]={distance:0},_.forEach(function(F){if(W!==F)z[W][F]={distance:Number.POSITIVE_INFINITY}}),q(W).forEach(function(F){var H=F.v===W?F.w:F.v,M=G(F);z[W][H]={distance:M,predecessor:W}})}),_.forEach(function(W){var F=z[W];_.forEach(function(H){var M=z[H];_.forEach(function(R){var Y=M[W],L=F[R],b=M[R],O=Y.distance+L.distance;if(O<b.distance)b.distance=O,b.predecessor=L.predecessor})})}),z}},{}],36:[function(Q,Z,V){Z.exports={components:Q("./components"),dijkstra:Q("./dijkstra"),dijkstraAll:Q("./dijkstra-all"),findCycles:Q("./find-cycles"),floydWarshall:Q("./floyd-warshall"),isAcyclic:Q("./is-acyclic"),postorder:Q("./postorder"),preorder:Q("./preorder"),prim:Q("./prim"),tarjan:Q("./tarjan"),topsort:Q("./topsort")}},{"./components":30,"./dijkstra":33,"./dijkstra-all":32,"./find-cycles":34,"./floyd-warshall":35,"./is-acyclic":37,"./postorder":38,"./preorder":39,"./prim":40,"./tarjan":41,"./topsort":42}],37:[function(Q,Z,V){var B=Q("./topsort");Z.exports=U;function U(j){try{B(j)}catch(P){if(P instanceof B.CycleException)return!1;throw P}return!0}},{"./topsort":42}],38:[function(Q,Z,V){var B=Q("./dfs");Z.exports=U;function U(j,P){return B(j,P,"post")}},{"./dfs":31}],39:[function(Q,Z,V){var B=Q("./dfs");Z.exports=U;function U(j,P){return B(j,P,"pre")}},{"./dfs":31}],40:[function(Q,Z,V){var B=Q("../graph"),U=Q("../data/priority-queue");Z.exports=j;function j(P,G){var q=new B,z={},_=new U,W;function F(M){var R=M.v===W?M.w:M.v,Y=_.priority(R);if(Y!==void 0){var L=G(M);if(L<Y)z[R]=W,_.decrease(R,L)}}if(P.nodeCount()===0)return q;P.nodes().forEach(function(M){_.add(M,Number.POSITIVE_INFINITY),q.setNode(M)}),_.decrease(P.nodes()[0],0);var H=!1;while(_.size()>0){if(W=_.removeMin(),Object.hasOwn(z,W))q.setEdge(W,z[W]);else if(H)throw Error("Input graph is not connected: "+P);else H=!0;P.nodeEdges(W).forEach(F)}return q}},{"../data/priority-queue":43,"../graph":44}],41:[function(Q,Z,V){Z.exports=B;function B(U){var j=0,P=[],G={},q=[];function z(_){var W=G[_]={onStack:!0,lowlink:j,index:j++};if(P.push(_),U.successors(_).forEach(function(M){if(!Object.hasOwn(G,M))z(M),W.lowlink=Math.min(W.lowlink,G[M].lowlink);else if(G[M].onStack)W.lowlink=Math.min(W.lowlink,G[M].index)}),W.lowlink===W.index){var F=[],H;do H=P.pop(),G[H].onStack=!1,F.push(H);while(_!==H);q.push(F)}}return U.nodes().forEach(function(_){if(!Object.hasOwn(G,_))z(_)}),q}},{}],42:[function(Q,Z,V){function B(j){var P={},G={},q=[];function z(_){if(Object.hasOwn(G,_))throw new U;if(!Object.hasOwn(P,_))G[_]=!0,P[_]=!0,j.predecessors(_).forEach(z),delete G[_],q.push(_)}if(j.sinks().forEach(z),Object.keys(P).length!==j.nodeCount())throw new U;return q}class U extends Error{constructor(){super(...arguments)}}Z.exports=B,B.CycleException=U},{}],43:[function(Q,Z,V){class B{_arr=[];_keyIndices={};size(){return this._arr.length}keys(){return this._arr.map(function(U){return U.key})}has(U){return Object.hasOwn(this._keyIndices,U)}priority(U){var j=this._keyIndices[U];if(j!==void 0)return this._arr[j].priority}min(){if(this.size()===0)throw Error("Queue underflow");return this._arr[0].key}add(U,j){var P=this._keyIndices;if(U=String(U),!Object.hasOwn(P,U)){var G=this._arr,q=G.length;return P[U]=q,G.push({key:U,priority:j}),this._decrease(q),!0}return!1}removeMin(){this._swap(0,this._arr.length-1);var U=this._arr.pop();return delete this._keyIndices[U.key],this._heapify(0),U.key}decrease(U,j){var P=this._keyIndices[U];if(j>this._arr[P].priority)throw Error("New priority is greater than current priority. Key: "+U+" Old: "+this._arr[P].priority+" New: "+j);this._arr[P].priority=j,this._decrease(P)}_heapify(U){var j=this._arr,P=2*U,G=P+1,q=U;if(P<j.length){if(q=j[P].priority<j[q].priority?P:q,G<j.length)q=j[G].priority<j[q].priority?G:q;if(q!==U)this._swap(U,q),this._heapify(q)}}_decrease(U){var j=this._arr,P=j[U].priority,G;while(U!==0){if(G=U>>1,j[G].priority<P)break;this._swap(U,G),U=G}}_swap(U,j){var P=this._arr,G=this._keyIndices,q=P[U],z=P[j];P[U]=z,P[j]=q,G[z.key]=U,G[q.key]=j}}Z.exports=B},{}],44:[function(Q,Z,V){var B="\x00",U="\x00",j="\x01";class P{_isDirected=!0;_isMultigraph=!1;_isCompound=!1;_label;_defaultNodeLabelFn=()=>{return};_defaultEdgeLabelFn=()=>{return};_nodes={};_in={};_preds={};_out={};_sucs={};_edgeObjs={};_edgeLabels={};_nodeCount=0;_edgeCount=0;_parent;_children;constructor(F){if(F)this._isDirected=Object.hasOwn(F,"directed")?F.directed:!0,this._isMultigraph=Object.hasOwn(F,"multigraph")?F.multigraph:!1,this._isCompound=Object.hasOwn(F,"compound")?F.compound:!1;if(this._isCompound)this._parent={},this._children={},this._children[U]={}}isDirected(){return this._isDirected}isMultigraph(){return this._isMultigraph}isCompound(){return this._isCompound}setGraph(F){return this._label=F,this}graph(){return this._label}setDefaultNodeLabel(F){if(this._defaultNodeLabelFn=F,typeof F!=="function")this._defaultNodeLabelFn=()=>F;return this}nodeCount(){return this._nodeCount}nodes(){return Object.keys(this._nodes)}sources(){var F=this;return this.nodes().filter((H)=>Object.keys(F._in[H]).length===0)}sinks(){var F=this;return this.nodes().filter((H)=>Object.keys(F._out[H]).length===0)}setNodes(F,H){var M=arguments,R=this;return F.forEach(function(Y){if(M.length>1)R.setNode(Y,H);else R.setNode(Y)}),this}setNode(F,H){if(Object.hasOwn(this._nodes,F)){if(arguments.length>1)this._nodes[F]=H;return this}if(this._nodes[F]=arguments.length>1?H:this._defaultNodeLabelFn(F),this._isCompound)this._parent[F]=U,this._children[F]={},this._children[U][F]=!0;return this._in[F]={},this._preds[F]={},this._out[F]={},this._sucs[F]={},++this._nodeCount,this}node(F){return this._nodes[F]}hasNode(F){return Object.hasOwn(this._nodes,F)}removeNode(F){var H=this;if(Object.hasOwn(this._nodes,F)){var M=(R)=>H.removeEdge(H._edgeObjs[R]);if(delete this._nodes[F],this._isCompound)this._removeFromParentsChildList(F),delete this._parent[F],this.children(F).forEach(function(R){H.setParent(R)}),delete this._children[F];Object.keys(this._in[F]).forEach(M),delete this._in[F],delete this._preds[F],Object.keys(this._out[F]).forEach(M),delete this._out[F],delete this._sucs[F],--this._nodeCount}return this}setParent(F,H){if(!this._isCompound)throw Error("Cannot set parent in a non-compound graph");if(H===void 0)H=U;else{H+="";for(var M=H;M!==void 0;M=this.parent(M))if(M===F)throw Error("Setting "+H+" as parent of "+F+" would create a cycle");this.setNode(H)}return this.setNode(F),this._removeFromParentsChildList(F),this._parent[F]=H,this._children[H][F]=!0,this}_removeFromParentsChildList(F){delete this._children[this._parent[F]][F]}parent(F){if(this._isCompound){var H=this._parent[F];if(H!==U)return H}}children(F=U){if(this._isCompound){var H=this._children[F];if(H)return Object.keys(H)}else if(F===U)return this.nodes();else if(this.hasNode(F))return[]}predecessors(F){var H=this._preds[F];if(H)return Object.keys(H)}successors(F){var H=this._sucs[F];if(H)return Object.keys(H)}neighbors(F){var H=this.predecessors(F);if(H){let R=new Set(H);for(var M of this.successors(F))R.add(M);return Array.from(R.values())}}isLeaf(F){var H;if(this.isDirected())H=this.successors(F);else H=this.neighbors(F);return H.length===0}filterNodes(F){var H=new this.constructor({directed:this._isDirected,multigraph:this._isMultigraph,compound:this._isCompound});H.setGraph(this.graph());var M=this;Object.entries(this._nodes).forEach(function([L,b]){if(F(L))H.setNode(L,b)}),Object.values(this._edgeObjs).forEach(function(L){if(H.hasNode(L.v)&&H.hasNode(L.w))H.setEdge(L,M.edge(L))});var R={};function Y(L){var b=M.parent(L);if(b===void 0||H.hasNode(b))return R[L]=b,b;else if(b in R)return R[b];else return Y(b)}if(this._isCompound)H.nodes().forEach((L)=>H.setParent(L,Y(L)));return H}setDefaultEdgeLabel(F){if(this._defaultEdgeLabelFn=F,typeof F!=="function")this._defaultEdgeLabelFn=()=>F;return this}edgeCount(){return this._edgeCount}edges(){return Object.values(this._edgeObjs)}setPath(F,H){var M=this,R=arguments;return F.reduce(function(Y,L){if(R.length>1)M.setEdge(Y,L,H);else M.setEdge(Y,L);return L}),this}setEdge(){var F,H,M,R,Y=!1,L=arguments[0];if(typeof L==="object"&&L!==null&&"v"in L){if(F=L.v,H=L.w,M=L.name,arguments.length===2)R=arguments[1],Y=!0}else if(F=L,H=arguments[1],M=arguments[3],arguments.length>2)R=arguments[2],Y=!0;if(F=""+F,H=""+H,M!==void 0)M=""+M;var b=z(this._isDirected,F,H,M);if(Object.hasOwn(this._edgeLabels,b)){if(Y)this._edgeLabels[b]=R;return this}if(M!==void 0&&!this._isMultigraph)throw Error("Cannot set a named edge when isMultigraph = false");this.setNode(F),this.setNode(H),this._edgeLabels[b]=Y?R:this._defaultEdgeLabelFn(F,H,M);var O=_(this._isDirected,F,H,M);return F=O.v,H=O.w,Object.freeze(O),this._edgeObjs[b]=O,G(this._preds[H],F),G(this._sucs[F],H),this._in[H][b]=O,this._out[F][b]=O,this._edgeCount++,this}edge(F,H,M){var R=arguments.length===1?W(this._isDirected,arguments[0]):z(this._isDirected,F,H,M);return this._edgeLabels[R]}edgeAsObj(){let F=this.edge(...arguments);if(typeof F!=="object")return{label:F};return F}hasEdge(F,H,M){var R=arguments.length===1?W(this._isDirected,arguments[0]):z(this._isDirected,F,H,M);return Object.hasOwn(this._edgeLabels,R)}removeEdge(F,H,M){var R=arguments.length===1?W(this._isDirected,arguments[0]):z(this._isDirected,F,H,M),Y=this._edgeObjs[R];if(Y)F=Y.v,H=Y.w,delete this._edgeLabels[R],delete this._edgeObjs[R],q(this._preds[H],F),q(this._sucs[F],H),delete this._in[H][R],delete this._out[F][R],this._edgeCount--;return this}inEdges(F,H){var M=this._in[F];if(M){var R=Object.values(M);if(!H)return R;return R.filter((Y)=>Y.v===H)}}outEdges(F,H){var M=this._out[F];if(M){var R=Object.values(M);if(!H)return R;return R.filter((Y)=>Y.w===H)}}nodeEdges(F,H){var M=this.inEdges(F,H);if(M)return M.concat(this.outEdges(F,H))}}function G(F,H){if(F[H])F[H]++;else F[H]=1}function q(F,H){if(!--F[H])delete F[H]}function z(F,H,M,R){var Y=""+H,L=""+M;if(!F&&Y>L){var b=Y;Y=L,L=b}return Y+j+L+j+(R===void 0?B:R)}function _(F,H,M,R){var Y=""+H,L=""+M;if(!F&&Y>L){var b=Y;Y=L,L=b}var O={v:Y,w:L};if(R)O.name=R;return O}function W(F,H){return z(F,H.v,H.w,H.name)}Z.exports=P},{}],45:[function(Q,Z,V){Z.exports={Graph:Q("./graph"),version:Q("./version")}},{"./graph":44,"./version":47}],46:[function(Q,Z,V){var B=Q("./graph");Z.exports={write:U,read:G};function U(q){var z={options:{directed:q.isDirected(),multigraph:q.isMultigraph(),compound:q.isCompound()},nodes:j(q),edges:P(q)};if(q.graph()!==void 0)z.value=structuredClone(q.graph());return z}function j(q){return q.nodes().map(function(z){var _=q.node(z),W=q.parent(z),F={v:z};if(_!==void 0)F.value=_;if(W!==void 0)F.parent=W;return F})}function P(q){return q.edges().map(function(z){var _=q.edge(z),W={v:z.v,w:z.w};if(z.name!==void 0)W.name=z.name;if(_!==void 0)W.value=_;return W})}function G(q){var z=new B(q.options).setGraph(q.value);return q.nodes.forEach(function(_){if(z.setNode(_.v,_.value),_.parent)z.setParent(_.v,_.parent)}),q.edges.forEach(function(_){z.setEdge({v:_.v,w:_.w,name:_.name},_.value)}),z}},{"./graph":44}],47:[function(Q,Z,V){Z.exports="2.2.4"},{}]},{},[1])(1)})});var c4={bg:"#FFFFFF",fg:"#27272A"},A4={text:100,textSec:60,textMuted:40,textFaint:25,line:30,arrow:50,nodeFill:3,nodeStroke:20,groupHeader:5,innerStroke:12,keyBadge:10},O6={"zinc-dark":{bg:"#18181B",fg:"#FAFAFA"},"tokyo-night":{bg:"#1a1b26",fg:"#a9b1d6",line:"#3d59a1",accent:"#7aa2f7",muted:"#565f89"},"tokyo-night-storm":{bg:"#24283b",fg:"#a9b1d6",line:"#3d59a1",accent:"#7aa2f7",muted:"#565f89"},"tokyo-night-light":{bg:"#d5d6db",fg:"#343b58",line:"#34548a",accent:"#34548a",muted:"#9699a3"},"catppuccin-mocha":{bg:"#1e1e2e",fg:"#cdd6f4",line:"#585b70",accent:"#cba6f7",muted:"#6c7086"},"catppuccin-latte":{bg:"#eff1f5",fg:"#4c4f69",line:"#9ca0b0",accent:"#8839ef",muted:"#9ca0b0"},nord:{bg:"#2e3440",fg:"#d8dee9",line:"#4c566a",accent:"#88c0d0",muted:"#616e88"},"nord-light":{bg:"#eceff4",fg:"#2e3440",line:"#aab1c0",accent:"#5e81ac",muted:"#7b88a1"},dracula:{bg:"#282a36",fg:"#f8f8f2",line:"#6272a4",accent:"#bd93f9",muted:"#6272a4"},"github-light":{bg:"#ffffff",fg:"#1f2328",line:"#d1d9e0",accent:"#0969da",muted:"#59636e"},"github-dark":{bg:"#0d1117",fg:"#e6edf3",line:"#3d444d",accent:"#4493f8",muted:"#9198a1"},"solarized-light":{bg:"#fdf6e3",fg:"#657b83",line:"#93a1a1",accent:"#268bd2",muted:"#93a1a1"},"solarized-dark":{bg:"#002b36",fg:"#839496",line:"#586e75",accent:"#268bd2",muted:"#586e75"},"one-dark":{bg:"#282c34",fg:"#abb2bf",line:"#4b5263",accent:"#c678dd",muted:"#5c6370"}};function A6($){let J=$.colors??{},K=$.type==="dark",Q=(Z)=>$.tokenColors?.find((V)=>Array.isArray(V.scope)?V.scope.includes(Z):V.scope===Z)?.settings?.foreground;return{bg:J["editor.background"]??(K?"#1e1e1e":"#ffffff"),fg:J["editor.foreground"]??(K?"#d4d4d4":"#333333"),line:J["editorLineNumber.foreground"]??void 0,accent:J.focusBorder??Q("keyword")??void 0,muted:Q("comment")??J["editorLineNumber.foreground"]??void 0,surface:J["editor.selectionBackground"]??void 0,border:J["editorWidget.border"]??void 0}}function D4($,J){let K=[`@import url('https://fonts.googleapis.com/css2?family=${encodeURIComponent($)}:wght@400;500;600;700&display=swap');`,...J?["@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');"]:[]],Q=`
|
||
/* Derived from --bg and --fg (overridable via --line, --accent, etc.) */
|
||
--_text: var(--fg);
|
||
--_text-sec: var(--muted, color-mix(in srgb, var(--fg) ${A4.textSec}%, var(--bg)));
|
||
--_text-muted: var(--muted, color-mix(in srgb, var(--fg) ${A4.textMuted}%, var(--bg)));
|
||
--_text-faint: color-mix(in srgb, var(--fg) ${A4.textFaint}%, var(--bg));
|
||
--_line: var(--line, color-mix(in srgb, var(--fg) ${A4.line}%, var(--bg)));
|
||
--_arrow: var(--accent, color-mix(in srgb, var(--fg) ${A4.arrow}%, var(--bg)));
|
||
--_node-fill: var(--surface, color-mix(in srgb, var(--fg) ${A4.nodeFill}%, var(--bg)));
|
||
--_node-stroke: var(--border, color-mix(in srgb, var(--fg) ${A4.nodeStroke}%, var(--bg)));
|
||
--_group-fill: var(--bg);
|
||
--_group-hdr: color-mix(in srgb, var(--fg) ${A4.groupHeader}%, var(--bg));
|
||
--_inner-stroke: color-mix(in srgb, var(--fg) ${A4.innerStroke}%, var(--bg));
|
||
--_key-badge: color-mix(in srgb, var(--fg) ${A4.keyBadge}%, var(--bg));`;return["<style>",` ${K.join(`
|
||
`)}`,` text { font-family: '${$}', system-ui, sans-serif; }`,...J?[" .mono { font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace; }"]:[],` svg {${Q}`," }","</style>"].join(`
|
||
`)}function Y4($,J,K,Q){let Z=[`--bg:${K.bg}`,`--fg:${K.fg}`,K.line?`--line:${K.line}`:"",K.accent?`--accent:${K.accent}`:"",K.muted?`--muted:${K.muted}`:"",K.surface?`--surface:${K.surface}`:"",K.border?`--border:${K.border}`:""].filter(Boolean).join(";");return`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${$} ${J}" width="${$}" height="${J}" style="${Z}${Q?"":";background:var(--bg)"}">`}function s4($){let J=$.split(/[\n;]/).map((Q)=>Q.trim()).filter((Q)=>Q.length>0&&!Q.startsWith("%%"));if(J.length===0)throw Error("Empty mermaid diagram");let K=J[0];if(/^stateDiagram(-v2)?\s*$/i.test(K))return Q9(J);return J9(J)}function J9($){let J=$[0].match(/^(?:graph|flowchart)\s+(TD|TB|LR|BT|RL)\s*$/i);if(!J)throw Error(`Invalid mermaid header: "${$[0]}". Expected "graph TD", "flowchart LR", "stateDiagram-v2", etc.`);let Q={direction:J[1].toUpperCase(),nodes:new Map,edges:[],subgraphs:[],classDefs:new Map,classAssignments:new Map,nodeStyles:new Map},Z=[];for(let V=1;V<$.length;V++){let B=$[V],U=B.match(/^classDef\s+(\w+)\s+(.+)$/);if(U){let z=U[1],_=U[2],W=l6(_);Q.classDefs.set(z,W);continue}let j=B.match(/^class\s+([\w,-]+)\s+(\w+)$/);if(j){let z=j[1].split(",").map((W)=>W.trim()),_=j[2];for(let W of z)Q.classAssignments.set(W,_);continue}let P=B.match(/^style\s+([\w,-]+)\s+(.+)$/);if(P){let z=P[1].split(",").map((W)=>W.trim()),_=l6(P[2]);for(let W of z)Q.nodeStyles.set(W,{...Q.nodeStyles.get(W),..._});continue}let G=B.match(/^direction\s+(TD|TB|LR|BT|RL)\s*$/i);if(G&&Z.length>0){Z[Z.length-1].direction=G[1].toUpperCase();continue}let q=B.match(/^subgraph\s+(.+)$/);if(q){let z=q[1].trim(),_=z.match(/^([\w-]+)\s*\[(.+)\]$/),W,F;if(_)W=_[1],F=_[2];else F=z,W=z.replace(/\s+/g,"_").replace(/[^\w]/g,"");let H={id:W,label:F,nodeIds:[],children:[]};Z.push(H);continue}if(B==="end"){let z=Z.pop();if(z)if(Z.length>0)Z[Z.length-1].children.push(z);else Q.subgraphs.push(z);continue}z9(B,Q,Z)}return Q}function Q9($){let J={direction:"TD",nodes:new Map,edges:[],subgraphs:[],classDefs:new Map,classAssignments:new Map,nodeStyles:new Map},K=[],Q=0,Z=0;for(let V=1;V<$.length;V++){let B=$[V],U=B.match(/^direction\s+(TD|TB|LR|BT|RL)\s*$/i);if(U){if(K.length>0)K[K.length-1].direction=U[1].toUpperCase();else J.direction=U[1].toUpperCase();continue}let j=B.match(/^state\s+(?:"([^"]+)"\s+as\s+)?(\w+)\s*\{$/);if(j){let z=j[1]??j[2],W={id:j[2],label:z,nodeIds:[],children:[]};K.push(W);continue}if(B==="}"){let z=K.pop();if(z)if(K.length>0)K[K.length-1].children.push(z);else J.subgraphs.push(z);continue}let P=B.match(/^state\s+"([^"]+)"\s+as\s+(\w+)\s*$/);if(P){let z=P[1],_=P[2];o4(J,K,{id:_,label:z,shape:"rounded"});continue}let G=B.match(/^(\[\*\]|[\w-]+)\s*(-->)\s*(\[\*\]|[\w-]+)(?:\s*:\s*(.+))?$/);if(G){let z=G[1],_=G[3],W=G[4]?.trim()||void 0;if(z==="[*]")Q++,z=`_start${Q>1?Q:""}`,o4(J,K,{id:z,label:"",shape:"state-start"});else p6(J,K,z);if(_==="[*]")Z++,_=`_end${Z>1?Z:""}`,o4(J,K,{id:_,label:"",shape:"state-end"});else p6(J,K,_);J.edges.push({source:z,target:_,label:W,style:"solid",hasArrowStart:!1,hasArrowEnd:!0});continue}let q=B.match(/^([\w-]+)\s*:\s*(.+)$/);if(q){let z=q[1],_=q[2].trim();o4(J,K,{id:z,label:_,shape:"rounded"});continue}}return J}function o4($,J,K){if(!$.nodes.has(K.id))$.nodes.set(K.id,K);if(J.length>0){let Z=J[J.length-1];if(!Z.nodeIds.includes(K.id))Z.nodeIds.push(K.id)}}function p6($,J,K){if(!$.nodes.has(K))o4($,J,{id:K,label:K,shape:"rounded"});else if(J.length>0){let Q=J[J.length-1];if(!Q.nodeIds.includes(K))Q.nodeIds.push(K)}}function l6($){let J={};for(let K of $.split(",")){let Q=K.indexOf(":");if(Q>0){let Z=K.slice(0,Q).trim(),V=K.slice(Q+1).trim();if(Z&&V)J[Z]=V}}return J}var K9=/^(<)?(-->|-.->|==>|---|-\.-|===)(?:\|([^|]*)\|)?/,Z9=[{regex:/^([\w-]+)\(\(\((.+?)\)\)\)/,shape:"doublecircle"},{regex:/^([\w-]+)\(\[(.+?)\]\)/,shape:"stadium"},{regex:/^([\w-]+)\(\((.+?)\)\)/,shape:"circle"},{regex:/^([\w-]+)\[\[(.+?)\]\]/,shape:"subroutine"},{regex:/^([\w-]+)\[\((.+?)\)\]/,shape:"cylinder"},{regex:/^([\w-]+)\[\/(.+?)\\\]/,shape:"trapezoid"},{regex:/^([\w-]+)\[\\(.+?)\/\]/,shape:"trapezoid-alt"},{regex:/^([\w-]+)>(.+?)\]/,shape:"asymmetric"},{regex:/^([\w-]+)\{\{(.+?)\}\}/,shape:"hexagon"},{regex:/^([\w-]+)\[(.+?)\]/,shape:"rectangle"},{regex:/^([\w-]+)\((.+?)\)/,shape:"rounded"},{regex:/^([\w-]+)\{(.+?)\}/,shape:"diamond"}],U9=/^([\w-]+)/,V9=/^:::([\w][\w-]*)/;function z9($,J,K){let Q=$.trim(),Z=d6(Q,J,K);if(!Z||Z.ids.length===0)return;Q=Z.remaining.trim();let V=Z.ids;while(Q.length>0){let B=Q.match(K9);if(!B)break;let U=Boolean(B[1]),j=B[2],P=B[3]?.trim()||void 0;Q=Q.slice(B[0].length).trim();let G=j9(j),q=j.endsWith(">"),z=d6(Q,J,K);if(!z||z.ids.length===0)break;Q=z.remaining.trim();for(let _ of V)for(let W of z.ids)J.edges.push({source:_,target:W,label:P,style:G,hasArrowStart:U,hasArrowEnd:q});V=z.ids}}function d6($,J,K){let Q=g6($,J,K);if(!Q)return null;let Z=[Q.id],V=Q.remaining.trim();while(V.startsWith("&")){V=V.slice(1).trim();let B=g6(V,J,K);if(!B)break;Z.push(B.id),V=B.remaining.trim()}return{ids:Z,remaining:V}}function g6($,J,K){let Q=null,Z=$;for(let{regex:B,shape:U}of Z9){let j=$.match(B);if(j){Q=j[1];let P=j[2];n6(J,K,{id:Q,label:P,shape:U}),Z=$.slice(j[0].length);break}}if(Q===null){let B=$.match(U9);if(B){if(Q=B[1],!J.nodes.has(Q))n6(J,K,{id:Q,label:Q,shape:"rectangle"});else o6(K,Q);Z=$.slice(B[0].length)}}if(Q===null)return null;let V=Z.match(V9);if(V)J.classAssignments.set(Q,V[1]),Z=Z.slice(V[0].length);return{id:Q,remaining:Z}}function n6($,J,K){if(!$.nodes.has(K.id))$.nodes.set(K.id,K);o6(J,K.id)}function o6($,J){if($.length>0){let K=$[$.length-1];if(!K.nodeIds.includes(J))K.nodeIds.push(J)}}function j9($){if($==="-.->")return"dotted";if($==="-.-")return"dotted";if($==="==>")return"thick";if($==="===")return"thick";return"solid"}var j4={x:1,y:0},K4={x:1,y:2},B4={x:0,y:1},Z4={x:2,y:1},X4={x:2,y:0},R4={x:0,y:0},L4={x:2,y:2},I4={x:0,y:2},K6={x:1,y:1};function D6($,J){return $.x===J.x&&$.y===J.y}function s6($,J){return $.x===J.x&&$.y===J.y}function i4($,J){return{x:$.x+J.x,y:$.y+J.y}}function C4($){return`${$.x},${$.y}`}var i6={name:"",styles:{}};function F4($,J){let K=[];for(let Q=0;Q<=$;Q++){let Z=[];for(let V=0;V<=J;V++)Z.push(" ");K.push(Z)}return K}function x4($){let[J,K]=a4($);return F4(J,K)}function a4($){return[$.length-1,($[0]?.length??1)-1]}function w4($,J,K){let[Q,Z]=a4($),V=Math.max(J,Q),B=Math.max(K,Z),U=F4(V,B);for(let j=0;j<U.length;j++)for(let P=0;P<U[0].length;P++)if(j<$.length&&P<$[0].length)U[j][P]=$[j][P];return $.length=0,$.push(...U),$}var B9=new Set(["─","│","┌","┐","└","┘","├","┤","┬","┴","┼","╴","╵","╶","╷"]);function a6($){return B9.has($)}var G9={"─":{"│":"┼","┌":"┬","┐":"┬","└":"┴","┘":"┴","├":"┼","┤":"┼","┬":"┬","┴":"┴"},"│":{"─":"┼","┌":"├","┐":"┤","└":"├","┘":"┤","├":"├","┤":"┤","┬":"┼","┴":"┼"},"┌":{"─":"┬","│":"├","┐":"┬","└":"├","┘":"┼","├":"├","┤":"┼","┬":"┬","┴":"┼"},"┐":{"─":"┬","│":"┤","┌":"┬","└":"┼","┘":"┤","├":"┼","┤":"┤","┬":"┬","┴":"┼"},"└":{"─":"┴","│":"├","┌":"├","┐":"┼","┘":"┴","├":"├","┤":"┼","┬":"┼","┴":"┴"},"┘":{"─":"┴","│":"┤","┌":"┼","┐":"┤","└":"┴","├":"┼","┤":"┤","┬":"┼","┴":"┴"},"├":{"─":"┼","│":"├","┌":"├","┐":"┼","└":"├","┘":"┼","┤":"┼","┬":"┼","┴":"┼"},"┤":{"─":"┼","│":"┤","┌":"┼","┐":"┤","└":"┼","┘":"┤","├":"┼","┬":"┼","┴":"┼"},"┬":{"─":"┬","│":"┼","┌":"┬","┐":"┬","└":"┼","┘":"┼","├":"┼","┤":"┼","┴":"┼"},"┴":{"─":"┴","│":"┼","┌":"┼","┐":"┼","└":"┴","┘":"┴","├":"┼","┤":"┼","┬":"┼"}};function P9($,J){return G9[$]?.[J]??$}function N4($,J,K,...Q){let[Z,V]=a4($);for(let U of Q){let[j,P]=a4(U);Z=Math.max(Z,j+J.x),V=Math.max(V,P+J.y)}let B=F4(Z,V);for(let U=0;U<=Z;U++)for(let j=0;j<=V;j++)if(U<$.length&&j<$[0].length)B[U][j]=$[U][j];for(let U of Q)for(let j=0;j<U.length;j++)for(let P=0;P<U[0].length;P++){let G=U[j][P];if(G!==" "){let q=j+J.x,z=P+J.y,_=B[q][z];if(!K&&a6(G)&&a6(_))B[q][z]=P9(_,G);else B[q][z]=G}}return B}function S4($){let[J,K]=a4($),Q=[];for(let Z=0;Z<=K;Z++){let V="";for(let B=0;B<=J;B++)V+=$[B][Z];Q.push(V)}return Q.join(`
|
||
`)}var F9={"▲":"▼","▼":"▲","◤":"◣","◣":"◤","◥":"◢","◢":"◥","^":"v",v:"^","┌":"└","└":"┌","┐":"┘","┘":"┐","┬":"┴","┴":"┬","╵":"╷","╷":"╵"};function r6($){for(let J of $)J.reverse();for(let J of $)for(let K=0;K<J.length;K++){let Q=F9[J[K]];if(Q)J[K]=Q}return $}function t6($,J,K){w4($,J.x+K.length,J.y);for(let Q=0;Q<K.length;Q++)$[J.x+Q][J.y]=K[Q]}function e6($,J,K){let Q=0,Z=0;for(let V of J.values())Q+=V;for(let V of K.values())Z+=V;w4($,Q-1,Z-1)}function $7($,J){let K=new Map,Q=0;for(let[U,j]of $.nodes){let P={name:U,displayLabel:j.label,index:Q,gridCoord:null,drawingCoord:null,drawing:null,drawn:!1,styleClassName:"",styleClass:i6};K.set(U,P),Q++}let Z=[...K.values()],V=[];for(let U of $.edges){let j=K.get(U.source),P=K.get(U.target);if(!j||!P)continue;V.push({from:j,to:P,text:U.label??"",path:[],labelLine:[],startDir:{x:0,y:0},endDir:{x:0,y:0}})}let B=[];for(let U of $.subgraphs)J7(U,null,K,B);_9($.subgraphs,B,K,$);for(let[U,j]of $.classAssignments){let P=K.get(U),G=$.classDefs.get(j);if(P&&G)P.styleClassName=j,P.styleClass={name:j,styles:G}}return{nodes:Z,edges:V,canvas:F4(0,0),grid:new Map,columnWidth:new Map,rowHeight:new Map,subgraphs:B,config:J,offsetX:0,offsetY:0}}function J7($,J,K,Q){let Z={name:$.label,nodes:[],parent:J,children:[],minX:0,minY:0,maxX:0,maxY:0};for(let V of $.nodeIds){let B=K.get(V);if(B)Z.nodes.push(B)}Q.push(Z);for(let V of $.children){let B=J7(V,Z,K,Q);Z.children.push(B);for(let U of B.nodes)if(!Z.nodes.includes(U))Z.nodes.push(U)}return Z}function _9($,J,K,Q){let Z=new Map;W9($,J,Z);let V=new Map;function B(U){let j=Z.get(U);if(!j)return;for(let P of U.children)B(P);for(let P of U.nodeIds)if(!V.has(P))V.set(P,j)}for(let U of $)B(U);for(let U of J)U.nodes=U.nodes.filter((j)=>{let P;for(let[q,z]of K)if(z===j){P=q;break}if(!P)return!1;let G=V.get(P);if(!G)return!0;return q9(U,G)})}function q9($,J){let K=J;while(K!==null){if(K===$)return!0;K=K.parent}return!1}function W9($,J,K){let Q=[];function Z(V){for(let B of V)Q.push(B),Z(B.children)}Z($);for(let V=0;V<Q.length&&V<J.length;V++)K.set(Q[V],J[V])}class Q7{items=[];get length(){return this.items.length}push($){this.items.push($),this.bubbleUp(this.items.length-1)}pop(){if(this.items.length===0)return;let $=this.items[0],J=this.items.pop();if(this.items.length>0)this.items[0]=J,this.sinkDown(0);return $}bubbleUp($){while($>0){let J=$-1>>1;if(this.items[$].priority<this.items[J].priority)[this.items[$],this.items[J]]=[this.items[J],this.items[$]],$=J;else break}}sinkDown($){let J=this.items.length;while(!0){let K=$,Q=2*$+1,Z=2*$+2;if(Q<J&&this.items[Q].priority<this.items[K].priority)K=Q;if(Z<J&&this.items[Z].priority<this.items[K].priority)K=Z;if(K!==$)[this.items[$],this.items[K]]=[this.items[K],this.items[$]],$=K;else break}}}function M9($,J){let K=Math.abs($.x-J.x),Q=Math.abs($.y-J.y);if(K===0||Q===0)return K+Q;return K+Q+1}var H9=[{x:1,y:0},{x:-1,y:0},{x:0,y:1},{x:0,y:-1}];function R9($,J){if(J.x<0||J.y<0)return!1;return!$.has(C4(J))}function Y6($,J,K){let Q=new Q7;Q.push({coord:J,priority:0});let Z=new Map;Z.set(C4(J),0);let V=new Map;V.set(C4(J),null);while(Q.length>0){let B=Q.pop().coord;if(D6(B,K)){let j=[],P=B;while(P!==null)j.unshift(P),P=V.get(C4(P))??null;return j}let U=Z.get(C4(B));for(let j of H9){let P={x:B.x+j.x,y:B.y+j.y};if(!R9($,P)&&!D6(P,K))continue;let G=U+1,q=C4(P),z=Z.get(q);if(z===void 0||G<z){Z.set(q,G);let _=G+M9(P,K);Q.push({coord:P,priority:_}),V.set(q,B)}}}return null}function X6($){if($.length<=2)return $;let J=new Set,K=$[0],Q=$[1];for(let Z=2;Z<$.length;Z++){let V=$[Z],B=Q.x-K.x,U=Q.y-K.y,j=V.x-Q.x,P=V.y-Q.y;if(B===j&&U===P)J.add(Z-1);K=Q,Q=V}return $.filter((Z,V)=>!J.has(V))}function Z6($){if($===j4)return K4;if($===K4)return j4;if($===B4)return Z4;if($===Z4)return B4;if($===X4)return I4;if($===R4)return L4;if($===L4)return R4;if($===I4)return X4;return K6}function i($,J){return $.x===J.x&&$.y===J.y}function f4($,J){if($.x===J.x)return $.y<J.y?K4:j4;else if($.y===J.y)return $.x<J.x?Z4:B4;else if($.x<J.x)return $.y<J.y?L4:X4;else return $.y<J.y?I4:R4}function O9($){if($==="LR")return[Z4,K4,K4,Z4];return[K4,Z4,Z4,K4]}function A9($,J){if($.from===$.to)return O9(J);let K=f4($.from.gridCoord,$.to.gridCoord),Q,Z,V,B,U=J==="LR"?i(K,B4)||i(K,R4)||i(K,I4):i(K,j4)||i(K,R4)||i(K,X4);if(i(K,L4))if(J==="LR")Q=K4,Z=B4,V=Z4,B=j4;else Q=Z4,Z=j4,V=K4,B=B4;else if(i(K,X4))if(J==="LR")Q=j4,Z=B4,V=Z4,B=K4;else Q=Z4,Z=K4,V=j4,B=B4;else if(i(K,I4))if(J==="LR")Q=K4,Z=K4,V=B4,B=j4;else Q=B4,Z=j4,V=K4,B=Z4;else if(i(K,R4))if(J==="LR")Q=K4,Z=K4,V=B4,B=K4;else Q=Z4,Z=Z4,V=j4,B=Z4;else if(U)if(J==="LR"&&i(K,B4))Q=K4,Z=K4,V=B4,B=Z4;else if(J==="TD"&&i(K,j4))Q=Z4,Z=Z4,V=j4,B=K4;else Q=K,Z=Z6(K),V=K,B=Z6(K);else Q=K,Z=Z6(K),V=K,B=Z6(K);return[Q,Z,V,B]}function K7($,J){let[K,Q,Z,V]=A9(J,$.config.graphDirection),B=i4(J.from.gridCoord,K),U=i4(J.to.gridCoord,Q),j=Y6($.grid,B,U);if(j===null){J.startDir=Z,J.endDir=V,J.path=[];return}j=X6(j);let P=i4(J.from.gridCoord,Z),G=i4(J.to.gridCoord,V),q=Y6($.grid,P,G);if(q===null){J.startDir=K,J.endDir=Q,J.path=j;return}if(q=X6(q),j.length<=q.length)J.startDir=K,J.endDir=Q,J.path=j;else J.startDir=Z,J.endDir=V,J.path=q}function Z7($,J){if(J.text.length===0)return;let K=J.text.length,Q=J.path[0],Z=[Q,J.path[1]],V=0;for(let G=1;G<J.path.length;G++){let q=J.path[G],z=[Q,q],_=D9($,z);if(_>=K){Z=z;break}else if(_>V)V=_,Z=z;Q=q}let B=Math.min(Z[0].x,Z[1].x),U=Math.max(Z[0].x,Z[1].x),j=B+Math.floor((U-B)/2),P=$.columnWidth.get(j)??0;$.columnWidth.set(j,Math.max(P,K+2)),J.labelLine=[Z[0],Z[1]]}function D9($,J){let K=0,Q=Math.min(J[0].x,J[1].x),Z=Math.max(J[0].x,J[1].x);for(let V=Q;V<=Z;V++)K+=$.columnWidth.get(V)??0;return K}function U7($,J){let K=$.gridCoord,Q=J.config.useAscii,Z=0;for(let z=0;z<2;z++)Z+=J.columnWidth.get(K.x+z)??0;let V=0;for(let z=0;z<2;z++)V+=J.rowHeight.get(K.y+z)??0;let B={x:0,y:0},U={x:Z,y:V},j=F4(Math.max(B.x,U.x),Math.max(B.y,U.y));if(!Q){for(let z=B.x+1;z<U.x;z++)j[z][B.y]="─";for(let z=B.x+1;z<U.x;z++)j[z][U.y]="─";for(let z=B.y+1;z<U.y;z++)j[B.x][z]="│";for(let z=B.y+1;z<U.y;z++)j[U.x][z]="│";j[B.x][B.y]="┌",j[U.x][B.y]="┐",j[B.x][U.y]="└",j[U.x][U.y]="┘"}else{for(let z=B.x+1;z<U.x;z++)j[z][B.y]="-";for(let z=B.x+1;z<U.x;z++)j[z][U.y]="-";for(let z=B.y+1;z<U.y;z++)j[B.x][z]="|";for(let z=B.y+1;z<U.y;z++)j[U.x][z]="|";j[B.x][B.y]="+",j[U.x][B.y]="+",j[B.x][U.y]="+",j[U.x][U.y]="+"}let P=$.displayLabel,G=B.y+Math.floor(V/2),q=B.x+Math.floor(Z/2)-Math.ceil(P.length/2)+1;for(let z=0;z<P.length;z++)j[q+z][G]=P[z];return j}function U6($,J,K=1){let Q=0;for(let Y of $)for(let L of Y)Q=Math.max(Q,L.length);let V=Q+2*K+2,B=0;for(let Y of $)B+=Math.max(Y.length,1);let U=$.length-1,j=B+U+2,P=J?"-":"─",G=J?"|":"│",q=J?"+":"┌",z=J?"+":"┐",_=J?"+":"└",W=J?"+":"┘",F=J?"+":"├",H=J?"+":"┤",M=F4(V-1,j-1);M[0][0]=q;for(let Y=1;Y<V-1;Y++)M[Y][0]=P;M[V-1][0]=z,M[0][j-1]=_;for(let Y=1;Y<V-1;Y++)M[Y][j-1]=P;M[V-1][j-1]=W;for(let Y=1;Y<j-1;Y++)M[0][Y]=G,M[V-1][Y]=G;let R=1;for(let Y=0;Y<$.length;Y++){let L=$[Y],b=L.length>0?L:[""];for(let O of b){let A=1+K;for(let D=0;D<O.length;D++)M[A+D][R]=O[D];R++}if(Y<$.length-1){M[0][R]=F;for(let O=1;O<V-1;O++)M[O][R]=P;M[V-1][R]=H,R++}}return M}function Y9($,J,K,Q,Z,V){let B=f4(J,K),U=[],j=V?"-":"─",P=V?"|":"│",G=V?"\\":"╲",q=V?"/":"╱";if(i(B,j4))for(let z=J.y-Q;z>=K.y-Z;z--)U.push({x:J.x,y:z}),$[J.x][z]=P;else if(i(B,K4))for(let z=J.y+Q;z<=K.y+Z;z++)U.push({x:J.x,y:z}),$[J.x][z]=P;else if(i(B,B4))for(let z=J.x-Q;z>=K.x-Z;z--)U.push({x:z,y:J.y}),$[z][J.y]=j;else if(i(B,Z4))for(let z=J.x+Q;z<=K.x+Z;z++)U.push({x:z,y:J.y}),$[z][J.y]=j;else if(i(B,R4))for(let z=J.x,_=J.y-Q;z>=K.x-Z&&_>=K.y-Z;z--,_--)U.push({x:z,y:_}),$[z][_]=G;else if(i(B,X4))for(let z=J.x,_=J.y-Q;z<=K.x+Z&&_>=K.y-Z;z++,_--)U.push({x:z,y:_}),$[z][_]=q;else if(i(B,I4))for(let z=J.x,_=J.y+Q;z>=K.x-Z&&_<=K.y+Z;z--,_++)U.push({x:z,y:_}),$[z][_]=q;else if(i(B,L4))for(let z=J.x,_=J.y+Q;z<=K.x+Z&&_<=K.y+Z;z++,_++)U.push({x:z,y:_}),$[z][_]=G;return U}function X9($,J){if(J.path.length===0){let P=x4($.canvas);return[P,P,P,P,P]}let K=E9($,J),[Q,Z,V]=I9($,J.path),B=C9($,J.path,Z[0]),U=L9($,Z[Z.length-1],V[V.length-1]),j=N9($,J.path);return[Q,B,U,j,K]}function I9($,J){let K=x4($.canvas),Q=J[0],Z=[],V=[];for(let B=1;B<J.length;B++){let U=J[B],j=p4($,Q),P=p4($,U);if(s6(j,P)){Q=U;continue}let G=f4(Q,U),q=Y9(K,j,P,1,-1,$.config.useAscii);if(q.length===0)q.push(j);Z.push(q),V.push(G),Q=U}return[K,Z,V]}function C9($,J,K){let Q=x4($.canvas);if($.config.useAscii)return Q;let Z=K[0],V=f4(J[0],J[1]);if(i(V,j4))Q[Z.x][Z.y+1]="┴";else if(i(V,K4))Q[Z.x][Z.y-1]="┬";else if(i(V,B4))Q[Z.x+1][Z.y]="┤";else if(i(V,Z4))Q[Z.x-1][Z.y]="├";return Q}function L9($,J,K){let Q=x4($.canvas);if(J.length===0)return Q;let Z=J[0],V=J[J.length-1],B=f4(Z,V);if(J.length===1||i(B,K6))B=K;let U;if(!$.config.useAscii)if(i(B,j4))U="▲";else if(i(B,K4))U="▼";else if(i(B,B4))U="◄";else if(i(B,Z4))U="►";else if(i(B,X4))U="◥";else if(i(B,R4))U="◤";else if(i(B,L4))U="◢";else if(i(B,I4))U="◣";else if(i(K,j4))U="▲";else if(i(K,K4))U="▼";else if(i(K,B4))U="◄";else if(i(K,Z4))U="►";else if(i(K,X4))U="◥";else if(i(K,R4))U="◤";else if(i(K,L4))U="◢";else if(i(K,I4))U="◣";else U="●";else if(i(B,j4))U="^";else if(i(B,K4))U="v";else if(i(B,B4))U="<";else if(i(B,Z4))U=">";else if(i(K,j4))U="^";else if(i(K,K4))U="v";else if(i(K,B4))U="<";else if(i(K,Z4))U=">";else U="*";return Q[V.x][V.y]=U,Q}function N9($,J){let K=x4($.canvas);for(let Q=1;Q<J.length-1;Q++){let Z=J[Q],V=p4($,Z),B=f4(J[Q-1],Z),U=f4(Z,J[Q+1]),j;if(!$.config.useAscii)if(i(B,Z4)&&i(U,K4)||i(B,j4)&&i(U,B4))j="┐";else if(i(B,Z4)&&i(U,j4)||i(B,K4)&&i(U,B4))j="┘";else if(i(B,B4)&&i(U,K4)||i(B,j4)&&i(U,Z4))j="┌";else if(i(B,B4)&&i(U,j4)||i(B,K4)&&i(U,Z4))j="└";else j="+";else j="+";K[V.x][V.y]=j}return K}function E9($,J){let K=x4($.canvas);if(J.text.length===0)return K;let Q=z7($,J.labelLine);return T9(K,Q,J.text),K}function T9($,J,K){if(J.length<2)return;let Q=Math.min(J[0].x,J[1].x),Z=Math.max(J[0].x,J[1].x),V=Math.min(J[0].y,J[1].y),B=Math.max(J[0].y,J[1].y),U=Q+Math.floor((Z-Q)/2),j=V+Math.floor((B-V)/2),P=U-Math.floor(K.length/2);t6($,{x:P,y:j},K)}function k9($,J){let K=$.maxX-$.minX,Q=$.maxY-$.minY;if(K<=0||Q<=0)return F4(0,0);let Z={x:0,y:0},V={x:K,y:Q},B=F4(K,Q);if(!J.config.useAscii){for(let U=Z.x+1;U<V.x;U++)B[U][Z.y]="─";for(let U=Z.x+1;U<V.x;U++)B[U][V.y]="─";for(let U=Z.y+1;U<V.y;U++)B[Z.x][U]="│";for(let U=Z.y+1;U<V.y;U++)B[V.x][U]="│";B[Z.x][Z.y]="┌",B[V.x][Z.y]="┐",B[Z.x][V.y]="└",B[V.x][V.y]="┘"}else{for(let U=Z.x+1;U<V.x;U++)B[U][Z.y]="-";for(let U=Z.x+1;U<V.x;U++)B[U][V.y]="-";for(let U=Z.y+1;U<V.y;U++)B[Z.x][U]="|";for(let U=Z.y+1;U<V.y;U++)B[V.x][U]="|";B[Z.x][Z.y]="+",B[V.x][Z.y]="+",B[Z.x][V.y]="+",B[V.x][V.y]="+"}return B}function w9($,J){let K=$.maxX-$.minX,Q=$.maxY-$.minY;if(K<=0||Q<=0)return[F4(0,0),{x:0,y:0}];let Z=F4(K,Q),V=1,B=Math.floor(K/2)-Math.floor($.name.length/2);if(B<1)B=1;for(let U=0;U<$.name.length;U++)if(B+U<K)Z[B+U][V]=$.name[U];return[Z,{x:$.minX,y:$.minY}]}function S9($){function J(Q){return Q.parent===null?0:1+J(Q.parent)}let K=[...$];return K.sort((Q,Z)=>J(Q)-J(Z)),K}function V7($){let J=$.config.useAscii,K=S9($.subgraphs);for(let P of K){let G=k9(P,$),q={x:P.minX,y:P.minY};$.canvas=N4($.canvas,q,J,G)}for(let P of $.nodes)if(!P.drawn&&P.drawingCoord&&P.drawing)$.canvas=N4($.canvas,P.drawingCoord,J,P.drawing),P.drawn=!0;let Q=[],Z=[],V=[],B=[],U=[];for(let P of $.edges){let[G,q,z,_,W]=X9($,P);Q.push(G),Z.push(_),V.push(z),B.push(q),U.push(W)}let j={x:0,y:0};$.canvas=N4($.canvas,j,J,...Q),$.canvas=N4($.canvas,j,J,...Z),$.canvas=N4($.canvas,j,J,...V),$.canvas=N4($.canvas,j,J,...B),$.canvas=N4($.canvas,j,J,...U);for(let P of $.subgraphs){if(P.nodes.length===0)continue;let[G,q]=w9(P,$);$.canvas=N4($.canvas,q,J,G)}return $.canvas}function p4($,J,K){let Q=K?{x:J.x+K.x,y:J.y+K.y}:J,Z=0;for(let j=0;j<Q.x;j++)Z+=$.columnWidth.get(j)??0;let V=0;for(let j=0;j<Q.y;j++)V+=$.rowHeight.get(j)??0;let B=$.columnWidth.get(Q.x)??0,U=$.rowHeight.get(Q.y)??0;return{x:Z+Math.floor(B/2)+$.offsetX,y:V+Math.floor(U/2)+$.offsetY}}function z7($,J){return J.map((K)=>p4($,K))}function r4($,J,K){if($.grid.has(C4(K)))if($.config.graphDirection==="LR")return r4($,J,{x:K.x,y:K.y+4});else return r4($,J,{x:K.x+4,y:K.y});for(let Q=0;Q<3;Q++)for(let Z=0;Z<3;Z++){let V={x:K.x+Q,y:K.y+Z};$.grid.set(C4(V),J)}return J.gridCoord=K,K}function f9($,J){let K=J.gridCoord,Q=$.config.boxBorderPadding,Z=[1,2*Q+J.displayLabel.length,1],V=[1,1+2*Q,1];for(let B=0;B<Z.length;B++){let U=K.x+B,j=$.columnWidth.get(U)??0;$.columnWidth.set(U,Math.max(j,Z[B]))}for(let B=0;B<V.length;B++){let U=K.y+B,j=$.rowHeight.get(U)??0;$.rowHeight.set(U,Math.max(j,V[B]))}if(K.x>0){let B=$.columnWidth.get(K.x-1)??0;$.columnWidth.set(K.x-1,Math.max(B,$.config.paddingX))}if(K.y>0){let B=$.config.paddingY;if(y9($,J))B+=4;let U=$.rowHeight.get(K.y-1)??0;$.rowHeight.set(K.y-1,Math.max(U,B))}}function b9($,J){for(let K of J){if(!$.columnWidth.has(K.x))$.columnWidth.set(K.x,Math.floor($.config.paddingX/2));if(!$.rowHeight.has(K.y))$.rowHeight.set(K.y,Math.floor($.config.paddingY/2))}}function I6($,J){return $.subgraphs.some((K)=>K.nodes.includes(J))}function C6($,J){for(let K of $.subgraphs)if(K.nodes.includes(J))return K;return null}function y9($,J){let K=C6($,J);if(!K)return!1;let Q=!1;for(let Z of $.edges)if(Z.to===J){if(C6($,Z.from)!==K){Q=!0;break}}if(!Q)return!1;for(let Z of K.nodes){if(Z===J||!Z.gridCoord)continue;let V=!1;for(let B of $.edges)if(B.to===Z){if(C6($,B.from)!==K){V=!0;break}}if(V&&Z.gridCoord.y<J.gridCoord.y)return!1}return!0}function j7($,J){if(J.nodes.length===0)return;let K=1e6,Q=1e6,Z=-1e6,V=-1e6;for(let j of J.children)if(j7($,j),j.nodes.length>0)K=Math.min(K,j.minX),Q=Math.min(Q,j.minY),Z=Math.max(Z,j.maxX),V=Math.max(V,j.maxY);for(let j of J.nodes){if(!j.drawingCoord||!j.drawing)continue;let P=j.drawingCoord.x,G=j.drawingCoord.y,q=P+j.drawing.length-1,z=G+j.drawing[0].length-1;K=Math.min(K,P),Q=Math.min(Q,G),Z=Math.max(Z,q),V=Math.max(V,z)}let B=2,U=2;J.minX=K-B,J.minY=Q-B-U,J.maxX=Z+B,J.maxY=V+B}function x9($){let K=$.subgraphs.filter((Q)=>Q.parent===null&&Q.nodes.length>0);for(let Q=0;Q<K.length;Q++)for(let Z=Q+1;Z<K.length;Z++){let V=K[Q],B=K[Z];if(V.minX<B.maxX&&V.maxX>B.minX){if(V.maxY>=B.minY-1&&V.minY<B.minY)B.minY=V.maxY+1+1;else if(B.maxY>=V.minY-1&&B.minY<V.minY)V.minY=B.maxY+1+1}if(V.minY<B.maxY&&V.maxY>B.minY){if(V.maxX>=B.minX-1&&V.minX<B.minX)B.minX=V.maxX+1+1;else if(B.maxX>=V.minX-1&&B.minX<V.minX)V.minX=B.maxX+1+1}}}function v9($){for(let J of $.subgraphs)j7($,J);x9($)}function u9($){if($.subgraphs.length===0)return;let J=0,K=0;for(let V of $.subgraphs)J=Math.min(J,V.minX),K=Math.min(K,V.minY);let Q=-J,Z=-K;if(Q===0&&Z===0)return;$.offsetX=Q,$.offsetY=Z;for(let V of $.subgraphs)V.minX+=Q,V.minY+=Z,V.maxX+=Q,V.maxY+=Z;for(let V of $.nodes)if(V.drawingCoord)V.drawingCoord.x+=Q,V.drawingCoord.y+=Z}function B7($){let J=$.config.graphDirection,K=Array(100).fill(0),Q=new Set,Z=[];for(let G of $.nodes){if(!Q.has(G.name))Z.push(G);Q.add(G.name);for(let q of L6($,G))Q.add(q.name)}let V=!1,B=!1;for(let G of Z)if(I6($,G)){if(L6($,G).length>0)B=!0}else V=!0;let U=J==="LR"&&V&&B,j,P=[];if(U)j=Z.filter((G)=>!I6($,G)),P=Z.filter((G)=>I6($,G));else j=Z;for(let G of j){let q=J==="LR"?{x:0,y:K[0]}:{x:K[0],y:0};r4($,$.nodes[G.index],q),K[0]=K[0]+4}if(U&&P.length>0)for(let q of P){let z=J==="LR"?{x:4,y:K[4]}:{x:K[4],y:4};r4($,$.nodes[q.index],z),K[4]=K[4]+4}for(let G of $.nodes){let q=G.gridCoord,z=J==="LR"?q.x+4:q.y+4,_=K[z];for(let W of L6($,G)){if(W.gridCoord!==null)continue;let F=J==="LR"?{x:z,y:_}:{x:_,y:z};r4($,$.nodes[W.index],F),K[z]=_+4,_=K[z]}}for(let G of $.nodes)f9($,G);for(let G of $.edges)K7($,G),b9($,G.path),Z7($,G);for(let G of $.nodes)G.drawingCoord=p4($,G.gridCoord),G.drawing=U7(G,$);e6($.canvas,$.columnWidth,$.rowHeight),v9($),u9($)}function m9($,J){return $.edges.filter((K)=>K.from.name===J.name)}function L6($,J){return m9($,J).map((K)=>K.to)}function V6($){let J={actors:[],messages:[],blocks:[],notes:[]},K=new Set,Q=[];for(let Z=1;Z<$.length;Z++){let V=$[Z],B=V.match(/^(participant|actor)\s+(\S+?)(?:\s+as\s+(.+))?$/);if(B){let z=B[1],_=B[2],W=B[3]?.trim()??_;if(!K.has(_))K.add(_),J.actors.push({id:_,label:W,type:z});continue}let U=V.match(/^Note\s+(left of|right of|over)\s+([^:]+):\s*(.+)$/i);if(U){let z=U[1].toLowerCase(),_=U[2].trim(),W=U[3].trim(),F=_.split(",").map((M)=>M.trim());for(let M of F)t4(J,K,M);let H="over";if(z==="left of")H="left";else if(z==="right of")H="right";J.notes.push({actorIds:F,text:W,position:H,afterIndex:J.messages.length-1});continue}let j=V.match(/^(loop|alt|opt|par|critical|break|rect)\s*(.*)$/);if(j){let z=j[1],_=j[2]?.trim()??"";Q.push({type:z,label:_,startIndex:J.messages.length,dividers:[]});continue}let P=V.match(/^(else|and)\s*(.*)$/);if(P&&Q.length>0){let z=P[2]?.trim()??"";Q[Q.length-1].dividers.push({index:J.messages.length,label:z});continue}if(V==="end"&&Q.length>0){let z=Q.pop();J.blocks.push({type:z.type,label:z.label,startIndex:z.startIndex,endIndex:Math.max(J.messages.length-1,z.startIndex),dividers:z.dividers});continue}let G=V.match(/^(\S+?)\s*(--?>?>|--?[)x]|--?>>|--?>)\s*([+-]?)(\S+?)\s*:\s*(.+)$/);if(G){let z=G[1],_=G[2],W=G[3],F=G[4],H=G[5].trim();t4(J,K,z),t4(J,K,F);let M=_.startsWith("--")?"dashed":"solid",R=_.includes(">>")||_.includes("x")?"filled":"open",Y={from:z,to:F,label:H,lineStyle:M,arrowHead:R};if(W==="+")Y.activate=!0;if(W==="-")Y.deactivate=!0;J.messages.push(Y);continue}let q=V.match(/^(\S+?)\s*(->>|-->>|-\)|--\)|-x|--x|->|-->)\s*([+-]?)(\S+?)\s*:\s*(.+)$/);if(q){let z=q[1],_=q[2],W=q[3],F=q[4],H=q[5].trim();t4(J,K,z),t4(J,K,F);let M=_.startsWith("--")?"dashed":"solid",R=_.includes(">>")||_.includes("x")?"filled":"open",Y={from:z,to:F,label:H,lineStyle:M,arrowHead:R};if(W==="+")Y.activate=!0;if(W==="-")Y.deactivate=!0;J.messages.push(Y);continue}}return J}function t4($,J,K){if(!J.has(K))J.add(K),$.actors.push({id:K,label:K,type:"participant"})}function G7($,J){let K=$.split(`
|
||
`).map((C)=>C.trim()).filter((C)=>C.length>0&&!C.startsWith("%%")),Q=V6(K);if(Q.actors.length===0)return"";let Z=J.useAscii,V=Z?"-":"─",B=Z?"|":"│",U=Z?"+":"┌",j=Z?"+":"┐",P=Z?"+":"└",G=Z?"+":"┘",q=Z?"+":"┬",z=Z?"+":"┴",_=Z?"+":"├",W=Z?"+":"┤",F=new Map;Q.actors.forEach((C,c)=>F.set(C.id,c));let H=1,R=Q.actors.map((C)=>C.label.length+2*H+2).map((C)=>Math.ceil(C/2)),Y=3,L=Array(Math.max(Q.actors.length-1,0)).fill(0);for(let C of Q.messages){let c=F.get(C.from),l=F.get(C.to);if(c===l)continue;let p=Math.min(c,l),h=Math.max(c,l),m=C.label.length+4,g=h-p,o=Math.ceil(m/g);for(let E=p;E<h;E++)L[E]=Math.max(L[E],o)}let b=[R[0]];for(let C=1;C<Q.actors.length;C++){let c=Math.max(R[C-1]+R[C]+2,L[C-1]+2,10);b[C]=b[C-1]+c}let O=[],A=[],D=new Map,T=new Map,v=new Map,u=[],y=Y;for(let C=0;C<Q.messages.length;C++){for(let p=0;p<Q.blocks.length;p++)if(Q.blocks[p].startIndex===C)y+=2,D.set(p,y-1);for(let p=0;p<Q.blocks.length;p++)for(let h=0;h<Q.blocks[p].dividers.length;h++)if(Q.blocks[p].dividers[h].index===C)y+=1,v.set(`${p}:${h}`,y),y+=1;y+=1;let c=Q.messages[C];if(c.from===c.to)A[C]=y+1,O[C]=y,y+=3;else A[C]=y,O[C]=y+1,y+=2;for(let p=0;p<Q.notes.length;p++)if(Q.notes[p].afterIndex===C){y+=1;let h=Q.notes[p],m=h.text.split("\\n"),g=Math.max(...m.map((x)=>x.length))+4,o=m.length+2,E=F.get(h.actorIds[0])??0,k;if(h.position==="left")k=b[E]-g-1;else if(h.position==="right")k=b[E]+2;else if(h.actorIds.length>=2){let x=F.get(h.actorIds[1])??E;k=Math.floor((b[E]+b[x])/2)-Math.floor(g/2)}else k=b[E]-Math.floor(g/2);k=Math.max(0,k),u.push({x:k,y,width:g,height:o,lines:m}),y+=o}for(let p=0;p<Q.blocks.length;p++)if(Q.blocks[p].endIndex===C)y+=1,T.set(p,y),y+=1}y+=1;let f=y,X=f+Y,N=b[b.length-1]??0,S=R[R.length-1]??0,w=N+S+2;for(let C=0;C<Q.messages.length;C++){let c=Q.messages[C];if(c.from===c.to){let l=F.get(c.from),p=b[l]+6+2+c.label.length;w=Math.max(w,p+1)}}for(let C of u)w=Math.max(w,C.x+C.width+1);let I=F4(w,X-1);function d(C,c,l){let p=l.length+2*H+2,h=C-Math.floor(p/2);I[h][c]=U;for(let g=1;g<p-1;g++)I[h+g][c]=V;I[h+p-1][c]=j,I[h][c+1]=B,I[h+p-1][c+1]=B;let m=h+1+H;for(let g=0;g<l.length;g++)I[m+g][c+1]=l[g];I[h][c+2]=P;for(let g=1;g<p-1;g++)I[h+g][c+2]=V;I[h+p-1][c+2]=G}for(let C=0;C<Q.actors.length;C++){let c=b[C];for(let l=Y;l<=f;l++)I[c][l]=B}for(let C=0;C<Q.actors.length;C++){let c=Q.actors[C];if(d(b[C],0,c.label),d(b[C],f,c.label),!Z)I[b[C]][Y-1]=q,I[b[C]][f]=z}for(let C=0;C<Q.messages.length;C++){let c=Q.messages[C],l=F.get(c.from),p=F.get(c.to),h=b[l],m=b[p],g=l===p,o=c.lineStyle==="dashed",E=c.arrowHead==="filled",k=o?Z?".":"╌":V;if(g){let x=O[C],n=Math.max(4,4);I[h][x]=_;for(let e=h+1;e<h+n;e++)I[e][x]=k;I[h+n][x]=Z?"+":"┐",I[h+n][x+1]=B;let t=h+n+2;for(let e=0;e<c.label.length;e++)if(t+e<w)I[t+e][x+1]=c.label[e];let J4=E?Z?"<":"◀":Z?"<":"◁";I[h][x+2]=J4;for(let e=h+1;e<h+n;e++)I[e][x+2]=k;I[h+n][x+2]=Z?"+":"┘"}else{let x=A[C],n=O[C],t=h<m,e=Math.floor((h+m)/2)-Math.floor(c.label.length/2);for(let G4=0;G4<c.label.length;G4++){let q4=e+G4;if(q4>=0&&q4<w)I[q4][x]=c.label[G4]}if(t){for(let q4=h+1;q4<m;q4++)I[q4][n]=k;let G4=E?Z?">":"▶":Z?">":"▷";I[m][n]=G4}else{for(let q4=m+1;q4<h;q4++)I[q4][n]=k;let G4=E?Z?"<":"◀":Z?"<":"◁";I[m][n]=G4}}}for(let C=0;C<Q.blocks.length;C++){let c=Q.blocks[C],l=D.get(C),p=T.get(C);if(l===void 0||p===void 0)continue;let h=w,m=0;for(let k=c.startIndex;k<=c.endIndex;k++){if(k>=Q.messages.length)break;let x=Q.messages[k],n=F.get(x.from)??0,t=F.get(x.to)??0;h=Math.min(h,b[Math.min(n,t)]),m=Math.max(m,b[Math.max(n,t)])}let g=Math.max(0,h-4),o=Math.min(w-1,m+4);I[g][l]=U;for(let k=g+1;k<o;k++)I[k][l]=V;I[o][l]=j;let E=c.label?`${c.type} [${c.label}]`:c.type;for(let k=0;k<E.length&&g+1+k<o;k++)I[g+1+k][l]=E[k];I[g][p]=P;for(let k=g+1;k<o;k++)I[k][p]=V;I[o][p]=G;for(let k=l+1;k<p;k++)I[g][k]=B,I[o][k]=B;for(let k=0;k<c.dividers.length;k++){let x=v.get(`${C}:${k}`);if(x===void 0)continue;let n=s();I[g][x]=_;for(let J4=g+1;J4<o;J4++)I[J4][x]=n;I[o][x]=W;let t=c.dividers[k].label;if(t){let J4=`[${t}]`;for(let e=0;e<J4.length&&g+1+e<o;e++)I[g+1+e][x]=J4[e]}}}for(let C of u){w4(I,C.x+C.width,C.y+C.height),I[C.x][C.y]=U;for(let l=1;l<C.width-1;l++)I[C.x+l][C.y]=V;I[C.x+C.width-1][C.y]=j;for(let l=0;l<C.lines.length;l++){let p=C.y+1+l;I[C.x][p]=B,I[C.x+C.width-1][p]=B;for(let h=0;h<C.lines[l].length;h++)I[C.x+2+h][p]=C.lines[l][h]}let c=C.y+C.height-1;I[C.x][c]=P;for(let l=1;l<C.width-1;l++)I[C.x+l][c]=V;I[C.x+C.width-1][c]=G}return S4(I);function s(){return Z?"-":"╌"}}function z6($){let J={classes:[],relationships:[],namespaces:[]},K=new Map,Q=null,Z=null,V=0;for(let B=1;B<$.length;B++){let U=$[B];if(Z&&V>0){if(U==="}"){if(V--,V===0)Z=null;continue}let W=U.match(/^<<(\w+)>>$/);if(W){Z.annotation=W[1];continue}let F=P7(U);if(F)if(F.isMethod)Z.methods.push(F.member);else Z.attributes.push(F.member);continue}let j=U.match(/^namespace\s+(\S+)\s*\{$/);if(j){Q={name:j[1],classIds:[]};continue}if(U==="}"&&Q){J.namespaces.push(Q),Q=null;continue}let P=U.match(/^class\s+(\S+?)(?:\s*~(\w+)~)?\s*\{$/);if(P){let W=P[1],F=P[2],H=l4(K,W);if(F)H.label=`${W}<${F}>`;if(Z=H,V=1,Q)Q.classIds.push(W);continue}let G=U.match(/^class\s+(\S+?)(?:\s*~(\w+)~)?\s*$/);if(G){let W=G[1],F=G[2],H=l4(K,W);if(F)H.label=`${W}<${F}>`;if(Q)Q.classIds.push(W);continue}let q=U.match(/^class\s+(\S+?)\s*\{\s*<<(\w+)>>\s*\}$/);if(q){let W=l4(K,q[1]);W.annotation=q[2];continue}let z=U.match(/^(\S+?)\s*:\s*(.+)$/);if(z){let W=z[2];if(!W.match(/<\|--|--|\*--|o--|-->|\.\.>|\.\.\|>/)){let F=l4(K,z[1]),H=P7(W);if(H)if(H.isMethod)F.methods.push(H.member);else F.attributes.push(H.member);continue}}let _=h9(U);if(_){l4(K,_.from),l4(K,_.to),J.relationships.push(_);continue}}return J.classes=[...K.values()],J}function l4($,J){let K=$.get(J);if(!K)K={id:J,label:J,attributes:[],methods:[]},$.set(J,K);return K}function P7($){let J=$.trim().replace(/;$/,"");if(!J)return null;let K="",Q=J;if(/^[+\-#~]/.test(Q))K=Q[0],Q=Q.slice(1).trim();let Z=Q.match(/^(.+?)\(([^)]*)\)(?:\s*(.+))?$/);if(Z){let G=Z[1].trim(),q=Z[3]?.trim(),z=G.endsWith("$")||Q.includes("$"),_=G.endsWith("*")||Q.includes("*");return{member:{visibility:K,name:G.replace(/[$*]$/,""),type:q||void 0,isStatic:z,isAbstract:_},isMethod:!0}}let V=Q.split(/\s+/),B,U;if(V.length>=2)U=V[0],B=V.slice(1).join(" ");else B=V[0]??Q;let j=B.endsWith("$"),P=B.endsWith("*");return{member:{visibility:K,name:B.replace(/[$*]$/,""),type:U||void 0,isStatic:j,isAbstract:P},isMethod:!1}}function h9($){let J=$.match(/^(\S+?)\s+(?:"([^"]*?)"\s+)?(<\|--|<\|\.\.|\*--|o--|-->|--\*|--o|--|>\s*|\.\.>|\.\.\|>|--)\s+(?:"([^"]*?)"\s+)?(\S+?)(?:\s*:\s*(.+))?$/);if(!J)return null;let K=J[1],Q=J[2]||void 0,Z=J[3].trim(),V=J[4]||void 0,B=J[5],U=J[6]?.trim()||void 0,j=c9(Z);if(!j)return null;return{from:K,to:B,type:j.type,markerAt:j.markerAt,label:U,fromCardinality:Q,toCardinality:V}}function c9($){switch($){case"<|--":return{type:"inheritance",markerAt:"from"};case"<|..":return{type:"realization",markerAt:"from"};case"*--":return{type:"composition",markerAt:"from"};case"--*":return{type:"composition",markerAt:"to"};case"o--":return{type:"aggregation",markerAt:"from"};case"--o":return{type:"aggregation",markerAt:"to"};case"-->":return{type:"association",markerAt:"to"};case"..>":return{type:"dependency",markerAt:"to"};case"..|>":return{type:"realization",markerAt:"to"};case"--":return{type:"association",markerAt:"to"};default:return null}}function F7($){let J=$.visibility||"",K=$.type?`: ${$.type}`:"";return`${J}${$.name}${K}`}function p9($){let J=[];if($.annotation)J.push(`<<${$.annotation}>>`);J.push($.label);let K=$.attributes.map(F7),Q=$.methods.map(F7);if(K.length===0&&Q.length===0)return[J];if(Q.length===0)return[J,K];return[J,K,Q]}function l9($,J){return{type:$,markerAt:J,dashed:$==="dependency"||$==="realization"}}function d4($,J,K){switch($){case"inheritance":case"realization":if(K==="down")return J?"^":"△";else if(K==="up")return J?"v":"▽";else if(K==="left")return J?">":"◁";else return J?"<":"▷";case"composition":return J?"*":"◆";case"aggregation":return J?"o":"◇";case"association":case"dependency":if(K==="down")return J?"v":"▼";else if(K==="up")return J?"^":"▲";else if(K==="left")return J?"<":"◀";else return J?">":"▶"}}function _7($,J){let K=$.split(`
|
||
`).map((f)=>f.trim()).filter((f)=>f.length>0&&!f.startsWith("%%")),Q=z6(K);if(Q.classes.length===0)return"";let Z=J.useAscii,V=4,B=3,U=new Map,j=new Map,P=new Map;for(let f of Q.classes){let X=p9(f);U.set(f.id,X);let N=0;for(let d of X)for(let s of d)N=Math.max(N,s.length);let S=N+4,w=0;for(let d of X)w+=Math.max(d.length,1);let I=w+(X.length-1)+2;j.set(f.id,S),P.set(f.id,I)}let G=new Map;for(let f of Q.classes)G.set(f.id,f);let q=new Map,z=new Map;for(let f of Q.relationships){let X=f.type==="inheritance"||f.type==="realization",N=X&&f.markerAt==="to"?f.to:f.from,S=X&&f.markerAt==="to"?f.from:f.to;if(!q.has(S))q.set(S,new Set);if(q.get(S).add(N),!z.has(N))z.set(N,new Set);z.get(N).add(S)}let _=new Map,F=Q.classes.filter((f)=>!q.has(f.id)||q.get(f.id).size===0).map((f)=>f.id);for(let f of F)_.set(f,0);let H=Q.classes.length-1,M=0;while(M<F.length){let f=F[M++],X=z.get(f);if(!X)continue;for(let N of X){let S=(_.get(f)??0)+1;if(S>H)continue;if(!_.has(N)||_.get(N)<S)_.set(N,S),F.push(N)}}for(let f of Q.classes)if(!_.has(f.id))_.set(f.id,0);let R=Math.max(...[..._.values()],0),Y=Array.from({length:R+1},()=>[]);for(let f of Q.classes)Y[_.get(f.id)].push(f.id);let L=new Map,b=0;for(let f=0;f<=R;f++){let X=Y[f];if(X.length===0)continue;let N=0,S=0;for(let w of X){let I=G.get(w),d=j.get(w),s=P.get(w);L.set(w,{cls:I,sections:U.get(w),x:N,y:b,width:d,height:s}),N+=d+V,S=Math.max(S,s)}b+=S+B}let O=0,A=0;for(let f of L.values())O=Math.max(O,f.x+f.width),A=Math.max(A,f.y+f.height);O+=4,A+=2;let D=F4(O-1,A-1);for(let f of L.values()){let X=U6(f.sections,Z);for(let N=0;N<X.length;N++)for(let S=0;S<X[0].length;S++){let w=X[N][S];if(w!==" "){let I=f.x+N,d=f.y+S;if(I<O&&d<A)D[I][d]=w}}}let T=Z?"-":"─",v=Z?"|":"│",u=Z?".":"╌",y=Z?":":"┊";for(let f of Q.relationships){let X=L.get(f.from),N=L.get(f.to);if(!X||!N)continue;let S=l9(f.type,f.markerAt),w=S.dashed?u:T,I=S.dashed?y:v,d=X.x+Math.floor(X.width/2),s=X.y+X.height-1,C=N.x+Math.floor(N.width/2),c=N.y;if(s<c){let l=s+Math.floor((c-s)/2);for(let p=s+1;p<=l;p++)if(p<A)D[d][p]=I;if(d!==C){let p=Math.min(d,C),h=Math.max(d,C);for(let m=p;m<=h;m++)if(m<O&&l<A)D[m][l]=w;if(!Z&&l<A)if(d<C)D[d][l]="└",D[C][l]="┐";else D[d][l]="┘",D[C][l]="┌"}for(let p=l+1;p<c;p++)if(p<A)D[C][p]=I;if(S.markerAt==="to"){let p=d4(S.type,Z,"down"),h=c-1;if(h>=0&&h<A)for(let m=0;m<p.length;m++){let g=C-Math.floor(p.length/2)+m;if(g>=0&&g<O)D[g][h]=p[m]}}if(S.markerAt==="from"){let p=d4(S.type,Z,"down"),h=s+1;if(h<A)for(let m=0;m<p.length;m++){let g=d-Math.floor(p.length/2)+m;if(g>=0&&g<O)D[g][h]=p[m]}}}else if(N.y+N.height-1<X.y){let l=X.y,p=N.y+N.height-1,h=p+Math.floor((l-p)/2);for(let m=l-1;m>=h;m--)if(m>=0&&m<A)D[d][m]=I;if(d!==C){let m=Math.min(d,C),g=Math.max(d,C);for(let o=m;o<=g;o++)if(o<O&&h>=0&&h<A)D[o][h]=w;if(!Z&&h>=0&&h<A)if(d<C)D[d][h]="┌",D[C][h]="┘";else D[d][h]="┐",D[C][h]="└"}for(let m=h-1;m>p;m--)if(m>=0&&m<A)D[C][m]=I;if(S.markerAt==="from"){let m=d4(S.type,Z,"up"),g=l-1;if(g>=0&&g<A)for(let o=0;o<m.length;o++){let E=d-Math.floor(m.length/2)+o;if(E>=0&&E<O)D[E][g]=m[o]}}if(S.markerAt==="to"){let g=S.type==="inheritance"||S.type==="realization"?"down":"up",o=d4(S.type,Z,g),E=p+1;if(E<A)for(let k=0;k<o.length;k++){let x=C-Math.floor(o.length/2)+k;if(x>=0&&x<O)D[x][E]=o[k]}}}else{let l=Math.max(s,N.y+N.height-1)+2;w4(D,O,l+1);for(let m=s+1;m<=l;m++)D[d][m]=I;let p=Math.min(d,C),h=Math.max(d,C);for(let m=p;m<=h;m++)D[m][l]=w;for(let m=l-1;m>=N.y+N.height;m--)D[C][m]=I;if(S.markerAt==="from"){let m=d4(S.type,Z,"down"),g=s+1;if(g<A)for(let o=0;o<m.length;o++){let E=d-Math.floor(m.length/2)+o;if(E>=0&&E<O)D[E][g]=m[o]}}if(S.markerAt==="to"){let m=d4(S.type,Z,"up"),g=N.y+N.height;if(g<A)for(let o=0;o<m.length;o++){let E=C-Math.floor(m.length/2)+o;if(E>=0&&E<O)D[E][g]=m[o]}}}if(f.label){let l=` ${f.label} `,p=Math.floor((d+C)/2),h;if(s<c)h=Math.floor((s+1+c-1)/2);else if(N.y+N.height-1<X.y){let g=N.y+N.height-1;h=Math.floor((g+1+X.y-1)/2)}else h=Math.max(s,N.y+N.height-1)+2;let m=p-Math.floor(l.length/2);for(let g=0;g<l.length;g++){let o=m+g;if(o>=0&&o<O&&h>=0&&h<A)D[o][h]=l[g]}}}return S4(D)}function j6($){let J={entities:[],relationships:[]},K=new Map,Q=null;for(let Z=1;Z<$.length;Z++){let V=$[Z];if(Q){if(V==="}"){Q=null;continue}let j=d9(V);if(j)Q.attributes.push(j);continue}let B=V.match(/^(\S+)\s*\{$/);if(B){let j=B[1];Q=N6(K,j);continue}let U=g9(V);if(U){N6(K,U.entity1),N6(K,U.entity2),J.relationships.push(U);continue}}return J.entities=[...K.values()],J}function N6($,J){let K=$.get(J);if(!K)K={id:J,label:J,attributes:[]},$.set(J,K);return K}function d9($){let J=$.match(/^(\S+)\s+(\S+)(?:\s+(.+))?$/);if(!J)return null;let K=J[1],Q=J[2],Z=J[3]?.trim()??"",V=[],B,U=Z.match(/"([^"]*)"/);if(U)B=U[1];let j=Z.replace(/"[^"]*"/,"").trim();for(let P of j.split(/\s+/)){let G=P.toUpperCase();if(G==="PK"||G==="FK"||G==="UK")V.push(G)}return{type:K,name:Q,keys:V,comment:B}}function g9($){let J=$.match(/^(\S+)\s+([|o}{]+(?:--|\.\.)[|o}{]+)\s+(\S+)\s*:\s*(.+)$/);if(!J)return null;let K=J[1],Q=J[2],Z=J[3],V=J[4].trim(),B=Q.match(/^([|o}{]+)(--|\.\.?)([|o}{]+)$/);if(!B)return null;let U=B[1],j=B[2],P=B[3],G=q7(U),q=q7(P),z=j==="--";if(!G||!q)return null;return{entity1:K,entity2:Z,cardinality1:G,cardinality2:q,label:V,identifying:z}}function q7($){let J=$.split("").sort().join("");if(J==="||")return"one";if(J==="o|")return"zero-one";if(J==="|}"||J==="{|")return"many";if(J==="{o"||J==="o{")return"zero-many";return null}function n9($){return`${$.keys.length>0?$.keys.join(",")+" ":" "}${$.type} ${$.name}`}function o9($){let J=[$.label],K=$.attributes.map(n9);if(K.length===0)return[J];return[J,K]}function B6($,J){if(J)switch($){case"one":return"||";case"zero-one":return"o|";case"many":return"}|";case"zero-many":return"o{"}else switch($){case"one":return"║";case"zero-one":return"o║";case"many":return"╟";case"zero-many":return"o╟"}}function W7($,J){let K=$.split(`
|
||
`).map((A)=>A.trim()).filter((A)=>A.length>0&&!A.startsWith("%%")),Q=j6(K);if(Q.entities.length===0)return"";let Z=J.useAscii,V=6,B=4,U=new Map,j=new Map,P=new Map;for(let A of Q.entities){let D=o9(A);U.set(A.id,D);let T=0;for(let f of D)for(let X of f)T=Math.max(T,X.length);let v=T+4,u=0;for(let f of D)u+=Math.max(f.length,1);let y=u+(D.length-1)+2;j.set(A.id,v),P.set(A.id,y)}let G=Math.max(2,Math.ceil(Math.sqrt(Q.entities.length))),q=new Map,z=0,_=0,W=0,F=0;for(let A of Q.entities){let D=j.get(A.id),T=P.get(A.id);if(F>=G)_+=W+B,z=0,W=0,F=0;q.set(A.id,{entity:A,sections:U.get(A.id),x:z,y:_,width:D,height:T}),z+=D+V,W=Math.max(W,T),F++}let H=0,M=0;for(let A of q.values())H=Math.max(H,A.x+A.width),M=Math.max(M,A.y+A.height);H+=4,M+=2;let R=F4(H-1,M-1);for(let A of q.values()){let D=U6(A.sections,Z);for(let T=0;T<D.length;T++)for(let v=0;v<D[0].length;v++){let u=D[T][v];if(u!==" "){let y=A.x+T,f=A.y+v;if(y<H&&f<M)R[y][f]=u}}}let Y=Z?"-":"─",L=Z?"|":"│",b=Z?".":"╌",O=Z?":":"┊";for(let A of Q.relationships){let D=q.get(A.entity1),T=q.get(A.entity2);if(!D||!T)continue;let v=A.identifying?Y:b,u=A.identifying?L:O,y=D.x+Math.floor(D.width/2),f=D.y+Math.floor(D.height/2),X=T.x+Math.floor(T.width/2),N=T.y+Math.floor(T.height/2);if(Math.abs(f-N)<Math.max(D.height,T.height)){let[w,I]=y<X?[D,T]:[T,D],[d,s]=y<X?[A.cardinality1,A.cardinality2]:[A.cardinality2,A.cardinality1],C=w.x+w.width,c=I.x-1,l=w.y+Math.floor(w.height/2);for(let m=C;m<=c;m++)if(m<H)R[m][l]=v;let p=B6(d,Z);for(let m=0;m<p.length;m++){let g=C+m;if(g<H)R[g][l]=p[m]}let h=B6(s,Z);for(let m=0;m<h.length;m++){let g=c-h.length+1+m;if(g>=0&&g<H)R[g][l]=h[m]}if(A.label){let m=Math.floor((C+c)/2),g=Math.max(C,m-Math.floor(A.label.length/2)),o=l-1;if(o>=0)for(let E=0;E<A.label.length;E++){let k=g+E;if(k>=C&&k<=c&&k<H)R[k][o]=A.label[E]}}}else{let[w,I]=f<N?[D,T]:[T,D],[d,s]=f<N?[A.cardinality1,A.cardinality2]:[A.cardinality2,A.cardinality1],C=w.y+w.height,c=I.y-1,l=w.x+Math.floor(w.width/2);for(let o=C;o<=c;o++)if(o<M)R[l][o]=u;let p=I.x+Math.floor(I.width/2);if(l!==p){let o=Math.floor((C+c)/2),E=Math.min(l,p),k=Math.max(l,p);for(let x=E;x<=k;x++)if(x<H&&o<M)R[x][o]=v;for(let x=o+1;x<=c;x++)if(x<M)R[p][x]=u}let h=B6(d,Z);if(C<M)for(let o=0;o<h.length;o++){let E=l-Math.floor(h.length/2)+o;if(E>=0&&E<H)R[E][C]=h[o]}let m=l!==p?p:l,g=B6(s,Z);if(c>=0&&c<M)for(let o=0;o<g.length;o++){let E=m-Math.floor(g.length/2)+o;if(E>=0&&E<H)R[E][c]=g[o]}if(A.label){let o=Math.floor((C+c)/2),E=l+2;if(o>=0)for(let k=0;k<A.label.length;k++){let x=E+k;if(x>=0)w4(R,x+1,o+1),R[x][o]=A.label[k]}}}}return S4(R)}function s9($){let J=$.trim().split(/[\n;]/)[0]?.trim().toLowerCase()??"";if(/^sequencediagram\s*$/.test(J))return"sequence";if(/^classdiagram\s*$/.test(J))return"class";if(/^erdiagram\s*$/.test(J))return"er";return"flowchart"}function E6($,J={}){let K={useAscii:J.useAscii??!1,paddingX:J.paddingX??5,paddingY:J.paddingY??5,boxBorderPadding:J.boxBorderPadding??1,graphDirection:"TD"};switch(s9($)){case"sequence":return G7($,K);case"class":return _7($,K);case"er":return W7($,K);case"flowchart":default:{let Z=s4($);if(Z.direction==="LR"||Z.direction==="RL")K.graphDirection="LR";else K.graphDirection="TD";let V=$7(Z,K);if(B7(V),V7(V),Z.direction==="BT")r6(V.canvas);return S4(V.canvas)}}}var J6=H6(G6(),1);function U4($,J,K){let Q=K>=600?0.58:K>=500?0.55:0.52;return $.length*J*Q}function P6($,J){return $.length*J*0.6}var i9="'JetBrains Mono'",n5=`${i9}, 'SF Mono', 'Fira Code', ui-monospace, monospace`,r={nodeLabel:13,edgeLabel:11,groupHeader:12},$4={nodeLabel:500,edgeLabel:400,groupHeader:600},H7=8,v4={horizontal:16,vertical:10,diamondExtra:24},V4={outerBox:1,innerBox:0.75,connector:0.75},z4="0.35em",g4={width:8,height:4.8};function E4($,J,K,Q){return{x:$-K/2,y:J-Q/2}}function e4($,J,K,Q,Z){let V=$.x-J,B=$.y-K;if(Math.abs(V)<0.5&&Math.abs(B)<0.5)return $;let U=1/(Math.abs(V)/Q+Math.abs(B)/Z);return{x:J+U*V,y:K+U*B}}function $6($,J,K,Q){let Z=$.x-J,V=$.y-K,B=Math.sqrt(Z*Z+V*V);if(B<0.5)return $;let U=Q/B;return{x:J+U*Z,y:K+U*V}}function b4($,J=!0){if($.length<2)return $;let K=[$[0]];for(let Q=1;Q<$.length;Q++){let Z=K[K.length-1],V=$[Q],B=Math.abs(V.x-Z.x),U=Math.abs(V.y-Z.y);if(B<1||U<1){K.push(V);continue}if(J)K.push({x:Z.x,y:V.y});else K.push({x:V.x,y:Z.y});K.push(V)}return a9(K)}function a9($){if($.length<3)return $;let J=[$[0]];for(let K=1;K<$.length-1;K++){let Q=J[J.length-1],Z=$[K],V=$[K+1],B=Math.abs(Q.x-Z.x)<1&&Math.abs(Z.x-V.x)<1,U=Math.abs(Q.y-Z.y)<1&&Math.abs(Z.y-V.y)<1;if(B||U)continue;J.push(Z)}return J.push($[$.length-1]),J}function u4($,J,K){if($.length<2)return $;let Q=$.map((Z)=>({...Z}));if(K){let Z=Q.length-1;if($.length===2){let V=Q[0],B=Q[Z],U=Math.abs(B.x-V.x);if(Math.abs(B.y-V.y)>=U){let G=B.y>V.y?K.cy-K.hh:K.cy+K.hh;Q[Z]={x:B.x,y:G}}else{let G=B.x>V.x?K.cx-K.hw:K.cx+K.hw;Q[Z]={x:G,y:B.y}}}else{let V=Q[Z-1],B=Q[Z],U=Math.abs(B.x-V.x),j=Math.abs(B.y-V.y),P=j<1&&U>=1,G=U<1&&j>=1,q=!P&&!G&&j<U,z=!P&&!G&&U<j;if(P){let W=B.x>V.x?K.cx-K.hw:K.cx+K.hw;Q[Z]={x:W,y:K.cy},Q[Z-1]={...V,y:K.cy}}else if(G){let W=B.y>V.y?K.cy-K.hh:K.cy+K.hh;Q[Z]={x:K.cx,y:W},Q[Z-1]={...V,x:K.cx}}else if(q){let W=B.x>V.x?K.cx-K.hw:K.cx+K.hw;if(V.y>=K.cy-K.hh&&V.y<=K.cy+K.hh)Q[Z]={x:W,y:V.y};else Q[Z]={x:W,y:K.cy},Q[Z-1]={...V,y:K.cy}}else if(z){let W=B.y>V.y?K.cy-K.hh:K.cy+K.hh;if(V.x>=K.cx-K.hw&&V.x<=K.cx+K.hw)Q[Z]={x:V.x,y:W};else Q[Z]={x:K.cx,y:W},Q[Z-1]={...V,x:K.cx}}}}if(J&&$.length>=3){let Z=Q[0],V=Q[1],B=Math.abs(V.x-Z.x),U=Math.abs(V.y-Z.y),j=U<1&&B>=1,P=B<1&&U>=1,G=!j&&!P&&U<B,q=!j&&!P&&B<U;if(j){let _=V.x>Z.x?J.cx+J.hw:J.cx-J.hw;Q[0]={x:_,y:J.cy},Q[1]={...Q[1],y:J.cy}}else if(P){let _=V.y>Z.y?J.cy+J.hh:J.cy-J.hh;Q[0]={x:J.cx,y:_},Q[1]={...Q[1],x:J.cx}}else if(G){let _=V.x>Z.x?J.cx+J.hw:J.cx-J.hw;if(V.y>=J.cy-J.hh&&V.y<=J.cy+J.hh)Q[0]={x:_,y:V.y};else Q[0]={x:_,y:J.cy},Q[1]={...Q[1],y:J.cy}}else if(q){let _=V.y>Z.y?J.cy+J.hh:J.cy-J.hh;if(V.x>=J.cx-J.hw&&V.x<=J.cx+J.hw)Q[0]={x:V.x,y:_};else Q[0]={x:J.cx,y:_},Q[1]={...Q[1],x:J.cx}}}return Q}var F6=new Set(["circle","doublecircle","state-start","state-end"]),_6=new Set(["diamond","circle","doublecircle","state-start","state-end"]),r9={font:"Inter",padding:40,nodeSpacing:24,layerSpacing:40};function t9($,J,K){let Q=new J6.default.graphlib.Graph({directed:!0,compound:!0});Q.setGraph({rankdir:O7($.direction),acyclicer:"greedy",nodesep:K.nodeSpacing,ranksep:K.layerSpacing,marginx:16,marginy:12}),Q.setDefaultEdgeLabel(()=>({}));let Z=new Set;Z.add($.id),S6($,Z);for(let z of $.nodeIds){let _=J.nodes.get(z);if(_){let W=k6(z,_.label,_.shape);Q.setNode(z,{label:_.label,width:W.width,height:W.height})}}for(let z of $.children)w6(Q,z,J);let V=new Set;for(let z=0;z<J.edges.length;z++){let _=J.edges[z];if(Z.has(_.source)&&Z.has(_.target)){V.add(z);let W={_index:z};if(_.label)W.label=_.label,W.width=U4(_.label,r.edgeLabel,$4.edgeLabel)+8,W.height=r.edgeLabel+6,W.labelpos="c";Q.setEdge(_.source,_.target,W)}}J6.default.layout(Q);let B=$.direction==="TD"||$.direction==="TB"||$.direction==="BT",U=new Set;for(let z of $.children)b6(z,U);let j=[];for(let z of Q.nodes()){if(U.has(z))continue;let _=J.nodes.get(z);if(!_)continue;let W=Q.node(z);if(!W)continue;let F=E4(W.x,W.y,W.width,W.height);j.push({id:z,label:_.label,shape:_.shape,x:F.x,y:F.y,width:W.width,height:W.height,inlineStyle:D7(J,z)})}let P=Q.edges().map((z)=>{let _=Q.edge(z),W=J.edges[_._index],F=_.points??[];if(F.length>0){let A=J.nodes.get(z.v)?.shape;if(A==="diamond"){let T=Q.node(z.v);F[0]=e4(F[0],T.x,T.y,T.width/2,T.height/2)}else if(A&&F6.has(A)){let T=Q.node(z.v);F[0]=$6(F[0],T.x,T.y,Math.min(T.width,T.height)/2)}let D=J.nodes.get(z.w)?.shape;if(D==="diamond"){let T=Q.node(z.w),v=F.length-1;F[v]=e4(F[v],T.x,T.y,T.width/2,T.height/2)}else if(D&&F6.has(D)){let T=Q.node(z.w),v=F.length-1;F[v]=$6(F[v],T.x,T.y,Math.min(T.width,T.height)/2)}}let H=b4(F,B),M=J.nodes.get(z.v)?.shape,R=J.nodes.get(z.w)?.shape,Y=M&&!_6.has(M)||!M?(()=>{let A=Q.node(z.v);return A?{cx:A.x,cy:A.y,hw:A.width/2,hh:A.height/2}:null})():null,L=R&&!_6.has(R)||!R?(()=>{let A=Q.node(z.w);return A?{cx:A.x,cy:A.y,hw:A.width/2,hh:A.height/2}:null})():null,b=u4(H,Y,L),O;if(W.label&&_.x!=null&&_.y!=null)O={x:_.x,y:_.y};return{source:W.source,target:W.target,label:W.label,style:W.style,hasArrowStart:W.hasArrowStart,hasArrowEnd:W.hasArrowEnd,points:b,labelPosition:O}}),G=$.children.map((z)=>f6(Q,z)),q=Q.graph();return{id:$.id,label:$.label,width:q.width??200,height:q.height??100,nodes:j,edges:P,groups:G,nodeIds:Z,internalEdgeIndices:V}}async function R7($,J={}){let K={...r9,...J},Q=new Map;for(let G of $.subgraphs)if(G.direction&&G.direction!==$.direction)Q.set(G.id,t9(G,$,K));let Z=new J6.default.graphlib.Graph({directed:!0,compound:!0});Z.setGraph({rankdir:O7($.direction),acyclicer:"greedy",nodesep:K.nodeSpacing,ranksep:K.layerSpacing,marginx:K.padding,marginy:K.padding}),Z.setDefaultEdgeLabel(()=>({}));let V=new Set;for(let G of $.subgraphs)V.add(G.id),S6(G,V);for(let[G,q]of $.nodes)if(!V.has(G)){let z=k6(G,q.label,q.shape);Z.setNode(G,{label:q.label,width:z.width,height:z.height})}for(let G of $.subgraphs)if(Q.has(G.id)){let q=Q.get(G.id);Z.setNode(G.id,{width:q.width,height:q.height})}else w6(Z,G,$);let B=new Map,U=new Map;for(let G of $.subgraphs)if(!Q.has(G.id))A7(G,B,U);for(let[G,q]of Q)for(let z of q.nodeIds)B.set(z,G),U.set(z,G);let j=new Set;for(let G of Q.values())for(let q of G.internalEdgeIndices)j.add(q);let P=new Set;for(let G=0;G<$.edges.length;G++){if(j.has(G))continue;let q=$.edges[G],z=U.get(q.source)??q.source,_=B.get(q.target)??q.target,W={_index:G};if(q.label)W.label=q.label,W.width=U4(q.label,r.edgeLabel,$4.edgeLabel)+8,W.height=r.edgeLabel+6,W.labelpos="c";if(!P.has(_))W.weight=2,P.add(_);Z.setEdge(z,_,W)}try{J6.default.layout(Z)}catch(G){let q=G instanceof Error?G.message:String(G);throw Error(`Dagre layout failed: ${q}`)}return e9(Z,$,K.padding,Q)}function O7($){switch($){case"LR":return"LR";case"RL":return"RL";case"BT":return"BT";case"TD":case"TB":default:return"TB"}}function k6($,J,K){let Z=U4(J,r.nodeLabel,$4.nodeLabel)+v4.horizontal*2,V=r.nodeLabel+v4.vertical*2;if(K==="diamond"){let B=Math.max(Z,V)+v4.diamondExtra;Z=B,V=B}if(K==="circle"||K==="doublecircle"){let B=Math.ceil(Math.sqrt(Z*Z+V*V))+8;Z=K==="doublecircle"?B+12:B,V=Z}if(K==="hexagon")Z+=v4.horizontal;if(K==="trapezoid"||K==="trapezoid-alt")Z+=v4.horizontal;if(K==="asymmetric")Z+=12;if(K==="cylinder")V+=14;if(K==="state-start"||K==="state-end")Z=28,V=28;return Z=Math.max(Z,60),V=Math.max(V,36),{width:Z,height:V}}function w6($,J,K,Q){if($.setNode(J.id,{label:J.label}),Q)$.setParent(J.id,Q);for(let Z of J.nodeIds){let V=K.nodes.get(Z);if(V){let B=k6(Z,V.label,V.shape);$.setNode(Z,{label:V.label,width:B.width,height:B.height}),$.setParent(Z,J.id)}}for(let Z of J.children)w6($,Z,K,J.id)}function A7($,J,K){for(let B of $.children)A7(B,J,K);let Q=[...$.nodeIds,...$.children.map((B)=>B.id)];if(Q.length===0){J.set($.id,$.id),K.set($.id,$.id);return}let Z=Q[0],V=Q[Q.length-1];J.set($.id,J.get(Z)??Z),K.set($.id,K.get(V)??V)}function D7($,J){let K=$.classAssignments.get(J),Q=K?$.classDefs.get(K):void 0,Z=$.nodeStyles.get(J);if(!Q&&!Z)return;return{...Q,...Z}}function S6($,J){for(let K of $.nodeIds)J.add(K);for(let K of $.children)S6(K,J)}function e9($,J,K,Q){let Z=[],V=[],B=new Set;for(let M of J.subgraphs)b6(M,B);let U=new Set;if(Q)for(let M of Q.values())for(let R of M.nodeIds)U.add(R);for(let M of $.nodes()){if(B.has(M))continue;let R=J.nodes.get(M);if(!R)continue;let Y=$.node(M);if(!Y)continue;let L=E4(Y.x,Y.y,Y.width,Y.height);Z.push({id:M,label:R.label,shape:R.shape,x:L.x,y:L.y,width:Y.width,height:Y.height,inlineStyle:D7(J,M)})}for(let M of J.subgraphs)V.push(f6($,M));let j=J.direction==="TD"||J.direction==="TB"||J.direction==="BT",P=$.edges().map((M)=>{let R=$.edge(M),Y=J.edges[R._index],L=R.points??[];if(L.length>0){let y=J.nodes.get(M.v)?.shape;if(y==="diamond"){let X=$.node(M.v);L[0]=e4(L[0],X.x,X.y,X.width/2,X.height/2)}else if(y&&F6.has(y)){let X=$.node(M.v);L[0]=$6(L[0],X.x,X.y,Math.min(X.width,X.height)/2)}let f=J.nodes.get(M.w)?.shape;if(f==="diamond"){let X=$.node(M.w),N=L.length-1;L[N]=e4(L[N],X.x,X.y,X.width/2,X.height/2)}else if(f&&F6.has(f)){let X=$.node(M.w),N=L.length-1;L[N]=$6(L[N],X.x,X.y,Math.min(X.width,X.height)/2)}}let b=b4(L,j),O=J.nodes.get(M.v)?.shape,A=J.nodes.get(M.w)?.shape,D=O&&!_6.has(O)||!O?(()=>{let y=$.node(M.v);return y?{cx:y.x,cy:y.y,hw:y.width/2,hh:y.height/2}:null})():null,T=A&&!_6.has(A)||!A?(()=>{let y=$.node(M.w);return y?{cx:y.x,cy:y.y,hw:y.width/2,hh:y.height/2}:null})():null,v=u4(b,D,T),u;if(Y.label&&R.x!=null&&R.y!=null)u={x:R.x,y:R.y};return{source:Y.source,target:Y.target,label:Y.label,style:Y.style,hasArrowStart:Y.hasArrowStart,hasArrowEnd:Y.hasArrowEnd,points:v,labelPosition:u}});if(Q&&Q.size>0){let M=new Map;for(let R of Z)M.set(R.id,{cx:R.x+R.width/2,cy:R.y+R.height/2});for(let[R,Y]of Q){let L=$.node(R);if(!L)continue;let b=E4(L.x,L.y,L.width,L.height);for(let A of Y.nodes){let D={...A,x:A.x+b.x,y:A.y+b.y};Z.push(D),M.set(D.id,{cx:D.x+D.width/2,cy:D.y+D.height/2})}for(let A of Y.edges)P.push({...A,points:A.points.map((D)=>({x:D.x+b.x,y:D.y+b.y})),labelPosition:A.labelPosition?{x:A.labelPosition.x+b.x,y:A.labelPosition.y+b.y}:void 0});let O=I7(V,R);if(O&&Y.groups.length>0)O.children=Y.groups.map((A)=>C7(A,b.x,b.y))}for(let R of P){if(U.has(R.source)&&U.has(R.target))continue;let Y=!1;if(U.has(R.source)){let L=M.get(R.source);if(L&&R.points.length>0)R.points[0]={x:L.cx,y:L.cy},Y=!0}if(U.has(R.target)){let L=M.get(R.target);if(L&&R.points.length>0)R.points[R.points.length-1]={x:L.cx,y:L.cy},Y=!0}if(Y)R.points=b4(R.points,j)}}let G=r.groupHeader+16;$$(V,G);let q=X7(V),z=[...Z.map((M)=>M.y),...q.map((M)=>M.y)],_=z.length>0?Math.min(...z):K,W=$.graph().width??800,F=$.graph().height??600;if(_<K){let M=K-_;for(let R of Z)R.y+=M;for(let R of P){for(let Y of R.points)Y.y+=M;if(R.labelPosition)R.labelPosition.y+=M}for(let R of q)R.y+=M;F+=M}let H=Math.max(...Z.map((M)=>M.y+M.height),...q.map((M)=>M.y+M.height),...P.flatMap((M)=>M.points.map((R)=>R.y)));if(H+K>F)F=H+K;return{width:W,height:F,nodes:Z,edges:P,groups:V}}function f6($,J){let K=$.node(J.id),Q=K?E4(K.x,K.y,K.width,K.height):{x:0,y:0};return{id:J.id,label:J.label,x:Q.x,y:Q.y,width:K?.width??0,height:K?.height??0,children:J.children.map((Z)=>f6($,Z))}}function $$($,J){for(let K of $)Y7(K,J)}function Y7($,J){for(let K of $.children)Y7(K,J);if($.children.length>0){let K=$.y,Q=$.y+$.height;for(let Z of $.children)K=Math.min(K,Z.y),Q=Math.max(Q,Z.y+Z.height);$.height=Q-K,$.y=K}if($.label){let K=J+H7;$.y-=K,$.height+=K}}function X7($){let J=[];for(let K of $)J.push(K),J.push(...X7(K.children));return J}function I7($,J){for(let K of $){if(K.id===J)return K;let Q=I7(K.children,J);if(Q)return Q}return}function C7($,J,K){return{...$,x:$.x+J,y:$.y+K,children:$.children.map((Q)=>C7(Q,J,K))}}function b6($,J){J.add($.id);for(let K of $.children)b6(K,J)}function N7($,J,K="Inter",Q=!1){let Z=[];Z.push(Y4($.width,$.height,J,Q)),Z.push(D4(K,!1)),Z.push("<defs>"),Z.push(J$()),Z.push("</defs>");for(let V of $.groups)Z.push(E7(V,K));for(let V of $.edges)Z.push(Q$(V));for(let V of $.edges)if(V.label)Z.push(Z$(V,K));for(let V of $.nodes)Z.push(V$(V));for(let V of $.nodes)Z.push(D$(V,K));return Z.push("</svg>"),Z.join(`
|
||
`)}function J$(){let $=g4.width,J=g4.height;return` <marker id="arrowhead" markerWidth="${$}" markerHeight="${J}" refX="${$}" refY="${J/2}" orient="auto">
|
||
<polygon points="0 0, ${$} ${J/2}, 0 ${J}" fill="var(--_arrow)" />
|
||
</marker>
|
||
<marker id="arrowhead-start" markerWidth="${$}" markerHeight="${J}" refX="0" refY="${J/2}" orient="auto-start-reverse">
|
||
<polygon points="${$} 0, 0 ${J/2}, ${$} ${J}" fill="var(--_arrow)" />
|
||
</marker>`}function E7($,J){let K=r.groupHeader+16,Q=[];Q.push(`<rect x="${$.x}" y="${$.y}" width="${$.width}" height="${$.height}" rx="0" ry="0" fill="var(--_group-fill)" stroke="var(--_node-stroke)" stroke-width="${V4.outerBox}" />`),Q.push(`<rect x="${$.x}" y="${$.y}" width="${$.width}" height="${K}" rx="0" ry="0" fill="var(--_group-hdr)" stroke="var(--_node-stroke)" stroke-width="${V4.outerBox}" />`),Q.push(`<text x="${$.x+12}" y="${$.y+K/2}" dy="${z4}" font-size="${r.groupHeader}" font-weight="${$4.groupHeader}" fill="var(--_text-sec)">${m4($.label)}</text>`);for(let Z of $.children)Q.push(E7(Z,J));return Q.join(`
|
||
`)}function Q$($){if($.points.length<2)return"";let J=K$($.points),K=$.style==="dotted"?' stroke-dasharray="4 4"':"",Q=$.style==="thick"?V4.connector*2:V4.connector,Z="";if($.hasArrowEnd)Z+=' marker-end="url(#arrowhead)"';if($.hasArrowStart)Z+=' marker-start="url(#arrowhead-start)"';return`<polyline points="${J}" fill="none" stroke="var(--_line)" stroke-width="${Q}"${K}${Z} />`}function K$($){return $.map((J)=>`${J.x},${J.y}`).join(" ")}function Z$($,J){let K=$.labelPosition??U$($.points),Q=$.label,Z=U4(Q,r.edgeLabel,$4.edgeLabel),V=8,B=Z+16,U=r.edgeLabel+16;return`<rect x="${K.x-B/2}" y="${K.y-U/2}" width="${B}" height="${U}" rx="4" ry="4" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="0.5" />
|
||
<text x="${K.x}" y="${K.y}" text-anchor="middle" dy="${z4}" font-size="${r.edgeLabel}" font-weight="${$4.edgeLabel}" fill="var(--_text-muted)">${m4(Q)}</text>`}function U$($){if($.length===0)return{x:0,y:0};if($.length===1)return $[0];let J=0;for(let Q=1;Q<$.length;Q++)J+=L7($[Q-1],$[Q]);let K=J/2;for(let Q=1;Q<$.length;Q++){let Z=L7($[Q-1],$[Q]);if(K<=Z){let V=K/Z;return{x:$[Q-1].x+V*($[Q].x-$[Q-1].x),y:$[Q-1].y+V*($[Q].y-$[Q-1].y)}}K-=Z}return $[$.length-1]}function L7($,J){return Math.sqrt((J.x-$.x)**2+(J.y-$.y)**2)}function V$($){let{x:J,y:K,width:Q,height:Z,shape:V,inlineStyle:B}=$,U=m4(B?.fill??"var(--_node-fill)"),j=m4(B?.stroke??"var(--_node-stroke)"),P=m4(B?.["stroke-width"]??String(V4.innerBox));switch(V){case"diamond":return P$(J,K,Q,Z,U,j,P);case"rounded":return j$(J,K,Q,Z,U,j,P);case"stadium":return B$(J,K,Q,Z,U,j,P);case"circle":return G$(J,K,Q,Z,U,j,P);case"subroutine":return F$(J,K,Q,Z,U,j,P);case"doublecircle":return _$(J,K,Q,Z,U,j,P);case"hexagon":return q$(J,K,Q,Z,U,j,P);case"cylinder":return W$(J,K,Q,Z,U,j,P);case"asymmetric":return M$(J,K,Q,Z,U,j,P);case"trapezoid":return H$(J,K,Q,Z,U,j,P);case"trapezoid-alt":return R$(J,K,Q,Z,U,j,P);case"state-start":return O$(J,K,Q,Z);case"state-end":return A$(J,K,Q,Z);case"rectangle":default:return z$(J,K,Q,Z,U,j,P)}}function z$($,J,K,Q,Z,V,B){return`<rect x="${$}" y="${J}" width="${K}" height="${Q}" rx="0" ry="0" fill="${Z}" stroke="${V}" stroke-width="${B}" />`}function j$($,J,K,Q,Z,V,B){return`<rect x="${$}" y="${J}" width="${K}" height="${Q}" rx="6" ry="6" fill="${Z}" stroke="${V}" stroke-width="${B}" />`}function B$($,J,K,Q,Z,V,B){let U=Q/2;return`<rect x="${$}" y="${J}" width="${K}" height="${Q}" rx="${U}" ry="${U}" fill="${Z}" stroke="${V}" stroke-width="${B}" />`}function G$($,J,K,Q,Z,V,B){let U=$+K/2,j=J+Q/2,P=Math.min(K,Q)/2;return`<circle cx="${U}" cy="${j}" r="${P}" fill="${Z}" stroke="${V}" stroke-width="${B}" />`}function P$($,J,K,Q,Z,V,B){let U=$+K/2,j=J+Q/2,P=K/2,G=Q/2;return`<polygon points="${[`${U},${j-G}`,`${U+P},${j}`,`${U},${j+G}`,`${U-P},${j}`].join(" ")}" fill="${Z}" stroke="${V}" stroke-width="${B}" />`}function F$($,J,K,Q,Z,V,B){return`<rect x="${$}" y="${J}" width="${K}" height="${Q}" rx="0" ry="0" fill="${Z}" stroke="${V}" stroke-width="${B}" />
|
||
<line x1="${$+8}" y1="${J}" x2="${$+8}" y2="${J+Q}" stroke="${V}" stroke-width="${B}" />
|
||
<line x1="${$+K-8}" y1="${J}" x2="${$+K-8}" y2="${J+Q}" stroke="${V}" stroke-width="${B}" />`}function _$($,J,K,Q,Z,V,B){let U=$+K/2,j=J+Q/2,P=Math.min(K,Q)/2,G=P-5;return`<circle cx="${U}" cy="${j}" r="${P}" fill="${Z}" stroke="${V}" stroke-width="${B}" />
|
||
<circle cx="${U}" cy="${j}" r="${G}" fill="${Z}" stroke="${V}" stroke-width="${B}" />`}function q$($,J,K,Q,Z,V,B){let U=Q/4;return`<polygon points="${[`${$+U},${J}`,`${$+K-U},${J}`,`${$+K},${J+Q/2}`,`${$+K-U},${J+Q}`,`${$+U},${J+Q}`,`${$},${J+Q/2}`].join(" ")}" fill="${Z}" stroke="${V}" stroke-width="${B}" />`}function W$($,J,K,Q,Z,V,B){let j=$+K/2,P=J+7,G=Q-14;return`<rect x="${$}" y="${P}" width="${K}" height="${G}" fill="${Z}" stroke="none" />
|
||
<line x1="${$}" y1="${P}" x2="${$}" y2="${P+G}" stroke="${V}" stroke-width="${B}" />
|
||
<line x1="${$+K}" y1="${P}" x2="${$+K}" y2="${P+G}" stroke="${V}" stroke-width="${B}" />
|
||
<ellipse cx="${j}" cy="${J+Q-7}" rx="${K/2}" ry="7" fill="${Z}" stroke="${V}" stroke-width="${B}" />
|
||
<ellipse cx="${j}" cy="${P}" rx="${K/2}" ry="7" fill="${Z}" stroke="${V}" stroke-width="${B}" />`}function M$($,J,K,Q,Z,V,B){return`<polygon points="${[`${$+12},${J}`,`${$+K},${J}`,`${$+K},${J+Q}`,`${$+12},${J+Q}`,`${$},${J+Q/2}`].join(" ")}" fill="${Z}" stroke="${V}" stroke-width="${B}" />`}function H$($,J,K,Q,Z,V,B){let U=K*0.15;return`<polygon points="${[`${$+U},${J}`,`${$+K-U},${J}`,`${$+K},${J+Q}`,`${$},${J+Q}`].join(" ")}" fill="${Z}" stroke="${V}" stroke-width="${B}" />`}function R$($,J,K,Q,Z,V,B){let U=K*0.15;return`<polygon points="${[`${$},${J}`,`${$+K},${J}`,`${$+K-U},${J+Q}`,`${$+U},${J+Q}`].join(" ")}" fill="${Z}" stroke="${V}" stroke-width="${B}" />`}function O$($,J,K,Q){let Z=$+K/2,V=J+Q/2,B=Math.min(K,Q)/2-2;return`<circle cx="${Z}" cy="${V}" r="${B}" fill="var(--_text)" stroke="none" />`}function A$($,J,K,Q){let Z=$+K/2,V=J+Q/2,B=Math.min(K,Q)/2-2,U=B-4;return`<circle cx="${Z}" cy="${V}" r="${B}" fill="none" stroke="var(--_text)" stroke-width="${V4.innerBox*2}" />
|
||
<circle cx="${Z}" cy="${V}" r="${U}" fill="var(--_text)" stroke="none" />`}function D$($,J){if($.shape==="state-start"||$.shape==="state-end"){if(!$.label)return""}let K=$.x+$.width/2,Q=$.y+$.height/2,Z=m4($.inlineStyle?.color??"var(--_text)");return`<text x="${K}" y="${Q}" text-anchor="middle" dy="${z4}" font-size="${r.nodeLabel}" font-weight="${$4.nodeLabel}" fill="${Z}">${m4($.label)}</text>`}function m4($){return $.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}var Q4={padding:30,actorGap:140,actorHeight:40,actorPadX:16,headerGap:20,messageRowHeight:40,selfMessageHeight:30,activationWidth:10,blockPadX:10,blockPadTop:40,blockPadBottom:8,blockHeaderExtra:28,dividerExtra:24,noteWidth:120,notePadding:8,noteGap:10};function T7($,J={}){if($.actors.length===0)return{width:0,height:0,actors:[],lifelines:[],messages:[],activations:[],blocks:[],notes:[]};let K=$.actors.map((O)=>{let A=U4(O.label,r.nodeLabel,$4.nodeLabel);return Math.max(A+Q4.actorPadX*2,80)}),Q=[],Z=Q4.padding+K[0]/2;for(let O=0;O<$.actors.length;O++){if(O>0){let A=Math.max(Q4.actorGap,(K[O-1]+K[O])/2+40);Z+=A}Q.push(Z)}let V=new Map;for(let O=0;O<$.actors.length;O++)V.set($.actors[O].id,O);let B=Q4.padding,U=$.actors.map((O,A)=>({id:O.id,label:O.label,type:O.type,x:Q[A],y:B,width:K[A],height:Q4.actorHeight})),j=B+Q4.actorHeight+Q4.headerGap,P=[],G=new Map;for(let O of $.blocks){let A=G.get(O.startIndex)??0;G.set(O.startIndex,Math.max(A,Q4.blockHeaderExtra));for(let D of O.dividers){let T=G.get(D.index)??0;G.set(D.index,Math.max(T,Q4.dividerExtra))}}let q=new Map,z=[];for(let O=0;O<$.messages.length;O++){let A=$.messages[O],D=V.get(A.from)??0,T=V.get(A.to)??0,v=A.from===A.to,u=G.get(O)??0;if(u>0)j+=u;let y=Q[D],f=Q[T];if(P.push({from:A.from,to:A.to,label:A.label,lineStyle:A.lineStyle,arrowHead:A.arrowHead,x1:y,x2:f,y:j,isSelf:v}),A.activate){if(!q.has(A.to))q.set(A.to,[]);q.get(A.to).push(j)}if(A.deactivate){let X=q.get(A.from);if(X&&X.length>0){let N=X.pop(),S=V.get(A.from)??0;z.push({actorId:A.from,x:Q[S]-Q4.activationWidth/2,topY:N,bottomY:j,width:Q4.activationWidth})}}j+=v?Q4.selfMessageHeight+Q4.messageRowHeight:Q4.messageRowHeight}for(let[O,A]of q)for(let D of A){let T=V.get(O)??0;z.push({actorId:O,x:Q[T]-Q4.activationWidth/2,topY:D,bottomY:j-Q4.messageRowHeight/2,width:Q4.activationWidth})}let _=$.blocks.map((O)=>{let A=P[O.startIndex],D=P[O.endIndex],T=(A?.y??j)-Q4.blockPadTop,v=(D?.y??j)+Q4.blockPadBottom+12,u=new Set;for(let w=O.startIndex;w<=O.endIndex;w++){let I=$.messages[w];if(I)u.add(V.get(I.from)??0),u.add(V.get(I.to)??0)}if(u.size===0)for(let w=0;w<$.actors.length;w++)u.add(w);let y=Math.min(...u),f=Math.max(...u),X=Q[y]-K[y]/2-Q4.blockPadX,N=Q[f]+K[f]/2+Q4.blockPadX,S=O.dividers.map((w)=>{let I=P[w.index],d=I?.y??j,s=28;if(w.label&&I?.label){let C=`[${w.label}]`,c=U4(C,r.edgeLabel,$4.edgeLabel),l=X+8,p=l+c,h=U4(I.label,r.edgeLabel,$4.edgeLabel),m=I.isSelf?I.x1+36:(I.x1+I.x2)/2-h/2,g=m+h;if(p>m&&l<g)s=36}return{y:d-s,label:w.label}});return{type:O.type,label:O.label,x:X,y:T,width:N-X,height:v-T,dividers:S}}),W=$.notes.map((O)=>{let A=Math.max(Q4.noteWidth,U4(O.text,r.edgeLabel,$4.edgeLabel)+Q4.notePadding*2),D=r.edgeLabel+Q4.notePadding*2,v=(P[O.afterIndex]?.y??B+Q4.actorHeight)+4,u=V.get(O.actorIds[0]??"")??0,y;if(O.position==="left")y=Q[u]-K[u]/2-A-Q4.noteGap;else if(O.position==="right")y=Q[u]+K[u]/2+Q4.noteGap;else if(O.actorIds.length>1){let f=V.get(O.actorIds[O.actorIds.length-1]??"")??u;y=(Q[u]+Q[f])/2-A/2}else y=Q[u]-A/2;return{text:O.text,x:y,y:v,width:A,height:D}}),F=j+Q4.padding,H=Q4.padding,M=0;for(let O of U)H=Math.min(H,O.x-O.width/2),M=Math.max(M,O.x+O.width/2);for(let O of _)H=Math.min(H,O.x),M=Math.max(M,O.x+O.width);for(let O of W)H=Math.min(H,O.x),M=Math.max(M,O.x+O.width);let R=H<Q4.padding?Q4.padding-H:0;if(R>0){for(let O of U)O.x+=R;for(let O of P)O.x1+=R,O.x2+=R;for(let O of z)O.x+=R;for(let O of _)O.x+=R;for(let O of W)O.x+=R;for(let O=0;O<Q.length;O++)Q[O]+=R}let Y=$.actors.map((O,A)=>({actorId:O.id,x:Q[A],topY:B+Q4.actorHeight,bottomY:F-Q4.padding})),L=M+R+Q4.padding,b=F;return{width:Math.max(L,200),height:Math.max(b,100),actors:U,lifelines:Y,messages:P,activations:z,blocks:_,notes:W}}function k7($,J,K="Inter",Q=!1){let Z=[];Z.push(Y4($.width,$.height,J,Q)),Z.push(D4(K,!1)),Z.push("<defs>"),Z.push(Y$()),Z.push("</defs>");for(let V of $.blocks)Z.push(N$(V));for(let V of $.lifelines)Z.push(I$(V));for(let V of $.activations)Z.push(C$(V));for(let V of $.messages)Z.push(L$(V));for(let V of $.notes)Z.push(E$(V));for(let V of $.actors)Z.push(X$(V));return Z.push("</svg>"),Z.join(`
|
||
`)}function Y$(){let $=g4.width,J=g4.height;return` <marker id="seq-arrow" markerWidth="${$}" markerHeight="${J}" refX="${$}" refY="${J/2}" orient="auto-start-reverse">
|
||
<polygon points="0 0, ${$} ${J/2}, 0 ${J}" fill="var(--_arrow)" />
|
||
</marker>
|
||
<marker id="seq-arrow-open" markerWidth="${$}" markerHeight="${J}" refX="${$}" refY="${J/2}" orient="auto-start-reverse">
|
||
<polyline points="0 0, ${$} ${J/2}, 0 ${J}" fill="none" stroke="var(--_arrow)" stroke-width="1" />
|
||
</marker>`}function X$($){let{x:J,y:K,width:Q,height:Z,label:V,type:B}=$;if(B==="actor"){let j=Z/24*0.9,P=J-12*j,G=K+(Z-24*j)/2,q=V4.outerBox/j,z="var(--_line)";return`<g transform="translate(${P},${G}) scale(${j})">
|
||
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" fill="none" stroke="var(--_line)" stroke-width="${q}" />
|
||
<path d="M15 10C15 11.6569 13.6569 13 12 13C10.3431 13 9 11.6569 9 10C9 8.34315 10.3431 7 12 7C13.6569 7 15 8.34315 15 10Z" fill="none" stroke="var(--_line)" stroke-width="${q}" />
|
||
<path d="M5.62842 18.3563C7.08963 17.0398 9.39997 16 12 16C14.6 16 16.9104 17.0398 18.3716 18.3563" fill="none" stroke="var(--_line)" stroke-width="${q}" />
|
||
</g>
|
||
<text x="${J}" y="${K+Z+14}" text-anchor="middle" font-size="${r.nodeLabel}" font-weight="${$4.nodeLabel}" fill="var(--_text)">${h4(V)}</text>`}return`<rect x="${J-Q/2}" y="${K}" width="${Q}" height="${Z}" rx="4" ry="4" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="${V4.outerBox}" />
|
||
<text x="${J}" y="${K+Z/2}" text-anchor="middle" dy="${z4}" font-size="${r.nodeLabel}" font-weight="${$4.nodeLabel}" fill="var(--_text)">${h4(V)}</text>`}function I$($){return`<line x1="${$.x}" y1="${$.topY}" x2="${$.x}" y2="${$.bottomY}" stroke="var(--_line)" stroke-width="0.75" stroke-dasharray="6 4" />`}function C$($){return`<rect x="${$.x}" y="${$.topY}" width="${$.width}" height="${$.bottomY-$.topY}" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="${V4.innerBox}" />`}function L$($){let J=[],K=$.lineStyle==="dashed"?' stroke-dasharray="6 4"':"",Q=$.arrowHead==="filled"?"seq-arrow":"seq-arrow-open";if($.isSelf)J.push(`<polyline points="${$.x1},${$.y} ${$.x1+30},${$.y} ${$.x1+30},${$.y+20} ${$.x2},${$.y+20}" fill="none" stroke="var(--_line)" stroke-width="${V4.connector}"${K} marker-end="url(#${Q})" />`),J.push(`<text x="${$.x1+30+6}" y="${$.y+10}" dy="${z4}" font-size="${r.edgeLabel}" font-weight="${$4.edgeLabel}" fill="var(--_text-muted)">${h4($.label)}</text>`);else{J.push(`<line x1="${$.x1}" y1="${$.y}" x2="${$.x2}" y2="${$.y}" stroke="var(--_line)" stroke-width="${V4.connector}"${K} marker-end="url(#${Q})" />`);let Z=($.x1+$.x2)/2;J.push(`<text x="${Z}" y="${$.y-6}" text-anchor="middle" font-size="${r.edgeLabel}" font-weight="${$4.edgeLabel}" fill="var(--_text-muted)">${h4($.label)}</text>`)}return J.join(`
|
||
`)}function N$($){let J=[];J.push(`<rect x="${$.x}" y="${$.y}" width="${$.width}" height="${$.height}" rx="0" ry="0" fill="none" stroke="var(--_node-stroke)" stroke-width="${V4.outerBox}" />`);let K=`${$.type}${$.label?` [${$.label}]`:""}`,Q=U4(K,r.edgeLabel,$4.groupHeader)+16,Z=18;J.push(`<rect x="${$.x}" y="${$.y}" width="${Q}" height="${Z}" fill="var(--_group-hdr)" stroke="var(--_node-stroke)" stroke-width="${V4.outerBox}" />`),J.push(`<text x="${$.x+6}" y="${$.y+Z/2}" dy="${z4}" font-size="${r.edgeLabel}" font-weight="${$4.groupHeader}" fill="var(--_text-sec)">${h4(K)}</text>`);for(let V of $.dividers)if(J.push(`<line x1="${$.x}" y1="${V.y}" x2="${$.x+$.width}" y2="${V.y}" stroke="var(--_line)" stroke-width="0.75" stroke-dasharray="6 4" />`),V.label)J.push(`<text x="${$.x+8}" y="${V.y+14}" font-size="${r.edgeLabel}" font-weight="${$4.edgeLabel}" fill="var(--_text-muted)">[${h4(V.label)}]</text>`);return J.join(`
|
||
`)}function E$($){return`<rect x="${$.x}" y="${$.y}" width="${$.width}" height="${$.height}" fill="var(--_group-hdr)" stroke="var(--_node-stroke)" stroke-width="${V4.innerBox}" />
|
||
<polygon points="${$.x+$.width-6},${$.y} ${$.x+$.width},${$.y+6} ${$.x+$.width-6},${$.y+6}" fill="var(--_inner-stroke)" />
|
||
<text x="${$.x+$.width/2}" y="${$.y+$.height/2}" text-anchor="middle" dy="${z4}" font-size="${r.edgeLabel}" font-weight="${$4.edgeLabel}" fill="var(--_text-muted)">${h4($.text)}</text>`}function h4($){return $.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}var y6=H6(G6(),1);var P4={padding:40,boxPadX:8,headerBaseHeight:32,annotationHeight:16,memberRowHeight:20,sectionPadY:8,emptySectionHeight:8,minWidth:120,memberFontSize:11,memberFontWeight:400,nodeSpacing:40,layerSpacing:60};async function S7($,J={}){if($.classes.length===0)return{width:0,height:0,classes:[],relationships:[]};let K=new Map;for(let U of $.classes){let j=U.annotation?P4.headerBaseHeight+P4.annotationHeight:P4.headerBaseHeight,P=U.attributes.length>0?U.attributes.length*P4.memberRowHeight+P4.sectionPadY:P4.emptySectionHeight,G=U.methods.length>0?U.methods.length*P4.memberRowHeight+P4.sectionPadY:P4.emptySectionHeight,q=U4(U.label,r.nodeLabel,$4.nodeLabel),z=w7(U.attributes),_=w7(U.methods),W=Math.max(P4.minWidth,q+P4.boxPadX*2,z+P4.boxPadX*2,_+P4.boxPadX*2),F=j+P+G;K.set(U.id,{width:W,height:F,headerHeight:j,attrHeight:P,methodHeight:G})}let Q=new y6.default.graphlib.Graph({directed:!0});Q.setGraph({rankdir:"TB",acyclicer:"greedy",nodesep:P4.nodeSpacing,ranksep:P4.layerSpacing,marginx:P4.padding,marginy:P4.padding}),Q.setDefaultEdgeLabel(()=>({}));for(let U of $.classes){let j=K.get(U.id);Q.setNode(U.id,{width:j.width,height:j.height})}for(let U=0;U<$.relationships.length;U++){let j=$.relationships[U],P={_index:U};if(j.label)P.label=j.label,P.width=U4(j.label,r.edgeLabel,$4.edgeLabel)+8,P.height=r.edgeLabel+6,P.labelpos="c";Q.setEdge(j.from,j.to,P)}try{y6.default.layout(Q)}catch(U){let j=U instanceof Error?U.message:String(U);throw Error(`Dagre layout failed (class diagram): ${j}`)}let Z=new Map;for(let U of $.classes)Z.set(U.id,U);let V=$.classes.map((U)=>{let j=Q.node(U.id),P=K.get(U.id),G=E4(j.x,j.y,j.width,j.height);return{id:U.id,label:U.label,annotation:U.annotation,attributes:U.attributes,methods:U.methods,x:G.x,y:G.y,width:j.width??P.width,height:j.height??P.height,headerHeight:P.headerHeight,attrHeight:P.attrHeight,methodHeight:P.methodHeight}}),B=Q.edges().map((U)=>{let j=Q.edge(U),P=$.relationships[j._index],G=j.points??[],q=b4(G,!0),z=Q.node(U.v),_=Q.node(U.w),W=u4(q,z?{cx:z.x,cy:z.y,hw:z.width/2,hh:z.height/2}:null,_?{cx:_.x,cy:_.y,hw:_.width/2,hh:_.height/2}:null),F;if(P.label&&j.x!=null&&j.y!=null)F={x:j.x,y:j.y};return{from:P.from,to:P.to,type:P.type,markerAt:P.markerAt,label:P.label,fromCardinality:P.fromCardinality,toCardinality:P.toCardinality,points:W,labelPosition:F}});return{width:Q.graph().width??600,height:Q.graph().height??400,classes:V,relationships:B}}function w7($){if($.length===0)return 0;let J=0;for(let K of $){let Q=T$(K),Z=P6(Q,P4.memberFontSize);if(Z>J)J=Z}return J}function T$($){let J=$.visibility?`${$.visibility} `:"",K=$.type?`: ${$.type}`:"";return`${J}${$.name}${K}`}var q6={memberSize:11,memberWeight:400,annotationSize:10,annotationWeight:500};function y7($,J,K="Inter",Q=!1){let Z=[];Z.push(Y4($.width,$.height,J,Q)),Z.push(D4(K,!0)),Z.push("<defs>"),Z.push(k$()),Z.push("</defs>");for(let V of $.relationships)Z.push(S$(V));for(let V of $.classes)Z.push(w$(V));for(let V of $.relationships)Z.push(y$(V));return Z.push("</svg>"),Z.join(`
|
||
`)}function k$(){return` <marker id="cls-inherit" markerWidth="12" markerHeight="10" refX="12" refY="5" orient="auto-start-reverse">
|
||
<polygon points="0 0, 12 5, 0 10" fill="var(--bg)" stroke="var(--_arrow)" stroke-width="1.5" />
|
||
</marker>
|
||
<marker id="cls-composition" markerWidth="12" markerHeight="10" refX="0" refY="5" orient="auto-start-reverse">
|
||
<polygon points="6 0, 12 5, 6 10, 0 5" fill="var(--_arrow)" stroke="var(--_arrow)" stroke-width="1" />
|
||
</marker>
|
||
<marker id="cls-aggregation" markerWidth="12" markerHeight="10" refX="0" refY="5" orient="auto-start-reverse">
|
||
<polygon points="6 0, 12 5, 6 10, 0 5" fill="var(--bg)" stroke="var(--_arrow)" stroke-width="1.5" />
|
||
</marker>
|
||
<marker id="cls-arrow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto-start-reverse">
|
||
<polyline points="0 0, 8 3, 0 6" fill="none" stroke="var(--_arrow)" stroke-width="1.5" />
|
||
</marker>`}function w$($){let{x:J,y:K,width:Q,height:Z,headerHeight:V,attrHeight:B,methodHeight:U}=$,j=[];j.push(`<rect x="${J}" y="${K}" width="${Q}" height="${Z}" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="${V4.outerBox}" />`),j.push(`<rect x="${J}" y="${K}" width="${Q}" height="${V}" rx="0" ry="0" fill="var(--_group-hdr)" stroke="var(--_node-stroke)" stroke-width="${V4.outerBox}" />`);let P=K+V/2;if($.annotation){let _=K+12;j.push(`<text x="${J+Q/2}" y="${_}" text-anchor="middle" dy="${z4}" font-size="${q6.annotationSize}" font-weight="${q6.annotationWeight}" font-style="italic" fill="var(--_text-muted)"><<${y4($.annotation)}>></text>`),P=K+V/2+6}j.push(`<text x="${J+Q/2}" y="${P}" text-anchor="middle" dy="${z4}" font-size="${r.nodeLabel}" font-weight="700" fill="var(--_text)">${y4($.label)}</text>`);let G=K+V;j.push(`<line x1="${J}" y1="${G}" x2="${J+Q}" y2="${G}" stroke="var(--_node-stroke)" stroke-width="${V4.innerBox}" />`);let q=20;for(let _=0;_<$.attributes.length;_++){let W=$.attributes[_],F=G+4+_*q+q/2;j.push(f7(W,J+P4.boxPadX,F))}let z=G+B;j.push(`<line x1="${J}" y1="${z}" x2="${J+Q}" y2="${z}" stroke="var(--_node-stroke)" stroke-width="${V4.innerBox}" />`);for(let _=0;_<$.methods.length;_++){let W=$.methods[_],F=z+4+_*q+q/2;j.push(f7(W,J+P4.boxPadX,F))}return j.join(`
|
||
`)}function f7($,J,K){let Q=$.isAbstract?' font-style="italic"':"",Z=$.isStatic?' text-decoration="underline"':"",V=[];if($.visibility)V.push(`<tspan fill="var(--_text-faint)">${y4($.visibility)} </tspan>`);if(V.push(`<tspan fill="var(--_text-sec)">${y4($.name)}</tspan>`),$.type)V.push('<tspan fill="var(--_text-faint)">: </tspan>'),V.push(`<tspan fill="var(--_text-muted)">${y4($.type)}</tspan>`);return`<text x="${J}" y="${K}" class="mono" dy="${z4}" font-size="${q6.memberSize}" font-weight="${q6.memberWeight}"${Q}${Z}>${V.join("")}</text>`}function S$($){if($.points.length<2)return"";let J=$.points.map((V)=>`${V.x},${V.y}`).join(" "),Q=$.type==="dependency"||$.type==="realization"?' stroke-dasharray="6 4"':"",Z=f$($.type,$.markerAt);return`<polyline points="${J}" fill="none" stroke="var(--_line)" stroke-width="${V4.connector}"${Q}${Z} />`}function f$($,J){let K=b$($);if(!K)return"";if(J==="from")return` marker-start="url(#${K})"`;else return` marker-end="url(#${K})"`}function b$($){switch($){case"inheritance":case"realization":return"cls-inherit";case"composition":return"cls-composition";case"aggregation":return"cls-aggregation";case"association":case"dependency":return"cls-arrow";default:return null}}function y$($){if(!$.label&&!$.fromCardinality&&!$.toCardinality)return"";if($.points.length<2)return"";let J=[];if($.label){let K=$.labelPosition??x$($.points);J.push(`<text x="${K.x}" y="${K.y-8}" text-anchor="middle" font-size="${r.edgeLabel}" font-weight="${$4.edgeLabel}" fill="var(--_text-muted)">${y4($.label)}</text>`)}if($.fromCardinality){let K=$.points[0],Q=$.points[1],Z=b7(K,Q);J.push(`<text x="${K.x+Z.x}" y="${K.y+Z.y}" text-anchor="middle" font-size="${r.edgeLabel}" font-weight="${$4.edgeLabel}" fill="var(--_text-muted)">${y4($.fromCardinality)}</text>`)}if($.toCardinality){let K=$.points[$.points.length-1],Q=$.points[$.points.length-2],Z=b7(K,Q);J.push(`<text x="${K.x+Z.x}" y="${K.y+Z.y}" text-anchor="middle" font-size="${r.edgeLabel}" font-weight="${$4.edgeLabel}" fill="var(--_text-muted)">${y4($.toCardinality)}</text>`)}return J.join(`
|
||
`)}function x$($){if($.length===0)return{x:0,y:0};let J=Math.floor($.length/2);return $[J]}function b7($,J){let K=J.x-$.x,Q=J.y-$.y;if(Math.abs(K)>Math.abs(Q))return{x:K>0?14:-14,y:-10};return{x:-14,y:Q>0?14:-14}}function y4($){return $.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}var x6=H6(G6(),1);var H4={padding:40,boxPadX:12,headerHeight:32,rowHeight:22,minWidth:140,attrFontSize:11,attrFontWeight:400,nodeSpacing:50,layerSpacing:70};async function x7($,J={}){if($.entities.length===0)return{width:0,height:0,entities:[],relationships:[]};let K=new Map;for(let U of $.entities){let j=U4(U.label,r.nodeLabel,$4.nodeLabel),P=0;for(let z of U.attributes){let _=`${z.type} ${z.name}${z.keys.length>0?" "+z.keys.join(","):""}`,W=P6(_,H4.attrFontSize);if(W>P)P=W}let G=Math.max(H4.minWidth,j+H4.boxPadX*2,P+H4.boxPadX*2),q=H4.headerHeight+Math.max(U.attributes.length,1)*H4.rowHeight;K.set(U.id,{width:G,height:q})}let Q=new x6.default.graphlib.Graph({directed:!0});Q.setGraph({rankdir:"LR",acyclicer:"greedy",nodesep:H4.nodeSpacing,ranksep:H4.layerSpacing,marginx:H4.padding,marginy:H4.padding}),Q.setDefaultEdgeLabel(()=>({}));for(let U of $.entities){let j=K.get(U.id);Q.setNode(U.id,{width:j.width,height:j.height})}for(let U=0;U<$.relationships.length;U++){let j=$.relationships[U];Q.setEdge(j.entity1,j.entity2,{_index:U,label:j.label,width:U4(j.label,r.edgeLabel,$4.edgeLabel)+8,height:r.edgeLabel+6,labelpos:"c"})}try{x6.default.layout(Q)}catch(U){let j=U instanceof Error?U.message:String(U);throw Error(`Dagre layout failed (ER diagram): ${j}`)}let Z=new Map;for(let U of $.entities)Z.set(U.id,U);let V=$.entities.map((U)=>{let j=Q.node(U.id),P=E4(j.x,j.y,j.width,j.height);return{id:U.id,label:U.label,attributes:U.attributes,x:P.x,y:P.y,width:j.width??K.get(U.id).width,height:j.height??K.get(U.id).height,headerHeight:H4.headerHeight,rowHeight:H4.rowHeight}}),B=Q.edges().map((U)=>{let j=Q.edge(U),P=$.relationships[j._index],G=j.points??[],q=b4(G,!1),z=Q.node(U.v),_=Q.node(U.w),W=u4(q,z?{cx:z.x,cy:z.y,hw:z.width/2,hh:z.height/2}:null,_?{cx:_.x,cy:_.y,hw:_.width/2,hh:_.height/2}:null);return{entity1:P.entity1,entity2:P.entity2,cardinality1:P.cardinality1,cardinality2:P.cardinality2,label:P.label,identifying:P.identifying,points:W}});return{width:Q.graph().width??600,height:Q.graph().height??400,entities:V,relationships:B}}var T4={attrSize:11,attrWeight:400,keySize:9,keyWeight:600};function u7($,J,K="Inter",Q=!1){let Z=[];Z.push(Y4($.width,$.height,J,Q)),Z.push(D4(K,!0)),Z.push("<defs>"),Z.push("</defs>");for(let V of $.relationships)Z.push(m$(V));for(let V of $.entities)Z.push(v$(V));for(let V of $.relationships)Z.push(c$(V));for(let V of $.relationships)Z.push(h$(V));return Z.push("</svg>"),Z.join(`
|
||
`)}function v$($){let{x:J,y:K,width:Q,height:Z,headerHeight:V,rowHeight:B,label:U,attributes:j}=$,P=[];P.push(`<rect x="${J}" y="${K}" width="${Q}" height="${Z}" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="${V4.outerBox}" />`),P.push(`<rect x="${J}" y="${K}" width="${Q}" height="${V}" rx="0" ry="0" fill="var(--_group-hdr)" stroke="var(--_node-stroke)" stroke-width="${V4.outerBox}" />`),P.push(`<text x="${J+Q/2}" y="${K+V/2}" text-anchor="middle" dy="${z4}" font-size="${r.nodeLabel}" font-weight="700" fill="var(--_text)">${W6(U)}</text>`);let G=K+V;P.push(`<line x1="${J}" y1="${G}" x2="${J+Q}" y2="${G}" stroke="var(--_node-stroke)" stroke-width="${V4.innerBox}" />`);for(let q=0;q<j.length;q++){let z=j[q],_=G+q*B+B/2;P.push(u$(z,J,_,Q))}if(j.length===0)P.push(`<text x="${J+Q/2}" y="${G+B/2}" text-anchor="middle" dy="${z4}" font-size="${T4.attrSize}" fill="var(--_text-faint)" font-style="italic">(no attributes)</text>`);return P.join(`
|
||
`)}function u$($,J,K,Q){let Z=[],V=0;if($.keys.length>0){let j=$.keys.join(",");V=U4(j,T4.keySize,T4.keyWeight)+8,Z.push(`<rect x="${J+6}" y="${K-7}" width="${V}" height="14" rx="2" ry="2" fill="var(--_key-badge)" />`),Z.push(`<text x="${J+6+V/2}" y="${K}" text-anchor="middle" dy="${z4}" font-size="${T4.keySize}" font-weight="${T4.keyWeight}" fill="var(--_text-sec)">${$.keys.join(",")}</text>`)}let B=J+8+(V>0?V+6:0);Z.push(`<text x="${B}" y="${K}" class="mono" dy="${z4}" font-size="${T4.attrSize}" font-weight="${T4.attrWeight}"><tspan fill="var(--_text-muted)">${W6($.type)}</tspan></text>`);let U=J+Q-8;return Z.push(`<text x="${U}" y="${K}" class="mono" text-anchor="end" dy="${z4}" font-size="${T4.attrSize}" font-weight="${T4.attrWeight}"><tspan fill="var(--_text-sec)">${W6($.name)}</tspan></text>`),Z.join(`
|
||
`)}function m$($){if($.points.length<2)return"";let J=$.points.map((Q)=>`${Q.x},${Q.y}`).join(" "),K=!$.identifying?' stroke-dasharray="6 4"':"";return`<polyline points="${J}" fill="none" stroke="var(--_line)" stroke-width="${V4.connector}"${K} />`}function h$($){if(!$.label||$.points.length<2)return"";let J=p$($.points),Q=U4($.label,r.edgeLabel,$4.edgeLabel)+8,Z=r.edgeLabel+6;return`<rect x="${J.x-Q/2}" y="${J.y-Z/2}" width="${Q}" height="${Z}" rx="2" ry="2" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="0.5" />
|
||
<text x="${J.x}" y="${J.y}" text-anchor="middle" dy="${z4}" font-size="${r.edgeLabel}" font-weight="${$4.edgeLabel}" fill="var(--_text-muted)">${W6($.label)}</text>`}function c$($){if($.points.length<2)return"";let J=[],K=$.points[0],Q=$.points[1];J.push(v7(K,Q,$.cardinality1));let Z=$.points[$.points.length-1],V=$.points[$.points.length-2];return J.push(v7(Z,V,$.cardinality2)),J.join(`
|
||
`)}function v7($,J,K){let Q=[],Z=V4.connector+0.25,V=$.x-J.x,B=$.y-J.y,U=Math.sqrt(V*V+B*B);if(U===0)return"";let j=V/U,P=B/U,G=-P,q=j,z=$.x-j*4,_=$.y-P*4,W=$.x-j*16,F=$.y-P*16,H=K==="one"||K==="zero-one",M=K==="many"||K==="zero-many",R=K==="zero-one"||K==="zero-many";if(H){Q.push(`<line x1="${z+G*6}" y1="${_+q*6}" x2="${z-G*6}" y2="${_-q*6}" stroke="var(--_line)" stroke-width="${Z}" />`);let L=z-j*4,b=_-P*4;Q.push(`<line x1="${L+G*6}" y1="${b+q*6}" x2="${L-G*6}" y2="${b-q*6}" stroke="var(--_line)" stroke-width="${Z}" />`)}if(M){let L=z,b=_;Q.push(`<line x1="${L+G*7}" y1="${b+q*7}" x2="${W}" y2="${F}" stroke="var(--_line)" stroke-width="${Z}" />`),Q.push(`<line x1="${L}" y1="${b}" x2="${W}" y2="${F}" stroke="var(--_line)" stroke-width="${Z}" />`),Q.push(`<line x1="${L-G*7}" y1="${b-q*7}" x2="${W}" y2="${F}" stroke="var(--_line)" stroke-width="${Z}" />`)}if(R){let Y=M?20:12,L=$.x-j*Y,b=$.y-P*Y;Q.push(`<circle cx="${L}" cy="${b}" r="4" fill="var(--bg)" stroke="var(--_line)" stroke-width="${Z}" />`)}return Q.join(`
|
||
`)}function p$($){if($.length===0)return{x:0,y:0};if($.length===1)return $[0];let J=0;for(let Z=1;Z<$.length;Z++){let V=$[Z].x-$[Z-1].x,B=$[Z].y-$[Z-1].y;J+=Math.sqrt(V*V+B*B)}if(J===0)return $[0];let K=J/2,Q=0;for(let Z=1;Z<$.length;Z++){let V=$[Z].x-$[Z-1].x,B=$[Z].y-$[Z-1].y,U=Math.sqrt(V*V+B*B);if(Q+U>=K){let j=U>0?(K-Q)/U:0;return{x:$[Z-1].x+V*j,y:$[Z-1].y+B*j}}Q+=U}return $[$.length-1]}function W6($){return $.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function h7($){let J={},K={},Q=[],Z,V=!1;for(let B of $){if(/^xychart(-beta)?\b/i.test(B)){if(/\bhorizontal\b/i.test(B))V=!0;continue}let U=B.match(/^title\s+"([^"]+)"/);if(U){Z=U[1];continue}let j=B.match(/^x-axis\s+(?:"([^"]*)"\s*)?\[([^\]]+)\]/);if(j){if(j[1])J.title=j[1];J.categories=j[2].split(",").map((W)=>W.trim());continue}let P=B.match(/^x-axis\s+(?:"([^"]*)"\s+)?(-?\d+(?:\.\d+)?)\s*-->\s*(-?\d+(?:\.\d+)?)/);if(P){if(P[1])J.title=P[1];J.range={min:parseFloat(P[2]),max:parseFloat(P[3])};continue}let G=B.match(/^y-axis\s+(?:"([^"]*)"\s+)?(-?\d+(?:\.\d+)?)\s*-->\s*(-?\d+(?:\.\d+)?)/);if(G){if(G[1])K.title=G[1];K.range={min:parseFloat(G[2]),max:parseFloat(G[3])};continue}let q=B.match(/^y-axis\s+"([^"]+)"\s*$/);if(q){K.title=q[1];continue}let z=B.match(/^bar\s+\[([^\]]+)\]/);if(z){Q.push({type:"bar",data:m7(z[1])});continue}let _=B.match(/^line\s+\[([^\]]+)\]/);if(_){Q.push({type:"line",data:m7(_[1])});continue}}if(!K.range&&Q.length>0){let B=Q.flatMap((G)=>G.data),U=Math.min(...B),j=Math.max(...B),P=j-U||1;if(U=U-P*0.1,j=j+P*0.1,U>0&&U<P*0.5)U=0;K.range={min:U,max:j}}if(!K.range)K.range={min:0,max:100};return{title:Z,horizontal:V,xAxis:J,yAxis:K,series:Q}}function m7($){return $.split(",").map((J)=>parseFloat(J.trim()))}var a={plotWidth:600,plotHeight:300,padding:16,titleFontSize:14,titleFontWeight:600,titleHeight:28,axisLabelFontSize:12,axisLabelFontWeight:400,axisTitleFontSize:12,axisTitleFontWeight:500,xLabelHeight:28,yLabelWidth:50,axisTitlePad:20,tickLength:5,barPadRatio:0.2,barGroupGap:2,legendFontSize:12,legendFontWeight:400,legendHeight:22,legendSwatchW:40,legendSwatchH:12,legendGap:6,legendItemGap:16};async function c7($,J={}){if($.horizontal)return d$($);return l$($)}function l$($){let J=!!$.title,K=!!$.xAxis.title,Q=!!$.yAxis.title,Z=$.series.length>1,V=$.yAxis.range,B=p7(V.min,V.max),U=Math.max(...B.map((I)=>U4(M6(I),a.axisLabelFontSize,a.axisLabelFontWeight)),a.yLabelWidth),j=a.padding+(J?a.titleHeight:0)+(Z?a.legendHeight:0),P=a.padding+a.xLabelHeight+(K?a.axisTitlePad:0),G=a.padding+U+8+(Q?a.axisTitlePad:0),q=a.padding,z=a.plotWidth,_=a.plotHeight,W=G+z+q,F=j+_+P,H={x:G,y:j,width:z,height:_},M=v6($),R=(I)=>G+(I+0.5)*(z/M),Y=z/M,L=(I)=>{let d=(I-V.min)/(V.max-V.min||1);return j+_-d*_},b=g$($,R,j+_,Y),O=B.map((I)=>({label:M6(I),x:G,y:L(I),tx:G-a.tickLength,ty:L(I),labelX:G-8,labelY:L(I),textAnchor:"end"})),A=B.map((I)=>({x1:G,y1:L(I),x2:G+z,y2:L(I)})),D=u6($,M),T=n$($,R,L,Y,V.min,D),v=o$($,R,L,D),u=a.padding+(J?a.titleHeight:0)+a.legendHeight/2,y=Z?l7($,W/2,u):[],f={x1:G,y1:j+_,x2:G+z,y2:j+_},X={x1:G,y1:j,x2:G,y2:j+_},N={ticks:b,line:f,...K?{title:{text:$.xAxis.title,x:G+z/2,y:F-a.padding}}:{}},S={ticks:O,line:X,...Q?{title:{text:$.yAxis.title,x:a.padding+4,y:j+_/2,rotate:-90}}:{}},w=J?{text:$.title,x:W/2,y:a.padding+a.titleFontSize}:void 0;return{width:W,height:F,title:w,xAxis:N,yAxis:S,plotArea:H,bars:T,lines:v,gridLines:A,legend:y}}function d$($){let J=!!$.title,K=!!$.xAxis.title,Q=!!$.yAxis.title,Z=$.series.length>1,V=$.yAxis.range,B=p7(V.min,V.max),U=v6($),j=u6($,U),P=Math.max(...j.map((C)=>U4(C,a.axisLabelFontSize,a.axisLabelFontWeight)),40),G=a.padding+(J?a.titleHeight:0)+(Z?a.legendHeight:0),q=a.padding+a.xLabelHeight+(Q?a.axisTitlePad:0),z=a.padding+P+8+(K?a.axisTitlePad:0),_=a.padding,W=a.plotWidth,F=a.plotHeight,H=z+W+_,M=G+F+q,R={x:z,y:G,width:W,height:F},Y=(C)=>{let c=(C-V.min)/(V.max-V.min||1);return z+c*W},L=F/U,b=(C)=>G+(C+0.5)*L,O=B.map((C)=>({label:M6(C),x:Y(C),y:G+F,tx:Y(C),ty:G+F+a.tickLength,labelX:Y(C),labelY:G+F+18,textAnchor:"middle"})),A=j.map((C,c)=>({label:C,x:z,y:b(c),tx:z-a.tickLength,ty:b(c),labelX:z-8,labelY:b(c),textAnchor:"end"})),D=B.map((C)=>({x1:Y(C),y1:G,x2:Y(C),y2:G+F})),T=$.series.filter((C)=>C.type==="bar"),v=T.length,u=[];if(v>0){let C=L*(1-a.barPadRatio),c=v>1?(C-(v-1)*a.barGroupGap)/v:C,l=0;for(let p of T){for(let h=0;h<p.data.length;h++){let o=b(h)-C/2+l*(c+a.barGroupGap),E=Y(Math.max(p.data[h],V.min)),k=Y(Math.max(0,V.min));u.push({x:Math.min(k,E),y:o,width:Math.abs(E-k),height:c,value:p.data[h],label:j[h],seriesIndex:l})}l++}}let y=[],f=0;for(let C of $.series){if(C.type!=="line")continue;let c=C.data.map((l,p)=>({x:Y(l),y:b(p),value:l,label:j[p]}));y.push({points:c,seriesIndex:f}),f++}let X={x1:z,y1:G+F,x2:z+W,y2:G+F},N={x1:z,y1:G,x2:z,y2:G+F},S={ticks:O,line:X,...Q?{title:{text:$.yAxis.title,x:z+W/2,y:M-a.padding}}:{}},w={ticks:A,line:N,...K?{title:{text:$.xAxis.title,x:a.padding+4,y:G+F/2,rotate:-90}}:{}},I=J?{text:$.title,x:H/2,y:a.padding+a.titleFontSize}:void 0,d=a.padding+(J?a.titleHeight:0)+a.legendHeight/2,s=Z?l7($,H/2,d):[];return{width:H,height:M,title:I,xAxis:S,yAxis:w,plotArea:R,bars:u,lines:y,gridLines:D,legend:s}}function v6($){if($.xAxis.categories)return $.xAxis.categories.length;for(let J of $.series)if(J.data.length>0)return J.data.length;return 1}function u6($,J){if($.xAxis.categories)return $.xAxis.categories;if($.xAxis.range){let{min:K,max:Q}=$.xAxis.range,Z=J>1?(Q-K)/(J-1):0;return Array.from({length:J},(V,B)=>M6(K+Z*B))}return Array.from({length:J},(K,Q)=>String(Q+1))}function g$($,J,K,Q){let Z=v6($);return u6($,Z).map((B,U)=>({label:B,x:J(U),y:K,tx:J(U),ty:K+a.tickLength,labelX:J(U),labelY:K+18,textAnchor:"middle"}))}function n$($,J,K,Q,Z,V){let B=$.series.filter((z)=>z.type==="bar"),U=B.length;if(U===0)return[];let j=Q*(1-a.barPadRatio),P=U>1?(j-(U-1)*a.barGroupGap)/U:j,G=[],q=0;for(let z of B){for(let _=0;_<z.data.length;_++){let H=J(_)-j/2+q*(P+a.barGroupGap),M=K(z.data[_]),R=K(Math.max(0,Z));G.push({x:H,y:Math.min(M,R),width:P,height:Math.abs(R-M),value:z.data[_],label:V[_],seriesIndex:q})}q++}return G}function o$($,J,K,Q){let Z=[],V=0;for(let B of $.series){if(B.type!=="line")continue;let U=B.data.map((j,P)=>({x:J(P),y:K(j),value:j,label:Q[P]}));Z.push({points:U,seriesIndex:V}),V++}return Z}function p7($,J){let K=J-$;if(K<=0)return[$];let Q=K/6,Z=Math.pow(10,Math.floor(Math.log10(Q))),V=Q/Z,B;if(V<=1.5)B=Z;else if(V<=3)B=2*Z;else if(V<=7)B=5*Z;else B=10*Z;let U=Math.ceil($/B)*B,j=[];for(let P=U;P<=J+B*0.001;P+=B)j.push(Math.round(P*10000000000)/10000000000);return j}function M6($){if(Number.isInteger($))return String($);return $.toFixed(Math.abs($)<10?1:0)}function l7($,J,K){let Q=[],Z=0,V=0;for(let P of $.series){let G=P.type==="bar"?`Bar ${Z+1}`:`Line ${V+1}`;if(Q.push({label:G,x:0,y:K,type:P.type,seriesIndex:P.type==="bar"?Z:V}),P.type==="bar")Z++;else V++}let B=Q.map((P)=>{let G=U4(P.label,a.legendFontSize,a.legendFontWeight);return a.legendSwatchW+a.legendGap+G}),U=B.reduce((P,G)=>P+G,0)+(Q.length-1)*a.legendItemGap,j=J-U/2;for(let P=0;P<Q.length;P++)Q[P].x=j,j+=B[P]+a.legendItemGap;return Q}var _4={titleSize:14,titleWeight:600,axisTitleSize:12,axisTitleWeight:500,labelSize:12,labelWeight:400,legendSize:12,legendWeight:400,dotRadius:3,lineWidth:2},k4={fontSize:11,fontWeight:500,height:18,padX:8,offsetY:6,rx:4,minY:4};function s7($,J,K="Inter",Q=!1,Z=!1){let V=[];V.push(Y4($.width,$.height,J,Q)),V.push(D4(K,!1)),V.push(s$($,Z));for(let j of $.gridLines)V.push(`<line x1="${j.x1}" y1="${j.y1}" x2="${j.x2}" y2="${j.y2}" class="xychart-grid"/>`);for(let j of $.bars){let P=` data-value="${j.value}"${j.label?` data-label="${O4(j.label)}"`:""}`;if(Z){let G=o7(j.value),q=j.label?`${j.label}: ${G}`:G,z=n7(j.x+j.width/2,j.y,G);V.push(`<g class="xychart-bar-group"><rect x="${j.x}" y="${j.y}" width="${j.width}" height="${j.height}" rx="2" class="xychart-bar xychart-bar-${j.seriesIndex}"${P}/><title>${O4(q)}</title>`+z+"</g>")}else V.push(`<rect x="${j.x}" y="${j.y}" width="${j.width}" height="${j.height}" rx="2" class="xychart-bar xychart-bar-${j.seriesIndex}"${P}/>`)}for(let j of $.lines){if(j.points.length===0)continue;let P=j.points.map((G,q)=>`${q===0?"M":"L"}${G.x},${G.y}`).join(" ");V.push(`<path d="${P}" class="xychart-line xychart-line-${j.seriesIndex}"/>`);for(let G of j.points){let q=` data-value="${G.value}"${G.label?` data-label="${O4(G.label)}"`:""}`;if(Z){let z=o7(G.value),_=G.label?`${G.label}: ${z}`:z,W=n7(G.x,G.y-_4.dotRadius,z);V.push(`<g class="xychart-dot-group"><circle cx="${G.x}" cy="${G.y}" r="${_4.dotRadius}" class="xychart-dot xychart-line-${j.seriesIndex}"${q}/><title>${O4(_)}</title>`+W+"</g>")}else V.push(`<circle cx="${G.x}" cy="${G.y}" r="${_4.dotRadius}" class="xychart-dot xychart-line-${j.seriesIndex}"${q}/>`)}}let B=$.xAxis.line,U=$.yAxis.line;V.push(`<line x1="${B.x1}" y1="${B.y1}" x2="${B.x2}" y2="${B.y2}" class="xychart-axis"/>`),V.push(`<line x1="${U.x1}" y1="${U.y1}" x2="${U.x2}" y2="${U.y2}" class="xychart-axis"/>`);for(let j of $.xAxis.ticks)V.push(`<line x1="${j.x}" y1="${j.y}" x2="${j.tx}" y2="${j.ty}" class="xychart-axis"/>`);for(let j of $.yAxis.ticks)V.push(`<line x1="${j.x}" y1="${j.y}" x2="${j.tx}" y2="${j.ty}" class="xychart-axis"/>`);for(let j of $.xAxis.ticks)V.push(`<text x="${j.labelX}" y="${j.labelY}" text-anchor="${j.textAnchor}" font-size="${_4.labelSize}" font-weight="${_4.labelWeight}" dy="${z4}" class="xychart-label">${O4(j.label)}</text>`);for(let j of $.yAxis.ticks)V.push(`<text x="${j.labelX}" y="${j.labelY}" text-anchor="${j.textAnchor}" font-size="${_4.labelSize}" font-weight="${_4.labelWeight}" dy="${z4}" class="xychart-label">${O4(j.label)}</text>`);if($.xAxis.title){let j=$.xAxis.title,P=j.rotate?` transform="rotate(${j.rotate},${j.x},${j.y})"`:"";V.push(`<text x="${j.x}" y="${j.y}" text-anchor="middle"${P} font-size="${_4.axisTitleSize}" font-weight="${_4.axisTitleWeight}" dy="${z4}" class="xychart-axis-title">${O4(j.text)}</text>`)}if($.yAxis.title){let j=$.yAxis.title,P=j.rotate?` transform="rotate(${j.rotate},${j.x},${j.y})"`:"";V.push(`<text x="${j.x}" y="${j.y}" text-anchor="middle"${P} font-size="${_4.axisTitleSize}" font-weight="${_4.axisTitleWeight}" dy="${z4}" class="xychart-axis-title">${O4(j.text)}</text>`)}if($.title)V.push(`<text x="${$.title.x}" y="${$.title.y}" text-anchor="middle" font-size="${_4.titleSize}" font-weight="${_4.titleWeight}" dy="${z4}" class="xychart-title">${O4($.title.text)}</text>`);for(let j of $.legend){if(j.type==="bar")V.push(`<rect x="${j.x}" y="${j.y-6}" width="40" height="12" rx="1" class="xychart-bar xychart-bar-${j.seriesIndex}"/>`);else{let z=j.y;V.push(`<line x1="${j.x}" y1="${z}" x2="${j.x+40}" y2="${z}" stroke-width="${_4.lineWidth}" stroke-linecap="round" class="xychart-legend-line xychart-line-${j.seriesIndex}"/><circle cx="${j.x+20}" cy="${z}" r="${_4.dotRadius}" class="xychart-dot xychart-line-${j.seriesIndex}"/>`)}V.push(`<text x="${j.x+40+6}" y="${j.y}" text-anchor="start" font-size="${_4.legendSize}" font-weight="${_4.legendWeight}" dy="${z4}" class="xychart-label">${O4(j.label)}</text>`)}return V.push("</svg>"),V.join(`
|
||
`)}function s$($,J){let K=new Set($.bars.map((B)=>B.seriesIndex)).size,Q=new Set($.lines.map((B)=>B.seriesIndex)).size,Z=[];for(let B=0;B<K;B++)if(K<=1)Z.push(` .xychart-bar-${B} { fill: color-mix(in srgb, var(--_arrow) 70%, var(--bg)); stroke: var(--_arrow); stroke-width: 0.5; }`);else{let U=d7[B%d7.length];Z.push(` .xychart-bar-${B} { fill: ${U}; fill-opacity: 0.7; stroke: ${U}; stroke-width: 1; }`)}for(let B=0;B<Q;B++)if(Q<=1&&K===0)Z.push(` path.xychart-line-${B}, line.xychart-line-${B} { stroke: var(--_arrow); }`),Z.push(` circle.xychart-line-${B} { fill: var(--_arrow); }`);else{let U=g7[B%g7.length];Z.push(` path.xychart-line-${B}, line.xychart-line-${B} { stroke: ${U}; }`),Z.push(` circle.xychart-line-${B} { fill: ${U}; }`)}let V=J?`
|
||
.xychart-tip { opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
|
||
.xychart-tip-bg { fill: var(--_text); }
|
||
.xychart-tip-text { fill: var(--bg); font-size: ${k4.fontSize}px; font-weight: ${k4.fontWeight}; }
|
||
.xychart-bar-group:hover .xychart-tip,
|
||
.xychart-dot-group:hover .xychart-tip { opacity: 1; }
|
||
.xychart-bar-group:hover .xychart-bar { filter: brightness(1.1); }
|
||
.xychart-dot-group:hover .xychart-dot { r: 5; transition: r 0.15s ease; }`:"";return`<style>
|
||
.xychart-grid { stroke: var(--_inner-stroke); stroke-width: 1; }
|
||
.xychart-bar { rx: 2; }
|
||
.xychart-line { fill: none; stroke-width: ${_4.lineWidth}; stroke-linecap: round; stroke-linejoin: round; }
|
||
.xychart-dot { stroke: var(--bg); stroke-width: 1.5; }
|
||
.xychart-axis { stroke: var(--_line); stroke-width: 1; }
|
||
.xychart-label { fill: var(--_text-muted); }
|
||
.xychart-axis-title { fill: var(--_text-sec); }
|
||
.xychart-title { fill: var(--_text); }
|
||
${Z.join(`
|
||
`)}${V}
|
||
</style>`}var d7=["#3b82f6","#10b981","#f59e0b","#ef4444","#8b5cf6","#ec4899","#06b6d4","#84cc16"],g7=["#ef4444","#10b981","#f59e0b","#8b5cf6","#06b6d4","#ec4899","#3b82f6","#84cc16"];function n7($,J,K){let Z=U4(K,k4.fontSize,k4.fontWeight)+k4.padX*2,V=k4.height,B=Math.max(k4.minY,J-k4.offsetY-V),U=$-Z/2,j=$,P=B+V/2;return`<rect x="${Q6(U)}" y="${Q6(B)}" width="${Q6(Z)}" height="${V}" rx="${k4.rx}" class="xychart-tip xychart-tip-bg"/><text x="${Q6(j)}" y="${Q6(P)}" text-anchor="middle" dy="${z4}" class="xychart-tip xychart-tip-text">${O4(K)}</text>`}function o7($){if(Number.isInteger($))return String($);return $.toFixed(Math.abs($)<10?1:0)}function Q6($){return String(Math.round($*10)/10)}function O4($){return $.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function i$($){let J=$.trim().split(/[\n;]/)[0]?.trim().toLowerCase()??"";if(/^xychart(-beta)?\b/.test(J))return"xychart";if(/^sequencediagram\s*$/.test(J))return"sequence";if(/^classdiagram\s*$/.test(J))return"class";if(/^erdiagram\s*$/.test(J))return"er";return"flowchart"}function a$($){return{bg:$.bg??c4.bg,fg:$.fg??c4.fg,line:$.line,accent:$.accent,muted:$.muted,surface:$.surface,border:$.border}}async function i7($,J={}){let K=a$(J),Q=J.font??"Inter",Z=J.transparent??!1,V=i$($),B=$.split(/[\n;]/).map((U)=>U.trim()).filter((U)=>U.length>0&&!U.startsWith("%%"));switch(V){case"sequence":{let U=V6(B),j=T7(U,J);return k7(j,K,Q,Z)}case"class":{let U=z6(B),j=await S7(U,J);return y7(j,K,Q,Z)}case"er":{let U=j6(B),j=await x7(U,J);return u7(j,K,Q,Z)}case"xychart":{let U=h7(B),j=await c7(U,J);return s7(j,K,Q,Z,J.interactive??!1)}case"flowchart":default:{let U=s4($),j=await R7(U,J);return N7(j,K,Q,Z)}}}if(typeof window<"u")window.__mermaid={renderMermaid:i7,renderMermaidAscii:E6,THEMES:O6,DEFAULTS:c4,fromShikiTheme:A6};export{E6 as renderMermaidAscii,i7 as renderMermaid,A6 as fromShikiTheme,O6 as THEMES,c4 as DEFAULTS};
|
||
|
||
// Module has loaded — window.__mermaid is now set. Trigger initial render.
|
||
if (window.__renderAllSvgs) window.__renderAllSvgs(window.__initThemeKey);
|
||
</script>
|
||
</body>
|
||
</html> |