@extends('layouts.app')

@section('content')
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-11 col-sm-11 col-xs-11 mt-3">
      <div class="card">
        <div class="card-header bg-transparent">
          <div class="row align-items-center">
            <div class="col">
              <h2>สัดส่วนโรคไข้เลือดออก (DF/DHF/DSS)</h2>
            </div>
          </div>
        </div>
        <div class="card-body">
          <div class="card card_chart">
            <div class="card-body">
              <!-- Chart -->
              <div class="text-center loading-01 hidden">
                <i class="fas fa-spinner fa-pulse fa-3x"></i>
              </div>
              <div class="chart">
                <canvas id="chart-bars-01" class="chart-canvas" style="width: 1000px"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection


@section('scripts')
<script src="{{ asset('assets/vendor/chart.js/plugins/chartjs-plugin-datalabels.min.js') }}"></script>
<script type="text/javascript">
          
      var BarsChart = (function() {

          //
          // Variables
          //

          var $chart = $('#chart-bars-01');

          //
          // Methods
          //

          // Init chart
          function initChart($chart, area) {
              var data_ = [];
              var labels_ = [];

              var loading_class='.loading-01';
              //get data
              $.ajax({
                url: '{{ route('frontend.get-proportion-data') }}',
                type: 'post',
                dataType: 'json',
                data: {
                  _token: '{{ csrf_token() }}',
                  type: area
                },
                beforeSend: function (x){
                  $(loading_class).removeClass('hidden');
                },
                success: function(res){
                  $(loading_class).addClass('hidden');
                  data_ = res.data;
                  labels_ = res.labels;
                  
                  // Create chart
                  var ordersChart = new Chart($chart, {
                      type: 'pie',
                      data: {
                          labels: labels_,
                          datasets: [{
                              label: 'จำนวนผู้ป่วย',
                              data: data_,
                              backgroundColor: [
                                'rgb(139 79 128)',
                                'rgb(95 170 206)',
                                'rgb(233 122 122)',
                                'rgb(98 167 114)',
                              ],
                              hoverOffset: 4
                          }]
                      },
                      options: {
                          responsive: true,
                          maintainAspectRatio: false,
                          legend: {
                            display: true,
                            position: 'top',
                            labels: {
                                color: '#000',
                                fontSize: 20
                            }
                          },
                          tooltips: {
                               enabled: false
                          },
                          plugins: {
                            datalabels: {
                                formatter: (value, ctx) => {

                                  let sum = 0;
                                  let dataArr = ctx.chart.data.datasets[0].data;
                                  dataArr.map(data => {
                                      sum += data;
                                  });
                                  let percentage = (value*100 / sum).toFixed(2)+"%";

                                  if(value > 0){
                                    return percentage;
                                  }else{
                                    return '';
                                  }
                                },
                                font: {
                                  weight: 'bold',
                                  size: 18,
                                },
                                color: '#fff',
                            }
                        }
                      },
                  });
                  // Save to jQuery object
                  $chart.data('chart', ordersChart);
                }
              });
          }

          // Init chart
          if ($chart.length) {
              initChart($chart,'');
          }

      })();

</script>
@endsection