@veristone/nuxt-v-app 0.1.0

package/app/components/Va/Cards/VaCardRevenueBarChart.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const LegendPosition = {
+  Top: "top",
+  Bottom: "bottom",
+  Left: "left",
+  Right: "right",
+};
+
+interface BarChartCategory {
+  name: string;
+  color: string;
+}
+
+defineProps<{
+  title: string;
+  totalValue: string;
+  data: Record<string, string | number>[];
+  categories: Record<string, BarChartCategory>;
+  yAxis: string[];
+  xFormatter: (i: number) => string;
+  yFormatter: (i: number) => string;
+}>();
+</script>
+<template>
+  <UCard>
+    <div class="mb-8">
+      <div class="flex items-center justify-between">
+        <h3 class="text-base font-normal text-lg text-highlighted mb-1">{{ title }}</h3>
+      </div>
+      <div class="text-default font-medium dark:font-semibold text-2xl">{{ totalValue }}</div>
+    </div>
+    <BarChart
+      :data="data"
+      :height="328"
+      :categories="categories"
+      :y-axis="yAxis"
+      :group-padding="0"
+      :bar-padding="0.2"
+      :x-num-ticks="6"
+      :y-num-ticks="5"
+      :radius="4"
+      :x-formatter="xFormatter"
+      :y-formatter="yFormatter"
+      :legend-position="LegendPosition.Bottom"
+      :hide-legend="false"
+      :y-grid-line="false"
+    />
+  </UCard>
+</template>

package/app/components/Va/Cards/VaCardSubtitle.vue

@@ -0,0 +1,5 @@
+<template>
+  <p class="text-xs uppercase tracking-wider text-muted font-medium">
+    <slot />
+  </p>
+</template>

package/app/components/Va/Cards/VaCardTitle.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="font-semibold text-3xl text-highlighted tabular-nums">
+    <slot />
+  </div>
+</template>

package/app/components/Va/Cards/VaCardWithActiveUsers.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+defineProps<{
+  metric: string
+  current: number | string
+  percentChange: number
+}>()
+</script>
+
+<template>
+  <UCard>
+    <div class="space-y-2">
+      <VaCardSubtitle>
+        {{ metric }}
+      </VaCardSubtitle>
+
+      <div class="flex items-center justify-start gap-4">
+        <VaCardTitle>
+          {{ current }}
+        </VaCardTitle>
+
+        <div class="flex items-center flex-col items-start text-sm">
+          <div class="flex items-center gap-1">
+            <UIcon
+              :name="
+                percentChange > 0 ? 'i-lucide-arrow-up' : 'i-lucide-arrow-down'
+              "
+              :class="percentChange > 0 ? 'text-success' : 'text-danger'"
+            />
+            <div
+              :class="percentChange > 0 ? 'text-success' : 'text-danger'"
+              class="mr-1"
+            >
+              {{ percentChange }}%
+            </div>
+          </div>
+          <span class="text-dimmed">from previous month</span>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>

package/app/components/Va/Cards/VaCardWithChart.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import type { BulletLegendItemInterface, ChartData } from './types'
+
+defineProps<{
+  name: string
+  value: number | string
+}>()
+
+const categories: Record<string, BulletLegendItemInterface> = {
+  users: {
+    name: 'Users',
+    color: '#00c16a'
+  }
+}
+
+const data: ChartData[] = [
+  {
+    date: 'Jan 23',
+    users: 234,
+    sessions: 1432,
+    churn: 5.2
+  },
+  {
+    date: 'Feb 23',
+    users: 431,
+    sessions: 1032,
+    churn: 4.3
+  },
+  {
+    date: 'Mar 23',
+    users: 543,
+    sessions: 1089,
+    churn: 5.1
+  },
+  {
+    date: 'Apr 23',
+    users: 489,
+    sessions: 988,
+    churn: 5.4
+  },
+  {
+    date: 'May 23',
+    users: 391,
+    sessions: 642,
+    churn: 5.5
+  },
+  {
+    date: 'Jun 23',
+    users: 582,
+    sessions: 786,
+    churn: 4.8
+  },
+  {
+    date: 'Jul 23',
+    users: 482,
+    sessions: 673,
+    churn: 4.5
+  },
+  {
+    date: 'Aug 23',
+    users: 389,
+    sessions: 761,
+    churn: 0
+  },
+  {
+    date: 'Sep 23',
+    users: 521,
+    sessions: 793,
+    churn: 0
+  },
+  {
+    date: 'Oct 23',
+    users: 434,
+    sessions: 543,
+    churn: 0
+  },
+  {
+    date: 'Nov 23',
+    users: 332,
+    sessions: 678,
+    churn: 0
+  },
+  {
+    date: 'Dec 23',
+    users: 275,
+    sessions: 873,
+    churn: 0
+  }
+]
+</script>
+
+<template>
+  <UCard>
+    <VaCardHeader>
+      <VaCardSubtitle>
+        {{ name }}
+      </VaCardSubtitle>
+      <template #action>
+        <UButton
+          icon="i-lucide-ellipsis-vertical"
+          size="sm"
+          variant="subtle"
+        />
+      </template>
+    </VaCardHeader>
+    <div class="space-y-2">
+      <VaCardTitle>
+        {{ value }}
+      </VaCardTitle>
+      <h5 class="text-sm text-muted">
+        {{ name }}
+      </h5>
+    </div>
+    <div class="mt-6">
+      <AreaChart
+        :data="data"
+        :categories="categories"
+        :min-max-ticks-only="true"
+        :y-num-ticks="1"
+        :x-formatter="(i: number) => `${data![i]!.date}`"
+        :y-formatter="() => ''"
+        :hide-legend="true"
+        :hide-x-axis="true"
+        :height="80"
+      />
+    </div>
+
+    <div>
+      <div class="text-sm space-x-1">
+        <span class="text-success-600">+20% ($36)</span>
+        <span class="text-muted">&bull;</span><span class="text-muted">vs Last Months</span>
+      </div>
+    </div>
+  </UCard>
+</template>

package/app/components/Va/Cards/VaCardWithChartBlock.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+defineProps<{
+  title: string
+  text: string
+}>()
+</script>
+
+<template>
+  <UCard
+    class="flex items-center relative pb-8"
+    variant="soft"
+  >
+    <div class="mb-16">
+      <slot />
+    </div>
+
+    <div class="space-y-1 absolute left-4 bottom-4 right-4">
+      <h3 class="font-semibold">
+        {{ title }}
+      </h3>
+      <p class="text-muted">
+        {{ text }}
+      </p>
+    </div>
+  </UCard>
+</template>

package/app/components/Va/Cards/VaCardWithIndicator.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+defineProps<{
+  metric: string
+  current: number | string
+  percentChange: number
+}>()
+</script>
+
+<template>
+  <UCard>
+    <div class="text-xs uppercase tracking-wider text-muted font-medium">
+      {{ metric }}
+    </div>
+
+    <div class="mt-2 flex items-center justify-start gap-6">
+      <p class="font-semibold text-3xl text-highlighted tracking-wide">
+        {{ current }}
+      </p>
+
+      <div class="flex items-center flex-col items-start text-sm">
+        <div class="flex items-center gap-1">
+          <UIcon
+            :name="
+              percentChange > 0 ? 'i-lucide-arrow-up' : 'i-lucide-arrow-down'
+            "
+            :class="percentChange > 0 ? 'text-emerald-500' : 'text-red-500'"
+          />
+          <div
+            :class="percentChange > 0 ? 'text-emerald-500' : 'text-red-500'"
+            class="mr-1"
+          >
+            {{ percentChange }}%
+          </div>
+        </div>
+        <span class="text-(--ui-text-dimmed)">from previous month</span>
+      </div>
+    </div>
+  </UCard>
+</template>

package/app/components/Va/Cards/VaCardWithProgressCircle.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface DashboardItem {
+  title: string
+  value: number | string
+  progress: number
+}
+
+defineProps<DashboardItem>()
+</script>
+
+<template>
+  <UCard
+    variant="subtle"
+    :ui="{ footer: 'sm:py-3 bg-elevated' }"
+  >
+    <div class="flex items-center gap-4">
+      <div class="transition-transform duration-300 group-hover:scale-105">
+        <ProgressCircle
+          :value="progress"
+          :size="60"
+          :stroke-width="5"
+        />
+      </div>
+      <div class="flex-1 space-y-1">
+        <div class="text-sm text-toned dark:text-muted">
+          {{ title }}
+        </div>
+        <p class="text-2xl text-highlighted font-semibold">
+          {{ value }}
+        </p>
+      </div>
+    </div>
+  </UCard>
+</template>

package/app/components/Va/Cards/types.ts

@@ -0,0 +1,11 @@
+export interface BulletLegendItemInterface {
+  name: string
+  color: string
+}
+
+export interface ChartData {
+  date: string
+  users: number
+  sessions: number
+  churn: number
+}

package/app/components/Va/Charts/VaChartAppPerformanceBar.vue

@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import {
+  getDailyPerformanceData,
+  getWeeklyPerformanceData,
+  getMonthlyPerformanceData
+} from '~/data/AppPerformance'
+
+defineProps<{
+  categories: Record<string, BulletLegendItemInterface>
+}>()
+
+const isSettingsOpen = ref<boolean>(false)
+
+function toggleSettings() {
+  isSettingsOpen.value = !isSettingsOpen.value
+}
+
+const dataViewOptions = [
+  {
+    label: 'Daily',
+    value: 'daily'
+  },
+  {
+    label: 'Weekly',
+    value: 'weekly'
+  },
+  {
+    label: 'Monthly',
+    value: 'monthly'
+  }
+]
+
+const selectedDataView = ref('daily')
+
+const performanceData = computed(() => {
+  switch (selectedDataView.value) {
+    case 'weekly':
+      return getWeeklyPerformanceData.value
+    case 'monthly':
+      return getMonthlyPerformanceData.value
+    case 'daily':
+    default:
+      return getDailyPerformanceData.value
+  }
+})
+
+const xFormatter = (i: number): string =>
+  String(performanceData.value[i]?.date ?? '')
+
+function handleDataViewChange(value: string) {
+  console.log('Data view changed to:', value)
+}
+</script>
+
+<template>
+  <UCard
+    :ui="{
+      body: 'sm:p-4 p-0'
+    }"
+  >
+    <template #header>
+      <div class="w-full flex items-center justify-between">
+        <h2 class="text-lg font-medium text-highlighted">
+          App Performance
+        </h2>
+        <UButton
+          variant="ghost"
+          :icon="`i-lucide-${!isSettingsOpen ? 'settings' : 'x'}`"
+          @click="toggleSettings"
+        />
+      </div>
+    </template>
+
+    <div
+      v-if="isSettingsOpen"
+      class="h-[304px] p-4"
+    >
+      <div class="w-full space-y-4">
+        <label class="block text-sm font-medium text-highlighted mb-2">
+          Settings
+        </label>
+        <USelect
+          v-model="selectedDataView"
+          :items="dataViewOptions"
+          placeholder="Select data view"
+          class="w-full focus:ring-0"
+          @update:model-value="handleDataViewChange"
+        />
+        <UButton
+          variant="soft"
+          class="w-full flex items-center justify-center"
+          label="Filter data"
+          @click="toggleSettings"
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="!isSettingsOpen"
+      class="pt-2"
+    >
+      <BarChart
+        :data="performanceData"
+        :height="240"
+        y-label="Count"
+        :x-num-ticks="6"
+        :y-num-ticks="5"
+        :categories="categories"
+        :x-formatter="xFormatter"
+        :y-grid-line="false"
+        :radius="20"
+        :bar-padding="0.35"
+        :y-axis="['downloads', 'subscriptions']"
+        :legend-position="LegendPosition.TopRight"
+      />
+    </div>
+  </UCard>
+</template>

package/app/components/Va/Charts/VaChartAppPerformanceBarChart.vue

@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import {
+  getDailyPerformanceData,
+  getWeeklyPerformanceData,
+  getMonthlyPerformanceData
+} from '~/data/AppPerformance'
+
+defineProps<{
+  categories: Record<string, BulletLegendItemInterface>
+}>()
+
+const isSettingsOpen = ref<boolean>(false)
+
+function toggleSettings() {
+  isSettingsOpen.value = !isSettingsOpen.value
+}
+
+const dataViewOptions = [
+  {
+    label: 'Daily',
+    value: 'daily'
+  },
+  {
+    label: 'Weekly',
+    value: 'weekly'
+  },
+  {
+    label: 'Monthly',
+    value: 'monthly'
+  }
+]
+
+const selectedDataView = ref('daily')
+
+const performanceData = computed(() => {
+  switch (selectedDataView.value) {
+    case 'weekly':
+      return getWeeklyPerformanceData.value
+    case 'monthly':
+      return getMonthlyPerformanceData.value
+    case 'daily':
+    default:
+      return getDailyPerformanceData.value
+  }
+})
+
+const xFormatter = (i: number): string =>
+  String(performanceData.value[i]?.date ?? '')
+
+function handleDataViewChange(value: string) {
+  console.log('Data view changed to:', value)
+}
+</script>
+
+<template>
+  <UCard
+    :ui="{
+      body: 'sm:p-4 p-0'
+    }"
+  >
+    <template #header>
+      <div class="w-full flex items-center justify-between">
+        <h2 class="text-lg font-medium text-highlighted">
+          App Performance
+        </h2>
+        <UButton
+          variant="ghost"
+          :icon="`i-lucide-${!isSettingsOpen ? 'settings' : 'x'}`"
+          @click="toggleSettings"
+        />
+      </div>
+    </template>
+
+    <div
+      v-if="isSettingsOpen"
+      class="h-[304px] p-4"
+    >
+      <div class="w-full space-y-4">
+        <label class="block text-sm font-medium text-highlighted mb-2">
+          Settings
+        </label>
+        <USelect
+          v-model="selectedDataView"
+          :items="dataViewOptions"
+          placeholder="Select data view"
+          class="w-full focus:ring-0"
+          @update:model-value="handleDataViewChange"
+        />
+        <UButton
+          variant="soft"
+          class="w-full flex items-center justify-center"
+          label="Filter data"
+          @click="toggleSettings"
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="!isSettingsOpen"
+      class="pt-2"
+    >
+      <BarChart
+        :data="performanceData"
+        :height="240"
+        y-label="Count"
+        :x-num-ticks="6"
+        :y-num-ticks="5"
+        :categories="categories"
+        :x-formatter="xFormatter"
+        :y-grid-line="false"
+        :radius="20"
+        :bar-padding="0.35"
+        :y-axis="['downloads', 'subscriptions']"
+        :legend-position="LegendPosition.TopRight"
+      />
+    </div>
+  </UCard>
+</template>