bugs-central/modules/bugs-chart-sk/bugs-chart-sk.ts

/**
 * @module bugs-chart-sk
 * @description <h2><code>bugs-chart-sk</code></h2>
 *
 * Displays a google-chart for the specified type and data.
 *
 * @attr chart_type {string} The type of the chart. Eg: open/slo.
 *
 * @attr chart_title {string} The title of the chart.
 *
 * @attr data {string} Data for the chart. Eg: '[["Month", "Days"], ["Jan", 31], ["Feb", 28], ["Mar", 31]]'.
 *
 */

import '@google-web-components/google-chart';

import { define } from 'elements-sk/define';
import { html } from 'lit-html';

import { ElementSk } from '../../../infra-sk/modules/ElementSk';

export type ChartType = 'open' | 'slo' | 'untriaged';

function getChartOptions(type: string): string {
  const displayType = type === 'open' ? 'area' : 'line';
  const isStacked = type === 'open';
  return JSON.stringify({
    chartArea: {
      top: 15,
      left: 50,
      width: '83%',
      height: '82%',
    },
    backgroundColor: {
      fill: 'var(--background)',
      fillOpacity: 0.8,
    },
    hAxis: {
      slantedText: false,
    },
    legend: {
      position: 'bottom',
    },
    type: displayType,
    isStacked: isStacked,
    series: {
      3: {
        color: '#64c1f6',
      },
      2: {
        color: '#64B5F6',
      },
      1: {
        color: '#1E88E5',
      },
      0: {
        color: '#0D47A1',
      },
    },
  });
}

export class BugsChartSk extends ElementSk {
  constructor() {
    super(BugsChartSk.template);
  }

  private static template = (el: BugsChartSk) => html`
    <div class="charts-title">${el.chart_title}</div>
    <google-chart
      id="${el.chart_type}-chart"
      options="${getChartOptions(el.chart_type)}"
      data="${el.data}">
    </google-chart>
`;

  /** Reflects chart_type attribute for convenience. */
  get chart_type(): string { return this.getAttribute('chart_type')!; }

  set chart_type(val: string) { this.setAttribute('chart_type', (+val as unknown) as string); }

  /** Reflects chart_type attribute for convenience. */
  get chart_title(): string { return this.getAttribute('chart_title')!; }

  set chart_title(val: string) { this.setAttribute('chart_title', (+val as unknown) as string); }

  /** Reflects data attribute for convenience. */
  get data(): string { return this.getAttribute('data')!; }

  set data(val: string) { this.setAttribute('data', (+val as unknown) as string); }

  connectedCallback(): void {
    super.connectedCallback();

    this._upgradeProperty('chart_type');
    this._upgradeProperty('chart_title');
    this._upgradeProperty('data');

    this._render();
  }

  static get observedAttributes(): string[] {
    return ['chart_type', 'chart_title', 'data'];
  }

  attributeChangedCallback(_name: string, oldValue: string, newValue: string): void {
    if (oldValue !== newValue) {
      this._render();
    }
  }
}

define('bugs-chart-sk', BugsChartSk);