influence/components/home/dashboard/layout01/user/layout01UserWidgetM.vue

<template>
  <ul>
    <li 
      v-for="(item, index) in props.items"
      :key="`user-widget-${index}`"
      :class="item.level"
    > 
      <div class="headers">
        <div class="title">
          {{ item.tenantName }}
        </div>
      </div>
      <div class="chart--box">
        <Doughnut
          :data="item.chartData"
          :options="chartOptions"
        />
        <div class="current--value">
          {{ toRoundFix(item.curSubscriber, 0) }} / {{ toRoundFix(item.maxSubscriber, 0) }}
        </div>              
      </div>
      <div class="current--value--ps">
        {{ item.perSubscriber }}<i class="unit">%</i>
      </div>
    </li>        
  </ul>
</template>

<script setup>
  /***********************
   *     import
   ************************/
  import { useI18n } from "vue-i18n"
  import apiUrl from '@/composables/useApi';
  import useAxios from '@/composables/useAxios';
  import useUtil from '@/composables/useUtil';
  import { Doughnut } from 'vue-chartjs';
  import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LineController, LineElement, PointElement, ArcElement, CategoryScale, LinearScale } from 'chart.js';

  /***********************
   *     plugins inject
   ************************/
  const { $toast, $log, $dayjs, $eventBus } = useNuxtApp()

  // props
  const props = defineProps({
    items:  {
      type: Array,
      default: () => []
    },
  })

  // 참조가능 데이터 설정
  defineExpose({})

  // 발신 이벤트 선언
  const emit = defineEmits([]);
  
  const i18n = useI18n();

  ChartJS.register(Title,
    Tooltip,
    Legend,
    BarElement,
    LineController,
    LineElement,
    PointElement,
    CategoryScale,
    ArcElement,
    LinearScale)


  /***********************
   *     data & created
   ************************/
  const chartOptions = {    
    responsive: true,
    maintainAspectRatio: false,
    cutout:"75%",    
    rotation: 270, 
    circumference: 180,        

    plugins: {        
      legend: {
        position:'top',
        display: false        
      },
      tooltip: {
        enabled:false        
      }
    }
  }

  /***********************
   *     Methods
   ************************/
   const toRoundFix = (data, digit) => parseFloat(data).toFixed(digit);
</script>