AcademyCardInterestedTopics.vue

<script setup lang="ts">
const borderColor = 'rgba(var(--v-border-color), var(--v-border-opacity))'

// Topics Charts config
const topicsChartConfig = {
  chart: {
    height: 270,
    type: 'bar',
    toolbar: {
      show: false,
    },
  },

  plotOptions: {
    bar: {
      horizontal: true,
      barHeight: '70%',
      distributed: true,
      borderRadius: 7,
      borderRadiusApplication: 'end',
    },
  },

  colors: [
    'rgba(var(--v-theme-primary),1)', '#16B1FF', '#56CA00', '#8A8D93', '#FF4C51', '#FFB400',
  ],

  grid: {
    borderColor,
    strokeDashArray: 10,
    xaxis: {
      lines: {
        show: true,
      },
    },
    yaxis: {
      lines: {
        show: false,
      },
    },
    padding: {
      top: -35,
      bottom: -12,
    },
  },

  dataLabels: {
    enabled: true,
    style: {
      colors: ['#fff'],
      fontWeight: 200,
      fontSize: '13px',

    },
    offsetX: 0,
    dropShadow: {
      enabled: false,
    },
    formatter(val: string, opt: any) {
      return topicsChartConfig.labels[opt.dataPointIndex]
    },
  },
  labels: ['UI Design', 'UX Design', 'Music', 'Animation', 'Vue', 'SEO'],

  xaxis: {
    categories: ['6', '5', '4', '3', '2', '1'],
    axisBorder: {
      show: false,
    },
    axisTicks: {
      show: false,
    },
    labels: {
      style: {
        colors: 'rgba(var(--v-theme-on-background), var(--v-disabled-opacity))',
        fontSize: '13px',
      },
      formatter(val: string) {
        return `${val}%`
      },
    },
  },

  yaxis: {
    max: 35,
    labels: {
      style: {
        colors: 'rgba(var(--v-theme-on-background), var(--v-disabled-opacity))',
        fontSize: '13px',
      },
    },
  },

  tooltip: {
    enabled: true,
    style: {
      fontSize: '12px',
    },
    onDatasetHover: {
      highlightDataSeries: false,
    },
  },
  legend: {
    show: false,
  },

}

const topicsChartSeries = [
  {
    data: [35, 20, 14, 12, 10, 9],
  },
]

const topicsData = [
  { title: 'UI Design', value: 35, color: 'primary' },
  { title: 'UX Design', value: 20, color: 'info' },
  { title: 'Music', value: 14, color: 'success' },
]

const moreTopics = [
  { title: 'Animation', value: 12, color: 'secondary' },
  { title: 'Vue', value: 10, color: 'error' },
  { title: 'SEO', value: 9, color: 'warning' },
]
</script>

<template>
  <VCard class="topicCard">
    <VCardItem title="Topic you are interested in">
      <template #append>
        <MoreBtn />
      </template>
    </VCardItem>

    <VCardText>
      <VRow>
        <VCol
          cols="12"
          sm="6"
        >
          <VueApexCharts
            type="bar"
            height="300"
            :options="topicsChartConfig"
            :series="topicsChartSeries"
            class="mb-md-0 mb-6"
          />
        </VCol>

        <VCol class="d-flex justify-space-around align-center">
          <div class="d-flex flex-column gap-y-12">
            <div
              v-for="topic in topicsData"
              :key="topic.title"
              class="d-flex gap-x-2"
            >
              <VBadge
                inline
                dot
                :color="topic.color"
                class="mt-1"
              />
              <div>
                <div
                  class="text-body-1"
                  style="min-inline-size: 90px;"
                >
                  {{ topic.title }}
                </div>
                <h5 class="text-h5">
                  {{ topic.value }}%
                </h5>
              </div>
            </div>
          </div>

          <div class="d-flex flex-column gap-y-12">
            <div
              v-for="topic in moreTopics"
              :key="topic.title"
              class="d-flex gap-x-2"
            >
              <VBadge
                inline
                dot
                :color="topic.color"
                class="mt-1"
              />
              <div>
                <div
                  class="text-body-1"
                  style="min-inline-size: 90px;"
                >
                  {{ topic.title }}
                </div>
                <h5 class="text-h5">
                  {{ topic.value }}%
                </h5>
              </div>
            </div>
          </div>
        </VCol>
      </VRow>
    </VCardText>
  </VCard>
</template>

<style lang="scss" scoped>
@use "@core/scss/template/libs/apex-chart.scss";

.topicCard{
  .v-badge.v-badge--dot{
    .v-badge__badge{
      border-radius: 6px;
      block-size: 12px;
      inline-size: 12px;
    }
  }
}
</style>