Graphs

app/Http/Controllers/ManagementStatsController.php

@@ -12,8 +12,14 @@ class ManagementStatsController extends Controller
     public function index(Request $request)
     {
         $filters = $request->all();
+        $clientsWePaidToAcquire = [
+            ['date_trunc' => '2022-01-01 00:00:00', 'count' => 1445]
+        ];
+        $activeClients = [
+            ['date_trunc' => '2022-01-01 00:00:00', 'count' => 1445]
+        ];
         
-        return view('app.admin.management-stats.index', compact('filters'));
+        return view('app.admin.management-stats.index', compact('clientsWePaidToAcquire', 'activeClients', 'filters'));
     }
 
 } 

resources/views/app/admin/management-stats/index.blade.php

@@ -21,9 +21,17 @@
             <div class="row">
                 <div class="col-md-6">
                     <div class="card">
-                        <div class="card-header">Some Reports</div>
+                        <div class="card-header">Who are the clients we paid to acquire?</div>
                         <div class="card-body">
-                            <div id="graph1"></div>
+                            <div id="clientsWePaidToAcquire"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="card">
+                        <div class="card-header">Active Clients</div>
+                        <div class="card-body">
+                            <div id="activeClients"></div>
                         </div>
                     </div>
                 </div>
@@ -38,20 +46,76 @@
                 el: '#managementStatsComponent',
                 delimiters: ['@{{', '}}'],
                 data: {
-
+                    clientsWePaidToAcquire: <?= json_encode($clientsWePaidToAcquire) ?>,
+                    activeClients: <?= json_encode($activeClients) ?>,
                 },
                 methods: {
-                    initGraph1: function() {
-                        var elementID = "#graph1";
+                    initClientsWePaidToAcquire: function() {
+                        var data = this.clientsWePaidToAcquire;
+                        var dates = [];
+                        var values = [];
+                        for(var i = 0; i < data.length; i++){
+                            var d = data[i];
+                            dates.push(d.date_trunc);
+                            values.push(d.count);
+                        }
+                        var elementID = "#clientsWePaidToAcquire";
+                        var myData = {};
+
+                        myData.x = 'x';
+                        myData.xFormat = "%Y-%m-%d";
+                        myData.type = 'bar';
+                        myX = dates;
+                        myY = values;
+                        myX.splice(0, 0, 'x');
+                        myY.splice(0, 0, 'Clients we paid to acquire');
+                        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"
+                                    }
+                                },
+
+                            }
+                        })
+                    },
+                    initActiveClients: function() {
+                        var data = this.activeClients;
+                        var dates = [];
+                        var values = [];
+                        for(var i = 0; i < data.length; i++){
+                            var d = data[i];
+                            dates.push(d.date_trunc);
+                            values.push(d.count);
+                        }
+                        var elementID = "#activeClients";
                         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 = dates;
+                        myY = values;
                         myX.splice(0, 0, 'x');
-                        myY.splice(0, 0, 'New Reports');
+                        myY.splice(0, 0, 'Active Clients');
                         myData.columns = [];
                         myData.columns.push(myX);
                         myData.columns.push(myY);
@@ -81,7 +145,8 @@
                         })
                     },
                     init: function() {
-                        this.initGraph1();
+                        this.initClientsWePaidToAcquire();
+                        this.initActiveClients();
                     },
                 },
                 mounted: function() {