<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: "IUPred2Chart",
  props: ["score", "x"],
  components: {
    plotlyChart
  },
  data() {
    return {
      chartConfig: {
        id: "iupred2",
        traces: [
          {
            y: this.score,
            x: _.range(1, this.score.length + 1),
            text: this.x.split(''),
            // x: this.x,
            line: {
              color: '#5e849e',
              width: 3,
              shape: "line"
            },
            type: 'scatter',
            mode: 'lines'
          }
        ],
        layout: {
          title: 'IUPred2A Plot',
          xaxis: {
            title: 'Position'
            // tickmode: 'array', tickvals: _.range(1, this.score.length + 1),
            // ticktext: this.x.split(''),
            // tickformatstops: [
            //   {dtickrange: [0, 50], value: _.range(1, this.score.length + 1)},
            //   {dtickrange: [50, 100], value: _.range(1, this.score.length + 1, 3)},
            //   {dtickrange: [100, 500], value: _.range(1, this.score.length + 1, 5)}
            // ]
          },
          yaxis: {title: 'Score', range: [0, 1]}
        }
      }
    }
  }
}
</script>

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