<commit_before>import {Component, OnInit} from "angular2/core";

var Chart = require('chart.js/Chart');

@Component({
  selector: 'charts',
  template: require('./charts.html'),
  styles: [require('./charts.scss')],
  providers: [],
  directives: [],
  pipes: []
})
export class Charts implements OnInit {

  constructor() {
    // Do stuff
  }

  ngOnInit() {
    console.log('Hello Charts');

    var sharpLineData = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
        {
          label: "Example dataset",
          fillColor: "rgba(77, 137, 8, 0.5)",
          strokeColor: "rgba(77, 137, 8, 0.7)",
          pointColor: "rgba(77, 137, 8, 1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(98,203,49,1)",
          data: [33, 48, 40, 19, 54, 27, 54]
        }
      ]
    };

    var sharpLineOptions = {
      scaleShowGridLines: true,
      scaleGridLineColor: "rgba(0,0,0,.05)",
      scaleGridLineWidth: 1,
      bezierCurve: false,
      pointDot: true,
      pointDotRadius: 4,
      pointDotStrokeWidth: 1,
      pointHitDetectionRadius: 20,
      datasetStroke: true,
      datasetStrokeWidth: 1,
      datasetFill: true,
      responsive: true
    };

    var element:any = document.getElementById("sharpLineOptions");
    var ctx = element.getContext("2d");
    new Chart(ctx).Line(sharpLineData, sharpLineOptions);

  }

}<commit_msg>responsive chart<commit_after>import {Component, OnInit} from "angular2/core";

var Chart = require('chart.js/Chart');
var JQuery = require('jquery');

@Component({
  selector: 'charts',
  template: require('./charts.html'),
  styles: [require('./charts.scss')],
  providers: [],
  directives: [],
  pipes: []
})
export class Charts implements OnInit {

  constructor() {
    // Do stuff
  }

  ngOnInit() {
    console.log('Hello Charts');

    var sharpLineData = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
        {
          label: "Example dataset",
          fillColor: "rgba(77, 137, 8, 0.5)",
          strokeColor: "rgba(77, 137, 8, 0.7)",
          pointColor: "rgba(77, 137, 8, 1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(98,203,49,1)",
          data: [33, 48, 40, 19, 54, 27, 54]
        }
      ]
    };

    var sharpLineOptions = {
      scaleShowGridLines: true,
      scaleGridLineColor: "rgba(0,0,0,.05)",
      scaleGridLineWidth: 1,
      bezierCurve: false,
      pointDot: true,
      pointDotRadius: 4,
      pointDotStrokeWidth: 1,
      pointHitDetectionRadius: 20,
      datasetStroke: true,
      datasetStrokeWidth: 1,
      datasetFill: true,
      responsive: true
    };

    var element:any = document.getElementById("sharpLineOptions");
    var ctx = element.getContext("2d");
    var newChart = new Chart(ctx).Line(sharpLineData, sharpLineOptions);

    JQuery(window).bind("resize", function () {
      setTimeout(function () {
        newChart.resize(newChart.render, true);
      }, 50);
    });
  }
}
{'fraction_non_alphanumeric': 0.1554140127388535, 'fraction_numerical': 0.0375796178343949, 'mean_word_length': 2.6996466431095407, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '6628304', 'n_tokens_mistral': 1122, 'n_tokens_neox': 1000, 'n_words': 226}