#23: Added axis-x-type to bit-c3 to config chart with axis; c3-data-c…

…olumn can accept axis-x for axis data
bitovi-components · May 5, 2016 · 79fd1a4 · 79fd1a4
1 parent 0434b2f
commit 79fd1a4
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 9 deletions.
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>
  * ```
  */
 can.Component.extend({
@@ -31,14 +33,24 @@ can.Component.extend({
     events: {
         inserted: function(viewModel, ev) {
             var rootElement = ev.target,
-                graphBaseElement = d3.select(rootElement.getElementsByClassName('chart-container')[0]),
-                chart = c3.generate({
-                    bindto: graphBaseElement,
-                    data: {
-                        columns: []
+              graphBaseElement = d3.select(rootElement.getElementsByClassName('chart-container')[0]),
+              axisXType = this.viewModel.attr('axisXType'),
+              config = {
+                  bindto: graphBaseElement,
+                  data: {
+                      columns: []
+                  }
+              };
+
+            if (axisXType){
+                config.data.x = 'x';
+                config.axis = {
+                    x: {
+                        type: axisXType
                     }
-                });
-            this.viewModel.attr('chart', chart);
+                }
+            }
+            this.viewModel.attr('chart', c3.generate(config));
         },
         removed: function() {
             this.viewModel.attr('chart', this.viewModel.attr('chart').destroy());

diff --git a/src/data/column/column.js b/src/data/column/column.js
@@ -34,6 +34,15 @@ import ColumnVM from './viewmodel'
  *   </bit-c3-data>
  * </bit-c3>
  * ```
+ *
+ * With axis-x (`axis-x-type` must be defined fir `bit-c3`):
+ * ```html
+ * <bit-c3>
+ *   <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>
+ * ```
  */
 can.Component.extend({
 	tag: "bit-c3-data-column",

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