Preload fonts from NPM

finos · Jul 16, 2021 · 59f622c · 59f622c
1 parent fd29999
commit 59f622c
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 78 deletions.
diff --git a/docs/js/concepts.js b/docs/js/concepts.js
@@ -3,6 +3,10 @@ import perspective from "@finos/perspective";
 const worker = perspective.shared_worker();
 
 async function main() {
+    if (window.location.pathname === "/" || window.location.pathname === "/index.html") {
+        return;
+    }
+
     const arrow = await fetch("../../arrow/superstore.arrow");
     const table = await worker.table(await arrow.arrayBuffer());
 

diff --git a/docs/js/examples.js b/docs/js/examples.js
@@ -35,8 +35,10 @@ async function run_with_theme(page, is_dark = false) {
     </perspective-viewer>
     <script>
         const WORKER = window.perspective.worker();
-        function on_load() {
+        async function on_load() {
             var el = document.getElementsByTagName('perspective-viewer')[0];
+            const plugin = await el._vieux.get_plugin("Heatmap");
+            plugin.render_warning = false;
             WORKER.table(this.response).then(table => {
                 el.load(table);
                 el.toggleConfig();

diff --git a/docs/js/features.js b/docs/js/features.js
@@ -846,5 +846,17 @@ exports.EXAMPLES = [
             sort: [["Discount", "col asc"]]
         },
         viewport: {width: 600, height: 450}
+    },
+    {
+        name: "Heatmap 4",
+        config: {
+            plugin: "Heatmap",
+            columns: ["Profit"],
+            expressions: ['bucket("Profit", 100)', "bucket(\"Order Date\", 'M')"],
+            "row-pivots": ["bucket(\"Order Date\", 'M')"],
+            "column-pivots": ['bucket("Profit", 100)'],
+            plugin_config: {}
+        },
+        viewport: {width: 600, height: 450}
     }
 ];
diff --git a/docs/js/index.js b/docs/js/index.js
@@ -11,8 +11,36 @@ import {appendChild} from "domutils";
 import {div} from "prelude-ls";
 import {getEffectiveConstraintOfTypeParameter} from "typescript";
 
-var SECURITIES = ["AAPL.N", "MSFT.N", "AMZN.N", "GOOGL.N", "FB.N", "TSLA.N", "BABA.N", "TSM.N", "V.N", "NVDA.N", "JPM.N", "JNJ.N", "WMT.N", "UNH.N", "MA.N", "BAC.N"];
-var CLIENTS = ["Homer", "Marge", "Bart", "Lisa", "Maggie"];
+var SECURITIES = [
+    "AAPL.N",
+    "MSFT.N",
+    "AMZN.N",
+    "GOOGL.N",
+    "FB.N",
+    "TSLA.N",
+    "BABA.N",
+    "TSM.N",
+    "V.N",
+    "NVDA.N",
+    "JPM.N",
+    "JNJ.N",
+    "WMT.N",
+    "UNH.N",
+    "MA.N",
+    "BAC.N",
+    "DIS.N",
+    "ASML.N",
+    "ADBE.N",
+    "CMCSA.N",
+    "NKE.N",
+    "XOM.N",
+    "TM.N",
+    "KO.N",
+    "ORCL.N",
+    "NFLX.N"
+];
+
+var CLIENTS = ["Homer", "Marge", "Bart", "Lisa", "Maggie", "Barney", "Ned", "Moe"];
 var id = 0;
 
 function randn_bm() {
@@ -24,7 +52,7 @@ function randn_bm() {
 }
 
 function newRow() {
-    id = id % 500;
+    id = id % 1000;
     return {
         name: SECURITIES[Math.floor(Math.random() * SECURITIES.length)],
         client: CLIENTS[Math.floor(Math.random() * CLIENTS.length)],
@@ -37,39 +65,18 @@ function newRow() {
     };
 }
 
-var styleElement = document.createElement("style");
-styleElement.innerText = `
-.homeContainer perspective-viewer, perspective-viewer {
-    box-shadow: none !important;
-    overflow: visible !important;
-    --plugin--box-shadow:  0 2px 4px 0 rgb(0 0 0 / 10%);
-}
-
-.homeContainer perspective-viewer {
-    background: none !important;
-}`;
-
-document.head.appendChild(styleElement);
-
-var freq = 1,
-    freqdir = 1,
+var freq = 100,
     elem;
 
 function update(table) {
-    var viewport_height = document.documentElement.clientHeight;
-    if (viewport_height - window.scrollY > 0) {
-        table.update([newRow(), newRow(), newRow()]);
+    if (freq !== 190) {
+        var viewport_height = document.documentElement.clientHeight;
+        if (viewport_height - window.scrollY > 0) {
+            table.update([newRow(), newRow(), newRow()]);
+        }
     }
-    // if (freq === 0) {
-    //     setTimeout(() => update(table), 3000);
-    //     // freqdir = 1;
-    // } else {
-    setTimeout(() => update(table), 100);
-    // }
-    // if (freq > 60) {
-    //     freqdir = -1;
-    // }
-    // freq += freqdir;
+
+    setTimeout(() => update(table), freq);
 }
 
 function select(id) {
@@ -175,7 +182,7 @@ window.addEventListener("DOMContentLoaded", async function() {
     }
 
     var data = [];
-    for (var x = 0; x < 500; x++) {
+    for (var x = 0; x < 1000; x++) {
         data.push(newRow());
     }
     elem = Array.prototype.slice.call(document.querySelectorAll("perspective-viewer"))[0];
@@ -188,13 +195,17 @@ window.addEventListener("DOMContentLoaded", async function() {
         update(tbl, 0);
     });
 
-    document.querySelector("#grid").addEventListener("mouseenter", () => select("#grid"));
-    document.querySelector("#grid2").addEventListener("mouseenter", () => select("#grid2"));
-    document.querySelector("#cyclone").addEventListener("mouseenter", () => select("#cyclone"));
-    document.querySelector("#pivot").addEventListener("mouseenter", () => select("#pivot"));
-    document.querySelector("#crosssect").addEventListener("mouseenter", () => select("#crosssect"));
-    document.querySelector("#intersect").addEventListener("mouseenter", () => select("#intersect"));
-    document.querySelector("#enhance").addEventListener("mouseenter", () => select("#enhance"));
+    document.querySelector("#velocity").addEventListener("input", function(event) {
+        freq = (-9 / 5) * this.value + 190;
+    });
+
+    document.querySelector("#grid").addEventListener("mousedown", () => select("#grid"));
+    document.querySelector("#grid2").addEventListener("mousedown", () => select("#grid2"));
+    document.querySelector("#cyclone").addEventListener("mousedown", () => select("#cyclone"));
+    document.querySelector("#pivot").addEventListener("mousedown", () => select("#pivot"));
+    document.querySelector("#crosssect").addEventListener("mousedown", () => select("#crosssect"));
+    document.querySelector("#intersect").addEventListener("mousedown", () => select("#intersect"));
+    document.querySelector("#enhance").addEventListener("mousedown", () => select("#enhance"));
 
     select("#grid");
 

diff --git a/docs/pages/en/index.js b/docs/pages/en/index.js
@@ -90,6 +90,7 @@ class HomeSplash extends React.Component {
                         <Button id="intersect">Treemap</Button>
                         <Button id="pivot">Heatmap</Button>
                     </PromoSection>
+                    <input id="velocity" type="range" class="slider"></input>
                 </div>
             </SplashContainer>
         );
@@ -468,15 +469,15 @@ const ChartTypes = props => {
         return null;
     }
 
-    const showcase_light = Array.from(Array(74).keys()).map((user, i) => {
+    const showcase_light = Array.from(Array(75).keys()).map((user, i) => {
         return (
             <a className="feature" key={i} data-key={i}>
                 <img src={`features/feature_${i}.png`} />
             </a>
         );
     });
 
-    const showcase_dark = Array.from(Array(74).keys()).map((user, i) => {
+    const showcase_dark = Array.from(Array(75).keys()).map((user, i) => {
         return (
             <a className="feature" key={i} data-key={i}>
                 <img src={`features/feature_${i}_dark.png`} />

diff --git a/docs/siteConfig.js b/docs/siteConfig.js
@@ -80,6 +80,13 @@ const siteConfig = {
     },
     scripts: ["https://buttons.github.io/buttons.js", "js/index.js"],
     stylesheets: [
+        {rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous"},
+        {rel: "preload", href: "https://fonts.gstatic.com/s/materialicons/v92/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2", as: "font", crossOrigin: "anonymous"},
+        {rel: "preload", href: "https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2", as: "font", crossOrigin: "anonymous"},
+        {rel: "preload", href: "https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2", as: "font", crossOrigin: "anonymous"},
+        {rel: "preload", href: "https://fonts.gstatic.com/s/robotomono/v13/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vvtSM1J-gEPT5Ese09hHSh0me8iUI0.woff2", as: "font", crossOrigin: "anonymous"},
+        {rel: "preload", href: "https://fonts.gstatic.com/s/orbitron/v17/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nysimBoWg1fDAlp7lk.woff", as: "font", crossOrigin: "anonymous"},
+        {rel: "preload", href: "https://fonts.gstatic.com/s/publicsans/v5/ijwGs572Xtc6ZYQws9YVwllKVG8qX1oyOymuFpmJxAcufVotfzbj.woff", as: "font", crossOrigin: "anonymous"},
         "https://fonts.googleapis.com/css?family=Material+Icons",
         "https://fonts.googleapis.com/css?family=Open+Sans",
         "https://fonts.googleapis.com/css?family=Public+Sans",

diff --git a/docs/static/css/custom.css b/docs/static/css/custom.css
@@ -163,6 +163,50 @@ h2.headerTitle {
     border: 1px solid #333;
 }
 
+.homeContainer perspective-viewer, perspective-viewer {
+    box-shadow: none !important;
+    /* overflow: visible !important; */
+    --plugin--box-shadow:  0 2px 4px 0 rgb(0 0 0 / 10%);
+}
+
+.slider {
+    margin-top: 12px;
+    width: 200px;
+    -webkit-appearance: none;
+    height: 10px;
+    border-radius: 5px;  
+    background: rgba(0,0,0,0.5);
+    border-color: #f9f9f9;
+    border: 1px solid #666;
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: .2s;
+    transition: opacity .2s;
+  }
+
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%; 
+    background: #242526;
+    border: 1px solid #666;
+    cursor: pointer;
+  }
+
+  .slider::-moz-range-thumb {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background: #04AA6D;
+    cursor: pointer;
+  }
+
+.homeContainer perspective-viewer {
+    background: none !important;
+}
+
 .homeContainer perspective-viewer, perspective-viewer {
     --d3fc-full--gradient: linear-gradient(#4d342f 0%, #e4521b 22.5%, #feeb65 42.5%, #f0f0f0 50%, #dcedc8 57.5%, #42b3d5 67.5%, #1a237e 100%);
     --d3fc-positive--gradient: linear-gradient(#222222 0%, #1a237e 35%, #42b3d5 70%, #dcedc8 100%);

diff --git a/examples/blocks/src/editable/index.html b/examples/blocks/src/editable/index.html
@@ -11,9 +11,14 @@
 <html>
 
 <head>
-
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 
+    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="anonymous"/>
+    <link rel="preload"href="https://fonts.gstatic.com/s/materialicons/v92/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2" as="font" crossorigin="anonymous"/>
+    <link rel="preload"href="https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2" as="font" crossorigin="anonymous"/>
+    <link rel="preload"href="https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2" as="font" crossorigin="anonymous"/>
+    <link rel="preload"href="https://fonts.gstatic.com/s/robotomono/v13/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vvtSM1J-gEPT5Ese09hHSh0me8iUI0.woff2" as="font" crossorigin="anonymous"/>
+
     <script src="/node_modules/@finos/perspective/dist/umd/perspective.js"></script>
     <script src="/node_modules/@finos/perspective-viewer/dist/umd/perspective-viewer.js"></script>
     <script src="/node_modules/@finos/perspective-viewer-datagrid/dist/umd/perspective-viewer-datagrid.js"></script>

diff --git a/examples/workspace/src/index.html b/examples/workspace/src/index.html
@@ -2,6 +2,18 @@
 <html>
   <head>
     <meta charset="UTF-8">
+
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/>
+    <link rel="preload"href="https://fonts.gstatic.com/s/materialicons/v92/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2" as="font" crossorigin="anonymous"/>
+    <link rel="preload"href="https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2" as="font" crossorigin="anonymous"/>
+    <link rel="preload"href="https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2" as="font" crossorigin="anonymous"/>
+    <link rel="preload"href="https://fonts.gstatic.com/s/robotomono/v13/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vvtSM1J-gEPT5Ese09hHSh0me8iUI0.woff2" as="font" crossorigin="anonymous"/>
+
+    <!-- <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="anonymous"/>
+    <link rel="preload"href="https://fonts.googleapis.com/css?family=Material+Icons" as="style" crossorigin="anonymous"/>
+    <link rel="preload"href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" as="style" crossorigin="anonymous"/>
+    <link rel="preload"href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400&display=swap" as="style" crossorigin="anonymous"/> -->
+
   </head>
   <body>
     <perspective-workspace id="workspace">

diff --git a/rust/perspective-vieux/src/rust/custom_elements/vieux.rs b/rust/perspective-vieux/src/rust/custom_elements/vieux.rs
@@ -129,15 +129,19 @@ impl PerspectiveVieuxElement {
     /// # Arguments
     /// - `update` The config to restore to, as returned by `.save()`.
     pub fn js_restore(&self, update: JsPerspectiveViewConfigUpdate) -> js_sys::Promise {
-        future_to_promise({
-            let session = self.session.clone();
-            let renderer = self.renderer.clone();
-            async move {
-                let update = update.into_serde().to_jserror()?;
-                session.create_view(update).await?;
-                drop(renderer.draw(&session).await?);
-                Ok(session.get_view().as_ref().unwrap().as_jsvalue())
-            }
+        let session = self.session.clone();
+        let renderer = self.renderer.clone();
+        future_to_promise(async move {
+            let update = update.into_serde().to_jserror()?;
+            drop(
+                renderer
+                    .draw(async {
+                        session.create_view(update).await.unwrap();
+                        &session
+                    })
+                    .await?,
+            );
+            Ok(session.get_view().as_ref().unwrap().as_jsvalue())
         })
     }