Veso widget

gistfile1.ps1

function Show-VegaLite {
    param(
        [Parameter(Mandatory)]
        $Spec
    )

    $specJson = $Spec | ConvertTo-Json -Depth 100 -Compress
    $specBase64 = [Convert]::ToBase64String(
        [Text.Encoding]::UTF8.GetBytes($specJson)
    )

    $document = @"
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vega@6.3.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@6.4.3"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@7.1.0"></script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            background: var(--verso-cell-output-background, white);
            color: var(--verso-cell-output-foreground, #1e1e1e);
            font-family: var(--verso-ui-font-family, sans-serif);
        }
        #vis { width: 100%; }
        .error { padding: 12px; color: #c62828; white-space: pre-wrap; }
    </style>
</head>
<body>
    <div id="vis"></div>
    <script>
        const binary = atob("$specBase64");
        const bytes = Uint8Array.from(binary, character => character.charCodeAt(0));
        const spec = JSON.parse(new TextDecoder().decode(bytes));

        vegaEmbed("#vis", spec, { renderer: "svg", actions: true })
            .catch(error => {
                document.body.innerHTML = '<div class="error"></div>';
                document.querySelector(".error").textContent = error.stack || error.message;
            });
    </script>
</body>
</html>
"@

    $document | Display -MimeType 'text/x-verso-widget'
}