Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/issue-list/mr-chart/chops-chart.js b/static_src/elements/issue-list/mr-chart/chops-chart.js
new file mode 100644
index 0000000..a74255a
--- /dev/null
+++ b/static_src/elements/issue-list/mr-chart/chops-chart.js
@@ -0,0 +1,94 @@
+// 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';
+
+/**
+ * `<chops-chart>`
+ *
+ * Web components wrapper around Chart.js.
+ *
+ */
+export class ChopsChart extends LitElement {
+ /** @override */
+ static get styles() {
+ return css`
+ :host {
+ display: block;
+ }
+ `;
+ }
+
+ /** @override */
+ render() {
+ return html`
+ <canvas></canvas>
+ `;
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ type: {type: String},
+ data: {type: Object},
+ options: {type: Object},
+ _chart: {type: Object},
+ _chartConstructor: {type: Object},
+ };
+ }
+
+ /** @override */
+ constructor() {
+ super();
+ this.type = 'line';
+ this.data = {};
+ this.options = {};
+ }
+
+ /**
+ * Dynamically chartJs to reduce single EZT bundle size
+ * Move to static import once EZT is deprecated
+ */
+ async connectedCallback() {
+ super.connectedCallback();
+ /* eslint-disable max-len */
+ const {default: Chart} = await import(
+ /* webpackChunkName: "chartjs" */ 'chart.js/dist/Chart.bundle.min.js');
+ this._chartConstructor = Chart;
+ }
+
+ /**
+ * Refetch and rerender chart after property changes
+ * @override
+ * @param {Map} changedProperties
+ */
+ updated(changedProperties) {
+ // Make sure chartJS has loaded before attempting to create a chart
+ if (this._chartConstructor) {
+ if (!this._chart) {
+ const {type, data, options} = this;
+ const ctx = this.shadowRoot.querySelector('canvas').getContext('2d');
+ this._chart = new this._chartConstructor(ctx, {type, data, options});
+ } else if (
+ changedProperties.has('type') ||
+ changedProperties.has('data') ||
+ changedProperties.has('options')) {
+ this._updateChart();
+ }
+ }
+ }
+
+ /**
+ * Sets chartJs options and calls update
+ */
+ _updateChart() {
+ this._chart.type = this.type;
+ this._chart.data = this.data;
+ this._chart.options = this.options;
+
+ this._chart.update();
+ }
+}
+
+customElements.define('chops-chart', ChopsChart);