sc1f/.block

## .block
license: apache-2.0
height: 800

## README.md

      
    Raw
  

              README.md
            
          
    An example of Perspective Workspace with multiple perspective viewers sharing the same table.
Clicking on rows on the perspective viewers in the dark area on the left, filters out the viewers on the right

  
## index.css
body{
    margin: 0px
}

## index.html
<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="https://unpkg.com/@finos/perspective-phosphor/dist/themes/material.css">
        <link rel='stylesheet' href="index.css">

        <script src="https://unpkg.com/@finos/perspective-phosphor/dist/umd/perspective-phosphor.js"></script>
        <script src="https://unpkg.com/@finos/perspective-viewer-hypergrid"></script>
        <script src="https://unpkg.com/@finos/perspective-viewer-d3fc"></script>
        <script src="https://unpkg.com/@finos/perspective"></script>
        <script src="index.js"></script>
    </head>
    <body> </body>
</html>

## index.js
const SCHEMA = {
    athlete: "string",
    age: "integer",
    country: "string",
    year: "string",
    date: "date",
    sport: "string",
    gold: "integer",
    silver: "integer",
    bronze: "integer",
    total: "integer",

}

window.addEventListener("load", function() {
    //request data and initialise table
    const request = fetch("https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json")
    const worker = perspective.worker();
    const table = worker.table(SCHEMA);

    request
        .then(response => response.json()
        .then(data => {
            table.update(data)
        }))


    const  PerspectiveWorkspace = PerspectivePhosphor.PerspectiveWorkspace
    const  PerspectiveWidget = PerspectivePhosphor.PerspectiveWidget

    // create widgets
    const workspace = new PerspectiveWorkspace({node: document.body})
    const countryMaster = new PerspectiveWidget("Country", {
        "row-pivots": ["country"],
        columns: ["gold", "silver", "bronze"],
        sort: [["gold", "desc"]]
    })

    const yearMaster = new PerspectiveWidget("Year", {
        "row-pivots": ["year"],
        columns: ["gold", "silver", "bronze"],
        sort: [["year", "desc"]]
    })

    const sport =  new PerspectiveWidget("Sports by Age", {
        "row-pivots": ["athlete"],
        columns: ["age", "sport", "total"],
        sort: [["gold", "desc"]],
        aggregates: {"sport": "dominant"},
        plugin: "xy_scatter"
    })

    const athlete =  new PerspectiveWidget("Athletes by Year", {
        "row-pivots": ["athlete"],
        "column-pivots": ["year"],
        columns: ["gold", "silver", "bronze", "total"],
        sort: [["total", "desc"]],
    })

    const country =  new PerspectiveWidget("Country by Year", {
        "row-pivots": ["year"],
        "column-pivots": ["country"],
        columns: ["gold", "silver", "bronze"],
        plugin: "y_bar"
    })

    // add widgets to workspace
    workspace.addViewer(countryMaster)
    workspace.makeMaster(countryMaster)

    workspace.addViewer(yearMaster)
    workspace.makeMaster(yearMaster)

    workspace.addViewer(athlete)
    workspace.addViewer(sport, {mode: "split-bottom", ref: athlete})
    workspace.addViewer(country, {mode: "split-right", ref: sport})

    countryMaster.load(table)
    yearMaster.load(table)
    athlete.load(table)
    sport.load(table)
    country.load(table)

    // resize workspace on window resize
    window.onresize = () => workspace.update()
});
	<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="https://unpkg.com/@finos/perspective-phosphor/dist/themes/material.css">
	<link rel='stylesheet' href="index.css">

	<script src="https://unpkg.com/@finos/perspective-phosphor/dist/umd/perspective-phosphor.js"></script>
	<script src="https://unpkg.com/@finos/perspective-viewer-hypergrid"></script>
	<script src="https://unpkg.com/@finos/perspective-viewer-d3fc"></script>
	<script src="https://unpkg.com/@finos/perspective"></script>
	<script src="index.js"></script>
	</head>
	<body> </body>
	</html>
	const SCHEMA = {
	athlete: "string",
	age: "integer",
	country: "string",
	year: "string",
	date: "date",
	sport: "string",
	gold: "integer",
	silver: "integer",
	bronze: "integer",
	total: "integer",

	}

	window.addEventListener("load", function() {
	//request data and initialise table
	const request = fetch("https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json")
	const worker = perspective.worker();
	const table = worker.table(SCHEMA);

	request
	.then(response => response.json()
	.then(data => {
	table.update(data)
	}))


	const PerspectiveWorkspace = PerspectivePhosphor.PerspectiveWorkspace
	const PerspectiveWidget = PerspectivePhosphor.PerspectiveWidget

	// create widgets
	const workspace = new PerspectiveWorkspace({node: document.body})
	const countryMaster = new PerspectiveWidget("Country", {
	"row-pivots": ["country"],
	columns: ["gold", "silver", "bronze"],
	sort: [["gold", "desc"]]
	})

	const yearMaster = new PerspectiveWidget("Year", {
	"row-pivots": ["year"],
	columns: ["gold", "silver", "bronze"],
	sort: [["year", "desc"]]
	})

	const sport = new PerspectiveWidget("Sports by Age", {
	"row-pivots": ["athlete"],
	columns: ["age", "sport", "total"],
	sort: [["gold", "desc"]],
	aggregates: {"sport": "dominant"},
	plugin: "xy_scatter"
	})

	const athlete = new PerspectiveWidget("Athletes by Year", {
	"row-pivots": ["athlete"],
	"column-pivots": ["year"],
	columns: ["gold", "silver", "bronze", "total"],
	sort: [["total", "desc"]],
	})

	const country = new PerspectiveWidget("Country by Year", {
	"row-pivots": ["year"],
	"column-pivots": ["country"],
	columns: ["gold", "silver", "bronze"],
	plugin: "y_bar"
	})

	// add widgets to workspace
	workspace.addViewer(countryMaster)
	workspace.makeMaster(countryMaster)

	workspace.addViewer(yearMaster)
	workspace.makeMaster(yearMaster)

	workspace.addViewer(athlete)
	workspace.addViewer(sport, {mode: "split-bottom", ref: athlete})
	workspace.addViewer(country, {mode: "split-right", ref: sport})

	countryMaster.load(table)
	yearMaster.load(table)
	athlete.load(table)
	sport.load(table)
	country.load(table)

	// resize workspace on window resize
	window.onresize = () => workspace.update()
	});