Why separate .js files in the examples?

[rzb]

Just a conceptual question. Perhaps because I'm new to vue, I'm not sure why in your examples (both in the docs and in the issues) you extend the chart components in separate files even though the chart data and options are prepared in their respective parent components.

For instance: #33

BasicChart.js, like MonthlyIncome.js from the docs, are using data directly from their parents. They basically do nothing but set the chart type, which could be done using props from the parent as well. So why split files and repeat the boilerplate code for multiple charts?

[apertureless]

So your question is why I split the different chart types into own modules?

It's more a historical reason, about how this wrapper started. I was working on a project where I was using Chart.js with many different charts. And to be honest, I was too lazy to create all this boilerplate over and over again for many different charts. Like the template with a canvas, props etc.

Thats why I created this wrapper.

Also keep in mind this is quite some time ago. It all was written in early vue 1 days and later ported to vue 2.

I seperated the chart types into own modules for two reasons:

1. I find it way more declarative if you import the module and know what kind of chart you get
2. This way I could set some default stylings for some chart types. Which still exist in the current state.

You could also create just one component and extend this and pass the type as a parameter:

export default VueChartJs.extend({

....
mounted () {
    this.renderChart(type, data, options)
}
})

However this way, I could not have seperate styles and options per chart type.

Vue.extend()

And I am using Vue.extend() because back then, it gave me the most flexibility for my usecase. There are up- and downsides of using extend over traditionell single file components.
You sureley could create a single component like this:

<vue-chartjs  type="bar" options="options" chart-data="data" />

And I think there are also other chartjs wrappers for vue, that does it this way, or seperate the charts into own components so you can use them like this:

<line-chart options="options" chart-data="data" />

The huge befenfit of extend is, that you have full access of the boilerplate component. You can call the renderChart method, when you want. In the mounted() hook or wait for some event to happen and then render the chart etc. You can add more props and which is important, you have access to the underlying Chart.js instance object over this._chart and you can use the normal Chart.js hooks, events, callbacks etc.

Other chartjs wrapper have other approaches and like I said everything has a downside.

In the end, for the user, it has no real difference to use the seperated modules or a single module.

[rzb]

Many thanks for your detailed answer. Very clear and helpful. As you know, picking design patterns is tough when you're new to something.

Setting default styles makes perfect sense. But for my use case - several charts of the same type and overall styles, only differing in data from the server -, I found myself creating multiple components identical to each other as in MonthlyIncome.js.

So my first thought was to do something like you mentioned:

<line-chart options="options" chart-data="data" />

In my mind, with this approach I'd have only 1 reusable and consistent line-chart component. And If I needed specific styles for one of the charts, I'd extend that component. Is it possible to do it like that with your wrapper?

[apertureless]

Well, it's fully up to you! If you want you can make reuseable charts or more specified charts.
The point is, that you have to create an chart component, because you need to extend the base chart.

You can call your component line-chart and reuse it all over the place.
Simply create a LineChart component where you extend Line and then you can reuse it everywhere.