node-red-contrib-chartjs - npm Package Compare versions

Comparing version 0.0.2 to 0.1.5

chartjs/chartjs.js

@@ -97,3 +97,3 @@ var fs = require('fs');
 
-    function chartjs(config) {        
+    function chartjsLine(config) {
         RED.nodes.createNode(this, config);
@@ -103,3 +103,3 @@
 
-        // load default template: line.chart
+        // load default template
         var template = fs.readFileSync(__dirname + '/templates/line-chart.html', 'utf8');
@@ -148,3 +148,353 @@
 
-    RED.nodes.registerType('chartjs', chartjs);    
+    function chartjsVerticalBar(config) {
+        RED.nodes.createNode(this, config);
+
+        var node = this;
+
+        // load default template
+        var template = fs.readFileSync(__dirname + '/templates/vertical-bar-chart.html', 'utf8');
+
+        // configure chart node-red path
+        if (RED.settings.httpNodeRoot !== false) {
+            node.errorHandler = function(err, req, res, next) {
+                node.warn(err);
+
+                res.send(500);
+            };
+
+            node.callback = function(req, res) {
+                res.end(template);
+            } 
+
+            node.corsHandler = function(req, res, next) { 
+                next(); 
+            }               
+        }  
+
+        // update expressJS route and update node path
+        updatePath(node, config.path);
+
+        // publish chart configurations        
+        var config = {type: config.charttype, title: config.charttitle, xaxis: config.xaxis, yaxis : config.yaxis};
+        var red = {config: config};
+
+        var item = getPath(node.id);
+        io.emit(item.path, red);
+
+        // trigger on flow input
+        node.on('input', function(msg) {   
+            var item = getPath(node.id);
+
+            // publish chart input message
+            var red = {msg: msg};
+
+            io.emit(item.path, red);
+
+            // return payload
+            node.send(msg);
+        });
+    }
+
+    function chartjsHorizontalBar(config) {
+        RED.nodes.createNode(this, config);
+
+        var node = this;
+
+        // load default template
+        var template = fs.readFileSync(__dirname + '/templates/horizontal-bar-chart.html', 'utf8');
+
+        // configure chart node-red path
+        if (RED.settings.httpNodeRoot !== false) {
+            node.errorHandler = function(err, req, res, next) {
+                node.warn(err);
+
+                res.send(500);
+            };
+
+            node.callback = function(req, res) {
+                res.end(template);
+            } 
+
+            node.corsHandler = function(req, res, next) { 
+                next(); 
+            }               
+        }  
+
+        // update expressJS route and update node path
+        updatePath(node, config.path);
+
+        // publish chart configurations        
+        var config = {type: config.charttype, title: config.charttitle, xaxis: config.xaxis, yaxis : config.yaxis};
+        var red = {config: config};
+
+        var item = getPath(node.id);
+        io.emit(item.path, red);
+
+        // trigger on flow input
+        node.on('input', function(msg) {   
+            var item = getPath(node.id);
+
+            // publish chart input message
+            var red = {msg: msg};
+
+            io.emit(item.path, red);
+
+            // return payload
+            node.send(msg);
+        });
+    }
+
+    function chartjsPie(config) {
+        RED.nodes.createNode(this, config);
+
+        var node = this;
+
+        // load default template
+        var template = fs.readFileSync(__dirname + '/templates/pie-chart.html', 'utf8');
+
+        // configure chart node-red path
+        if (RED.settings.httpNodeRoot !== false) {
+            node.errorHandler = function(err, req, res, next) {
+                node.warn(err);
+
+                res.send(500);
+            };
+
+            node.callback = function(req, res) {
+                res.end(template);
+            } 
+
+            node.corsHandler = function(req, res, next) { 
+                next(); 
+            }               
+        }  
+
+        // update expressJS route and update node path
+        updatePath(node, config.path);
+
+        // publish chart configurations        
+        var config = {type: config.charttype, title: config.charttitle, xaxis: config.xaxis, yaxis : config.yaxis};
+        var red = {config: config};
+
+        var item = getPath(node.id);
+        io.emit(item.path, red);
+
+        // trigger on flow input
+        node.on('input', function(msg) {   
+            var item = getPath(node.id);
+
+            // publish chart input message
+            var red = {msg: msg};
+
+            io.emit(item.path, red);
+
+            // return payload
+            node.send(msg);
+        });
+    }
+
+    function chartjsDoughnut(config) {
+        RED.nodes.createNode(this, config);
+
+        var node = this;
+
+        // load default template
+        var template = fs.readFileSync(__dirname + '/templates/doughnut-chart.html', 'utf8');
+
+        // configure chart node-red path
+        if (RED.settings.httpNodeRoot !== false) {
+            node.errorHandler = function(err, req, res, next) {
+                node.warn(err);
+
+                res.send(500);
+            };
+
+            node.callback = function(req, res) {
+                res.end(template);
+            } 
+
+            node.corsHandler = function(req, res, next) { 
+                next(); 
+            }               
+        }  
+
+        // update expressJS route and update node path
+        updatePath(node, config.path);
+
+        // publish chart configurations        
+        var config = {type: config.charttype, title: config.charttitle, xaxis: config.xaxis, yaxis : config.yaxis};
+        var red = {config: config};
+
+        var item = getPath(node.id);
+        io.emit(item.path, red);
+
+        // trigger on flow input
+        node.on('input', function(msg) {   
+            var item = getPath(node.id);
+
+            // publish chart input message
+            var red = {msg: msg};
+
+            io.emit(item.path, red);
+
+            // return payload
+            node.send(msg);
+        });
+    }
+
+    function chartjsPolar(config) {
+        RED.nodes.createNode(this, config);
+
+        var node = this;
+
+        // load default template
+        var template = fs.readFileSync(__dirname + '/templates/polar-chart.html', 'utf8');
+
+        // configure chart node-red path
+        if (RED.settings.httpNodeRoot !== false) {
+            node.errorHandler = function(err, req, res, next) {
+                node.warn(err);
+
+                res.send(500);
+            };
+
+            node.callback = function(req, res) {
+                res.end(template);
+            } 
+
+            node.corsHandler = function(req, res, next) { 
+                next(); 
+            }               
+        }  
+
+        // update expressJS route and update node path
+        updatePath(node, config.path);
+
+        // publish chart configurations        
+        var config = {type: config.charttype, title: config.charttitle, xaxis: config.xaxis, yaxis : config.yaxis};
+        var red = {config: config};
+
+        var item = getPath(node.id);
+        io.emit(item.path, red);
+
+        // trigger on flow input
+        node.on('input', function(msg) {   
+            var item = getPath(node.id);
+
+            // publish chart input message
+            var red = {msg: msg};
+
+            io.emit(item.path, red);
+
+            // return payload
+            node.send(msg);
+        });
+    }
+
+    function chartjsBubble(config) {
+        RED.nodes.createNode(this, config);
+
+        var node = this;
+
+        // load default template
+        var template = fs.readFileSync(__dirname + '/templates/bubble-chart.html', 'utf8');
+
+        // configure chart node-red path
+        if (RED.settings.httpNodeRoot !== false) {
+            node.errorHandler = function(err, req, res, next) {
+                node.warn(err);
+
+                res.send(500);
+            };
+
+            node.callback = function(req, res) {
+                res.end(template);
+            } 
+
+            node.corsHandler = function(req, res, next) { 
+                next(); 
+            }               
+        }  
+
+        // update expressJS route and update node path
+        updatePath(node, config.path);
+
+        // publish chart configurations        
+        var config = {type: config.charttype, title: config.charttitle, xaxis: config.xaxis, yaxis : config.yaxis};
+        var red = {config: config};
+
+        var item = getPath(node.id);
+        io.emit(item.path, red);
+
+        // trigger on flow input
+        node.on('input', function(msg) {   
+            var item = getPath(node.id);
+
+            // publish chart input message
+            var red = {msg: msg};
+
+            io.emit(item.path, red);
+
+            // return payload
+            node.send(msg);
+        });
+    }
+
+    function chartjsRadar(config) {
+        RED.nodes.createNode(this, config);
+
+        var node = this;
+
+        // load default template: line.chart
+        var template = fs.readFileSync(__dirname + '/templates/radar-chart.html', 'utf8');
+
+        // configure chart node-red path
+        if (RED.settings.httpNodeRoot !== false) {
+            node.errorHandler = function(err, req, res, next) {
+                node.warn(err);
+
+                res.send(500);
+            };
+
+            node.callback = function(req, res) {
+                res.end(template);
+            } 
+
+            node.corsHandler = function(req, res, next) { 
+                next(); 
+            }               
+        }  
+
+        // update expressJS route and update node path
+        updatePath(node, config.path);
+
+        // publish chart configurations        
+        var config = {title: config.charttitle, xaxis: config.xaxis, yaxis : config.yaxis};
+        var red = {config: config};
+
+        var item = getPath(node.id);
+        io.emit(item.path, red);
+
+        // trigger on flow input
+        node.on('input', function(msg) {   
+            var item = getPath(node.id);
+
+            // publish chart input message
+            var red = {msg: msg};
+
+            io.emit(item.path, red);
+
+            // return payload
+            node.send(msg);
+        });
+    }
+
+    RED.nodes.registerType('chartjs-line', chartjsLine);
+    RED.nodes.registerType('chartjs-vertical-bar', chartjsVerticalBar);
+    RED.nodes.registerType('chartjs-horizontal-bar', chartjsHorizontalBar);
+    RED.nodes.registerType('chartjs-pie', chartjsPie);
+    RED.nodes.registerType('chartjs-doughnut', chartjsDoughnut);
+    RED.nodes.registerType('chartjs-polar', chartjsPolar);
+    RED.nodes.registerType('chartjs-bubble', chartjsBubble);
+    RED.nodes.registerType('chartjs-radar', chartjsRadar);    
 };

chartjs/templates/line-chart.js

 document.addEventListener("DOMContentLoaded", function(event) {
+    var topic = window.location.pathname.replace('/', '');
+
     var socket = io();
 
-    var topic = window.location.pathname.replace('/', '');
-
     socket.on(topic, function(red){
@@ -19,14 +19,14 @@ console.log(red);
 
-            myChart.config.data.labels = [];
-            myChart.config.data.datasets = [];
+            chart.config.data.labels = [];
+            chart.config.data.datasets = [];
 
             red.msg.payload.dataset.forEach(item => {
-                myChart.config.data.labels.push(item.x);
+                chart.config.data.labels.push(item.x);
                 dataset.data.push(item.y);
             });
                     
-            myChart.config.data.datasets.push(dataset);
+            chart.config.data.datasets.push(dataset);
 
             // refresh chart
-            myChart.update();
+            chart.update();
         }
@@ -36,15 +36,14 @@
         if (red.config !== undefined) {            
-            myChart.config.options.title.text = red.config.title;
-            myChart.config.options.scales['xAxes'][0].scaleLabel.labelString = red.config.xaxis;
-            myChart.config.options.scales['yAxes'][0].scaleLabel.labelString = red.config.yaxis;
+            config.options.title.text = red.config.title;
+            config.options.scales['xAxes'][0].scaleLabel.labelString = red.config.xaxis;
+            config.options.scales['yAxes'][0].scaleLabel.labelString = red.config.yaxis;
 
             // refresh chart
-            myChart.update();
+            chart.update();
         }
       });
 
-    //var ctx = document.getElementById("myChart");
-    var ctx = $("#myChart");
+    var ctx = $("#lineChart");
 
-    var myChart = new Chart(ctx, {
+    var config = {
         type: 'line',
@@ -87,3 +86,9 @@ data: {
         }
-    });	
+    };
+
+    // Global Chart Options
+    Chart.defaults.global.defaultFontColor = 'grey';
+    Chart.defaults.global.defaultFontSize = 16;
+
+    var chart = new Chart(ctx, config);	
 });

package.json

 {
   "name": "node-red-contrib-chartjs",
-  "version": "0.0.2",
+  "version": "0.1.5",
   "description": "Node-RED Chart.js node",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -7,3 +7,3 @@ # node-red-contrib-chartjs
 ## Description
-This node permit to use the **Line chart** from [Chart.js](https://www.chartjs.org/) from Node-RED. The objective is create a new node-red path for each chart created, this path could be configured and updated at runtime. Right now **only the line chart** of Chart.js was implemented. In the future will implement the rest of the charts of this library and include serveral channels on the same chart.
+This node permit to use **Charts** from [Chart.js](https://www.chartjs.org/) from Node-RED. The objective is create a new node-red path for each chart created, this path could be configured and updated at runtime.
 
@@ -14,2 +14,11 @@ ## Installation
 ```
+## Chart implemented
+* Line Chart
+* Vertical Bar Chart
+* Horizontal Bar Chart
+* Pie Chart
+* Doughnut Chart
+* Polar Area Chart
+* Bubble Chart
+* Radar Chart
 
@@ -33,3 +42,4 @@ ## Chart configuration
 
-Dataset Example:
+Check the node help to know the Dataset structure for each chart
+A Line Chart dataset could be like this:
 ```
@@ -36,0 +46,0 @@ {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of package files

42

increased by200%

Lines of code

1578

increased by102.83%

Number of low quality alerts

4

decreased by-20%

Number of lines in readme file

83

increased by13.7%

Number of low supply chain risk alerts

4

decreased by-33.33%

Worsened metrics

Total package byte prevSize

449297

decreased by-17.54%

No dependency changes