canvasxpress-cli 62.2.0 → 62.4.5

package/cmds/help.js

@@ -1,5 +1,5 @@
 const menus = {
-
+		
   main: `
     canvasxpress [command] <options>
 
@@ -7,131 +7,189 @@ const menus = {
     svg ................ create a svg CanvasXpress file from inline parameters, file or url
     json ............... create a json CanvasXpress file from inline parameters, file or url
 
-    canvas ............. run scripts files to test CanvasXpres [internal]
+    csv ................ create a CanvasXpress png file from a local csv file or url
+    reproduce .......... create CanvasXpress png files from a local file or url
+    canvas ............. run scripts files to test CanvasXpres
 
     test ............... test package. Creates images and json file in test directory
-    version ............ show this package version
+    version ............ show this package version    
     help ............... show this help. Add command to show correponding help
   `,
+  
+  canvas: `
+    --input, -i ........ <required> path/to/js/file
+    --directory, -f .... [optional] directory of CanvasXpres version to check
+    --graph, -g ........ [optional] graph name
+    --number, -n ....... [optional] number for the graph
+    --timeout, -t ...... [optional] timeout in millisecods to close browser
+                         {default} 500
+    --browser, -b ...... [optional] boolean to do not run headless and pause for debugging
+    
+    Examples:
 
-  png: `
-    --input, -i ........ [optional - required] file or url:
-                         /path/to/local/file.[json|png|csv|txt|html]
-                         http://page/with/file.[json|png|csv|txt|html]
-                         https://page/with/file.[json|png|csv|txt|html]
+      canvasxpress canvas -i canvas/scripts/compareImages.js
+
+      canvasxpress canvas -i canvas/scripts/compareImages.js -g violin -n 11
+  `,
+    
+  csv: `
+    --input, -i ........ [optional - required] file or url with a csv file:
+                         file:///path/to/local/file.csv
+                         http://page/with/file.csv
+                         https://page/with/file.csv
     --output, -o ....... [optional] directory path to save image
                          {default} './'
     --width, -x ........ [optional] integer for image width
                          {default} 800
     --height, -y ....... [optional] integer for image height
                          {default} 800
-    --target, -t ....... [optional] string id for CanvasXpress
     --data, -d ......... [optional - required] json string with the data for CanvasXpress
     --config, -c ....... [optional] json string with configuration for CanvasXpress
-    --events, -e ....... [optional] json/javascript string with events for CanvasXpress
-    --timeout, -q ...... [optional] timeout in millisecods to close browser
+    --timeout, -t ...... [optional] timeout in millisecods to close browser
                          {default} 500
     --browser, -b ...... [optional] boolean to do not run headless and pause for debugging
+    
+    Examples:
 
+      canvasxpress csv -i ../src/ToothGrowth.csv -t 3000
+
+      canvasxpress csv -i https://raw.githubusercontent.com/neuhausi/Rdatasets/master/csv/datasets/ToothGrowth.csv -t 3000
+    
+      canvasxpress csv -i file:///node/src/ToothGrownth.csv -c '{"graphType":"Boxplot","transposeData":true,"asVariableFactors":["dose"],"stringSampleFactors":["dose"],"groupingFactors":["dose"]}' -t 3000
+
+      canvasxpress csv -d '{"y":{"vars":["Variable1"],"smps":["Sample1","Sample2","Sample3"],"data":[[33,44,55]]}}' -c '{"graphOrientation":"vertical","theme":"CanvasXpress","title":"Bar Graph Title"}' -t 3000
+  `,
+
+  reproduce: `
+    --input, -i ........ <required> file or url with a html file:
+                         file:///path/to/local/file.html
+                         http://page/with/file.html
+                         https://page/with/file.html
+    --output, -o ....... [optional] directory path to save image
+                         {default} './'
+    --timeout, -t ...... [optional] timeout in millisecods to close browser
+                         {default} 500
+    --browser, -b ...... [optional] boolean to do not run headless and pause for debugging
+    
     Examples:
 
-      canvasxpress png -i https://canvasxpress.org/examples/bar-3.html
+      canvasxpress reproduce -i https://canvasxpress.org/html/layout-7.html
+    
+      canvasxpress reproduce -i file:///node/src/canvasXpress.html
 
-      canvasxpress png -i ../src/area.json
+      canvasxpress reproduce -i ../src/canvasXpress.html
+  `,
 
-      canvasxpress png -i ../src/dotplot.png
+  png: `
+    --input, -i ........ [optional - required] file or url with a html file:
+                         file:///path/to/local/file.html
+                         http://page/with/file.html
+                         https://page/with/file.html
+    --output, -o ....... [optional] directory path to save image
+                         {default} './'
+    --width, -x ........ [optional] integer for image width
+                         {default} 800
+    --height, -y ....... [optional] integer for image height
+                         {default} 800
+    --data, -d ......... [optional - required] json string with the data for CanvasXpress
+    --config, -c ....... [optional] json string with configuration for CanvasXpress    --timeout, -t ...... [optional] timeout in millisecods to close browser
+                         {default} 500
+    --timeout, -t ...... [optional] timeout in millisecods to close browser
+                         {default} 500
+    --browser, -b ...... [optional] boolean to do not run headless and pause for debugging
+    
+    Examples:
 
-      canvasxpress png -d '{"y":{"vars":["Variable1"],"smps":["Sample1","Sample2","Sample3"],"data":[[33,44,55]]}}' -c '{"graphOrientation":"vertical","title":"Bar Graph Title"}'
+      canvasxpress png -i https://canvasxpress.org/html/bar-3.html
+    
+      canvasxpress png -i file:///node/src/canvasXpress.html
 
-      canvasxpress png -i ../src/ToothGrowth.csv -c '{"graphType":"Boxplot","asVariableFactors":["dose"],"stringSampleFactors":["dose"],"groupingFactors":["dose"]}'
+      canvasxpress png -i ../src/canvasXpress.html
+
+      canvasxpress png -d '{"y":{"vars":["Variable1"],"smps":["Sample1","Sample2","Sample3"],"data":[[33,44,55]]}}'
+        -c '{"graphOrientation":"vertical","theme":"CanvasXpress","title":"Bar Graph Title"}'
   `,
 
   svg: `
-    --input, -i ........ [optional - required] file or url:
-                         /path/to/local/file.[json|png|csv|txt|html]
-                         http://page/with/file.[json|png|csv|txt|html]
-                         https://page/with/file.[json|png|csv|txt|html]
+    --input, -i ........ [optional - required] file or url with a html file:
+                         file:///path/to/local/file.html
+                         http://page/with/file.html
+                         https://page/with/file.html
     --output, -o ....... [optional] directory path to save image
                          {default} './'
     --width, -x ........ [optional] integer for image width
                          {default} 800
     --height, -y ....... [optional] integer for image height
                          {default} 800
-    --target, -t ....... [optional] string id for CanvasXpress
     --data, -d ......... [optional - required] json string with the data for CanvasXpress
     --config, -c ....... [optional] json string with configuration for CanvasXpress
-    --events, -e ....... [optional] json/javascript string with events for CanvasXpress
-    --timeout, -q ...... [optional] timeout in millisecods to close browser
+    --timeout, -t ...... [optional] timeout in millisecods to close browser
                          {default} 500
     --browser, -b ...... [optional] boolean to do not run headless and pause for debugging
-
+    
     Examples:
 
-      canvasxpress svg -i https://canvasxpress.org/examples/bar-3.html
+      canvasxpress svg -i https://canvasxpress.org/html/bar-3.html
+    
+      canvasxpress svg -i file:///node/src/canvasXpress.html
 
-      canvasxpress svg -i ../src/area.json
+      canvasxpress svg -i ../src/canvasXpress.html
 
-      canvasxpress svg -i ../src/dotplot.png
-
-      canvasxpress svg -d '{"y":{"vars":["Variable1"],"smps":["Sample1","Sample2","Sample3"],"data":[[33,44,55]]}}' -c '{"graphOrientation":"vertical","title":"Bar Graph Title"}'
-
-      canvasxpress svg -i ../src/ToothGrowth.csv -c '{"graphType":"Boxplot","asVariableFactors":["dose"],"stringSampleFactors":["dose"],"groupingFactors":["dose"]}'
+      canvasxpress svg -d '{"y":{"vars":["Variable1"],"smps":["Sample1","Sample2","Sample3"],"data":[[33,44,55]]}}'
+        -c '{"graphOrientation":"vertical","theme":"CanvasXpress","title":"Bar Graph Title"}'
   `,
-
+    
   json: `
-    --input, -i ........ [optional - required] file or url:
-                         /path/to/local/file.[json|png|csv|txt|html]
-                         http://page/with/file.[json|png|csv|txt|html]
-                         https://page/with/file.[json|png|csv|txt|html]
+    --input, -i ........ [optional - required] file or url with a html file:
+                         file:///path/to/local/file.html
+                         http://page/with/file.html
+                         https://page/with/file.html
     --output, -o ....... [optional] directory path to save image
                          {default} './'
     --width, -x ........ [optional] integer for image width
                          {default} 800
     --height, -y ....... [optional] integer for image height
                          {default} 800
-    --target, -t ....... [optional] string id for CanvasXpress
     --data, -d ......... [optional - required] json string with the data for CanvasXpress
     --config, -c ....... [optional] json string with configuration for CanvasXpress
-    --events, -e ....... [optional] json/javascript string with events for CanvasXpress
-    --timeout, -q ...... [optional] timeout in millisecods to close browser
+    --timeout, -t ...... [optional] timeout in millisecods to close browser
                          {default} 500
     --browser, -b ...... [optional] boolean to do not run headless and pause for debugging
-
+    
     Examples:
 
-      canvasxpress json -i https://canvasxpress.org/examples/bar-3.html
+      canvasxpress json -i https://canvasxpress.org/html/bar-3.html
+    
+      canvasxpress json -i file:///node/src/canvasXpress.html
 
-      canvasxpress json -i ../src/area.json
+      canvasxpress json -i ../src/canvasXpress.html
 
-      canvasxpress json -i ../src/dotplot.png
-
-      canvasxpress json -d '{"y":{"vars":["Variable1"],"smps":["Sample1","Sample2","Sample3"],"data":[[33,44,55]]}}' -c '{"graphOrientation":"vertical","title":"Bar Graph Title"}'
-
-      canvasxpress json -i ../src/ToothGrowth.csv -c '{"graphType":"Boxplot","asVariableFactors":["dose"],"stringSampleFactors":["dose"],"groupingFactors":["dose"]}'
+      canvasxpress json -d '{"y":{"vars":["Variable1"],"smps":["Sample1","Sample2","Sample3"],"data":[[33,44,55]]}}'
+        -c '{"graphOrientation":"vertical","theme":"CanvasXpress","title":"Bar Graph Title"}'
   `,
 
-  canvas: `
-    --input, -i ........ <required> path/to/js/file
-    --directory, -f .... [optional] directory of CanvasXpres version to check
-    --graph, -g ........ [optional] graph name
-    --number, -n ....... [optional] number for the graph
-    --timeout, -q ...... [optional] timeout in millisecods to close browser
-                         {default} 500
-    --browser, -b ...... [optional] boolean to do not run headless and pause for debugging
+  target: `
+    --target, -t ....... [optional] string with CanvasXpress target Id
+  `,
 
-    Examples:
+  data: `
+    --data, -d ......... [optional] json string with data for CanvasXpress
+  `,
 
-      canvasxpress canvas -i canvas/scripts/compareImages.js
+  config:`
+    --config, -d ....... [optional] json string with configuration for CanvasXpress
+  `,
 
-      canvasxpress canvas -i canvas/scripts/compareImages.js -g violin -n 11
+  events:`
+    --events, -e ....... [optional] javascript string with events for CanvasXpress
   `
 
 }
 
 module.exports = (args) => {
-
+  
 	const subCmd = args._[0] === 'help' ? args._[1] : args._[0];
 
   console.log(menus[subCmd] || menus.main);
-
+  
 }

package/cmds/io.js

@@ -10,11 +10,15 @@ module.exports = async (obj) => {
 
   const today = new Date().toISOString().replace('-', '').split('T')[0].replace('-', '');
 
-  const logFile = fs.createWriteStream(('/tmp/io-' + today + '.log'), { flags: 'a' });
+  const logFile = fs.createWriteStream((dirname + '/logs/io-' + today + '.log'), { flags: 'a' });
 
   const logStdout = process.stdout;
 
-  const html = (obj.input && obj.input.match(/.html$/) ? obj.input : ("file://" + dirname + "/src/canvasXpress.html")) + (obj.debug ? "?cXH" : "");
+  const defhtml = ("file://" + dirname + "/src/canvasXpress.html");
+
+  if (!fs.existsSync(dirname + '/logs')) {
+    fs.mkdirSync(dirname + '/logs');
+  }
 
   console.log = function () {
     logFile.write(util.format.apply(null, arguments) + '\n');
@@ -34,30 +38,43 @@ module.exports = async (obj) => {
         width: 1000,
         height: 1000
       },
-      args: [
-        '--no-sandbox',
-        '--disable-setuid-sandbox',
+      args: ['--no-sandbox',
         '--allow-file-access-from-files',
-        '--enable-local-file-accesses'
-      ]
+        '--enable-local-file-accesses']
     });
 
     const page = await browser.newPage();
 
-    page.on("console", (consoleObj) => console.log(consoleObj.text()));
+    // Print All
+    //page.on("console", (consoleObj) => console.log(consoleObj.text()));
+
+    // Print All except warnings
+    page.on('console', consoleObj => {
+      if (consoleObj.type() !== 'warning') {
+          console.log(consoleObj.text());
+      }
+    });
+
+    /*
+    // Print only logs
+    page.on('console', consoleObj => {
+      if (consoleObj.type() === 'log') {
+          console.log(consoleObj.text());
+      }
+    });
+    */
 
     if (obj.input && !obj.input.match(/^file|^http/)) {
       obj.input = "file://" + path.resolve(obj.input);
     }
 
     const func = function (obj) {
-
       if (obj.debug) {
         debugger;
       }
-
       var exec = function (cx, tg) {
         switch (obj.cmd) {
+          case 'csv':
           case 'png':
             cx.print(false, tg + '.png');
             break;
@@ -67,76 +84,69 @@ module.exports = async (obj) => {
           case 'json':
             cx.save(false, tg + '.json');
             break;
+          case 'reproduce':
+            cx.reproduce(false, true, true);
+            break;
         }
       }
-
       var clbk = function () {
-        var cx = CanvasXpress.instances[0];
-        var dt = arguments[0];
-        if (dt.config) {
-          dt.config.isNode = true;
-        }
-        cx.updateData(dt, false, false, JSON.parse(JSON.stringify(dt.config)));
-        console.log(logStr);
-        exec(cx, dt.renderTo);
+        var cxs = CanvasXpress.instances;
+        var cx = cxs[cxs.length - 1];
+        var tg = cx.target;
+        console.log("Creating " + (obj.cmd == 'csv' ? 'png' : obj.cmd) + " file from " + (obj.input ? obj.input : 'input data') + " (" + obj.output + (obj.target || cx.target) + ".png)");
+        exec(cx, tg);
       }
-
-      var cx = CanvasXpress.instances[0];
-
-      const extFile = obj.input ? obj.input.split(".").pop() : false;
-
-      const logStr = "Creating " + obj.cmd + " file from " + (obj.input ? obj.input : 'input data') + " (" + obj.output + (obj.target || cx.target) + (extFile == 'html' ? '' : '-1') + "." + obj.cmd + ")";
-
-      cx.setDimensions(obj.width, obj.height);
-
-      if (obj.input) {
-        try {
-          switch (extFile) {
-            case 'html':
-              console.log(logStr);
+      var cxs = CanvasXpress.instances;
+      for (var i = 0; i < cxs.length; i++) {
+        var cx = cxs[i];
+
+        cx.setDimensions(obj.width, obj.height);
+        if (obj.input) {
+          try {
+            if (obj.cmd == 'csv') {
+              cx.dataURL = obj.input;
+              cx.remoteTransitionEffect = 'none';
+              cx.getDataFromURLOrString(obj.target || cx.target, obj.config, false, false, clbk);
+            } else {        
+              console.log("Creating " + (obj.cmd == 'csv' ? 'png' : obj.cmd) + " file from " + (obj.input ? obj.input : 'input data') + " (" + obj.output + (obj.target || cx.target) + "." + obj.cmd + ")");
               exec(cx, obj.target || cx.target);
-              return;
-            case 'json':
-            case 'csv':
-            case 'text':
-            case 'png':
-              console.log(logStr);
-              CanvasXpress.loadRemoteData(obj.target || cx.target, obj.input, obj.config, false, clbk);
-              return;
+            }
+          } catch (err) {
+            console.error(err);
+          }
+        } else if (obj.data) {
+          try {
+            console.log("Creating " + (obj.cmd == 'csv' ? 'png' : obj.cmd) + " file from " + (obj.input ? obj.input : 'input data') + " (" + obj.output + (obj.target || cx.target) + "." + obj.cmd + ")");
+            cx.updateData(obj.data, false, false, obj.config);
+            exec(cx, obj.target || cx.target);
+            return;
+          } catch (err) {
+            console.error(err);
           }
-        } catch (err) {
-          console.error(err);
-        }
-      } else if (obj.data) {
-        try {
-          console.log(logStr);
-          cx.updateData(obj.data, false, false, obj.config);
-          exec(cx, obj.target || cx.target);
-          return;
-        } catch (err) {
-          console.error(err);
         }
-      }
 
+      }
     }
 
-    const client = await page.target().createCDPSession();
-
-    await client.send('Page.setDownloadBehavior', {
+    await page._client.send('Page.setDownloadBehavior', {
       behavior: 'allow',
       downloadPath: obj.output
-    })
+    });
 
-    await page.goto(html);
+    if (obj.input) {
+      await page.goto(obj.cmd == 'csv' ? defhtml : obj.cmd == 'reproduce' ? obj.input + '?showTransition=false' : obj.input);
+    } else {
+      await page.goto(defhtml);
+    }
 
-    await page.waitForFunction('typeof (CanvasXpress) !== undefined && CanvasXpress.ready');
+    await page.waitFor(() => typeof (CanvasXpress) !== undefined && CanvasXpress.ready);
 
     await page.evaluate(`(${func.toString()})(${JSON.stringify(obj)})`);
 
     await setTimeout(() => {
       browser.close();
       spinner.stop();
-    }, obj.tmout);
+    }, obj.cmd == 'csv' || obj.cmd == 'reproduce' ? obj.tmout + 2500 : obj.tmout);
 
   } catch (err) {
 
@@ -144,4 +154,4 @@ module.exports = async (obj) => {
 
   }
 
-}
+}

package/cmds/version.js

@@ -1,7 +1,7 @@
 const { version } = require('../package.json')
 
 module.exports = (args) => {
-
+	
   console.log(`v${version}`);
-
+  
 }

package/index.js

@@ -28,13 +28,11 @@ module.exports = () => {
 
   let height = args.height || args.y || 800;
 
-  let tmout = args.timeout || args.q || 2500;
+  let tmout = args.timeout || args.t || 2500;
 
-  let usePlaywright = args.playwright || args.pw || process.argv.includes('-playwright') || false;
+  let data = dat ? JSON.parse(dat) : { "y": { "vars": ["Variable1"], "smps": ["Sample1", "Sample2", "Sample3"], "data": [[55, 44, 33]] } };
 
-  let data = dat ? JSON.parse(dat) : false;
-
-  let config = conf ? JSON.parse(conf) : false;
+  let config = conf ? JSON.parse(conf) : { "graphType": "Boxplot", "transposeData": true, "asVariableFactors": ["dose"], "stringSampleFactors": ["dose"], "groupingFactors": ["dose"] };
 
   let obj = {
     cmd: cmd,
@@ -48,7 +46,6 @@ module.exports = () => {
     width: width,
     height: height,
     tmout: tmout,
-    usePlaywright: usePlaywright,
     args: args
   }
 
@@ -74,11 +71,13 @@ module.exports = () => {
 
   switch (cmd) {
 
+    case 'csv':
     case 'png':
     case 'svg':
     case 'json':
+    case 'reproduce':
       if (input || data) {
-        require(usePlaywright ? './cmds/io-playwright' : './cmds/io')(obj);
+        require('./cmds/io')(obj);
       } else {
         require('./cmds/help')(args);
       }
@@ -93,7 +92,7 @@ module.exports = () => {
       require('./cmds/help')(args);
       break;
     case 'test':
-      require(usePlaywright ? './cmds/io-playwright' : './cmds/io')({
+      require('./cmds/io')({
         cmd: "png",
         input: "https://www.canvasxpress.org/examples/bar-1.html",
         output: "./test/",
@@ -107,7 +106,7 @@ module.exports = () => {
         tmout: tmout,
         args: args
       });
-      require(usePlaywright ? './cmds/io-playwright' : './cmds/io')({
+      require('./cmds/io')({
         cmd: "svg",
         input: "https://www.canvasxpress.org/examples/bar-1.html",
         output: "./test/",
@@ -121,7 +120,7 @@ module.exports = () => {
         tmout: tmout,
         args: args
       });
-      require(usePlaywright ? './cmds/io-playwright' : './cmds/io')({
+      require('./cmds/io')({
         cmd: "json",
         input: "https://www.canvasxpress.org/examples/bar-1.html",
         output: "./test/",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasxpress-cli",
-  "version": "62.2.0",
+  "version": "62.4.5",
   "license": {
     "type": "Dual licensing",
     "url": "https://www.canvasxpress.org/docs/license.html"

package/src/canvasXpress.html

@@ -3,25 +3,29 @@
     <!-- CanvasXpress -->
     <link rel="stylesheet" href="../src/canvasXpress.css" type="text/css"/>
     <script type="text/javascript" src="../src/canvasXpress.js"></script>
+    <!-- Page Script -->
+    <script>
+      onReady(function () {
+        var cx = new CanvasXpress("cX", 
+        	 {
+        	    "y" : {
+        	  	  "vars" : ["Variable1"],
+        	  	  "smps" : ["Sample1", "Sample2", "Sample3"],
+        		  "data" : [[33, 44, 55]]
+                }
+        	 },
+             {
+                "graphOrientation": "vertical",
+                "graphType": "Bar",
+                "title": "Simple Bar graph"
+             }
+        );
+      });
+    </script>
   </head>
   <body>
     <div>
       <canvas id='cX' width='600' height='600' data-responsive='true' data-aspectRatio='1:1'></canvas>
     </div>
-    <!-- Page Script -->
-    <script>
-      var cx = new CanvasXpress("cX", 
-        {
-          "y" : {
-            "vars" : ["Variable1"],
-            "smps" : ["Sample1", "Sample2", "Sample3"],
-            "data" : [[33, 44, 55]]
-          }
-        }, {
-          "graphOrientation": "vertical",
-          "graphType": "Bar"
-        }
-      );
-    </script>
   </body>
 </html>