@extends('layouts.master')
@section('header')
    <script type="text/javascript" src="{{'assets/js/plugins/visualization/d3/d3.min.js'}}"></script>
    <script type="text/javascript" src="{{'assets/js/plugins/visualization/c3/c3.min.js'}}"></script>
    <script type="text/javascript" src="{{'assets/js/charts/c3/c3_bars_pies.js'}}"></script>
    <script>
        $(function () {
            var columns = @json($columns);
            var donut_chart = c3.generate({
                bindto: '#c3-donut-chart',
                size: {width: 350},
                color: {
                    pattern: ['#3F51B5', '#FF9800', '#4CAF50', '#00BCD4', '#F44336']
                },
                data: {
                    // Backend'den gelen verileri buraya yazın($columns değişkeni ile)
                    columns: columns,
                    type: 'donut'
                },
                donut: {
                    title: "Pos"
                }
            });
        });
    </script>
@endsection
@section('content')
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-flat">
                <div class="panel-heading">
                    <h6 class="panel-title text-semibold">En Fazla İşlem Hacmine Sahip 5 Pos</h6>
                </div>

                <div class="panel-body">
                    <div class="chart-container text-center">
                        <div class="display-inline-block" id="c3-donut-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection