<template>
  <div
    :ref="chart.id"
    class="chart"
  />
</template>

<script>
// require modules
/* eslint-disable no-unused-vars */
const _ = require('lodash');
let Plotly = require('./js/plot')

export default {
  name: 'PlotlyChart',
  props: ['chart'],
  watch: {
    chart: {
      handler: function () {
        Plotly.react(
            this.$refs[this.chart.id],
            this.chart.traces,
            this.chart.layout
        );
      },
      deep: true
    }
  },
  mounted: function () {
    Plotly.plot(this.$refs[this.chart.id], this.chart.traces, this.chart.layout);
  }
}
</script>

<style scoped>
.mainContent {
  padding: 20px;
}
</style>