bitovi-components / bit-c3

Build C3 charts with CanJS components!
http://bitovi-components.github.io/bit-c3/
MIT License
11 stars 3 forks source link

Add ability to pass arbitrary options to c3.generate #19

Open phillipskevin opened 8 years ago

phillipskevin commented 8 years ago

I would like to be able to pass other options to this call: https://github.com/bitovi-components/bit-c3/blob/master/src/chart.js#L35.

Some example options that would be nice to be able to set are http://c3js.org/reference.html#axis-rotated and https://github.com/masayuki0812/c3/issues/188#issuecomment-55222488.

Not sure exactly how this would work, but it would make bit-c3 much more flexible.

kylegifford commented 8 years ago

I agree, this would make the config a lot easier. A first implementation of this would probably just to listen for changes on this options object, and then call chart.flush() to redraw it with the new options. Could get expensive, though - eventually, it'd probably be better to parse the options and bind them using the C3 API.

ilyavf commented 8 years ago

+ Config data.onclick: http://c3js.org/reference.html#data-onclick

Still just experimenting with particular config options. For data.onclick probably dispatch custom viewModel event if onclick is true, smth like:

<bit-c3 onclick="true" (click)="clickHandler(%event)"></bit-c3>
ilyavf commented 8 years ago

Looks like almost all config properties are lower cased, except for couple (data.xFormat, data.xLocaltime, data.xSort). So we can translate camel-cased properties into nested object config:

var chart = c3.generate({
    ...
    size: {
        height: 80
    },
    legend: {
        show: false
    },
    axis: {
        x: {
            categories: ['Category 1', 'Category 2', ...]
        }
    }
});

can be achieved declaratively:

<bit-c3 size-height="80" legend-show="false" {axis-x-categories}="categories"/>

And we can observe the config and run chart.flush() as suggested by @kylegifford .