bit-c3
v0.3.0
Published
Build C3 charts with CanJS components
Downloads
39
Readme
A live-reloading chart widget that can be loaded by:
- StealJS + ES6
- npm / browserify / CJS
- RequireJS / AMD
- Standalone with CanJS and jQuery
Install
Use NPM to install bit-c3
:
npm install bit-c3 --save
Usage
See http://bitovi-components.github.io/bit-c3 for usage instructions, examples and documentation.
ES6 use
With StealJS, you can import this module directly in a template that is autorendered:
<script type="text/stache" id="demo" can-autorender>
<can-import from="bit-c3" />
<bit-c3>
<bit-c3-data>
<bit-c3-data-column key="dataSource" {value}="dataSource" />
</bit-c3-data>
</bit-c3>
</script>
<script src='./node_modules/steal/steal.js'
main="can/view/autorender/">
import canViewModel from "can-view-model";
import DefineList from "can-define/list/list";
canViewModel(document.getElementById('demo')).set({
dataSource: new DefineList([1, 2, 3])
});
</script>
Alternatively, you can import this module like:
import "bit-c3";
import $ from "jquery";
import stache from "can-stache";
import DefineList from "can-define/list/list";
var template = stache('<bit-c3>' +
'<bit-c3-data>' +
'<bit-c3-data-column key="dataSource" value="{dataSource}" />' +
'</bit-c3-data>' +
'</bit-c3>');
$("body").append(template({
dataSource: new DefineList([1, 2, 3])
}));
CJS use
Use require
to load bit-c3
and everything else
needed to create a template that uses bit-c3
:
var $ = require("jquery")
// Add's bit-c3 tag
require("bit-c3");
// Use stache and can-define
var stache = require("can-stache");
var DefineList = require("can-define/list/list");
var bitC3template = stache('<bit-c3>' +
'<bit-c3-data>' +
'<bit-c3-data-column key="dataSource" {value}="dataSource" />' +
'</bit-c3-data>' +
'</bit-c3>');
$("body").append(bitC3template({
dataSource: new DefineList([1, 2, 3])
}));
AMD use
Configure the can
, jquery
, c3
, and d3
paths and the bit-c3s
package:
<script src="require.js"></script>
<script>
require.config({
paths: {
"jquery": "node_modules/jquery/dist/jquery",
"can": "node_modules/canjs/dist/amd/can"
},
packages: [{
name: 'bit-c3',
location: 'node_modules/bit-c3/dist/amd',
main: 'bit-c3'
}]
});
require(["main-amd"], function(){});
</script>
Make sure you have the css
plugin configured also!
Use bit-c3 like:
define(["can-stache", "can-define/list/list", "jquery", "bit-c3"], function(stache, DefineList, $) {
var bitC3template = stache('<bit-c3>' +
'<bit-c3-data>' +
'<bit-c3-data-column key="dataSource" {value}="dataSource" />' +
'</bit-c3-data>' +
'</bit-c3>');
$("body").append(bitC3template({
dataSource: new DefineList([1, 2, 3])
}));
});
Standalone use
Load the global
css and js files:
<link rel="stylesheet" type="text/css"
href="./node_modules/bit-c3/dist/global/bit-c3.css" />
<script src='./node_modules/jquery/dist/jquery.js'></script>
<script src='./node_modules/can/dist/global/can.all.js'></script>
<script src='./node_modules/bit-c3/node_modules/d3/d3.js'></script>
<script src='./node_modules/bit-c3/node_modules/c3/c3.js'></script>
<script src='./node_modules/bit-c3/dist/global/bit-c3.js'></script>
<script id='main-stache' text='text/stache'>
<bit-c3>
<bit-c3-data>
<bit-c3-data-column key="dataSource" value="{dataSource}" />
</bit-c3-data>
</bit-c3>
</script>
<script>
var bitC3template = can.stache('<h2>bit-c3</h2><bit-c3>' +
'<bit-c3-data>' +
'<bit-c3-data-column key="dataSource" value="{dataSource}" />' +
'</bit-c3-data>' +
'</bit-c3>');
$("body").append(bitC3template({
dataSource: new can.DefineList([1, 2, 3])
}));
</script>
Contributing
To setup your dev environment:
- Clone and fork this repo.
- Run
npm install
. - Run
grunt test
. Everything should pass. - Launch development server by running
grunt serve
. - Run
grunt build
. Everything should build ok.
To publish:
- Update the version number in package.json and commit and push this.
- Run
npm publish
. This should generate the dist folder. - Create and checkout a "release" branch.
- Run
git add -f dist
. - Commit the addition and tag it
git tag v0.2.0
. Push the taggit push origin --tags
.