<commit_before>import React, {
  Component
} from 'react';
// Note that Highcharts has to be required separately
const ReactHighcharts = require('react-highcharts');
// Highcharts 3d
const Highcharts3d = require('highcharts-3d');
Highcharts3d(ReactHighcharts.Highcharts);
// Highcharts more
const HighchartsMore = require('highcharts-more');
HighchartsMore(ReactHighcharts.Highcharts);
// Highcharts exporting
const HighchartsExporting = require('highcharts-exporting');
HighchartsExporting(ReactHighcharts.Highcharts);

const config = {
  // Set up the chart
  chart: {
    events: {
      click: function () {
        console.log("click!");
      },
      load: function () {
        console.log("load!");
      }
    },
    // margin: 100,
    type: 'scatter',
    //zoomType: 'xy', if we want to zoom in
    // panning: true,
    // panKey: 'shift',
    
    options3d: {
      enabled: true,
      alpha: 10,
      beta: 50,
      depth: 450,
      viewDistance: 10,
      // fitToPlot: false,
      frame: {
        bottom: {
          size: 1,
          color: 'rgba(255,0,0,0.1)'
        },
        back: {
          size: 1,
          color: 'rgba(0,255,0,0.1)'
        },
        side: {
          size: 1,
          color: 'rgba(0,0,255,0.1)'
        }
      }
    }
  },
  title: {
      useHTML: true,
      x: -10,
      y: 8,
      text: '<span class="chart-title">Color Chart</span>'
    },
  tooltip: {
      formatter: function() {
        let p = this.point;
        return 'Red: <b>' + p.x +
          '</b><br/> Green: <b>' + p.y +
          '</b><br/> Blue: <b>' + p.z + '</b>';
      }
  },
  plotOptions: {<commit_msg>trying to tweak with that css. chart shouldnt be rerendering tho...<commit_after>import React, {
  Component
} from 'react';
// Note that Highcharts has to be required separately
const ReactHighcharts = require('react-highcharts');
// Highcharts 3d
const Highcharts3d = require('highcharts-3d');
Highcharts3d(ReactHighcharts.Highcharts);
// Highcharts more
const HighchartsMore = require('highcharts-more');
HighchartsMore(ReactHighcharts.Highcharts);
// Highcharts exporting
const HighchartsExporting = require('highcharts-exporting');
HighchartsExporting(ReactHighcharts.Highcharts);

const config = {
  // Set up the chart
  chart: {
    events: {
      click: function () {
        console.log("click!");
      },
      load: function () {
        console.log("load!");
      }
    },
    // margin: 10,
    type: 'scatter',
    //zoomType: 'xy', if we want to zoom in
    // panning: true,
    // panKey: 'shift',
    spacing: [50,50,60,50],
    options3d: {
      enabled: true,
      alpha: 10,
      beta: 20,
      depth: 356,
      viewDistance: 300,
      // fitToPlot: false,
      frame: {
        bottom: {
          size: 1,
          color: 'rgba(255,0,0,0.1)'
        },
        back: {
          size: 1,
          color: 'rgba(0,255,0,0.1)'
        },
        side: {
          size: 1,
          color: 'rgba(0,0,255,0.1)'
        }
      }
    }
  },
  //add drilldown for when you click an item, show the ones you could have selected
  credits: {
      enabled: false
  },
  title: {
      useHTML: true,
      x: -10,
      y: 8,
      text: '<span class="chart-title">Color Chart</span>'
  },
  tooltip: {
      formatter: function() {
        let p = this.point;
        return 'Red: <b>' + p.x +
          '</b><br/> Green: <b>' + p.y +
          '</b><br/> Blue: <b>' + p.z + '</b>';
      }
  },
  plotOptions: {
{'fraction_non_alphanumeric': 0.15537047673750717, 'fraction_numerical': 0.027570361860999426, 'mean_word_length': 2.0445804195804196, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 23, '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': '3853459', 'n_tokens_mistral': 1247, 'n_tokens_neox': 1153, 'n_words': 278}