Diagnostics: Add percent-bar-chart component

https://screenshot.googleplex.com/BZPMXkBm3xsHJ2H

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: Ibbb36615e3ff5c67aba09fff479e52a2a6389df4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2432676Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Commit-Queue: Joon Ahn <joonbug@chromium.org>
Commit-Queue: Jimmy Gong <jimmyxgong@chromium.org>
Cr-Commit-Position: refs/heads/master@{#811823}

chromeos/components/diagnostics_ui/resources/BUILD.gn

@@ -23,6 +23,7 @@ js_type_check("closure_compile_module") {
     ":memory_card",
     ":mojo_interface_provider",
     ":overview_card",
+    ":percent_bar_chart",
   ]
 }
 
@@ -105,6 +106,12 @@ js_library("overview_card") {
   ]
 }
 
+js_library("percent_bar_chart") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
 html_to_js("web_components") {
   js_files = [
     "battery_status_card.js",
@@ -116,5 +123,6 @@ html_to_js("web_components") {
     "diagnostics_shared_css.js",
     "memory_card.js",
     "overview_card.js",
+    "percent_bar_chart.js",
   ]
 }

chromeos/components/diagnostics_ui/resources/diagnostics_app_resources.grd

@@ -28,6 +28,7 @@
       <include name="IDR_DIAGNOSTICS_MEMORY_CARD_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/memory_card.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_MOJO_INTERFACE_PROVIDER_JS" file="mojo_interface_provider.js" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_OVERVIEW_CARD_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/overview_card.js" use_base_dir="false" type="BINDATA"/>
+      <include name="IDR_DIAGNOSTICS_PERCENT_BAR_CHART_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/percent_bar_chart.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_SHARED_CSS_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/diagnostics_shared_css.js" use_base_dir="false" type="BINDDATA"/>
       <include name="IDR_DIAGNOSTICS_TYPES_JS" file="diagnostics_types.js" type="BINDATA"/>
     </includes>

chromeos/components/diagnostics_ui/resources/percent_bar_chart.html

+<style include="diagnostics-shared diagnostics-fonts">
+  paper-progress {
+    --paper-progress-active-color: var(--google-blue-500);
+    --paper-progress-container-color: var(--google-blue-100);
+  }
+</style>
+
+<div id="barChartContainer">
+  <label id="chartName">[[title]]</label>
+  <paper-progress id="barChart" value="[[value]]" max="[[max]]"></paper-progress>
+  <!-- TODO(joonbug): Add i18n string for percent number format -->
+  <label id="percentageLabel">[[computePercentage_(value, max)]]</label>
+</div>

chromeos/components/diagnostics_ui/resources/percent_bar_chart.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import './diagnostics_fonts_css.js';
+import './diagnostics_shared_css.js';
+import 'chrome://resources/polymer/v3_0/paper-progress/paper-progress.js';
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+/**
+ * @fileoverview
+ * 'percent-bar-chart' is a styling wrapper for paper-progress used to display a
+ * percentage based bar chart.
+ */
+Polymer({
+  is: 'percent-bar-chart',
+
+  _template: html`{__html_template__}`,
+
+  properties: {
+    title: {
+      type: String,
+    },
+
+    value: {
+      type: Number,
+      value: 0,
+    },
+
+    max: {
+      type: Number,
+      value: 100,
+    },
+  },
+
+  /**
+   * Returns the percentage of the current bar chart, rounded to the nearest
+   * whole number.
+   * @param {number} currentValue
+   * @param {number} maxValue
+   * @return {number}
+   * @private
+   */
+  computePercentage_(currentValue, maxValue) {
+    return Math.round(100 * currentValue / maxValue);
+  }
+});