From 59d4458af796d3c4bb74c7536250adae0c105ccb Mon Sep 17 00:00:00 2001
From: Ilya Fadeev <fadeev.ilya@gmail.com>
Date: Thu, 5 May 2016 02:50:48 -0400
Subject: [PATCH 1/6] #23: Added axis-x-type to bit-c3 to config chart with
axis; c3-data-column can accept axis-x for axis data
---
src/chart.js | 27 ++++++++++++++++++++-------
src/data/column/column.js | 9 +++++++++
src/data/column/viewmodel.js | 9 +++++++--
3 files changed, 36 insertions(+), 9 deletions(-)
diff --git a/src/chart.js b/src/chart.js
index f9e0858f..366e9824 100644
--- 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
index abab4601..92ab7c2a 100644
--- 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
index c4f089f0..23fcb36a 100644
--- 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();
From 2ca1aa4889bd10504145a3a377bc1c4906c06c24 Mon Sep 17 00:00:00 2001
From: Ilya Fadeev <fadeev.ilya@gmail.com>
Date: Wed, 10 May 2017 17:29:10 -0400
Subject: [PATCH 2/6] added a test for main config
---
examples/chart/bar-x-labels.html | 45 ++++++++++++++++++++++++++++++++
src/chart.js | 22 +++-------------
src/data/column/column.js | 4 +--
src/data/column/viewmodel.js | 4 +--
src/viewmodel.js | 34 +++++++++++++++++++++++-
test/bit-c3_test.js | 12 ++++++---
6 files changed, 95 insertions(+), 26 deletions(-)
create mode 100644 examples/chart/bar-x-labels.html
diff --git a/examples/chart/bar-x-labels.html b/examples/chart/bar-x-labels.html
new file mode 100644
index 00000000..9b27e87e
--- /dev/null
+++ b/examples/chart/bar-x-labels.html
@@ -0,0 +1,45 @@
+<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 axis-x-type="category">
+ <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";
+import domData from "can-util/dom/data/data";
+
+let data1 = new DefineList(['data1', 30, 200, 100, 400, 150, 250]),
+ data2 = new DefineList(['data2', 130, 100, 140, 200, 150, 50]),
+ type = 'bar',
+ axisX = new DefineList(['x','cat 1','cat 2','cat 3']);
+
+var element = document.getElementById("demo-html");
+var vm = new DefineMap({
+ dataColumns: new DefineList([data1, data2]),
+ type,
+ axisX
+});
+window.vm = vm;
+domData.set.call(element, "viewModel", vm);
+ </script>
+ </body>
+</html>
+
diff --git a/src/chart.js b/src/chart.js
index 366e9824..51cfcf1e 100644
--- a/src/chart.js
+++ b/src/chart.js
@@ -32,29 +32,15 @@ Component.extend({
viewModel: ChartVM,
events: {
inserted: function(viewModel, ev) {
- var rootElement = ev.target,
- graphBaseElement = d3.select(rootElement.getElementsByClassName('chart-container')[0]),
- axisXType = this.viewModel.attr('axisXType'),
- config = {
- bindto: graphBaseElement,
- data: {
- columns: []
- }
- };
+ let rootElement = ev.target;
- if (axisXType){
- config.data.x = 'x';
- config.axis = {
- x: {
- type: axisXType
- }
- }
- }
+ this.viewModel.graphBaseElement = d3.select(rootElement.getElementsByClassName('chart-container')[0]);
- this.viewModel.chart = c3.generate(config);
+ 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
index 92ab7c2a..86688591 100644
--- a/src/data/column/column.js
+++ b/src/data/column/column.js
@@ -36,9 +36,9 @@ import canViewModel from 'can-view-model';
* </bit-c3>
* ```
*
- * With axis-x (`axis-x-type` must be defined fir `bit-c3`):
+ * With axis-x (`axis-x-type` must be defined for `bit-c3`):
* ```html
- * <bit-c3>
+ * <bit-c3 axis-x-type="category">
* <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>
diff --git a/src/data/column/viewmodel.js b/src/data/column/viewmodel.js
index 23fcb36a..07d4ce4d 100644
--- a/src/data/column/viewmodel.js
+++ b/src/data/column/viewmodel.js
@@ -27,8 +27,8 @@ export default DefineMap.extend({seal: false}, {
pushing = [key].concat(value),
columns = [pushing];
- if (this.attr('axisX')){
- columns.unshift(this.attr('axisX').attr());
+ if (this.axisX){
+ columns.unshift(this.axisX.get());
}
if(value && value.length) {
chart.load({
diff --git a/src/viewmodel.js b/src/viewmodel.js
index 479efa65..90470972 100644
--- a/src/viewmodel.js
+++ b/src/viewmodel.js
@@ -3,5 +3,37 @@ 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 param for x-axis type.
+ */
+ axisXType: 'string',
+ /**
+ * Config object that c3 chart will be generated with.
+ */
+ config: {
+ get () {
+ let config = {
+ bindto: this.graphBaseElement,
+ data: {
+ columns: []
+ }
+ };
+ if (this.axisXType){
+ config.data.x = 'x';
+ config.axis = {
+ x: {
+ type: this.axisXType
+ }
+ }
+ }
+ return config;
+ }
+ }
});
\ No newline at end of file
diff --git a/test/bit-c3_test.js b/test/bit-c3_test.js
index 2d0bbcb1..cc7ae49b 100644
--- 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);
@@ -23,9 +24,14 @@ var flattenCanList = function(list) {
return flatList;
}
-QUnit.module('bit-c3');
+QUnit.module('bit-c3 config');
-// no tests currently
+test('Should configure x-axis', 1, (assert) => {
+ let tpl = '<bit-c3 axis-x-type="category"><bit-c3-data><bit-c3-data-column /></bit-c3-data></bit-c3>';
+ let frag = stache(tpl)({});
+ let vm = canViewModel(frag.querySelector('bit-c3'));
+ assert.deepEqual(vm.config, {data:{columns:[],x:'x'},axis:{x:{type:'category'}},bindto:undefined}, 'Config object is defined correctly');
+});
QUnit.module('bit-c3-data');
@@ -300,4 +306,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');
-});
\ No newline at end of file
+});
From b9b3a13978b64d445ad7937ac9f7b82ba1e5481d Mon Sep 17 00:00:00 2001
From: Ilya Fadeev <fadeev.ilya@gmail.com>
Date: Wed, 10 May 2017 19:29:13 -0400
Subject: [PATCH 3/6] added option to provide full axis-x config
---
examples/chart/bar-x-labels-rotated.html | 56 ++++++++++++++++++++++++
src/viewmodel.js | 12 +++++
test/bit-c3_test.js | 28 +++++++++++-
3 files changed, 95 insertions(+), 1 deletion(-)
create mode 100644 examples/chart/bar-x-labels-rotated.html
diff --git a/examples/chart/bar-x-labels-rotated.html b/examples/chart/bar-x-labels-rotated.html
new file mode 100644
index 00000000..0642c2e9
--- /dev/null
+++ b/examples/chart/bar-x-labels-rotated.html
@@ -0,0 +1,56 @@
+<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 {axis-x}="axisX">
+ <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";
+import domData from "can-util/dom/data/data";
+
+let data1 = new DefineList(['data1', 30, 200, 100, 400, 150, 250]),
+ data2 = new DefineList(['data2', 130, 100, 140, 200, 150, 50]),
+ type = 'bar',
+ axisX = {
+ 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");
+var vm = new (DefineMap.extend({seal: false}, {
+ axisX: {type: '*'}
+ }))({
+ dataColumns: new DefineList([data1, data2]),
+ type,
+ axisX,
+ axisXData
+ });
+window.vm = vm;
+domData.set.call(element, "viewModel", vm);
+ </script>
+ </body>
+</html>
+
diff --git a/src/viewmodel.js b/src/viewmodel.js
index 90470972..5c9eb6c5 100644
--- a/src/viewmodel.js
+++ b/src/viewmodel.js
@@ -14,6 +14,12 @@ export default DefineMap.extend({
* Config param for x-axis type.
*/
axisXType: 'string',
+ /**
+ * Full config for x-axis.
+ */
+ axisX: {
+ type: '*'
+ },
/**
* Config object that c3 chart will be generated with.
*/
@@ -33,6 +39,12 @@ export default DefineMap.extend({
}
}
}
+ if (this.axisX) {
+ config.data.x = 'x';
+ config.axis = {
+ x: this.axisX
+ };
+ }
return config;
}
}
diff --git a/test/bit-c3_test.js b/test/bit-c3_test.js
index cc7ae49b..41ce7536 100644
--- a/test/bit-c3_test.js
+++ b/test/bit-c3_test.js
@@ -26,13 +26,39 @@ var flattenCanList = function(list) {
QUnit.module('bit-c3 config');
-test('Should configure x-axis', 1, (assert) => {
+test('Should configure x-axis using type', 1, (assert) => {
let tpl = '<bit-c3 axis-x-type="category"><bit-c3-data><bit-c3-data-column /></bit-c3-data></bit-c3>';
let frag = stache(tpl)({});
let vm = canViewModel(frag.querySelector('bit-c3'));
assert.deepEqual(vm.config, {data:{columns:[],x:'x'},axis:{x:{type:'category'}},bindto:undefined}, 'Config object is defined correctly');
});
+test('Should configure x-axis using full config', 1, (assert) => {
+ let tpl = '<bit-c3 {axis-x}="axisX"><bit-c3-data><bit-c3-data-column /></bit-c3-data></bit-c3>';
+ let frag = stache(tpl)({
+ axisX: {
+ 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');
test('loadAttributeOnChart and loadAllAttributesOnChart', 20, () => {
From 8d65f921b381a15181b1bb703bac8168ebc44002 Mon Sep 17 00:00:00 2001
From: Ilya Fadeev <fadeev.ilya@gmail.com>
Date: Wed, 10 May 2017 19:55:38 -0400
Subject: [PATCH 4/6] allow full config for axis
---
examples/chart/bar-x-labels-rotated.html | 76 ++++++++++++------------
src/viewmodel.js | 18 +++---
test/bit-c3_test.js | 20 ++++---
3 files changed, 58 insertions(+), 56 deletions(-)
diff --git a/examples/chart/bar-x-labels-rotated.html b/examples/chart/bar-x-labels-rotated.html
index 0642c2e9..5fabb0a2 100644
--- a/examples/chart/bar-x-labels-rotated.html
+++ b/examples/chart/bar-x-labels-rotated.html
@@ -1,56 +1,58 @@
<html>
- <head>
- <title>Bar Chart</title>
- </head>
- <body>
- <!-- Template to load -->
- <script type="text/stache" id="demo-html" can-autorender>
+ <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 {axis-x}="axisX">
- <bit-c3-data type="{type}">
- {{#each dataColumns}}
- <bit-c3-data-column value="{.}" {axis-x}="axisXData" />
- {{/each}}
- </bit-c3-data>
+<bit-c3 {axis}="axisConfig">
+ <bit-c3-data type="{type}">
+ {{#each dataColumns}}
+ <bit-c3-data-column value="{.}" {axis-x}="axisXData" />
+ {{/each}}
+ </bit-c3-data>
</bit-c3>
- </script>
+ </script>
<!-- TODO add support for
- <c3-bar width-ratio="0.5" width="100" />
+ <c3-bar width-ratio="0.5" width="100" />
-->
- <!-- Loading Script -->
- <script src="../../node_modules/steal/steal.js" id="demo-source" main="can-view-autorender">
+ <!-- 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";
import domData from "can-util/dom/data/data";
let data1 = new DefineList(['data1', 30, 200, 100, 400, 150, 250]),
- data2 = new DefineList(['data2', 130, 100, 140, 200, 150, 50]),
- type = 'bar',
- axisX = {
- 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']);
+ data2 = new DefineList(['data2', 130, 100, 140, 200, 150, 50]),
+ type = 'bar',
+ axisConfig = {
+ 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");
var vm = new (DefineMap.extend({seal: false}, {
- axisX: {type: '*'}
- }))({
- dataColumns: new DefineList([data1, data2]),
- type,
- axisX,
- axisXData
- });
+ axisX: {type: '*'}
+ }))({
+ dataColumns: new DefineList([data1, data2]),
+ type,
+ axisConfig,
+ axisXData
+ });
window.vm = vm;
domData.set.call(element, "viewModel", vm);
- </script>
- </body>
+ </script>
+ </body>
</html>
-
+
diff --git a/src/viewmodel.js b/src/viewmodel.js
index 5c9eb6c5..7db80778 100644
--- a/src/viewmodel.js
+++ b/src/viewmodel.js
@@ -11,15 +11,15 @@ export default DefineMap.extend({
type: '*'
},
/**
- * Config param for x-axis type.
+ * Full config for axis.
*/
- axisXType: 'string',
- /**
- * Full config for x-axis.
- */
- axisX: {
+ axis: {
type: '*'
},
+ /**
+ * Config param for x-axis type.
+ */
+ axisXType: 'string',
/**
* Config object that c3 chart will be generated with.
*/
@@ -39,11 +39,9 @@ export default DefineMap.extend({
}
}
}
- if (this.axisX) {
+ if (this.axis) {
config.data.x = 'x';
- config.axis = {
- x: this.axisX
- };
+ config.axis = this.axis;
}
return config;
}
diff --git a/test/bit-c3_test.js b/test/bit-c3_test.js
index 41ce7536..807aea5d 100644
--- a/test/bit-c3_test.js
+++ b/test/bit-c3_test.js
@@ -33,16 +33,18 @@ test('Should configure x-axis using type', 1, (assert) => {
assert.deepEqual(vm.config, {data:{columns:[],x:'x'},axis:{x:{type:'category'}},bindto:undefined}, 'Config object is defined correctly');
});
-test('Should configure x-axis using full config', 1, (assert) => {
- let tpl = '<bit-c3 {axis-x}="axisX"><bit-c3-data><bit-c3-data-column /></bit-c3-data></bit-c3>';
+test('Should configure axis using full config', 1, (assert) => {
+ let tpl = '<bit-c3 {axis}="axis"><bit-c3-data><bit-c3-data-column /></bit-c3-data></bit-c3>';
let frag = stache(tpl)({
- axisX: {
- type: 'category',
- tick: {
- rotate: -45,
- multiline: false
- },
- height: 130
+ axis: {
+ x: {
+ type: 'category',
+ tick: {
+ rotate: -45,
+ multiline: false
+ },
+ height: 130
+ }
}
});
let vm = canViewModel(frag.querySelector('bit-c3'));
From 32e74b9d8fa4359e958043bc13eb8dc4aa0ccda9 Mon Sep 17 00:00:00 2001
From: Ilya Fadeev <fadeev.ilya@gmail.com>
Date: Thu, 11 May 2017 01:36:09 -0400
Subject: [PATCH 5/6] Allow full configuration for the chart
---
examples/chart/bar-x-labels-rotated.html | 37 +++++++++++-------------
examples/chart/bar-x-labels.html | 17 +++++------
src/data/column/column.js | 9 ++++--
src/viewmodel.js | 33 +++++----------------
test/bit-c3_test.js | 28 +++++++-----------
5 files changed, 49 insertions(+), 75 deletions(-)
diff --git a/examples/chart/bar-x-labels-rotated.html b/examples/chart/bar-x-labels-rotated.html
index 5fabb0a2..e4be15e5 100644
--- a/examples/chart/bar-x-labels-rotated.html
+++ b/examples/chart/bar-x-labels-rotated.html
@@ -6,7 +6,7 @@
<!-- Template to load -->
<script type="text/stache" id="demo-html" can-autorender>
<can-import from="bit-c3" />
-<bit-c3 {axis}="axisConfig">
+<bit-c3 {config}="config">
<bit-c3-data type="{type}">
{{#each dataColumns}}
<bit-c3-data-column value="{.}" {axis-x}="axisXData" />
@@ -24,34 +24,31 @@
import DefineList from "can-define/list/list";
import DefineMap from "can-define/map/map";
import canViewModel from "can-view-model";
-import domData from "can-util/dom/data/data";
let data1 = new DefineList(['data1', 30, 200, 100, 400, 150, 250]),
data2 = new DefineList(['data2', 130, 100, 140, 200, 150, 50]),
type = 'bar',
- axisConfig = {
- x: {
- type: 'category',
- tick: {
- rotate: -45,
- multiline: false
- },
- height: 130
+ 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");
-var vm = new (DefineMap.extend({seal: false}, {
- axisX: {type: '*'}
- }))({
- dataColumns: new DefineList([data1, data2]),
- type,
- axisConfig,
- axisXData
- });
-window.vm = vm;
-domData.set.call(element, "viewModel", vm);
+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
index 9b27e87e..5076c348 100644
--- a/examples/chart/bar-x-labels.html
+++ b/examples/chart/bar-x-labels.html
@@ -6,7 +6,7 @@
<!-- Template to load -->
<script type="text/stache" id="demo-html" can-autorender>
<can-import from="bit-c3" />
-<bit-c3 axis-x-type="category">
+<bit-c3 {config}="config">
<bit-c3-data type="{type}">
{{#each dataColumns}}
<bit-c3-data-column value="{.}" {axis-x}="axisX" />
@@ -24,21 +24,20 @@
import DefineList from "can-define/list/list";
import DefineMap from "can-define/map/map";
import canViewModel from "can-view-model";
-import domData from "can-util/dom/data/data";
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']);
-var element = document.getElementById("demo-html");
-var vm = new DefineMap({
- dataColumns: new DefineList([data1, data2]),
- type,
- axisX
+let element = document.getElementById("demo-html");
+canViewModel(element).set({
+ dataColumns: new DefineList([data1, data2]),
+ type,
+ axisX,
+ config
});
-window.vm = vm;
-domData.set.call(element, "viewModel", vm);
</script>
</body>
</html>
diff --git a/src/data/column/column.js b/src/data/column/column.js
index 86688591..f8c70c0b 100644
--- a/src/data/column/column.js
+++ b/src/data/column/column.js
@@ -36,9 +36,14 @@ import canViewModel from 'can-view-model';
* </bit-c3>
* ```
*
- * With axis-x (`axis-x-type` must be defined for `bit-c3`):
+ * With config:
+ * ```js
+ * let vm = {
+ * config: {axis: {x: {type: 'category'}}}
+ * }
+ * ```
* ```html
- * <bit-c3 axis-x-type="category">
+ * <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>
diff --git a/src/viewmodel.js b/src/viewmodel.js
index 7db80778..5ba7d3f7 100644
--- a/src/viewmodel.js
+++ b/src/viewmodel.js
@@ -10,38 +10,19 @@ export default DefineMap.extend({
graphBaseElement: {
type: '*'
},
- /**
- * Full config for axis.
- */
- axis: {
- type: '*'
- },
- /**
- * Config param for x-axis type.
- */
- axisXType: 'string',
/**
* Config object that c3 chart will be generated with.
*/
config: {
- get () {
- let config = {
- bindto: this.graphBaseElement,
- data: {
- columns: []
- }
+ type: '*',
+ get (val = {}) {
+ let config = val;
+ config.bindto = this.graphBaseElement;
+ config.data = {
+ columns: []
};
- if (this.axisXType){
- config.data.x = 'x';
- config.axis = {
- x: {
- type: this.axisXType
- }
- }
- }
- if (this.axis) {
+ if (val.axis && val.axis.x) {
config.data.x = 'x';
- config.axis = this.axis;
}
return config;
}
diff --git a/test/bit-c3_test.js b/test/bit-c3_test.js
index 807aea5d..7b42ec88 100644
--- a/test/bit-c3_test.js
+++ b/test/bit-c3_test.js
@@ -24,26 +24,18 @@ var flattenCanList = function(list) {
return flatList;
}
-QUnit.module('bit-c3 config');
+QUnit.module('bit-c3');
-test('Should configure x-axis using type', 1, (assert) => {
- let tpl = '<bit-c3 axis-x-type="category"><bit-c3-data><bit-c3-data-column /></bit-c3-data></bit-c3>';
- let frag = stache(tpl)({});
- let vm = canViewModel(frag.querySelector('bit-c3'));
- assert.deepEqual(vm.config, {data:{columns:[],x:'x'},axis:{x:{type:'category'}},bindto:undefined}, 'Config object is defined correctly');
-});
-
-test('Should configure axis using full config', 1, (assert) => {
- let tpl = '<bit-c3 {axis}="axis"><bit-c3-data><bit-c3-data-column /></bit-c3-data></bit-c3>';
+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)({
- axis: {
- x: {
- type: 'category',
- tick: {
- rotate: -45,
- multiline: false
- },
- height: 130
+ config: {
+ axis: {
+ x: {
+ type: 'category',
+ tick: { rotate: -45, multiline: false },
+ height: 130
+ }
}
}
});
From e279496812346ed1fb3dde061b4c28d7997c05eb Mon Sep 17 00:00:00 2001
From: Ilya Fadeev <fadeev.ilya@gmail.com>
Date: Thu, 11 May 2017 01:45:01 -0400
Subject: [PATCH 6/6] reformatting demo
---
examples/chart/bar-x-labels-rotated.html | 74 ++++++++++++------------
examples/chart/bar-x-labels.html | 8 +--
2 files changed, 41 insertions(+), 41 deletions(-)
diff --git a/examples/chart/bar-x-labels-rotated.html b/examples/chart/bar-x-labels-rotated.html
index e4be15e5..4e328e67 100644
--- a/examples/chart/bar-x-labels-rotated.html
+++ b/examples/chart/bar-x-labels-rotated.html
@@ -1,55 +1,55 @@
<html>
- <head>
- <title>Bar Chart</title>
- </head>
- <body>
- <!-- Template to load -->
- <script type="text/stache" id="demo-html" can-autorender>
+ <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-data type="{type}">
+ {{#each dataColumns}}
+ <bit-c3-data-column value="{.}" {axis-x}="axisXData" />
+ {{/each}}
+ </bit-c3-data>
</bit-c3>
- </script>
+ </script>
<!-- TODO add support for
- <c3-bar width-ratio="0.5" width="100" />
+ <c3-bar width-ratio="0.5" width="100" />
-->
- <!-- Loading Script -->
- <script src="../../node_modules/steal/steal.js" id="demo-source" main="can-view-autorender">
+ <!-- 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']);
+ 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
+ dataColumns: new DefineList([data1, data2]),
+ type,
+ config,
+ axisXData
});
- </script>
- </body>
+ </script>
+ </body>
</html>
-
+
diff --git a/examples/chart/bar-x-labels.html b/examples/chart/bar-x-labels.html
index 5076c348..fee1481c 100644
--- a/examples/chart/bar-x-labels.html
+++ b/examples/chart/bar-x-labels.html
@@ -33,10 +33,10 @@
let element = document.getElementById("demo-html");
canViewModel(element).set({
- dataColumns: new DefineList([data1, data2]),
- type,
- axisX,
- config
+ dataColumns: new DefineList([data1, data2]),
+ type,
+ axisX,
+ config
});
</script>
</body>