admincharts.coffee

String.prototype.capitalize = ->
  @charAt(0).toUpperCase() + @slice(1)

parse_shit_to_date = (shit) ->
  # shit in form of "2012-05-23"
  parts = shit.match(/(\d+)/g)
  new Date(parts[0], parts[1]-1, parts[2])

jQuery(document).ready ($) ->
  return unless $("body.admin_dashboard").length

  make_pie = ($box, data, size) ->
    if size?
      w  = h = size
      r  = Math.min(w, h) / 2
      r2 = r - Math.floor(r/2)
    else
      w  = h = 40
      r  = Math.min(w, h) / 2
      r2 = r - 12

    donut = d3.layout.pie().sort(null)
    arc = d3.svg.arc().innerRadius(r2).outerRadius(r)

    chart = d3.select('#'+$box.attr("id"))
      .append("svg:svg").attr("width", w).attr("height", h)
      .attr("class", "pie").append("svg:g")
      .attr("transform", "translate(#{w/2},#{h/2})")

    arcs = chart.selectAll("path")
      .data(donut(data))
      .enter().append("svg:path")
      .attr("class", (d, i) -> "pie-#{i} make_tooltip")
      .attr("title", (d) -> d.value)
      .attr("d", arc)
      .on("mouseover", (d) ->
        $(this).tooltip('show')
      ).on("mouseout", (d) ->
        $(this).tooltip('hide')
      )

  make_line = ($box, data, data2, xAxis) ->
    w = 220
    h = 70
    padding = 20

    # xs = data.map((x) -> x[0])
    ys = data.map((x) -> x[1])
    min = d3.min ys
    max = d3.max ys

    if data2?
      min1 = min
      max1 = max
      ys2 = data2.map((x) -> x[1])
      min2 = d3.min ys2
      max2 = d3.max ys2

      min = 0.8 * Math.min min1, min2
      max = 1.2 * Math.max max1, max2

    xScale = d3.time.scale().range([2, w-(padding+2)])
      .domain [ 0, data.length-1 ]

    yScale = d3.scale.linear().range([h-padding, padding])
      .domain([min, max])

    chart = d3.select('#'+$box.attr("id"))
      .append("svg:svg").attr("width", w).attr("height", h).attr("class", "line")
      .append("svg:g")
      .attr("transform", "translate(#{padding/2},#{padding/2})")

    line = d3.svg.line()
      .x( (d,i) -> xScale i )
      .y( (d) -> yScale(d[1]) )
      .interpolate("linear")

    chart.append("svg:path")
      .attr("d", line(data))

    ## draw circle markers
    make_marker = (group, x, y, title) ->
      group.append('svg:circle')
        .attr('class', 'data-point make_tooltip')
        .attr('cx', x)
        .attr('cy', y)
        .attr('r', 3)
        .attr('title', title)
        .on("mouseover", (d) ->
          $(this).attr('r', 5).tooltip('show')
        ).on("mouseout", (d) ->
          $(this).attr('r', 3).tooltip('hide')
        )

    make_marker_list = (data, markers) ->
      $.each data, (i, val) ->
        delta_str = ""
        if i>0
          delta = data[i][1] - data[i-1][1]
          delta_str = if delta >= 0 then " (+#{delta})" else " (#{delta})"

        make_marker markers, xScale(i), yScale(val[1]), "#{val[0]}: #{val[1]}#{delta_str}"

    markers = chart.append("svg:g").attr("class", "markers")
    make_marker_list data, markers

    if data2?
      chart.append("svg:path")
        .attr("class", "orange")
        .attr("d", line(data2))

      markers2 = chart.append("svg:g").attr("class", "markers orange")
      make_marker_list data2, markers2

    if xAxis?
      chart.selectAll(".xLabel")
        .data(xScale.ticks data.length)
        .enter().append("svg:text")
          .attr("class", "xLabel")
          .text(xAxis)
          .attr("x", (d) -> xScale d)
          .attr("y", padding/2)
          .attr("text-anchor", "middle")


  $("svg .make_tooltip").tooltip
    "animation": false
    "placement": "right"
    "trigger": "manual"

  # load json
  # create chart container dom
  # create charts

  return

admincharts.scss

svg.pie {
  .pie-0 {
    fill: #38678b;
  }

  .pie-1 {
    fill: lighten(#38678b, 20%);
  }

  .pie-2 {
    fill: #5e6469;
  }
}

svg.line {
  display: block;
  margin: 12px auto 18px;

  path {
    stroke: #6a7176;
    stroke-width: 2;
    fill: none;
  }

  path.orange {
    stroke: #FFA500; //orange
  }

  line {
    stroke: black;
  }

  .markers {
    circle {
      fill: darken(#6a7176, 20%);
    }
  }

  .markers.orange {
    circle {
      fill: #FF7000;
    }
  }

  .xLabel {
    fill: #5e6469;
    font-size: 10px;
  }
}