From 59d4458af796d3c4bb74c7536250adae0c105ccb Mon Sep 17 00:00:00 2001 From: Ilya Fadeev 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 * + * + * * ``` */ 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'; * * * ``` + * + * With axis-x (`axis-x-type` must be defined fir `bit-c3`): + * ```html + * + * + * + * + * + * ``` */ 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 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 @@ + + + Bar Chart + + + + + + + + + + + + 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'; * * ``` * - * 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 - * + * * * * 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 = ''; + 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 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 @@ + + + Bar Chart + + + + + + + + + + + + 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 = ''; 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 = ''; + 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 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 @@ - - Bar Chart - - - - + - - - + + - + 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 = ''; +test('Should configure axis using full config', 1, (assert) => { + let tpl = ''; 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 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 @@ 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 @@ 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'; * * ``` * - * With axis-x (`axis-x-type` must be defined for `bit-c3`): + * With config: + * ```js + * let vm = { + * config: {axis: {x: {type: 'category'}}} + * } + * ``` * ```html - * + * * * * 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 = ''; - 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 = ''; +test('Should configure chart using a passed config', 1, (assert) => { + let tpl = ''; 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 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 @@ - - Bar Chart - - - - + - - - + + - + 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 });