first commit

resources/js/views/pages/cards/card-statistics/CardStatisticsTotalSalesCharts.vue

@@ -0,0 +1,123 @@
+<script setup>
+import { useTheme } from 'vuetify'
+import { hexToRgb } from '@layouts/utils'
+
+const vuetifyTheme = useTheme()
+const currentTheme = computed(() => vuetifyTheme.current.value.colors)
+
+const chartOptions = computed(() => {
+  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 },
+      animations: { enabled: false },
+    },
+    stroke: {
+      width: 5,
+      colors: [currentTheme.value.surface],
+    },
+    legend: { show: false },
+    tooltip: { enabled: true },
+    dataLabels: { enabled: false },
+    colors: [
+      currentTheme.value.primary,
+      currentTheme.value.info,
+      currentTheme.value.warning,
+      currentTheme.value.error,
+    ],
+    labels: [
+      'Comments',
+      'Replies',
+      'Shares',
+      'Likes',
+    ],
+    series: [
+      45,
+      10,
+      18,
+      27,
+    ],
+    grid: {
+      padding: {
+        top: -7,
+        bottom: 5,
+      },
+    },
+    states: {
+      hover: { filter: { type: 'none' } },
+      active: { filter: { type: 'none' } },
+    },
+    plotOptions: {
+      pie: {
+        expandOnClick: false,
+        donut: {
+          size: '75%',
+          labels: {
+            show: true,
+            value: {
+              fontSize: '1.15rem',
+              fontFamily: 'Inter',
+              fontWeight: 500,
+              offsetY: -18,
+              color: primaryTextColor,
+              formatter: o => `${ Number.parseInt(o) }%`,
+            },
+            name: {
+              offsetY: 18,
+              fontFamily: 'Inter',
+            },
+            total: {
+              label: '1 Quarter',
+              show: true,
+              color: secondaryTextColor,
+              fontSize: '0.75rem',
+              fontWeight: 400,
+              formatter: () => '28%',
+            },
+          },
+        },
+      },
+    },
+  }
+})
+</script>
+
+<template>
+  <VCard class="overflow-visible">
+    <VCardText class="d-flex justify-space-between align-center gap-3">
+      <div>
+        <h5 class="text-h5 mb-1">
+          Total Sales
+        </h5>
+
+        <div class="text-body-1 mb-3">
+          Calculated in last 7 days
+        </div>
+        <div class="d-flex align-center flex-wrap">
+          <h4 class="text-h4">
+            $25,980
+          </h4>
+          <div class="d-flex align-center">
+            <VIcon
+              icon="ri-arrow-up-s-line"
+              size="24"
+              color="success"
+            />
+            <span class="text-body-1 text-success">15.6%</span>
+          </div>
+        </div>
+      </div>
+
+      <VueApexCharts
+        type="donut"
+        :options="chartOptions"
+        :height="120"
+        :series="[45, 10, 18, 27]"
+        :width="110"
+      />
+    </VCardText>
+  </VCard>
+</template>