exchange-2.0/resources/assets/vue/components/wallets/elements/WalletsComponent.vue

<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col-12 p-0" style="width: 500px; height:350px">
                    <canvas id="wallets-chart"></canvas>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="card no-border bg-success text-white widget-loader-bar m-b-10">
                        <div class="container-xs-height full-height">
                            <div class="row-xs-height">
                                <div class="col-xs-height col-top">
                                    <div class="card-header  top-left top-right">
                                        <div class="card-title">
                                            <span class="font-montserrat fs-11 all-caps">Total Amount</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-xs-height">
                                <div class="col-xs-height col-top">
                                    <div class="p-l-20 p-t-50 p-b-40 p-r-20">
                                        <h3 class="no-margin p-b-5 text-white">MYR 500,123</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="row-xs-height">
                                <div class="col-xs-height col-bottom">
                                    <div class="progress progress-small m-b-0">
                                        <div class="progress-bar progress-bar-success" style="width: 0"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card no-border bg-success-light text-white widget-loader-bar m-b-10">
                        <div class="container-xs-height full-height">
                            <div class="row-xs-height">
                                <div class="col-xs-height col-top">
                                    <div class="card-header  top-left top-right">
                                        <div class="card-title">
                                            <span class="font-montserrat fs-11 all-caps">Total Incoming Amount</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-xs-height">
                                <div class="col-xs-height col-top">
                                    <div class="p-l-20 p-t-50 p-b-40 p-r-20">
                                        <h3 class="no-margin p-b-5 text-white">MYR 500,123</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="row-xs-height">
                                <div class="col-xs-height col-bottom">
                                    <div class="progress progress-small m-b-0">
                                        <div class="progress-bar progress-bar-success" style="width: 0"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card no-border bg-warning widget-loader-bar m-b-10">
                        <div class="container-xs-height full-height">
                            <div class="row-xs-height">
                                <div class="col-xs-height col-top">
                                    <div class="card-header  top-left top-right">
                                        <div class="card-title">
                                            <span class="font-montserrat fs-11 all-caps">Total Outgoing Amount</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-xs-height">
                                <div class="col-xs-height col-top">
                                    <div class="p-l-20 p-t-50 p-b-40 p-r-20">
                                        <h3 class="no-margin p-b-5">MYR 500,123</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="row-xs-height">
                                <div class="col-xs-height col-bottom">
                                    <div class="progress progress-small m-b-0">
                                        <div class="progress-bar progress-bar-primary" style="width: 0"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card no-border bg-danger text-white widget-loader-bar m-b-10">
                        <div class="container-xs-height full-height">
                            <div class="row-xs-height">
                                <div class="col-xs-height col-top">
                                    <div class="card-header  top-left top-right">
                                        <div class="card-title">
                                            <span class="font-montserrat fs-11 all-caps">Total Floating Amount</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-xs-height">
                                <div class="col-xs-height col-top">
                                    <div class="p-l-20 p-t-50 p-b-40 p-r-20">
                                        <h3 class="no-margin p-b-5 text-white">MYR 500,123</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="row-xs-height">
                                <div class="col-xs-height col-bottom">
                                    <div class="progress progress-small m-b-0">
                                        <div class="progress-bar progress-bar-primary" style="width: 0"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    import Chart from 'chart.js';

    export default {
        watch: {
            wallet_details: function() {
                const ctx = document.getElementById('wallets-chart');
                var xValues = [100,200,300,400,500,600,700,800,900,1000];
                new Chart(ctx, {
                    type: "line",
                    data: {
                        labels: 'ndcs',
                        datasets: [{
                            data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
                            borderColor: "red",
                            fill: false
                        },
                        {
                            data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
                            borderColor: "green",
                            fill: false
                        },
                        {
                            data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
                            borderColor: "blue",
                            fill: false
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'top',
                            },
                            title: {
                                display: true,
                                text: 'Chart.js Line Chart'
                            }
                        }
                    },
                });
            }
        },
        mixins: [componentHandler]
    }

</script>