Controlled BP card (#5776)

Story card:
[15132](https://app.shortcut.com/simpledotorg/story/15132/design-controlled-bp-and-statins-cards-to-dm-dashboard)
[SIMPLEBACK-35](https://rtsl.atlassian.net/browse/SIMPLEBACK-35?search_id=ff3d2704-f506-4f54-a7da-cf92d9e94904&referrer=quick-find)
[SIMPLEBACK-31](https://rtsl.atlassian.net/browse/SIMPLEBACK-31?search_id=a825a931-2a3b-46ae-8b13-769cab3ee674)

Because
This PR is adding 2 new charts to the Simple DM dashboard:

DM patients with controlled BP
DM patients >40yr prescribed statins
This addresses
New DM indicators.

Test instructions
This feature is behind a flipper flag while adding to production to test
before roll-out.
Flag: diabetes_cvd_indicators

---------

Co-authored-by: Jamie Carter <9541902+jamiecarter7@users.noreply.github.com>

Author: Gyan-Gupta-Rtsl

app/assets/javascripts/common/reports.js

@@ -29,6 +29,8 @@ function dashboardReportsChartJSColors() {
     overdueCalledChartFillLightGreen: "rgba(41,181,0,0.2)",
     overdueCalledChartFillLightYellow: "rgba(255,241,49,0.25)",
     overdueCalledChartFillLightRed: "rgba(255,146,122,0.2)",
+    lightPink: "rgb(223 78 223 / 0.1)",
+    mediumPink: "rgb(223 78 223)",
   };
 }
 
@@ -190,6 +192,56 @@ DashboardReports = () => {
       return withBaseLineConfig(config);
     },
 
+    dmControlledBPTrend: function (data) {
+      const config = {
+        data: {
+          labels: Object.keys(data.controlledBPRate140),
+          datasets: [
+            {
+              label: "BP controlled <130/80",
+              data: Object.values(data.controlledBPRate130),
+              backgroundColor: colors.transparent,
+              borderColor: colors.darkGreen,
+            },
+            {
+              label: "BP controlled <140/90",
+              data: Object.values(data.controlledBPRate140),
+              backgroundColor: colors.transparent,
+              borderColor: colors.mediumGreen,
+            },
+          ],
+        },
+        // options: {
+        //   scales: {
+        //     x: {
+        //       stacked: true,
+        //     },
+        //     y: {
+        //       stacked: true,
+        //     },
+        //   },
+        // },
+      };
+      return withBaseLineConfig(config);
+    },
+
+    dmPrescribedStatinsTrend: function (data) {
+      const config = {
+        data: {
+          labels: Object.keys(data.prescribedStatinsRate),
+          datasets: [
+            {
+              label: "Patients prescribed statins",
+              backgroundColor: colors.lightPink,
+              borderColor: colors.mediumPink,
+              data: Object.values(data.prescribedStatinsRate),
+            },
+          ],
+        },
+      };
+      return withBaseLineConfig(config);
+    },
+
     diabetesMissedVisitsTrend: function (data) {
       const config = {
         data: {
@@ -1460,7 +1512,7 @@ Reports = function ({
       populateVisitDetailsGraphDefault();
     }
   };
-
+  
   this.initializeTables = () => {
     const tableSortAscending = { descending: false };
     const regionComparisonTable = document.getElementById(

app/assets/stylesheets/application.scss

@@ -249,9 +249,6 @@ table {
 .text-red {
   color: $red;
 }
-.text-green {
-  color: $green;
-}
 .text-yellow {
   color: $yellow-dark;
 }

app/assets/stylesheets/partials/_reports.scss

@@ -24,6 +24,10 @@
   bottom: 8px;
 }
 
+.pb-24px {
+  padding-bottom: 24px;
+}
+
 // Pointer events
 .pe-none {
   pointer-events: none;
@@ -328,6 +332,9 @@
 .c-grey-light {
   color: $grey-light;
 }
+.c-green {
+  color: $green;
+}
 .c-green-dark {
   color: $green-dark;
 }
@@ -337,6 +344,9 @@
 .c-purple-medium {
   color: $purple-mid;
 }
+.c-pink {
+  color: $pink;
+}
 .c-red {
   color: $red;
 }

app/assets/stylesheets/partials/_variables.scss

@@ -47,6 +47,8 @@ $orange-dark-new: #DF680F;
 
 $amber: #dfa52f;
 
+$pink: #df4eef;
+
 $purple-light: #eee5fc;
 $purple-mid: #a980ef;
 $purple: #5300e0;

app/assets/stylesheets/user_analytics.scss

@@ -903,6 +903,7 @@ footer p {
 .c-white { color: $white; }
 .c-black { color: $black; }
 .c-brown-new { color:$brown-new; }
+.c-pink { color: $pink; }
 /* BACKGROUND COLORS */
 .bgc-grey-lightest { background: $grey-lightest; }
 .bgc-grey-light { background: $grey-light; }

app/components/dashboard/diabetes/dm_bp_controlled_component.html.erb

@@ -0,0 +1,39 @@
+<div id="dm-controlled-bp" class="d-lg-flex min-w-0">
+  <%= render Dashboard::Card::GraphComponent.new(id: "dmControlledBPTrend", data: graph_data, period: period) do |c| %>
+    <%= c.title(
+      title: "DM patients with controlled BP",
+      subtitle: "Diabetes patients in #{region.name} with controlled BP at their latest visit in the last 3 months (#{bp_control_date_range}).") do |title| %>
+      <%= title.tooltip({ "Numerator" => "Patients with controlled BP at their latest visit in the last 3 months.",
+                          "Denominator" => t(denominator_copy, region_name: region.name )}
+      ) %>
+      <%= title.ltfu_toggle(id: 'DMcontrolleBPGraphLtfuToggle', enabled: with_ltfu) %>
+    <% end %>
+    <%= c.summary do %>
+      <div class="ml-4px d-lg-flex align-lg-center">
+        <p class="c-print-black c-green graph-percent fs-28px" data-key="controlledBPRate140" data-format="percentage"></p>
+        <div>
+          <p class="m-0px c-black">
+            <span data-key="controlledBPNumerator140" data-format="numberWithCommas"></span>
+            patients with BP &lt;140/90
+          </p>
+        </div>
+      </div>
+      <div class="ml-4px mb-4px d-lg-flex align-lg-center">
+        <p class="c-print-black c-green-dark graph-percent fs-28px" data-key="controlledBPRate130" data-format="percentage">
+        30%</p>
+        <div>
+          <p class="m-0px c-black">
+            <span data-key="controlledBPNumerator130" data-format="numberWithCommas"></span>
+            patients with BP &lt;130/80
+          </p>
+        </div>
+      </div>
+      <p class="ml-4px c-grey-dark c-print-black">
+        of <span data-key="adjustedPatients" data-format="numberWithCommas"></span>
+        patients registered till
+        <span data-key="registrationDate"></span>
+      </p>
+    <% end %>
+  <% end %>
+</div>
+

app/components/dashboard/diabetes/dm_bp_controlled_component.rb

@@ -0,0 +1,74 @@
+class Dashboard::Diabetes::DmBpControlledComponent < ApplicationComponent
+  attr_reader :data, :region, :period, :with_ltfu
+
+  def initialize(data:, region:, period:, use_who_standard:, with_ltfu: false)
+    @data = data
+    @region = region
+    @period = period
+    @with_ltfu = with_ltfu
+    @use_who_standard = use_who_standard
+  end
+
+  def graph_data
+    if with_ltfu
+      adjusted_patients_data = data[:adjusted_diabetes_patient_counts_with_ltfu]
+      rates_140 = data[:dm_controlled_bp_140_90_with_ltfu_rates]
+      rates_130 = data[:dm_controlled_bp_130_80_with_ltfu_rates]
+    else
+      adjusted_patients_data = data[:adjusted_diabetes_patient_counts]
+      rates_140 = data[:dm_controlled_bp_140_90_rates]
+      rates_130 = data[:dm_controlled_bp_130_80_rates]
+    end
+
+    numerators_140 = data[:dm_patients_with_controlled_bp_140_90]
+    numerators_130 = data[:dm_patients_with_controlled_bp_130_80]
+
+    {
+      # Rates for BP controlled <140/90 (outer bar)
+      controlledBPRate140: format_rates(rates_140),
+      # Rates for BP controlled <130/80 (inner bar, stacked on top)
+      controlledBPRate130: format_rates(rates_130),
+      # Patient counts for BP controlled <140/90
+      controlledBPNumerator140: format_counts(numerators_140),
+      # Patient counts for BP controlled <130/80
+      controlledBPNumerator130: format_counts(numerators_130),
+      # Adjusted patient counts (denominator)
+      adjustedPatients: format_counts(adjusted_patients_data),
+      **period_data
+    }
+  end
+
+  def bp_control_date_range
+    "#{period.bp_control_range_start_date} to #{period.bp_control_range_end_date}"
+  end
+
+  def denominator_copy
+    with_ltfu ? "diabetes_bp_controlled_denominator_with_ltfu_copy" : "diabetes_bp_controlled_denominator_copy"
+  end
+
+  private
+
+  def period_data
+    {
+      startDate: period_info(:bp_control_start_date),
+      endDate: period_info(:bp_control_end_date),
+      registrationDate: period_info(:bp_control_registration_date)
+    }
+  end
+
+  def period_info(key)
+    data[:period_info].map do |period_obj, period_data_hash|
+      period_key = period_obj.to_s
+      date_value = period_data_hash[key]
+      [period_key, date_value]
+    end.to_h
+  end
+
+  def format_rates(rates_hash)
+    rates_hash.transform_keys { |period| period.to_s }
+  end
+
+  def format_counts(counts_hash)
+    counts_hash.transform_keys { |period| period.to_s }
+  end
+end

app/components/dashboard/diabetes/dm_prescribed_statins_component.html.erb

@@ -0,0 +1,31 @@
+<div id="dm-prescribed-statins" class="d-lg-flex min-w-0">
+  <%= render Dashboard::Card::GraphComponent.new(id: "dmPrescribedStatinsTrend", data: graph_data, period: period) do |c| %>
+    <%= c.title(
+      title: "DM patients &ge;40y prescribed statins".html_safe,
+      subtitle: "Diabetes patients in #{region.name} ≥40 years old that were prescribed statins at their latest visit in the last 12 months.") do |title| %>
+      <%= title.tooltip({
+        "Numerator" => "Patients prescribed statins at their latest visit.",
+        "Denominator" => t(denominator_copy, region_name: region.name)
+      }) %>
+      <%= title.ltfu_toggle(id: 'DMPrescribedStatinsGraphLtfuToggle', enabled: with_ltfu) %>
+    <% end %>
+    <%= c.summary do %>
+      <div class="mb-12px d-lg-flex align-lg-center">
+        <p class="c-print-black c-pink graph-percent fs-28px" data-key="prescribedStatinsRate" data-format="percentage"></p>
+        <div>
+          <p class="m-0px c-black">
+            <span data-key="prescribedStatinsNumerator" data-format="numberWithCommas"></span>
+            patients prescribed statins
+          </p>
+          <p class="m-0px c-grey-dark c-print-black">
+            of
+            <span data-key="cumulativeAssignedPatientsUnderCareOver40yearsOld" data-format="numberWithCommas"></span>
+            patients ≥40 years old registered till
+            <span data-key="endDate"></span>
+          </p>
+        </div>
+      </div>
+    <%end%>
+  <% end %>
+</div>
+

app/components/dashboard/diabetes/dm_prescribed_statins_component.rb

@@ -0,0 +1,57 @@
+class Dashboard::Diabetes::DmPrescribedStatinsComponent < ApplicationComponent
+  attr_reader :data, :region, :period, :with_ltfu
+
+  def initialize(data:, region:, period:, use_who_standard:, with_ltfu: false)
+    @data = data
+    @region = region
+    @period = period
+    @with_ltfu = with_ltfu
+    @use_who_standard = use_who_standard
+  end
+
+  def denominator_copy
+    with_ltfu ? "dm_prescribed_statins_denominator_with_ltfu_copy" : "dm_prescribed_statins_denominator_copy"
+  end
+
+  def graph_data
+    if with_ltfu
+      rates = data[:dm_prescribed_statins_with_ltfu_rates]
+      denominator = data[:dm_patients_40_and_above_with_ltfu]
+    else
+      rates = data[:dm_prescribed_statins_rates]
+      denominator = data[:dm_patients_40_and_above_under_care]
+    end
+    {
+      prescribedStatinsRate: format_rates(rates),
+      prescribedStatinsNumerator: format_counts(data[:dm_patients_prescribed_statins]),
+      cumulativeAssignedPatientsUnderCareOver40yearsOld: format_counts(denominator),
+      **period_data
+    }
+  end
+
+  private
+
+  def period_data
+    {
+      startDate: period_info(:bp_control_start_date),
+      endDate: period_info(:bp_control_end_date),
+      registrationDate: period_info(:bp_control_registration_date)
+    }
+  end
+
+  def period_info(key)
+    data[:period_info].map do |period_obj, period_data_hash|
+      period_key = period_obj.to_s
+      date_value = period_data_hash[key]
+      [period_key, date_value]
+    end.to_h
+  end
+
+  def format_rates(rates_hash)
+    rates_hash.transform_keys { |period| period.to_s }
+  end
+
+  def format_counts(counts_hash)
+    counts_hash.transform_keys { |period| period.to_s }
+  end
+end

app/models/blood_sugar.rb

@@ -67,6 +67,6 @@ def risk_state
         break
       end
     end
-    risk_state.to_sym
+    risk_state&.to_sym
   end
 end