Initial commit

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

@@ -0,0 +1,206 @@
+<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>