panel/resources/js/views/pages/cards/card-widgets/CardWidgetsCarrierPerformance.vue

<script setup>
const colors = {
  series1: '#7367F0',
  series2: '#8F85F3',
  series3: '#ABA4F6',
}

const bodyColor = 'rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity))'
const labelColor = 'rgba(var(--v-theme-on-background), var(--v-disabled-opacity))'
const borderColor = 'rgba(var(--v-border-color), var(--v-border-opacity))'

const series = [
  {
    name: 'Delivery rate',
    type: 'column',
    data: [
      5,
      4.5,
      4,
      3,
    ],
  },
  {
    name: 'Delivery time',
    type: 'column',
    data: [
      4,
      3.5,
      3,
      2.5,
    ],
  },
  {
    name: 'Delivery exceptions',
    type: 'column',
    data: [
      3.5,
      3,
      2.5,
      2,
    ],
  },
]

const chartOptions = {
  chart: {
    type: 'bar',
    parentHeightOffset: 0,
    stacked: false,
    toolbar: { show: false },
    zoom: { enabled: false },
  },
  plotOptions: {
    bar: {
      horizontal: false,
      columnWidth: '50%',
      borderRadiusApplication: 'end',
      borderRadius: 4,
    },
  },
  dataLabels: { enabled: false },
  xaxis: {
    tickAmount: 10,
    categories: [
      'Carrier A',
      'Carrier B',
      'Carrier C',
      'Carrier D',
    ],
    labels: {
      style: {
        colors: labelColor,
        fontSize: '13px',
        fontFamily: 'Public Sans',
        fontWeight: 400,
      },
    },
    axisBorder: { show: false },
    axisTicks: { show: false },
  },
  yaxis: {
    tickAmount: 4,
    max: 5,
    labels: {
      style: {
        colors: labelColor,
        fontSize: '13px',
        fontFamily: 'Public Sans',
        fontWeight: 400,
      },
      formatter(o) {
        return o
      },
    },
  },
  legend: {
    position: 'bottom',
    markers: {
      width: 8,
      height: 8,
      offsetX: -3,
      radius: 12,
    },
    height: 33,
    offsetY: 10,
    itemMargin: {
      horizontal: 10,
      vertical: 0,
    },
    fontSize: '13px',
    fontFamily: 'Public Sans',
    fontWeight: 400,
    labels: {
      colors: bodyColor,
      useSeriesColors: false,
    },
  },
  grid: {
    borderColor,
    strokeDashArray: 6,
  },
  colors: [
    colors.series1,
    colors.series2,
    colors.series3,
  ],
  fill: { opacity: 1 },
  responsive: [
    {
      breakpoint: 1400,
      options: {
        chart: { height: 275 },
        legend: {
          fontSize: '13px',
          offsetY: 10,
        },
      },
    },
    {
      breakpoint: 576,
      options: {
        chart: { height: 300 },
        legend: {
          itemMargin: {
            vertical: 5,
            horizontal: 10,
          },
          offsetY: 7,
        },
      },
    },
  ],
}

const moreList = [
  {
    title: 'View More',
    value: 'View More',
  },
  {
    title: 'Delete',
    value: 'Delete',
  },
]
</script>

<template>
  <VCard>
    <VCardItem class="pb-0">
      <VCardTitle>Carrier Performance</VCardTitle>

      <template #append>
        <MoreBtn :menu-list="moreList" />
      </template>
    </VCardItem>

    <VCardText>
      <VueApexCharts
        :options="chartOptions"
        :series="series"
        height="300"
        class="carrier-chart my-2"
      />
    </VCardText>
  </VCard>
</template>

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

.carrier-chart {
  .apexcharts-legend {
    .apexcharts-legend-series {
      border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
      border-radius: 6px;
      margin-block-end: 0.3125rem !important;
      margin-inline: 0 1rem !important;
      padding-inline: 0.75rem;

      &:last-child {
        margin-inline: 0 !important;
      }
    }
  }
}
</style>