<link rel="import" href="../polimero-app/polimero-app.html">
<link rel="import" href="../polimero-barchart/polimero-barchart.html">
<link rel="import" href="../polimero-scatterplot/polimero-scatterplot.html">

<polymer-element name="my-element">

  <template>
    <style>
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #polimero_app {
        left: 360px;
        top: 240px;
        position: absolute;
      }
      #polimero_barchart1 {
        left: 50px;
        top: 410px;
        position: absolute;
      }
      #polimero_scatterplot {
        left: 70px;
        top: 40px;
        position: absolute;
      }
    </style>
    <polimero-app id="polimero_app" data="{{data}}" url="../polimero-app/data/data.csv"></polimero-app>
    <polimero-barchart id="polimero_barchart1" data="{{data}}" selected="{{selected}}" options='{"xaxis": true, "width": 1200, "height": 400, "startatzero": true, "yaxis": true}' column="sepalLength">
    </polimero-barchart>
    <polimero-scatterplot id="polimero_scatterplot" data="{{data}}" selected="{{selected}}" xvalues="sepalLength" yvalues="sepalWidth" options='{"width":300,"height":300,"xaxis":true,"yaxis":true}'>
    </polimero-scatterplot>
  </template>

  <script>

    Polymer({
      data: null,
      selected: []
    });

  </script>

</polymer-element>