Stik - Dashboard example

dashboard.coffee

#= require stik
#= require moment-with-langs
#= require resources/dashboards
#= require charts/daily_visitors
#= require charts/social_performance
#= require charts/popular_tags

stik.controller 'DashboardCtrl', (ctrl) ->
  ctrl.action 'RangeSelector', ($template, $courier, tplWrapper) ->
    startDateField = $template.querySelector '#start_date'
    startDatePicker = $template.querySelector '#first_datepicker'
    endDateField = $template.querySelector '#end_date'
    endDatePicker = $template.querySelector '#second_datepicker'
    rangeSubmit = $template.querySelector '#range_submit'

    moment.lang 'pt'
    today = moment()
    endDateField.value = today.format 'L'
    startDateField.value = today.subtract('days', 7).format 'L'

    rangeSubmit.onclick = (event) ->
      event.preventDefault()

      startDate = moment startDateField.value, 'DD/MM/YYYY'
      endDate = moment endDateField.value, 'DD/MM/YYYY'

      return if startDate.isAfter endDate

      $courier.send(
        'dashboard:rangeUpdated'
        startDate: startDate.format 'YYYY-MM-DD'
        endDate: endDate.format 'YYYY-MM-DD'
      )

    tplWrapper(startDateField).fdatepicker format: 'dd/mm/yyyy'
    startDatePicker.onclick = ->
      tplWrapper(startDateField).fdatepicker 'show'
      return

    tplWrapper(endDateField).fdatepicker format: 'dd/mm/yyyy'
    endDatePicker.onclick = ->
      tplWrapper(end_date).fdatepicker 'show'
      return

  ctrl.action "DailyVisitors", ($template, $courier, $data, dailyVisitorsChart, dashboards) ->
    dashboards($data.blogId).dailyVisitors().success (data) =>
      @chart = dailyVisitorsChart($template).init data

    $courier.receive "dashboard:rangeUpdated", (range) =>
      dashboards($data.blogId).dailyVisitors(range).success (data) =>
        @chart.updateSeriesWith data

  ctrl.action "TopLocations", ($template, $data, $dom, $courier, dashboards) ->
    list = $template.querySelector '.widget_content ul'

    dashboards($data.blogId).topLocations(5).success (data) ->
      for country in data
        $dom.append list, country

    $courier.receive "dashboard:rangeUpdated", (range) ->
      dashboards($data.blogId).topLocations(5, range).success (data) ->
        list.innerHTML = ""
        for country in data
          $dom.append list, country

  ctrl.action "SocialPerformance", ($template, $courier, $data, socialPerformanceChart, dashboards) ->
    container = $template.querySelector '#social_performance'

    dashboards($data.blogId).socialPerformance().success (data) =>
      @chart = socialPerformanceChart(container).init data

    $courier.receive "dashboard:rangeUpdated", (range) =>
      dashboards($data.blogId).socialPerformance(range).success (data) =>
        @chart.updateSeriesWith data

  ctrl.action "PopularTags", ($template, $courier, $data, popularTagsChart, dashboards) ->
    container = $template.querySelector '#popular_tags'

    dashboards($data.blogId).popularTags(5).success (data) =>
      @chart = popularTagsChart(container).init data

    $courier.receive "dashboard:rangeUpdated", (range) =>
      dashboards($data.blogId).popularTags(5, range).success (data) =>
        @chart.updateSeriesWith data

  ctrl.action "VisitorStatistics", ($template, $data, $courier, $viewBag, dashboards) ->
    genderList = $template.querySelector '#gender_bar'
    ageList = $template.querySelector '#age_bar'

    updateChart = (data) ->
      $viewBag.push data.gender
      for key, value of data.gender
        field = $template.querySelector "[data-key=\"#{key}\"]"
        field.style.width = value + '%'

    dashboards($data.blogId).visitorStatistics().success updateChart

    $courier.receive 'dashboard:rangeUpdated', (range) ->
      dashboards($data.blogId).visitorStatistics(range).success updateChart

  ctrl.action "TopPosts", ($template, $data, $dom, $courier, dashboards) ->
    btn = $template.querySelector '.widget_content .widget_btn'

    updateList = (data) ->
      for post in data
        $dom.insertBefore btn, post

    dashboards($data.blogId).topPosts(5).success updateList

    $courier.receive "dashboard:rangeUpdated", (range) ->
      dashboards($data.blogId).topPosts(5, range).success updateList

  ctrl.action "SimilarBlogs", ($template, $data, $dom, $courier, dashboards) ->
    btn = $template.querySelector '.widget_content .widget_btn'

    updateList = (data) ->
      for post in data
        $dom.insertBefore btn, post

    dashboards($data.blogId).similarBlogs(5).success updateList

    $courier.receive "dashboard:rangeUpdated", (range) ->
      dashboards($data.blogId).similarBlogs(5, range).success updateList

dashboard_resource.coffee

#= require stik
#= require boundaries/http

stik.boundary
  as: 'dashboards'
  from: 'controller'
  resolvable: true
  to: (httpGetJSON) ->
    (blog_id) ->
      dashboardPath = "/blogs/#{blog_id}/dashboards"

      dailyVisitors: (range={}) ->
        httpGetJSON dashboardPath + "/daily_visitors",
          startDate: range.startDate
          endDate: range.endDate

      topLocations: (amount, range={}) ->
        httpGetJSON dashboardPath + "/top_locations",
          amount: amount
          startDate: range.startDate
          endDate: range.endDate

      socialPerformance: (range={}) ->
        httpGetJSON dashboardPath + "/social_performance",
          startDate: range.startDate
          endDate: range.endDate

      popularTags: (amount, range={}) ->
        httpGetJSON dashboardPath + "/popular_tags",
          amount: amount
          startDate: range.startDate
          endDate: range.endDate

      visitorStatistics: (range={}) ->
        httpGetJSON dashboardPath + "/visitor_statistics",
          startDate: range.startDate
          endDate: range.endDate

      topPosts: (amount, range={}) ->
        httpGetJSON dashboardPath + "/top_posts",
          amount: amount
          startDate: range.startDate
          endDate: range.endDate

      similarBlogs: (amount, range={}) ->
        httpGetJSON dashboardPath + "/similar_blogs",
          amount: amount
          startDate: range.startDate
          endDate: range.endDate