<commit_before>var React = require('react');
var PropTypes = React.PropTypes;

import { BarChart, Bar, Cell, CartesianGrid, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { HUC12_MAP_FEATUREID } from '../constants/actionConstants';


var ChartBars = React.createClass({
  propTypes: {
    title: PropTypes.string,
  },
  getDefaultProps: function() {
    return {
      title:'Title'
    };
  },
  handleClick(constructor, entry, data, index, test) {
    const name = entry.name
    console.log(entry)
    this.props.get_LayerInfo_ByValue(name, HUC12_MAP_FEATUREID)
    // const id = $("#data").html(name);

        //super hacky way to get values into webpage.
    // need to pass chart data for other levels so we can "drilldown"
    const props = constructor.props.chart_data
    let props_filtered = props.filter(item => {
      return item.name === name
    })
    let values = ''
    props_filtered.map( chartclickvalues => {
      for (var prop in chartclickvalues) {
        if (chartclickvalues.hasOwnProperty(prop)) {
          if(typeof chartclickvalues[prop] === 'object'){
            values = values + prop + ": " + JSON.stringify(chartclickvalues[prop]) + "<BR />"
          }else{
            values = values + prop + ": " + chartclickvalues[prop] + "<BR />"
          }
        }
      }

    })
    //$("#data").html(values);
    //$("#data").html(name);
  },
  get_keyColors: function(key){
    let key_colors = [];

    switch (key) {
      case 'Total Water Quality Baseline':
        key_colors = ['#fc9636' , <KEY>']
        break;
      case 'Total Hydrology Baseline':
        key_colors = ['#9479b9' , '#beaed4']
        break;
      case 'Total Habitat Baseline':
        key_colors = ['#44a244' , <KEY>' ]
        break;
      case 'Total Water Quality Uplift':
        key_colors = ['#fc9636' , '#fdc086']
        break;
      case 'Total Hydrology Uplift':
        key_colors = ['#9479b9' , '#beaed4']
        break;
      case 'Total Habitat Uplift':
        key_colors = ['#44a244' , <KEY>']
        break;
      //   key_colors = ['#ffff33' , '#ffff99']
      //   key_colors = ['#1f3b61' , <KEY>']
      default:
        key_colors = ['#fc9636' , <KEY>']
        break;
    }
    return key_colors;
  },
  get_legend_payload: function(chart_type){
    let custom_payload = [];
    const chart_keys = this.get_datakeys(chart_type);
    chart_keys.map( key => {
      const color_keys = this.get_keyColors(key);
      custom_payload.push({ value: key, type:'rect', id:key, color: color_keys[1] })
    })<commit_msg>This fixes #62 match colors of Hab, hyd, and Wq to DEQ<commit_after>var React = require('react');
var PropTypes = React.PropTypes;

import { BarChart, Bar, Cell, CartesianGrid, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { HUC12_MAP_FEATUREID } from '../constants/actionConstants';


var ChartBars = React.createClass({
  propTypes: {
    title: PropTypes.string,
  },
  getDefaultProps: function() {
    return {
      title:'Title'
    };
  },
  handleClick(constructor, entry, data, index, test) {
    const name = entry.name
    console.log(entry)
    this.props.get_LayerInfo_ByValue(name, HUC12_MAP_FEATUREID)
    // const id = $("#data").html(name);

        //super hacky way to get values into webpage.
    // need to pass chart data for other levels so we can "drilldown"
    const props = constructor.props.chart_data
    let props_filtered = props.filter(item => {
      return item.name === name
    })
    let values = ''
    props_filtered.map( chartclickvalues => {
      for (var prop in chartclickvalues) {
        if (chartclickvalues.hasOwnProperty(prop)) {
          if(typeof chartclickvalues[prop] === 'object'){
            values = values + prop + ": " + JSON.stringify(chartclickvalues[prop]) + "<BR />"
          }else{
            values = values + prop + ": " + chartclickvalues[prop] + "<BR />"
          }
        }
      }

    })
    //$("#data").html(values);
    //$("#data").html(name);
  },
  get_keyColors: function(key){
    let key_colors = [];

    switch (key) {
      case 'Total Water Quality Baseline':
        key_colors = ['#3cdd6f' , '#1a9641']
        break;
      case 'Total Hydrology Baseline':
        key_colors = ['#6eb3dd' , '#2b83ba']
        break;
      case 'Total Habitat Baseline':
        key_colors = ['#ec5f62' , <KEY>' ]
        break;
      case 'Total Water Quality Uplift':
        key_colors = ['#3cdd6f' , '#1a9641']
        break;
      case 'Total Hydrology Uplift':
        key_colors = ['#6eb3dd' , '#2b83ba']
        break;
      case 'Total Habitat Uplift':
        key_colors = ['#ec5f62' , <KEY>' ]
        break;
      //   key_colors = ['#ffff33' , '#ffff99']
      //   key_colors = ['#1f3b61' , <KEY>']
      default:
        key_colors = ['#3cdd6f' , '#1a9641']
        break;
    }
    return key_colors;
  },
  get_legend_payload: function(chart_type){
    let custom_payload = [];
    const chart_keys = this.get_datakeys(chart_type);
    chart_keys.map( key => {
      const color_keys = this.get_keyColors(key);
      custom_payload.push({ value: key, type:'rect', id:key, color: color_keys[1] })
    })
{'fraction_non_alphanumeric': 0.1459054209919262, 'fraction_numerical': 0.0196078431372549, 'mean_word_length': 2.5759450171821308, 'pattern_counts': {'":': 4, '<': 15, '<?xml version=': 0, '>': 21, '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': '1975547', 'n_tokens_mistral': 1736, 'n_tokens_neox': 1687, 'n_words': 391}