<commit_before>/**
 * @author <NAME> <<EMAIL>>
 * @license
 * Copyright <NAME> All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file
 */

import {
  Component,
  ElementRef,
  Input,
  OnChanges,
  OnInit,
  ViewChild
} from '@angular/core';
import * as d3 from 'd3';
import { ChartService } from '../shared/chart.service';

@Component({
  selector: 'app-barchart',
  templateUrl: './barchart.component.html',
  styleUrls: ['./barchart.component.scss'],
})
export class BarchartComponent implements OnInit, OnChanges {

  /**
   * Obtain the settings for making the chart here and define defaults if none
   * are specified.
   */
  @Input() width = 400;
  @Input() height = 600;
  @Input() margins = {'top': 50, 'right': 50, 'bottom': 50, 'left': 50};
  @Input() data: {}[];
  @Input() x: string;
  @Input() y: string;
  chartHeight: number;
  chartWidth: number;
  chart: d3.Selection<any, any, any, any>;
  xScale: d3.ScaleBand<any>;
  yScale: d3.ScaleLinear<any, any>;
  xData: string[];
  yData: number[];

  /* Get private instance of template to avoid collisions with other charts */
  @ViewChild('barchart') private chartContainer: ElementRef;

  constructor(private chartService: ChartService) {
  }

  ngOnInit() {
    /*Check if data is given if not die*/
    if (this.data == null) {
      throw new Error('Missing Data!');
    }

    this.chartWidth = this.width - this.margins.left - this.margins.right;
    this.chartHeight = this.height - this.margins.top - this.margins.bottom;

    this.chart = this.chartService.makeChartCanvas(this.chartContainer,
      this.width, this.height, this.margins);

    this.draw();
  }

  /**
   * This life cycle hook tells angular to detect any changes and to adjust
   * the chart accordingly and also serves to separate out different
   * instances of the same chart
   * */
  ngOnChanges() {
    this.chartWidth = this.width - this.margins.left - this.margins.right;
    this.chartHeight = this.height - this.margins.top - this.margins.bottom;
  }

  /**
   * This is the main method to render the bar chart it operates on the d3
   * selection supplied and appends the scales, bars to the selection.
   *
   * @param {d3.Selection} chart - A d3 selection object
   */
  private draw() {
    this.xData = this.getData(this.x);
    this.yData = this.getData(this.y);

    this.xScale = d3.scaleBand()
      .domain(this.xData)
      .rangeRound([0, this.chartWidth]);

    this.yScale = d3.scaleLinear()
      .domain([0, d3.max(this.yData)])
      .rangeRound([this.chartHeight, 0]);

    this.makeAxis('x', this.xScale);
    this.makeAxis('y', this.yScale);

    this.chart.selectAll('.bar')
      .data(this.data)
      .enter()
      .append('rect')
      .attr('class', 'bar')
      .attr('width', this.xScale.bandwidth())
      .attr('height', d => this.chartHeight - this.yScale(d[this.y]))
      .attr('y', d => this.yScale(d[this.y]))
      .attr('x', d => this.xScale(d[this.x]));

  }

  /**
   * This makes the axes for the chart
   *
   * @param {string} axis - the axis type to make
   * @param {d3.Scale<any>} scale - d3 scale object to scale svg and data<commit_msg>#2 added transitions<commit_after>/**
 * @author <NAME> <<EMAIL>>
 * @license
 * Copyright <NAME> All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file
 */

import { Component, ElementRef, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
import * as d3 from 'd3';
import { ChartService } from '../shared/chart.service';

@Component({
  selector: 'app-barchart',
  templateUrl: './barchart.component.html',
  styleUrls: ['./barchart.component.scss'],
})
export class BarchartComponent implements OnInit, OnChanges {

  /**
   * Obtain the settings for making the chart here and define defaults if none
   * are specified.
   */
  @Input() width = 400;
  @Input() height = 600;
  @Input() margins = {'top': 50, 'right': 50, 'bottom': 50, 'left': 50};
  @Input() data: {}[];
  @Input() x: string;
  @Input() y: string;
  chartHeight: number;
  chartWidth: number;
  chart: d3.Selection<any, any, any, any>;
  xScale: d3.ScaleBand<any>;
  yScale: d3.ScaleLinear<any, any>;
  xData: string[];
  yData: number[];

  /* Get private instance of template to avoid collisions with other charts */
  @ViewChild('barchart') private chartContainer: ElementRef;

  constructor(private chartService: ChartService) {
  }

  ngOnInit() {
    /*Check if data is given if not die*/
    if (this.data == null) {
      throw new Error('Missing Data!');
    }

    this.chartWidth = this.width - this.margins.left - this.margins.right;
    this.chartHeight = this.height - this.margins.top - this.margins.bottom;

    this.chart = this.chartService.makeChartCanvas(this.chartContainer,
      this.width, this.height, this.margins);

    this.draw();
  }

  /**
   * This life cycle hook tells angular to detect any changes and to adjust
   * the chart accordingly and also serves to separate out different
   * instances of the same chart
   * */
  ngOnChanges() {
    this.chartWidth = this.width - this.margins.left - this.margins.right;
    this.chartHeight = this.height - this.margins.top - this.margins.bottom;
  }

  /**
   * This is the main method to render the bar chart it operates on the d3
   * selection supplied and appends the scales, bars to the selection.
   *
   */
  private draw() {
    this.xData = this.getData(this.x);
    this.yData = this.getData(this.y);

    this.xScale = d3.scaleBand()
      .domain(this.xData)
      .rangeRound([0, this.chartWidth]);

    this.yScale = d3.scaleLinear()
      .domain([0, d3.max(this.yData)])
      .rangeRound([this.chartHeight, 0]);

    this.makeAxis('x', this.xScale);
    this.makeAxis('y', this.yScale);

    /**
     * For transitions, the initial height and y have to be set to the bottom of the chart
     * before rendering the actual data
     */
    this.chart.selectAll('.bar')
      .data(this.data)
      .enter()
      .append('rect')
      .attr('height', 0)
      .attr('y', this.chartHeight)
      .transition()
      .ease(d3.easeLinear)
      .duration(1200)
      .attr('class', 'bar')
      .attr('width', this.xScale.bandwidth())
      .attr('x', d => this.xScale(d[this.x]))
      .attr('y', d => this.yScale(d[this.y]))
      .attr('height', d => this.chartHeight - this.yScale(d[this.y]));


  }

  /**
   * This makes the axes for the chart
   *
   * @param {string} axis - the axis type to make
   * @param {d3.Scale<any>} scale - d3 scale object to scale svg and data
{'fraction_non_alphanumeric': 0.14559155990957046, 'fraction_numerical': 0.009796533534287867, 'mean_word_length': 3.014519056261343, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 25, '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': '5986646', 'n_tokens_mistral': 2223, 'n_tokens_neox': 2165, 'n_words': 621}