// Generated by CoffeeScript 1.10.0
(function() {
  var app;

  Vue.component('bar-chart', {
    props: {
      data: {
        type: Array,
        required: true
      },
      padding: {
        type: Number,
        "default": 1
      },
      color: {
        type: String,
        "default": 'gray'
      }
    },
    data: function() {
      return {
        width: 200,
        height: 200
      };
    },
    template: '<svg class="bar-chart">\n  <rect\n    class="bar"\n    v-for="d in layout"\n    :x="d.x"\n    :y="d.y"\n    :width="d.width"\n    :height="d.height"\n    :fill="color"\n  />\n</svg>',
    created: function() {
      this.x = d3.scaleLinear();
      return this.y = d3.scaleLinear();
    },
    mounted: function() {
      this.width = this.$el.clientWidth;
      return this.height = this.$el.clientHeight;
    },
    computed: {
      layout: function() {
        this.x.domain([0, this.data.length]).range([0, this.width]);
        this.y.domain([
          0, d3.max(this.data, function(d) {
            return d.v;
          })
        ]).range([0, this.height]);
        return this.data.map((function(_this) {
          return function(d, i) {
            return {
              v: d.v,
              x: _this.x(i),
              y: _this.y.range()[1] - _this.y(d.v),
              width: Math.max(1, _this.x(1) - _this.x(0) - _this.padding),
              height: _this.y(d.v)
            };
          };
        })(this));
      }
    }
  });

  app = new Vue({
    el: '#app',
    data: {
      values: [
        {
          v: 10
        }, {
          v: 20
        }, {
          v: 30
        }
      ]
    },
    methods: {
      add_random_datapoint: function() {
        return this.values.push({
          v: Math.random() * 300
        });
      }
    }
  });

}).call(this);