[M116][PriceInsights] Add history section in side panel

Add history section in the side panel, including the section title, subtitle, description and a graph. Demo with fake backend response: https://drive.google.com/file/d/1TWm8MQFDr-epcJFc0XZh0rkRO7v66_xI/view?usp=drive_link (cherry picked from commit abe51b4) Bug: 1458560, b:283465961 Change-Id: Ibe6107d2463e8df7a1f915774490af7ef4f685fc Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4658139 Commit-Queue: Zhiyuan Cai <zhiyuancai@chromium.org> Reviewed-by: Matthew Jones <mdjones@chromium.org> Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org> Reviewed-by: Emily Stark <estark@chromium.org> Cr-Original-Commit-Position: refs/heads/main@{#1164996} Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4667767 Commit-Queue: Krishna Govind <govind@chromium.org> Auto-Submit: Zhiyuan Cai <zhiyuancai@chromium.org> Reviewed-by: Krishna Govind <govind@chromium.org> Owners-Override: Krishna Govind <govind@chromium.org> Cr-Commit-Position: refs/branch-heads/5845@{#328} Cr-Branched-From: 5a5dff6-refs/heads/main@{#1160321}
chromium · Jul 5, 2023 · a7a8128 · a7a8128
1 parent 31faf6e
commit a7a8128
Show file tree

Hide file tree

Showing 13 changed files with 704 additions and 57 deletions.
diff --git a/chrome/browser/resources/side_panel/commerce/BUILD.gn b/chrome/browser/resources/side_panel/commerce/BUILD.gn
@@ -13,6 +13,7 @@ build_webui("build") {
 
   web_component_files = [
     "app.ts",
+    "history_graph.ts",
     "price_tracking_section.ts",
   ]
 
@@ -24,6 +25,7 @@ build_webui("build") {
     "//ui/webui/resources/js:build_ts",
     "//ui/webui/resources/mojo:build_ts",
   ]
+  ts_tsconfig_base = "tsconfig_base.json"
   ts_path_mappings =
       [ "//shopping-insights-side-panel.top-chrome/shared/*|" +
         rebase_path(

diff --git a/chrome/browser/resources/side_panel/commerce/app.html b/chrome/browser/resources/side_panel/commerce/app.html
@@ -18,35 +18,96 @@
 
   .panel-subtitle {
     color: var(--cr-primary-text-color);
-    margin: 4px 0;
+    margin-top: 4px;
     font-size: 12px;
     font-weight: 400;
+  }
+
+  .divider {
+    border-top: 4px solid var(--cr-separator-color);
+  }
+
+  .section-title {
+    color: var(--cr-primary-text-color);
+    font-size: 13px;
+    font-weight: 500;
+  }
+
+  .history-subtitle {
+    color: var(--cr-secondary-text-color);
+    margin-top: 4px;
+    font-size: 12px;
+  }
+
+  .section-details {
+    color: var(--cr-secondary-text-color);
+    margin-top: 8px;
+    font-size: 11px;
+    line-height: 20px;
+    max-width: 100%;
+  }
+
+  .panel-subtitle,
+  .section-title,
+  .history-subtitle {
     line-height: 20px;
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  .divider {
-    border-top: 4px solid var(--cr-separator-color);
+  shopping-insights-history-graph {
+    margin-top: 8px;
   }
 </style>
 
 <div id="insightsContainer">
   <div class="section" id="titleSection">
     <div class="panel-title">[[productInfo.clusterTitle]]</div>
-    <div hidden="[[!priceInsightsInfo.typicalLowPrice.length]]"
-        class="panel-subtitle">[[getRangeDescription_(priceInsightsInfo)]]</div>
-    <template is="dom-if"
-        if="[[!priceInsightsInfo.typicalLowPrice.length]]" restamp>
-      <div>
-        <div hidden="[[!priceInsightsInfo.hasMultipleCatalogs]]"
-            class="panel-subtitle">[[priceInsightsInfo.catalogAttributes]]</div>
+    <div id="priceRange" class="panel-subtitle"
+        hidden="[[!priceInsightsInfo.typicalLowPrice.length]]">
+      [[getRangeDescription_(priceInsightsInfo)]]
+    </div>
+    <div class="panel-subtitle"
+        hidden="[[priceInsightsInfo.typicalLowPrice.length]]">
+      <span hidden="[[!priceInsightsInfo.hasMultipleCatalogs]]"
+          id="attributes1">
+        [[priceInsightsInfo.catalogAttributes]]
+      </span>
+      <!-- TODO(b:283465961): Add buying options button -->
+    </div>
+    <div hidden="[[priceInsightsInfo.history.length]]"
+        class="section-details" id="desc1">
+      $i18n{historyDescription}
+    </div>
+    <!-- TODO(b:283465961): Add feedback button -->
+  </div>
+  <template is="dom-if" if="[[priceInsightsInfo.history.length]]" restamp>
+    <div class="divider"></div>
+    <div class="section" id="historySection">
+      <div class="section-title" id="historyTitle">
+        [[getHistoryTitle_(priceInsightsInfo)]]
+      </div>
+      <div hidden="[[!priceInsightsInfo.typicalLowPrice.length]]"
+          class="history-subtitle">
+        <span hidden="[[!priceInsightsInfo.hasMultipleCatalogs]]"
+            id="attributes2">
+          [[priceInsightsInfo.catalogAttributes]]
+        </span>
         <!-- TODO(b:283465961): Add buying options button -->
       </div>
-    </template>
-  </div>
+      <shopping-insights-history-graph data="[[priceInsightsInfo.history]]"
+          locale="[[priceInsightsInfo.locale]]"
+          currency="[[priceInsightsInfo.currencyCode]]">
+      </shopping-insights-history-graph>
+      <div hidden="[[!priceInsightsInfo.history.length]]"
+          class="section-details" id="desc2">
+        $i18n{historyDescription}
+      </div>
+      <!-- TODO(b:283465961): Add feedback button -->
+    </div>
+  </template>
   <template is="dom-if" if="[[isProductTrackable_]]" restamp>
     <div class="divider"></div>
     <price-tracking-section id="priceTrackingSection"

diff --git a/chrome/browser/resources/side_panel/commerce/app.ts b/chrome/browser/resources/side_panel/commerce/app.ts
@@ -6,9 +6,10 @@ import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
 import 'chrome://resources/cr_elements/mwb_element_shared_style.css.js';
 import '../strings.m.js';
 import './price_tracking_section.js';
+import './history_graph.js';
 
 import {ShoppingListApiProxy, ShoppingListApiProxyImpl} from '//shopping-insights-side-panel.top-chrome/shared/commerce/shopping_list_api_proxy.js';
-import {PriceInsightsInfo, ProductInfo} from '//shopping-insights-side-panel.top-chrome/shared/shopping_list.mojom-webui.js';
+import {PriceInsightsInfo, PriceInsightsInfo_PriceBucket, ProductInfo} from '//shopping-insights-side-panel.top-chrome/shared/shopping_list.mojom-webui.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {listenOnce} from 'chrome://resources/js/util_ts.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -75,10 +76,29 @@ export class ShoppingInsightsAppElement extends PolymerElement {
       return lowPrice === highPrice ?
           loadTimeData.getStringF('rangeMultipleOptionsOnePrice', lowPrice) :
           loadTimeData.getStringF('rangeMultipleOptions', lowPrice, highPrice);
-    } else {
-      return lowPrice === highPrice ?
-          loadTimeData.getStringF('rangeSingleOptionOnePrice', lowPrice) :
-          loadTimeData.getStringF('rangeSingleOption', lowPrice, highPrice);
+    }
+
+    return lowPrice === highPrice ?
+        loadTimeData.getStringF('rangeSingleOptionOnePrice', lowPrice) :
+        loadTimeData.getStringF('rangeSingleOption', lowPrice, highPrice);
+  }
+
+  private getHistoryTitle_(info: PriceInsightsInfo): string {
+    switch (info.bucket) {
+      case PriceInsightsInfo_PriceBucket.kLow:
+        return loadTimeData.getString(
+            info.hasMultipleCatalogs ? 'lowPriceMultipleOptions' :
+                                       'lowPriceSingleOption');
+      case PriceInsightsInfo_PriceBucket.kTypical:
+        return loadTimeData.getString(
+            info.hasMultipleCatalogs ? 'typicalPriceMultipleOptions' :
+                                       'typicalPriceSingleOption');
+      case PriceInsightsInfo_PriceBucket.kHigh:
+        return loadTimeData.getString(
+            info.hasMultipleCatalogs ? 'highPriceMultipleOptions' :
+                                       'highPriceSingleOption');
+      default:
+        return loadTimeData.getString('historyTitle');
     }
   }
 }

diff --git a/chrome/browser/resources/side_panel/commerce/history_graph.html b/chrome/browser/resources/side_panel/commerce/history_graph.html
@@ -0,0 +1,82 @@
+<style>
+  .tick {
+    fill: var(--cr-secondary-text-color);
+    font-size: 11px;
+    line-height: 20px;
+  }
+
+  .axis
+  .circle
+  .path {
+    stroke-width: 2px;
+  }
+
+  .divider
+  .dash-line {
+    stroke-width: 1px;
+  }
+
+  .axis,
+  .divider {
+    stroke: rgba(0, 0, 0, .14);
+    stroke-linecap: round;
+  }
+
+  .path {
+    fill: none;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  .dash-line {
+    stroke-dasharray: 3,3;
+    stroke-linecap: square;
+  }
+
+  .circle {
+    fill: white;
+  }
+
+  .bubble {
+    border-radius: 3px;
+    fill: var(--google-grey-100);
+    stroke: none;
+  }
+
+  .tooltip-text {
+    fill: var(--cr-primary-text-color);
+    font-size: 11px;
+    line-height: 20px;
+    text-anchor: middle;
+  }
+
+  .path,
+  .dash-line,
+  .circle {
+    stroke: var(--google-blue-700);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .axis,
+    .divider {
+      stroke: rgba(255, 255, 255, .14);
+    }
+
+    .path,
+    .dash-line,
+    .circle {
+      stroke: var(--google-blue-300);
+    }
+
+    .circle {
+      fill: var(--google-grey-900);
+    }
+
+    .bubble {
+      /* TODO(b:289240209): Avoid using the custom color. */
+      fill: #5C5E62;
+    }
+  }
+</style>
+
+<div id="historyGraph"></div>