schedule-heatmap.coffee

angular.module('catalog-diff')

.directive 'scheduleHeatmap', ->

  margin =
    top: 30
    right: 0
    bottom: 30
    left: 30

  full_width = 700
  width = full_width - margin.left - margin.right
  full_height = 400
  height = full_height - margin.top - margin.bottom
  grid_size = Math.floor width / 7

  # colors = [
  #   '#fdf6e3'   # $base3
  #   '#eee8d5'   # $base2
  #   '#93a1a1'   # $base1
  #   '#839496'   # $base0
  #   '#657b83'   # $base00
  #   '#586e75'   # $base01
  #   '#073642'   # $base02
  #   '#002b36'   # $base03
  # ]

  color = '#839496'   # $base0

  week_days = [
    'Monday'
    'Tuesday'
    'Wednesday'
    'Thursday'
    'Friday'
    'Saturday'
    'Sunday'
  ].map (day) -> day.slice(0, 2)

  suffix = (suff) -> (str) -> "#{str}#{suff}"

  weeks = _.range(1, 5).map suffix 'W'

  return {
    replace: true
    restrict: 'E'
    scope:
      data: '='
      on_select: '&onSelect'
    template: """
                <div class="schedule-heatmap"></div>
              """

    link: (scope, element, attrs) ->

      chart = d3.select(element[0])
        .append('svg')
          .attr('viewBox', "0 0 #{full_width} #{full_height}")
          # .attr('preserveAspectRatio', 'xMidYMin')
          .append('g')
          .attr('transform', "translate(#{margin.left}, #{margin.top})")

      day_labels = chart.selectAll('.week')
        .data(weeks)
        .enter().append('text')
          .text((d) -> d)
          .attr('x', 0)
          .attr('y', (d, i) -> i * grid_size)
          .style('text-anchor', 'end')
          .attr('transform', "translate(-6, #{grid_size / 1.75})")
          .attr('class', 'week axis')

      time_labels = chart.selectAll('.day')
        .data(week_days)
        .enter().append('text')
          .text((d) -> d)
          .attr('x', (d, i) -> i * grid_size)
          .attr('y', 0)
          .style('text-anchor', 'middle')
          .attr('transform', "translate(#{grid_size / 2}, -6)")
          .attr('class', 'day axis')

      scope.$watch 'data', (tasks) ->
        return if not tasks

        schedule = _.chain(tasks)
        .map (task) ->
          return if task?.disabled
          return task.days.map (day) -> { day, week: task.interval, data: task.data }
        .compact()
        .flatten()
        .groupBy (task) ->
          return "#{task.day}#{task.week}"
        .map (tasks) ->
          day: tasks[0].day
          week: tasks[0].week
          datums: _.pluck tasks, 'data'
        .value()

        console.log schedule

        # color_scale = d3.scale.quantile()
        #   .domain([ 0, colors.length - 1, d3.max schedule, (task) -> task.sources.length ])
        #   .range(colors)

        color_scale = d3.scale.linear()
          .domain([ 0, d3.max schedule, (task) -> task.datums.length ])
          .range([ 0, 1 ])

        heat_map = chart.selectAll('.time')
          .data(schedule)
          .enter().append('rect')
            .attr('x', (d) -> (d.day - 1) * grid_size )
            .attr('y', (d) -> (d.week - 1) * grid_size )
            .attr('class', 'time bordered')
            .attr('width', grid_size)
            .attr('height', grid_size)
            .style('fill', color)
            .style('opacity', 0)
          .on 'click', (datum) ->
            scope.on_select { task: datum }

        heat_map.transition()
          .duration(250)
          .delay((d, i) -> i * 5)
          .style('opacity', (d) -> color_scale d.datums.length)

  }