<commit_before>/**
 * Created by rimambaks on 5/25/2016.
 */
import {Directive, Input, OnChanges, AfterContentInit, ElementRef} from '@angular/core';

declare let d3;

@Directive({
    'selector': 'myLineChart'
})

export class LineChartDirective implements OnChanges, AfterContentInit {




    // Input and Output variables
    @Input() lineChartData;

    // Private variables
    private host: any; // d3 element referencing host object
    private svg; // representing the svg
    private margin; // Space between the svg borders and the actual chart\
    private width; // Component width
    private height; // Component height
    private xScale; // Component xScale
    private yScale; // Component yScale
    private xAxis; // Component X Axis
    private yAxis; // Component Y Axis
    private axisConfig; // Configuration for both axes
    // private line; // Create line definition

    constructor(elementRef: ElementRef) {
        // Select a DOM element
        let htmlElement: any = elementRef.nativeElement;
        this.host = d3.select(htmlElement);
    };


    ngAfterContentInit(): any {
        this.setup();
        this.buildSVG();

    }


    ngOnChanges(changes: {}): any {
        // Only render when lineChartData exists
        if (this.lineChartData) {
            this.redraw();
        }
    }


    private setup(): void {



        // Create SVG geometry
        this.margin = {top: 60, right: 60, bottom: 60, left: 30};
        this.width = document.getElementById('graphArea').clientWidth - this.margin.right - this.margin.left;
        this.height = 800 - this.margin.top - this.margin.bottom;

        // Scales
        this.xScale = d3.time.scale()
            .range([this.margin.left, this.width - this.margin.right]);

        this.yScale = d3.scale.linear()
            .range([this.height - this.margin.bottom, this.margin.top]);

        // Axes
        this.xAxis = d3.svg.axis()
            .scale(this.xScale)
            .orient('bottom')
            .tickFormat(d3.time.format('%d-%b-%Y'));

        this.yAxis = d3.svg.axis()
            .scale(this.yScale)
            .orient('left');

        // Axis config
        this.axisConfig = [
            {axis: this.xAxis, dx: 0, dy: (this.height - this.margin.bottom), clazz: 'x'},
            {axis: this.yAxis, dx: this.margin.left, dy: 0, clazz: 'y'}
        ];

        // // Create line definition
        // this.line = d3.svg.line()
        //     .interpolate('cardinal')
        //     .x(d => this.xScale(d.values.date) + this.xScale.rangeBand() / 2)
        //     .y(d => this.yScale(d.values.value));

    };

    private buildSVG(): void {

        // Build the SVG container
        this.svg = this.host.append('svg')
            .attr('width', this.width + this.margin.right + this.margin.left)
            .attr('height', this.height + this.margin.top + this.margin.bottom)
            .attr('class', 'myLineChart')
            .append('g')
            .attr('transform', `translate(${this.margin.left},${this.margin.top} )`);

    };

    private redraw(): void {

        // set color scale

        let color = d3.scale.category20();

        let minDateValue = (d3.min(this.lineChartData, function (d) {
            // return d.values;
            return d3.min(d.values, function (z) {
                return z.date;
            });
        }));

        let maxDataValue = (d3.max(this.lineChartData, function (d) {
            // return d.values;
            return d3.max(d.values, function (z) {
                return z.date;
            });
        }));

        let maxValue = (d3.max(this.lineChartData, function (d) {
            // return d.values;
            return d3.max(d.values, function (z) {
                return z.value;
            });
        }));

        // Setting Axes domain
        // let timeFormat2 = d3.time.format('%Y-%m-%d');
        this.xScale.domain([minDateValue, maxDataValue]);
        this.yScale.domain([0, maxValue]);

        let pointLine = d3.svg.line()
            .interpolate('basis')
            .x(d => this.xScale(new Date(+ d.date)))
            .y(d => this.yScale(d.value));


        d3.selectAll('.line-graph').style('opacity', '1e-6').remove();

        // Define lines
        let lines = this.svg.selectAll('.line-graph')
            .data(this.lineChartData);

        // Bind the data)
        lines.enter()
            .append('g')
            .attr('class', 'line-graph');

        let path = lines.append('path')
            .datum(d => d.values)
            .style('stroke', function (d, i) { // Add dynamically
                console.log(color(d[i]));
                // console.log(d.color);
                return color(i.toString());
            })
            .attr('d', (d) => {
                    return pointLine(d);
                }
            );

        // append cicle hhi huhu
        let circles = lines.selectAll('circle')
            .data(d => d.values);

        circles.enter().append('circle')
            .attr('r', '3');

        circles.each((d) => {
            // let color1 = d3.select(d.parentElement).style('stoke');
            d3.select(this)
                .attr('cx', this.xScale(+ d.date))
                .attr('cy', this.yScale(d.value))
                .attr('fill', 'red');


        });

        // Bind axis data to axis
        let axis = this.svg.selectAll('g.axis')
            .data(this.axisConfig);
<commit_msg>goelocation finder<commit_after>/**
 * Created by rimambaks on 5/25/2016.
 */
import {Directive, Input, OnChanges, AfterContentInit, ElementRef} from '@angular/core';

declare let d3;

@Directive({
    'selector': 'myLineChart'
})

export class LineChartDirective implements OnChanges, AfterContentInit {




    // Input and Output variables
    @Input() lineChartData;

    // Private variables
    private host: any; // d3 element referencing host object
    private svg; // representing the svg
    private margin; // Space between the svg borders and the actual chart\
    private width; // Component width
    private height; // Component height
    private xScale; // Component xScale
    private yScale; // Component yScale
    private xAxis; // Component X Axis
    private yAxis; // Component Y Axis
    private axisConfig; // Configuration for both axes
    // private line; // Create line definition

    constructor(elementRef: ElementRef) {
        // Select a DOM element
        let htmlElement: any = elementRef.nativeElement;
        this.host = d3.select(htmlElement);
    };


    ngAfterContentInit(): any {
        this.setup();
        this.buildSVG();

    }


    ngOnChanges(changes: {}): any {
        // Only render when lineChartData exists
        if (this.lineChartData) {
            this.redraw();
        }
    }


    private setup(): void {



        // Create SVG geometry
        this.margin = {top: 60, right: 60, bottom: 60, left: 30};
        this.width = document.getElementById('graphArea').clientWidth - this.margin.right - this.margin.left;
        this.height = 800 - this.margin.top - this.margin.bottom;

        // Scales
        this.xScale = d3.time.scale()
            .range([this.margin.left, this.width - this.margin.right]);

        this.yScale = d3.scale.linear()
            .range([this.height - this.margin.bottom, this.margin.top]);

        // Axes
        this.xAxis = d3.svg.axis()
            .scale(this.xScale)
            .orient('bottom')
            .tickFormat(d3.time.format('%d-%b-%Y'));

        this.yAxis = d3.svg.axis()
            .scale(this.yScale)
            .orient('left');

        // Axis config
        this.axisConfig = [
            {axis: this.xAxis, dx: 0, dy: (this.height - this.margin.bottom), clazz: 'x'},
            {axis: this.yAxis, dx: this.margin.left, dy: 0, clazz: 'y'}
        ];

        // // Create line definition
        // this.line = d3.svg.line()
        //     .interpolate('cardinal')
        //     .x(d => this.xScale(d.values.date) + this.xScale.rangeBand() / 2)
        //     .y(d => this.yScale(d.values.value));

    };

    private buildSVG(): void {

        // Build the SVG container
        this.svg = this.host.append('svg')
            .attr('width', this.width + this.margin.right + this.margin.left)
            .attr('height', this.height + this.margin.top + this.margin.bottom)
            .attr('class', 'myLineChart')
            .append('g')
            .attr('transform', `translate(${this.margin.left},${this.margin.top} )`);

    };

    private redraw(): void {

        // set color scale

        let color = d3.scale.category20();

        let minDateValue = (d3.min(this.lineChartData, function (d) {
            // return d.values;
            return d3.min(d.values, function (z) {
                return z.date;
            });
        }));

        let maxDataValue = (d3.max(this.lineChartData, function (d) {
            // return d.values;
            return d3.max(d.values, function (z) {
                return z.date;
            });
        }));

        let maxValue = (d3.max(this.lineChartData, function (d) {
            // return d.values;
            return d3.max(d.values, function (z) {
                return z.value;
            });
        }));

        // Setting Axes domain
        // let timeFormat2 = d3.time.format('%Y-%m-%d');
        this.xScale.domain([minDateValue, maxDataValue]);
        this.yScale.domain([0, maxValue]);

        let pointLine = d3.svg.line()
            .x(d => this.xScale(new Date(+ d.date)))
            .y(d => this.yScale(d.value));


        d3.selectAll('.line-graph').style('opacity', '1e-6').remove();

        // Define lines
        let lines = this.svg.selectAll('.line-graph')
            .data(this.lineChartData);

        // Bind the data)
        lines.enter()
            .append('g')
            .style('stroke', function (d, i) { // Add dynamically
                // console.log(d.color);
                return color(i.toString());
            })
            .attr('class', 'line-graph');

        let path = lines.append('path')
            .datum(d => d.values)
            .attr('d', (d) => {
                    return pointLine(d);
                }
            );

        // append cicle hhi huhu
        let circles = lines.selectAll('circle')
            .data(d => d.values);

        circles.enter().append('circle')
            .attr('r', '3');

        let _xScale = this.xScale;
        let _yScale = this.yScale;

        circles.each(function (d) {
            let color1 = d3.select(this.parentElement).style('stroke');
            d3.select(this)
                .attr('cx', _xScale(+ d.date))
                .attr('cy', _yScale(d.value))
                .attr('fill', color1);


        });

        // Bind axis data to axis
        let axis = this.svg.selectAll('g.axis')
            .data(this.axisConfig);

{'fraction_non_alphanumeric': 0.14826700898587933, 'fraction_numerical': 0.009260957271226847, 'mean_word_length': 1.7118349080059672, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 18, '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': '115024', 'n_tokens_mistral': 3342, 'n_tokens_neox': 3187, 'n_words': 714}