<template>
  <div>
    <flow-section class="pull-left"></flow-section>
    <div class="pull-left" style="width: 200px;">
      <connector-canvas :data="data"></connector-canvas>
    </div>
    <flow-section class="pull-left"></flow-section>
  </div>
</template>

<style scoped>
  .pull-left {
    float: left;
  }
</style>

<script type="text/ecmascript-6">
  import FlowSection from '../components/flow-section.vue';
  import ConnectorCanvas from '../components/connector-canvas.vue';

  export default {
    components: {
      FlowSection,
      ConnectorCanvas
    },

    data() {
      return {
        section1: [{
          path: '/test1',
          value: 3000,
          outflow: 410,
          to: [{
            path: '/test1',
            value: 2400
          }, {
            path: '/test2',
            value: 100
          }, {
            path: '/test3',
            value: 50
          }, {
            path: '/test4',
            value: 30
          }, {
            path: '/test5',
            value: 10
          }]
        }, {
          path: '/test2',
          value: 600
        }, {
          path: '/test3',
          value: 300
        }, {
          path: '/test4',
          value: 200
        }, {
          path: '/test5',
          value: 100
        }],

        section2: [{
          path: '/test1',
          value: 3000
        }, {
          path: '/test2',
          value: 600
        }, {
          path: '/test3',
          value: 300
        }, {
          path: '/test4',
          value: 200
        }, {
          path: '/test5',
          value: 100
        }],

        data: [{
          x1: 0,
          y1: 40,
          x2: 200,
          y2: 80,
          width: 5
        }, {
          x1: 0,
          y1: 60,
          x2: 200,
          y2: 90,
          width: 50
        }]
      };
    }
  };
</script>
