toPNG / sorting with undefined

91595804 · Sascha Herzinger · 21dc9c41 · 91595804 · 91595804 · 91595804
Commit 91595804 authored Dec 07, 2018 by Sascha Herzinger
--- a/examples/test-heatmap.html
+++ b/examples/test-heatmap.html
@@ -6,27 +6,40 @@
    <script src="http://localhost:8080/ada-charts.js"></script>
 </head>
 <body>
-<div id="heatmap-container"></div>
+    <div id="heatmap-controls">
+        <button onclick="heatmap.toPNG()">toPNG()</button>
+    </div>
+    <div id="heatmap-container"></div>
 </body>
-
 </html>

 <script>
-  const values = [];
-  const rows = [];
-  const cols = [];
-  const min = -1;
-  const max = 1;
-  for (let i = 0; i < 50; i += 1) {
-    rows.push(`row: ${i}`);
-    for (let j = 0; j < 50; j += 1) {
-      values.push(Math.random() * (max - min + 1) + min);
-      if (i === 0) {
-        cols.push(`col: ${j}`);
+  let values = [];
+  let rows = [];
+  let cols = [];
+
+  (function generateRandomMatrix(width, height, minValue, maxValue, undefinedValues) {
+    values = [];
+    rows = [];
+    cols = [];
+    for (let i = 0; i < height; i += 1) {
+      rows.push(`row - ${i}`);
+      for (let j = 0; j < width; j += 1) {
+        if (undefinedValues && Math.random() > 0.9) {
+          values.push(undefined);
+        } else {
+          values.push(Math.random() * (maxValue - minValue + 1) + minValue);
+        }
+        if (i === 0) {
+          cols.push(`col - ${j}`);
+        }
      }
    }
-  }
+  })(20, 20, -1, 1, true);

+  /**
+   * API "Documentation" below this point
+   */
  const container = document.querySelector('#heatmap-container');
  const heatmap = AdaCharts.chart({ chartType: 'heatmap', container });
  heatmap.update({
@@ -42,8 +55,17 @@
 </script>

 <style>
+    body {
+        display: flex;
+        flex-direction: row;
+    }
+
+    #heatmap-controls {
+        display: flex;
+        flex-direction: column;
+    }
    #heatmap-container {
-        width: 100vw;
-        height: 100vh;
+        width: 50vw;
+        height: 50vh;
    }
 </style>
--- a/package-lock.json
+++ b/package-lock.json
@@ -590,6 +590,11 @@
        }
      }
    },
+    "base64-arraybuffer": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
+      "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg="
+    },
    "base64-inline-loader": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/base64-inline-loader/-/base64-inline-loader-1.1.1.tgz",
@@ -1315,6 +1320,14 @@
        "randomfill": "^1.0.3"
      }
    },
+    "css-line-break": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz",
+      "integrity": "sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=",
+      "requires": {
+        "base64-arraybuffer": "^0.1.5"
+      }
+    },
    "css-loader": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.1.tgz",
@@ -3677,6 +3690,14 @@
      "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=",
      "dev": true
    },
+    "html2canvas": {
+      "version": "1.0.0-alpha.12",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-alpha.12.tgz",
+      "integrity": "sha1-OxmS48mz9WBjw1/WIElPN+uohRM=",
+      "requires": {
+        "css-line-break": "1.0.1"
+      }
+    },
    "http-deceiver": {
      "version": "1.2.7",
      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",

--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
    "devserver": "webpack-dev-server --mode development"
  },
  "dependencies": {
-    "d3": "5.7.0"
+    "d3": "5.7.0",
+    "html2canvas": "1.0.0-alpha.12"
  },
  "devDependencies": {
    "webpack": "4.26.1",

--- a/src/assets/css/heatmap.css
+++ b/src/assets/css/heatmap.css
@@ -18,6 +18,7 @@
 }

 .ac-tooltip {
+    font-size: 1.25rem;
    position: absolute;
    background: rgba(0,0,0,0.7);
    pointer-events: none;

--- a/src/charts/Chart.js
+++ b/src/charts/Chart.js
+import html2canvas from 'html2canvas';
+
 export default class {
  constructor({ container }) {
    this.container = container;
  }

-  static get name() {
+  get name() {
    throw Error('name getter not implemented.');
  }

  update() {
    throw Error('update() not implemented.');
  }
+
+  prepareSVGForCapture() {
+    throw Error('prepareSVGForCapture() not implemented.');
+  }
+
+  toPNG() {
+    html2canvas(this.container).then((canvas) => {
+      const img = canvas.toDataURL('image/png');
+      const a = document.createElement('a');
+      a.href = img;
+      a.download = 'foo.png';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    });
+  }
 }
--- a/src/charts/impl/Heatmap.js
+++ b/src/charts/impl/Heatmap.js
@@ -53,6 +53,10 @@ export default class extends Chart {
    return 'heatmap';
  }

+  prepareSVGForCapture() {
+    return this.svg;
+  }
+
  prepareValues({ values, rows, cols }) {
    this.data = [];
    rows.forEach((row, i) => {
@@ -109,13 +113,13 @@ export default class extends Chart {
      .attr('height', this.yScale.bandwidth())
      .attr('x', d => this.xScale(d.col))
      .attr('y', d => this.yScale(d.row))
-      .attr('fillStyle', d => colorScale(d.value));
-
-    rect
+      .merge(rect)
      .attr('fillStyle', (d) => {
-        if (typeof d.value === 'undefined') return 'black';
+        if (typeof d.value === 'undefined') return '#000';
        return colorScale(d.value);
-      })
+      });
+
+    rect
      .transition()
      .duration(ANIMATION_DURATION)
      .attr('width', this.xScale.bandwidth())
@@ -132,7 +136,7 @@ export default class extends Chart {
      let text = self.text();
      while (textLength > (margin.left) && text.length > 0) {
        text = text.slice(0, -1);
-        self.text(`${text}...`);
+        self.text(`${text}..`);
        textLength = self.node().getComputedTextLength();
      }
    }
@@ -149,7 +153,11 @@ export default class extends Chart {
      .on('click', (row) => {
        this.cols = this.data
          .filter(d => d.row === row)
-          .sort((a, b) => b.value - a.value)
+          .sort((a, b) => {
+            if (typeof a.value === 'undefined') return 1;
+            if (typeof b.value === 'undefined') return 0;
+            return b.value - a.value;
+          })
          .map(d => d.col);
        this.update({});
      })
@@ -176,7 +184,11 @@ export default class extends Chart {
      .on('click', (col) => {
        this.rows = this.data
          .filter(d => d.col === col)
-          .sort((a, b) => b.value - a.value)
+          .sort((a, b) => {
+            if (typeof a.value === 'undefined') return 1;
+            if (typeof b.value === 'undefined') return 0;
+            return b.value - a.value;
+          })
          .map(d => d.row);
        this.update({});
      })