Vue JS and chart js project

Some notes

Posted by Captain Nimo 1 month ago

When we create some components , should we consider the reusable issue ?

Because when we create a chart js component, we have to pass data to it , should we handle these data or dataset every time we build the new one ?

Here are some code from laracasts Github

Graph.js

import Vue from 'vue';
import Chart from 'chart.js';
export default Vue.extend({
    template: `
        <div>
            <canvas width="800" height="600" v-el:canvas></canvas>
            {{{ legend }}} 
        </div>
    `,
    data() {
        return {
            legend: ''
        };
    },
    methods: {
        render(data) {
            const chart = new Chart(
                this.$els.canvas.getContext('2d')
            ).Bar(data);
            this.legend = chart.generateLegend();
        }
    }
});
Then , everytime we need Graph js template , we should extend it . Before that i always build a new one and build the data for every new chart js component. This method real release me from the duplicated work # WinsGraph.js
import Graph from './Graph';
export default Graph.extend({
    props: ['player', 'opponent'],
    ready() {
        this.render({
            labels: ['Wins'],
            // We could also do labels of
            // ['Jeffrey', 'Taylor'], and
            // then use one dataset object.
            datasets: [
                {
                    label: this.player.name,
                    fillColor: "rgba(220,220,220,0.5)",
                    strokeColor: "rgba(220,220,220,0.8)",
                    highlightFill: "rgba(220,220,220,0.75)",
                    highlightStroke: "rgba(220,220,220,1)",
                    data: [this.player.wins]
                },
                {
                    label: this.opponent.name,
                    fillColor: "rgba(151,187,205,0.5)",
                    strokeColor: "rgba(151,187,205,0.8)",
                    highlightFill: "rgba(151,187,205,0.75)",
                    highlightStroke: "rgba(151,187,205,1)",
                    data: [this.opponent.wins]
                }
            ]
        });
    }
});