[[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: ["IVR", "Web"],
        datasets: [{
          data: [300, 50],
          backgroundColor: ["#F7464A", "#46BFBD"],
          hoverBackgroundColor: ["#FF5A5E", "#5AD3D1"]
        }]
      },
      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 Method</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">

        <label>Select Method</label>
        <select>
          <option value="IVR">IVR</option>
          <option value="Phone. Lisa">Phone</option>
        </select>
        <br><br>

        <button>UPDATE DATE RANGE</button>
        <br><br>
      </div>

      <div class="row">
        <div class="col-xl-6">
          <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>

        <div class="col-xl-6">
          <div class="card mb-4">
            <div class="card-header">
              <i class="fas fa-chart-area me-1"></i>
              Methods
            </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>
              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 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>









      <!-- 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>
            </tr>
            </thead>
            <tfoot>
            <tr>
              <th>Date</th>
              <th>#of Rx's</th>
            </tr>
            </tfoot>
            <tbody>
            <tr>

              <td>2011/04/25</td>
              <td>20</td>
            </tr>
            <tr>

              <td>2011/07/25</td>
              <td>170</td>
            </tr>
            <tr>

              <td>2009/01/12</td>
              <td>86</td>
            </tr>
            <tr>
              <td>2012/03/29</td>
              <td>433</td>
            </tr>
            <tr>
              <td>2008/11/28</td>
              <td>162</td>
            </tr>
            <tr>
              <td>2012/12/02</td>
              <td>372</td>
            </tr>
            <tr>
              <td>2012/08/06</td>
              <td>137</td>
            </tr>
            <tr>
              <td>2010/10/14</td>
              <td>327</td>
            </tr>
            <tr>
              <td>2009/09/15</td>
              <td>205</td>
            </tr>
            <tr>
              <td>2008/12/13</td>
              <td>103</td>
            </tr>
            <tr>
              <td>2008/12/19</td>
              <td>90</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>