|
@@ -19,7 +19,7 @@
|
|
</div>
|
|
</div>
|
|
<div id="managementStatsComponent">
|
|
<div id="managementStatsComponent">
|
|
<div class="row">
|
|
<div class="row">
|
|
- <div class="col-md-6">
|
|
|
|
|
|
+ <div class="col-md-6 mb-2">
|
|
<div class="card">
|
|
<div class="card">
|
|
<div class="card-header">Who are the clients we paid to acquire?</div>
|
|
<div class="card-header">Who are the clients we paid to acquire?</div>
|
|
<div class="card-body">
|
|
<div class="card-body">
|
|
@@ -27,7 +27,7 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="col-md-6">
|
|
|
|
|
|
+ <div class="col-md-6 mb-2">
|
|
<div class="card">
|
|
<div class="card">
|
|
<div class="card-header">Active Clients</div>
|
|
<div class="card-header">Active Clients</div>
|
|
<div class="card-body">
|
|
<div class="card-body">
|
|
@@ -35,6 +35,22 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="col-md-6 mb-2">
|
|
|
|
+ <div class="card">
|
|
|
|
+ <div class="card-header">Active HCPs</div>
|
|
|
|
+ <div class="card-body">
|
|
|
|
+ <div id="activeHCPs"></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="col-md-6 mb-2">
|
|
|
|
+ <div class="card">
|
|
|
|
+ <div class="card-header">CPT Codes Billed</div>
|
|
|
|
+ <div class="card-body">
|
|
|
|
+ <div id="cptCodesBilled"></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -48,12 +64,14 @@
|
|
data: {
|
|
data: {
|
|
clientsWePaidToAcquire: <?= json_encode($clientsWePaidToAcquire) ?>,
|
|
clientsWePaidToAcquire: <?= json_encode($clientsWePaidToAcquire) ?>,
|
|
activeClients: <?= json_encode($activeClients) ?>,
|
|
activeClients: <?= json_encode($activeClients) ?>,
|
|
|
|
+ activeHCPs: <?= json_encode($activeHCPs) ?>,
|
|
|
|
+ cptCodesBilled: <?= json_encode($cptCodesBilled) ?>
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- dateValueDataObjectBarGraph: function (data, dateLabel, valueLabel, chartID, yAxisLegend){
|
|
|
|
|
|
+ dateValueDataObjectBarGraph: function(data, dateLabel, valueLabel, chartID, yAxisLegend) {
|
|
var dates = [];
|
|
var dates = [];
|
|
var values = [];
|
|
var values = [];
|
|
- for(var i = 0; i < data.length; i++){
|
|
|
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
var d = data[i];
|
|
var d = data[i];
|
|
dates.push(d[dateLabel]);
|
|
dates.push(d[dateLabel]);
|
|
values.push(d[valueLabel]);
|
|
values.push(d[valueLabel]);
|
|
@@ -80,10 +98,8 @@
|
|
},
|
|
},
|
|
bar: {
|
|
bar: {
|
|
width: {
|
|
width: {
|
|
- ratio: 0.5 // this makes bar width 50% of length between ticks
|
|
|
|
|
|
+ ratio: 0.5
|
|
}
|
|
}
|
|
- // or
|
|
|
|
- //width: 100 // this makes bar width 100px
|
|
|
|
},
|
|
},
|
|
axis: {
|
|
axis: {
|
|
x: {
|
|
x: {
|
|
@@ -99,15 +115,44 @@
|
|
initClientsWePaidToAcquire: function() {
|
|
initClientsWePaidToAcquire: function() {
|
|
var data = this.clientsWePaidToAcquire;
|
|
var data = this.clientsWePaidToAcquire;
|
|
this.dateValueDataObjectBarGraph(data, 'date_trunc', 'count', '#clientsWePaidToAcquire', 'Clients we paid to acquire');
|
|
this.dateValueDataObjectBarGraph(data, 'date_trunc', 'count', '#clientsWePaidToAcquire', 'Clients we paid to acquire');
|
|
-
|
|
|
|
|
|
+
|
|
},
|
|
},
|
|
initActiveClients: function() {
|
|
initActiveClients: function() {
|
|
var data = this.activeClients;
|
|
var data = this.activeClients;
|
|
this.dateValueDataObjectBarGraph(data, 'date_trunc', 'count', '#activeClients', 'Active Clients');
|
|
this.dateValueDataObjectBarGraph(data, 'date_trunc', 'count', '#activeClients', 'Active Clients');
|
|
},
|
|
},
|
|
|
|
+ initActiveHCPs: function() {
|
|
|
|
+ var data = this.activeHCPs;
|
|
|
|
+ this.dateValueDataObjectBarGraph(data, 'date_trunc', 'count', '#activeHCPs', 'Active HCPs');
|
|
|
|
+ },
|
|
|
|
+ initCpdCodesBilled: function() {
|
|
|
|
+ var chart = c3.generate({
|
|
|
|
+ bindto: '#cptCodesBilled',
|
|
|
|
+ data: {
|
|
|
|
+ columns: [
|
|
|
|
+ ['99202', 30],
|
|
|
|
+ ['99203', 3],
|
|
|
|
+ ],
|
|
|
|
+ type: 'bar'
|
|
|
|
+ },
|
|
|
|
+ bar: {
|
|
|
|
+ width: {
|
|
|
|
+ ratio: 0.5
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ axis: {
|
|
|
|
+ x: {
|
|
|
|
+ type: 'category',
|
|
|
|
+ tick: { centered: true},
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
init: function() {
|
|
init: function() {
|
|
this.initClientsWePaidToAcquire();
|
|
this.initClientsWePaidToAcquire();
|
|
this.initActiveClients();
|
|
this.initActiveClients();
|
|
|
|
+ this.initActiveHCPs();
|
|
|
|
+ this.initCpdCodesBilled();
|
|
},
|
|
},
|
|
},
|
|
},
|
|
mounted: function() {
|
|
mounted: function() {
|