some animation fixes

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

@@ -18,14 +19,27 @@
  let rows = [];
  let cols = [];

-  (function generateRandomMatrix(width, height, minValue, maxValue, undefinedValues) {
+
+  /**
+   * Ignore the code below. It's just some hacks to generate some random data for demo
+   */
+  function shuffle(a) {
+    for (let i = a.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [a[i], a[j]] = [a[j], a[i]];
+    }
+    return a;
+  }
+
+  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) {
+        if (undefinedValues && Math.random() > 0.8) {
          values.push(undefined);
        } else {
          values.push(Math.random() * (maxValue - minValue + 1) + minValue);
@@ -35,23 +49,27 @@
        }
      }
    }
-  })(20, 20, -1, 1, true);
+
+    if (Math.random() > 0.8) shuffle(rows);
+    if (Math.random() > 0.8) shuffle(cols);
+  }

  /**
-   * API "Documentation" below this point
+   * API "documentation" below this point
   */
+
  const container = document.querySelector('#heatmap-container');
  const heatmap = AdaCharts.chart({ chartType: 'heatmap', container });
-  heatmap.update({
-    // values: [1, 0.6997416730183142, -0.29628389941597716, -0.6279173805293008, 0.18412161271303787, -0.35819237583867736, -0.1602431191307706, 0.6997416730183142, 1, -0.4230351005269855, -0.4438241608646983, 0.27089441906720413, -0.4540784161973978, -0.22110543494560858, -0.29628389941597716, -0.4230351005269855, 1, 0.19988596824381763, -0.34487036108378405, 0.3645420902772759, 0.5910901002900717, -0.6279173805293008, -0.4438241608646983, 0.19988596824381763, 1, -0.16746121346398238, 0.22674392710482927, 0.12165768098716498, 0.18412161271303787, 0.27089441906720413, -0.34487036108378405, -0.16746121346398238, 1, -0.41194311422982127, -0.08549287142639136, -0.35819237583867736, -0.4540784161973978, 0.3645420902772759, 0.22674392710482927, -0.41194311422982127, 1, 0.20141771903103936, -0.1602431191307706, -0.22110543494560858, 0.5910901002900717, 0.12165768098716498, -0.08549287142639136, 0.20141771903103936, 1],
-    // rows:  ["MDS UPDRS Total Score (Part I)", "MDS UPDRS Total Score (Part II)", "Sniff Total Score", "PDSS Total Score", "Age at Basic Assessment", "Total Points for MOCA:", "Cerad Total Score"],
-    // cols: ["MDS UPDRS Total Score (Part I)", "MDS UPDRS Total Score (Part II)", "Sniff Total Score", "PDSS Total Score", "Age at Basic Assessment", "Total Points for MOCA:", "Cerad Total Score"],
-    values,
-    rows,
-    cols,
-    valueRange: [-1, 1],
-    sequential: true
-  });
+
+  function toPNG() {
+    heatmap.toPNG();
+  }
+
+  function update() {
+    generateRandomMatrix(25, 25, -1, 1, true);
+    heatmap.update({ values, rows, cols, valueRange: [-1, 1], sequential: true });
+  }
+  update();
 </script>

 <style>

--- a/src/charts/impl/Heatmap.js
+++ b/src/charts/impl/Heatmap.js
@@ -113,7 +113,6 @@ export default class extends Chart {
      .attr('height', this.yScale.bandwidth())
      .attr('x', d => this.xScale(d.col))
      .attr('y', d => this.yScale(d.row))
-      .merge(rect)
      .attr('fillStyle', (d) => {
        if (typeof d.value === 'undefined') return '#000';
        return colorScale(d.value);
@@ -125,7 +124,11 @@ export default class extends Chart {
      .attr('width', this.xScale.bandwidth())
      .attr('height', this.yScale.bandwidth())
      .attr('x', d => this.xScale(d.col))
-      .attr('y', d => this.yScale(d.row));
+      .attr('y', d => this.yScale(d.row))
+      .attr('fillStyle', (d) => {
+        if (typeof d.value === 'undefined') return '#000';
+        return colorScale(d.value);
+      });

    rect.exit()
      .remove();