<template>
  <div class="dashboard">
    <div class="title" v-if="this.title">
      <h3>{{ this.title }}</h3>
    </div>
    <div class="charts">
      <BsEchart v-for="chart in this.charts" :option="chart.option"></BsEchart>
    </div>
  </div>
</template>

<script>
import BsEchart from "./BsEchart.vue";

export default {
  name: "BsDashboard",
  props: ["title", "charts"],
  updated: function () {
    if (!this.charts) {
      console.log("charts not initialized");
    }
  },
  components: {
    BsEchart,
  },
};
</script>

<style scoped>
.dashboard {
  /* height: 100%; */
  background-color: #f7f7f7;
}
.title {
  background-color: #f7f7f7;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 15px;
  align-items: center;
}

.charts {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  height: auto;
  background-color: #f7f7f7;
  font-family: "SourceSansPro";
  font-weight: 500;
  justify-content: center;
  align-content: space-around;
  align-items: center;
  font-size: 16px;
}
</style>
