<template>
  <div id="page-content-wrapper" class="main">
    <h2>Statistics</h2>

    <fetch-stats>
      <template slot-scope="{response, loading}">
        <slot :response="response" :loading="loading">
          <div v-if="loading">Loading...</div>
          <div v-else-if="response !== null">
            <species-chart :condensate="response.species_wise_condensates" :protein="response.species_wise_proteins"></species-chart>
            <!--<evidence-chart :evidence-list="response.evidence_list_data" :evidence="response.evidence_data"></evidence-chart>-->
            <histograms :condensate="response.condensate_proteome_histogram"></histograms>
          </div>
        </slot>
      </template>
    </fetch-stats>
  </div>
</template>

<script>
import FetchStats from '@/components/DDCODE/fetchStats.vue'
import SpeciesChart from "@/components/SpeciesChart";
import Histograms from "@/components/Histograms";
// import EvidenceChart from "@/components/EvidenceChart";
const _ = require('lodash')

export default {
  name: 'LandingPage',
  components: {
    FetchStats, SpeciesChart, Histograms, // EvidenceChart,
  },
  props: {
    msg: String
  },
  data() {
    return {
      isDev: process.env.NODE_ENV === 'development'
    }
  },
  computed: {
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
@import url('~@/assets/bootstrap.css');

.main {
  margin: 1.5rem;
}

h3 {
  margin: 40px 0 0;
}

a {
  color: #42b983;
}

ul.a {
  list-style-type: disc;
  list-style-position: inside;
}

input[type="radio"] {
  margin: 2px;
}

.radio-label {
  margin-left: 0px;
  margin-right: 5px;
}
</style>