omegahm/beerclub

<a href="#" class="resize-graph btn btn-success btn-xs">
  <i class="fa fa-resize-full"></i>
  <span class="up">Forøg</span>
  <span class="down hide">Formindsk</span>
  størrelse på graf
</a>
<div id="graph-container"></div>

<% content_for :scripts do %>
  <%= javascript_tag do %>
    var chart, size;
    var oldWidth;
    var newWidth = <%= @bills.size * 100 -%>;
    var toggleUp = true;

    $(function () {
      $('.resize-graph').click(function() {
        if (toggleUp) {
          size = newWidth;
          oldWidth = chart.chartWidth;
          $('#wrap > .container').animate({margin: 0}, 1000);
        } else {
          size = oldWidth
          // Hack for now, as animate doens't allow margin: 'auto'
          // $('#wrap > .container').animate({margin: 'auto'}, 1000);
          $('#wrap > .container').css({margin: 'auto'});
        }

        chart.setSize(size, chart.chartHeight, {duration: 1000});

        toggleUp = !toggleUp;
        $('.up, .down').toggleClass('hide');
      });

      chart = new Highcharts.Chart({
          chart: {
            renderTo: 'graph-container',
            type: 'spline',
            height: '1000',
            zoomType: 'xy'
          },

          title: {
            text: '<%= @product.name -%>'
          },

          xAxis: {
            categories: <%= @dates.map { |date| l Date.parse(date.inspect), format: :long }.to_json.html_safe %>,
            labels: {
              rotation: 90,
              align: 'left'
            }
          },

          yAxis: {
            alternateGridColor: '#F2F1F0',
            min: 0
          },

          legend: {
            margin: 50
          },

          plotOptions: {
            spline: {
              marker: {
                enabled: false
              }
            }
          },

          series: [
            <%- @bills.each do |user_id, bill| -%>
              {
                name: '<%= @user_meta[user_id].first -%>',
                visible: <%= @user_meta[user_id].second -%>,
                <%- sum ||= 0 -%>
                data: [<%- @dates.each do |date| -%>
                  <%- sum += bill[date] || 0 -%>
                  <%= sum == 0 ? 'null' : sum -%>
                  <%= "," unless @dates.last == date -%>
                <%- end -%>]
              },
            <%- end -%>
          ]
      });
    });
  <% end %>
<% end %>