ChartSpec/workbench.html at main · gitbrainlab/ChartSpec · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ChartSpec Workbench - Data Visualization Workspace</title>

  <!-- CSS Tokens and Styles -->
  <link rel="stylesheet" href="./styles/tokens.css">
  <link rel="stylesheet" href="./styles/app.css">
  <link rel="stylesheet" href="./styles/components.css">

  <script>
    (function() {
      const loadScript = (src, onError) => {
        const script = document.createElement('script');
        script.src = src;
        if (onError) {
          script.onerror = onError;
        }
        document.head.appendChild(script);
        return script;
      };

      const loadScriptWithFallback = (primary, fallback) =>
        loadScript(primary, () => loadScript(fallback));

      if (window.__TEST_MODE__) {
        const testD3Script = document.createElement('script');
        testD3Script.src = './vendor/d3.v7.min.js';
        document.head.appendChild(testD3Script);
        return;
      }
      const gridCss = document.createElement('link');
      gridCss.rel = 'stylesheet';
      gridCss.href = 'https://cdn.jsdelivr.net/npm/gridstack@10.3.1/dist/gridstack.min.css';
      gridCss.onerror = () => console.warn('Gridstack CSS failed to load from CDN');
      document.head.appendChild(gridCss);

      loadScript('https://cdn.jsdelivr.net/npm/plotly.js-dist@2.27.0/plotly.min.js');
      loadScriptWithFallback('https://d3js.org/d3.v7.min.js', './vendor/d3.v7.min.js');
      loadScript('https://unpkg.com/@antv/ava@latest/dist/index.min.js');
      loadScript('https://cdn.jsdelivr.net/npm/gridstack@10.3.1/dist/gridstack-all.js');
    })();
  </script>

  <!-- Split.js for resizable panels (optional, inline fallback) -->
  <script>
    // Minimal Split.js polyfill for resizable drawer
    // Real Split.js would be loaded from CDN or vendor
    window.Split = window.Split || function() {
      console.warn('Split.js not loaded, using basic resize');
      return { setSizes: () => {}, destroy: () => {} };
    };
  </script>
</head>
<body>
  <!-- App Shell - Main Layout Container -->
  <cs-app-shell></cs-app-shell>

  <!-- Load application as ES module -->
  <script type="module" src="./workbench/main.js"></script>
</body>
</html>