<template>
  <Hidable name="Geometry Comparison" v-if="getCompleteLoopDetails.length >= 2">
    <section class="charts">
      <Barchart
        class="chart"
        :details="getCompleteLoopDetails"
        :selector="(l) => l.distance"
        label="D"
      />
      <AngleDial
        :details="getCompleteLoopDetails"
        :selector="(l) => l.delta"
        label="δ"
      />
      <AngleDial
        :details="getCompleteLoopDetails"
        :selector="(l) => l.theta"
        label="θ"
      />
      <AngleDial
        :details="getCompleteLoopDetails"
        :selector="(l) => l.rho"
        label="ϱ"
        is360
      />
    </section>
  </Hidable>
</template>

<script>
import Barchart from "./GreeksComparsions/Barchart";
import AngleDial from "./GreeksComparsions/AngleDial";
import Hidable from "./Hidable";

import { mapGetters } from "vuex";

export default {
  components: {
    Barchart,
    AngleDial,
    Hidable,
  },
  computed: {
    ...mapGetters(["getCompleteLoopDetails"]),
  },
};
</script>

<style scoped>
.charts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 5px;
}
.charts > * {
  margin: 10px 10px;
}
</style>