<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <link rel='stylesheet' href="/node_modules/@finos/perspective-workspace/dist/umd/material.css">
      
        <script src="/node_modules/@finos/perspective-workspace/dist/umd/perspective-workspace.js"></script>
        <script src="/node_modules/@finos/perspective-viewer-datagrid/dist/umd/perspective-viewer-datagrid.js"></script>
        <script src="/node_modules/@finos/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js"></script>
        <script src="/node_modules/@finos/perspective/dist/umd/perspective.js"></script>
        
        <style>

            body {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }

            perspective-viewer {
                --d3fc-positive--gradient: linear-gradient(
                    #94D0FF, 
                    #8795E8, 
                    #966bff, 
                    #AD8CFF,
                    #C774E8, 
                    #c774a9, 
                    #FF6AD5, 
                    #ff6a8b, 
                    #ff8b8b, 
                    #ffa58b,
                    #ffde8b, 
                    #cdde8b, 
                    #8bde8b, 
                    #20de8b
                );
            }

        </style>

    </head>
    <body> 

        <perspective-workspace id="workspace"></perspective-workspace>
      
        <script>

        const SCHEMA = {
            athlete: "string",
            age: "integer",
            country: "string",
            year: "string",
            date: "date",
            sport: "string",
            gold: "integer",
            silver: "integer",
            bronze: "integer",
            total: "integer"
        };

        const URL = "https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json";

        const datasource = async () => {
            const request = fetch(URL);
            const worker = perspective.worker();
            const table = worker.table(SCHEMA);
            const response = await request;
            const json = await response.json();
            table.update(json);
            return table;
        };

        window.addEventListener("load", () => {
            const plugin = window.getPlugin("d3_heatmap");
            plugin.max_cells = 10000;
            plugin.max_columns = 200;
            window.workspace.tables.set("olympics", datasource());

            window.workspace.restore({
                sizes: [0.3, 0.7],
                detail: {
                    main: {
                        type: "split-area",
                        orientation: "vertical",
                        children: [
                            {
                                type: "tab-area",
                                widgets: ["Three"],
                                currentIndex: 0
                            },
                            {
                                type: "tab-area",
                                widgets: ["PERSPECTIVE_GENERATED_ID_1", "PERSPECTIVE_GENERATED_ID_2", "PERSPECTIVE_GENERATED_ID_0"],
                                currentIndex: 0
                            }
                        ],
                        sizes: [0.7, 0.3]
                    }
                },
                master: {
                    widgets: ["Two"],
                    sizes: [1]
                },
                viewers: {
                    Two: {
                        selectable: true,
                        plugin: "hypergrid",
                        "row-pivots": ["country"],
                        aggregates: {
                            sport: "dominant"
                        },
                        sort: [["total", "desc"]],
                        columns: ["total", "gold", "bronze", "silver", "sport"],
                        plugin_config: {
                            selected: "Canada"
                        },
                        master: true,
                        name: "Test Widget Two",
                        table: "olympics"
                    },
                    Three: {
                        plugin: "d3_heatmap",
                        "row-pivots": ["sport"],
                        "column-pivots": ["age"],
                        sort: [["total"]],
                        columns: ["total"],
                        filters: [["country", "==", "Canada"]],
                        plugin_config: {
                            realValues: ["total"]
                        },
                        name: "Sport by Age Heatmap",
                        table: "olympics"
                    },
                    PERSPECTIVE_GENERATED_ID_1: {
                        plugin: "hypergrid",
                        columns: ["total", "sport", "country", "age", "gold", "silver", "bronze"],
                        "row-pivots": ["athlete"],
                        sort: [["total", "desc"]],
                        aggregates: {
                            sport: "dominant",
                            age: "high",
                            country: "dominant"
                        },
                        filters: [["country", "==", "Canada"]],
                        name: "Athlete by Sport",
                        table: "olympics"
                    },
                    PERSPECTIVE_GENERATED_ID_2: {
                        plugin: "d3_y_line",
                        aggregates: {
                            age: "avg"
                        },
                        filters: [
                            ["country", "==", "Canada"],
                            ["year", "in", ["2002", "2006", "2010", ""]]
                        ],
                        columns: ["age", "total"],
                        "row-pivots": ["year"],
                        plugin_config: {
                            realValues: ["age", "total"],
                            splitMainValues: ["age"]
                        },
                        name: "Medals vs Avg Age 2002-2010 (Winter)",
                        table: "olympics"
                    },
                    PERSPECTIVE_GENERATED_ID_0: {
                        plugin: "d3_y_line",
                        columns: ["age", "total"],
                        "row-pivots": ["year"],
                        aggregates: {
                            age: "avg"
                        },
                        filters: [
                            ["country", "==", "Canada"],
                            ["year", "in", ["2000", "2004", "2008", "2012", ""]]
                        ],
                        plugin_config: {
                            realValues: ["age", "total"],
                            splitMainValues: ["age"]
                        },

                        name: "Medals vs Avg Age 2000-2012 (Summer)",
                        table: "olympics"
                    }
                }
            });
        });

        </script>
    </body>
</html>