[[static_dashboard_header.html]]

<script type="application/javascript">
        function barchart() {
            // Set new default font family and font color to mimic Bootstrap's default styling
            Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
            Chart.defaults.global.defaultFontColor = '#292b2c';

            // Bar Chart Example
            var ctx = document.getElementById("myBarChart");
            var myLineChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ["January", "February", "March", "April", "May", "June"],
                    datasets: [{
                        label: "Revenue",
                        backgroundColor: "rgba(2,117,216,1)",
                        borderColor: "rgba(2,117,216,1)",
                        data: [4215, 5312, 6251, 7841, 9821, 14984],
                    }],
                },
                options: {
                    scales: {
                        xAxes: [{
                            time: {
                                unit: 'month'
                            },
                            gridLines: {
                                display: false
                            },
                            ticks: {
                                maxTicksLimit: 6
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                min: 0,
                                max: 15000,
                                maxTicksLimit: 5
                            },
                            gridLines: {
                                display: true
                            }
                        }],
                    },
                    legend: {
                        display: false
                    }
                }
            });
        }
    </script>

    <script>
        function piechart(){
            //pie
            var ctxP = document.getElementById("pieChart").getContext('2d');
            var myPieChart = new Chart(ctxP, {
                type: 'pie',
                data: {
                    labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
                    datasets: [{
                        data: [300, 50, 100, 40, 120],
                        backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
                        hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
                    }]
                },
                options: {
                    responsive: true
                }
            });
        }

        function piechartOne(){
            //pie
            var ctxP = document.getElementById("pieChartOne").getContext('2d');
            var myPieChart = new Chart(ctxP, {
                type: 'pie',
                data: {
                    labels: ["0h-8h", "9h-16h", "17h-23h" ],
                    datasets: [{
                        data: [5, 6, 8],
                        backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
                        hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
                    }]
                },
                options: {
                    responsive: true
                }
            });
        }

        function piechartTwo(){
            //pie
            var ctxP = document.getElementById("pieChartTwo").getContext('2d');
            var myPieChart = new Chart(ctxP, {
                type: 'pie',
                data: {
                    labels: ["Cost", "Markup", "Fees" ],
                    datasets: [{
                        data: [25, 50, 25],
                        backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
                        hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
                    }]
                },
                options: {
                    responsive: true
                }
            });
        }

        function piechartThree(){
            //pie
            var ctxP = document.getElementById("pieChartThree").getContext('2d');
            var myPieChart = new Chart(ctxP, {
                type: 'pie',
                data: {
                    labels: ["Profit", "Used for expenses etc.. "],
                    datasets: [{
                        data: [25, 75],
                        backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
                        hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
                    }]
                },
                options: {
                    responsive: true
                }
            });
        }
        function areachart() {
            // Set new default font family and font color to mimic Bootstrap's default styling
            Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
            Chart.defaults.global.defaultFontColor = '#292b2c';

            // Area Chart Example
            var ctx = document.getElementById("myAreaChart");
            var myLineChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ["Mar 1", "Mar 2", "Mar 3", "Mar 4", "Mar 5", "Mar 6", "Mar 7", "Mar 8", "Mar 9", "Mar 10", "Mar 11", "Mar 12", "Mar 13"],
                    datasets: [{
                        label: "# of Rx's",
                        lineTension: 0.3,
                        backgroundColor: "rgba(2,117,216,0.2)",
                        borderColor: "rgba(2,117,216,1)",
                        pointRadius: 5,
                        pointBackgroundColor: "rgba(2,117,216,1)",
                        pointBorderColor: "rgba(255,255,255,0.8)",
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: "rgba(2,117,216,1)",
                        pointHitRadius: 50,
                        pointBorderWidth: 2,
                        data: [10000, 30162, 26263, 18394, 18287, 28682, 31274, 33259, 25849, 24159, 32651, 31984, 38451],
                    }],
                },
                options: {
                    scales: {
                        xAxes: [{
                            time: {
                                unit: 'date'
                            },
                            gridLines: {
                                display: false
                            },
                            ticks: {
                                maxTicksLimit: 7
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                min: 0,
                                max: 40000,
                                maxTicksLimit: 5
                            },
                            gridLines: {
                                color: "rgba(0, 0, 0, .125)",
                            }
                        }],
                    },
                    legend: {
                        display: false
                    }
                }
            });
        }

    </script>
    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h1 class="mt-4">Rx's By Day/Week/Year</h1>
                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item active"> Date: $today </li>
                </ol>


<!-- header -->
                <div class="card mb-4">
                    <div class="card-header">
                <h3> Date Range of # of Rx's Filled</h3>
                        </div>
    <label>Start Date</label>
    <input type="date" class="form-group" >

    <label>End Date</label>
    <input type="date" class="form-group"><br><br>
    <button>UPDATE DATE RANGE</button>
<br><br>
</div>

    <div class="row">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-chart-area me-1"></i>
                    # of Rx's Filled
                </div>
                <div class="card-body"><canvas id="myAreaChart" width="100%" height="40"></canvas></div>
            </div>

        <div class="row">
            <div class="col-xl-3 col-md-6">
                <div class="card bg-success text-white mb-4">
                    <div class="card-body">Average: 4 rx's per day</div>
                    <div class="card-footer d-flex align-items-center justify-content-between">
                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="card bg-primary text-white mb-4">
                    <div class="card-body">Average Price : 10 dollars</div>
                    <div class="card-footer d-flex align-items-center justify-content-between">
                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="card bg-success text-white mb-4">
                    <div class="card-body">Max: 200 Min 2</div>
                    <div class="card-footer d-flex align-items-center justify-content-between">
                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                    </div>
                </div>
            </div>

            <!-- mean , sum, max/min, median -->
            <!-- For price: total, markup, average price per rx,  -->

            <div class="col-xl-3 col-md-6">
                <div class="card bg-primary text-white mb-4">
                    <div class="card-body">Sum: 10000 Rx's</div>
                    <div class="card-footer d-flex align-items-center justify-content-between">
                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                    </div>
                </div>
            </div>

        </div>

        <div class="col-xl-6">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-chart-area me-1"></i>
                    Most Popular Weekday to Fill Rx's
                </div>
                <div class="card-body"><canvas id="pieChart" width="100%" height="40"></canvas></div>
            </div>
        </div>

        <div class="col-xl-6">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-chart-area me-1"></i>
                    Most Popular Hour to Fill Rx's
                </div>
                <div class="card-body"><canvas id="pieChartOne" width="100%" height="40"></canvas></div>
            </div>
        </div>


        <div class="col-xl-6">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-chart-area me-1"></i>
                    Cost vs Fee vs Markup Breakdown
                </div>
                <div class="card-body"><canvas id="pieChartTwo" width="100%" height="40"></canvas></div>
            </div>
        </div>

        <div class="col-xl-6">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-chart-area me-1"></i>
                    How much profit from revenue breakdown
                </div>
                <div class="card-body"><canvas id="pieChartThree" width="100%" height="40"></canvas></div>
            </div>
        </div>


</div>









    <!-- footer -->










                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-table me-1"></i>
                        Rx Raw Data From Date Range
                    </div>
                    <div class="card-body">
                        <table id="datatablesSimple">
                            <thead>
                            <tr>
                                <th>Date</th>
                                <th>#of Rx's</th>
                                <th>Sales </th>
                                <th>Revenue</th>
                            </tr>
                            </thead>
                            <tfoot>
                            <tr>
                                <th>Date</th>
                                <th>#of Rx's</th>
                                <th>Sales</th>
                                <th>Revenue</th>
                            </tr>
                            </tfoot>
                            <tbody>
                            <tr>

                                <td>2011/04/25</td>
                                <td>20</td>
                                <td>10</td>
                                <td>100 dollars</td>

                            </tr>
                            <tr>

                                <td>2011/07/25</td>
                                <td>170</td>
                                <td>5</td>
                                <td>300 dollars</td>

                            </tr>
                            <tr>

                                <td>2009/01/12</td>
                                <td>86</td>
                                <td>20</td>
                                <td>500 dollars</td>

                            </tr>
                            <tr>
                                <td>2012/03/29</td>
                                <td>433</td>
                                <td>20</td>
                                <td>100 dollars</td>

                            </tr>
                            <tr>
                                <td>2008/11/28</td>
                                <td>162</td>
                                <td>20</td>
                                <td>50 dollars</td>

                            </tr>
                            <tr>
                                <td>2012/12/02</td>
                                <td>372</td>
                                <td>19</td>
                                <td>20 dollars</td>
                            </tr>
                            <tr>
                                <td>2012/08/06</td>
                                <td>137</td>
                                <td>18</td>
                                <td>80 dollars</td>

                            </tr>
                            <tr>
                                <td>2010/10/14</td>
                                <td>327</td>
                                <td>6</td>
                                <td>300 dollars</td>

                            </tr>
                            <tr>
                                <td>2009/09/15</td>
                                <td>205</td>
                                <td>8</td>
                                <td>70 dollars</td>
                            </tr>
                            <tr>
                                <td>2008/12/13</td>
                                <td>103</td>
                                <td>2</td>
                                <td>50 dollars</td>
                            </tr>
                            <tr>
                                <td>2008/12/19</td>
                                <td>90</td>
                                <td>20</td>
                                <td>300 dollars</td>
                            </tr>
                            <tr>
                                <td>2013/03/03</td>
                                <td>342</td>
                            </tr>
                            <tr>
                                <td>2008/10/16</td>
                                <td>470</td>
                            </tr>
                            <tr>
                                <td>2012/12/18</td>
                                <td>313</td>
                            </tr>
                            <tr>
                                <td>2010/03/17</td>
                                <td>385</td>
                            </tr>
                            <tr>
                                <td>2012/11/27</td>
                                <td>198</td>
                            </tr>
                            <tr>
                                <td>2010/06/09</td>
                                <td>725</td>
                            </tr>

                            <tr>

                                <td>2008/11/13</td>
                                <td>183</td>
                            </tr>
                            <tr>
                                <td>2011/06/27</td>
                                <td>183</td>
                            </tr>
                            <tr>
                                <td>2011/01/25</td>
                                <td>112</td>
                            </tr>
                            </tbody>
                        </table>
                        <button style="color:white; background-color:blue;">EXPORT</button>

                    </div>
                </div>

</div>
</main>
<footer class="py-4 bg-light mt-auto">
    <div class="container-fluid px-4">
        <div class="d-flex align-items-center justify-content-between small">
            <div class="text-muted">Copyright &copy; Amjay Software 2022</div>
            <div>
                <!-- <a href="#">Privacy Policy</a>
                 &middot;
                 <a href="#">Terms &amp; Conditions</a>-->
            </div>
        </div>
    </div>
</footer>
</div>
</div>
<script>
   // barchart();
    areachart();
    piechart();
   piechartOne();
   piechartTwo();
   piechartThree();
</script>
</body>
</html>