<commit_before>import { Component,
         OnChanges,
         OnInit,
         AfterContentInit,
         AfterContentChecked,
         Input,
         Output,
         EventEmitter,
         ElementRef,
         Renderer,
         SimpleChanges } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { CloudData, CloudOptions } from './tag-cloud.interfaces';

@Component({
  selector: 'angular-tag-cloud',
  template: '',
  styles: [`
    /* fonts */
    :host {
      font-family: "Helvetica", "Arial", sans-serif;
      font-size: 10px;
      line-height: normal;
    }
    :host /deep/ a:host {
      font-size: inherit;
      text-decoration: none;
    }
    :host /deep/ span.w10 { font-size: 550%; }
    :host /deep/ span.w9 { font-size: 500%; }
    :host /deep/ span.w8 { font-size: 450%; }
    :host /deep/ span.w7 { font-size: 400%; }
    :host /deep/ span.w6 { font-size: 350%; }
    :host /deep/ span.w5 { font-size: 300%; }
    :host /deep/ span.w4 { font-size: 250%; }
    :host /deep/ span.w3 { font-size: 200%; }
    :host /deep/ span.w2 { font-size: 150%; }
    :host /deep/ span.w1 { font-size: 100%; }

    /* colors */
    :host /deep/ a { color: inherit; }
    :host /deep/ a:hover { color: #0df; }
    :host /deep/ a:hover { color: #0cf; }
    :host /deep/ span.w10 { color: #0cf; }
    :host /deep/ span.w9 { color: #0cf; }
    :host /deep/ span.w8 { color: #0cf; }
    :host /deep/ span.w7 { color: #39d; }
    :host /deep/ span.w6 { color: #90c5f0; }
    :host /deep/ span.w5 { color: #90a0dd; }
    :host /deep/ span.w4 { color: #90c5f0; }
    :host /deep/ span.w3 { color: #a0ddff; }
    :host /deep/ span.w2 { color: #99ccee; }
    :host /deep/ span.w1 { color: #aab5f0; }

    /* layout */
    :host {
      color: #09f;
      overflow: hidden;
      position: relative;
      display: block;
    }
    :host /deep/ span { padding: 0; }
  `]
})
export class TagCloudComponent implements OnInit, OnChanges {
  @Input() data: [CloudData];
  @Input() width: number;
  @Input() height: number;
  @Input() overflow: boolean;

  @Output() clicked: EventEmitter<CloudData> = new EventEmitter();
  @Output() afterInit: EventEmitter<any> = new EventEmitter();
  @Output() afterChecked: EventEmitter<any> = new EventEmitter();

  dataArr: Array<CloudData>;
  alreadyPlacedWords: any[] = [];

  options: CloudOptions;

  constructor(
    private el: ElementRef,
    private renderer: Renderer,
    private sanitizer: DomSanitizer
  ) {
    if(!this.width) this.width = 500;
    if(!this.height) this.height = 300;
    if(!this.overflow) this.overflow = true;
  }

  ngOnChanges(changes: SimpleChanges) {
    // values changed, reset cloud
    this.el.nativeElement.innerHTML = '';

    // set value changes8
    if(changes['data']) {
    	this.dataArr = changes['data'].currentValue;
    }

    let width = this.width;
    if(this.el.nativeElement.parentNode.offsetWidth > 0
      && width <= 1
      && width > 0
    ) {
      width = this.el.nativeElement.parentNode.offsetWidth * width;
    }

    // set options
    this.options = {
      step : 2.0,
      aspectRatio : (width / this.height),
      width: width,
      height: this.height,
      center: {
        x: (width / 2.0),
        y: (this.height / 2.0)
      },
      overflow: this.overflow
    };


    // draw the cloud
    this.drawWordCloud();
  }

  ngOnInit() {
    if (!this.data) {
      console.error('angular-tag-cloud: No data passed. Please pass an Array of CloudData');
      return;
    }

    this.renderer.setElementStyle(this.el.nativeElement, 'width', this.options.width + 'px');
    this.renderer.setElementStyle(this.el.nativeElement, 'height', this.options.height + 'px');
  }

  ngAfterContentInit() {
    this.afterInit.emit();
  }

  ngAfterContentChecked() {
    this.afterChecked.emit();
  }

  drawWordCloud () {
    // Sort this.dataArr from the word with the highest weight to the one with the lowest<commit_msg>#16 Adding changes to update the DOM<commit_after>import { Component,
         OnChanges,
         OnInit,
         AfterContentInit,
         AfterContentChecked,
         Input,
         Output,
         EventEmitter,
         ElementRef,
         Renderer,
         SimpleChanges } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { CloudData, CloudOptions } from './tag-cloud.interfaces';

@Component({
  selector: 'angular-tag-cloud',
  template: '',
  styles: [`
    /* fonts */
    :host {
      font-family: "Helvetica", "Arial", sans-serif;
      font-size: 10px;
      line-height: normal;
    }
    :host /deep/ a:host {
      font-size: inherit;
      text-decoration: none;
    }
    :host /deep/ span.w10 { font-size: 550%; }
    :host /deep/ span.w9 { font-size: 500%; }
    :host /deep/ span.w8 { font-size: 450%; }
    :host /deep/ span.w7 { font-size: 400%; }
    :host /deep/ span.w6 { font-size: 350%; }
    :host /deep/ span.w5 { font-size: 300%; }
    :host /deep/ span.w4 { font-size: 250%; }
    :host /deep/ span.w3 { font-size: 200%; }
    :host /deep/ span.w2 { font-size: 150%; }
    :host /deep/ span.w1 { font-size: 100%; }

    /* colors */
    :host /deep/ a { color: inherit; }
    :host /deep/ a:hover { color: #0df; }
    :host /deep/ a:hover { color: #0cf; }
    :host /deep/ span.w10 { color: #0cf; }
    :host /deep/ span.w9 { color: #0cf; }
    :host /deep/ span.w8 { color: #0cf; }
    :host /deep/ span.w7 { color: #39d; }
    :host /deep/ span.w6 { color: #90c5f0; }
    :host /deep/ span.w5 { color: #90a0dd; }
    :host /deep/ span.w4 { color: #90c5f0; }
    :host /deep/ span.w3 { color: #a0ddff; }
    :host /deep/ span.w2 { color: #99ccee; }
    :host /deep/ span.w1 { color: #aab5f0; }

    /* layout */
    :host {
      color: #09f;
      overflow: hidden;
      position: relative;
      display: block;
    }
    :host /deep/ span { padding: 0; }
  `]
})
export class TagCloudComponent implements OnInit, OnChanges {
  @Input() data: [CloudData];
  @Input() width: number;
  @Input() height: number;
  @Input() overflow: boolean;

  @Output() clicked: EventEmitter<CloudData> = new EventEmitter();
  @Output() afterInit: EventEmitter<any> = new EventEmitter();
  @Output() afterChecked: EventEmitter<any> = new EventEmitter();

  dataArr: Array<CloudData>;
  alreadyPlacedWords: any[] = [];

  options: CloudOptions;

  constructor(
    private el: ElementRef,
    private renderer: Renderer,
    private sanitizer: DomSanitizer
  ) {
    if(!this.width) this.width = 500;
    if(!this.height) this.height = 300;
    if(!this.overflow) this.overflow = true;
  }

  ngOnChanges(changes: SimpleChanges) {
    // values changed, reset cloud
    this.el.nativeElement.innerHTML = '';

    // set value changes8
    if(changes['data']) {
    	this.dataArr = changes['data'].currentValue;
    }

    let width = this.width;
    if(this.el.nativeElement.parentNode.offsetWidth > 0
      && width <= 1
      && width > 0
    ) {
      width = this.el.nativeElement.parentNode.offsetWidth * width;
    }

    // set options
    this.options = {
      step : 2.0,
      aspectRatio : (width / this.height),
      width: width,
      height: this.height,
      center: {
        x: (width / 2.0),
        y: (this.height / 2.0)
      },
      overflow: this.overflow
    };

    this.renderer.setElementStyle(this.el.nativeElement, 'width', this.options.width + 'px');
    this.renderer.setElementStyle(this.el.nativeElement, 'height', this.options.height + 'px');
    // draw the cloud
    this.drawWordCloud();
  }

  ngOnInit() {
    if (!this.data) {
      console.error('angular-tag-cloud: No data passed. Please pass an Array of CloudData');
      return;
    }

    this.renderer.setElementStyle(this.el.nativeElement, 'width', this.options.width + 'px');
    this.renderer.setElementStyle(this.el.nativeElement, 'height', this.options.height + 'px');
  }

  ngAfterContentInit() {
    this.afterInit.emit();
  }

  ngAfterContentChecked() {
    this.afterChecked.emit();
  }

  drawWordCloud () {
    // Sort this.dataArr from the word with the highest weight to the one with the lowest
{'fraction_non_alphanumeric': 0.15478239488566511, 'fraction_numerical': 0.023850504057044506, 'mean_word_length': 2.441201353637902, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7218588', 'n_tokens_mistral': 2895, 'n_tokens_neox': 2767, 'n_words': 665}