<commit_before>import { Component, Input, OnInit, OnChanges, SimpleChanges, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { Env } from '../core/core.env';
import { GROUPTYPE_GEOCOUNTRY, GROUPTYPE_GEOMETRO, getGroupName, RouterParams, PodcastTotals, Rank } from '../ngrx/index';
import { fromEvent } from 'rxjs/observable/fromEvent';
import { map } from 'rxjs/operators/map';
import { distinctUntilChanged } from 'rxjs/operators';

declare const google: any;

@Component({
  selector: 'metrics-geochart-map',
  template: `
    <div #geo></div>
    <prx-spinner overlay="true" *ngIf="routerParams?.filter && nestedDataLoading"></prx-spinner>
  `
})

export class GeochartMapComponent implements OnInit, OnChanges, AfterViewInit {
  private static googleLoaded: boolean;
  @ViewChild('geo') el: ElementRef;
  @Input() routerParams: RouterParams;
  @Input() data: PodcastTotals;
  @Input() nestedData: PodcastTotals;
  @Input() nestedDataLoading: boolean;
  @Input() nestedDataLoaded: boolean;
  windowSize: {width: number, height: number};
  colors = ['#e5f5fb', '#a6cee3', '#01a0dc', '#008fc5', '#0089bd', '#1f78b4'];

  ngOnInit() {
    if (!GeochartMapComponent.googleLoaded && Env.GOOGLE_API_KEY) {
      GeochartMapComponent.googleLoaded = true;
      google.charts.load('current', {
        packages: ['geochart'],
        mapsApiKey: Env.GOOGLE_API_KEY
      });
      google.charts.setOnLoadCallback(this.drawMap.bind(this));
    }
  }

  ngOnChanges(changes: SimpleChanges) {
    this.drawMap();
  }

  ngAfterViewInit() {
    this.windowSize = {width: window.innerWidth, height: window.innerHeight};
    this.drawMap();
    fromEvent(window, 'resize').pipe(
      map((event: Event) => {
        this.windowSize = {width: event.target['innerWidth'], height: event.target['innerHeight']};
        return this.windowSize;
      }),
      distinctUntilChanged()).subscribe(() => this.drawMap());
  }

  getMapWidthOrHeight(): {width?: number, height?: number} {
    if (this.windowSize && this.windowSize.width && this.windowSize.width <= 768) {
      return {width: this.windowSize.width - 40};
    } else {
      return {height: 320};
    }
  }

  toGoogleDataTable(ranks: Rank[]) {
    const data = new google.visualization.DataTable();
    data.addColumn('string', getGroupName(this.routerParams.metricsType, this.routerParams.group));
    data.addColumn('number', 'Downloads');
    data.addRows(ranks.map(d => [{v: d.code, f: d.label}, d.total]));
    return data;
  }

  drawMap() {
    if (GeochartMapComponent.googleLoaded && google.visualization) {
      const options = {
        displayMode: 'region',
        colorAxis: {colors: this.colors},
        legend: 'none'
      };
      const { width, height } = this.getMapWidthOrHeight();
      if (width) {
        options['width'] = width;
      }
      if (height) {
        options['height'] = height;
      }

      let data;
      if (this.routerParams.group === GROUPTYPE_GEOCOUNTRY && this.routerParams.filter && this.nestedData && this.nestedData.ranks) {
        options['region'] = this.routerParams.filter;
        options['resolution'] = 'provinces';
        data = this.toGoogleDataTable(this.nestedData.ranks);
      } else if (this.routerParams.group === GROUPTYPE_GEOCOUNTRY && this.data && this.data.ranks) {
        options['region'] = 'world';
        data = this.toGoogleDataTable(this.data.ranks);
      } else if (this.routerParams.group === GROUPTYPE_GEOMETRO && this.data && this.data.ranks) {
        options['region'] = 'US';
        options['resolution'] = 'metros';
        data = this.toGoogleDataTable(this.data.ranks);
      }

      if (data) {
        const chart = new google.visualization.GeoChart(this.el.nativeElement);
        chart.draw(data, options);
      }
    }
  }
}
<commit_msg>quick refactor on geochart options width and height<commit_after>import { Component, Input, OnInit, OnChanges, SimpleChanges, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { Env } from '../core/core.env';
import { GROUPTYPE_GEOCOUNTRY, GROUPTYPE_GEOMETRO, getGroupName, RouterParams, PodcastTotals, Rank } from '../ngrx/index';
import { fromEvent } from 'rxjs/observable/fromEvent';
import { map } from 'rxjs/operators/map';
import { distinctUntilChanged } from 'rxjs/operators';

declare const google: any;

@Component({
  selector: 'metrics-geochart-map',
  template: `
    <div #geo></div>
    <prx-spinner overlay="true" *ngIf="routerParams?.filter && nestedDataLoading"></prx-spinner>
  `
})

export class GeochartMapComponent implements OnInit, OnChanges, AfterViewInit {
  private static googleLoaded: boolean;
  @ViewChild('geo') el: ElementRef;
  @Input() routerParams: RouterParams;
  @Input() data: PodcastTotals;
  @Input() nestedData: PodcastTotals;
  @Input() nestedDataLoading: boolean;
  @Input() nestedDataLoaded: boolean;
  windowSize: {width: number, height: number};
  colors = ['#e5f5fb', '#a6cee3', '#01a0dc', '#008fc5', '#0089bd', '#1f78b4'];

  ngOnInit() {
    if (!GeochartMapComponent.googleLoaded && Env.GOOGLE_API_KEY) {
      GeochartMapComponent.googleLoaded = true;
      google.charts.load('current', {
        packages: ['geochart'],
        mapsApiKey: Env.GOOGLE_API_KEY
      });
      google.charts.setOnLoadCallback(this.drawMap.bind(this));
    }
  }

  ngOnChanges(changes: SimpleChanges) {
    this.drawMap();
  }

  ngAfterViewInit() {
    this.windowSize = {width: window.innerWidth, height: window.innerHeight};
    this.drawMap();
    fromEvent(window, 'resize').pipe(
      map((event: Event) => {
        this.windowSize = {width: event.target['innerWidth'], height: event.target['innerHeight']};
        return this.windowSize;
      }),
      distinctUntilChanged()).subscribe(() => this.drawMap());
  }

  getMapWidthOrHeight(): {width?: number, height?: number} {
    if (this.windowSize && this.windowSize.width && this.windowSize.width <= 768) {
      return {width: this.windowSize.width - 40};
    } else {
      return {height: 320};
    }
  }

  toGoogleDataTable(ranks: Rank[]) {
    const data = new google.visualization.DataTable();
    data.addColumn('string', getGroupName(this.routerParams.metricsType, this.routerParams.group));
    data.addColumn('number', 'Downloads');
    data.addRows(ranks.map(d => [{v: d.code, f: d.label}, d.total]));
    return data;
  }

  drawMap() {
    if (GeochartMapComponent.googleLoaded && google.visualization) {
      const options = {
        displayMode: 'region',
        colorAxis: {colors: this.colors},
        legend: 'none',
        ...this.getMapWidthOrHeight()
      };

      let data;
      if (this.routerParams.group === GROUPTYPE_GEOCOUNTRY && this.routerParams.filter && this.nestedData && this.nestedData.ranks) {
        options['region'] = this.routerParams.filter;
        options['resolution'] = 'provinces';
        data = this.toGoogleDataTable(this.nestedData.ranks);
      } else if (this.routerParams.group === GROUPTYPE_GEOCOUNTRY && this.data && this.data.ranks) {
        options['region'] = 'world';
        data = this.toGoogleDataTable(this.data.ranks);
      } else if (this.routerParams.group === GROUPTYPE_GEOMETRO && this.data && this.data.ranks) {
        options['region'] = 'US';
        options['resolution'] = 'metros';
        data = this.toGoogleDataTable(this.data.ranks);
      }

      if (data) {
        const chart = new google.visualization.GeoChart(this.el.nativeElement);
        chart.draw(data, options);
      }
    }
  }
}

{'fraction_non_alphanumeric': 0.15139813581890812, 'fraction_numerical': 0.007190412782956059, 'mean_word_length': 3.543859649122807, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6630553', 'n_tokens_mistral': 2451, 'n_tokens_neox': 2372, 'n_words': 460}