Diagnostics: Wire percent chart to battery card

https://screenshot.googleplex.com/4HWAicLVp6pnhNp

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

chrome/test/data/webui/chromeos/diagnostics/diagnostics_test.js

@@ -173,6 +173,15 @@ suite('BatteryStatusCardTest', () => {
               fakeBatteryChargeStatus[0].power_adapter_status,
               dataPoints[5].value);
           assertEquals(fakeBatteryHealth[0].cycle_count, dataPoints[6].value);
+
+          const barChart = diagnostics_test_utils.getPercentBarChartElement(
+              batteryStatusElement);
+          assertEquals(
+              fakeBatteryChargeStatus[0].charge_full_now_milliamp_hours,
+              barChart.max);
+          assertEquals(
+              fakeBatteryChargeStatus[0].charge_now_milliamp_hours,
+              barChart.value);
         });
   });
 });

chromeos/components/diagnostics_ui/resources/battery_status_card.html

@@ -27,4 +27,9 @@
   <data-point slot="body" id="cycleCount"
     value="[[batteryHealth_.cycle_count]]">
   </data-point>
+  <!-- TODO(joonbug): Localize once strings are confirmed -->
+  <percent-bar-chart slot="body" title="Remaining charge"
+    value="[[batteryChargeStatus_.charge_now_milliamp_hours]]"
+    max="[[batteryChargeStatus_.charge_full_now_milliamp_hours]]">
+  </percent-bar-chart>
 </diagnostics-card>

chromeos/components/diagnostics_ui/resources/battery_status_card.js

@@ -5,6 +5,7 @@
 import './data_point.js';
 import './diagnostics_card.js';
 import './diagnostics_shared_css.js';
+import './percent_bar_chart.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {BatteryChargeStatus, BatteryHealth, BatteryInfo, SystemDataProviderInterface} from './diagnostics_types.js'