@extends("layouts.master")

@section('content')
        <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">Visuaisasi Data Telegram</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Data Telegram</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
     <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col">

            <!-- DONUT CHART -->
            <div class="card card-danger">
              <div class="card-header">
                <h3 class="card-title">Data Telegram Klasifikasi Manual</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
              <div class="card-body">
                <canvas id="donutChart1" style="min-height: 250px; height: 350px; max-height: 350px; max-width: 100%;"></canvas>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->

            <!-- PIE CHART -->
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">Data Telegram Klasifikasi Model</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
              <div class="card-body">
                <canvas id="pieChart1" style="min-height: 250px; height: 350px; max-height: 350px; max-width: 100%;"></canvas>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
            
            <div class="card card-success">
              <div class="card-header">
                <h3 class="card-title">Wordcloud Data Telegram</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
              <div class="card-body">
                <img src="{{ asset('wordcloud_tele.png') }}" alt="WordCloud" style="min-height: 250px; height: 550px; max-height: 550px; max-width: 100%;">
                {{-- <img src="app/public/wordcloud_tele.png" style="min-height: 250px; height: 350px; max-height: 350px; max-width: 100%;"></img> --}}
              </div>
              <!-- /.card-body -->
            </div>

          </div>
          <!-- /.col (LEFT) -->
 
          <!-- /.col (RIGHT) -->
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->

    {{-- Visuaisasi DATA Tele --}}

@endsection


@section('grafiktele')
 <script>

  var manualData1 = @json($manualCounts1);
  var svmData1 = @json($svmCounts1);

     var donutChartCanvas = $('#donutChart1').get(0).getContext('2d')
     var donutData = {
         labels: [
             'Fitur',
             'Performa',
             'Tampilan',
         ],
         datasets: [{
             data: manualData1,
             backgroundColor: ['#00c0ef', '#3c8dbc', '#d2d6de'],
         }]
     }
     var donutOptions = {
         maintainAspectRatio: false,
         responsive: true,
     }
     //Create pie or douhnut chart
     // You can switch between pie and douhnut using the method below.
     new Chart(donutChartCanvas, {
         type: 'pie',
         data: donutData,
         options: donutOptions
     })

     //-------------
     //- PIE CHART -
     //-------------
     // Get context with jQuery - using jQuery's .get() method.
     var pieChartCanvas = $('#pieChart1').get(0).getContext('2d')
         var pieData = {
         labels: [
             'Fitur',
             'Performa',
             'Tampilan',
         ],
         datasets: [{
             data: svmData1,
             backgroundColor: ['#00c0ef', '#3c8dbc', '#d2d6de'],
         }]
     }
     var pieOptions = {
         maintainAspectRatio: false,
         responsive: true,
     }
     //Create pie or douhnut chart
     // You can switch between pie and douhnut using the method below.
     new Chart(pieChartCanvas, {
         type: 'pie',
         data: pieData,
         options: pieOptions
     })
 </script>
@endsection