<commit_before>import { Component, Input } from '@angular/core'
import * as d3 from 'd3'
import { lineChunked } from 'd3-line-chunked'

import { AppConfig } from '../../../shared/utils/config'
import { ChartBaseComponent } from '../chart-base/chart-base.component'

@Component({
  selector: 'app-chart-base-line',
  templateUrl: '../charts.common.html',
  styleUrls: ['./chart-base-line.component.scss']
})
export class ChartBaseLineComponent extends ChartBaseComponent {
  @Input() gradientEnabled = false
  @Input() gradientColors = AppConfig.charts.GRADIENT_COLORS
  @Input() gradientStops = AppConfig.charts.GRADIENT_STOPS

  data: number[]
  dates: Date[]
  svg: any
  chart: any
  width: number
  height: number
  xAxis: any
  yAxis: any
  xScale: any
  yScale: any
  line: any
  lineEl: any
  gradient: any
  lineChunked: any

  init() {
    // Add HR Gradient
    if (this.gradientEnabled) {
      this.chart.classed('hr-gradient', true)

      this.gradient = this.svg.append('linearGradient')
      this.gradient
        .attr('id', 'hr-gradient')
        .attr('gradientUnits', 'userSpaceOnUse')
        .attr('x1', 0)
        .attr('x2', 0)
        .selectAll('stop')
        .data(this.gradientColors)
        .enter()
        .append('stop')
        .attr('offset', d => d.offset)
        .attr('stop-color', d => d.color)
    }

    this.lineEl = this.chart.append('g')

    super.init()
  }

  draw() {
    const data = this.dates.map((date, i) => ({ date, value: this.data[i] }))

    this.xScale = d3
      .scaleTime()
      .range([0, this.width])
      .domain(d3.extent(this.dates))

    this.yScale = d3
      .scaleLinear()
      .range([this.height, 0])
      .domain(d3.extent(this.data))

    this.xAxis.remove()
    this.yAxis.call(d3.axisLeft(this.yScale).tickSize(-this.width))

    // Add HR Gradient
    if (this.gradientEnabled) {
      this.gradient
        .attr('y1', this.yScale(this.gradientStops.y1))
        .attr('y2', this.yScale(this.gradientStops.y2))
    }

    this.lineChunked = lineChunked()
      .x(d => this.xScale(d.date))
      .y(d => this.yScale(d.value))
      .curve(d3.curveLinear)
      .defined(d => d.value)

    this.lineEl.selectAll('.main').remove()

    this.lineEl
      .append('g')
      .datum(data)
      .call(this.lineChunked)
      .attr('class', 'main')
  }
}<commit_msg>optimise draw<commit_after>import { Component, Input } from '@angular/core'
import * as d3 from 'd3'
import { lineChunked } from 'd3-line-chunked'

import { AppConfig } from '../../../shared/utils/config'
import { ChartBaseComponent } from '../chart-base/chart-base.component'

@Component({
  selector: 'app-chart-base-line',
  templateUrl: '../charts.common.html',
  styleUrls: ['./chart-base-line.component.scss']
})
export class ChartBaseLineComponent extends ChartBaseComponent {
  @Input() gradientEnabled = false
  @Input() gradientColors = AppConfig.charts.GRADIENT_COLORS
  @Input() gradientStops = AppConfig.charts.GRADIENT_STOPS

  data: number[]
  dates: Date[]
  svg: any
  chart: any
  width: number
  height: number
  xAxis: any
  yAxis: any
  xScale: any
  yScale: any
  line: any
  lineGroup: any
  gradient: any
  lineChunked: any

  init() {
    // Add HR Gradient
    if (this.gradientEnabled) {
      this.chart.classed('hr-gradient', true)

      this.gradient = this.svg.append('linearGradient')
      this.gradient
        .attr('id', 'hr-gradient')
        .attr('gradientUnits', 'userSpaceOnUse')
        .attr('x1', 0)
        .attr('x2', 0)
        .selectAll('stop')
        .data(this.gradientColors)
        .enter()
        .append('stop')
        .attr('offset', d => d.offset)
        .attr('stop-color', d => d.color)
    }

    this.lineGroup = this.chart.append('g')

    // TODO: Add this as an option for x and y (hasXAxis)
    this.xAxis.remove()

    this.lineChunked = lineChunked()
      .x(d => this.xScale(d.date))
      .y(d => this.yScale(d.value))
      .curve(d3.curveLinear)
      .defined(d => d.value)

    super.init()
  }

  draw() {
    this.xScale = d3
      .scaleTime()
      .range([0, this.width])
      .domain(d3.extent(this.dates))

    this.yScale = d3
      .scaleLinear()
      .range([this.height, 0])
      .domain(d3.extent(this.data, (d: any) => d.value))

    this.yAxis.call(d3.axisLeft(this.yScale).tickSize(-this.width))

    // Add HR Gradient
    if (this.gradientEnabled) {
      this.gradient
        .attr('y1', this.yScale(this.gradientStops.y1))
        .attr('y2', this.yScale(this.gradientStops.y2))
    }

    this.lineGroup.selectAll('.line').remove()

    this.lineGroup
      .datum(this.data)
      .call(this.lineChunked)
      .attr('class', 'line')
  }
}
{'fraction_non_alphanumeric': 0.16314779270633398, 'fraction_numerical': 0.008104073363190446, 'mean_word_length': 2.624420401854714, 'pattern_counts': {'":': 0, '<': 3, '<?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': '680120', 'n_tokens_mistral': 1684, 'n_tokens_neox': 1624, 'n_words': 309}