move data in Vue by date

forked from ocarneiro's block: Here comes the sun

forked from ocarneiro's block: moving circle

forked from ocarneiro's block: moving data item Vue

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/vue"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <div id="vue">
    <p>{{por_data[item].dataref}}: {{por_data[item].material[0].local}}</p>
    <input v-model="item">
    <button v-on:click="redraw">Redesenhar</button>
  </div>
  <script>
    
    /*
     
     TODO: Organizar por movimentação. Nas datas em que houver um movimento, executar o "transition()" no objeto que representa o item.
     
     Ex: 
     [{
     		data: '2020-03-11',
        item: 'a',
        origem: '',  //origem não importa para a animação, só o destino
        destino: 'A'
     },
     {
     		data: '2020-03-12',
        item: 'a',
        origem: 'A',
        destino: 'B'
     }]
    
    
     */
    
		var app = new Vue({
      el: '#vue',
      data: {
        item: 0,
        log: "",
        por_data: [{
          dataref: "2020-03-11",
          material: [{
             codigo: "123",
             local: "A"
          }]
        	},
                   {
          dataref: "2020-03-12",
          material: [{
             codigo: "123",
             local: "B"
          }]
       	 	}
        ]
      },  // fim data
      watch: {
        item: redraw
      },
      methods: {
        redraw: redraw
      }
    })
    
    var local = {
      A: 100,
      B: 400
    }
      
    app.texto = "Depois";    
    
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
      .attr("class", "vue");
    
    svg.append("text")
       .text("A")
       .attr("x", 80)
       .attr("y",300)
    	 .attr("font-family", "monospace")
       .attr("font-size", 40);
    
    svg.append("text")
       .text("B")
       .attr("x", 400)
       .attr("y",300)
    	 .attr("font-family", "monospace")
       .attr("font-size", 40);
    
    var bola0 = svg.selectAll('circle')
          .data(app.por_data[app.item].material)
          .enter()
          .append('circle')
          .attr('r', 15)
          .attr('cx', function(d) {return local[d.local]})
          .attr('cy', 200)
          .style("stroke", "black")
          .style('fill', 'steelblue');
    
    function redraw(){
      bola0
        .transition()
        .attr('cx', local[app.por_data[app.item].material[0].local]);
    }
    
    //redraw();
  </script>
</body>

https://d3js.org/d3.v4.min.js

https://unpkg.com/vue