<commit_before>const Plotly = require('react-plotlyjs');
const ReactRedux = require('react-redux');
const React = require('react');

const {
  connect
} = ReactRedux;

const PlotlyGraph = React.createClass({
  render: function() {
    const {
      data = []
    } = this.props;

    const cpu = data.map((d) => Math.floor(d.cpu));
    const datatime = data.map((d, i) => i);

    const graphTypes = [{
      type: 'scatter',
      mode: 'lines+markers'
    }, {
      type: 'bar'
    }];

    const graphs = graphTypes.map((graphType, i) => {
      const data = {
        type: graphType.type,
        mode: graphType.mode,
        x: datatime,
        y: cpu
      };

      const layout = {
        barmode: graphType.mode
      }

      return (
        <Plotly
          key={i}
          layout={layout}
          data={[data]}
        />
      );
    });

    return (
      <div>
        {graphs}
      </div>
    )
  }
});

const mapStateToProps = ({
  data
}) => {
  return {
    data
  };
};

module.exports = connect(mapStateToProps)(PlotlyGraph);<commit_msg>spikes: plotly customisation<commit_after>const Plotly = require('react-plotlyjs');
const ReactRedux = require('react-redux');
const React = require('react');

const {
  connect
} = ReactRedux;

const PlotlyGraph = React.createClass({
  render: function() {
    const {
      data = []
    } = this.props;

    const cpu = data.map((d) => Math.floor(d.cpu));
    const datatime = data.map((d, i) => i);

    const graphTypes = [{
      type: 'bar',
      marker: {
        color: 'rgba(205, 54, 54, 0.3)'
      }
    }, {
      type: 'bar',
      marker: {
        color: 'rgba(54, 74, 205, 0.3)'
      }
    }];

    const graphs = graphTypes.map((graphType, i) => {
      const data = {
        type: graphType.type,
        mode: graphType.mode,
        marker: graphType.marker,
        x: datatime,
        y: cpu
      };

      const layout = {
        barmode: graphType.mode
      };

      return (
        <Plotly
          key={i}
          layout={layout}
          data={[data]}
        />
      );
    });

    return (
      <div>
        {graphs}
      </div>
    )
  }
});

const mapStateToProps = ({
  data
}) => {
  return {
    data
  };
};

module.exports = connect(mapStateToProps)(PlotlyGraph);
{'fraction_non_alphanumeric': 0.1564001747487986, 'fraction_numerical': 0.007863695937090432, 'mean_word_length': 1.855361596009975, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 17, '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': '4139712', 'n_tokens_mistral': 797, 'n_tokens_neox': 764, 'n_words': 155}