Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/issue-list/mr-chart-page/mr-chart-page.js b/static_src/elements/issue-list/mr-chart-page/mr-chart-page.js
new file mode 100644
index 0000000..06ff7a4
--- /dev/null
+++ b/static_src/elements/issue-list/mr-chart-page/mr-chart-page.js
@@ -0,0 +1,100 @@
+// Copyright 2019 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 {LitElement, html, css} from 'lit-element';
+import {connectStore} from 'reducers/base.js';
+import * as projectV0 from 'reducers/projectV0.js';
+import * as sitewide from 'reducers/sitewide.js';
+import '../mr-mode-selector/mr-mode-selector.js';
+import '../mr-chart/mr-chart.js';
+
+/**
+ * <mr-chart-page>
+ *
+ * Chart page view containing mr-mode-selector and mr-chart.
+ * @extends {LitElement}
+ */
+export class MrChartPage extends connectStore(LitElement) {
+ /** @override */
+ static get styles() {
+ return css`
+ :host {
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+ padding: 0.5em 8px;
+ }
+ h2 {
+ font-size: 1.2em;
+ margin: 0 0 0.5em;
+ }
+ .list-controls {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ width: 100%;
+ padding: 0.5em 0;
+ height: 32px;
+ }
+ .help {
+ padding: 1em;
+ background-color: rgb(227, 242, 253);
+ width: 44em;
+ font-size: 92%;
+ margin: 5px;
+ padding: 6px;
+ border-radius: 6px;
+ }
+ .monospace {
+ font-family: monospace;
+ }
+ `;
+ }
+
+ /** @override */
+ render() {
+ return html`
+ <div class="list-controls">
+ <mr-mode-selector
+ .projectName=${this._projectName}
+ .queryParams=${this._queryParams}
+ .value=${'chart'}
+ ></mr-mode-selector>
+ </div>
+ <mr-chart
+ .projectName=${this._projectName}
+ .queryParams=${this._queryParams}
+ ></mr-chart>
+
+ <div>
+ <div class="help">
+ <h2>Supported query parameters:</h2>
+ <span class="monospace">
+ cc, component, hotlist, label, owner, reporter, status
+ </span>
+ <br /><br />
+ <a href="https://bugs.chromium.org/p/monorail/issues/entry?labels=Feature-Charts">
+ Please file feedback here.
+ </a>
+ </div>
+ </div>
+ `;
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ _projectName: {type: String},
+ /** @private {Object} */
+ _queryParams: {type: Object},
+ };
+ }
+
+ /** @override */
+ stateChanged(state) {
+ this._projectName = projectV0.viewedProjectName(state);
+ this._queryParams = sitewide.queryParams(state);
+ }
+};
+customElements.define('mr-chart-page', MrChartPage);