Replace image resizing sample with chartist sample

aspnet · 627ea78e72e388b767c09a53f031513e9fd163fc · SteveSandersonMS committed Feb 22, 2017 · Feb 22, 2017 · 627ea78
1 parent 3162946
commit 627ea78e72e388b767c09a53f031513e9fd163fc
diff --git a/samples/misc/NodeServicesExamples/Controllers/HomeController.cs b/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 @@ public IActionResult ES2015Transpilation()
             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();
         }
 
diff --git a/samples/misc/NodeServicesExamples/Controllers/ResizeImage.cs b/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;
-        }
-    }
-}
diff --git a/samples/misc/NodeServicesExamples/Node/renderChart.js b/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
+    );
+};
diff --git a/samples/misc/NodeServicesExamples/Node/resizeImage.js b/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);
-}
diff --git a/samples/misc/NodeServicesExamples/Views/Home/Chart.cshtml b/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"])
diff --git a/samples/misc/NodeServicesExamples/Views/Home/ImageResizing.cshtml b/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>
diff --git a/samples/misc/NodeServicesExamples/Views/Home/Index.cshtml b/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="ImageResizing">Image resizing</a>
-</li>
-
+    <li><a asp-action="ES2015Transpilation">ES2015 transpilation</a></li>
+    <li><a asp-action="Chart">Server-side chart rendering</a></li>
+</ul>
diff --git a/samples/misc/NodeServicesExamples/Views/Shared/_Layout.cshtml b/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()
diff --git a/samples/misc/NodeServicesExamples/package.json b/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"
   }
 }
diff --git a/samples/misc/NodeServicesExamples/wwwroot/css/chartist.min.css b/samples/misc/NodeServicesExamples/wwwroot/css/chartist.min.css
@@ -0,0 +1 @@
+.ct-double-octave:after,.ct-major-eleventh:after,.ct-major-second:after,.ct-major-seventh:after,.ct-major-sixth:after,.ct-major-tenth:after,.ct-major-third:after,.ct-major-twelfth:after,.ct-minor-second:after,.ct-minor-seventh:after,.ct-minor-sixth:after,.ct-minor-third:after,.ct-octave:after,.ct-perfect-fifth:after,.ct-perfect-fourth:after,.ct-square:after{content:"";clear:both}.ct-label{fill:rgba(0,0,0,.4);color:rgba(0,0,0,.4);font-size:.75rem;line-height:1}.ct-grid-background,.ct-line{fill:none}.ct-chart-bar .ct-label,.ct-chart-line .ct-label{display:block;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.ct-chart-donut .ct-label,.ct-chart-pie .ct-label{dominant-baseline:central}.ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-label.ct-vertical.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end;justify-content:flex-end;text-align:right;text-anchor:end}.ct-label.ct-vertical.ct-end{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar .ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;text-anchor:start}.ct-chart-bar .ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end;justify-content:flex-end;text-align:right;text-anchor:end}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:end}.ct-grid{stroke:rgba(0,0,0,.2);stroke-width:1px;stroke-dasharray:2px}.ct-point{stroke-width:10px;stroke-linecap:round}.ct-line{stroke-width:4px}.ct-area{stroke:none;fill-opacity:.1}.ct-bar{fill:none;stroke-width:10px}.ct-slice-donut{fill:none;stroke-width:60px}.ct-series-a .ct-bar,.ct-series-a .ct-line,.ct-series-a .ct-point,.ct-series-a .ct-slice-donut{stroke:#d70206}.ct-series-a .ct-area,.ct-series-a .ct-slice-pie{fill:#d70206}.ct-series-b .ct-bar,.ct-series-b .ct-line,.ct-series-b .ct-point,.ct-series-b .ct-slice-donut{stroke:#f05b4f}.ct-series-b .ct-area,.ct-series-b .ct-slice-pie{fill:#f05b4f}.ct-series-c .ct-bar,.ct-series-c .ct-line,.ct-series-c .ct-point,.ct-series-c .ct-slice-donut{stroke:#f4c63d}.ct-series-c .ct-area,.ct-series-c .ct-slice-pie{fill:#f4c63d}.ct-series-d .ct-bar,.ct-series-d .ct-line,.ct-series-d .ct-point,.ct-series-d .ct-slice-donut{stroke:#d17905}.ct-series-d .ct-area,.ct-series-d .ct-slice-pie{fill:#d17905}.ct-series-e .ct-bar,.ct-series-e .ct-line,.ct-series-e .ct-point,.ct-series-e .ct-slice-donut{stroke:#453d3f}.ct-series-e .ct-area,.ct-series-e .ct-slice-pie{fill:#453d3f}.ct-series-f .ct-bar,.ct-series-f .ct-line,.ct-series-f .ct-point,.ct-series-f .ct-slice-donut{stroke:#59922b}.ct-series-f .ct-area,.ct-series-f .ct-slice-pie{fill:#59922b}.ct-series-g .ct-bar,.ct-series-g .ct-line,.ct-series-g .ct-point,.ct-series-g .ct-slice-donut{stroke:#0544d3}.ct-series-g .ct-area,.ct-series-g .ct-slice-pie{fill:#0544d3}.ct-series-h .ct-bar,.ct-series-h .ct-line,.ct-series-h .ct-point,.ct-series-h .ct-slice-donut{stroke:#6b0392}.ct-series-h .ct-area,.ct-series-h .ct-slice-pie{fill:#6b0392}.ct-series-i .ct-bar,.ct-series-i .ct-line,.ct-series-i .ct-point,.ct-series-i .ct-slice-donut{stroke:#f05b4f}.ct-series-i .ct-area,.ct-series-i .ct-slice-pie{fill:#f05b4f}.ct-series-j .ct-bar,.ct-series-j .ct-line,.ct-series-j .ct-point,.ct-series-j .ct-slice-donut{stroke:#dda458}.ct-series-j .ct-area,.ct-series-j .ct-slice-pie{fill:#dda458}.ct-series-k .ct-bar,.ct-series-k .ct-line,.ct-series-k .ct-point,.ct-series-k .ct-slice-donut{stroke:#eacf7d}.ct-series-k .ct-area,.ct-series-k .ct-slice-pie{fill:#eacf7d}.ct-series-l .ct-bar,.ct-series-l .ct-line,.ct-series-l .ct-point,.ct-series-l .ct-slice-donut{stroke:#86797d}.ct-series-l .ct-area,.ct-series-l .ct-slice-pie{fill:#86797d}.ct-series-m .ct-bar,.ct-series-m .ct-line,.ct-series-m .ct-point,.ct-series-m .ct-slice-donut{stroke:#b2c326}.ct-series-m .ct-area,.ct-series-m .ct-slice-pie{fill:#b2c326}.ct-series-n .ct-bar,.ct-series-n .ct-line,.ct-series-n .ct-point,.ct-series-n .ct-slice-donut{stroke:#6188e2}.ct-series-n .ct-area,.ct-series-n .ct-slice-pie{fill:#6188e2}.ct-series-o .ct-bar,.ct-series-o .ct-line,.ct-series-o .ct-point,.ct-series-o .ct-slice-donut{stroke:#a748ca}.ct-series-o .ct-area,.ct-series-o .ct-slice-pie{fill:#a748ca}.ct-square{display:block;position:relative;width:100%}.ct-square:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:100%}.ct-square:after{display:table}.ct-square>svg{display:block;position:absolute;top:0;left:0}.ct-minor-second{display:block;position:relative;width:100%}.ct-minor-second:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:93.75%}.ct-minor-second:after{display:table}.ct-minor-second>svg{display:block;position:absolute;top:0;left:0}.ct-major-second{display:block;position:relative;width:100%}.ct-major-second:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:88.8888888889%}.ct-major-second:after{display:table}.ct-major-second>svg{display:block;position:absolute;top:0;left:0}.ct-minor-third{display:block;position:relative;width:100%}.ct-minor-third:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:83.3333333333%}.ct-minor-third:after{display:table}.ct-minor-third>svg{display:block;position:absolute;top:0;left:0}.ct-major-third{display:block;position:relative;width:100%}.ct-major-third:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:80%}.ct-major-third:after{display:table}.ct-major-third>svg{display:block;position:absolute;top:0;left:0}.ct-perfect-fourth{display:block;position:relative;width:100%}.ct-perfect-fourth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:75%}.ct-perfect-fourth:after{display:table}.ct-perfect-fourth>svg{display:block;position:absolute;top:0;left:0}.ct-perfect-fifth{display:block;position:relative;width:100%}.ct-perfect-fifth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:66.6666666667%}.ct-perfect-fifth:after{display:table}.ct-perfect-fifth>svg{display:block;position:absolute;top:0;left:0}.ct-minor-sixth{display:block;position:relative;width:100%}.ct-minor-sixth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:62.5%}.ct-minor-sixth:after{display:table}.ct-minor-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-golden-section{display:block;position:relative;width:100%}.ct-golden-section:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:61.804697157%}.ct-golden-section:after{content:"";display:table;clear:both}.ct-golden-section>svg{display:block;position:absolute;top:0;left:0}.ct-major-sixth{display:block;position:relative;width:100%}.ct-major-sixth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:60%}.ct-major-sixth:after{display:table}.ct-major-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-minor-seventh{display:block;position:relative;width:100%}.ct-minor-seventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:56.25%}.ct-minor-seventh:after{display:table}.ct-minor-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-major-seventh{display:block;position:relative;width:100%}.ct-major-seventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:53.3333333333%}.ct-major-seventh:after{display:table}.ct-major-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-octave{display:block;position:relative;width:100%}.ct-octave:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:50%}.ct-octave:after{display:table}.ct-octave>svg{display:block;position:absolute;top:0;left:0}.ct-major-tenth{display:block;position:relative;width:100%}.ct-major-tenth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:40%}.ct-major-tenth:after{display:table}.ct-major-tenth>svg{display:block;position:absolute;top:0;left:0}.ct-major-eleventh{display:block;position:relative;width:100%}.ct-major-eleventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:37.5%}.ct-major-eleventh:after{display:table}.ct-major-eleventh>svg{display:block;position:absolute;top:0;left:0}.ct-major-twelfth{display:block;position:relative;width:100%}.ct-major-twelfth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:33.3333333333%}.ct-major-twelfth:after{display:table}.ct-major-twelfth>svg{display:block;position:absolute;top:0;left:0}.ct-double-octave{display:block;position:relative;width:100%}.ct-double-octave:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:25%}.ct-double-octave:after{display:table}.ct-double-octave>svg{display:block;position:absolute;top:0;left:0}
diff --git a/samples/misc/NodeServicesExamples/wwwroot/images/parrot.jpg b/samples/misc/NodeServicesExamples/wwwroot/images/parrot.jpg