Much better performance, especially on resize.

zachleat · zachleat · commit 8f43076418aa · 2021-10-05T22:18:10.000-05:00
diff --git a/.eleventy.js b/.eleventy.js
@@ -5,6 +5,8 @@ module.exports = function(eleventyConfig) {
   // Support yaml data files
   eleventyConfig.addDataExtension("yaml", contents => yaml.safeLoad(contents))
 
+  eleventyConfig.addWatchTarget("src/site/survey/**/*.js");
+
   // pass images directly through to the output
   eleventyConfig.addPassthroughCopy("src/site/img");
   eleventyConfig.addPassthroughCopy({
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "@zachleat/filter-container": "^1.0.3",
     "autoprefixer": "^10.2.5",
     "cssnano": "^4.1.10",
+    "d3": "^7.1.1",
     "dotenv": "^8.2.0",
     "fast-glob": "^3.2.5",
     "gray-matter": "^4.0.2",
diff --git a/src/site/_includes/layouts/base.njk b/src/site/_includes/layouts/base.njk
@@ -35,6 +35,9 @@ ogimage: "/img/og/default-og-image.png"
     <meta name="google-site-verification" content="i5IheizQ6X_M4jNqb_b7vbJrT34i_gvEg8Gxkq9IY_w" />
     <meta name="google-site-verification" content="WDIQ_1X8K7XIpPJ5G1Z8KnOqdSeYetPQB4EgoTLfIsc" />
     <script type="module">document.documentElement.classList.add("js");</script>
+    {%- for url in javascripts %}
+    <script defer src="{{ url }}"></script>
+    {%- endfor %}
   </head>
   <body class="bg-blue-900 text-blue-100 leading-relaxed antialiased">
     <svg width="0" height="0" aria-hidden="true" style="position: absolute;">
@@ -93,8 +96,5 @@ ogimage: "/img/og/default-og-image.png"
     {%- for path in javascriptIncludes %}
     {% include path %}
     {%- endfor %}
-    {%- for url in javascripts %}
-    <script defer src="{{ url }}"></script>
-    {%- endfor %}
   </body>
 </html>
diff --git a/src/site/survey/2021.njk b/src/site/survey/2021.njk
@@ -4,9 +4,7 @@ layout: layouts/base.njk
 stylesheets: 
   - /css/d3chart.css
 javascripts:
-  - https://d3js.org/d3.v7.min.js
-  - /js/d3chart.js
-  - /js/d3chart-survey.js
+  - /survey/2021/bundle.js
 gradientColors:
   sunrise: [ "#F0047F", "#FC814A" ]
   blue: [ "#0090c9", "#00c0ad" ]
diff --git a/src/site/survey/2021/d3chart-survey.js b/src/site/survey/2021/d3chart-survey.js
diff --git a/src/site/survey/2021/d3chart.js b/src/site/survey/2021/d3chart.js
@@ -60,6 +60,45 @@ class D3Chart {
     this.options.labelColors = this.normalizeColors(this.options.labelColors, this.options.colorMod);
   }
 
+  onResize(callback) {
+    if (!("ResizeObserver" in window)) {
+      window.addEventListener("resize", () => {
+        callback.call(this);
+      });
+      return;
+    }
+    
+    let resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        // console.log( "resizing", this.target );
+        callback.call(this);
+      }
+    });
+
+    resizeObserver.observe(this.target);
+  }
+
+  onDeferInit(callback) {
+    if (!('IntersectionObserver' in window)) {
+      callback.call(this);
+      return;
+    }
+
+    let observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          // console.log( "initing", this.target );
+          callback.call(this);
+          observer.unobserve(entry.target);
+        }
+      });
+    }, {
+      threshold: .1
+    });
+
+    observer.observe(this.target);
+  }
+
   normalizeColors(colors = [], mod = 0) {
     if(mod) {
       let c = [];
@@ -349,11 +388,14 @@ class D3VerticalBarChart extends D3Chart {
 
     let data = Object.assign(d3.csvParse(csvData, d3.autoType));
 
-    this.render(chart, data);
-    this.renderLegend(data);
 
-    window.addEventListener("resize", () => {
+    this.onDeferInit(function() {
       this.render(chart, data);
+      this.renderLegend(data);
+
+      this.onResize(function() {
+        this.render(chart, data);
+      })
     });
   }
 
@@ -500,11 +542,13 @@ class D3HorizontalBarChart extends D3Chart {
     let csvData = chart.parseDataToCsv(tableId, true);
     let data = Object.assign(d3.csvParse(csvData, d3.autoType));
 
-    this.render(chart, data);
-    this.renderLegend(data);
-
-    window.addEventListener("resize", () => {
+    this.onDeferInit(function() {
       this.render(chart, data);
+      this.renderLegend(data);
+
+      this.onResize(function() {
+        this.render(chart, data);
+      });
     });
   }
 
@@ -692,11 +736,13 @@ class D3BubbleChart extends D3Chart {
       return b.r - a.r;
     });
 
-    this.render(chart, data);
-    this.renderLegend(data);
-
-    window.addEventListener("resize", () => {
+    this.onDeferInit(function() {
       this.render(chart, data);
+      this.renderLegend(data);
+  
+      this.onResize(function() {
+        this.render(chart, data);
+      });
     });
   }
 
diff --git a/src/site/survey/2021/js.njk b/src/site/survey/2021/js.njk
@@ -0,0 +1,6 @@
+---
+permalink: /survey/2021/bundle.js
+---
+{% include "../../../../node_modules/d3/dist/d3.min.js" %}
+{% include "./d3chart.js" %}
+{% include "./d3chart-survey.js" %}
