<template>
  <plotly-chart :chart="chartConfig"></plotly-chart>
</template>

<script>
// require modules
/* eslint-disable no-unused-vars */
import plotlyChart from "@/components/PlotlyChart.vue";
const _ = require('lodash');

export default {
  name: "BarcodePlot",
  props: ["x"],
  components: {
    plotlyChart
  },
  data() {
    return {
      chartConfig: {
        id: "barcodePlot",
        traces: [
          {
            //y: ['C','W','Y','F','M','L','I','V','A','G','P','Q','N','T','S','E','D','K','H','R'],
            y: this.x.split(''),
            x: _.range(1, this.x.length + 1),
            // x: this.x,
            mode: 'markers',
            type: 'scatter',
            marker : {
              opacity: 1,
              size: 8,
              symbol: 'line-ns-open'
            }
          }
        ],
        layout: {
          title: 'Barcode Plot',
          xaxis: {
            title: 'Position',
            zeroline: false,
            // range: [0, this.x.length + 1]
          },
          yaxis: {
            autotick: false,
            ticks: 'outside',
            categoryarray: ['C','W','Y','F','M','L','I','V','A','G','P','Q','N','T','S','E','D','K','H','R'],
            tickfont: {
              family: 'Arial, sans-serif',
              size: 12,
              color: 'black'
            },
          }
        }
      }
    }
  },
  mounted() {
    // console.log(this.x.split(''))
  }
}
</script>

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