init

2024-07-08 17:16:10 +05:30
parent 4fa50c088f
commit d098e5341d
496 changed files with 47210 additions and 0 deletions
--- a/javascript-version/views/dashboard/AnalyticsOrderStatistics.vue
+++ b/javascript-version/views/dashboard/AnalyticsOrderStatistics.vue
@@ -0,0 +1,208 @@
+<script setup>
+import { useTheme } from 'vuetify'
+import { hexToRgb } from '@core/utils/colorConverter'
+
+const vuetifyTheme = useTheme()
+
+const series = [
+  45,
+  80,
+  20,
+  40,
+]
+
+const chartOptions = computed(() => {
+  const currentTheme = vuetifyTheme.current.value.colors
+  const variableTheme = vuetifyTheme.current.value.variables
+  const secondaryTextColor = `rgba(${ hexToRgb(String(currentTheme['on-surface'])) },${ variableTheme['medium-emphasis-opacity'] })`
+  const primaryTextColor = `rgba(${ hexToRgb(String(currentTheme['on-surface'])) },${ variableTheme['high-emphasis-opacity'] })`
+  
+  return {
+    chart: {
+      sparkline: { enabled: true },
+      animations: { enabled: false },
+    },
+    stroke: {
+      width: 6,
+      colors: [currentTheme.surface],
+    },
+    legend: { show: false },
+    tooltip: { enabled: false },
+    dataLabels: { enabled: false },
+    labels: [
+      'Fashion',
+      'Electronic',
+      'Sports',
+      'Decor',
+    ],
+    colors: [
+      currentTheme.success,
+      currentTheme.primary,
+      currentTheme.secondary,
+      currentTheme.info,
+    ],
+    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,
+            name: {
+              offsetY: 17,
+              fontSize: '13px',
+              color: secondaryTextColor,
+              fontFamily: 'Public Sans',
+            },
+            value: {
+              offsetY: -17,
+              fontSize: '18px',
+              color: primaryTextColor,
+              fontFamily: 'Public Sans',
+              fontWeight: 500,
+            },
+            total: {
+              show: true,
+              label: 'Weekly',
+              fontSize: '13px',
+              lineHeight: '18px',
+              formatter: () => '38%',
+              color: secondaryTextColor,
+              fontFamily: 'Public Sans',
+            },
+          },
+        },
+      },
+    },
+  }
+})
+
+const orders = [
+  {
+    amount: '82.5k',
+    title: 'Electronic',
+    avatarColor: 'primary',
+    subtitle: 'Mobile, Earbuds, TV',
+    avatarIcon: 'bx-mobile-alt',
+  },
+  {
+    amount: '23.8k',
+    title: 'Fashion',
+    avatarColor: 'success',
+    subtitle: 'Tshirt, Jeans, Shoes',
+    avatarIcon: 'bx-closet',
+  },
+  {
+    amount: 849,
+    title: 'Decor',
+    avatarColor: 'info',
+    subtitle: 'Fine Art, Dining',
+    avatarIcon: 'bx-home',
+  },
+  {
+    amount: 99,
+    title: 'Sports',
+    avatarColor: 'secondary',
+    subtitle: 'Football, Cricket Kit',
+    avatarIcon: 'bx-football',
+  },
+]
+
+const moreList = [
+  {
+    title: 'Share',
+    value: 'Share',
+  },
+  {
+    title: 'Refresh',
+    value: 'Refresh',
+  },
+  {
+    title: 'Update',
+    value: 'Update',
+  },
+]
+</script>
+
+<template>
+  <VCard>
+    <VCardItem>
+      <VCardTitle>
+        Order Statistics
+      </VCardTitle>
+      <VCardSubtitle>42.82k Total Sales</VCardSubtitle>
+
+      <template #append>
+        <MoreBtn :menu-list="moreList" />
+      </template>
+    </VCardItem>
+
+    <VCardText>
+      <div class="d-flex align-center justify-space-between mb-6">
+        <div class="">
+          <h3 class="text-h3 mb-1">
+            8,258
+          </h3>
+          <div class="text-caption text-medium-emphasis">
+            Total Orders
+          </div>
+        </div>
+
+        <div>
+          <VueApexCharts
+            type="donut"
+            :height="120"
+            width="100"
+            :options="chartOptions"
+            :series="series"
+          />
+        </div>
+      </div>
+
+      <VList class="card-list">
+        <VListItem
+          v-for="order in orders"
+          :key="order.title"
+        >
+          <template #prepend>
+            <VAvatar
+              size="40"
+              rounded
+              variant="tonal"
+              :color="order.avatarColor"
+            >
+              <VIcon :icon="order.avatarIcon" />
+            </VAvatar>
+          </template>
+
+          <VListItemTitle class="font-weight-medium">
+            {{ order.title }}
+          </VListItemTitle>
+          <VListItemSubtitle class="text-body-2">
+            {{ order.subtitle }}
+          </VListItemSubtitle>
+
+          <template #append>
+            <span>{{ order.amount }}</span>
+          </template>
+        </VListItem>
+      </VList>
+    </VCardText>
+  </VCard>
+</template>
+
+<style lang="scss">
+.card-list {
+  --v-card-list-gap: 1.25rem;
+}
+</style>