first commit

2024-05-29 22:34:28 +05:00
commit e63fc41a20
1470 changed files with 174828 additions and 0 deletions
--- a/resources/js/views/dashboards/analytics/AnalyticsWeeklyOverview.vue
+++ b/resources/js/views/dashboards/analytics/AnalyticsWeeklyOverview.vue
@@ -0,0 +1,137 @@
+<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 disabledColor = `rgba(${ hexToRgb(currentTheme.value['on-surface']) },${ variableTheme.value['disabled-opacity'] })`
+  const borderColor = `rgba(${ hexToRgb(String(variableTheme.value['border-color'])) },${ variableTheme.value['border-opacity'] })`
+  
+  return {
+    chart: {
+      offsetY: -10,
+      offsetX: -15,
+      parentHeightOffset: 0,
+      toolbar: { show: false },
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 6,
+        distributed: true,
+        columnWidth: '30%',
+      },
+    },
+    stroke: {
+      width: 2,
+      colors: [currentTheme.value.surface],
+    },
+    legend: { show: false },
+    grid: {
+      borderColor,
+      strokeDashArray: 7,
+      xaxis: { lines: { show: false } },
+    },
+    dataLabels: { enabled: false },
+    colors: [
+      currentTheme.value['track-bg'],
+      currentTheme.value['track-bg'],
+      currentTheme.value['track-bg'],
+      'rgba(var(--v-theme-primary),1)',
+      currentTheme.value['track-bg'],
+      currentTheme.value['track-bg'],
+    ],
+    states: {
+      hover: { filter: { type: 'none' } },
+      active: { filter: { type: 'none' } },
+    },
+    xaxis: {
+      categories: [
+        'Sun',
+        'Mon',
+        'Tue',
+        'Wed',
+        'Thu',
+        'Fri',
+        'Sat',
+      ],
+      tickPlacement: 'on',
+      labels: { show: false },
+      crosshairs: { opacity: 0 },
+      axisTicks: { show: false },
+      axisBorder: { show: false },
+    },
+    yaxis: {
+      show: true,
+      tickAmount: 4,
+      labels: {
+        style: {
+          colors: disabledColor,
+          fontSize: '13px',
+        },
+        formatter: value => `${ value > 999 ? `${ (value / 1000).toFixed(0) }` : value }k`,
+      },
+    },
+    responsive: [
+      {
+        breakpoint: 1560,
+        options: { plotOptions: { bar: { columnWidth: '35%' } } },
+      },
+      {
+        breakpoint: 1380,
+        options: { plotOptions: { bar: { columnWidth: '45%' } } },
+      },
+    ],
+  }
+})
+
+const series = [{
+  data: [
+    37,
+    57,
+    45,
+    75,
+    57,
+    40,
+    65,
+  ],
+}]
+</script>
+
+<template>
+  <VCard>
+    <VCardItem>
+      <VCardTitle>Weekly Overview</VCardTitle>
+
+      <template #append>
+        <div class="me-n3">
+          <MoreBtn />
+        </div>
+      </template>
+    </VCardItem>
+
+    <VCardText>
+      <VueApexCharts
+        type="bar"
+        :options="options"
+        :series="series"
+        :height="200"
+      />
+
+      <div class="d-flex align-center mb-5 gap-x-4">
+        <h4 class="text-h4">
+          45%
+        </h4>
+        <p class="mb-0">
+          Your sales performance is 45% <span class="text-high-emphasis">😎</span> better compared to last month
+        </p>
+      </div>
+
+      <VBtn block>
+        Details
+      </VBtn>
+    </VCardText>
+  </VCard>
+</template>