Added support for charts via Charts.js plugin.

app/com/gitpitch/models/SlideshowModel.java

@@ -317,6 +317,13 @@ public class SlideshowModel {
         return (_yOpts != null) ? _yOpts.fetchMouseWheel(params()) : false;
     }
 
+    /*
+     * Return true if "charts" defined in PITCHME.yaml.
+     */
+    public boolean chartsEnabled() {
+        return (_yOpts != null) ? _yOpts.fetchCharts(params()) : false;
+    }
+
     /*
      * Return true if "mathjax" defined in PITCHME.yaml.
      */

app/com/gitpitch/utils/YAMLOptions.java

@@ -184,105 +184,31 @@ public final class YAMLOptions {
     }
 
     public Integer fetchAutoSlide(PitchParams pp) {
-
-        try {
-            Object autoSlide = _yProps.get(AUTOSLIDE_OPTION);
-
-            if (autoSlide instanceof Integer)
-                return (Integer) autoSlide;
-            else if (autoSlide instanceof String)
-                return Integer.parseInt((String) autoSlide);
-            else
-                return 0;
-
-        } catch (NumberFormatException nfex) {
-            return 0;
-        }
+        return fetchIntegerOption(pp, AUTOSLIDE_OPTION);
     }
 
     public Boolean fetchVerticalCenter(PitchParams pp) {
-
-        try {
-            Object vertCenter = _yProps.get(VERTICAL_CENTER);
-
-            if (vertCenter instanceof Boolean)
-                return (Boolean) vertCenter;
-            else if (vertCenter instanceof String)
-                return Boolean.parseBoolean((String) vertCenter);
-            else
-                return true;
-
-        } catch (Exception bex) {
-            return true;
-        }
+        return fetchBooleanOption(pp, VERTICAL_CENTER, true);
     }
 
     public Boolean fetchLoop(PitchParams pp) {
-
-        try {
-            Object canLoop = _yProps.get(LOOP_OPTION);
-
-            if (canLoop instanceof Boolean)
-                return (Boolean) canLoop;
-            else if (canLoop instanceof String)
-                return Boolean.parseBoolean((String) canLoop);
-            else
-                return false;
-
-        } catch (Exception bex) {
-            return false;
-        }
+        return fetchBooleanOption(pp, LOOP_OPTION);
     }
 
     public Boolean fetchRTL(PitchParams pp) {
-
-        try {
-            Object canRTL = _yProps.get(RTL_OPTION);
-
-            if (canRTL instanceof Boolean)
-                return (Boolean) canRTL;
-            else if (canRTL instanceof String)
-                return Boolean.parseBoolean((String) canRTL);
-            else
-                return false;
-
-        } catch (Exception bex) {
-            return false;
-        }
+        return fetchBooleanOption(pp, RTL_OPTION);
     }
 
     public Boolean fetchShuffle(PitchParams pp) {
-
-        try {
-            Object canShuffle = _yProps.get(SHUFFLE_OPTION);
-
-            if (canShuffle instanceof Boolean)
-                return (Boolean) canShuffle;
-            else if (canShuffle instanceof String)
-                return Boolean.parseBoolean((String) canShuffle);
-            else
-                return false;
-
-        } catch (Exception bex) {
-            return false;
-        }
+        return fetchBooleanOption(pp, SHUFFLE_OPTION);
     }
 
     public Boolean fetchMouseWheel(PitchParams pp) {
+        return fetchBooleanOption(pp, MOUSE_WHEEL_OPTION);
+    }
 
-        try {
-            Object mouseWheel = _yProps.get(MOUSE_WHEEL_OPTION);
-
-            if (mouseWheel instanceof Boolean)
-                return (Boolean) mouseWheel;
-            else if (mouseWheel instanceof String)
-                return Boolean.parseBoolean((String) mouseWheel);
-            else
-                return false;
-
-        } catch (Exception bex) {
-            return false;
-        }
+    public Boolean fetchCharts(PitchParams pp) {
+        return fetchBooleanOption(pp, CHARTS_OPTION);
     }
 
     public Boolean mathEnabled(PitchParams pp) {
@@ -352,6 +278,45 @@ public final class YAMLOptions {
         return _yProps.get(REVEALJS_VERSION);
     }
 
+    private Boolean fetchBooleanOption(PitchParams pp, String option) {
+        return fetchBooleanOption(pp, option, false);
+    }
+
+    private Boolean fetchBooleanOption(PitchParams pp,
+                                        String option, boolean dflt) {
+
+        try {
+            Object optionValue = _yProps.get(option);
+
+            if (optionValue instanceof Boolean)
+                return (Boolean) optionValue;
+            else if (optionValue instanceof String)
+                return Boolean.parseBoolean((String) optionValue);
+            else
+                return dflt;
+
+        } catch (Exception bex) {
+            return dflt;
+        }
+    }
+
+    private Integer fetchIntegerOption(PitchParams pp, String option) {
+
+        try {
+            Object optionValue = _yProps.get(option);
+
+            if (optionValue instanceof Integer)
+                return (Integer) optionValue;
+            else if (optionValue instanceof String)
+                return Integer.parseInt((String) optionValue);
+            else
+                return 0;
+
+        } catch (NumberFormatException nfex) {
+            return 0;
+        }
+    }
+
     private String defaultHighlight(PitchParams pp) {
         return PitchParams.isDarkTheme(fetchTheme(pp)) ?
                 HIGHLIGHT_DARK_DEFAULT : HIGHLIGHT_LIGHT_DEFAULT;
@@ -386,6 +351,7 @@ public final class YAMLOptions {
     private static final String HIGHLIGHT_OPTION = "highlight";
     private static final String FOOTNOTE_OPTION = "footnote";
     private static final String GATOKEN_OPTION = "gatoken";
+    private static final String CHARTS_OPTION = "charts";
     private static final String REVEALJS_VERSION = "revealjs-version";
 
     private static final String HSLIDE_DELIM = "horz-delim";

app/com/gitpitch/views/frags/SlideshowReveal.scala.html

@@ -25,6 +25,10 @@
             dependencies: [
                 { src: "@deps.revealjs(offline, ssm.fetchRevealVersionOverride())/plugin/markdown/marked.js"},
                 { src: "@deps.revealjs(offline, ssm.fetchRevealVersionOverride())/plugin/markdown/markdown.js"},
+                @if(ssm.chartsEnabled()) {
+                { src: "@deps.revealjs(offline, ssm.fetchRevealVersionOverride())/plugin/chart/Chart.min.js"},
+                { src: "@deps.revealjs(offline, ssm.fetchRevealVersionOverride())/plugin/chart/csv2chart.js"},
+                }
                 @if(ssm.showNotes()) {
                    { src: "@deps.revealjs(offline, ssm.fetchRevealVersionOverride())/plugin/notes/notes.js", async: true },
                 }

public/libs/reveal.js/3.3.1/plugin/chart/csv2chart.js

@@ -0,0 +1,163 @@
+/*****************************************************************
+** Author: Asvin Goel, goel@telematique.eu
+**
+** csv2chart.js is a plugin for reveal.js allowing to integrate
+** Chart.js in reveal.js
+**
+** Version: 0.1
+** 
+** License: MIT license (see LICENSE.md)
+**
+******************************************************************/
+
+var RevealChart = window.RevealChart || (function(){
+	function parseJSON(str) {
+	    var json;
+	    try {
+        	json = JSON.parse(str);
+	    } catch (e) {
+        	return null;
+    		}
+            return json;
+	}
+
+	/*
+	* Recursively merge properties of two objects 
+	*/
+	function mergeRecursive(obj1, obj2) {
+
+	  for (var p in obj2) {
+	    try {
+	      // Property in destination object set; update its value.
+	      if ( obj2[p].constructor==Object ) {
+	        obj1[p] = mergeRecursive(obj1[p], obj2[p]);
+	
+	      } else {
+	        obj1[p] = obj2[p];
+	
+	      }
+	
+	    } catch(e) {
+	      // Property in destination object not set; create it and set its value.
+	      obj1[p] = obj2[p];
+	
+	    }
+	  }
+	
+	  return obj1;
+	}
+
+
+	function createChart(canvas, CSV, comments) {
+		canvas.chart = null;
+		var ctx = canvas.getContext("2d");
+		var chartOptions = { responsive: true };
+		var chartData = { labels: null, datasets: []};
+		if ( comments !== null ) for (var j = 0; j < comments.length; j++ ){
+			comments[j] = comments[j].replace(/<!--/,'');
+			comments[j] = comments[j].replace(/-->/,'');
+			var config = parseJSON(comments[j]);
+			if ( config ) {
+				if ( config.data ) {
+					mergeRecursive( chartData, config.data);
+				}
+				if ( config.options ) {
+					mergeRecursive( chartOptions, config.options);
+				}
+			}
+		}
+		
+		var lines = CSV.split('\n').filter(function(v){return v!==''});
+		// if labels are not defined, get them from first line
+		if ( chartData.labels === null && lines.length > 0 ) {
+			chartData.labels = lines[0].split(',');
+			chartData.labels.shift();
+			lines.shift();
+		} 
+		// get data values
+		for (var j = 0; j < lines.length; j++ ){
+			if (chartData.datasets.length <= j) chartData.datasets[j] = {};
+			chartData.datasets[j].data =  lines[j].split(','); //.filter(function(v){return v!==''});
+			chartData.datasets[j].label = chartData.datasets[j].data[0];
+			chartData.datasets[j].data.shift();
+			for (var k = 0; k < chartData.datasets[j].data.length; k++ ){
+				chartData.datasets[j].data[k] = Number(chartData.datasets[j].data[k]);
+			}
+		}
+
+		// add chart options
+		var config = chartConfig[canvas.getAttribute("data-chart")];
+		if ( config ) {
+			for (var j = 0; j < chartData.datasets.length; j++ ){
+				for (var attrname in config) {
+					if ( !chartData.datasets[j][attrname]  ) {
+						chartData.datasets[j][attrname] = config[attrname][j%config[attrname].length];  
+					}
+				}
+			}
+		}		
+
+		canvas.chart = new Chart(ctx, { type: canvas.getAttribute("data-chart"), data: chartData, options: chartOptions }); 
+
+	}
+
+	var initializeCharts = function(){
+		// Get all canvases
+		var canvases = document.querySelectorAll("canvas");
+		for (var i = 0; i < canvases.length; i++ ){
+			// check if canvas has data-chart attribute
+			if ( canvases[i].hasAttribute("data-chart") ){
+				var CSV = canvases[i].innerHTML.trim();
+				var comments = CSV.match(/<!--[\s\S]*?-->/g);
+				CSV = CSV.replace(/<!--[\s\S]*?-->/g,'').replace(/^\s*\n/gm, "") 
+				if ( ! canvases[i].hasAttribute("data-chart-src") ) {
+					createChart(canvases[i], CSV, comments);
+				}
+				else {
+					var canvas = canvases[i];
+					var xhr = new XMLHttpRequest();
+					xhr.onload = function() {
+						if (xhr.readyState === 4) {
+							createChart(canvas, xhr.responseText, comments);
+						}
+						else {
+							console.warn( 'Failed to get file ' + canvas.getAttribute("data-chart-src") +". ReadyState: " + xhr.readyState + ", Status: " + xhr.status);
+						}
+					};
+
+					xhr.open( 'GET', canvas.getAttribute("data-chart-src"), false );
+					try {
+						xhr.send();
+					}
+					catch ( error ) {
+						console.warn( 'Failed to get file ' + canvas.getAttribute("data-chart-src") + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + error );
+					}
+				}
+
+			} 
+		}
+	}
+
+	// check if chart option is given or not
+	var chartConfig = Reveal.getConfig().chart || {};
+
+	// set global chart options
+	var config = chartConfig["defaults"];
+	if ( config ) {
+		mergeRecursive(Chart.defaults, config);
+	}		
+
+	Reveal.addEventListener('ready', function(){
+		initializeCharts();
+		Reveal.addEventListener('slidechanged', function(){
+			var canvases = Reveal.getCurrentSlide().querySelectorAll("canvas[data-chart]");
+			for (var i = 0; i < canvases.length; i++ ){
+				if ( canvases[i].chart ){
+					// bug redraw canvas - animation doesn't work here
+					canvases[i].chart.render();
+				}
+			}
+		
+		});
+	});
+})();

public/libs/reveal.js/3.4.1/plugin/chart/csv2chart.js

@@ -0,0 +1,163 @@
+/*****************************************************************
+** Author: Asvin Goel, goel@telematique.eu
+**
+** csv2chart.js is a plugin for reveal.js allowing to integrate
+** Chart.js in reveal.js
+**
+** Version: 0.1
+** 
+** License: MIT license (see LICENSE.md)
+**
+******************************************************************/
+
+var RevealChart = window.RevealChart || (function(){
+	function parseJSON(str) {
+	    var json;
+	    try {
+        	json = JSON.parse(str);
+	    } catch (e) {
+        	return null;
+    		}
+            return json;
+	}
+
+	/*
+	* Recursively merge properties of two objects 
+	*/
+	function mergeRecursive(obj1, obj2) {
+
+	  for (var p in obj2) {
+	    try {
+	      // Property in destination object set; update its value.
+	      if ( obj2[p].constructor==Object ) {
+	        obj1[p] = mergeRecursive(obj1[p], obj2[p]);
+	
+	      } else {
+	        obj1[p] = obj2[p];
+	
+	      }
+	
+	    } catch(e) {
+	      // Property in destination object not set; create it and set its value.
+	      obj1[p] = obj2[p];
+	
+	    }
+	  }
+	
+	  return obj1;
+	}
+
+
+	function createChart(canvas, CSV, comments) {
+		canvas.chart = null;
+		var ctx = canvas.getContext("2d");
+		var chartOptions = { responsive: true };
+		var chartData = { labels: null, datasets: []};
+		if ( comments !== null ) for (var j = 0; j < comments.length; j++ ){
+			comments[j] = comments[j].replace(/<!--/,'');
+			comments[j] = comments[j].replace(/-->/,'');
+			var config = parseJSON(comments[j]);
+			if ( config ) {
+				if ( config.data ) {
+					mergeRecursive( chartData, config.data);
+				}
+				if ( config.options ) {
+					mergeRecursive( chartOptions, config.options);
+				}
+			}
+		}
+		
+		var lines = CSV.split('\n').filter(function(v){return v!==''});
+		// if labels are not defined, get them from first line
+		if ( chartData.labels === null && lines.length > 0 ) {
+			chartData.labels = lines[0].split(',');
+			chartData.labels.shift();
+			lines.shift();
+		} 
+		// get data values
+		for (var j = 0; j < lines.length; j++ ){
+			if (chartData.datasets.length <= j) chartData.datasets[j] = {};
+			chartData.datasets[j].data =  lines[j].split(','); //.filter(function(v){return v!==''});
+			chartData.datasets[j].label = chartData.datasets[j].data[0];
+			chartData.datasets[j].data.shift();
+			for (var k = 0; k < chartData.datasets[j].data.length; k++ ){
+				chartData.datasets[j].data[k] = Number(chartData.datasets[j].data[k]);
+			}
+		}
+
+		// add chart options
+		var config = chartConfig[canvas.getAttribute("data-chart")];
+		if ( config ) {
+			for (var j = 0; j < chartData.datasets.length; j++ ){
+				for (var attrname in config) {
+					if ( !chartData.datasets[j][attrname]  ) {
+						chartData.datasets[j][attrname] = config[attrname][j%config[attrname].length];  
+					}
+				}
+			}
+		}		
+
+		canvas.chart = new Chart(ctx, { type: canvas.getAttribute("data-chart"), data: chartData, options: chartOptions }); 
+
+	}
+
+	var initializeCharts = function(){
+		// Get all canvases
+		var canvases = document.querySelectorAll("canvas");
+		for (var i = 0; i < canvases.length; i++ ){
+			// check if canvas has data-chart attribute
+			if ( canvases[i].hasAttribute("data-chart") ){
+				var CSV = canvases[i].innerHTML.trim();
+				var comments = CSV.match(/<!--[\s\S]*?-->/g);
+				CSV = CSV.replace(/<!--[\s\S]*?-->/g,'').replace(/^\s*\n/gm, "") 
+				if ( ! canvases[i].hasAttribute("data-chart-src") ) {
+					createChart(canvases[i], CSV, comments);
+				}
+				else {
+					var canvas = canvases[i];
+					var xhr = new XMLHttpRequest();
+					xhr.onload = function() {
+						if (xhr.readyState === 4) {
+							createChart(canvas, xhr.responseText, comments);
+						}
+						else {
+							console.warn( 'Failed to get file ' + canvas.getAttribute("data-chart-src") +". ReadyState: " + xhr.readyState + ", Status: " + xhr.status);
+						}
+					};
+
+					xhr.open( 'GET', canvas.getAttribute("data-chart-src"), false );
+					try {
+						xhr.send();
+					}
+					catch ( error ) {
+						console.warn( 'Failed to get file ' + canvas.getAttribute("data-chart-src") + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + error );
+					}
+				}
+
+			} 
+		}
+	}
+
+	// check if chart option is given or not
+	var chartConfig = Reveal.getConfig().chart || {};
+
+	// set global chart options
+	var config = chartConfig["defaults"];
+	if ( config ) {
+		mergeRecursive(Chart.defaults, config);
+	}		
+
+	Reveal.addEventListener('ready', function(){
+		initializeCharts();
+		Reveal.addEventListener('slidechanged', function(){
+			var canvases = Reveal.getCurrentSlide().querySelectorAll("canvas[data-chart]");
+			for (var i = 0; i < canvases.length; i++ ){
+				if ( canvases[i].chart ){
+					// bug redraw canvas - animation doesn't work here
+					canvases[i].chart.render();
+				}
+			}
+		
+		});
+	});
+})();