<template>
  <div class="container">
    <div v-for="(legend, i) in legendData" :key="i" class="legend-entry">
        <span class="legend-circle" :style="{ 'background-color': legend.color }"></span>
        <span class="legend-label">{{ legend.label }}</span>
    </div>
  </div>
</template>

<script setup>
import {ref,onMounted} from "vue";
import {getLegendData} from "./common";
let legendData = ref([]);

function changeLegedData(list){
  legendData.value = getLegendData(list);
}
defineExpose({changeLegedData})
</script>

<style lang="scss" scoped>
.container{
  position: absolute;
  width: 100%;
  bottom: 8%;
  right: 5%;
  z-index: 100;
}
.legend-entry {
  float: right;
  display: flex;
  flex-direction: row;
  margin-right: 5px;
}

.legend-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 3px;
  border: 1px solid black;
}

.legend-label {
  font-size: 14px;
  color: black;
}
</style>
