<commit_before>import React from "react";
import I18n from "i18n-js";
// This fixes a bug in Rickshaw
window.jQuery = undefined;
import Rickshaw from "rickshaw";

import { getDecisions } from "../api";

class Decisions extends React.Component {

  constructor() {
    super();
    this.state = {
      avg: {},
      decisions: []
    };
  }

  componentWillMount() {
    getDecisions().then(decisions => this.setState({ decisions }, () => this.initGraph()));
  }

  average(arr) {
    return arr.map(o => {
      return o.y;
    }).filter(n => {
      return n !== 0;
    }).reduce((prev, curr, i, arr) => {
      const total = prev + curr;
      return i === arr.length - 1 ? total / arr.length : total;
    }, 0).toFixed(0);
  }

  initGraph() {
    const decisions = this.state.decisions;
    const total = [];
    const pdp = [];
    const teams = [];
    const sab = [];
    decisions.forEach((decision, index) => {
      const dec = JSON.parse(decision.decisionJson);
      total.push({ x: index + 1, y: dec.responseTimeMs });
      const yTeams = dec.pipResponses["teams_pip"] || 0;
      teams.push({ x: index + 1, y: yTeams });
      const ySab = dec.pipResponses["sab_pip"] || 0;
      sab.push({ x: index + 1, y: ySab });
      pdp.push({ x: index + 1, y: dec.responseTimeMs - yTeams - ySab });
    });
    this.setState({
      avg: {
        total: this.average(total),
        sab: this.average(sab),
        teams: this.average(teams),
        pdp: this.average(pdp)
      }
    });
    const graph = new Rickshaw.Graph({
      element: document.querySelector("#chart"),
      width: document.getElementById("chart").offsetWidth,//* 2,
      height: 400,
      renderer: "bar",
      stroke: true,
      preserve: true,
      series: [{
        data: pdp,
        color: "#4DB3CF",//$blue
        name: "PDP internal"
      }, {
        data: teams,
        color: "#519B00",//$green
        name: "Teams PIP"
      }, {
        data: sab,
        color: "#ec9a0a",//$orange
        name: "SAB PIP"
      }]
    });

    const formatX = function(n) {
      return n;
    };
    const formatY = function(n) {
      return n + "ms";
    };

    new Rickshaw.Graph.Axis.X({
      graph: graph,
      orientation: "bottom",
      element: document.getElementById("x_axis"),
      pixelsPerTick: 150,
      tickFormat: formatX
    });
    new Rickshaw.Graph.Axis.Y({
      graph: graph,
      orientation: "left",
      tickFormat: formatY,
      pixelsPerTick: 75,
      element: document.getElementById("y_axis")
    });
    graph.render();

    new Rickshaw.Graph.HoverDetail({
      graph: graph,
      xFormatter: function(x) {
        return new Date(decisions[x - 1].created).toLocaleDateString();
      },
      yFormatter: function(y) {
        return y === null ? y : y.toFixed(0) + "ms";
      }
    });

    const legend = new Rickshaw.Graph.Legend({
      graph: graph,
      element: document.getElementById("legend")
    });

    new Rickshaw.Graph.Behavior.Series.Toggle({
      graph: graph,
      legend: legend
    });<commit_msg>Trying to improve chart readability<commit_after>import React from "react";
import I18n from "i18n-js";
// This fixes a bug in Rickshaw
window.jQuery = undefined;
import Rickshaw from "rickshaw";

import { getDecisions } from "../api";

class Decisions extends React.Component {

  constructor() {
    super();
    this.state = {
      avg: {},
      decisions: []
    };
  }

  componentWillMount() {
    getDecisions().then(decisions => this.setState({ decisions }, () => this.initGraph()));
  }

  average(arr) {
    return arr.map(o => {
      return o.y;
    }).filter(n => {
      return n !== 0;
    }).reduce((prev, curr, i, arr) => {
      const total = prev + curr;
      return i === arr.length - 1 ? total / arr.length : total;
    }, 0).toFixed(0);
  }

  initGraph() {
    const decisions = this.state.decisions;
    const total = [];
    const pdp = [];
    const teams = [];
    const sab = [];
    decisions.forEach(decision => {
      const dec = JSON.parse(decision.decisionJson);
      total.push({ x: decision.created / 1000, y: dec.responseTimeMs });
      const yTeams = dec.pipResponses["teams_pip"] || 0;
      teams.push({ x: decision.created / 1000, y: yTeams });
      const ySab = dec.pipResponses["sab_pip"] || 0;
      sab.push({ x: decision.created / 1000, y: ySab });
      pdp.push({ x: decision.created / 1000, y: dec.responseTimeMs - yTeams - ySab });
    });
    this.setState({
      avg: {
        total: this.average(total),
        sab: this.average(sab),
        teams: this.average(teams),
        pdp: this.average(pdp)
      }
    });
    const graph = new Rickshaw.Graph({
      element: document.querySelector("#chart"),
      width: document.getElementById("chart").offsetWidth,//* 2,
      height: 400,
      renderer: "area",
      stroke: true,
      preserve: true,
      series: [{
        data: pdp,
        color: "#4DB3CF",//$blue
        name: "PDP internal"
      }, {
        data: teams,
        color: "#519B00",//$green
        name: "Teams PIP"
      }, {
        data: sab,
        color: "#ec9a0a",//$orange
        name: "SAB PIP"
      }]
    });

    const formatY = function(n) {
      return n + "ms";
    };

    new Rickshaw.Graph.Axis.Time({
      graph: graph,
      orientation: "bottom",
      element: document.getElementById("x_axis"),
      pixelsPerTick: 150,
      timeFixture: new Rickshaw.Fixtures.Time.Local()
    });
    new Rickshaw.Graph.Axis.Y({
      graph: graph,
      orientation: "left",
      tickFormat: formatY,
      pixelsPerTick: 75,
      element: document.getElementById("y_axis")
    });
    graph.render();

    new Rickshaw.Graph.HoverDetail({
      graph: graph,
      xFormatter: function(x) {
        return new Date(x * 1000).toLocaleDateString();
      },
      yFormatter: function(y) {
        return y === null ? y : y.toFixed(0) + "ms";
      }
    });

    const legend = new Rickshaw.Graph.Legend({
      graph: graph,
      element: document.getElementById("legend")
    });

    new Rickshaw.Graph.Behavior.Series.Toggle({
      graph: graph,
      legend: legend
    });
{'fraction_non_alphanumeric': 0.1561483409238777, 'fraction_numerical': 0.013500325309043592, 'mean_word_length': 2.2227463312368974, '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': '6603151', 'n_tokens_mistral': 2078, 'n_tokens_neox': 1982, 'n_words': 461}