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

  Vue.component('matrix', {
    props: {
      data: {
        type: Array,
        required: true
      },
      value: {
        type: Object,
        "default": function() {
          return {
            i: 0,
            j: 0
          };
        }
      },
      padding: {
        type: Number,
        "default": 1
      },
      cellsize: {
        type: Number,
        "default": 20
      }
    },
    template: '<svg :width="ncols*cellsize" :height="nrows*cellsize" class="matrix">\n  <g v-for="(row,i) in data">\n    <rect\n      v-for="(cell,j) in row"\n\n      :class="{cell: true, selected: value.i == i && value.j == j}"\n\n      :x="j*cellsize + cellsize/2 - scale(cell)/2"\n      :y="i*cellsize + cellsize/2 - scale(cell)/2"\n      :width="scale(cell)"\n      :height="scale(cell)"\n      \n      v-on:click="select({i:i,j:j})"\n    />\n  </g>\n</svg>',
    computed: {
      max: function() {
        return d3.max(this.data, function(r) {
          return d3.max(r);
        });
      },
      nrows: function() {
        return this.data.length;
      },
      ncols: function() {
        if (this.data.length > 0) {
          return this.data[0].length;
        } else {
          return 0;
        }
      },
      scale: function() {
        return d3.scaleSqrt().domain([0, this.max]).range([0, Math.max(0, this.cellsize - this.padding)]);
      }
    },
    methods: {
      select: function(d) {
        return this.$emit('input', d);
      }
    }
  });

  app = new Vue({
    el: '#app',
    data: {
      matrix1: [[1, 2, 3], [4, 5, 6], [9, 9, 9]],
      matrix2: [[12, 24, 35], [45, 15, 60], [60, 60, 60]],
      shared_sel: {
        i: 1,
        j: 1
      }
    }
  });

}).call(this);