#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 10, 2017 · 59d4458 · 59d4458
1 parent 425d8e4
commit 59d4458
Show file tree

Hide file tree

Showing 3 changed files with 36 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>
  * ```
  */
 Component.extend({
@@ -31,14 +33,25 @@ 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.chart = chart;
+                }
+            }
+
+            this.viewModel.chart = c3.generate(config);
         },
         removed: function() {
             if (this.viewModel.chart){

diff --git a/src/data/column/column.js b/src/data/column/column.js
@@ -35,6 +35,15 @@ import canViewModel from 'can-view-model';
  *   </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>
+ * ```
  */
 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.attr('axisX')){
+			columns.unshift(this.attr('axisX').attr());
+		}
 		if(value && value.length) {
 			chart.load({
-				columns: [pushing]
+				columns: columns
 			});
 		} else {
 			this.unloadColumn();