first commit

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

@@ -0,0 +1,100 @@
+<script setup>
+import { useTheme } from 'vuetify'
+import { hexToRgb } from '@layouts/utils'
+
+const vuetifyTheme = useTheme()
+
+const options = computed(() => {
+  const currentTheme = ref(vuetifyTheme.current.value.colors)
+  const variableTheme = ref(vuetifyTheme.current.value.variables)
+  const secondaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['medium-emphasis-opacity'] })`
+  const primaryTextColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['high-emphasis-opacity'] })`
+  
+  return {
+    chart: { sparkline: { enabled: true } },
+    labels: ['Cricket'],
+    stroke: { lineCap: 'round' },
+    grid: { padding: { top: -10 } },
+    colors: [currentTheme.value.info],
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shade: 'light',
+        type: 'horizontal',
+        shadeIntensity: 0.2,
+        inverseColors: false,
+        opacityFrom: 1,
+        opacityTo: 0.1,
+        stops: [
+          0,
+          90,
+        ],
+      },
+    },
+    states: {
+      hover: { filter: { type: 'none' } },
+      active: { filter: { type: 'none' } },
+    },
+    plotOptions: {
+      radialBar: {
+        endAngle: 180,
+        startAngle: -180,
+        inverseOrder: true,
+        hollow: { size: '62%' },
+        track: { background: currentTheme.value['track-bg'] },
+        dataLabels: {
+          name: { offsetY: 26 },
+          value: {
+            offsetY: -14,
+            fontSize: '24px',
+            fontWeight: 500,
+            color: primaryTextColor,
+            formatter: value => `${ value }k`,
+          },
+          total: {
+            show: true,
+            label: 'Growth',
+            fontSize: '15px',
+            fontWeight: 500,
+            color: secondaryTextColor,
+          },
+        },
+      },
+    },
+  }
+})
+
+const series = [78]
+</script>
+
+<template>
+  <VCard>
+    <VCardItem>
+      <VCardTitle>Total Visits</VCardTitle>
+      <template #append>
+        <div class="me-n3">
+          <MoreBtn density="compact" />
+        </div>
+      </template>
+    </VCardItem>
+
+    <VueApexCharts
+      type="radialBar"
+      :options="options"
+      :series="series"
+      :height="199"
+    />
+    <VCardText class="text-center pt-0">
+      <div class="text-body-1 mb-2">
+        42.2k new visits
+      </div>
+
+      <VChip
+        color="info"
+        size="small"
+      >
+        This year
+      </VChip>
+    </VCardText>
+  </VCard>
+</template>