<template>
  <!-- <div class="shapleyArea">
    <strong> Previous Batch values : </strong>
    <div
      class="shapleyValue"
      v-for="explanation in this.explanations.sensor_data"
    >
      The {{ explanation["name_explanation"] }} of
      <span class="text-primary font-weight-bold">{{
        explanation["sensor_name"]
      }}</span>
      is {{ explanation["order"] }} than normal values (<span
        class="text-primary font-weight-bold"
        >{{ explanation["real_value"] }}</span
      >
      vs {{ explanation["avg_success_value"] }})
    </div>
  </div> -->
  <div class="q-pa-lg row q-gutter-md bg-white items-center justify-left">
    <RiskGauge
      :value="this.failure_risk"
      :nb_features="
        this.explanations['sensor_data']
          ? this.explanations['sensor_data'].length
          : 0
      "
      :batch_attributes="this.explanations['batch_attributes']"
      :next_failure_rate="this.explanations['next_failure_rate']"
    />
  </div>
  <hr
    style="
      margin: 0 16px 0 24px;
      height: 1px;
      border-width: 0;
      color: #cccccc;
      background-color: #cccccc;
    "
  />
  <div
    class="q-pa-lg row q-gutter-md items-center justify-left"
    style="padding-top: 8px"
  >
    <FeatureExplanationCard
      :sensor_name="explanation['sensor_name']"
      :name_explanation="explanation['name_explanation']"
      :order="explanation['order']"
      :real_value="parseFloat(explanation['real_value'])"
      :avg_success_value="parseFloat(explanation['avg_success_value'])"
      :shapley_value="parseFloat(explanation['shapley_value'])"
      :aggregation="explanation['aggregation']"
      v-for="explanation in this.explanations['sensor_data']"
    >
    </FeatureExplanationCard>
  </div>
  <!-- <div class="chart q-mr-xl q-mt-md">
    <BsEchart
      v-for="chart in this.prediction"
      :option="chart.option"
    ></BsEchart>
  </div> -->
</template>

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

export default {
  name: "Shapley",
  props: ["explanations", "prediction", "failure_risk"],
  data() {
    return {
      nb_features: 0,
    };
  },
  components: {
    BsEchart,
    FeatureExplanationCard,
    RiskGauge,
  },
};
</script>

<style>
.shapleyArea {
  width: auto;
  height: auto;
  background: #fff;
  border: 1px solid #e6e9ed;
  border-radius: 10px;
  font-family: "SourceSansPro";
  font-size: 16px;
  padding: 10px;
  margin: 10px;
}
.q-page-container {
  background: #f7f7f7;
}
</style>
