Refactored the samples to the new structure

jettro · Dec 31, 2014 · 8611f09 · 8611f09
1 parent b244c3a
commit 8611f09
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 52 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
-bower_components
+bower_components
+node_modules
+/c3-angular.js
diff --git a/c3js-directive.js b/c3js-directive.js
@@ -19,7 +19,7 @@ angular.module('gridshore.c3js.chart', [])
 	this.showGraph = function() {
 		var config = {};			
 		config.bindto = "#"+$scope.bindto;
-		config.data = {}
+		config.data = {};
 
 		if ($scope.chartData && $scope.chartColumns) {
 			$scope.$watchCollection('chartData', function() {
@@ -126,25 +126,25 @@ angular.module('gridshore.c3js.chart', [])
 			$scope.grid = {};
 		}
 		if (axis === "x") {
-			if ($scope.grid.x == undefined) {
+			if ($scope.grid.x === undefined) {
 				$scope.grid.x = {};
 			}
-			if ($scope.grid.x.lines == undefined) {
+			if ($scope.grid.x.lines === undefined) {
 				$scope.grid.x.lines = [];
 			}
 		} else {
-			if ($scope.grid.y == undefined) {
+			if ($scope.grid.y === undefined) {
 				$scope.grid.y = {};
 			}
-			if ($scope.grid.y.lines == undefined) {
+			if ($scope.grid.y.lines === undefined) {
 				$scope.grid.y.lines = [];
 			}
 
 		}
 		if (axis === "y2") {
 			$scope.grid.y.lines.push({"value":value,"text":text,"axis":"y2"});
 		} else {
-			$scope.grid[axis].lines.push({"value":value,"text":text})
+			$scope.grid[axis].lines.push({"value":value,"text":text});
 		}
 	};
 
@@ -190,11 +190,11 @@ angular.module('gridshore.c3js.chart', [])
 		$scope.chart.load(data);
 	}
 }])
-.directive('c3chart', function($timeout) {
+.directive('c3chart', ['$timeout', function($timeout) {
 	var chartLinker = function(scope,element,attrs,chartCtrl) {
 		// Trick to wait for all rendering of the DOM to be finished.
 		$timeout(function() {
-			chartCtrl.showGraph()
+			chartCtrl.showGraph();
 		});
 	};
 
@@ -214,8 +214,8 @@ angular.module('gridshore.c3js.chart', [])
 		"replace":true,
 		"transclude":true,
 		"link": chartLinker
-	}
-})
+	};
+}])
 .directive('chartColumn', function() {
 	var columnLinker = function(scope,element,attrs,chartCtrl) {
 		var column = attrs['columnValues'].split(",");
@@ -229,7 +229,7 @@ angular.module('gridshore.c3js.chart', [])
 		"scope": {},
 		"replace":true,
 		"link": columnLinker
-	}
+	};
 })
 .directive('chartAxes', function() {
 	var axesLinker = function(scope,element,attrs,chartCtrl) {
@@ -243,7 +243,7 @@ angular.module('gridshore.c3js.chart', [])
 		var yAxis = {};
 		if (y2) {
 			var items = y2.split(",");
-			for (item in items) {
+			for (var item in items) {
 				yAxis[items[item]] = "y2";
 			}
 			if (y) {
@@ -262,7 +262,7 @@ angular.module('gridshore.c3js.chart', [])
 		"scope": {},
 		"replace":true,
 		"link": axesLinker
-	}
+	};
 })
 .directive('chartAxis', function() {
 	var axisLinker = function(scope,element,attrs,chartCtrl) {
@@ -280,8 +280,7 @@ angular.module('gridshore.c3js.chart', [])
 		"template": "<div ng-transclude></div>",
 		"replace":true,
 		"link": axisLinker
-	}
-
+	};
 })
 .directive('chartAxisX', function() {
 	var axisLinker = function(scope,element,attrs,chartCtrl) {
@@ -310,7 +309,7 @@ angular.module('gridshore.c3js.chart', [])
 		"template": "<div ng-transclude></div>",
 		"replace":true,
 		"link": axisLinker
-	}
+	};
 })
 .directive('chartAxisY', function() {
 	var axisLinker = function(scope,element,attrs,chartCtrl) {

diff --git a/examples/directive1-1.html b/examples/directive1-1.html
@@ -3,7 +3,7 @@
 <head>
 	<meta charset="utf-8">
 
-	<link href="css/c3-0.2.4.css" rel="stylesheet" type="text/css">
+	<link href="assets/css/c3.min.css" rel="stylesheet" type="text/css">
 </head>
 <body ng-controller="GraphCtrl" >
 	<c3chart bindto-id="chart" chart-data="datapoints" chart-columns="datacolumns" chart-x="datax">
@@ -18,10 +18,10 @@
  	</c3chart>
 
 	<!-- Load the javascript libraries -->
-	<script src="js/d3/d3-3.4.11.min.js" charset="utf-8"></script>
-	<script src="js/c3/c3-0.2.4.min.js"></script>
-	<script src="js/angular/angular-1.2.21.min.js"></script>
-	<script src="js/c3js-directive.js"></script>
+	<script src="assets/js/d3.min.js" charset="utf-8"></script>
+	<script src="assets/js/c3.min.js"></script>
+	<script src="assets/js/angular.min.js"></script>
+	<script src="assets/js/c3-angular.min.js"></script>
 	<script src="js/graph-app-directive-1.js"></script>
 </body>
 </html>
diff --git a/examples/directive1.html b/examples/directive1.html
@@ -3,7 +3,7 @@
 <head>
 	<meta charset="utf-8">
 
-	<link href="css/c3-0.2.4.css" rel="stylesheet" type="text/css">
+	<link href="assets/css/c3.min.css" rel="stylesheet" type="text/css">
 </head>
 <body ng-controller="GraphCtrl" >
 	<h1>Sample directives</h1>
@@ -24,10 +24,10 @@ <h2>Add meaning to the x axis and change names and colors</h2>
 
 
 	<!-- Load the javascript libraries -->
-	<script src="js/d3/d3-3.4.11.min.js" charset="utf-8"></script>
-	<script src="js/c3/c3-0.2.4.min.js"></script>
-	<script src="js/angular/angular-1.2.21.min.js"></script>
-	<script src="js/c3js-directive.js"></script>
+	<script src="assets/js/d3.min.js" charset="utf-8"></script>
+	<script src="assets/js/c3.min.js"></script>
+	<script src="assets/js/angular.min.js"></script>
+	<script src="assets/js/c3-angular.min.js"></script>
 	<script src="js/graph-app-directive-1.js"></script>
 </body>
 </html>
diff --git a/examples/directive2.html b/examples/directive2.html
@@ -3,7 +3,7 @@
 <head>
 	<meta charset="utf-8">
 
-	<link href="css/c3-0.2.4.css" rel="stylesheet" type="text/css">
+	<link href="assets/css/c3.min.css" rel="stylesheet" type="text/css">
 </head>
 <body ng-controller="GraphCtrl" >
 	<c3chart bindto-id="chart" chart-data="datapoints" chart-columns="datacolumns" chart-x="datax">
@@ -15,10 +15,10 @@
  	</c3chart>
 
 	<!-- Load the javascript libraries -->
-	<script src="js/d3/d3-3.4.11.min.js" charset="utf-8"></script>
-	<script src="js/c3/c3-0.2.4.min.js"></script>
-	<script src="js/angular/angular-1.2.21.min.js"></script>
-	<script src="js/c3js-directive.js"></script>
+	<script src="assets/js/d3.min.js" charset="utf-8"></script>
+	<script src="assets/js/c3.min.js"></script>
+	<script src="assets/js/angular.min.js"></script>
+	<script src="assets/js/c3-angular.min.js"></script>
 	<script src="js/graph-app-directive-2.js"></script>
 </body>
 </html>
diff --git a/examples/directive3.html b/examples/directive3.html
@@ -3,7 +3,7 @@
 <head>
 	<meta charset="utf-8">
 
-	<link href="css/c3-0.2.4.css" rel="stylesheet" type="text/css">
+	<link href="assets/css/c3.min.css" rel="stylesheet" type="text/css">
 </head>
 <body ng-controller="GraphCtrl" >
 
@@ -198,10 +198,10 @@ <h2>Show legend, tooltip and size customization</h2>
  	</c3chart>
 
 	<!-- Load the javascript libraries -->
-	<script src="js/d3/d3-3.4.11.min.js" charset="utf-8"></script>
-	<script src="js/c3/c3-0.2.4.min.js"></script>
-	<script src="js/angular/angular-1.2.21.min.js"></script>
-	<script src="js/c3js-directive.js"></script>
+	<script src="assets/js/d3.min.js" charset="utf-8"></script>
+	<script src="assets/js/c3.min.js"></script>
+	<script src="assets/js/angular.min.js"></script>
+	<script src="assets/js/c3-angular.min.js"></script>
 	<script src="js/graph-app-directive-1.js"></script>
 </body>
 </html>
diff --git a/examples/index.html b/examples/index.html
@@ -4,11 +4,19 @@
 	<meta charset="utf-8">
 </head>
 <body>
+	<p>The first few samples are more to try out c3js library. They have nothing to do with the directives.</p>
 	<ul>
 		<li><a href="index1.html">Basic c3 sample.</a></li>
 		<li><a href="index2.html">Load c3 by angular.</a></li>
 		<li><a href="index3.html">Add some options controllable by the user.</a></li>
 		<li><a href="index4.html">Time based data and more AngularJS.</a></li>
 	</ul>
+	<p>The next few samples are using the directives.</p>
+	<ul>
+		<li><a href="directive1.html">Basic c3 sample.</a></li>
+		<li><a href="directive1-1.html">Add more configuration.</a></li>
+		<li><a href="directive2.html">Use time based data.</a></li>
+		<li><a href="directive3.html">Lots of other samples.</a></li>
+	</ul>
 </body>
 </html>
diff --git a/examples/index1.html b/examples/index1.html
@@ -6,15 +6,15 @@
 <head>
 	<meta charset="utf-8">
 
-	<link href="css/c3-0.2.4.css" rel="stylesheet" type="text/css">
+	<link href="assets/css/c3.min.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 	<h1>Sample 1: Most basic C3JS sample</h1>
 	<div id="chart"></div>
 
 	<!-- Load the javascript libraries -->
-	<script src="js/d3/d3-3.4.11.min.js" charset="utf-8"></script>
-	<script src="js/c3/c3-0.2.4.min.js"></script>
+	<script src="assets/js/d3.min.js" charset="utf-8"></script>
+	<script src="assets/js/c3.min.js"></script>
 
 	<!-- Initialize and draw the chart -->
 	<script type="text/javascript">

diff --git a/examples/index2.html b/examples/index2.html
@@ -8,16 +8,16 @@
 <head>
 	<meta charset="utf-8">
 
-	<link href="css/c3-0.2.4.css" rel="stylesheet" type="text/css">
+	<link href="assets/css/c3.min.css" rel="stylesheet" type="text/css">
 </head>
 <body ng-controller="GraphCtrl" ng-init="showGraph()">
 	<h1>Sample 2: Load chart using AngularJS</h1>
 	<div id="chart"></div>
 
 	<!-- Load the javascript libraries -->
-	<script src="js/d3/d3-3.4.11.min.js" charset="utf-8"></script>
-	<script src="js/c3/c3-0.2.4.min.js"></script>
-	<script src="js/angular/angular-1.2.21.min.js"></script>
+	<script src="assets/js/d3.min.js" charset="utf-8"></script>
+	<script src="assets/js/c3.min.js"></script>
+	<script src="assets/js/angular.min.js"></script>
 	<script src="js/graph-app-2.js"></script>
 </body>
 </html>
diff --git a/examples/index3.html b/examples/index3.html
@@ -7,7 +7,7 @@
 <head>
 	<meta charset="utf-8">
 
-	<link href="css/c3-0.2.4.css" rel="stylesheet" type="text/css">
+	<link href="assets/css/c3.min.css" rel="stylesheet" type="text/css">
 </head>
 <body ng-controller="GraphCtrl">
 	<form novalidate>
@@ -23,9 +23,9 @@
 	<div id="chart"></div>
 
 	<!-- Load the javascript libraries -->
-	<script src="js/d3/d3-3.4.11.min.js" charset="utf-8"></script>
-	<script src="js/c3/c3-0.2.4.min.js"></script>
-	<script src="js/angular/angular-1.2.21.min.js"></script>
+	<script src="assets/js/d3.min.js" charset="utf-8"></script>
+	<script src="assets/js/c3.min.js"></script>
+	<script src="assets/js/angular.min.js"></script>
 	<script src="js/graph-app-3.js"></script>
 </body>
 </html>
diff --git a/examples/index4.html b/examples/index4.html
@@ -6,7 +6,7 @@
 <head>
 	<meta charset="utf-8">
 
-	<link href="css/c3-0.2.4.css" rel="stylesheet" type="text/css">
+	<link href="assets/css/c3.min.css" rel="stylesheet" type="text/css">
 </head>
 <body ng-controller="GraphCtrl" ng-init="showGraph()">
 	<p>After pushing the button a few new data points will be loaded.</p>
@@ -15,9 +15,9 @@
 	<div id="chart"></div>
 
 	<!-- Load the javascript libraries -->
-	<script src="js/d3/d3-3.4.11.min.js" charset="utf-8"></script>
-	<script src="js/c3/c3-0.2.4.min.js"></script>
-	<script src="js/angular/angular-1.2.21.min.js"></script>
+	<script src="assets/js/d3.min.js" charset="utf-8"></script>
+	<script src="assets/js/c3.min.js"></script>
+	<script src="assets/js/angular.min.js"></script>
 	<script src="js/graph-app-4.js"></script>
 </body>
 </html>