Replace image resizing sample with chartist sample

samples/misc/NodeServicesExamples/Controllers/HomeController.cs

@@ -1,5 +1,6 @@
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.NodeServices;
 
 namespace NodeServicesExamples.Controllers
 {
@@ -15,8 +16,21 @@ namespace NodeServicesExamples.Controllers
             return View();
         }
 
-        public IActionResult ImageResizing()
+        public async Task<IActionResult> Chart([FromServices] INodeServices nodeServices)
         {
+            var options = new { width = 400, height = 200, showArea = true, showPoint = true, fullWidth = true };
+            var data = new
+            {
+                labels = new[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" },
+                series = new[] {
+                    new[] { 1, 5, 2, 5, 4, 3 },
+                    new[] { 2, 3, 4, 8, 1, 2 },
+                    new[] { 5, 4, 3, 2, 1, 0 }
+                }
+            };
+
+            ViewData["ChartMarkup"] = await nodeServices.InvokeAsync<string>("./Node/renderChart", "line", options, data);
+
             return View();
         }
 

samples/misc/NodeServicesExamples/Controllers/ResizeImage.cs

@@ -1,64 +0,0 @@
-using System;
-using System.IO;
-using System.Threading.Tasks;
-using Microsoft.AspNetCore.Hosting;
-using Microsoft.AspNetCore.Mvc;
-using Microsoft.AspNetCore.NodeServices;
-using Microsoft.AspNetCore.StaticFiles;
-
-namespace NodeServicesExamples.Controllers
-{
-    public class ResizeImageController : Controller
-    {
-        private const int MaxDimension = 1000;
-        private static string[] AllowedMimeTypes = new[] { "image/jpeg", "image/png", "image/gif" };
-
-        private IHostingEnvironment _environment;
-        private INodeServices _nodeServices;
-
-        public ResizeImageController(IHostingEnvironment environment, INodeServices nodeServices)
-        {
-            _environment = environment;
-            _nodeServices = nodeServices;
-        }
-
-        [Route("resize/{*imagePath}")]
-        public async Task<IActionResult> Index(string imagePath, int maxWidth, int maxHeight)
-        {
-            // Validate incoming params
-            if (maxWidth < 0 || maxHeight < 0 || maxWidth > MaxDimension || maxHeight > MaxDimension
-                || (maxWidth + maxHeight) == 0)
-            {
-                return BadRequest("Invalid dimensions");
-            }
-
-            var mimeType = GetContentType(imagePath);
-            if (Array.IndexOf(AllowedMimeTypes, mimeType) < 0)
-            {
-                return BadRequest("Disallowed image format");
-            }
-
-            // Locate source image on disk
-            var fileInfo = _environment.WebRootFileProvider.GetFileInfo(imagePath);
-            if (!fileInfo.Exists)
-            {
-                return NotFound();
-            }
-
-            // Invoke Node and pipe the result to the response
-            var imageStream = await _nodeServices.InvokeAsync<Stream>(
-                "./Node/resizeImage",
-                fileInfo.PhysicalPath,
-                mimeType,
-                maxWidth,
-                maxHeight);
-            return File(imageStream, mimeType);
-        }
-
-        private string GetContentType(string path)
-        {
-            string result;
-            return new FileExtensionContentTypeProvider().TryGetContentType(path, out result) ? result : null;
-        }
-    }
-}

samples/misc/NodeServicesExamples/Node/renderChart.js

@@ -0,0 +1,8 @@
+var generate = require('node-chartist');
+
+module.exports = function (callback, type, options, data) {
+    generate(type, options, data).then(
+        result => callback(null, result), // Success case
+        error => callback(error)          // Error case
+    );
+};

samples/misc/NodeServicesExamples/Node/resizeImage.js

@@ -1,8 +0,0 @@
-var sharp = require('sharp');
-
-module.exports = function(result, physicalPath, mimeType, maxWidth, maxHeight) {
-    // Invoke the 'sharp' NPM module, and have it pipe the resulting image data back to .NET
-    sharp(physicalPath)
-        .resize(maxWidth || null, maxHeight || null)
-        .pipe(result.stream);
-}

samples/misc/NodeServicesExamples/Views/Home/Chart.cshtml

@@ -0,0 +1,12 @@
+<h1>Server-rendered chart</h1>
+
+<p>
+    This sample demonstrates how arbitrary NPM modules can be invoked from .NET code.
+</p>
+<p>
+    In this case, we use <code>node-chartist</code> to render the following chart on the server. The output is
+    identical to what you'd get if you used <a href='https://gionkunz.github.io/chartist-js/'>chartist.js</a>
+    on the client, except that in this example, we're not executing any client-side code at all.
+</p>
+
+@Html.Raw(ViewData["ChartMarkup"])

samples/misc/NodeServicesExamples/Views/Home/ImageResizing.cshtml

@@ -1,34 +0,0 @@
-<h1>Image Resizing</h1>
-
-<p>
-    This sample shows how the NPM module <a href="https://www.npmjs.com/package/sharp"><code>sharp</code></a>
-    can be used for dynamic image resizing from within an ASP.NET Core application. There is one copy of the
-    following image on disk, but we can set up an MVC action method that returns it resized to fit within an
-    arbitrary width and height.
-</p>
-
-<p>
-    <strong>Dependencies:</strong> On Windows and Linux, there are no native dependencies. Just running
-    <code>npm install</code> is enough. On OS X, however, you need to have <code>libvips</code> installed,
-    which you can get through <a href="http://brew.sh/">Homebrew</a> by running
-    <code>brew install homebrew/science/vips</code>.
-</p>
-
-<h3>100px wide [<a href="/resize/images/parrot.jpg?maxWidth=100">open</a>]</h3>
-<img src="/resize/images/parrot.jpg?maxWidth=100" />
-
-<h3>200px wide [<a href="/resize/images/parrot.jpg?maxWidth=200">open</a>]</h3>
-<img src="/resize/images/parrot.jpg?maxWidth=200" />
-
-<h3>400px wide [<a href="/resize/images/parrot.jpg?maxWidth=400">open</a>]</h3>
-<img src="/resize/images/parrot.jpg?maxWidth=400" />
-
-<h3>800px wide [<a href="/resize/images/parrot.jpg?maxWidth=800">open</a>]</h3>
-<img src="/resize/images/parrot.jpg?maxWidth=800" />
-
-<p>
-    <strong>Credit:</strong>
-    <em><a href="https://www.flickr.com/photos/dcoetzee/3572948635">Parrot</a>
-    by <a href="https://www.flickr.com/photos/dcoetzee/">D Coetzee</a>
-    is dedicated to the <a href="http://creativecommons.org/publicdomain/zero/1.0/">public domain (CC0)</a></em>
-</p>

samples/misc/NodeServicesExamples/Views/Home/Index.cshtml

@@ -7,7 +7,6 @@
 </p>
 
 <ul>
-    <li><a asp-action="ES2015Transpilation">ES2015 transpilation</a>
+    <li><a asp-action="ES2015Transpilation">ES2015 transpilation</a></li>
-    <li><a asp-action="ImageResizing">Image resizing</a>
+    <li><a asp-action="Chart">Server-side chart rendering</a></li>
-</li>
+</ul>
-

samples/misc/NodeServicesExamples/Views/Shared/_Layout.cshtml

@@ -1,8 +1,9 @@
-<!doctype html>
+<!doctype html>
 <html>
     <head>
         <meta charset="utf-8" />
         <title>NodeServices Examples</title>
+        <link rel="stylesheet" href="~/css/chartist.min.css" />
     </head>
     <body>
         @RenderBody()

samples/misc/NodeServicesExamples/package.json

@@ -4,6 +4,6 @@
   "dependencies": {
     "babel-core": "^6.7.4",
     "babel-preset-es2015": "^6.6.0",
-    "sharp": "^0.15.0"
+    "node-chartist": "^1.0.2"
   }
 }