<script setup lang="ts">
import YlLine from "@/components/charts/yl-line.vue";
import { transNum } from "@/utils/utils.ts";

defineProps<{
  xData: string[];
  data: { sent: string; rec: string }[];
}>();
</script>

<template>
  <div style="height: 200px; margin-bottom: 2rem">
    <yl-line
      :x-data="xData"
      :y-data="[
        { name: '上传', value: data.map((e) => transNum(e.sent, 'KB')) },
        { name: '下载', value: data.map((e) => transNum(e.rec, 'KB')) },
      ]"
      smooth
      title="网速(KB/s)"
    />
  </div>
</template>

<style scoped></style>
