<commit_before>@Treemap = React.createClass
  URL: "/stat/urf"

  DEFAULT:
    color: 'average_score'
    size: 'matches'

  SCALES:
    popularity:
      range: ["#b4544b","#ccc","#6bba70"]
      domain: [0, 25, 50]
    ban_rate:
      range: ["#6bba70","#ccc","#b4544b"]
      domain: [0,30,60]
    win_rate:
      range: ["#7A1810","#3B3E40","#0F7015"]
      domain: [40,50,60]
    average_score:
      range: ["#7A1810","#3B3E40","#0F7015"]
      domain: [0,15,30]
    kda:
      range: ["#7A1810","#3B3E40","#0F7015"]
      domain: [1,1.5,3]

  getInitialState: ->
    if @props and @props.data
      return _.extend @DEFAULT, @props
    else
      @get_data()
      return @DEFAULT

  componentDidMount: ->
    @_subscribeToEvents()

  componentWillUnmount: ->
    @_unsubscribeFromEvents()

  _subscribeToEvents: ->
    # When the reset button is clicked...
    PubSub.subscribe 'dropdown.regions', (msg, data) =>
      @setState
        region: data.value
      @get_data()

    PubSub.subscribe 'dropdown.days', (msg, data) =>
      @setState
        day: data.value
      @get_data()

    PubSub.subscribe 'dropdown.pivots', (msg, data) =>
      console.log data.value
      @setState
        color: data.value

  _unsubscribeFromEvents: ->
    PubSub.unsubscribe 'dropdown'

  update: (event) =>
    event.preventDefault() if event
    @get_data()

  get_data: ->
    url = @URL
    if @state?.region?  || @state?.day?
      params = {region: @state.region, day: @state.day}
      delete params["region"] if @state.region == 'All' || !@state?.region?
      delete params["day"] if @state.day == 'All' || !@state?.day?
      querystring = $.param params
      url += "?#{querystring}" if querystring.length > 0 # i sux at this

    d3.json(url, (error,response) =>
      @setState
        data:
          champions: "All"
          children: response
    )


  componentDidUpdate: ->
    @treemap = d3.layout.treemap()
        .round(false)
        .size([960, 500])
        .sticky(true)
        .value((d) =>
          return d[@state.size] + 5000
        )

    @color = d3.scale.linear()
      .range(@SCALES[@state.color].range)
      .domain(@SCALES[@state.color].domain)
    console.log(@state.data)
    nodes = @treemap.nodes(@state.data)
    chart = d3.select(".treemap-points")
    cells = chart.selectAll("g.cell.parent").data(nodes)
                 .enter()
                 .append("svg:g")
                 .attr("class", "cell")
                 .attr("transform", (d) ->
                   return "translate(" + d.x + "," + d.y + ")"
                 )

    cells.append("svg:rect")
      .attr("class", "cell-box")
      .attr("width", (d) ->
        return d.dx
      )
      .attr("height", (d) ->
        return d.dy
      )
      .style("fill", (d) =>
        return @color( d[@state.color] )
      ).on('click', (d) =>
        PubSub.publish 'sidebar', _.extend(d, {isOpen: true})
      )
    cells.append("svg:image")
      .attr("xlink:href", (d)-> "http://ddragon.leagueoflegends.com/cdn/5.7.2/img/champion/#{d.key}.png")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", 20)
      .attr("height", 20)

  render: ->
    content = if @state?.data? then <Svg /> else <LoadingIndicator />
    champion_detail = <ChampionDetail {...@state.selected_champion} /> if @state?.selected_champion?
    return (
      <div>
        {content}
        <ChampionDetail />
      </div>
    )<commit_msg>cleaning up the treemap a bit and now with animations!<commit_after>@Treemap = React.createClass
  URL: "/stat/urf"

  DEFAULT:
    color: 'average_score'
    size: 'matches'

  SCALES:
    popularity:
      range: ["#b4544b","#ccc","#6bba70"]
      domain: [0, 25, 50]
    ban_rate:
      range: ["#6bba70","#ccc","#b4544b"]
      domain: [0,30,60]
    win_rate:
      range: ["#7A1810","#3B3E40","#0F7015"]
      domain: [40,50,60]
    average_score:
      range: ["#7A1810","#3B3E40","#0F7015"]
      domain: [0,15,30]
    kda:
      range: ["#7A1810","#3B3E40","#0F7015"]
      domain: [1,2,3]

  getInitialState: ->
    if @props and @props.data
      return _.extend @DEFAULT, @props
    else
      @_get_data()
      return @DEFAULT

  componentDidMount: ->
    @_subscribeToEvents()

  componentWillUnmount: ->
    @_unsubscribeFromEvents()


  # Don't update the component if we are just changing region or day
  # because the ajax call hasnt finished yet
  shouldComponentUpdate: (props, state) ->
    return false if state.region isnt @state.region
    return false if state.day    isnt @state.day
    return true

  componentDidUpdate: ->
    if @treemap
      @_update_graph()
    else
      @_build_graph()


  _subscribeToEvents: ->
    # When the reset button is clicked...
    PubSub.subscribe 'dropdown.regions', (msg, data) =>
      @setState
        region: data.value
      @_get_data()

    PubSub.subscribe 'dropdown.days', (msg, data) =>
      @setState
        day: data.value
      @_get_data()

    PubSub.subscribe 'dropdown.pivots', (msg, data) =>
      @setState
        color: data.value

  _unsubscribeFromEvents: ->
    PubSub.unsubscribe 'dropdown'


  _get_data: ->
    url = @URL
    if @state?.region?  || @state?.day?
      params = {region: @state.region, day: @state.day}
      delete params["region"] if @state.region == 'All' || !@state?.region?
      delete params["day"] if @state.day == 'All' || !@state?.day?
      querystring = $.param params
      url += "?#{querystring}" if querystring.length > 0 # i sux at this

    d3.json(url, (error,response) =>
      @setState
        data:
          champions: "All"
          children: response
    )

  _update_graph: ->
    @color = @color
      .range(@SCALES[@state.color].range)
      .domain(@SCALES[@state.color].domain)

    nodes = @treemap.nodes(@state.data)
      .filter((d) ->
        return !d.children
      )

    cells = d3.select(".treemap-points")
      .selectAll("g.cell")
      .data(nodes)

    cells.transition()
      .attr("transform", (d) ->
        return "translate(" + d.x + "," + d.y + ")"
      )

    cells.select("rect")
      .attr("width", (d) ->
        return d.dx
      )
      .attr("height", (d) ->
        return d.dy
      )
      .style("fill", (d) =>
        return @color( d[@state.color] )
      )

    cells.select("image")
      .attr("xlink:href", (d)-> "http://ddragon.leagueoflegends.com/cdn/5.7.2/img/champion/#{d.key}.png")


  _build_graph: ->
    @treemap = d3.layout.treemap()
        .round(true)
        .size([960, 500])
        .value((d) =>
          return d[@state.size] + 5000 )
        .sort((a,b) =>
          return a[@state.size] - b[@state.size] )

    @color = d3.scale.linear()
      .range(@SCALES[@state.color].range)
      .domain(@SCALES[@state.color].domain)

    nodes = @treemap.nodes(@state.data)
      .filter((d) ->
        return !d.children
      )

    cells = d3.select(".treemap-points")
      .selectAll("g.cell")
      .data(nodes)
      .enter()
      .append("svg:g")
      .attr("class", "cell")
      .attr("transform", (d) ->
        return "translate(" + d.x + "," + d.y + ")"
      )

    cells.append("svg:rect")
      .attr("class", "cell-box")
      .attr("width", (d) ->
        return d.dx
      )
      .attr("height", (d) ->
        return d.dy
      )
      .style("fill", (d) =>
        return @color( d[@state.color] )
      ).on('click', (d) =>
        PubSub.publish 'sidebar', _.extend(d, {isOpen: true})
      )

    cells.append("svg:image")
      .attr("xlink:href", (d)-> "http://ddragon.leagueoflegends.com/cdn/5.7.2/img/champion/#{d.key}.png")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", 20)
      .attr("height", 20)


  render: ->
    content = if @state?.data? then <Svg /> else <LoadingIndicator />
    champion_detail = <ChampionDetail {...@state.selected_champion} /> if @state?.selected_champion?
    return (
      <div>
        {content}
        <ChampionDetail />
      </div>
    )
{'fraction_non_alphanumeric': 0.1778616352201258, 'fraction_numerical': 0.02679245283018868, 'mean_word_length': 2.1880513231756216, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 67, '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': '7385281', 'n_tokens_mistral': 2915, 'n_tokens_neox': 2777, 'n_words': 533}