finos · texodus · Mar 10, 2020 · Feb 24, 2020 · Feb 24, 2020 · Feb 27, 2020
diff --git a/examples/simple/superstore-custom-grid.html b/examples/simple/superstore-custom-grid.html
@@ -0,0 +1,224 @@
+<!--
+
+   Copyright (c) 2017, the Perspective Authors.
+
+   This file is part of the Perspective library, distributed under the terms of
+   the Apache License 2.0.  The full license can be found in the LICENSE file.
+
+-->
+
+<!DOCTYPE html>
+<html>
+
+<head>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+
+    <script src="perspective-viewer.js"></script>
+    <script src="perspective-viewer-datagrid.js"></script>
+
+    <link rel='stylesheet' href="index.css">
+    <link rel='stylesheet' href="material-dense.dark.css" is="custom-style">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron">
+
+
+</head>
+
+<body>
+
+    <perspective-viewer plugin="datagrid" columns='["Profit", "Sub-Category",
+    "State", "Sales", "Category", "Order Date", "Quantity"]'>
+
+    </perspective-viewer>
+
+    <script>
+
+
+        function hue(value, min, max) {
+            const norm = "0" + Math.abs(Math.round(255 * (Math.min(Math.max(value, min), max) / (max - min)))).toString(16);
+            return norm.slice(norm.length - 2, norm.length);
+        }
+
+        window.addEventListener('WebComponentsReady', async function() {
+            const viewer = document.getElementsByTagName('perspective-viewer')[0];
+            const data = await fetch("superstore.arrow");
+            const arr = await data.arrayBuffer();
+            viewer.load(arr.slice());
+            viewer.toggleConfig();
+
+            const CACHE = {}
+            let max = -Infinity;
+
+            viewer.addEventListener("perspective-config-update", () => {
+                max = -Infinity;
+            });
+
+            viewer.addEventListener("perspective-datagrid-after-update", () => {
+
+                const cache = Object.keys(CACHE).reduce((obj, key) => {
+                    obj[key] = CACHE[key].slice();
+                    return obj;
+                }, {});
+
+
+                for (const td of document.querySelectorAll("perspective-viewer td")) {
+
+                    const clean_name = td.value && td.value.trim && td.value.trim();
+                    if (td.classList.contains("float")) {
+                        if (td.value < 0) {
+                            const fg = hue(Math.min(td.value, -50), -100, 0);
+                            td.style.color = `#${fg}${fg}${fg}`;
+                            td.style.background = `radial-gradient(#${hue(Math.min(td.value, -20), -100, 0)}3136, #243136`;;
+                            td.style.border = `1px solid #${hue(Math.min(td.value / 3, -20), -100, 0)}3136`;;
+                        } else if (td.value > 0) {
+                            const fg = hue(Math.max(td.value, 50), 0, 100);
+                            td.style.color = `#${fg}${fg}${fg}`;
+                            td.style.background =  `radial-gradient(#24${hue(Math.max(20, td.value), 0, 100)}36, #243136`
+                            td.style.border = `1px solid #24${hue(Math.max(td.value / 3, 20), 0, 100)}36`;;
+                        } else {
+                            td.style.color = "#000";
+                            td.style.background = "";
+                            td.style.border = ``;;
+                        }
+                    } else if (td.classList.contains("integer")) {
+                        td.style.background = "";
+                        td.style.border = ``;;
+                        if (!td.value) {
+                        } else {
+                            max = Math.max(max, td.value || 0);
+                            console.log(max)
+                            let v = (td.value || 0) / max
+                            td.innerHTML = `<div style="height:15px;width:${v * 100}%;background:linear-gradient(90deg, #2bb0af 0, #23a7d7);"><div>`;
+                        }
+                    } else if (states[clean_name]) {
+                        td.style.background = "";
+                        td.style.border = ``;;
+                        if (cache[clean_name] && cache[clean_name].length > 0) {
+                            const name = td.value;
+                            td.textContent = "";
+                            td.appendChild(cache[name].pop());
+                        } else {
+                            const name = td.value;
+                            img = document.createElement("img");
+                            img.setAttribute("src", `http://perspective.finos.org/img/flags/${states[clean_name].toLowerCase()}.png`);
+                            img.setAttribute("height", "15");
+                            td.textContent = "";
+                            td.appendChild(img);
+                            CACHE[name] = CACHE[name] || [];
+                            CACHE[name].push(img);                           
+                        }
+
+                    } else {
+                        td.style.border = ``;;
+                        td.style.background = "";
+                        td.style.color = "";                
+                    }
+                }
+            });            
+
+            const states = {
+                "Alabama": "AL",
+                "Alaska": "AK",
+                "Arizona": "AZ",
+                "Arkansas": "AR",
+                "California": "CA",
+                "Colorado": "CO",
+                "Connecticut": "CT",
+                "District of Columbia": "DC",
+                "Delaware": "DE",
+                "Florida": "FL",
+                "Georgia": "GA",
+                "Hawaii": "HI",
+                "Idaho": "ID",
+                "Illinois": "IL",
+                "Indiana": "IN",
+                "Iowa": "IA",
+                "Kansas": "KS",
+                "Kentucky": "KY",
+                "Louisiana": "LA",
+                "Maine": "ME",
+                "Maryland": "MD",
+                "Massachusetts": "MA",
+                "Michigan": "MI",
+                "Minnesota": "MN",
+                "Mississippi": "MS",
+                "Missouri": "MO",
+                "Montana": "MT",
+                "Nebraska": "NE",
+                "Nevada": "NV",
+                "New Hampshire": "NH",
+                "New Jersey": "NJ",
+                "New Mexico": "NM",
+                "New York": "NY",
+                "North Carolina": "NC",
+                "North Dakota": "ND",
+                "Ohio": "OH",
+                "Oklahoma": "OK",
+                "Oregon": "OR",
+                "Pennsylvania": "PA",
+                "Rhode Island": "RI",
+                "South Carolina": "SC",
+                "South Dakota": "SD",
+                "Tennessee": "TN",
+                "Texas": "TX",
+                "Utah": "UT",
+                "Vermont": "VT",
+                "Virginia": "VA",
+                "Washington": "WA",
+                "West Virginia": "WV",
+                "Wisconsin": "WI",
+                "Wyoming": "WY"
+            };
+
+        });
+    </script>
+
+    <style>
+        td {       
+            height: 24px;           
+        }
+        tr td.pd-group-header, tr th.pd-group-header {
+            border-right: 1px solid #666 !important;
+        }
+        tbody:hover tr {
+            opacity: 0.5;
+            transition: opacity 0.2s ease-in;
+        }
+        tbody:hover tr:hover td div {
+            transform: scaleX(1.3);
+            transform-origin:0;
+            transition: transform 0.2s ease-in;
+        }
+        tbody:hover tr:hover { 
+            box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
+            opacity: 1;
+            transition: none;
+        } 
+        tr:last-child th {
+            border-bottom: 1px solid #666;
+        }
+        tr th {
+            border-right: 1px solid #666;
+        }
+        tbody:hover tr:hover td { 
+            background: none;
+            opacity: 1;
+        }
+        tbody:hover tr:nth-child(even):hover td, tbody tr:nth-child(even) td {
+            background: rgba(0,0,0,0.1);
+        }
+        td.float {
+            text-align: center !important;
+            font-family: Orbitron;
+        }
+        th.integer, td.integer {
+            width: 100px;
+        }
+
+    </style>
+</body>
+
+</html>
+
+
+
diff --git a/examples/simple/superstore-datagrid.html b/examples/simple/superstore-datagrid.html
@@ -0,0 +1,46 @@
+<!--
+
+   Copyright (c) 2017, the Perspective Authors.
+
+   This file is part of the Perspective library, distributed under the terms of
+   the Apache License 2.0.  The full license can be found in the LICENSE file.
+
+-->
+
+<!DOCTYPE html>
+<html>
+
+<head>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+
+    <script src="perspective-viewer.js"></script>
+    <script src="perspective-viewer-datagrid.js"></script>
+    <script src="perspective-viewer-d3fc.js"></script>
+
+    <script src="perspective.js"></script>
+
+    <link rel='stylesheet' href="index.css">
+    <link rel='stylesheet' href="material-dense.css" is="custom-style">
+
+
+</head>
+
+<body>
+
+    <perspective-viewer plugin="datagrid" >
+
+    </perspective-viewer>
+
+    <script>
+        window.addEventListener('WebComponentsReady', async function() {
+            const viewer = document.getElementsByTagName('perspective-viewer')[0];
+            const data = await fetch("superstore.arrow");
+            viewer.load(await data.arrayBuffer());
+            viewer.toggleConfig();
+        });
+    </script>
+
+</body>
+
+</html>
diff --git a/packages/perspective-test/jest.all.config.js b/packages/perspective-test/jest.all.config.js
@@ -4,6 +4,7 @@ module.exports = {
         "packages/perspective-viewer/test/js",
         "packages/perspective-viewer-hypergrid/test/js",
         "packages/perspective-viewer-highcharts/test/js",
+        "packages/perspective-viewer-datagrid/test/js",
         "packages/perspective-viewer-d3fc/test/js",
         "packages/perspective-workspace/test/js",
         "packages/perspective-jupyterlab/test/js"

diff --git a/packages/perspective-viewer-datagrid/babel.config.js b/packages/perspective-viewer-datagrid/babel.config.js
@@ -0,0 +1,21 @@
+module.exports = {
+    presets: [
+        [
+            "@babel/preset-env",
+            {
+                targets: {
+                    chrome: "70",
+                    node: "8",
+                    ios: "12",
+                    safari: "12",
+                    edge: "44"
+                },
+                modules: false,
+                useBuiltIns: "usage",
+                corejs: 3
+            }
+        ]
+    ],
+    sourceType: "unambiguous",
+    plugins: ["lodash", ["@babel/plugin-proposal-decorators", {legacy: true}], "transform-custom-element-classes", "@babel/plugin-proposal-optional-chaining"]
+};
diff --git a/packages/perspective-viewer-datagrid/package.json b/packages/perspective-viewer-datagrid/package.json
@@ -0,0 +1,47 @@
+{
+    "name": "@finos/perspective-viewer-datagrid",
+    "version": "0.4.4",
+    "description": "Perspective.js",
+    "main": "dist/cjs/perspective-viewer-datagrid.js",
+    "module": "dist/cjs/perspective-viewer-datagrid.js",
+    "browser": "dist/cjs/perspective-viewer-datagrid.js",
+    "unpkg": "dist/umd/perspective-viewer-datagrid.js",
+    "files": [
+        "dist/**/*",
+        "babel.config.js"
+    ],
+    "scripts": {
+        "bench": "npm-run-all bench:build bench:run",
+        "bench:build": "echo \"No Benchmarks\"",
+        "bench:run": "echo \"No Benchmarks\"",
+        "prebuild": "mkdirp dist/esm",
+        "build:babel": "cpx \"src/**/*\" dist && babel src/js --source-maps --out-dir dist/esm",
+        "build:webpack:esm": "webpack --color --config src/config/cjs.config.js",
+        "build:webpack:umd": "webpack --color --config src/config/umd.config.js",
+        "build": "npm-run-all build:babel build:webpack:esm build:webpack:umd",
+        "test:build": "cpx \"test/html/*\" dist/umd",
+        "test:run": "jest --rootDir=. --config=../perspective-test/jest.config.js --silent --color 2>&1",
+        "test": "npm-run-all test:build test:run",
+        "clean": "rimraf dist",
+        "clean:screenshots": "rimraf \"screenshots/**/*.@(failed|diff).png\""
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/finos/perspective"
+    },
+    "author": "",
+    "license": "Apache-2.0",
+    "dependencies": {
+        "@finos/perspective": "^0.4.4",
+        "@finos/perspective-viewer": "^0.4.4",
+        "core-js": "^3.6.4",
+        "superscript-number": "^1.0.0"
+    },
+    "devDependencies": {
+        "@finos/perspective-test": "^0.4.4",
+        "@finos/perspective-webpack-plugin": "^0.4.4"
+    }
+}
diff --git a/packages/perspective-viewer-datagrid/src/config/cjs.config.js b/packages/perspective-viewer-datagrid/src/config/cjs.config.js
@@ -0,0 +1,15 @@
+const path = require("path");
+const common = require("@finos/perspective/src/config/common.config.js");
+
+module.exports = common({}, config =>
+    Object.assign(config, {
+        entry: "./dist/esm/datagrid.js",
+        externals: [/^[a-z0-9@]/],
+        output: {
+            filename: "perspective-viewer-datagrid.js",
+            library: "perspective-viewer-datagrid",
+            libraryTarget: "umd",
+            path: path.resolve(__dirname, "../../dist/cjs")
+        }
+    })
+);
diff --git a/packages/perspective-viewer-datagrid/src/config/umd.config.js b/packages/perspective-viewer-datagrid/src/config/umd.config.js
@@ -0,0 +1,14 @@
+const path = require("path");
+const common = require("@finos/perspective/src/config/common.config.js");
+
+module.exports = common({}, config =>
+    Object.assign(config, {
+        entry: "./dist/cjs/perspective-viewer-datagrid.js",
+        output: {
+            filename: "perspective-viewer-datagrid.js",
+            library: "perspective-viewer-datagrid",
+            libraryTarget: "umd",
+            path: path.resolve(__dirname, "../../dist/umd")
+        }
+    })
+);