Commit 4e918eb4 authored by Wohlgemuth, Jason's avatar Wohlgemuth, Jason
Browse files

wip: Initial creation of SandDance visualization page (no visible link in UI)

parent 10f35a05

package-lock.json

+1851 −1485

File changed.

Preview size limit exceeded, changes collapsed.

public/data.csv

0 → 100644
+24670 −0

File added.

Preview size limit exceeded, changes collapsed.

src/components/Menu.tsx

+3 −0
Original line number Diff line number Diff line
@@ -15,6 +15,9 @@ export default () => ( 
                <NavigationMenuItem>

                    <NavigationMenuLink className="NavigationMenuLink" href="/">Home</NavigationMenuLink>

                </NavigationMenuItem>

                {/* <NavigationMenuItem>

                    <NavigationMenuLink className="NavigationMenuLink" href="/visualize">Visualize</NavigationMenuLink>

                </NavigationMenuItem> */}

                <NavigationMenuItem>

                    <NavigationMenuLink className="NavigationMenuLink" href="/about">About</NavigationMenuLink>

                </NavigationMenuItem>

src/components/Viewer.jsx

0 → 100644
+35 −0
Original line number Diff line number Diff line 
import { useEffect, useState } from 'react';



const insight = {

    chart: 'treemap',

    columns: {

        x: 'Age',

        z: 'Cost',

        z: 'Count'

    },

    // See https://vega.github.io/vega/docs/schemes/#reference

    scheme: 'category10',

    view: '2d',

};



const Viewer = ({ data }) => {

    const handleLoad = () => {

        setLoaded(true);

    };

    const [loaded, setLoaded] = useState(false);

    useEffect(() => {

        console.log("Viewer loaded");

        const viewer = document.getElementById('viewer');

        viewer.contentWindow.postMessage({ action: 'load', data, insight }, '*');

    }, [loaded]);

    return <main>

        <div>

            <button>Data A</button>

            <button>Data B</button>

            <button>Data C</button>

        </div>

        <iframe id="viewer" src="embed.html" width="100%" height="900px" onLoad={handleLoad} loading="lazy"></iframe>

    </main>;

}



export default Viewer;

src/pages/embed.html

0 → 100644
+20 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>SandDance</title>

    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@msrvida/sanddance-explorer@4/dist/css/sanddance-explorer.css" />

    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@msrvida/sanddance-embed@4/dist/css/sanddance-embed.css" />

</head>

<body>

    <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>

    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

    <script src="https://unpkg.com/vega@5.32/build/vega.min.js"></script>

    <script src="https://unpkg.com/@fluentui/react@8/dist/fluentui-react.js"></script>

    <script src="https://unpkg.com/@msrvida/fluentui-icons@1/dist/umd/fluentui-icons.js"></script>

    <script src="https://unpkg.com/@msrvida/sanddance-explorer@4/dist/umd/sanddance-explorer.js"></script>

    <script src="https://unpkg.com/@msrvida/sanddance-embed@4/dist/umd/sanddance-embed.js"></script>

    <!--EMBED-->

</body>

</html>
 
 No newline at end of file