feat(examples): brushing examples (#104)

* feat(examples): brushing examples * fix: correct unit tests
carlhannes · Oct 24, 2019 · e4d41e7 · e4d41e7
1 parent 6f954ed
commit e4d41e7
Show file tree

Hide file tree

Showing 10 changed files with 12,009 additions and 56 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,9 +21,11 @@
     "eslint-config-react-app": "4.0.0",
     "eslint-loader": "2.1.2",
     "eslint-plugin-flowtype": "3.6.1",
+    "extend": "^3.0.2",
     "file-loader": "4.0.0",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "fs-extra": "7.0.1",
+    "hammerjs": "^2.0.8",
     "html-webpack-plugin": "4.0.0-beta.5",
     "identity-obj-proxy": "3.0.0",
     "jest": "24.7.1",
@@ -42,6 +44,7 @@
     "postcss-preset-env": "6.6.0",
     "postcss-safe-parser": "4.0.1",
     "prop-types": "15.7.2",
+    "random-seed": "^0.3.0",
     "react": "16.8.6",
     "react-app-polyfill": "1.0.0",
     "react-dev-utils": "9.0.0",

diff --git a/src/components/rendering-area/rendering-area.jsx b/src/components/rendering-area/rendering-area.jsx
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 
 import picasso from 'picasso.js';
 import picQ from 'picasso-plugin-q';
+import 'hammerjs';
 import picHammer from 'picasso-plugin-hammer';
 
 import enigma from 'enigma.js';
@@ -15,6 +16,8 @@ import runScript from 'run-script';
 import './rendering-area.css';
 import debounce from '../../core/generic/debounce';
 
+import quickHypercube from '../../core/data/quick-hypercube';
+
 // Use picasso plugins
 picasso.use(picQ);
 picasso.use(picHammer);
@@ -24,74 +27,86 @@ let prevDataScript;
 let prevSettings;
 let prevData;
 
-const debouncedProcess = debounce((props) => {
-  const {
-    code, dataScript, pic, message,
-  } = props;
-
-  let doRun = false;
-  let data = prevData;
-  let settings = prevSettings;
-
-  if (code !== prevCode) {
-    doRun = true;
-    settings = runScript(code, {
-      picasso: pic,
-      enigma,
-      enigmaSchema,
-    });
-  }
-  if (dataScript !== prevDataScript) {
-    doRun = true;
-    data = runScript(dataScript);
-  }
-
-  if (!doRun) {
-    return;
-  }
+const logError = (...params) => {
+  // eslint-disable-next-line no-console
+  console.error(...params);
+};
 
-  if (message && message.current) {
-    if (settings && settings.error) {
-      message.current.innerHTML = `Settings error: ${settings.error.name}`;
-    } else if (data && data.error) {
-      message.current.innerHTML = `Data error: ${data.error.name}`;
-    } else {
-      const result = runScript('picasso.update({ data, settings })', {
-        data, settings, picasso: pic,
+class RenderingArea extends Component {
+  debouncedProcess = debounce((props) => {
+    const {
+      code, dataScript, message,
+    } = props;
+
+    let doRun = false;
+    let data = prevData;
+    let settings = prevSettings;
+
+    if (code !== prevCode) {
+      this.reboot();
+      doRun = true;
+      settings = runScript(code, {
+        picasso: this.pic,
+        enigma,
+        enigmaSchema,
+      });
+    }
+    if (dataScript !== prevDataScript) {
+      doRun = true;
+      data = runScript(dataScript, {
+        picasso: this.pic,
+        enigma,
+        enigmaSchema,
+        quickHypercube,
       });
+    }
+
+    if (!doRun) {
+      return;
+    }
 
-      if (result && result.error) {
-        message.current.innerHTML = `Rendering error: ${result.error.name}`;
+    if (message && message.current) {
+      if (settings && settings.error) {
+        message.current.innerHTML = `Settings error: ${settings.error.name}`;
+        logError(settings.error);
+      } else if (data && data.error) {
+        message.current.innerHTML = `Data error: ${data.error.name}`;
+        logError(data.error);
       } else {
-        message.current.innerHTML = 'Success';
+        const result = runScript('picasso.update({ data, settings })', {
+          data, settings, picasso: this.pic,
+        });
+
+        if (result && result.error) {
+          message.current.innerHTML = `Rendering error: ${result.error.name}`;
+          logError(result.error);
+        } else {
+          message.current.innerHTML = 'Success';
+        }
       }
     }
-  }
 
-  prevCode = code;
-  prevSettings = settings;
-  prevDataScript = dataScript;
-  prevData = data;
-}, 200);
+    prevCode = code;
+    prevSettings = settings;
+    prevDataScript = dataScript;
+    prevData = data;
+  }, 200);
 
-const debouncedResize = debounce(({ pic }) => {
-  runScript('picasso.update()', {
-    picasso: pic,
-  });
-}, 50);
+  debouncedResize = debounce(() => {
+    runScript('picasso.update()', {
+      picasso: this.pic,
+    });
+  }, 50);
 
-class RenderingArea extends Component {
   constructor(...props) {
     super(...props);
     this.element = React.createRef();
     this.message = React.createRef();
-
-    this.processPicasso = this.processPicasso.bind(this);
-    this.resize = this.resize.bind(this);
   }
 
+
   componentDidMount() {
-    this.pic = runScript('return picasso.chart({ element })', { picasso, element: this.element.current });
+    this.reboot();
     this.processPicasso();
     window.addEventListener('resize', this.resize);
   }
@@ -102,18 +117,26 @@ class RenderingArea extends Component {
     window.removeEventListener('resize', this.resize);
   }
 
-  resize() {
-    debouncedResize({ pic: this.pic });
+  reboot = () => {
+    if (this.pic) {
+      this.pic.destroy();
+      this.pic = undefined;
+    }
+    this.pic = runScript('return picasso.chart({ element })', { picasso, element: this.element.current });
+  }
+
+  resize = () => {
+    this.debouncedResize();
   }
 
-  processPicasso() {
+  processPicasso = () => {
     if (!(this.pic)) {
       return;
     }
 
     const { code, data } = this.props;
 
-    debouncedProcess({
+    this.debouncedProcess({
       code, dataScript: data, pic: this.pic, message: this.message,
     });
   }