initial commit

Author: shellyln

.babelrc

@@ -0,0 +1,11 @@
+{
+    "sourceMaps": true,
+    "presets": [
+        ["env", {
+            "targets": {
+                "node": "current"
+            }
+        }]
+    ],
+    "ignore": []
+}

.gitignore

@@ -0,0 +1,47 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+
+# Visual Studio files
+/.vs/
+
+# VS Code cache files
+/.vscode/.browse.VC*
+
+# Dependency directory
+# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
+/node_modules/
+
+# Bin directory
+/bin/
+
+# NPM files
+.npmrc

.npmignore

@@ -0,0 +1,60 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+
+# Visual Studio files
+/.vs/
+
+# VS Code cache files
+/.vscode/.browse.VC*
+
+# Dependency directory
+# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
+/node_modules/
+
+# Bin directory
+# /bin/
+
+# NPM files
+.npmrc
+
+
+
+###################
+#### npmignore ####
+
+/.vscode/
+/spec/
+.babelrc
+.travis.yml
+tsconfig.json
+tslint.json
+webpack.config.js

.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "program": "${workspaceRoot}/src/index.ts",
+            "outFiles": [
+                "${workspaceRoot}/bin/index.js"
+            ]
+        }
+    ]
+}

LICENSE.md

@@ -0,0 +1,13 @@
+# ISC License (ISC)
+
+### Copyright (c) 2018, Shellyl_N and Authors
+#### https://github.com/shellyln
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby
+granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING
+ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL,
+DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS,
+WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE
+OR PERFORMANCE OF THIS SOFTWARE.

README.md

@@ -0,0 +1,93 @@
+# Chart.js server side rendering example on the node.js environment.
+
+Render various charts using Chart.js into the SVG format.
+
+Chart.js uses the HTML5 Canvas API.  
+However, the node.js environment does not have the Canvas API by default.  
+With [red-agate-svg-canvas](https://www.npmjs.com/package/red-agate-svg-canvas),
+you can render the charts on the server side.
+
+
+## Get started
+
+```bash
+$ git clone https://github.com/shellyln/chart.js-node-ssr-example.git
+$ cd chart.js-node-ssr-example
+$ rm -rf ./.git
+
+$ npm install
+$ npm run build
+$ npm start
+```
+
+
+## Example
+
+```ts
+import { SvgCanvas,
+         Rect2D,
+         SvgCanvas2DGradient } from 'red-agate-svg-canvas/modules';
+import * as ChartJs            from 'chart.js';
+
+// Get the global scope.
+// If running on a node, "g" points to a "global" object.
+// When running on the browser, "g" points to the "window" object.
+const g = Function('return this')();
+
+// Chart options
+// https://www.chartjs.org/docs/latest/getting-started/usage.html
+const opts: any = { ... };
+
+
+function main() {
+    // SvgCanvas has a "CanvasRenderingContext2D"-compatible interface.
+    const ctx = new SvgCanvas();
+
+    // SvgCanvas lacks the canvas property.
+    (ctx as any).canvas = {
+        width: 800,
+        height: 400,
+        style: {
+            width: '800px',
+            height: '400px',
+        },
+    };
+
+    // SvgCanvas does not have font glyph information,
+    // so manually set the ratio of (font height / font width).
+    ctx.fontHeightRatio = 2;
+
+    // Chart.js needs a "HTMLCanvasElement"-like interface that has "getContext()" method.
+    // "getContext()" should returns a "CanvasRenderingContext2D"-compatible interface.
+    const el = { getContext: () => ctx };
+
+    // If "devicePixelRatio" is not set, Chart.js get the devicePixelRatio from "window" object.
+    // node.js environment has no window object.
+    opts.options.devicePixelRatio = 1;
+
+    // Disable animations.
+    opts.options.animation = false;
+    opts.options.events = [];
+    opts.options.responsive = false;
+
+    // Chart.js needs the "CanvasGradient" in the global scope.
+    const savedGradient = g.CanvasGradient;
+    g.CanvasGradient = SvgCanvas2DGradient;
+    try {
+        const chart = new ChartJs.Chart(el as any, opts);
+    } finally {
+        if (savedGradient) {
+            g.CanvasGradient = savedGradient;
+        }
+    }
+
+    // Render as SVG.
+    const svgString = ctx.render(new Rect2D(0, 0 , 800, 400), 'px');
+    console.log(svgString);
+}
+```
+
+
+## Notes
+
+To import the [red-agate-svg-canvas](https://www.npmjs.com/package/red-agate-svg-canvas), you need to use `babel` + `webpack`.