JSFiddle - React, Tailwind, and code Playground

by Alagar Kamuthurai

JavaScript

import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  Input,
  OnInit,
  Output, SimpleChanges
} from '@angular/core';
import Highcharts, { ChartCallbackFunction } from 'highcharts/highmaps';
import usaMap from '@highcharts/map-collection/countries/us/us-all.geo.json'; // NOSONAR
import { IMapData, IRangeFilter } from '../types/reporting.types';
import { BaseChartComponent } from '../base/base-chart';

@Component({
  selector: 'cmm-compass-map-chart',
  templateUrl: './map-chart.component.html',
  styleUrls: ['./map-chart.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MapChartComponent extends BaseChartComponent implements OnInit {
  private dataInner: IMapData = [['us-none', 0]];

  @Input() data: IMapData = [];

  @Input() showTitle = false;
  @Input() title = '';
  @Input() customFilterShow?: boolean;
  @Output() statesSelected = new EventEmitter < string[] > ();
  @Input() rangeFilters?: IRangeFilter[] = [];
  @Output() rangeFilterChange = new EventEmitter < any > ();

  Highcharts: typeof Highcharts = Highcharts;
  chartConstructor = 'mapChart';
  chart: any; // Will contain a reference to the map chart component.
  chartCallback: ChartCallbackFunction; // Called when the map chart gets created.
  updateFlag = false; // Indicates that the map chart was updated.
  chartOptions: Highcharts.Options | undefined;
  selectedStatesInner?: string[];

  constructor() {
    super();
    this.chartCallback = (chart: any) => {
      // Save chart reference.
      this.chart = chart;
      this.updateChart();
    };
  }


  ngOnChanges(changes: SimpleChanges): void {
    if (changes.data.currentValue) {
      this.dataInner = changes.data.currentValue;
      this.initMap();
    }
  }


  onSelectState(state: string) {
    if (this.selectedStatesInner) {
      /* istanbul ignore else */
      if (!this.selectedStatesInner.includes(state)) {
        this.selectedStatesInner.push(state);
      }
    } else {
     ...