Merge pull request #37 from bitovi-components/dev/axis-x

Allow full config being passed to c3
bitovi-components · May 11, 2017 · f093e69 · f093e69
2 parents 425d8e4 + e279496
commit f093e69
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 14 deletions.
diff --git a/examples/chart/bar-x-labels-rotated.html b/examples/chart/bar-x-labels-rotated.html
@@ -0,0 +1,55 @@
+<html>
+  <head>
+    <title>Bar Chart</title>
+  </head>
+  <body>
+    <!-- Template to load -->
+    <script type="text/stache" id="demo-html" can-autorender>
+<can-import from="bit-c3" />
+<bit-c3 {config}="config">
+  <bit-c3-data type="{type}">
+    {{#each dataColumns}}
+      <bit-c3-data-column value="{.}" {axis-x}="axisXData" />
+    {{/each}}
+  </bit-c3-data>
+</bit-c3>
+    </script>
+
+<!-- TODO add support for 
+  <c3-bar width-ratio="0.5" width="100" />
+-->
+
+    <!-- Loading Script -->
+    <script src="../../node_modules/steal/steal.js" id="demo-source" main="can-view-autorender">
+import DefineList from "can-define/list/list";
+import DefineMap from "can-define/map/map";
+import canViewModel from "can-view-model";
+
+let data1 = new DefineList(['data1', 30, 200, 100, 400, 150, 250]),
+    data2 = new DefineList(['data2', 130, 100, 140, 200, 150, 50]),
+    type = 'bar',
+    config = {
+      axis: {
+        x: {
+          type: 'category',
+          tick: {
+            rotate: -45,
+            multiline: false
+          },
+          height: 130
+        }
+      }
+    },
+    axisXData = new DefineList(['x','cat 1','cat 2','cat 3','cat 4','cat 5','cat 6']);
+
+var element = document.getElementById("demo-html");
+canViewModel(element).set({
+  dataColumns: new DefineList([data1, data2]),
+  type,
+  config,
+  axisXData
+});
+    </script>
+  </body>
+</html>
+
diff --git a/examples/chart/bar-x-labels.html b/examples/chart/bar-x-labels.html
@@ -0,0 +1,44 @@
+<html>
+  <head>
+    <title>Bar Chart</title>
+  </head>
+  <body>
+    <!-- Template to load -->
+    <script type="text/stache" id="demo-html" can-autorender>
+<can-import from="bit-c3" />
+<bit-c3 {config}="config">
+  <bit-c3-data type="{type}">
+    {{#each dataColumns}}
+      <bit-c3-data-column value="{.}" {axis-x}="axisX" />
+    {{/each}}
+  </bit-c3-data>
+</bit-c3>
+    </script>
+
+<!-- TODO add support for 
+  <c3-bar width-ratio="0.5" width="100" />
+-->
+
+    <!-- Loading Script -->
+    <script src="../../node_modules/steal/steal.js" id="demo-source" main="can-view-autorender">
+import DefineList from "can-define/list/list";
+import DefineMap from "can-define/map/map";
+import canViewModel from "can-view-model";
+
+let data1 = new DefineList(['data1', 30, 200, 100, 400, 150, 250]),
+    data2 = new DefineList(['data2', 130, 100, 140, 200, 150, 50]),
+    type = 'bar',
+    config = { axis: { x: { type: 'category' } } },
+    axisX = new DefineList(['x','cat 1','cat 2','cat 3']);
+
+let element = document.getElementById("demo-html");
+canViewModel(element).set({
+  dataColumns: new DefineList([data1, data2]),
+  type,
+  axisX,
+  config
+});
+    </script>
+  </body>
+</html>
+
diff --git a/src/chart.js b/src/chart.js
@@ -22,6 +22,8 @@ import ChartVM from './viewmodel';
  *
  * ```html
  * <bit-c3></bit-c3>
+ *
+ * <bit-c3 axis-x-type="category"></bit-c3>
  * ```
  */
 Component.extend({
@@ -30,18 +32,15 @@ Component.extend({
     viewModel: ChartVM,
     events: {
         inserted: function(viewModel, ev) {
-            var rootElement = ev.target,
-                graphBaseElement = d3.select(rootElement.getElementsByClassName('chart-container')[0]),
-                chart = c3.generate({
-                    bindto: graphBaseElement,
-                    data: {
-                        columns: []
-                    }
-                });
-            this.viewModel.chart = chart;
+            let rootElement = ev.target;
+
+            this.viewModel.graphBaseElement = d3.select(rootElement.getElementsByClassName('chart-container')[0]);
+
+            this.viewModel.chart = c3.generate(this.viewModel.config);
         },
         removed: function() {
             if (this.viewModel.chart){
+                this.viewModel.graphBaseElement = undefined;
                 this.viewModel.chart = this.viewModel.chart.destroy();
             }
         }

diff --git a/src/data/column/column.js b/src/data/column/column.js
@@ -35,6 +35,20 @@ import canViewModel from 'can-view-model';
  *   </bit-c3-data>
  * </bit-c3>
  * ```
+ *
+ * With config:
+ * ```js
+ * let vm = {
+ *   config: {axis: {x: {type: 'category'}}}
+ * }
+ * ```
+ * ```html
+ * <bit-c3 {config}="config">
+ *   <bit-c3-data>
+ *     <bit-c3-data-column key="dataSet1" value="[1, 2, 3]" axis-x="['x','cat 1','cat 2','cat 3']" />
+ *   </bit-c3-data>
+ * </bit-c3>
+ * ```
  */
 Component.extend({
 	tag: "bit-c3-data-column",

diff --git a/src/data/column/viewmodel.js b/src/data/column/viewmodel.js
@@ -24,10 +24,15 @@ export default DefineMap.extend({seal: false}, {
 		var value = this.dequeueKey(this.value),
 			key = this.key,
 			chart = this.chart,
-			pushing = [key].concat(value);
+			pushing = [key].concat(value),
+			columns = [pushing];
+
+		if (this.axisX){
+			columns.unshift(this.axisX.get());
+		}
 		if(value && value.length) {
 			chart.load({
-				columns: [pushing]
+				columns: columns
 			});
 		} else {
 			this.unloadColumn();

diff --git a/src/viewmodel.js b/src/viewmodel.js
@@ -3,5 +3,28 @@ import DefineMap from "can-define/map/map";
 export default DefineMap.extend({
 	chart: {
 		value: null
-  }
+	},
+	/**
+	 * Dom element that chart will be bound to.
+	 */
+	graphBaseElement: {
+		type: '*'
+	},
+	/**
+	 * Config object that c3 chart will be generated with.
+	 */
+	config: {
+		type: '*',
+		get (val = {}) {
+			let config = val;
+			config.bindto = this.graphBaseElement;
+			config.data = {
+				columns: []
+			};
+			if (val.axis && val.axis.x) {
+				config.data.x = 'x';
+			}
+			return config;
+		}
+	}
 });
diff --git a/test/bit-c3_test.js b/test/bit-c3_test.js
@@ -12,6 +12,7 @@ import {randomString} from "bit-c3/lib/";
 import DefineList from "can-define/list/list";
 import DefineMap from "can-define/map/map";
 import stache from "can-stache";
+import canViewModel from "can-view-model";
 
 F.attach(QUnit);
 
@@ -25,7 +26,32 @@ var flattenCanList = function(list) {
 
 QUnit.module('bit-c3');
 
-// no tests currently
+test('Should configure chart using a passed config', 1, (assert) => {
+	let tpl = '<bit-c3 {config}="config"><bit-c3-data><bit-c3-data-column /></bit-c3-data></bit-c3>';
+	let frag = stache(tpl)({
+		config: {
+			axis: {
+				x: {
+					type: 'category',
+					tick: { rotate: -45, multiline: false },
+					height: 130
+				}
+			}
+		}
+	});
+	let vm = canViewModel(frag.querySelector('bit-c3'));
+	assert.deepEqual(vm.config, {
+		data: { columns:[], x:'x' },
+		axis: {
+			x: {
+				type:'category',
+				tick: { rotate: -45, multiline: false },
+				height: 130
+			}
+		},
+		bindto: undefined
+	}, 'Config object is defined correctly');
+});
 
 QUnit.module('bit-c3-data');
 
@@ -300,4 +326,4 @@ test('Should remove chart from DOM correctly', 1, (assert) => {
 
 	// The test will fail if removing the chart from DOM causes a JS exception.
 	assert.ok(true, 'Chart was correctly removed');
-});
+});