Support simple line chart

[Feature] Support simple line chart using NVD3 (d3.js based chart
library)

index.html

@@ -133,7 +133,11 @@ <h3>Slides:</h3>
 
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
-<script type="text/javascript" src="./js/pptx2html.js"></script>
+<script type="text/javascript" src="js/pptx2html.js"></script>
+
+<link rel="stylesheet" href="css/nv.d3.min.css">
+<script type="text/javascript" src="js/chart/d3.min.js"></script>
+<script type="text/javascript" src="js/chart/nv.d3.min.js"></script>
 
 </body>
 </html>

js/pptx2html.js

@@ -36,12 +36,74 @@ $(document).ready(function() {
 							case "slide":
 								$result.append(msg.data);
 								break;
+							case "processMsgQueue":
+								var queue = msg.data;
+								for (var i=0; i<queue.length; i++) {
+
+									queue[i].data.chartID;
+									queue[i].data.chartType;
+									var d = queue[i].data.chartData;
+									/*
+									var sin = [], cos = [];
+									
+									for (var j = 0; j < 100; j++) {
+										sin.push({x: j, y: Math.sin(j/10)});
+										cos.push({x: j, y: .5 * Math.cos(j/10)});
+									}
+									
+									var data =  [{
+										values: sin,
+										key: 'Sine Wave',
+										color: '#ff7f0e'
+									}, {
+										values: cos,
+										key: 'Cosine Wave',
+										color: '#2ca02c'
+									}];
+									*/
+									var data =  [];
+									for (var j=0; j<d.length; j++) {
+										var arr = [];
+										for (var k=0; k<d[j].length; k++) {
+											arr.push({x: k, y: d[j][k]});
+										}
+										data.push({
+											key: 'data' + (j + 1),
+											values: arr
+										});
+									}
+
+									var chart = nv.models.lineChart()
+										.useInteractiveGuideline(true);
+
+									chart.xAxis
+										.axisLabel('X')
+										.tickFormat(d3.format(',r'));
+
+									chart.yAxis
+										.axisLabel('Y')
+										.tickFormat(d3.format('.02f'));
+
+									//document.getElementById("#" + queue[i].data.chartID).innerHTML = "";
+									d3.select("#" + queue[i].data.chartID)
+										.append("svg")
+										.datum(data)
+										.transition().duration(500)
+										.call(chart);
+
+									nv.utils.windowResize(chart.update);
+
+								}
+								break;
 							case "pptx-thumb":
 								$("#pptx-thumb").attr("src", "data:image/jpeg;base64," + msg.data);
 								break;
 							case "ExecutionTime":
 								$("#info_block").html("Execution Time: " + msg.data + " (ms)");
 								isDone = true;
+								worker.postMessage({
+									"type": "getMsgQueue"
+								});
 								break;
 							case "WARN":
 								console.warn('Worker: ', msg.data);
@@ -61,7 +123,10 @@ $(document).ready(function() {
 
 					}, false);
 
-					worker.postMessage(e.target.result);
+					worker.postMessage({
+						"type": "processPPTX",
+						"data": e.target.result
+					});
 
 				}
 			})(fileName);

js/worker.js

@@ -9,6 +9,8 @@ importScripts(
 	'./functions.js'
 );
 
+var MsgQueue = new Array();
+
 var themeContent = null;
 
 var chartID = 0;
@@ -19,9 +21,26 @@ var otherFontSize = 16;
 
 onmessage = function(e) {
 
+	switch (e.data.type) {
+		case "processPPTX":
+			processPPTX(e.data.data);
+			break;
+		case "getMsgQueue":
+			self.postMessage({
+				"type": "processMsgQueue",
+				"data": MsgQueue
+			});
+			break;
+		default:
+	}
+
+}
+
+function processPPTX(data) {
+
 	var dateBefore = new Date();
 
-	var zip = new JSZip(e.data);
+	var zip = new JSZip(data);
 
 	if (zip.file("docProps/thumbnail.jpeg") !== null) {
 		var pptxThumbImg = base64ArrayBuffer(zip.file("docProps/thumbnail.jpeg").asArrayBuffer());
@@ -824,21 +843,33 @@ function processGraphicFrameNode(node, warpObj) {
 			break;
 		case "http://schemas.openxmlformats.org/drawingml/2006/chart":
 			var xfrmNode = getTextByPathList(node, ["p:xfrm"]);
-			result = "<div id='chart" + chartID + "' class='block content' style='border: 1px dotted;" + getPosition(xfrmNode, undefined, undefined) + getSize(xfrmNode, undefined, undefined) + "'>TODO: chart</div>";
+			result = "<div id='chart" + chartID + "' class='block content' style='border: 1px dotted;" + getPosition(xfrmNode, undefined, undefined) + getSize(xfrmNode, undefined, undefined) + "'></div>";
 			var rid = node["a:graphic"]["a:graphicData"]["c:chart"]["attrs"]["r:id"];
 			var refName = warpObj["slideResObj"][rid]["target"];
 			var content = readXmlFile(warpObj["zip"], refName);
 			var plotArea = getTextByPathList(content, ["c:chartSpace", "c:chart", "c:plotArea"]);
 			for (var key in plotArea) {
 				switch (key) {
 					case "c:lineChart":
-						result += eachElement(plotArea["c:lineChart"]["c:ser"], function(innerNode) {
-							var result = "";
-							result += eachElement(innerNode["c:val"]["c:numRef"]["c:numCache"]["c:pt"], function(innerNode) {
-								var result = innerNode["c:v"] + "&nbsp;";
-								return result;
+						var dataMat = new Array();
+						/*result +=*/eachElement(plotArea["c:lineChart"]["c:ser"], function(innerNode) {
+							//var result = "";
+							var dataRow = new Array();
+							/*result +=*/eachElement(innerNode["c:val"]["c:numRef"]["c:numCache"]["c:pt"], function(innerNode) {
+								//var result = innerNode["c:v"] + "&nbsp;";
+								dataRow.push(parseFloat(innerNode["c:v"]));
+								return "";
 							});
-							return result + "<br>";
+							dataMat.push(dataRow);
+							return "";
+						});
+						MsgQueue.push({
+							"type": "createChart",
+							"data": {
+								"chartID": "chart" + chartID,
+								"chartType": "lineChart",
+								"chartData": dataMat
+							}
 						});
 						break;
 					case "c:catAx":