Initial commit

resources/js/views/dashboards/crm/CrmAnalyticsSales.vue

@@ -0,0 +1,164 @@
+<script setup>
+import { useTheme } from 'vuetify'
+import { hexToRgb } from '@layouts/utils'
+
+const vuetifyTheme = useTheme()
+
+const series = [
+  {
+    name: 'Sales',
+    data: [
+      32,
+      27,
+      27,
+      30,
+      25,
+      25,
+    ],
+  },
+  {
+    name: 'Visits',
+    data: [
+      25,
+      35,
+      20,
+      20,
+      20,
+      20,
+    ],
+  },
+]
+
+const chartOptions = computed(() => {
+  const currentTheme = vuetifyTheme.current.value.colors
+  const variableTheme = vuetifyTheme.current.value.variables
+  const borderColor = `rgba(${ hexToRgb(String(variableTheme['border-color'])) },${ variableTheme['border-opacity'] })`
+  const labelColor = `rgba(${ hexToRgb(currentTheme['on-surface']) },${ variableTheme['disabled-opacity'] })`
+  const legendColor = `rgba(${ hexToRgb(currentTheme['on-background']) },${ variableTheme['medium-emphasis-opacity'] })`
+  
+  return {
+    chart: {
+      type: 'radar',
+      toolbar: { show: false },
+    },
+    plotOptions: {
+      radar: {
+        polygons: {
+          strokeColors: borderColor,
+          connectorColors: borderColor,
+        },
+      },
+    },
+    stroke: {
+      show: false,
+      width: 0,
+    },
+    legend: {
+      show: true,
+      fontSize: '13px',
+      position: 'bottom',
+      labels: {
+        colors: legendColor,
+        useSeriesColors: false,
+      },
+      markers: {
+        height: 12,
+        width: 12,
+        offsetX: -8,
+      },
+      itemMargin: { horizontal: 10 },
+      onItemHover: { highlightDataSeries: false },
+    },
+    colors: [
+      currentTheme.primary,
+      currentTheme.info,
+    ],
+    fill: {
+      opacity: [
+        1,
+        0.85,
+      ],
+    },
+    markers: { size: 0 },
+    grid: {
+      show: false,
+      padding: {
+        top: 0,
+        bottom: -5,
+      },
+    },
+    xaxis: {
+      categories: [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+      ],
+      labels: {
+        show: true,
+        style: {
+          colors: [
+            labelColor,
+            labelColor,
+            labelColor,
+            labelColor,
+            labelColor,
+            labelColor,
+          ],
+          fontSize: '13px',
+          fontFamily: 'Public Sans',
+        },
+      },
+    },
+    yaxis: {
+      show: false,
+      min: 0,
+      max: 40,
+      tickAmount: 4,
+    },
+    responsive: [{
+      breakpoint: 769,
+      options: { chart: { height: 372 } },
+    }],
+  }
+})
+
+const moreList = [
+  {
+    title: 'View More',
+    value: 'View More',
+  },
+  {
+    title: 'Delete',
+    value: 'Delete',
+  },
+]
+</script>
+
+<template>
+  <VCard>
+    <VCardItem class="pb-4">
+      <VCardTitle>Sales</VCardTitle>
+      <VCardSubtitle>Last 6 Months</VCardSubtitle>
+
+      <template #append>
+        <div class="mt-n4 me-n2">
+          <MoreBtn
+            size="small"
+            :menu-list="moreList"
+          />
+        </div>
+      </template>
+    </VCardItem>
+
+    <VCardText>
+      <VueApexCharts
+        :options="chartOptions"
+        :series="series"
+        height="290"
+      />
+    </VCardText>
+  </VCard>
+</template>