Feature to implement Line chart for Case Contacts

Gemfile

@@ -50,6 +50,7 @@ gem "rswag-api"
 gem "rswag-ui"
 gem "blueprinter" # for JSON serialization
 gem "oj" # faster JSON parsing 🍊
+gem "groupdate" # Group Data
 
 group :development, :test do
   gem "bullet" # Detect and fix N+1 queries

Gemfile.lock

@@ -227,6 +227,8 @@ GEM
       activerecord (>= 4.0.0)
     globalid (1.2.1)
       activesupport (>= 6.1)
+    groupdate (6.4.0)
+      activesupport (>= 6.1)
     hashdiff (1.0.1)
     htmlentities (4.3.4)
     http (5.1.1)
@@ -557,6 +559,7 @@ DEPENDENCIES
   faker
   filterrific
   friendly_id (~> 5.5.1)
+  groupdate
   httparty
   image_processing (~> 1.12)
   jbuilder

app/controllers/health_controller.rb

@@ -22,4 +22,27 @@ def case_contacts_creation_times_in_last_week
     # Return the timestamps as a JSON response
     render json: {timestamps: timestamps}
   end
+
+  def case_contacts_creation_times_in_last_year
+    # Generate an array of the last 12 months
+    last_12_months = (11.months.ago.to_date..Date.current).map { |date| date.beginning_of_month }
+
+    # Fetch case contact counts, counts with notes updated, and counts of users for each month
+    data = CaseContact.group_by_month(:created_at, last: 12).count
+    data_with_notes = CaseContact.where("notes != ''").group_by_month(:created_at, last: 12).count
+    users_data = CaseContact.select(:creator_id).distinct.group_by_month(:created_at, last: 12).count
+
+    # Combine the counts for each month
+    chart_data = last_12_months.map do |month|
+      count_all = data[month] || 0
+      count_with_notes = data_with_notes[month] || 0
+      count_users = users_data[month] || 0
+
+      [month.strftime("%b %Y"), count_all, count_with_notes, count_users]
+    end
+
+    chart_data = chart_data.uniq!
+
+    render json: chart_data
+  end
 end

app/javascript/src/display_app_metric.js

@@ -30,6 +30,27 @@ $(() => { // JQuery's callback for the DOM loading
       }
     })
   }
+
+  const monthLineChart = document.getElementById('monthLineChart')
+
+  if (monthLineChart) {
+    const notificationsElement = $('#notifications')
+    const pageNotifier = notificationsElement.length ? new Notifier(notificationsElement) : null
+
+    $.ajax({
+      type: 'GET',
+      url: '/health/case_contacts_creation_times_in_last_year',
+      success: function (data) {
+        console.log(data)
+        createLineChart(monthLineChart, data)
+      },
+      error: function (xhr, status, error) {
+        console.error('Failed to fetch data for case contact entry times chart display')
+        console.error(error)
+        pageNotifier?.notify('Failed to display metric chart. Check the console for error details.', 'error')
+      }
+    })
+  }
 })
 
 function formatData (timestamps) {
@@ -142,3 +163,78 @@ function getTooltipLabelCallback (context) {
   const caseContactCountSqrt = bubbleData.r / 4
   return `${Math.round(caseContactCountSqrt * caseContactCountSqrt)} case contacts created on ${days[bubbleData.y]} at ${bubbleData.x}:00`
 }
+
+function createLineChart (chartElement, dataset) {
+  const ctx = chartElement.getContext('2d')
+
+  const allMonths = dataset.map(([month]) => month)
+  const allCaseContactsCount = dataset.map(([_, caseContactsCount]) => caseContactsCount)
+  const allCaseContactNotesCount = dataset.map(([_, __, caseContactNotesCount]) => caseContactNotesCount)
+  const allUsersCount = dataset.map(([, , , usersCount]) => usersCount)
+
+  return new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: allMonths,
+      datasets: [{
+        label: 'Total Case Contacts',
+        data: allCaseContactsCount,
+        fill: false,
+        borderColor: '#308af3',
+        pointBackgroundColor: '#308af3',
+        pointBorderWidth: 2,
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderWidth: 2,
+        lineTension: 0.05
+      }, {
+        label: 'Total Case Contacts with Notes',
+        data: allCaseContactNotesCount,
+        fill: false,
+        borderColor: '#48ba16',
+        pointBackgroundColor: '#48ba16',
+        pointBorderWidth: 2,
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderWidth: 2,
+        lineTension: 0.05
+      }, {
+        label: 'Total Users',
+        data: allUsersCount,
+        fill: false,
+        borderColor: '#FF0000',
+        pointBackgroundColor: '#FF0000',
+        pointBorderWidth: 2,
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderWidth: 2,
+        lineTension: 0.05
+      }]
+    },
+    options: {
+      legend: { display: true },
+      plugins: {
+        legend: {
+          display: true,
+          position: 'bottom'
+        },
+        title: {
+          display: true,
+          font: {
+            size: 18
+          },
+          text: 'Case Contact Creation Times in last 12 months'
+        },
+        tooltips: {
+          callbacks: {
+            label: function (tooltipItem, data) {
+              let label = data.datasets[tooltipItem.datasetIndex].label || ''
+              if (label) {
+                label += ': '
+              }
+              label += Math.round(tooltipItem.yLabel * 100) / 100
+              return label
+            }
+          }
+        }
+      }
+    }
+  })
+}

app/views/health/index.html.erb

@@ -1,3 +1,4 @@
 <div id="health">
   <canvas id="myChart"></canvas>
+  <canvas id="monthLineChart" class="mt-5"></canvas>
 </div>

config/routes.rb

@@ -36,6 +36,7 @@
   resources :health, only: %i[index] do
     collection do
       get :case_contacts_creation_times_in_last_week
+      get :case_contacts_creation_times_in_last_year
     end
   end
 

spec/requests/health_spec.rb

@@ -45,4 +45,27 @@
       expect(timestamps).not_to include(case_contact2.created_at.iso8601(3))
     end
   end
+
+  describe "GET #case_contacts_creation_times_in_last_year" do
+    it "returns case contacts creation times in the last year" do
+      # Create case contacts for testing
+      create(:case_contact, notes: "Test Notes", created_at: 11.months.ago)
+      create(:case_contact, notes: "", created_at: 11.months.ago)
+      create(:case_contact, created_at: 10.months.ago)
+      create(:case_contact, created_at: 9.months.ago)
+
+      get case_contacts_creation_times_in_last_year_health_index_path
+      expect(response).to have_http_status(:ok)
+      expect(response.content_type).to include("application/json")
+
+      chart_data = JSON.parse(response.body)
+      expect(chart_data).to be_an(Array)
+      expect(chart_data.length).to eq(12)
+
+      expect(chart_data[0]).to eq([11.months.ago.strftime("%b %Y"), 2, 1, 2])
+      expect(chart_data[1]).to eq([10.months.ago.strftime("%b %Y"), 1, 0, 1])
+      expect(chart_data[2]).to eq([9.months.ago.strftime("%b %Y"), 1, 0, 1])
+      expect(chart_data[3]).to eq([8.months.ago.strftime("%b %Y"), 0, 0, 0])
+    end
+  end
 end