Add release health / mobile devops charts

Gemfile

@@ -48,7 +48,6 @@ gem "faraday-retry", "~> 2.0"
 gem "rubyzip", "~> 2.3"
 gem "requestjs-rails", "~> 0.0.9"
 gem "groupdate", "~> 6.1"
-gem "chartkick", "~> 4.2"
 gem "pghero", "~> 3.1"
 gem "aasm", "~> 5.3"
 gem "after_commit_everywhere", "~> 1.2"

Gemfile.lock

@@ -102,7 +102,6 @@ GEM
       rack-test (>= 0.6.3)
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
-    chartkick (4.2.1)
     coderay (1.1.3)
     concurrent-ruby (1.2.2)
     connection_pool (2.4.1)
@@ -616,7 +615,6 @@ DEPENDENCIES
   brakeman (~> 5.2)
   bundler-audit (~> 0.9.1)
   capybara
-  chartkick (~> 4.2)
   connection_pool (~> 2.2)
   data_migrate (~> 8.1)
   ddtrace (~> 1.4)

app/components/chart_component.html.erb

@@ -0,0 +1,49 @@
+<div class="w-full bg-white rounded-sm border border-gray-200 p-3">
+  <div class="flex justify-between items-center mb-4">
+    <div>
+      <h5 class="flex leading-none text-lg font-normal text-gray-900 items-center gap-x-1">
+        <%= title %>
+        <%= inline_svg("question_mark.svg", classname: "w-4 inline-flex fill-current shrink-0 text-gray-400") %>
+      </h5>
+
+      <p class="text-sm font-normal text-gray-400"><%= chart_scope %></p>
+    </div>
+
+    <div class="flex items-center py-0.5 text-base font-semibold text-green-700 text-center">
+      <%= inline_svg("thermometer.svg", classname: "w-6 fill-current shrink-0") %>
+    </div>
+  </div>
+
+  <% if area? %>
+    <div data-controller="charts"
+         data-charts-type-value="area"
+         data-charts-format-value="<%= value_format %>"
+         data-charts-area-names-value="<%= legends %>"
+         data-charts-area-series-value="<%= series %>"
+         data-charts-area-categories-value="<%= categories %>">
+      <div data-charts-target="chart"></div>
+    </div>
+  <% end %>
+
+  <% if line? %>
+    <div data-controller="charts"
+         data-charts-type-value="line"
+         data-charts-format-value="<%= value_format %>"
+         data-charts-line-names-value="<%= legends %>"
+         data-charts-line-series-value="<%= series %>"
+         data-charts-line-categories-value="<%= categories %>">
+      <div data-charts-target="chart"></div>
+    </div>
+  <% end %>
+
+  <% if stacked_bar? %>
+    <div data-controller="charts"
+         data-charts-type-value="stacked-bar"
+         data-charts-format-value="<%= value_format %>"
+         data-charts-stacked-bar-names-value="<%= legends %>"
+         data-charts-stacked-bar-series-value="<%= series %>"
+         data-charts-stacked-bar-categories-value="<%= categories %>">
+      <div data-charts-target="chart"></div>
+    </div>
+  <% end %>
+</div>

app/components/chart_component.rb

@@ -0,0 +1,52 @@
+class ChartComponent < ViewComponent::Base
+  include AssetsHelper
+  CHART_TYPES = %w[area line donut stacked-bar]
+  InvalidChartType = Class.new(StandardError)
+
+  def initialize(chart)
+    @chart = chart
+    raise InvalidChartType unless chart[:type].in?(CHART_TYPES)
+  end
+
+  attr_reader :chart
+
+  def area?
+    type == "area"
+  end
+
+  def line?
+    type == "line"
+  end
+
+  def stacked_bar?
+    type == "stacked-bar"
+  end
+
+  def type
+    @type ||= chart[:type]
+  end
+
+  def legends
+    chart[:legends].to_json
+  end
+
+  def series
+    chart[:series].to_json
+  end
+
+  def categories
+    chart[:x_axis].to_json
+  end
+
+  def value_format
+    chart[:value_format]
+  end
+
+  def title
+    I18n.t("charts.#{chart[:name]}.title")
+  end
+
+  def chart_scope
+    I18n.t("charts.#{chart[:name]}.scope")
+  end
+end

app/controllers/apps_controller.rb

@@ -15,6 +15,7 @@ def show
     @app_setup_instructions = @app.app_setup_instructions
     @train_setup_instructions = @app.train_setup_instructions
     @train_in_creation = @app.train_in_creation
+    @devops_report = Charts::DevopsReport.all(@app.trains.find_by(slug: "production-v2")) if current_user.release_health?
   end
 
   def new

app/javascript/application.js

@@ -2,10 +2,9 @@
 import '@hotwired/turbo-rails'
 import "controllers"
 import "@rails/request.js"
-import "chartkick"
-import "Chart.bundle"
 import "semver-increment"
 import "parameterize-string"
 import "strftime"
 import "@sentry/browser"
 import "apexcharts"
+import "humanize-duration"