IUPred2Chart.vue

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

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

export default {
  name: 'IUPred2Chart',
  components: {
    plotlyChart
  },
  props: ['score', 'x'],
  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>