@extends('admin.layout.main')
@section('content')
<main id="main" class="main">

    <div class="pagetitle">
        <h1>Bak ...</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route ('dashboard')}}">Halaman Utama</a></li>
                <li class="breadcrumb-item">Bak ...</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <p>Chart.JS Examples. You can check the <a href="https://www.chartjs.org/docs/latest/samples/"
            target="_blank">official website</a> for more examples.</p>

    <section class="section">
        <div class="row">

            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Line Chart</h5>

                        <!-- Line Chart -->
                        <canvas id="lineChart" style="max-height: 400px;"></canvas>
                        <script>
                            document.addEventListener("DOMContentLoaded", () => {
                                new Chart(document.querySelector('#lineChart'), {
                                    type: 'line',
                                    data: {
                                        labels: ['1am', '2am', '3am', '4am', '5am', '6am', '7am', '8am',
                                            '9am', '10am', '11am', '12am', '1pm', '2pm', '3pm',
                                            '4pm', '5pm', '6pm', '8pm', '9pm', '10pm', '12pm'
                                        ],
                                        datasets: [{
                                            label: 'Line Chart',
                                            data: [65, 59, 80, 81, 56, 55, 40],
                                            fill: false,
                                            borderColor: 'rgb(75, 192, 192)',
                                            tension: 0.1
                                        }]
                                    },
                                    options: {
                                        scales: {
                                            y: {
                                                beginAtZero: true
                                            }
                                        }
                                    }
                                });
                            });

                        </script>
                        <!-- End Line CHart -->

                    </div>
                </div>
            </div>

            <!-- Chart yang Anda buat -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Custom Doughnut Chart</h5>

                        <!-- Custom Doughnut Chart -->
                        <canvas id="myChart" style="max-height: 400px;"></canvas>
                        <script type="text/javascript"
                            src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
                        <script>
                            // setup 
                            const data = {
                                labels: ['score', 'gray area', 'another area'],
                                datasets: [{
                                    label: 'Weekly Sales',
                                    data: [100, 700],
                                    borderColor: [
                                        'rgba(255, 26, 104, 0.2)',
                                        'rgba(0, 0, 0, 0.2)'
                                    ],
                                    backgroundColor: [
                                        'rgba(255, 26, 104, 0.2)',

                                        'rgba(0, 0, 0, 0.2)'
                                    ],
                                    borderWidth: 1,
                                    cutout: '90%',
                                    circumference: 180,
                                    rotation: 270
                                }]
                            };

                            //teks
                            const gaugeChartText = {
                                id: 'gaugeChartText',
                                afterDatasetsDraw(chart, args, pluginOptions) {
                                    const {
                                        ctx,
                                        data,
                                        chartArea: {
                                            top,
                                            bottom,
                                            left,
                                            right,
                                            width,
                                            height
                                        },
                                        scales: {
                                            r
                                        }
                                    } = chart;
                                    ctx.save();
                                    const xCoor = chart.getDatasetMeta(0).data[0].x;
                                    const yCoor = chart.getDatasetMeta(0).data[0].y;
                                    const score = data.datasets[0].data[0];
                                    let rating;
                                    if (score < 400) {
                                        rating = 'sangat jauh';
                                    }
                                    if (score >= 401 && score <= 600) {
                                        rating = 'sedang';
                                    }
                                    if (score >= 700 && score <= 750) {
                                        rating = 'hampir penuh';
                                    }
                                    if (score >= 751) {
                                        rating = 'penuh';
                                    }


                                    // ctx.fillRect(xCoor, yCoor, 400, 2);

                                    function textLabel(text, x, y, fontSize, textBaseline, textAlign) {
                                        ctx.font = `${fontSize}px sans-serif`;
                                        ctx.fillStyle = '#666';
                                        ctx.textBaseline = textBaseline;
                                        ctx.textAlign = textAlign;
                                        ctx.fillText(text, x, y);
                                    }

                                    textLabel('0cm', left, yCoor + 20, 20, 'top', 'left');
                                    textLabel('800cm', right, yCoor + 20, 20, 'top', 'right');
                                    textLabel(score, xCoor, yCoor - 50, 60, 'buttom', 'center');
                                    textLabel(rating, xCoor, yCoor - 100, 30, 'top', 'center');


                                }
                            }
                            // config 
                            const config = {
                                type: 'doughnut',
                                data,
                                options: {
                                    aspectRatio: 1.5,
                                    plugins: {
                                        legend: {
                                            display: false
                                        },
                                        tooltip: {
                                            enabled: false
                                        }
                                    }
                                },
                                plugins: [gaugeChartText]
                            };

                            // render init block
                            const myChart = new Chart(
                                document.getElementById('myChart'),
                                config
                            );

                            // Instantly assign Chart.js version
                            const chartVersion = document.getElementById('chartVersion');
                            chartVersion.innerText = Chart.version;

                        </script>
                        <!-- End Custom Doughnut Chart -->

                    </div>
                </div>
            </div>
            <!-- End Chart yang Anda buat -->

        </div>
    </section>

</main><!-- End #main -->
@endsection