static_src/elements/issue-list/mr-chart/chops-chart.js

// 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);