Code to capture the visualization using Nightmare.

Author: ashleydavis

Diff for: capture-visualization/index.js

@@ -0,0 +1 @@
+This file is just to ensure that the output directory exists.

Diff for: capture-visualization/output/placeholder.txt

@@ -0,0 +1,16 @@
+{
+  "name": "listing-4",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "express": "4.16.2",
+    "nightmare": "2.10.0"
+  }
+}

Diff for: capture-visualization/package.json

@@ -0,0 +1,43 @@
+//
+// A reusable toolkit function to capture a web page to an image file using Nightmare.
+//
+
+"use strict";
+
+const Nightmare = require('nightmare');
+
+//
+// Capture the web page specified by URL to the specifed image file.
+//
+function captureWebPage (urlToCapture, captureElementSelector, outputImagePath) {
+    console.log("<< " + urlToCapture);
+    console.log(">> " + outputImagePath);
+
+    const nightmare = new Nightmare(); // Create an Nightmare instance.
+    return nightmare.goto(urlToCapture) // Point the browser at the requested web page.
+        .wait(captureElementSelector) // Wait until the specified HTML element appears on the screen. 
+        .evaluate(captureElementSelector => { // Evaluate JavaScript code within the headless browser. This function returns a promise which changes the way our code works.
+            const body = document.querySelector("body"); // Find the body element of the web page.
+            const captureElement = document.querySelector(captureElementSelector); // Find the HTML element to be captured in the DOM.
+            const captureRect = captureElement.getBoundingClientRect(); // Get the area that we want to capture.
+            return { // Return details computed in the headless browser to Node.js.
+                documentArea: { // Return the scrollable area of the page, we will expand the size of the browser window to cover the entire documents (thus removing any scrollbars we might otherwise capture).
+                    width: body.scrollWidth,
+                    height: body.scrollHeight
+                },
+                captureArea: { // Return the rect of the area of the page (e.g. the chart) that we want to capture.
+                    x: captureRect.left,
+                    y: captureRect.top,
+                    width: captureRect.right - captureRect.left,
+                    height: captureRect.bottom - captureRect.top
+                }
+            };
+        }, captureElementSelector)
+        .then(pageDetails => { // Retrieve details computed in the headless browser. We can now use these value in subsequent Node.js code.
+            return nightmare.viewport(pageDetails.documentArea.width, pageDetails.documentArea.height) // Set the viewport to cover the area of the chart.
+                .screenshot(outputImagePath, pageDetails.captureArea) // Capture a screenshot to an image file.
+                .end(); // End the Nightmare session. Any queued operations are complated and the headless browser is terminated.
+        });
+};
+
+module.exports = captureWebPage; // Export the function so we can use it in other code modules.

Diff for: capture-visualization/toolkit/capture-web-page.js

@@ -0,0 +1,22 @@
+"use strict";
+
+const webServer = require('./template-chart/web-server.js');
+const captureWebPage = require('./capture-web-page.js');
+
+//
+// A function that renders data to a line chart. Outputs an image file at the specified path.
+//
+function renderLineChart (data, chartSize, outputImagePath) {
+    return webServer.start(data, chartSize)
+        .then(server => {
+            const urlToCapture = "http://localhost:3000";
+            return captureWebPage(urlToCapture, "svg", outputImagePath)
+                .then(() => server.close());
+        });
+};
+
+module.exports = {
+    renderLineChart: renderLineChart,
+
+    // ... You might want to add other chart types here ...
+};

Diff for: capture-visualization/toolkit/charts.js

@@ -0,0 +1,11 @@
+
+body {
+    background: white;
+}
+
+/*
+Make the output image look better.
+*/
+svg {
+    padding: 5px;
+}

Diff for: capture-visualization/toolkit/template-chart/public/app.css

@@ -0,0 +1,27 @@
+"use strict";
+
+//
+// Render a chart to a particular element on the page.
+//
+function renderChart (bindto, data, size) {
+    var chart = c3.generate({
+        bindto: bindto,
+        size: size,
+        data: data, // The entire data object is now being passed through from Node.js.
+        transition: {
+            duration: 0 // Disable animated transitions when we are capturing a static image.
+        }
+    });    
+};
+
+$(function () {
+
+    $.get("chart-data") // Now using a new 'chart-data' REST API that provides the entire data object for the chart.
+        .then(function (response) {
+            renderChart("#chart", response.data, response.chartSize);
+        })
+        .catch(function (err) {
+            console.error(err);
+        });
+});
+

Diff for: capture-visualization/toolkit/template-chart/public/app.js

@@ -0,0 +1,21 @@
+{
+  "name": "c3-template-web-page",
+  "homepage": "https://github.com/JavaScript-Data-Wrangling/Chapter-10",
+  "authors": [
+    "Ashley Davis <[email protected]>"
+  ],
+  "description": "",
+  "main": "",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "jquery": "^3.3.1",
+    "c3": "^0.4.18"
+  }
+}

Diff for: capture-visualization/toolkit/template-chart/public/bower.json

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <title>NYC average yearly temperature</title>
+
+        <link href="bower_components/c3/c3.css" rel="stylesheet">
+        <link href="app.css" rel="stylesheet">
+
+        <script src="bower_components/jquery/dist/jquery.js"></script>
+        <script src="bower_components/d3/d3.js"></script>
+        <script src="bower_components/c3/c3.js"></script>
+        <script src="app.js"></script>
+    </head>
+    <body>
+        <div id='chart'></div>
+    </body>
+</html>

Diff for: capture-visualization/toolkit/template-chart/public/index.html

@@ -0,0 +1,32 @@
+"use strict";
+
+const express = require('express');
+const path = require('path');
+
+module.exports = {
+    start: (data, chartSize) => { // Start a web server, we pass the C3 data object through to the web-server via the 'start' function.
+        return new Promise((resolve, reject) => {
+            const app = express();
+
+            const staticFilesPath = path.join(__dirname, "public");
+            const staticFilesMiddleWare = express.static(staticFilesPath);
+            app.use("/", staticFilesMiddleWare);
+
+            app.get("/chart-data", (request, response) => { // Make the data available to the web-app via the REST API (HTTP GET).
+                response.json({
+                    data: data,
+                    chartSize: chartSize,
+                });
+            });
+            
+            const server = app.listen(3000, err => { // Start our web server!
+                if (err) {
+                    reject(err);
+                }
+                else {
+                    resolve(server);
+                }
+            });
+        });
+    }
+}