@veristone/nuxt-v-app 0.1.0

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

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+interface DailyData {
+  day: string
+  Income: number
+  Expense: number
+}
+
+const chartData = ref<DailyData[]>([
+  {
+    day: 'Jan',
+    Income: 8500,
+    Expense: 4000
+  },
+  {
+    day: 'Feb',
+    Income: 6500,
+    Expense: 9000
+  },
+  {
+    day: 'Mar',
+    Income: 7500,
+    Expense: 3500
+  },
+  {
+    day: 'Apr',
+    Income: 5800,
+    Expense: 7000
+  },
+  {
+    day: 'May',
+    Income: 9200,
+    Expense: 6500
+  },
+  {
+    day: 'Jun',
+    Income: 9800,
+    Expense: 4500
+  },
+  {
+    day: 'Jul',
+    Income: 5000,
+    Expense: 8500
+  }
+])
+
+const chartCategories: Record<string, BulletLegendItemInterface> = {
+  Income: {
+    name: 'Income',
+    color: '#10b981'
+  },
+  Expense: {
+    name: 'Expense',
+    color: '#f59e0b'
+  }
+}
+
+const xAxisFormatter = (tick: number): string => {
+  // tick is the index of the data point
+  const months = chartData.value.map(item => item.day)
+  return months[tick] || ''
+}
+
+const { height } = useResponsiveHeight({
+  default: 120,
+  sm: 240
+})
+</script>
+
+<template>
+  <LineChart
+    :data="chartData"
+    :categories="chartCategories"
+    :y-axis="['Income', 'Expense']"
+    :x-formatter="xAxisFormatter"
+    :height="height"
+    :stacked="false"
+    :radius="3"
+    :group-padding="0.2"
+    :bar-padding="0.2"
+    :x-grid-line="true"
+    :y-grid-line="true"
+    :y-num-ticks="4"
+  />
+</template>

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

@@ -0,0 +1,179 @@
+<script lang="ts" setup>
+import type { TabsItem } from '#ui/types'
+
+const tabItems: TabsItem[] = [
+  {
+    label: '24 hours',
+    value: '24h'
+  },
+  {
+    label: '7 days',
+    value: '7d'
+  },
+  {
+    label: '28 days',
+    value: '28d'
+  }
+]
+
+const selectedPeriod = ref('24h')
+
+const searchIntentDataByPeriod = {
+  '24h': [
+    {
+      name: 'Informational',
+      percentage: 42.5,
+      count: 850
+    },
+    {
+      name: 'Navigational',
+      percentage: 28.3,
+      count: 566
+    },
+    {
+      name: 'Commercial',
+      percentage: 18.7,
+      count: 374
+    },
+    {
+      name: 'Transactional',
+      percentage: 10.5,
+      count: 210
+    }
+  ],
+  '7d': [
+    {
+      name: 'Informational',
+      percentage: 38.2,
+      count: 5890
+    },
+    {
+      name: 'Navigational',
+      percentage: 31.5,
+      count: 4860
+    },
+    {
+      name: 'Commercial',
+      percentage: 20.1,
+      count: 3100
+    },
+    {
+      name: 'Transactional',
+      percentage: 10.2,
+      count: 1570
+    }
+  ],
+  '28d': [
+    {
+      name: 'Informational',
+      percentage: 40.8,
+      count: 24500
+    },
+    {
+      name: 'Navigational',
+      percentage: 29.7,
+      count: 17850
+    },
+    {
+      name: 'Commercial',
+      percentage: 19.5,
+      count: 11700
+    },
+    {
+      name: 'Transactional',
+      percentage: 10.0,
+      count: 6000
+    }
+  ]
+}
+
+const searchIntentCategories = {
+  informational: {
+    name: 'Informational',
+    color: 'var(--color-amber-400)'
+  },
+  navigational: {
+    name: 'Navigational',
+    color: 'var(--ui-primary)'
+  },
+  commercial: {
+    name: 'Commercial',
+    color: 'var(--color-indigo-400)'
+  },
+  transactional: {
+    name: 'Transactional',
+    color: 'var(--color-orange-400)'
+  }
+}
+
+const searchIntentLabels = computed(() => {
+  return searchIntentDataByPeriod[selectedPeriod.value as keyof typeof searchIntentDataByPeriod]
+})
+
+const searchIntentData = computed(() => searchIntentLabels.value.map(i => i.percentage))
+
+const getCategoryColor = (index: number) => {
+  const categories = Object.values(searchIntentCategories)
+  return categories[index]?.color || 'var(--ui-text-muted)'
+}
+
+const handleTabChange = (value: string | number) => {
+  selectedPeriod.value = value as string
+}
+</script>
+
+<template>
+  <UCard :ui="{ footer: 'bg-elevated' }">
+    <template #header>
+      <CardsTitle>Intent</CardsTitle>
+    </template>
+
+    <DonutChart
+      :data="searchIntentData"
+      :height="140"
+      :type="DonutType.Full"
+      :radius="5"
+      :arc-width="20"
+      :pad-angle="0.1"
+      :categories="searchIntentCategories"
+      :hide-legend="true"
+    />
+
+    <div class="space-y-3 mt-6">
+      <div
+        v-for="(item, index) in searchIntentLabels"
+        :key="index"
+        class="flex items-center justify-between"
+      >
+        <div class="flex items-center gap-3">
+          <div
+            class="w-2 h-2 rounded-full flex-shrink-0"
+            :style="{ backgroundColor: getCategoryColor(index) }"
+          />
+          <div>
+            <div class="font-medium">
+              {{ item.name }}
+            </div>
+            <div class="text-muted text-xs">
+              {{ item.count.toLocaleString() }} queries
+            </div>
+          </div>
+        </div>
+
+        <div class="font-semibold text-sm">
+          {{ item.percentage }}%
+        </div>
+      </div>
+    </div>
+
+    <UTabs
+      v-model="selectedPeriod"
+      :items="tabItems"
+      :content="false"
+      size="sm"
+      color="neutral"
+      class="mt-6"
+      @update:model-value="handleTabChange"
+    />
+  </UCard>
+</template>

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

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+interface SpendingData {
+  month: number
+  currentYear: number
+  lastYear: number
+}
+
+const chartData = ref<SpendingData[]>([
+  {
+    month: 1,
+    currentYear: 2500,
+    lastYear: 2000
+  },
+  {
+    month: 2,
+    currentYear: 1500,
+    lastYear: 1200
+  },
+  {
+    month: 3,
+    currentYear: 3000,
+    lastYear: 2800
+  },
+  {
+    month: 4,
+    currentYear: 4000,
+    lastYear: 3500
+  },
+  {
+    month: 5,
+    currentYear: 4500,
+    lastYear: 4200
+  },
+  {
+    month: 6,
+    currentYear: 2800,
+    lastYear: 2500
+  },
+  {
+    month: 7,
+    currentYear: 3500,
+    lastYear: 3100
+  },
+  {
+    month: 8,
+    currentYear: 3800,
+    lastYear: 3600
+  },
+  {
+    month: 9,
+    currentYear: 2000,
+    lastYear: 1800
+  },
+  {
+    month: 10,
+    currentYear: 4200,
+    lastYear: 4000
+  },
+  {
+    month: 11,
+    currentYear: 2200,
+    lastYear: 2100
+  },
+  {
+    month: 12,
+    currentYear: 1800,
+    lastYear: 1600
+  }
+])
+
+const categories: Record<string, any> = {
+  currentYear: {
+    name: 'Current Year',
+    color: '#6366f1'
+  },
+  lastYear: {
+    name: 'Last Year',
+    color: '#94a3b8'
+  }
+}
+
+const formatCurrency = (value: number) => {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(value)
+}
+</script>
+
+<template>
+  <UCard>
+    <div class="space-y-6">
+      <div class="flex items-center justify-between">
+        <h2 class="text-lg font-medium text-highlighted">
+          Revenue Trend
+        </h2>
+        <div class="text-sm text-toned">
+          Year over Year
+        </div>
+      </div>
+
+      <AreaChart
+        :data="chartData"
+        :height="240"
+        :categories="categories"
+        :y-axis="['amount']"
+        :y-num-ticks="3"
+        :y-grid-line="true"
+        :curve-type="CurveType.MonotoneX"
+        :legend-position="LegendPosition.TopRight"
+        :x-formatter="
+          (i: number) =>
+            new Date(`2025-${chartData[i]?.month}-02`).toLocaleDateString(
+              'en-US',
+              {
+                month: 'short'
+              }
+            )
+        "
+        :y-formatter="formatCurrency"
+        y-label="Revenue"
+      />
+    </div>
+  </UCard>
+</template>

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

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+const RevenueData = [
+  {
+    month: 'January',
+    desktop: 186,
+    mobile: 80
+  },
+  {
+    month: 'February',
+    desktop: 305,
+    mobile: 200
+  },
+  {
+    month: 'March',
+    desktop: 237,
+    mobile: 120
+  },
+  {
+    month: 'April',
+    desktop: 73,
+    mobile: 190
+  }
+]
+const RevenueCategoriesMultple = {
+  desktop: {
+    name: 'Desktop',
+    color: '#6366f1'
+  },
+  mobile: {
+    name: 'Mobile',
+    color: '#10b981'
+  }
+}
+
+const yFormatter = (i: number): string => `${i}`
+</script>
+
+<template>
+  <UCard>
+    <div class="space-y-4">
+      <h2 class="text-lg font-medium text-highlighted">
+        Revenue Monitoring
+      </h2>
+
+      <BarChart
+        :data="RevenueData"
+        :stacked="true"
+        :height="200"
+        :categories="RevenueCategoriesMultple"
+        :y-axis="['desktop', 'mobile']"
+        :group-padding="0"
+        :bar-padding="0.2"
+        :x-num-ticks="6"
+        :radius="4"
+        :orientation="Orientation.Horizontal"
+        :x-formatter="yFormatter"
+        :y-formatter="(i: number): string => `${RevenueData[i]?.month}`"
+        :legend-position="LegendPosition.TopRight"
+        :hide-legend="false"
+        :x-grid-line="true"
+      />
+    </div>
+  </UCard>
+</template>

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

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+const colorMode = useColorMode()
+
+interface MetricDataItem {
+  time: string
+  cpu: number
+}
+
+const MetricData: MetricDataItem[] = [
+  {
+    time: '00:00',
+    cpu: 45
+  },
+  {
+    time: '02:00',
+    cpu: 38
+  },
+  {
+    time: '04:00',
+    cpu: 52
+  },
+  {
+    time: '06:00',
+    cpu: 47
+  },
+  {
+    time: '08:00',
+    cpu: 78
+  },
+  {
+    time: '10:00',
+    cpu: 71
+  },
+  {
+    time: '12:00',
+    cpu: 65
+  },
+  {
+    time: '14:00',
+    cpu: 73
+  },
+  {
+    time: '16:00',
+    cpu: 82
+  },
+  {
+    time: '18:00',
+    cpu: 68
+  },
+  {
+    time: '20:00',
+    cpu: 58
+  },
+  {
+    time: '22:00',
+    cpu: 43
+  },
+  {
+    time: '24:00',
+    cpu: 41
+  }
+]
+
+const MetricCategories = computed(() => ({
+  cpu: {
+    name: 'CPU Usage',
+    color: colorMode.value === 'dark' ? '#f97316' : '#ea580c'
+  }
+}))
+
+const xFormatter = (i: number): string => `${MetricData[i]?.time}`
+const yFormatter = (value: number): string => `${value}%`
+</script>
+
+<template>
+  <UCard>
+    <div class="space-y-6">
+      <div class="flex items-center justify-between">
+        <h2 class="text-lg font-medium text-highlighted">
+          System Performance
+        </h2>
+        <div class="text-sm text-toned">
+          Last 24 hours
+        </div>
+      </div>
+
+      <LineChart
+        :key="colorMode.value"
+        :data="MetricData"
+        :height="240"
+        :categories="MetricCategories"
+        :x-formatter="xFormatter"
+        :y-formatter="yFormatter"
+        :curve-type="CurveType.Step"
+        :legend-position="LegendPosition.TopRight"
+        :hide-legend="false"
+        :x-grid-line="true"
+        :y-grid-line="true"
+        :x-domain-line="false"
+        :y-domain-line="false"
+        :hide-tooltip="false"
+        :y-num-ticks="5"
+        :x-num-ticks="6"
+        x-label="Time (24h)"
+        y-label="CPU %"
+      />
+    </div>
+  </UCard>
+</template>

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

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+interface StockData {
+  day: string
+  stockA: number
+  stockB: number
+  stockC: number
+}
+
+interface BulletLegendItemInterface {
+  name: string
+  color: string
+}
+
+const generateStockPrices = (
+  initialPriceA: number,
+  initialPriceB: number,
+  initialPriceC: number,
+  numDays: number
+) => {
+  const data = []
+  let currentPriceA = initialPriceA
+  let currentPriceB = initialPriceB
+  let currentPriceC = initialPriceC
+
+  for (let i = 0; i < numDays; i++) {
+    // Stock A: General upward trend with some volatility
+    currentPriceA += Math.random() * 5 - 2 // +/- 2.5
+    currentPriceA = Math.max(currentPriceA, initialPriceA * 0.9) // Don't go too low
+
+    // Stock B: More volatile, but also generally upward
+    currentPriceB += Math.random() * 8 - 3 // +/- 4
+    currentPriceB = Math.max(currentPriceB, initialPriceB * 0.8)
+
+    // Stock C: Steady growth
+    currentPriceC += Math.random() * 3 - 1 // +/- 1.5
+    currentPriceC = Math.max(currentPriceC, initialPriceC * 0.95)
+
+    data.push({
+      day: `Day ${i + 1}`,
+      stockA: Math.round(currentPriceA),
+      stockB: Math.round(currentPriceB),
+      stockC: Math.round(currentPriceC)
+    })
+  }
+  return data
+}
+
+const chartData = ref<StockData[]>(
+  generateStockPrices(100, 70, 120, 30)
+)
+
+const chartCategories: Record<string, BulletLegendItemInterface> = {
+  stockA: {
+    name: 'Tech Innovators Inc.',
+    color: '#3b82f6' // blue-500
+  },
+  stockC: {
+    name: 'Health Solutions Ltd.',
+    color: '#06b6d4' // cyan-500
+  }
+}
+
+const xAxisFormatter = (tick: number): string => {
+  const days = chartData.value.map(item => item.day)
+  return days[tick] || ''
+}
+</script>
+
+<template>
+  <LineChart
+    :data="chartData"
+    :categories="chartCategories"
+    :y-axis="['stockA', 'stockB', 'stockC']"
+    :x-formatter="xAxisFormatter"
+    :height="220"
+    :radius="3"
+    :group-padding="0.2"
+    :bar-padding="0.2"
+    :x-grid-line="true"
+    :y-grid-line="true"
+    :x-domain-line="true"
+    :y-domain-line="true"
+    :hide-legend="false"
+    :y-num-ticks="4"
+  />
+</template>