Merge pull request #1380 from finos/workspace-vieux

Material Theme 2.0

Author: texodus

cpp/perspective/package.json

@@ -11,7 +11,7 @@
     ],
     "scripts": {
         "build": "node ../../scripts/run_emsdk.js node ./build.js",
-        "clean": "rimraf dist/cpp/build",
+        "clean": "rimraf dist/cpp/build dist/umd dist/esm dist/cjs",
         "test": ":",
         "test:run": ":",
         "test:build": ":"

docs/static/js/animation.js

@@ -29,7 +29,7 @@ styleElement.innerText = `
 .homeContainer perspective-viewer, perspective-viewer {
     box-shadow: none !important;
     overflow: visible !important;
-    --plugin--box-shadow: 0 5px 5px rgba(0,0,0,0.2);
+    --plugin--box-shadow:  0 2px 4px 0 rgb(0 0 0 / 10%);
 }
 
 .homeContainer perspective-viewer {
@@ -141,7 +141,7 @@ window.addEventListener("WebComponentsReady", async function() {
     var worker = window.perspective.worker();
     var tbl = await worker.table(data, {index: "id"});
     elem.load(tbl);
-    elem._toggle_config();
+    elem.toggleConfig();
 
     setTimeout(function() {
         update(tbl, 0);

examples/blocks/src/custom/index.html

@@ -226,6 +226,7 @@
     <style>
         perspective-viewer td {
             height: 24px;
+            border-color: #1d1d1d !important;
         }
 
         perspective-viewer table, perspective-viewer table tr:hover {

examples/promo/script.js

@@ -152,7 +152,7 @@ async function script(page) {
 
     // close filter
     await page.evaluate(viewer => viewer.toggleConfig(), viewer2);
-    await page.waitFor(200);
+    await page.waitFor(1000);
     await page.mouse.click(200, 200, {button: "right"});
     await page.waitFor(100);
     await page.mouse.click(220, 220);
@@ -180,10 +180,14 @@ async function script(page) {
     await poke("row-pivots", ["second_bucket(lastUpdate)"]);
     await page.waitFor(1000);
     await poke("column-pivots", ["client"]);
-    await page.waitFor(3000);
+    await page.waitFor(1000);
+    await poke("filters", [["client", "in", ["Marge", "Lisa"]]]);
+    await page.waitFor(1000);
 
     await poke("plugin", "heatmap");
-    await page.waitFor(3000);
+    await page.waitFor(200);
+    await poke("filters", []);
+    await page.waitFor(1000);
 
     await poke("filters", [["vol", ">", 107]]);
     await page.waitFor(200);
@@ -197,7 +201,7 @@ async function script(page) {
     await page.waitFor(200);
 
     await poke("columns", ["bid"]);
-    await page.waitFor(3000);
+    await page.waitFor(1000);
 
     //script(page);
 }

examples/promo/webpack.config.js

@@ -25,6 +25,11 @@ module.exports = {
     ],
     module: {
         rules: [
+            {
+                test: /\.js$/,
+                enforce: "pre",
+                use: ["source-map-loader"]
+            },
             {
                 test: /\.css$/,
                 use: [{loader: "style-loader"}, {loader: "css-loader"}]

examples/workspace/package.json

@@ -4,7 +4,7 @@
     "version": "0.6.2",
     "description": "An example app built using `@finos/perspective-workspace`.",
     "scripts": {
-        "start": "webpack-dev-server --open",
+        "start": "webpack serve --open",
         "webpack": "webpack --colour"
     },
     "keywords": [],
@@ -22,4 +22,4 @@
         "npm-run-all": "^4.1.3",
         "rimraf": "^2.5.2"
     }
-}
+}

packages/perspective-jupyterlab/test/results/linux.docker.json

@@ -1,6 +1,6 @@
 {
-    "resize_Basic_widget_functions": "a14f4d324f4bd8a82b4c288d5718f83b",
-    "resize_Resize_the_container_causes_the_widget_to_resize": "a14f4d324f4bd8a82b4c288d5718f83b",
-    "resize_row_pivots_traitlet_works": "dd9ada8ff87ff15db7af2d28a29c5144",
-    "__GIT_COMMIT__": "53aed115cad04a850a54c1b210776c4e64fb5aad"
+    "resize_Basic_widget_functions": "42eb23b1b428217d7d35d966be44ff9c",
+    "resize_Resize_the_container_causes_the_widget_to_resize": "42eb23b1b428217d7d35d966be44ff9c",
+    "resize_row_pivots_traitlet_works": "ac75a115d8542b61aa50d5621cc3cb0d",
+    "__GIT_COMMIT__": "6dd0f47040cb7b100a47b800b003f2cab423b37b"
 }

packages/perspective-viewer-d3fc/src/js/gridlines/gridlines.js

@@ -8,20 +8,17 @@
  */
 import * as fc from "d3fc";
 
-const mainGridSvg = settings => x =>
-    x
-        .style("opacity", "0.3")
-        .style("stroke-width", "1.0")
-        .style("stroke", settings ? settings.colorStyles.grid.gridLineColor : "#bbb");
-
-const mainGridCanvas = c => {
-    c.globalAlpha = 0.3;
-    c.lineWidth = 1.0;
+const mainGridSvg = settings => x => x.style("stroke-width", "1.0").style("stroke", settings ? settings.colorStyles.grid.gridLineColor : "#bbb");
+
+const mainGridCanvas = settings => c => {
+    c.strokeStyle = settings ? settings.colorStyles.grid.gridLineColor : "#bbb";
+    c.lineWidth = 1;
 };
 
 const crossGridSvg = x => x.style("display", "none");
-const crossGridCanvas = c => {
-    c.globalAlpha = 0;
+const crossGridCanvas = settings => c => {
+    c.lineWidth = 1;
+    c.strokeStyle = settings ? settings.colorStyles.grid.gridLineColor : "#bbb";
 };
 
 export default (series, settings) => {
@@ -40,8 +37,8 @@ export default (series, settings) => {
         if (canvas) {
             seriesMulti = fc.seriesCanvasMulti().context(context);
             annotationGridline = fc.annotationCanvasGridline();
-            mainGrid = mainGridCanvas;
-            crossGrid = crossGridCanvas;
+            mainGrid = mainGridCanvas(settings);
+            crossGrid = crossGridCanvas(settings);
         }
 
         const multi = seriesMulti.xScale(xScale).yScale(yScale);

packages/perspective-viewer-d3fc/src/js/plugin/plugin.js

@@ -41,25 +41,31 @@ export function register(...plugins) {
 
 function drawChart(chart) {
     return async function(el, view, task, end_col, end_row) {
-        let jsonp;
+        let jsonp, metadata;
         const realValues = JSON.parse(this.getAttribute("columns"));
-
-        if (end_col && end_row) {
-            jsonp = view.to_json({end_row, end_col, leaves_only: true});
-        } else if (end_col) {
-            jsonp = view.to_json({end_col, leaves_only: true});
-        } else if (end_row) {
-            jsonp = view.to_json({end_row, leaves_only: true});
-        } else {
-            jsonp = view.to_json({leaves_only: true});
+        try {
+            if (end_col && end_row) {
+                jsonp = view.to_json({end_row, end_col, leaves_only: true});
+            } else if (end_col) {
+                jsonp = view.to_json({end_col, leaves_only: true});
+            } else if (end_row) {
+                jsonp = view.to_json({end_row, leaves_only: true});
+            } else {
+                jsonp = view.to_json({leaves_only: true});
+            }
+            metadata = await Promise.all([this._table.schema(false), view.computed_schema(false), view.schema(false), jsonp, view.get_config()]);
+        } catch (e) {
+            if (e.message !== "View is not initialized") {
+                throw e;
+            }
         }
 
-        let [table_schema, computed_schema, view_schema, json, config] = await Promise.all([this._table.schema(false), view.computed_schema(false), view.schema(false), jsonp, view.get_config()]);
-
         if (task.cancelled) {
             return;
         }
 
+        let [table_schema, computed_schema, view_schema, json, config] = metadata;
+
         /**
          * Retrieve a tree axis column from the table and computed schemas,
          * returning a String type or `undefined`.
@@ -105,7 +111,7 @@ function getOrCreatePluginElement() {
 function createOrUpdateChart(div, chart, settings) {
     const perspective_d3fc_element = getOrCreatePluginElement.call(this);
 
-    if (!document.body.contains(perspective_d3fc_element)) {
+    if (!div.contains(perspective_d3fc_element)) {
         div.innerHTML = "";
         div.appendChild(perspective_d3fc_element);
     }

packages/perspective-viewer-d3fc/src/less/chart.less

@@ -6,7 +6,10 @@
  * the Apache License 2.0.  The full license can be found in the LICENSE file.
  *
  */
-@sans-serif-fonts: Arial, sans-serif;
+ 
+ @import "~@finos/perspective-viewer/src/less/variables.less";
+ 
+ @sans-serif-fonts: Arial, sans-serif;
 
 :host {
     .chart {
@@ -193,6 +196,11 @@
             line-height: 1em !important;
         }
 
+        & .x-label, & .y-label {
+            color: var(--d3fc-label--color, inherit);
+            font-size: 14px;
+        }
+
         & d3fc-canvas.plot-area {
             display: none;
         }
@@ -339,8 +347,9 @@
         &[borderbox-on-hover="true"] {
             transition: box-shadow 1s;
             &:hover {
-                box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
-                transition: box-shadow 0.2s;
+                background-color: var(--d3fc-legend--background, #ffffff);
+                box-shadow: @elevation1;
+                transition: box-shadow 0.2s,  background-color 0.2s;
             }
         }
 
@@ -451,12 +460,13 @@
         position: absolute;
         text-align: left;
         font-size: 10pt;
+        font-weight: 300;
         white-space: nowrap;
         padding: 0.5em;
         background: var(--d3fc-tooltip--background, #ffffff);
         color: var(--d3fc-tooltip--color, black);
-        border: 1px solid #777777;
-        border-radius: 2px;
+        border: 1px solid var(--d3fc-tooltip--border-color, #777777);
+        box-shadow: var(--d3fc-tooltip--box-shadow, none);
         pointer-events: none;
     }