Update docs for new theme API

finos · Feb 1, 2022 · a817e7e · a817e7e
1 parent 135c84f
commit a817e7e
Show file tree

Hide file tree

Showing 44 changed files with 526 additions and 495 deletions.
diff --git a/.gitignore b/.gitignore
@@ -125,7 +125,7 @@ cmake-build-debug
 .pytest_cache
 
 package.json.lerna_backup
-website/static/css/material.dark.css
+website/static/css/material-dark.css
 
 # CPP Compile
 /src/include/boost
@@ -179,7 +179,7 @@ rust/perspective-viewer/target2
 .emsdk
 vcpkg
 
-docs/static/css/material.dark.css
+docs/static/css/material-dark.css
 docs/i18n/en.json
 docs/static/js
 

diff --git a/docs/js/concepts.js b/docs/js/concepts.js
@@ -20,7 +20,7 @@ async function main() {
         viewer.load(table);
         const token = {};
         for (const attribute of viewer.attributes) {
-            if (attribute.name !== "settings") {
+            if (attribute.name !== "settings" && attribute.name !== "theme") {
                 token[attribute.name] = JSON.parse(attribute.nodeValue);
             }
         }

diff --git a/docs/js/examples.js b/docs/js/examples.js
@@ -19,9 +19,9 @@ async function run_with_theme(page, is_dark = false) {
     <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>
     <script src="/node_modules/@finos/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js"></script>
-    <link rel='stylesheet' href="/node_modules/@finos/perspective-viewer/dist/umd/material-dense.${
-        is_dark ? "dark." : ""
-    }css" is="custom-style">
+    <link rel='stylesheet' href="/node_modules/@finos/perspective-viewer/dist/css/material${
+        is_dark ? "-dark" : ""
+    }.css">
     <style>
         perspective-viewer {
             position: absolute;

diff --git a/docs/js/fonts.js b/docs/js/fonts.js
diff --git a/docs/js/index.js b/docs/js/index.js
@@ -109,15 +109,15 @@ function select(id) {
                 sort: [["chg", "desc"]],
                 plugin_config: {
                     "chg (-)": {
-                        color_mode: "bar",
+                        number_color_mode: "bar",
                         gradient: 10,
                     },
                     "chg (+)": {
-                        color_mode: "bar",
+                        number_color_mode: "bar",
                         gradient: 10,
                     },
                     chg: {
-                        color_mode: "gradient",
+                        number_color_mode: "gradient",
                         gradient: 10,
                     },
                 },
@@ -311,25 +311,28 @@ window.addEventListener("DOMContentLoaded", async function () {
                 const light = document.querySelector(
                     ".productShowcaseSection #light"
                 );
+                let theme;
                 if (button.innerText === "SWITCH TO DARK THEME") {
                     button.innerText = "Switch to Light Theme";
                     dark.style.display = "flex";
                     light.style.display = "none";
+                    theme = "Material Dark";
                     section.classList.toggle("dark", true);
                     container.classList.toggle("dark", true);
                 } else {
                     button.innerText = "Switch to Dark Theme";
                     dark.style.display = "none";
                     light.style.display = "flex";
+                    theme = "Material Light";
                     section.classList.toggle("dark", false);
                     container.classList.toggle("dark", false);
                 }
                 await psp1.restore({
-                    plugin: ["Y Bar"],
+                    plugin: "Y Bar",
                     group_by: ["State"],
                     columns: ["Sales"],
+                    theme,
                 });
-                await psp1.restyleElement();
             });
     });
 });