src/app/components/area-chart/area-chart.component.ts

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import {
  Component,
  OnInit,
  AfterViewInit,
  Input,
  OnChanges,
  SimpleChanges,
  OnDestroy,
} from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import {
  Chart,
  LineElement,
  PointElement,
  LineController,
  LinearScale,
  TimeSeriesScale,
  Filler,
  Legend,
  Title,
} from 'chart.js';
import 'chartjs-adapter-date-fns';

import { CommonUtil } from '@app/utils/common.util';
import { AreaDataItem } from '@app/models/area-data.model';
import { EventBusService, EventMap } from '@app/services/event-bus/event-bus.service';

Chart.register(
  LineElement,
  PointElement,
  LineController,
  LinearScale,
  TimeSeriesScale,
  Filler,
  Legend,
  Title
);

@Component({
  selector: 'app-area-chart',
  templateUrl: './area-chart.component.html',
  styleUrls: ['./area-chart.component.scss'],
})
export class AreaChartComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
  destroy$ = new Subject<boolean>();

  chartContainerId = '';
  areaChartData: AreaDataItem[] = [];
  areaChart: Chart<'line', AreaDataItem[], unknown> | undefined;

  @Input() data: AreaDataItem[] = [];
  @Input() color = '#72bdd7';
  @Input() tooltipLabel = 'Value';

  constructor(private eventBus: EventBusService) {}

  ngOnInit() {
    this.chartContainerId = CommonUtil.createUniqId('area_chart_');

    this.eventBus
      .getEvent(EventMap.WindowResizedEvent)
      .pipe(takeUntil(this.destroy$))
      .subscribe(() => this.renderChart(this.areaChartData));
  }

  ngOnDestroy() {
    this.destroy$.next(true);
    this.destroy$.unsubscribe();
  }

  ngAfterViewInit() {
    if (this.data) {
      this.renderChart(this.data);
    }
  }

  ngOnChanges(changes: SimpleChanges) {
    if (
      changes['data'] &&
      changes['data'].currentValue &&
      changes['data'].currentValue.length > 0
    ) {
      this.areaChartData = changes['data'].currentValue;
      this.renderChart(this.areaChartData);
    }
  }

  renderChart(chartData: AreaDataItem[] = []) {
    if (!this.chartContainerId) {
      return;
    }

    const ctx = (document.getElementById(this.chartContainerId) as HTMLCanvasElement).getContext(
      '2d'
    );

    if (this.areaChart) {
      this.areaChart.destroy();
    }

    this.areaChart = new Chart(ctx!, {
      type: 'line',
      data: {
        datasets: [
          {
            data: chartData,
            backgroundColor: 'rgba(114, 189, 215, 0.5)',
            borderColor: 'rgb(114, 189, 215)',
            label: this.tooltipLabel,
            fill: 'start',
            pointBackgroundColor: 'rgb(114, 189, 215)',
            pointHoverRadius: 5,
          },
        ],
      },
      options: {
        responsive: true,
        spanGaps: false,
        maintainAspectRatio: false,
        elements: {
          line: {
            tension: 0.4,
          },
        },
        plugins: {
          filler: {
            propagate: false,
          },
          legend: {
            display: true,
          },
          title: {
            display: false,
          },
          tooltip: {
            position: 'nearest',
          },
        },
        scales: {
          x: {
            type: 'timeseries',
            time: {
              unit: 'minute',
            },
          },
          y: {
            ticks: {
              stepSize: 1,
            },
          },
        },
      },
    });

    this.areaChart.update();
  }
}