|
@@ -0,0 +1,98 @@
|
|
|
+@extends ('layouts/template')
|
|
|
+
|
|
|
+@section('content')
|
|
|
+<link href="/c3/c3.min.css" rel="stylesheet">
|
|
|
+<script src="/c3/d3.v5.min.js" charset="utf-8"></script>
|
|
|
+<script src="/c3/c3.min.js"></script>
|
|
|
+
|
|
|
+<div class="p-3 mcp-theme-1" id="patients-list">
|
|
|
+ <div class="card">
|
|
|
+
|
|
|
+ <div class="card-header px-3 py-2 d-flex align-items-center">
|
|
|
+ <strong class="mr-4">
|
|
|
+ <i class="fas fa-user"></i>
|
|
|
+ Management Stats
|
|
|
+ </strong>
|
|
|
+ </div>
|
|
|
+ <div class="p-3">
|
|
|
+ @include('app.admin.management-stats.filters')
|
|
|
+ </div>
|
|
|
+ <div id="managementStatsComponent">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-md-6">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-header">Some Reports</div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div id="graph1"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<script>
|
|
|
+ (function() {
|
|
|
+ function init() {
|
|
|
+ new Vue({
|
|
|
+ el: '#managementStatsComponent',
|
|
|
+ delimiters: ['@{{', '}}'],
|
|
|
+ data: {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initGraph1: function() {
|
|
|
+ var elementID = "#graph1";
|
|
|
+ var myData = {};
|
|
|
+
|
|
|
+ myData.x = 'x';
|
|
|
+ myData.xFormat = "%Y-%m-%d";
|
|
|
+ myData.type = 'bar';
|
|
|
+ myX = ["2015-11-20", "2015-11-21", "2015-11-22", "2015-11-23", "2015-11-24"];
|
|
|
+ myY = [1, 2, 3, 4, 5];
|
|
|
+ myX.splice(0, 0, 'x');
|
|
|
+ myY.splice(0, 0, 'New Reports');
|
|
|
+ myData.columns = [];
|
|
|
+ myData.columns.push(myX);
|
|
|
+ myData.columns.push(myY);
|
|
|
+ var chart = c3.generate({
|
|
|
+ bindto: elementID,
|
|
|
+ data: myData,
|
|
|
+ size: {
|
|
|
+ height: 480,
|
|
|
+ width: 400,
|
|
|
+ },
|
|
|
+ bar: {
|
|
|
+ width: {
|
|
|
+ ratio: 0.5 // this makes bar width 50% of length between ticks
|
|
|
+ }
|
|
|
+ // or
|
|
|
+ //width: 100 // this makes bar width 100px
|
|
|
+ },
|
|
|
+ axis: {
|
|
|
+ x: {
|
|
|
+ type: 'timeseries',
|
|
|
+ tick: {
|
|
|
+ format: "%b-%d"
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ init: function() {
|
|
|
+ this.initGraph1();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted: function() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ addMCInitializer('managementStats', init, '#managementStatsComponent');
|
|
|
+ })();
|
|
|
+</script>
|
|
|
+
|
|
|
+@endsection
|