@veristone/nuxt-v-app 0.1.0

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

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import { DetailedSearchQueryData } from '~/data/SearchData'
+
+interface DateAggregateData {
+  date: string
+  impressions: number
+  clicks: number
+  ctr: number
+  averagePosition: number
+}
+
+const chartData = computed<DateAggregateData[]>(() => {
+  return DetailedSearchQueryData.map((dateEntry) => {
+    let totalImpressions = 0
+    let totalClicks = 0
+
+    let totalWeightedPosition = 0
+
+    dateEntry.queries.forEach((query) => {
+      totalImpressions += query.impressions
+      totalClicks += query.clicks
+
+      totalWeightedPosition += query.averagePosition * query.impressions
+    })
+
+    const aggregateCTR
+      = totalImpressions > 0 ? (totalClicks / totalImpressions) * 100 : 0
+
+    const aggregateAveragePosition
+      = totalImpressions > 0 ? totalWeightedPosition / totalImpressions : 0
+
+    return {
+      date: dateEntry.date,
+      impressions: totalImpressions,
+      clicks: totalClicks,
+      ctr: parseFloat(aggregateCTR.toFixed(2)),
+      averagePosition: parseFloat(aggregateAveragePosition.toFixed(1))
+    }
+  })
+})
+
+const categories = {
+  impressions: {
+    name: 'Impressions',
+    color: 'var(--color-amber-400)'
+  },
+  clicks: {
+    name: 'Clicks',
+    color: 'var(--ui-primary)'
+  },
+  ctr: {
+    name: 'CTR',
+    color: 'var(--color-indigo-400)'
+  },
+  averagePosition: {
+    name: 'Average Position',
+    color: 'var(--color-orange-400)'
+  }
+}
+
+const xFormatter = (tick: number, _i?: number, _ticks?: number[]): string => {
+  return String(chartData.value[tick]?.date ?? '')
+}
+</script>
+
+<template>
+  <UCard>
+    <div class="mb-8 space-y-2">
+      <p class="font-semibold text-lg text-highlighted">
+        Search Performance
+      </p>
+    </div>
+
+    <BarChart
+      :data="chartData"
+      :height="275"
+      :x-num-ticks="4"
+      :y-num-ticks="4"
+      :x-formatter="xFormatter"
+      :categories="categories"
+      :y-grid-line="true"
+      :x-grid-line="true"
+      :group-padding="0.2"
+      :bar-padding="0.5"
+      :y-axis="['clicks', 'impressions', 'averagePosition', 'ctr']"
+      :curve-type="CurveType.Linear"
+      :legend-position="LegendPosition.BottomCenter"
+    />
+  </UCard>
+</template>

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+interface DailyData {
+  day: string
+  Income: number
+  Expense: number
+}
+
+const chartData = ref<DailyData[]>([
+  {
+    day: 'May.',
+    Income: 8500,
+    Expense: 4200
+  },
+  {
+    day: 'Jun.',
+    Income: 9100,
+    Expense: 3900
+  },
+  {
+    day: 'Jul.',
+    Income: 9800,
+    Expense: 4100
+  },
+  {
+    day: 'Aug.',
+    Income: 10200,
+    Expense: 4300
+  },
+  {
+    day: 'Sep.',
+    Income: 9700,
+    Expense: 4000
+  },
+  {
+    day: 'Oct.',
+    Income: 10500,
+    Expense: 4500
+  }
+])
+
+const chartCategories: Record<string, BulletLegendItemInterface> = {
+  Income: {
+    name: 'Income',
+    color: 'var(--ui-primary)'
+  },
+  Expense: {
+    name: 'Expense',
+    color: 'var(--ui-warning)'
+  }
+}
+
+const xAxisFormatter = (index: number): string => {
+  if (index >= 0 && index < chartData.value.length) {
+    return chartData.value[index]?.day || ''
+  }
+  return ''
+}
+</script>
+
+<template>
+  <BarChart
+    :data="chartData"
+    :categories="chartCategories"
+    :y-axis="['Income', 'Expense']"
+    :x-formatter="xAxisFormatter"
+    :height="200"
+    :stacked="false"
+    :radius="3"
+    :group-padding="0.25"
+    :bar-padding="0.1"
+    :hide-legend="true"
+    :legend-position="LegendPosition.BottomCenter"
+    :x-domain-line="false"
+    :y-domain-line="false"
+    :x-tick-line="false"
+    :y-tick-line="false"
+    :x-grid-line="false"
+    :y-grid-line="true"
+    :x-num-ticks="5"
+    :y-num-ticks="3"
+  />
+</template>

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

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { ChartCategories } from '~/types'
+
+defineProps<{
+  categories: ChartCategories
+}>()
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-end gap-x-6 gap-y-2">
+    <div
+      v-for="(category, categoryKey) in categories"
+      :key="categoryKey"
+      class="flex items-center gap-2"
+    >
+      <span
+        class="h-2 w-2 rounded-full"
+        :style="{ backgroundColor: category.color }"
+      />
+      <span class="text-xs text-(--vis-legend-label-color)">
+        {{ category.name }}
+      </span>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+
+interface BudgetDataItem {
+  month: number
+  actual: number
+  target: number
+}
+
+const baseData: BudgetDataItem[] = [
+  {
+    month: 1,
+    actual: 2500,
+    target: 2600
+  },
+  {
+    month: 2,
+    actual: 1500,
+    target: 2700
+  },
+  {
+    month: 3,
+    actual: 3000,
+    target: 2900
+  },
+  {
+    month: 4,
+    actual: 4000,
+    target: 3200
+  },
+  {
+    month: 5,
+    actual: 4500,
+    target: 3500
+  },
+  {
+    month: 6,
+    actual: 2800,
+    target: 3600
+  },
+  {
+    month: 7,
+    actual: 3500,
+    target: 3800
+  }
+]
+
+const range = ref<'Full year' | 'Last 6 months'>('Full year')
+
+const curveChoice = ref<'Smooth' | 'Linear' | 'Step' | 'Basis'>('Smooth')
+
+const curveMap = computed(() => ({
+  Smooth: CurveType.MonotoneX,
+  Linear: CurveType.Linear,
+  Step: CurveType.StepAfter,
+  Basis: CurveType.Basis
+}))
+
+const displayedData = computed<BudgetDataItem[]>(() => {
+  if (range.value === 'Last 6 months') {
+    return baseData.filter(d => d.month >= 7)
+  }
+  return baseData
+})
+
+const Categories = computed<Record<string, BulletLegendItemInterface>>(() => ({
+  actual: {
+    name: 'Actual',
+    color: colorMode.value === 'dark' ? '#22c55e' : '#16a34a'
+  },
+  target: {
+    name: 'Target',
+    color: colorMode.value === 'dark' ? '#64748b' : '#475569'
+  }
+}))
+const actualColor = computed(() => Categories.value.actual?.color ?? '#22c55e')
+const targetColor = computed(() => Categories.value.target?.color ?? '#64748b')
+
+type SeriesMarkerConfigItem = {
+  type?: 'circle' | 'square' | 'triangle' | 'diamond'
+  size?: number
+  strokeWidth?: number
+  color: string
+  strokeColor: string
+}
+
+type SeriesMarkerConfig = Record<'actual' | 'target', SeriesMarkerConfigItem>
+
+const markerConfig: SeriesMarkerConfig = {
+  actual: {
+    type: 'circle',
+    size: 7,
+    color: actualColor.value,
+    strokeColor: actualColor.value,
+    strokeWidth: 2
+  },
+  target: {
+    type: 'triangle',
+    size: 8,
+    color: targetColor.value,
+    strokeColor: targetColor.value,
+    strokeWidth: 2
+  }
+}
+
+const lineDashArray = computed<number[][]>(() => [
+  [0, 0],
+  [5, 4]
+])
+
+const monthLabel = (i: number): string =>
+  new Date(`2025-${displayedData.value[i]?.month}-02`).toLocaleDateString(
+    'en-US',
+    { month: 'short' }
+  )
+
+const formatCurrency = (value: number) =>
+  new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(value)
+</script>
+
+<template>
+  <div class="mx-auto max-w-xl">
+    <LineChart
+      :key="colorMode.value + range + curveChoice"
+      :data="displayedData"
+      :height="100"
+      :categories="Categories"
+      :x-formatter="monthLabel"
+      :y-formatter="formatCurrency"
+      :y-grid-line="true"
+      :x-grid-line="true"
+      :hide-y-axis="true"
+      :curve-type="curveMap[curveChoice]"
+      :legend-position="LegendPosition.TopRight"
+      :hide-legend="false"
+      :marker-config="markerConfig"
+      :line-dash-array="lineDashArray"
+    >
+      <template #tooltip="{ values }">
+        <div
+          class="bg-default text-default border-default min-w-32 rounded-lg border p-3 shadow-lg"
+        >
+          <div class="text-dimmed mb-2 text-xs">
+            {{
+              new Date(`2025-${values?.month}-02`).toLocaleDateString("en-US", {
+                month: "long"
+              })
+            }}
+          </div>
+
+          <div class="space-y-1">
+            <div class="flex items-center justify-between text-sm">
+              <div class="flex items-center gap-2">
+                <div
+                  class="h-2 w-2 rounded-full"
+                  :style="{ backgroundColor: actualColor }"
+                />
+                <span class="w-24">Actual: </span>
+              </div>
+              <span class="font-medium">{{
+                formatCurrency(values?.actual ?? 0)
+              }}</span>
+            </div>
+
+            <div class="flex items-center justify-between text-sm">
+              <div class="flex items-center gap-2">
+                <div
+                  class="h-2 w-2 rounded-full"
+                  :style="{ backgroundColor: targetColor }"
+                />
+                <span>Target</span>
+              </div>
+              <span class="font-medium">{{
+                formatCurrency(values?.target ?? 0)
+              }}</span>
+            </div>
+
+            <hr class="border-default my-2">
+
+            <div class="flex justify-between text-sm">
+              <span>Variance</span>
+              <span
+                class="font-semibold"
+                :class="
+                  (values?.actual ?? 0) - (values?.target ?? 0) >= 0
+                    ? 'text-success'
+                    : 'text-error'
+                "
+              >
+                {{
+                  formatCurrency((values?.actual ?? 0) - (values?.target ?? 0))
+                }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </LineChart>
+  </div>
+</template>

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

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+interface CountryStat {
+  country: string
+  code?: string
+  users: number
+}
+
+const props = withDefaults(
+  defineProps<{
+    minutes?: number
+    updateInterval?: number
+    seedCountries?: CountryStat[] | null
+    simulate?: boolean
+  }>(),
+  {
+    minutes: 30,
+    updateInterval: 4000,
+    simulate: true,
+    seedCountries: null
+  }
+)
+
+const perMinute = ref<number[]>(
+  Array.from(
+    { length: props.minutes },
+    () => 50 + Math.round(Math.random() * 120)
+  )
+)
+
+const countries = ref<CountryStat[]>(
+  props.seedCountries || [
+    {
+      country: 'Netherlands',
+      users: 87
+    },
+    {
+      country: 'Belgium',
+      users: 25
+    },
+    {
+      country: 'Germany',
+      users: 4
+    },
+    {
+      country: 'United States',
+      users: 2
+    },
+    {
+      country: 'France',
+      users: 1
+    }
+  ]
+)
+
+const totalActive = computed(() =>
+  countries.value.reduce((a, c) => a + c.users, 0)
+)
+
+const maxBucket = computed(() => Math.max(...perMinute.value, 1))
+
+const maxCountryUsers = computed(() =>
+  Math.max(...countries.value.map(c => c.users), 1)
+)
+
+let timer: ReturnType<typeof setInterval> | null = null
+
+function simulateTick() {
+  perMinute.value.shift()
+
+  const last = perMinute.value[perMinute.value.length - 1] || 100
+  const delta = (Math.random() - 0.5) * 40
+  const next = Math.max(10, Math.round(last + delta))
+  perMinute.value.push(next)
+
+  countries.value = countries.value
+    .map((c, idx) => {
+      const varianceFactor = Math.max(1, countries.value.length - idx)
+      const change = Math.round(((Math.random() - 0.5) * 120) / varianceFactor)
+      return {
+        ...c,
+        users: Math.max(5, c.users + change)
+      }
+    })
+    .sort((a, b) => b.users - a.users)
+}
+
+onMounted(() => {
+  if (props.simulate) {
+    timer = setInterval(simulateTick, props.updateInterval)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (timer) clearInterval(timer)
+})
+
+defineExpose({
+  perMinute,
+  countries,
+  totalActive
+})
+</script>
+
+<template>
+  <UCard :ui="{ footer: 'flex justify-end' }">
+    <div class="flex items-start justify-between gap-4">
+      <div class="space-y-2">
+        <p class="text-xs uppercase tracking-wider text-muted font-medium">
+          Active users in last 30 minutes
+        </p>
+        <div class="font-semibold text-3xl text-highlighted tabular-nums">
+          {{ totalActive.toLocaleString() }}
+        </div>
+      </div>
+      <UButton
+        color="success"
+        variant="soft"
+        size="sm"
+        icon="i-lucide-circle-check"
+        aria-label="Status OK"
+        class="shrink-0"
+      />
+    </div>
+
+    <div
+      class="mt-4 h-16 grid grid-cols-30 gap-[2px] items-end"
+      role="list"
+      aria-label="Active users per minute chart"
+    >
+      <div
+        v-for="(v, i) in perMinute"
+        :key="i"
+        class="relative group flex items-end justify-center h-full"
+      >
+        <div
+          class="w-full rounded-xs bg-orange-400 group-hover:bg-orange-500 transition-colors"
+          :style="{ height: `${((v / maxBucket) * 100).toFixed(2)}%` }"
+          :aria-label="`Minute ${i + 1} value ${v}`"
+        />
+      </div>
+    </div>
+
+    <div class="mt-6">
+      <p class="text-xs uppercase tracking-wider text-muted font-medium mb-3">
+        Top Countries
+      </p>
+      <ul class="space-y-2">
+        <li
+          v-for="c in countries"
+          :key="c.country"
+          class="flex items-center gap-3"
+        >
+          <div class="w-40 truncate text-sm">
+            {{ c.country }}
+          </div>
+          <div class="flex-1 h-2 bg-elevated rounded-sm overflow-hidden">
+            <div
+              class="h-full bg-blue-500"
+              :style="{
+                width: ((c.users / maxCountryUsers) * 100).toFixed(2) + '%'
+              }"
+            />
+          </div>
+          <div class="w-16 text-right text-sm tabular-nums">
+            {{
+              c.users.toLocaleString(undefined, {
+                notation: c.users > 999 ? "compact" : "standard"
+              })
+            }}
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <template #footer>
+      <UButton
+        label="View Real Time"
+        trailing-icon="i-lucide-chevron-right"
+      />
+    </template>
+  </UCard>
+</template>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+type RevenueDataItem = {
+  month: string;
+  desktop: number;
+  mobile: number;
+};
+
+const RevenueData: RevenueDataItem[] = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+];
+
+const RevenueCategoriesMultple = {
+  desktop: { name: "Desktop", color: "var(--color-primary-400)" },
+  mobile: { name: "Mobile", color: "var(--chart-secondary)" },
+};
+
+const xFormatter = (i: number): string => `${RevenueData[i]?.month}`;
+const yFormatter = (tick: number, _i?: number, _ticks?: number[]) =>
+  tick.toString() + "K";
+
+</script>
+<template>
+  <BarChart
+    :data="RevenueData"
+    :height="200"
+    :categories="RevenueCategoriesMultple"
+    :y-axis="['desktop', 'mobile']"
+    :group-padding="0"
+    :bar-padding="0.2"
+    :radius="4"
+    :y-num-ticks="4"
+    :x-formatter="xFormatter"
+    :y-formatter="yFormatter"
+    :legend-position="LegendPosition.Top"
+    :hide-legend="true"
+    :y-grid-line="true"
+  />
+</template>

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const chartData = ref([
+  { date: "1", current: 1100, last_year: 1050 },
+  { date: "2", current: 1150, last_year: 1080 },
+  { date: "3", current: 1120, last_year: 1100 },
+  { date: "4", current: 1180, last_year: 1120 },
+  { date: "5", current: 1200, last_year: 1150 },
+  { date: "6", current: 1170, last_year: 1130 },
+  { date: "7", current: 1210, last_year: 1160 },
+  { date: "8", current: 1230, last_year: 1180 },
+  { date: "9", current: 1250, last_year: 1200 },
+  { date: "10", current: 1220, last_year: 1190 },
+  { date: "11", current: 1280, last_year: 1210 },
+  { date: "12", current: 1300, last_year: 1230 },
+  { date: "13", current: 1270, last_year: 1220 },
+  { date: "14", current: 1320, last_year: 1250 },
+]);
+
+const categories: Record<string, BulletLegendItemInterface> = {
+  current: { name: "June 2025", color: "var(--ui-primary)" },
+  last_year: { name: "June 2024", color: "var(--color-warning-500)" },
+};
+
+const xFormatter = (i: number): string => `${chartData.value[i]?.date}`;
+const yFormatter = (value: number): string => `$${(value / 1000).toFixed(1)}k`;
+</script>
+<template>
+  <LineChart
+    :data="chartData"
+    :height="180"
+    :x-num-ticks="4"
+    :y-num-ticks="3.5"
+    :categories="categories"
+    :x-formatter="xFormatter"
+    :y-formatter="yFormatter"
+    :curve-type="CurveType.Linear"
+    :legend-position="LegendPosition.Top"
+    :y-grid-line="true"
+    :hide-x-axis="true"
+    :hide-legend="true"
+  />
+</template>