/samples/ Recent content in Samples on Dash Schema Hugo en-us /samples/global-commerce-intelligence/ Mon, 01 Jan 0001 00:00:00 +0000 /samples/global-commerce-intelligence/ <h2 id="interactive-preview-aurora-light">Interactive Preview (Aurora Light)</h2> <div id="ds-sample-global-commerce-intelligence" style="margin: 1.5rem 0; border: 1px solid #d1d5db; border-radius: 10px; overflow: hidden; background: #fff !important; color: #111827 !important;"> <div data-role="theme-nav" style="padding: 0.75rem 0.9rem; border-bottom: 1px solid #e5e7eb; display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; background: #fff !important; color: #111827 !important;"> <strong style="font-size: 0.9rem; color: #111827 !important;">Theme</strong> </div> <div data-role="error" style="display: none; padding: 0.85rem 0.9rem; color: #991b1b; background: #fee2e2;"></div> <div data-role="canvas" style="height: 2100px; overflow: auto;"></div> </div> <script type="module"> import { DashSchemaClientRenderer, VERSION } from "\/js\/dashschema-renderer-1.0.4.js"; const rootId = "ds-sample-global-commerce-intelligence"; const root = document.getElementById(rootId); if (!root) { throw new Error(`Sample root not found: ${rootId}`); } const nav = root.querySelector('[data-role="theme-nav"]'); const canvas = root.querySelector('[data-role="canvas"]'); const errorNode = root.querySelector('[data-role="error"]'); const slug = "global-commerce-intelligence"; const defaultTheme = "aurora-light"; const isStandalone = false; const payloadBase = "/generated/samples/"; const fontStylesheetByFamily = { "IBM Plex Sans": "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap", "Space Grotesk": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap", "Source Serif Pro": "https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@400;700&display=swap", "Source Serif 4": "https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;700&display=swap", }; let dashboardPayload = null; let dashboardDataPayload = null; let themesPayload = null; let renderer = null; let activeThemeSlug = null; function normalizePath(pathname) { const normalized = pathname.replace(/\/+$/, ""); return normalized === "" ? "/" : normalized; } function showError(message) { errorNode.style.display = "block"; errorNode.textContent = message; } function clearError() { errorNode.style.display = "none"; errorNode.textContent = ""; } function findThemeBySlug(payload, themeSlug) { return (payload.themes || []).find((theme) => theme.slug === themeSlug) || null; } function pickThemeFromUrl(payload) { const themes = payload.themes || []; if (!themes.length) { return null; } const themeParam = new URLSearchParams(window.location.search).get("theme"); if (themeParam) { const byParam = themes.find((theme) => theme.slug === themeParam); if (byParam) { return byParam; } } const preferred = defaultTheme || payload.default_theme; if (preferred) { const byDefault = themes.find((theme) => theme.slug === preferred); if (byDefault) { return byDefault; } } return themes[0]; } function setThemeInUrl(themeSlug) { const next = new URL(window.location.href); next.searchParams.set("theme", themeSlug); history.replaceState({ theme: themeSlug }, "", next.toString()); } function collectThemeFonts(payload) { const fonts = new Set(); for (const theme of payload.themes || []) { const cfg = theme.renderconfig || {}; const family = cfg.font; const titleFamily = cfg.title_typeography?.font; const descFamily = cfg.description_typeography?.font; if (typeof family === "string" && family.trim()) { fonts.add(family.trim()); } if (typeof titleFamily === "string" && titleFamily.trim()) { fonts.add(titleFamily.trim()); } if (typeof descFamily === "string" && descFamily.trim()) { fonts.add(descFamily.trim()); } } return Array.from(fonts); } function ensureFontsLoaded(fontFamilies) { for (const family of fontFamilies) { const href = fontStylesheetByFamily[family]; if (!href) { continue; } const existing = document.querySelector(`link[data-ds-font-family="${family}"]`); if (existing) { continue; } const link = document.createElement("link"); link.rel = "stylesheet"; link.href = href; link.setAttribute("data-ds-font-family", family); document.head.appendChild(link); } } function updateStandaloneLinks(themeSlug) { const links = document.querySelectorAll("[data-sample-standalone-link]"); for (const link of links) { const base = link.dataset.standaloneBase || link.getAttribute("href"); if (!base) { continue; } const next = new URL(base, window.location.href); next.searchParams.set("theme", themeSlug); link.setAttribute("href", `${next.pathname}${next.search}${next.hash}`); } } function updateThemeLinkStyles() { const links = document.querySelectorAll("[data-sample-theme-slug]"); for (const link of links) { const linkSlug = link.dataset.sampleThemeSlug || ""; const inNav = !!link.closest("[data-role='theme-nav']"); if (linkSlug === activeThemeSlug) { link.style.fontWeight = "600"; link.setAttribute("aria-current", "true"); if (inNav) { link.style.background = "#e5e7eb"; } } else { link.style.fontWeight = "400"; link.removeAttribute("aria-current"); if (inNav) { link.style.background = "transparent"; } } } } function bindSamePageThemeLinks() { const links = document.querySelectorAll("a[href*='?theme=']"); const currentPath = normalizePath(window.location.pathname); for (const link of links) { if (link.dataset.sampleThemeBound === "1") { continue; } let parsed; try { parsed = new URL(link.href, window.location.href); } catch (_err) { continue; } if (normalizePath(parsed.pathname) !== currentPath) { continue; } const linkTheme = parsed.searchParams.get("theme"); if (!linkTheme || !findThemeBySlug(themesPayload, linkTheme)) { continue; } link.dataset.sampleThemeBound = "1"; link.dataset.sampleThemeSlug = linkTheme; link.addEventListener("click", (event) => { event.preventDefault(); applyTheme(linkTheme, { updateHistory: true }); }); } } function buildThemeLinks(payload, activeTheme) { if (isStandalone || !nav) { return; } nav.innerHTML = ""; const label = document.createElement("strong"); label.style.fontSize = "0.9rem"; label.style.setProperty("color", "#111827", "important"); label.textContent = "Theme"; nav.appendChild(label); for (const theme of payload.themes || []) { const link = document.createElement("a"); link.href = `${window.location.pathname}?theme=${encodeURIComponent(theme.slug)}`; link.textContent = theme.name || theme.slug; link.dataset.sampleThemeSlug = theme.slug; link.style.textDecoration = "none"; link.style.border = "1px solid rgba(120,120,120,0.35)"; link.style.borderRadius = "999px"; link.style.padding = "0.22rem 0.62rem"; link.style.fontSize = "0.84rem"; link.style.setProperty("color", "#111827", "important"); link.style.background = "transparent"; link.addEventListener("click", (event) => { event.preventDefault(); applyTheme(theme.slug, { updateHistory: true }); }); nav.appendChild(link); } const meta = document.createElement("span"); meta.style.marginLeft = "auto"; meta.style.fontSize = "0.75rem"; meta.style.opacity = "0.75"; meta.style.setProperty("color", "#111827", "important"); meta.textContent = `renderer v${VERSION}`; nav.appendChild(meta); updateThemeLinkStyles(); } async function applyTheme(themeSlug, { updateHistory } = { updateHistory: true }) { const nextTheme = findThemeBySlug(themesPayload, themeSlug); if (!nextTheme) { return; } if (updateHistory) { setThemeInUrl(nextTheme.slug); } activeThemeSlug = nextTheme.slug; updateStandaloneLinks(nextTheme.slug); updateThemeLinkStyles(); clearError(); try { if (renderer) { renderer.destroy(); } renderer = new DashSchemaClientRenderer({ mount: canvas, dashboard: dashboardPayload, dashboardData: dashboardDataPayload, renderConfig: nextTheme.renderconfig || {}, }); await renderer.render(); } catch (err) { showError(err && err.message ? err.message : "Failed to render sample."); } } async function boot() { clearError(); try { const [dashboardRes, dashboardDataRes, themesRes] = await Promise.all([ fetch(`${payloadBase}${slug}.dashboard.json`), fetch(`${payloadBase}${slug}.data.json`), fetch(`${payloadBase}${slug}.themes.json`), ]); if (!dashboardRes.ok) { throw new Error(`Failed to load dashboard payload for ${slug}`); } if (!dashboardDataRes.ok) { throw new Error(`Failed to load dashboard data payload for ${slug}`); } if (!themesRes.ok) { throw new Error(`Failed to load theme payload for ${slug}`); } dashboardPayload = await dashboardRes.json(); dashboardDataPayload = await dashboardDataRes.json(); themesPayload = await themesRes.json(); ensureFontsLoaded(collectThemeFonts(themesPayload)); const activeTheme = pickThemeFromUrl(themesPayload); if (!activeTheme) { throw new Error("No themes available for this sample."); } activeThemeSlug = activeTheme.slug; buildThemeLinks(themesPayload, activeTheme); bindSamePageThemeLinks(); window.addEventListener("popstate", () => { const fromUrl = pickThemeFromUrl(themesPayload); if (fromUrl && fromUrl.slug !== activeThemeSlug) { applyTheme(fromUrl.slug, { updateHistory: false }); } }); await applyTheme(activeTheme.slug, { updateHistory: false }); } catch (err) { showError(err && err.message ? err.message : "Failed to render sample."); } } boot(); </script> <h2 id="dashboard-definition">Dashboard Definition</h2> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{ </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;global_commerce_intelligence&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;version&#34;</span>: <span style="color:#e6db74">&#34;0.0.1&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;generated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Global Commerce Intelligence&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Executive snapshot of regional revenue, acquisition efficiency, and account concentration.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;source&#34;</span>: <span style="color:#e6db74">&#34;warehouse.commerce_snapshot&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;tags&#34;</span>: [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;commerce&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;executive&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;weekly&#34;</span> </span></span><span style="display:flex;"><span> ], </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;timezone&#34;</span>: <span style="color:#e6db74">&#34;UTC&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;default_locale&#34;</span>: <span style="color:#e6db74">&#34;en_US&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widgets&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;metric_revenue&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;metric&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Recognized Revenue&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Current period total.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;currency&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_revenue_metric&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;metric_margin&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;metric&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Gross Margin&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Consolidated margin rate.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;percent&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_margin_metric&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;section_break&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;horizontal-ruler&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;chart_revenue_region&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;bar-chart&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Revenue by Region&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Gross recognized revenue in USD.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_revenue_region&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;chart_weekly_orders&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;line-chart&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Weekly Orders by Segment&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Enterprise and SMB order throughput.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_weekly_orders&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;chart_regional_order_intensity&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;heatmap&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Regional Order Intensity&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Heatmap of weekly order pressure by region.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_regional_order_intensity&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;chart_cac_ltv&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;scatter-chart&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;CAC vs LTV&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Acquisition efficiency by region cluster.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x_min&#34;</span>: <span style="color:#ae81ff">350</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x_max&#34;</span>: <span style="color:#ae81ff">510</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_cac_ltv&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;chart_conversion_funnel&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;funnel&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Commerce Conversion Funnel&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Visitor to purchase progression.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_conversion_funnel&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;chart_channel_mix&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;pie-chart&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;ARR Mix by Channel&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Channel contribution to new ARR.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_channel_mix&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;table_top_accounts&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;table&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Top Accounts&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Largest enterprise customers in current window.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_top_accounts&#34;</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h2 id="data-definition">Data Definition</h2> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{ </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;global_commerce_intelligence_data&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;dashboard_id&#34;</span>: <span style="color:#e6db74">&#34;global_commerce_intelligence&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_sources&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_revenue_metric&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Total recognized revenue for current period.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">18452340.55</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;currency&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;currency&#34;</span>: <span style="color:#e6db74">&#34;USD&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;sentiment&#34;</span>: <span style="color:#e6db74">&#34;positive&#34;</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_margin_metric&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Gross margin rate across all geographies.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">0.327</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;percent&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;sentiment&#34;</span>: <span style="color:#e6db74">&#34;positive&#34;</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_revenue_region&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Revenue by macro region.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;North America&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">7120000</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;EMEA&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">4950000</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;APAC&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">4330000</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;LATAM&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">2050000</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_weekly_orders&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Weekly fulfilled order volume by channel cluster.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Enterprise&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W01&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">8120</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W02&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">8450</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W03&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">8305</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W04&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">8725</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W05&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">9015</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W06&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">9250</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;SMB&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W01&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">12640</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W02&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">12920</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W03&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">13110</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W04&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">13480</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W05&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">13890</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W06&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">14120</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_regional_order_intensity&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Order intensity matrix by week and region.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W03&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#e6db74">&#34;North America&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">8450</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W04&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#e6db74">&#34;North America&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">8725</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W05&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#e6db74">&#34;North America&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">9015</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W03&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#e6db74">&#34;EMEA&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">5120</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W04&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#e6db74">&#34;EMEA&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">5330</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W05&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#e6db74">&#34;EMEA&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">5480</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W03&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#e6db74">&#34;APAC&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">4680</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W04&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#e6db74">&#34;APAC&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">4950</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-W05&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#e6db74">&#34;APAC&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">5095</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_cac_ltv&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Customer acquisition cost versus 12-month LTV.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;North America&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">410</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">2950</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">435</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">3010</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">450</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">3180</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">470</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">3240</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">495</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">3385</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;EMEA&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">360</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">2480</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">375</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">2595</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">388</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">2640</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">402</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">2710</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">419</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">2790</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_conversion_funnel&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Commerce funnel stage counts for current period.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Sessions&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">1820000</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Product Views&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">1295000</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Add to Cart&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">442000</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Checkout&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">218500</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Purchases&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">163200</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_channel_mix&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Net new ARR by acquisition channel.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Inbound&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">42</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Partner&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">21</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Outbound&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">18</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Expansion&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">13</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Marketplace&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">6</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_top_accounts&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Top enterprise accounts by quarterly billings.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;name&#34;</span>: <span style="color:#e6db74">&#34;Account&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_key&#34;</span>: <span style="color:#e6db74">&#34;account&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;string&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_formatter&#34;</span>: <span style="color:#e6db74">&#34;&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;name&#34;</span>: <span style="color:#e6db74">&#34;Region&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_key&#34;</span>: <span style="color:#e6db74">&#34;region&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;string&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_formatter&#34;</span>: <span style="color:#e6db74">&#34;&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;name&#34;</span>: <span style="color:#e6db74">&#34;Quarterly Billings&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_key&#34;</span>: <span style="color:#e6db74">&#34;billings&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;currency&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_formatter&#34;</span>: <span style="color:#e6db74">&#34;currency&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;end&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;name&#34;</span>: <span style="color:#e6db74">&#34;Growth&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_key&#34;</span>: <span style="color:#e6db74">&#34;growth&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;percent&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_formatter&#34;</span>: <span style="color:#e6db74">&#34;percent&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;end&#34;</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ], </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;account&#34;</span>: <span style="color:#e6db74">&#34;Arcturus Retail&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;region&#34;</span>: <span style="color:#e6db74">&#34;North America&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;billings&#34;</span>: <span style="color:#ae81ff">1460000</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;growth&#34;</span>: <span style="color:#ae81ff">0.18</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;account&#34;</span>: <span style="color:#e6db74">&#34;Nordwind Energy&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;region&#34;</span>: <span style="color:#e6db74">&#34;EMEA&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;billings&#34;</span>: <span style="color:#ae81ff">1315000</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;growth&#34;</span>: <span style="color:#ae81ff">0.14</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;account&#34;</span>: <span style="color:#e6db74">&#34;Kirei Holdings&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;region&#34;</span>: <span style="color:#e6db74">&#34;APAC&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;billings&#34;</span>: <span style="color:#ae81ff">1240000</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;growth&#34;</span>: <span style="color:#ae81ff">0.22</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;account&#34;</span>: <span style="color:#e6db74">&#34;Azul Logistics&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;region&#34;</span>: <span style="color:#e6db74">&#34;LATAM&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;billings&#34;</span>: <span style="color:#ae81ff">865000</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;growth&#34;</span>: <span style="color:#ae81ff">0.19</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;version&#34;</span>: <span style="color:#e6db74">&#34;0.0.1&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;generated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;source&#34;</span>: <span style="color:#e6db74">&#34;warehouse.commerce_snapshot&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;tags&#34;</span>: [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;commerce&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;executive&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;weekly&#34;</span> </span></span><span style="display:flex;"><span> ], </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;timezone&#34;</span>: <span style="color:#e6db74">&#34;UTC&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;default_locale&#34;</span>: <span style="color:#e6db74">&#34;en_US&#34;</span> </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h2 id="theme-render-options">Theme Render Options</h2> <h3 id="aurora-light">Aurora Light</h3> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{ </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;IBM Plex Sans&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;layout&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;width&#34;</span>: <span style="color:#ae81ff">1400</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;center&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_rows&#34;</span>: <span style="color:#ae81ff">10</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;spacing&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;palette&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;text_color&#34;</span>: <span style="color:#e6db74">&#34;#122135&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;background_color&#34;</span>: <span style="color:#e6db74">&#34;#F4F8FF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;link_color&#34;</span>: <span style="color:#e6db74">&#34;#0F62FE&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;chart_colors&#34;</span>: [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#0F62FE&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#24A148&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#8A3FFC&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#FF832B&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#009D9A&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#D12771&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#5D9CEC&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#A56EFF&#34;</span> </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;IBM Plex Sans&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#0F1E33&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">22</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">700</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;IBM Plex Sans&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#3A4B63&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">14</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">400</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_type_defaults&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;metric&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">6</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;horizontal-ruler&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;bar-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;heatmap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;funnel&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;box-plot&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;treemap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;line-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;scatter-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;pie-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;table&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;locale&#34;</span>: <span style="color:#e6db74">&#34;en_US&#34;</span> </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h3 id="midnight-grid">Midnight Grid</h3> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{ </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Space Grotesk&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;layout&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;width&#34;</span>: <span style="color:#ae81ff">1320</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;center&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_rows&#34;</span>: <span style="color:#ae81ff">10</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;spacing&#34;</span>: <span style="color:#ae81ff">14</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;palette&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;text_color&#34;</span>: <span style="color:#e6db74">&#34;#E6EEFF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;background_color&#34;</span>: <span style="color:#e6db74">&#34;#0E1320&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;link_color&#34;</span>: <span style="color:#e6db74">&#34;#7FB3FF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;chart_colors&#34;</span>: [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#4EA1FF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#2BD9A6&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#FFC857&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#E9724C&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#C77DFF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#F07167&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#9AD1D4&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#6D9DC5&#34;</span> </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Space Grotesk&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#F4F7FF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">22</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">700</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Space Grotesk&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#B4C0D3&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">14</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">400</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_type_defaults&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;metric&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">3</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;horizontal-ruler&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;bar-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;heatmap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;funnel&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;box-plot&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;treemap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;line-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;scatter-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;pie-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">9</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;table&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">12</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;locale&#34;</span>: <span style="color:#e6db74">&#34;en_US&#34;</span> </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h3 id="sepia-ledger">Sepia Ledger</h3> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{ </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Source Serif Pro&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;layout&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;width&#34;</span>: <span style="color:#ae81ff">1180</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;center&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_rows&#34;</span>: <span style="color:#ae81ff">10</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;spacing&#34;</span>: <span style="color:#ae81ff">16</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;palette&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;text_color&#34;</span>: <span style="color:#e6db74">&#34;#2F241B&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;background_color&#34;</span>: <span style="color:#e6db74">&#34;#F6F1E8&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;link_color&#34;</span>: <span style="color:#e6db74">&#34;#8C4E2D&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;chart_colors&#34;</span>: [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#8C4E2D&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#4C6A92&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#5B8E7D&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#B06C49&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#7D5A9E&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#9B3D3D&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#356859&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#73503C&#34;</span> </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Source Serif Pro&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#2A1D15&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">23</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">700</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Source Serif Pro&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#5A4C40&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">14</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">400</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_type_defaults&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;metric&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">8</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;horizontal-ruler&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;bar-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">16</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;heatmap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;funnel&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">8</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;box-plot&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">16</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;treemap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">16</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">9</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;line-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">9</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;scatter-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">16</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;pie-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">8</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;table&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">11</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;locale&#34;</span>: <span style="color:#e6db74">&#34;en_US&#34;</span> </span></span><span style="display:flex;"><span>} </span></span></code></pre></div> /samples/grid-reliability-command-center/ Mon, 01 Jan 0001 00:00:00 +0000 /samples/grid-reliability-command-center/ <h2 id="interactive-preview-aurora-light">Interactive Preview (Aurora Light)</h2> <div id="ds-sample-grid-reliability-command-center" style="margin: 1.5rem 0; border: 1px solid #d1d5db; border-radius: 10px; overflow: hidden; background: #fff !important; color: #111827 !important;"> <div data-role="theme-nav" style="padding: 0.75rem 0.9rem; border-bottom: 1px solid #e5e7eb; display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; background: #fff !important; color: #111827 !important;"> <strong style="font-size: 0.9rem; color: #111827 !important;">Theme</strong> </div> <div data-role="error" style="display: none; padding: 0.85rem 0.9rem; color: #991b1b; background: #fee2e2;"></div> <div data-role="canvas" style="height: 2100px; overflow: auto;"></div> </div> <script type="module"> import { DashSchemaClientRenderer, VERSION } from "\/js\/dashschema-renderer-1.0.4.js"; const rootId = "ds-sample-grid-reliability-command-center"; const root = document.getElementById(rootId); if (!root) { throw new Error(`Sample root not found: ${rootId}`); } const nav = root.querySelector('[data-role="theme-nav"]'); const canvas = root.querySelector('[data-role="canvas"]'); const errorNode = root.querySelector('[data-role="error"]'); const slug = "grid-reliability-command-center"; const defaultTheme = "aurora-light"; const isStandalone = false; const payloadBase = "/generated/samples/"; const fontStylesheetByFamily = { "IBM Plex Sans": "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap", "Space Grotesk": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap", "Source Serif Pro": "https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@400;700&display=swap", "Source Serif 4": "https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;700&display=swap", }; let dashboardPayload = null; let dashboardDataPayload = null; let themesPayload = null; let renderer = null; let activeThemeSlug = null; function normalizePath(pathname) { const normalized = pathname.replace(/\/+$/, ""); return normalized === "" ? "/" : normalized; } function showError(message) { errorNode.style.display = "block"; errorNode.textContent = message; } function clearError() { errorNode.style.display = "none"; errorNode.textContent = ""; } function findThemeBySlug(payload, themeSlug) { return (payload.themes || []).find((theme) => theme.slug === themeSlug) || null; } function pickThemeFromUrl(payload) { const themes = payload.themes || []; if (!themes.length) { return null; } const themeParam = new URLSearchParams(window.location.search).get("theme"); if (themeParam) { const byParam = themes.find((theme) => theme.slug === themeParam); if (byParam) { return byParam; } } const preferred = defaultTheme || payload.default_theme; if (preferred) { const byDefault = themes.find((theme) => theme.slug === preferred); if (byDefault) { return byDefault; } } return themes[0]; } function setThemeInUrl(themeSlug) { const next = new URL(window.location.href); next.searchParams.set("theme", themeSlug); history.replaceState({ theme: themeSlug }, "", next.toString()); } function collectThemeFonts(payload) { const fonts = new Set(); for (const theme of payload.themes || []) { const cfg = theme.renderconfig || {}; const family = cfg.font; const titleFamily = cfg.title_typeography?.font; const descFamily = cfg.description_typeography?.font; if (typeof family === "string" && family.trim()) { fonts.add(family.trim()); } if (typeof titleFamily === "string" && titleFamily.trim()) { fonts.add(titleFamily.trim()); } if (typeof descFamily === "string" && descFamily.trim()) { fonts.add(descFamily.trim()); } } return Array.from(fonts); } function ensureFontsLoaded(fontFamilies) { for (const family of fontFamilies) { const href = fontStylesheetByFamily[family]; if (!href) { continue; } const existing = document.querySelector(`link[data-ds-font-family="${family}"]`); if (existing) { continue; } const link = document.createElement("link"); link.rel = "stylesheet"; link.href = href; link.setAttribute("data-ds-font-family", family); document.head.appendChild(link); } } function updateStandaloneLinks(themeSlug) { const links = document.querySelectorAll("[data-sample-standalone-link]"); for (const link of links) { const base = link.dataset.standaloneBase || link.getAttribute("href"); if (!base) { continue; } const next = new URL(base, window.location.href); next.searchParams.set("theme", themeSlug); link.setAttribute("href", `${next.pathname}${next.search}${next.hash}`); } } function updateThemeLinkStyles() { const links = document.querySelectorAll("[data-sample-theme-slug]"); for (const link of links) { const linkSlug = link.dataset.sampleThemeSlug || ""; const inNav = !!link.closest("[data-role='theme-nav']"); if (linkSlug === activeThemeSlug) { link.style.fontWeight = "600"; link.setAttribute("aria-current", "true"); if (inNav) { link.style.background = "#e5e7eb"; } } else { link.style.fontWeight = "400"; link.removeAttribute("aria-current"); if (inNav) { link.style.background = "transparent"; } } } } function bindSamePageThemeLinks() { const links = document.querySelectorAll("a[href*='?theme=']"); const currentPath = normalizePath(window.location.pathname); for (const link of links) { if (link.dataset.sampleThemeBound === "1") { continue; } let parsed; try { parsed = new URL(link.href, window.location.href); } catch (_err) { continue; } if (normalizePath(parsed.pathname) !== currentPath) { continue; } const linkTheme = parsed.searchParams.get("theme"); if (!linkTheme || !findThemeBySlug(themesPayload, linkTheme)) { continue; } link.dataset.sampleThemeBound = "1"; link.dataset.sampleThemeSlug = linkTheme; link.addEventListener("click", (event) => { event.preventDefault(); applyTheme(linkTheme, { updateHistory: true }); }); } } function buildThemeLinks(payload, activeTheme) { if (isStandalone || !nav) { return; } nav.innerHTML = ""; const label = document.createElement("strong"); label.style.fontSize = "0.9rem"; label.style.setProperty("color", "#111827", "important"); label.textContent = "Theme"; nav.appendChild(label); for (const theme of payload.themes || []) { const link = document.createElement("a"); link.href = `${window.location.pathname}?theme=${encodeURIComponent(theme.slug)}`; link.textContent = theme.name || theme.slug; link.dataset.sampleThemeSlug = theme.slug; link.style.textDecoration = "none"; link.style.border = "1px solid rgba(120,120,120,0.35)"; link.style.borderRadius = "999px"; link.style.padding = "0.22rem 0.62rem"; link.style.fontSize = "0.84rem"; link.style.setProperty("color", "#111827", "important"); link.style.background = "transparent"; link.addEventListener("click", (event) => { event.preventDefault(); applyTheme(theme.slug, { updateHistory: true }); }); nav.appendChild(link); } const meta = document.createElement("span"); meta.style.marginLeft = "auto"; meta.style.fontSize = "0.75rem"; meta.style.opacity = "0.75"; meta.style.setProperty("color", "#111827", "important"); meta.textContent = `renderer v${VERSION}`; nav.appendChild(meta); updateThemeLinkStyles(); } async function applyTheme(themeSlug, { updateHistory } = { updateHistory: true }) { const nextTheme = findThemeBySlug(themesPayload, themeSlug); if (!nextTheme) { return; } if (updateHistory) { setThemeInUrl(nextTheme.slug); } activeThemeSlug = nextTheme.slug; updateStandaloneLinks(nextTheme.slug); updateThemeLinkStyles(); clearError(); try { if (renderer) { renderer.destroy(); } renderer = new DashSchemaClientRenderer({ mount: canvas, dashboard: dashboardPayload, dashboardData: dashboardDataPayload, renderConfig: nextTheme.renderconfig || {}, }); await renderer.render(); } catch (err) { showError(err && err.message ? err.message : "Failed to render sample."); } } async function boot() { clearError(); try { const [dashboardRes, dashboardDataRes, themesRes] = await Promise.all([ fetch(`${payloadBase}${slug}.dashboard.json`), fetch(`${payloadBase}${slug}.data.json`), fetch(`${payloadBase}${slug}.themes.json`), ]); if (!dashboardRes.ok) { throw new Error(`Failed to load dashboard payload for ${slug}`); } if (!dashboardDataRes.ok) { throw new Error(`Failed to load dashboard data payload for ${slug}`); } if (!themesRes.ok) { throw new Error(`Failed to load theme payload for ${slug}`); } dashboardPayload = await dashboardRes.json(); dashboardDataPayload = await dashboardDataRes.json(); themesPayload = await themesRes.json(); ensureFontsLoaded(collectThemeFonts(themesPayload)); const activeTheme = pickThemeFromUrl(themesPayload); if (!activeTheme) { throw new Error("No themes available for this sample."); } activeThemeSlug = activeTheme.slug; buildThemeLinks(themesPayload, activeTheme); bindSamePageThemeLinks(); window.addEventListener("popstate", () => { const fromUrl = pickThemeFromUrl(themesPayload); if (fromUrl && fromUrl.slug !== activeThemeSlug) { applyTheme(fromUrl.slug, { updateHistory: false }); } }); await applyTheme(activeTheme.slug, { updateHistory: false }); } catch (err) { showError(err && err.message ? err.message : "Failed to render sample."); } } boot(); </script> <h2 id="dashboard-definition">Dashboard Definition</h2> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{ </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;grid_reliability_command_center&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;version&#34;</span>: <span style="color:#e6db74">&#34;0.0.1&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;generated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Grid Reliability Command Center&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Operational reliability posture with incident backlog, root causes, and latency-risk hotspots.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;source&#34;</span>: <span style="color:#e6db74">&#34;ops.platform_reliability_rollup&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;tags&#34;</span>: [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;operations&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;reliability&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;sre&#34;</span> </span></span><span style="display:flex;"><span> ], </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;timezone&#34;</span>: <span style="color:#e6db74">&#34;UTC&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;default_locale&#34;</span>: <span style="color:#e6db74">&#34;en_US&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widgets&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;metric_uptime&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;metric&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;30-Day Uptime&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;API estate availability.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;percent&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_uptime&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;metric_mttr&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;metric&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;MTTR (min)&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Mean recovery time across incidents.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;number&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_mttr&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;chart_incidents_service&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;bar-chart&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Open Incidents by Service&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Current incident concentration.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_incidents_service&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;chart_error_budget&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;line-chart&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Error Budget Burn&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Six-sprint burn trend by cluster.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x_min&#34;</span>: <span style="color:#ae81ff">1</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x_max&#34;</span>: <span style="color:#ae81ff">6</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_error_budget_burn&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;chart_recovery_distribution&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;box-plot&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Recovery Time Distribution&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Resolution spread by service family (minutes).&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_recovery_distribution&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;chart_root_cause&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;pie-chart&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Root Cause Mix&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Incident attribution over trailing month.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_root_causes&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;chart_latency_vs_error&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;scatter-chart&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Latency vs Error Rate&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Service cluster health envelope.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x_min&#34;</span>: <span style="color:#ae81ff">90</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x_max&#34;</span>: <span style="color:#ae81ff">300</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_latency_error_scatter&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;table_live_incidents&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;table&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Live Incident Queue&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Prioritized active incidents.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_live_incidents&#34;</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h2 id="data-definition">Data Definition</h2> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{ </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;grid_reliability_command_center_data&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;dashboard_id&#34;</span>: <span style="color:#e6db74">&#34;grid_reliability_command_center&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_sources&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_uptime&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Rolling 30-day API uptime.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">0.9994</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;percent&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;sentiment&#34;</span>: <span style="color:#e6db74">&#34;positive&#34;</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_mttr&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Mean time to recovery in minutes.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">34.8</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;number&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;sentiment&#34;</span>: <span style="color:#e6db74">&#34;positive&#34;</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_incidents_service&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Open incidents by service.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;Auth&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;Billing&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">5</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;Ingest&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">9</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;Search&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">4</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;Storage&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">6</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_error_budget_burn&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Error budget burn by cluster over time.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Primary&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">1</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">2.5</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">2</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">3.1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">3</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">3.6</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">4</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">2.9</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">5</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">4.2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">6</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">3.8</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Failover&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">1</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">1.2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">2</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">1.4</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">3</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">1.8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">4</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">1.7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">5</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">2.1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">6</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">2.0</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_recovery_distribution&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;MTTR distribution summary by service family.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;Core APIs&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;min&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;q1&#34;</span>: <span style="color:#ae81ff">22</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;median&#34;</span>: <span style="color:#ae81ff">31</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;q3&#34;</span>: <span style="color:#ae81ff">44</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;max&#34;</span>: <span style="color:#ae81ff">71</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;Data Plane&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;min&#34;</span>: <span style="color:#ae81ff">10</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;q1&#34;</span>: <span style="color:#ae81ff">19</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;median&#34;</span>: <span style="color:#ae81ff">27</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;q3&#34;</span>: <span style="color:#ae81ff">39</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;max&#34;</span>: <span style="color:#ae81ff">66</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;Edge&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;min&#34;</span>: <span style="color:#ae81ff">6</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;q1&#34;</span>: <span style="color:#ae81ff">14</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;median&#34;</span>: <span style="color:#ae81ff">20</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;q3&#34;</span>: <span style="color:#ae81ff">28</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;max&#34;</span>: <span style="color:#ae81ff">52</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;Internal Tools&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;min&#34;</span>: <span style="color:#ae81ff">4</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;q1&#34;</span>: <span style="color:#ae81ff">9</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;median&#34;</span>: <span style="color:#ae81ff">15</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;q3&#34;</span>: <span style="color:#ae81ff">23</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;max&#34;</span>: <span style="color:#ae81ff">48</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_root_causes&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Distribution of incident root causes.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Dependency&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">31</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Capacity&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">24</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Config Drift&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">19</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Deploy Regression&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">16</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Unknown&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_latency_error_scatter&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;P95 latency versus error rate by service cluster.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Core APIs&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">180</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">0.6</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">210</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">0.9</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">240</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">1.2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">265</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">1.3</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">290</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">1.7</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Edge&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">95</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">0.2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">110</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">0.3</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">130</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">0.45</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">145</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">0.52</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">165</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">0.7</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_live_incidents&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Current active incident queue.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;name&#34;</span>: <span style="color:#e6db74">&#34;Incident&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_key&#34;</span>: <span style="color:#e6db74">&#34;incident&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;string&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_formatter&#34;</span>: <span style="color:#e6db74">&#34;&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;name&#34;</span>: <span style="color:#e6db74">&#34;Service&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_key&#34;</span>: <span style="color:#e6db74">&#34;service&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;string&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_formatter&#34;</span>: <span style="color:#e6db74">&#34;&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;name&#34;</span>: <span style="color:#e6db74">&#34;Severity&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_key&#34;</span>: <span style="color:#e6db74">&#34;severity&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;string&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_formatter&#34;</span>: <span style="color:#e6db74">&#34;&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;center&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;name&#34;</span>: <span style="color:#e6db74">&#34;Owner&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_key&#34;</span>: <span style="color:#e6db74">&#34;owner&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;string&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_formatter&#34;</span>: <span style="color:#e6db74">&#34;&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;name&#34;</span>: <span style="color:#e6db74">&#34;ETA (min)&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_key&#34;</span>: <span style="color:#e6db74">&#34;eta_minutes&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;number&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_formatter&#34;</span>: <span style="color:#e6db74">&#34;number&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;end&#34;</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ], </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;incident&#34;</span>: <span style="color:#e6db74">&#34;INC-1452&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;service&#34;</span>: <span style="color:#e6db74">&#34;Ingest&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;severity&#34;</span>: <span style="color:#e6db74">&#34;SEV-1&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;owner&#34;</span>: <span style="color:#e6db74">&#34;Data Core&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;eta_minutes&#34;</span>: <span style="color:#ae81ff">35</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;incident&#34;</span>: <span style="color:#e6db74">&#34;INC-1455&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;service&#34;</span>: <span style="color:#e6db74">&#34;Auth&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;severity&#34;</span>: <span style="color:#e6db74">&#34;SEV-2&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;owner&#34;</span>: <span style="color:#e6db74">&#34;Identity&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;eta_minutes&#34;</span>: <span style="color:#ae81ff">55</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;incident&#34;</span>: <span style="color:#e6db74">&#34;INC-1458&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;service&#34;</span>: <span style="color:#e6db74">&#34;Storage&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;severity&#34;</span>: <span style="color:#e6db74">&#34;SEV-2&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;owner&#34;</span>: <span style="color:#e6db74">&#34;Platform&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;eta_minutes&#34;</span>: <span style="color:#ae81ff">42</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;incident&#34;</span>: <span style="color:#e6db74">&#34;INC-1461&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;service&#34;</span>: <span style="color:#e6db74">&#34;Billing&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;severity&#34;</span>: <span style="color:#e6db74">&#34;SEV-3&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;owner&#34;</span>: <span style="color:#e6db74">&#34;FinOps&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;eta_minutes&#34;</span>: <span style="color:#ae81ff">75</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;version&#34;</span>: <span style="color:#e6db74">&#34;0.0.1&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;generated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;source&#34;</span>: <span style="color:#e6db74">&#34;ops.platform_reliability_rollup&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;tags&#34;</span>: [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;operations&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;reliability&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;sre&#34;</span> </span></span><span style="display:flex;"><span> ], </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;timezone&#34;</span>: <span style="color:#e6db74">&#34;UTC&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;default_locale&#34;</span>: <span style="color:#e6db74">&#34;en_US&#34;</span> </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h2 id="theme-render-options">Theme Render Options</h2> <h3 id="aurora-light">Aurora Light</h3> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{ </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;IBM Plex Sans&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;layout&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;width&#34;</span>: <span style="color:#ae81ff">1400</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;center&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_rows&#34;</span>: <span style="color:#ae81ff">10</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;spacing&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;palette&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;text_color&#34;</span>: <span style="color:#e6db74">&#34;#122135&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;background_color&#34;</span>: <span style="color:#e6db74">&#34;#F4F8FF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;link_color&#34;</span>: <span style="color:#e6db74">&#34;#0F62FE&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;chart_colors&#34;</span>: [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#0F62FE&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#24A148&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#8A3FFC&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#FF832B&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#009D9A&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#D12771&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#5D9CEC&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#A56EFF&#34;</span> </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;IBM Plex Sans&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#0F1E33&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">22</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">700</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;IBM Plex Sans&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#3A4B63&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">14</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">400</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_type_defaults&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;metric&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">6</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;horizontal-ruler&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;bar-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;heatmap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;funnel&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;box-plot&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;treemap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;line-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;scatter-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;pie-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;table&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;locale&#34;</span>: <span style="color:#e6db74">&#34;en_US&#34;</span> </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h3 id="midnight-grid">Midnight Grid</h3> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{ </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Space Grotesk&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;layout&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;width&#34;</span>: <span style="color:#ae81ff">1320</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;center&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_rows&#34;</span>: <span style="color:#ae81ff">10</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;spacing&#34;</span>: <span style="color:#ae81ff">14</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;palette&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;text_color&#34;</span>: <span style="color:#e6db74">&#34;#E6EEFF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;background_color&#34;</span>: <span style="color:#e6db74">&#34;#0E1320&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;link_color&#34;</span>: <span style="color:#e6db74">&#34;#7FB3FF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;chart_colors&#34;</span>: [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#4EA1FF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#2BD9A6&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#FFC857&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#E9724C&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#C77DFF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#F07167&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#9AD1D4&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#6D9DC5&#34;</span> </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Space Grotesk&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#F4F7FF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">22</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">700</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Space Grotesk&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#B4C0D3&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">14</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">400</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_type_defaults&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;metric&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">3</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;horizontal-ruler&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;bar-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;heatmap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;funnel&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;box-plot&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;treemap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;line-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;scatter-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;pie-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">9</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;table&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">12</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;locale&#34;</span>: <span style="color:#e6db74">&#34;en_US&#34;</span> </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h3 id="sepia-ledger">Sepia Ledger</h3> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{ </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Source Serif Pro&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;layout&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;width&#34;</span>: <span style="color:#ae81ff">1180</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;center&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_rows&#34;</span>: <span style="color:#ae81ff">10</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;spacing&#34;</span>: <span style="color:#ae81ff">16</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;palette&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;text_color&#34;</span>: <span style="color:#e6db74">&#34;#2F241B&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;background_color&#34;</span>: <span style="color:#e6db74">&#34;#F6F1E8&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;link_color&#34;</span>: <span style="color:#e6db74">&#34;#8C4E2D&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;chart_colors&#34;</span>: [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#8C4E2D&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#4C6A92&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#5B8E7D&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#B06C49&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#7D5A9E&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#9B3D3D&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#356859&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#73503C&#34;</span> </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Source Serif Pro&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#2A1D15&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">23</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">700</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Source Serif Pro&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#5A4C40&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">14</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">400</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_type_defaults&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;metric&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">8</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;horizontal-ruler&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;bar-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">16</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;heatmap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;funnel&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">8</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;box-plot&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">16</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;treemap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">16</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">9</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;line-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">9</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;scatter-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">16</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;pie-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">8</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;table&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">11</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;locale&#34;</span>: <span style="color:#e6db74">&#34;en_US&#34;</span> </span></span><span style="display:flex;"><span>} </span></span></code></pre></div> /samples/sustainability-finance-fusion/ Mon, 01 Jan 0001 00:00:00 +0000 /samples/sustainability-finance-fusion/ <h2 id="interactive-preview-aurora-light">Interactive Preview (Aurora Light)</h2> <div id="ds-sample-sustainability-finance-fusion" style="margin: 1.5rem 0; border: 1px solid #d1d5db; border-radius: 10px; overflow: hidden; background: #fff !important; color: #111827 !important;"> <div data-role="theme-nav" style="padding: 0.75rem 0.9rem; border-bottom: 1px solid #e5e7eb; display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; background: #fff !important; color: #111827 !important;"> <strong style="font-size: 0.9rem; color: #111827 !important;">Theme</strong> </div> <div data-role="error" style="display: none; padding: 0.85rem 0.9rem; color: #991b1b; background: #fee2e2;"></div> <div data-role="canvas" style="height: 2100px; overflow: auto;"></div> </div> <script type="module"> import { DashSchemaClientRenderer, VERSION } from "\/js\/dashschema-renderer-1.0.4.js"; const rootId = "ds-sample-sustainability-finance-fusion"; const root = document.getElementById(rootId); if (!root) { throw new Error(`Sample root not found: ${rootId}`); } const nav = root.querySelector('[data-role="theme-nav"]'); const canvas = root.querySelector('[data-role="canvas"]'); const errorNode = root.querySelector('[data-role="error"]'); const slug = "sustainability-finance-fusion"; const defaultTheme = "aurora-light"; const isStandalone = false; const payloadBase = "/generated/samples/"; const fontStylesheetByFamily = { "IBM Plex Sans": "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap", "Space Grotesk": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap", "Source Serif Pro": "https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@400;700&display=swap", "Source Serif 4": "https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;700&display=swap", }; let dashboardPayload = null; let dashboardDataPayload = null; let themesPayload = null; let renderer = null; let activeThemeSlug = null; function normalizePath(pathname) { const normalized = pathname.replace(/\/+$/, ""); return normalized === "" ? "/" : normalized; } function showError(message) { errorNode.style.display = "block"; errorNode.textContent = message; } function clearError() { errorNode.style.display = "none"; errorNode.textContent = ""; } function findThemeBySlug(payload, themeSlug) { return (payload.themes || []).find((theme) => theme.slug === themeSlug) || null; } function pickThemeFromUrl(payload) { const themes = payload.themes || []; if (!themes.length) { return null; } const themeParam = new URLSearchParams(window.location.search).get("theme"); if (themeParam) { const byParam = themes.find((theme) => theme.slug === themeParam); if (byParam) { return byParam; } } const preferred = defaultTheme || payload.default_theme; if (preferred) { const byDefault = themes.find((theme) => theme.slug === preferred); if (byDefault) { return byDefault; } } return themes[0]; } function setThemeInUrl(themeSlug) { const next = new URL(window.location.href); next.searchParams.set("theme", themeSlug); history.replaceState({ theme: themeSlug }, "", next.toString()); } function collectThemeFonts(payload) { const fonts = new Set(); for (const theme of payload.themes || []) { const cfg = theme.renderconfig || {}; const family = cfg.font; const titleFamily = cfg.title_typeography?.font; const descFamily = cfg.description_typeography?.font; if (typeof family === "string" && family.trim()) { fonts.add(family.trim()); } if (typeof titleFamily === "string" && titleFamily.trim()) { fonts.add(titleFamily.trim()); } if (typeof descFamily === "string" && descFamily.trim()) { fonts.add(descFamily.trim()); } } return Array.from(fonts); } function ensureFontsLoaded(fontFamilies) { for (const family of fontFamilies) { const href = fontStylesheetByFamily[family]; if (!href) { continue; } const existing = document.querySelector(`link[data-ds-font-family="${family}"]`); if (existing) { continue; } const link = document.createElement("link"); link.rel = "stylesheet"; link.href = href; link.setAttribute("data-ds-font-family", family); document.head.appendChild(link); } } function updateStandaloneLinks(themeSlug) { const links = document.querySelectorAll("[data-sample-standalone-link]"); for (const link of links) { const base = link.dataset.standaloneBase || link.getAttribute("href"); if (!base) { continue; } const next = new URL(base, window.location.href); next.searchParams.set("theme", themeSlug); link.setAttribute("href", `${next.pathname}${next.search}${next.hash}`); } } function updateThemeLinkStyles() { const links = document.querySelectorAll("[data-sample-theme-slug]"); for (const link of links) { const linkSlug = link.dataset.sampleThemeSlug || ""; const inNav = !!link.closest("[data-role='theme-nav']"); if (linkSlug === activeThemeSlug) { link.style.fontWeight = "600"; link.setAttribute("aria-current", "true"); if (inNav) { link.style.background = "#e5e7eb"; } } else { link.style.fontWeight = "400"; link.removeAttribute("aria-current"); if (inNav) { link.style.background = "transparent"; } } } } function bindSamePageThemeLinks() { const links = document.querySelectorAll("a[href*='?theme=']"); const currentPath = normalizePath(window.location.pathname); for (const link of links) { if (link.dataset.sampleThemeBound === "1") { continue; } let parsed; try { parsed = new URL(link.href, window.location.href); } catch (_err) { continue; } if (normalizePath(parsed.pathname) !== currentPath) { continue; } const linkTheme = parsed.searchParams.get("theme"); if (!linkTheme || !findThemeBySlug(themesPayload, linkTheme)) { continue; } link.dataset.sampleThemeBound = "1"; link.dataset.sampleThemeSlug = linkTheme; link.addEventListener("click", (event) => { event.preventDefault(); applyTheme(linkTheme, { updateHistory: true }); }); } } function buildThemeLinks(payload, activeTheme) { if (isStandalone || !nav) { return; } nav.innerHTML = ""; const label = document.createElement("strong"); label.style.fontSize = "0.9rem"; label.style.setProperty("color", "#111827", "important"); label.textContent = "Theme"; nav.appendChild(label); for (const theme of payload.themes || []) { const link = document.createElement("a"); link.href = `${window.location.pathname}?theme=${encodeURIComponent(theme.slug)}`; link.textContent = theme.name || theme.slug; link.dataset.sampleThemeSlug = theme.slug; link.style.textDecoration = "none"; link.style.border = "1px solid rgba(120,120,120,0.35)"; link.style.borderRadius = "999px"; link.style.padding = "0.22rem 0.62rem"; link.style.fontSize = "0.84rem"; link.style.setProperty("color", "#111827", "important"); link.style.background = "transparent"; link.addEventListener("click", (event) => { event.preventDefault(); applyTheme(theme.slug, { updateHistory: true }); }); nav.appendChild(link); } const meta = document.createElement("span"); meta.style.marginLeft = "auto"; meta.style.fontSize = "0.75rem"; meta.style.opacity = "0.75"; meta.style.setProperty("color", "#111827", "important"); meta.textContent = `renderer v${VERSION}`; nav.appendChild(meta); updateThemeLinkStyles(); } async function applyTheme(themeSlug, { updateHistory } = { updateHistory: true }) { const nextTheme = findThemeBySlug(themesPayload, themeSlug); if (!nextTheme) { return; } if (updateHistory) { setThemeInUrl(nextTheme.slug); } activeThemeSlug = nextTheme.slug; updateStandaloneLinks(nextTheme.slug); updateThemeLinkStyles(); clearError(); try { if (renderer) { renderer.destroy(); } renderer = new DashSchemaClientRenderer({ mount: canvas, dashboard: dashboardPayload, dashboardData: dashboardDataPayload, renderConfig: nextTheme.renderconfig || {}, }); await renderer.render(); } catch (err) { showError(err && err.message ? err.message : "Failed to render sample."); } } async function boot() { clearError(); try { const [dashboardRes, dashboardDataRes, themesRes] = await Promise.all([ fetch(`${payloadBase}${slug}.dashboard.json`), fetch(`${payloadBase}${slug}.data.json`), fetch(`${payloadBase}${slug}.themes.json`), ]); if (!dashboardRes.ok) { throw new Error(`Failed to load dashboard payload for ${slug}`); } if (!dashboardDataRes.ok) { throw new Error(`Failed to load dashboard data payload for ${slug}`); } if (!themesRes.ok) { throw new Error(`Failed to load theme payload for ${slug}`); } dashboardPayload = await dashboardRes.json(); dashboardDataPayload = await dashboardDataRes.json(); themesPayload = await themesRes.json(); ensureFontsLoaded(collectThemeFonts(themesPayload)); const activeTheme = pickThemeFromUrl(themesPayload); if (!activeTheme) { throw new Error("No themes available for this sample."); } activeThemeSlug = activeTheme.slug; buildThemeLinks(themesPayload, activeTheme); bindSamePageThemeLinks(); window.addEventListener("popstate", () => { const fromUrl = pickThemeFromUrl(themesPayload); if (fromUrl && fromUrl.slug !== activeThemeSlug) { applyTheme(fromUrl.slug, { updateHistory: false }); } }); await applyTheme(activeTheme.slug, { updateHistory: false }); } catch (err) { showError(err && err.message ? err.message : "Failed to render sample."); } } boot(); </script> <h2 id="dashboard-definition">Dashboard Definition</h2> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{ </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;sustainability_finance_fusion&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;version&#34;</span>: <span style="color:#e6db74">&#34;0.0.1&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;generated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Sustainability and Finance Fusion&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Emissions, capital allocation, and margin signals in a single quarterly planning view.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;source&#34;</span>: <span style="color:#e6db74">&#34;esg.finance_operating_model&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;tags&#34;</span>: [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;esg&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;finance&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;planning&#34;</span> </span></span><span style="display:flex;"><span> ], </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;timezone&#34;</span>: <span style="color:#e6db74">&#34;UTC&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;default_locale&#34;</span>: <span style="color:#e6db74">&#34;en_US&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widgets&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;metric_emissions_total&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;metric&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Total Emissions (tCO2e)&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Consolidated selected window.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;number&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_emissions_total&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;metric_renewable_share&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;metric&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Renewable Electricity Share&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Purchased renewable mix.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;percent&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_renewable_share&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;chart_scope_emissions&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;bar-chart&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Emissions by Scope&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Protocol split for prioritization.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_scope_emissions&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;chart_intensity_trend&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;line-chart&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Resource Intensity Trend&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Energy and water intensity per output unit.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_energy_intensity&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;chart_green_capex&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;pie-chart&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Green Capex Allocation&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Current-year investment allocation.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_green_capex&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;chart_intensity_margin&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;scatter-chart&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Intensity vs Margin&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Business unit trajectory toward low-carbon profitability.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x_min&#34;</span>: <span style="color:#ae81ff">1.7</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x_max&#34;</span>: <span style="color:#ae81ff">3.3</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_intensity_margin&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;chart_abatement_portfolio&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;treemap&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Abatement Portfolio Mix&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Hierarchical cost-weighted opportunity structure.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_abatement_portfolio&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;table_facility_rank&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;type&#34;</span>: <span style="color:#e6db74">&#34;table&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: <span style="color:#e6db74">&#34;Facility Opportunity Ranking&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Top facilities by savings potential and decarbonization need.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_ref&#34;</span>: <span style="color:#e6db74">&#34;ds_facility_rank&#34;</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h2 id="data-definition">Data Definition</h2> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{ </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;id&#34;</span>: <span style="color:#e6db74">&#34;sustainability_finance_fusion_data&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;dashboard_id&#34;</span>: <span style="color:#e6db74">&#34;sustainability_finance_fusion&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_sources&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_emissions_total&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Total emissions for selected window in tCO2e.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">124500</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;number&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;sentiment&#34;</span>: <span style="color:#e6db74">&#34;negative&#34;</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_renewable_share&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Renewable share of purchased electricity.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">0.58</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;percent&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;sentiment&#34;</span>: <span style="color:#e6db74">&#34;positive&#34;</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_scope_emissions&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Emissions by GHG protocol scope.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;Scope 1&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">28600</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;Scope 2&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">21400</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;Scope 3&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">74500</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_energy_intensity&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Intensity trends per production unit.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;kWh / unit&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2025-09&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">8.9</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2025-10&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">8.7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2025-11&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">8.6</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2025-12&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">8.4</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-01&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">8.2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-02&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">8.1</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;m3 water / unit&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2025-09&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">3.6</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2025-10&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">3.5</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2025-11&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">3.4</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2025-12&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">3.3</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-01&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">3.2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#e6db74">&#34;2026-02&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">3.1</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_green_capex&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Capex allocation by decarbonization initiative.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Electrification&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">33</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Efficiency Retrofits&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">26</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;On-site Solar&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">19</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Supplier Programs&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">14</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;R&amp;D&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_intensity_margin&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Emission intensity versus gross margin by business unit.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Industrial&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">3.2</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">0.22</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">3.0</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">0.23</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">2.8</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">0.24</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">2.7</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">0.25</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Consumer&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">2.1</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">0.31</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">2.0</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">0.32</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">1.9</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">0.34</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;x&#34;</span>: <span style="color:#ae81ff">1.8</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;y&#34;</span>: <span style="color:#ae81ff">0.35</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_abatement_portfolio&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Hierarchy of decarbonization opportunities by investment stream.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Operations&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;children&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Process Electrification&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">32</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Waste Heat Recovery&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">21</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Leak Detection&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">11</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Supply Chain&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;children&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Low-Carbon Materials&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">19</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Freight Optimization&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">14</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Supplier Transition Funds&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">9</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Facilities&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;children&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;On-site Solar&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">17</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;Battery Storage&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">12</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;label&#34;</span>: <span style="color:#e6db74">&#34;HVAC Retrofits&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;value&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;ds_facility_rank&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;kind&#34;</span>: <span style="color:#e6db74">&#34;inline&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: <span style="color:#e6db74">&#34;Facilities ranked by emissions intensity and savings potential.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;name&#34;</span>: <span style="color:#e6db74">&#34;Facility&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_key&#34;</span>: <span style="color:#e6db74">&#34;facility&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;string&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_formatter&#34;</span>: <span style="color:#e6db74">&#34;&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;name&#34;</span>: <span style="color:#e6db74">&#34;Business Unit&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_key&#34;</span>: <span style="color:#e6db74">&#34;business_unit&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;string&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_formatter&#34;</span>: <span style="color:#e6db74">&#34;&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;name&#34;</span>: <span style="color:#e6db74">&#34;Intensity&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_key&#34;</span>: <span style="color:#e6db74">&#34;intensity&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;number&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_formatter&#34;</span>: <span style="color:#e6db74">&#34;number&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;end&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;name&#34;</span>: <span style="color:#e6db74">&#34;Gross Margin&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_key&#34;</span>: <span style="color:#e6db74">&#34;margin&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;percent&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_formatter&#34;</span>: <span style="color:#e6db74">&#34;percent&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;end&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;name&#34;</span>: <span style="color:#e6db74">&#34;Savings Potential&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_key&#34;</span>: <span style="color:#e6db74">&#34;savings_usd&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_type&#34;</span>: <span style="color:#e6db74">&#34;currency&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;data_formatter&#34;</span>: <span style="color:#e6db74">&#34;currency&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;end&#34;</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ], </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;facility&#34;</span>: <span style="color:#e6db74">&#34;Riverton Plant&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;business_unit&#34;</span>: <span style="color:#e6db74">&#34;Industrial&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;intensity&#34;</span>: <span style="color:#ae81ff">3.2</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;margin&#34;</span>: <span style="color:#ae81ff">0.22</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;savings_usd&#34;</span>: <span style="color:#ae81ff">4200000</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;facility&#34;</span>: <span style="color:#e6db74">&#34;Luma Assembly&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;business_unit&#34;</span>: <span style="color:#e6db74">&#34;Consumer&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;intensity&#34;</span>: <span style="color:#ae81ff">2.1</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;margin&#34;</span>: <span style="color:#ae81ff">0.31</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;savings_usd&#34;</span>: <span style="color:#ae81ff">2950000</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;facility&#34;</span>: <span style="color:#e6db74">&#34;Harbor Components&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;business_unit&#34;</span>: <span style="color:#e6db74">&#34;Industrial&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;intensity&#34;</span>: <span style="color:#ae81ff">2.8</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;margin&#34;</span>: <span style="color:#ae81ff">0.24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;savings_usd&#34;</span>: <span style="color:#ae81ff">3350000</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;facility&#34;</span>: <span style="color:#e6db74">&#34;Northline Depot&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;business_unit&#34;</span>: <span style="color:#e6db74">&#34;Logistics&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;intensity&#34;</span>: <span style="color:#ae81ff">2.4</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;margin&#34;</span>: <span style="color:#ae81ff">0.27</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;savings_usd&#34;</span>: <span style="color:#ae81ff">2100000</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;version&#34;</span>: <span style="color:#e6db74">&#34;0.0.1&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;generated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;updated_at&#34;</span>: <span style="color:#e6db74">&#34;2026-02-22T00:00:00Z&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;source&#34;</span>: <span style="color:#e6db74">&#34;esg.finance_operating_model&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;tags&#34;</span>: [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;esg&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;finance&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;planning&#34;</span> </span></span><span style="display:flex;"><span> ], </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;timezone&#34;</span>: <span style="color:#e6db74">&#34;UTC&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;default_locale&#34;</span>: <span style="color:#e6db74">&#34;en_US&#34;</span> </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h2 id="theme-render-options">Theme Render Options</h2> <h3 id="aurora-light">Aurora Light</h3> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{ </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;IBM Plex Sans&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;layout&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;width&#34;</span>: <span style="color:#ae81ff">1400</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;center&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_rows&#34;</span>: <span style="color:#ae81ff">10</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;spacing&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;palette&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;text_color&#34;</span>: <span style="color:#e6db74">&#34;#122135&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;background_color&#34;</span>: <span style="color:#e6db74">&#34;#F4F8FF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;link_color&#34;</span>: <span style="color:#e6db74">&#34;#0F62FE&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;chart_colors&#34;</span>: [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#0F62FE&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#24A148&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#8A3FFC&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#FF832B&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#009D9A&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#D12771&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#5D9CEC&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#A56EFF&#34;</span> </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;IBM Plex Sans&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#0F1E33&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">22</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">700</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;IBM Plex Sans&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#3A4B63&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">14</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">400</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_type_defaults&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;metric&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">6</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;horizontal-ruler&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;bar-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;heatmap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;funnel&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;box-plot&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;treemap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;line-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;scatter-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;pie-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">7</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;table&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;locale&#34;</span>: <span style="color:#e6db74">&#34;en_US&#34;</span> </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h3 id="midnight-grid">Midnight Grid</h3> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{ </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Space Grotesk&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;layout&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;width&#34;</span>: <span style="color:#ae81ff">1320</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;center&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_rows&#34;</span>: <span style="color:#ae81ff">10</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;spacing&#34;</span>: <span style="color:#ae81ff">14</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;palette&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;text_color&#34;</span>: <span style="color:#e6db74">&#34;#E6EEFF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;background_color&#34;</span>: <span style="color:#e6db74">&#34;#0E1320&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;link_color&#34;</span>: <span style="color:#e6db74">&#34;#7FB3FF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;chart_colors&#34;</span>: [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#4EA1FF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#2BD9A6&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#FFC857&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#E9724C&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#C77DFF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#F07167&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#9AD1D4&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#6D9DC5&#34;</span> </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Space Grotesk&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#F4F7FF&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">22</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">700</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Space Grotesk&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#B4C0D3&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">14</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">400</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_type_defaults&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;metric&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">3</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;horizontal-ruler&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;bar-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;heatmap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;funnel&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;box-plot&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;treemap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;line-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;scatter-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;pie-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">9</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;table&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">12</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;locale&#34;</span>: <span style="color:#e6db74">&#34;en_US&#34;</span> </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h3 id="sepia-ledger">Sepia Ledger</h3> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{ </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Source Serif Pro&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;layout&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;width&#34;</span>: <span style="color:#ae81ff">1180</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;center&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_rows&#34;</span>: <span style="color:#ae81ff">10</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;spacing&#34;</span>: <span style="color:#ae81ff">16</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;palette&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;text_color&#34;</span>: <span style="color:#e6db74">&#34;#2F241B&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;background_color&#34;</span>: <span style="color:#e6db74">&#34;#F6F1E8&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;link_color&#34;</span>: <span style="color:#e6db74">&#34;#8C4E2D&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;chart_colors&#34;</span>: [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#8C4E2D&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#4C6A92&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#5B8E7D&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#B06C49&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#7D5A9E&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#9B3D3D&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#356859&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;#73503C&#34;</span> </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Source Serif Pro&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#2A1D15&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">23</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">700</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description_typeography&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;font&#34;</span>: <span style="color:#e6db74">&#34;Source Serif Pro&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;color&#34;</span>: <span style="color:#e6db74">&#34;#5A4C40&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;size&#34;</span>: <span style="color:#ae81ff">14</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;weight&#34;</span>: <span style="color:#ae81ff">400</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;align&#34;</span>: <span style="color:#e6db74">&#34;start&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;widget_type_defaults&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;title&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;description&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;metric&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">8</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">2</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;horizontal-ruler&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;bar-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">16</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;heatmap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;funnel&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">8</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;box-plot&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">16</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;treemap&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">16</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">9</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;line-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">9</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;scatter-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">16</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;pie-chart&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">8</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;table&#34;</span>: { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;columns&#34;</span>: <span style="color:#ae81ff">24</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;rows&#34;</span>: <span style="color:#ae81ff">11</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;locale&#34;</span>: <span style="color:#e6db74">&#34;en_US&#34;</span> </span></span><span style="display:flex;"><span>} </span></span></code></pre></div>