Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow full config #37

Merged
merged 6 commits into from
May 11, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions examples/chart/bar-x-labels-rotated.html
Original file line number Diff line number Diff line change
@@ -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>

44 changes: 44 additions & 0 deletions examples/chart/bar-x-labels.html
Original file line number Diff line number Diff line change
@@ -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>

17 changes: 8 additions & 9 deletions src/chart.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ import ChartVM from './viewmodel';
*
* ```html
* <bit-c3></bit-c3>
*
* <bit-c3 axis-x-type="category"></bit-c3>
* ```
*/
Component.extend({
Expand All @@ -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();
}
}
Expand Down
14 changes: 14 additions & 0 deletions src/data/column/column.js
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
9 changes: 7 additions & 2 deletions src/data/column/viewmodel.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
25 changes: 24 additions & 1 deletion src/viewmodel.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
});
30 changes: 28 additions & 2 deletions test/bit-c3_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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');

Expand Down Expand Up @@ -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');
});
});