Vue-chartjs: Component examples

[ghenry]

Hi,

When you say:

"Reusable Components

If you want to keep your chart components reusable, it's the best to add a wrapper to them. This way the chart component is only responsible for the pure data representation and the wrapper component for the logic behind it. There are many different use cases and it is different if you're running a single page application or integrate it in for example laravel."

Could you give a basic example of this?

Thanks.

[apertureless]

Well, if you're working with charts, you work with external data most of the time. And you can divide your components into two categories:

Presentational components and Containers.

Presentational Components

Should only provide a view and should be free of dependencies. With dependencies I mean something like vuex or api calls.

Containers

Should be responsible for getting the data and passing them to the chart.

Example

🙈 Bad

// LineChart.vue
import {Line} from 'vue-chartjs'

export default {
  extends: Line,
  data: () => ({
     chartData: null,
     options: { .... }
  }),
  async created () {
    this.chartData = await axios.get(/* some api or vuex stuff*/) 
  },
  mounted () {
     this.renderChart(this.chartData, this.options)
  }
}

✅ Good

// LineChart.vue
import {Line} from 'vue-chartjs'

export default {
  extends: Line,
  props: ['chartData', 'options'],
  mounted () {
     this.renderChart(this.chartData, this.options)
  }
}

// DownloadStatisticsContainer.vue

<template>
  <line-chart v-if="mydata" :chart-data="mydata"/>
</template>

<script>
   export default {
     components: {LineChart},     
     data: () => ({
       mydata: null,
      }),
      async created () {
       this.mydata =  await axios.get( /* my-awesome-api */ )
      }
   }
</script>

This way you can reuse your line-chart independent from your data sources.
If you're working in laravel / wordpress etc. you could also format your data in your controller and directly pass it to the line-chart component as props in your php/blade.

https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f

Thats also a good read: https://medium.com/gitconnected/react-component-patterns-ab1f09be2c82 With good examples for presentation components and containers.
And also stateful and stateless components which are also available in vue (functional components)

[ghenry]

Perfect, thank you! Are you OK to add this to your docs or would you like
a PR?

[apertureless]

Well this is more about clean code and coding style. Nothing particular related to vue-chartjs. As you can also use the first example, which would work. It heavily depends on your use case tho. If you don't need reuseable components and have like only one source of data and one chart type, you can go with the first example.

But as it's nothing really related to vue-chartjs I don't think it should be in the docs.

[ghenry]

Well, it's written now and provides an idea. I think you should include it
for completeness sake :)

[nicely]

In this example, console.log says that this.renderChart is not a function" chart is working but this error occurs at logs ?