015/front/components/AboutChartTooltip.vue

<script setup lang="ts">
import { filesize } from "filesize";

const props = defineProps<{
  data: { name: string; value: string; color: string }[];
  title: string;
}>();
const dataKeyMap = {
  file_size: {
    "zh-CN": "文件大小",
    en: "File Size",
  },
  file_num: {
    "zh-CN": "文件数量",
    en: "File Num",
  },
  processed: {
    "zh-CN": "处理数量",
    en: "Processed",
  },
  failed: {
    "zh-CN": "失败数量",
    en: "Failed",
  },
};
</script>

<template>
  <div class="rounded-md bg-white p-2 flex flex-col gap-2">
    <div class="text-sm font-medium">{{ title }}</div>
    <div v-for="(item, index) in data" :key="index">
      <div class="flex flex-row items-center gap-2">
        <div
          class="h-5 w-2 rounded-full"
          :style="{ backgroundColor: item.color ?? '#222' }"
        ></div>
        <div class="text-xs font-medium">
          {{
            dataKeyMap?.[item.name as keyof typeof dataKeyMap]?.["en"] ??
            item.name
          }}
        </div>
        <div class="text-sm">
          {{
            ["file_size"]?.includes(item?.name)
              ? filesize(item.value)
              : item.value
          }}
        </div>
      </div>
    </div>
  </div>
</template>