@veristone/nuxt-v-app 0.2.10 → 0.2.11

package/app/components/V/A/Card/DonutChart.vue

@@ -5,11 +5,23 @@ interface DonutChartData {
   color: string;
 }
 
-defineProps<{
+const props = defineProps<{
   data: DonutChartData[];
   title: string;
   totalValue: string;
 }>();
+
+const categories = computed<Record<string, BulletLegendItemInterface>>(() =>
+  Object.fromEntries(
+    props.data.map((item) => [
+      item.name,
+      {
+        name: item.name,
+        color: item.color,
+      },
+    ])
+  )
+);
 </script>
 <template>
   <UCard>
@@ -24,9 +36,9 @@ defineProps<{
     <DonutChart
       :data="data.map((i) => i.value)"
       :height="200"
-      :labels="data"
+      :categories="categories"
       :hide-legend="true"
-      :radius="0"
+      :radius="4"
     >
       <div class="absolute text-center">
         <div class="font-semibold">Categories</div>

package/app/components/V/A/Card/RevenueBarChart.vue

@@ -1,11 +1,4 @@
 <script setup lang="ts">
-const LegendPosition = {
-  Top: "top",
-  Bottom: "bottom",
-  Left: "left",
-  Right: "right",
-};
-
 interface BarChartCategory {
   name: string;
   color: string;
@@ -41,7 +34,7 @@ defineProps<{
       :radius="4"
       :x-formatter="xFormatter"
       :y-formatter="yFormatter"
-      :legend-position="LegendPosition.Bottom"
+      :legend-position="LegendPosition.BottomCenter"
       :hide-legend="false"
       :y-grid-line="false"
     />

package/app/components/V/A/Chart/AppPerformanceBar.vue

@@ -5,10 +5,21 @@ import {
   getMonthlyPerformanceData
 } from '~/data/AppPerformance'
 
-defineProps<{
-  categories: Record<string, BulletLegendItemInterface>
+const props = defineProps<{
+  categories?: Record<string, BulletLegendItemInterface>
 }>()
 
+const defaultCategories: Record<string, BulletLegendItemInterface> = {
+  subscriptions: {
+    name: 'Subscriptions',
+    color: 'var(--color-orange-400)'
+  },
+  downloads: {
+    name: 'Downloads',
+    color: 'var(--color-lime-400)'
+  }
+}
+
 const isSettingsOpen = ref<boolean>(false)
 
 function toggleSettings() {
@@ -32,6 +43,12 @@ const dataViewOptions = [
 
 const selectedDataView = ref('daily')
 
+const categories = computed(() =>
+  props.categories && Object.keys(props.categories).length > 0
+    ? props.categories
+    : defaultCategories
+)
+
 const performanceData = computed(() => {
   switch (selectedDataView.value) {
     case 'weekly':
@@ -46,10 +63,6 @@ const performanceData = computed(() => {
 
 const xFormatter = (i: number): string =>
   String(performanceData.value[i]?.date ?? '')
-
-function handleDataViewChange(value: string) {
-  console.log('Data view changed to:', value)
-}
 </script>
 
 <template>
@@ -84,7 +97,6 @@ function handleDataViewChange(value: string) {
           :items="dataViewOptions"
           placeholder="Select data view"
           class="w-full focus:ring-0"
-          @update:model-value="handleDataViewChange"
         />
         <UButton
           variant="soft"

package/app/components/V/A/Chart/AppPerformanceBarChart.vue

@@ -5,10 +5,21 @@ import {
   getMonthlyPerformanceData
 } from '~/data/AppPerformance'
 
-defineProps<{
-  categories: Record<string, BulletLegendItemInterface>
+const props = defineProps<{
+  categories?: Record<string, BulletLegendItemInterface>
 }>()
 
+const defaultCategories: Record<string, BulletLegendItemInterface> = {
+  subscriptions: {
+    name: 'Subscriptions',
+    color: 'var(--color-orange-400)'
+  },
+  downloads: {
+    name: 'Downloads',
+    color: 'var(--color-lime-400)'
+  }
+}
+
 const isSettingsOpen = ref<boolean>(false)
 
 function toggleSettings() {
@@ -32,6 +43,12 @@ const dataViewOptions = [
 
 const selectedDataView = ref('daily')
 
+const categories = computed(() =>
+  props.categories && Object.keys(props.categories).length > 0
+    ? props.categories
+    : defaultCategories
+)
+
 const performanceData = computed(() => {
   switch (selectedDataView.value) {
     case 'weekly':
@@ -46,10 +63,6 @@ const performanceData = computed(() => {
 
 const xFormatter = (i: number): string =>
   String(performanceData.value[i]?.date ?? '')
-
-function handleDataViewChange(value: string) {
-  console.log('Data view changed to:', value)
-}
 </script>
 
 <template>
@@ -84,7 +97,6 @@ function handleDataViewChange(value: string) {
           :items="dataViewOptions"
           placeholder="Select data view"
           class="w-full focus:ring-0"
-          @update:model-value="handleDataViewChange"
         />
         <UButton
           variant="soft"

package/app/components/V/A/Chart/AreaMini.vue

@@ -91,10 +91,9 @@ const formatCurrency = (value: number) => {
       :data="chartData"
       :height="90"
       :categories="categories"
-      :y-axis="['amount']"
       :y-num-ticks="2"
       :y-grid-line="true"
-      :legend-position="LegendPosition.Bottom"
+      :legend-position="LegendPosition.BottomCenter"
       :hide-y-axis="true"
       :hide-x-axis="true"
       :hide-legend="true"

package/app/components/V/A/Chart/BarMini.vue

@@ -56,7 +56,6 @@ function formatDate(dateString: Date) {
       :height="80"
       :categories="categories"
       :y-axis="['amount']"
-      :curve-type="CurveType.Basis"
       :hide-y-axis="true"
       :x-formatter="(i) => `${chartData[i]?.month}`"
       :min-max-ticks-only="false"

package/app/components/V/A/Chart/ColorBarChart.vue

@@ -1,8 +1,11 @@
 <script lang="ts" setup>
-const props = defineProps<{
-  title: string
+const props = withDefaults(defineProps<{
+  title?: string
   color?: string
-}>()
+}>(), {
+  title: 'Performance Metrics',
+  color: 'var(--ui-primary)'
+})
 
 const RevenueData = [
   {
@@ -37,12 +40,12 @@ const RevenueData = [
   }
 ]
 
-const RevenueCategories = {
+const RevenueCategories = computed(() => ({
   desktop: {
     name: 'Desktop',
     color: props.color
   }
-}
+}))
 
 const xFormatter = (i: number): string => `${RevenueData[i]?.month}`
 const yFormatter = (i: number) => i.toString()

package/app/components/V/A/Chart/ExpensesBar.vue

@@ -44,7 +44,7 @@ const yFormatter = (value: number): string => `$${(value / 1000).toFixed(1)}k`;
     :y-axis="['sales' ,'counter']"
     :x-formatter="xFormatter"
     :y-formatter="yFormatter"
-    :legend-position="LegendPosition.Top"
+    :legend-position="LegendPosition.TopCenter"
     :hide-legend="false"
     :y-grid-line="true"
     :x-grid-line="false"

package/app/components/V/A/Chart/FinanceSummary.vue

@@ -28,6 +28,19 @@ const spendingData = ref<SpendingCategory[]>([
   },
 ]);
 
+const spendingCategories = computed<Record<string, BulletLegendItemInterface>>(
+  () =>
+    Object.fromEntries(
+      spendingData.value.map((item) => [
+        item.name,
+        {
+          name: item.name,
+          color: item.color,
+        },
+      ])
+    )
+);
+
 const totalSpent = computed(() =>
   spendingData.value.reduce((sum, item) => sum + item.value, 0)
 );
@@ -49,13 +62,7 @@ const formatCurrency = (amount: number) => {
           :data="spendingData.map((i) => i.value)"
           :height="200"
           :arc-width="10"
-          :labels="
-            spendingData.map((item) => ({
-              name: item.name,
-              color: item.color,
-              percentage: item.value,
-            }))
-          "
+          :categories="spendingCategories"
           :pad-angle="0.1"
           :hide-legend="true"
           :radius="4"

package/app/components/V/A/Chart/GoogleSearchConsole.vue

@@ -83,7 +83,6 @@ const xFormatter = (tick: number, _i?: number, _ticks?: number[]): string => {
       :group-padding="0.2"
       :bar-padding="0.5"
       :y-axis="['clicks', 'impressions', 'averagePosition', 'ctr']"
-      :curve-type="CurveType.Linear"
       :legend-position="LegendPosition.BottomCenter"
     />
   </UCard>

package/app/components/V/A/Chart/Legend.vue

@@ -1,24 +1,32 @@
 <script lang="ts" setup>
-import type { ChartCategories } from '~/types'
+type LegendItem = Pick<BulletLegendItemInterface, 'name' | 'color'>
 
-defineProps<{
-  categories: ChartCategories
+const props = defineProps<{
+  categories?: Record<string, BulletLegendItemInterface> | null
+  items?: LegendItem[] | null
 }>()
+
+const legendEntries = computed(() =>
+  props.items?.length ? props.items : Object.values(props.categories ?? {})
+)
+
+const getColor = (color?: string | string[]) =>
+  Array.isArray(color) ? color[0] ?? 'currentColor' : color ?? 'currentColor'
 </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"
+      v-for="(item, index) in legendEntries"
+      :key="`${item.name}-${index}`"
       class="flex items-center gap-2"
     >
       <span
         class="h-2 w-2 rounded-full"
-        :style="{ backgroundColor: category.color }"
+        :style="{ backgroundColor: getColor(item.color) }"
       />
       <span class="text-xs text-(--vis-legend-label-color)">
-        {{ category.name }}
+        {{ item.name }}
       </span>
     </div>
   </div>

package/app/components/V/A/Chart/Revenue.vue

@@ -36,8 +36,8 @@ const yFormatter = (tick: number, _i?: number, _ticks?: number[]) =>
     :y-num-ticks="4"
     :x-formatter="xFormatter"
     :y-formatter="yFormatter"
-    :legend-position="LegendPosition.Top"
+    :legend-position="LegendPosition.TopCenter"
     :hide-legend="true"
     :y-grid-line="true"
   />
-</template>
+</template>

package/app/components/V/A/Chart/RevenueLine.vue

@@ -29,14 +29,14 @@ const yFormatter = (value: number): string => `$${(value / 1000).toFixed(1)}k`;
     :data="chartData"
     :height="180"
     :x-num-ticks="4"
-    :y-num-ticks="3.5"
+    :y-num-ticks="4"
     :categories="categories"
     :x-formatter="xFormatter"
     :y-formatter="yFormatter"
     :curve-type="CurveType.Linear"
-    :legend-position="LegendPosition.Top"
+    :legend-position="LegendPosition.TopCenter"
     :y-grid-line="true"
     :hide-x-axis="true"
     :hide-legend="true"
   />
-</template>
+</template>

package/app/components/V/A/Chart/RevenuevsCost.vue

@@ -70,13 +70,8 @@ const { height } = useResponsiveHeight({
   <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"

package/app/components/V/A/Chart/SearchIntent.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { TabsItem } from '#ui/types'
+import type { TabsItem } from '@nuxt/ui'
 
 const tabItems: TabsItem[] = [
   {

package/app/components/V/A/Chart/SpendingTrend.vue

@@ -105,7 +105,6 @@ const formatCurrency = (value: number) => {
         :data="chartData"
         :height="240"
         :categories="categories"
-        :y-axis="['amount']"
         :y-num-ticks="3"
         :y-grid-line="true"
         :curve-type="CurveType.MonotoneX"

package/app/components/V/A/Chart/StockComparisonLine.vue

@@ -70,12 +70,8 @@ const xAxisFormatter = (tick: number): string => {
   <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"

package/app/components/V/A/Chart/StocksPortfolioLine.vue

@@ -145,13 +145,9 @@ const xAxisFormatter = (tick: number): string => {
   <LineChart
     :data="chartData"
     :categories="chartCategories"
-    :y-axis="['portfolioValue']"
     :x-formatter="xAxisFormatter"
     :y-formatter="(i: number) => i / 1000 + 'K'"
     :height="220"
-    :radius="3"
-    :group-padding="0.2"
-    :bar-padding="0.2"
     :x-grid-line="true"
     :y-grid-line="true"
     :x-domain-line="true"

package/app/components/V/A/Chart/StocksSectorLine.vue

@@ -207,13 +207,9 @@ const xAxisFormatter = (tick: number): string => {
   <LineChart
     :data="chartData"
     :categories="chartCategories"
-    :y-axis="['domestic', 'international']"
     :x-formatter="xAxisFormatter"
     :y-formatter="(i: number) => i / 1000 + 'K'"
     :height="220"
-    :radius="3"
-    :group-padding="0.2"
-    :bar-padding="0.2"
     :x-grid-line="true"
     :y-grid-line="true"
     :x-domain-line="true"

package/app/components/V/A/Chart/TrafficOverview.vue

@@ -67,7 +67,7 @@ const categories: Record<string, Category> = {
 
 const xFormatter = (i: number) => `${engagementData[i]?.date}`
 
-const yFormatter = (value: number) => value + 'K'
+const yFormatter = (value: number) => `${value.toFixed(1)}m`
 </script>
 
 <template>
@@ -95,8 +95,7 @@ const yFormatter = (value: number) => value + 'K'
       :y-num-ticks="3"
       :x-formatter="xFormatter"
       :y-formatter="yFormatter"
-      :y-min="0"
-      :y-max="600000"
+      :y-domain="[0, 8]"
       :x-grid-line="true"
       :legend-position="LegendPosition.BottomCenter"
       :curve-type="CurveType.Linear"

package/app/components/V/A/Chart/WebPerformanceLineChart.vue

@@ -5,10 +5,21 @@ import {
   getMonthlyWebsiteStatistics
 } from '~/data/WebsiteStatistics'
 
-defineProps<{
-  categories: Record<string, BulletLegendItemInterface>
+const props = defineProps<{
+  categories?: Record<string, BulletLegendItemInterface>
 }>()
 
+const defaultCategories: Record<string, BulletLegendItemInterface> = {
+  conversions: {
+    name: 'Conversions',
+    color: 'var(--color-orange-400)'
+  },
+  bounceRate: {
+    name: 'Bounce Rate',
+    color: 'var(--color-lime-400)'
+  }
+}
+
 const isSettingsOpen = ref<boolean>(false)
 
 function toggleSettings() {
@@ -32,6 +43,12 @@ const dataViewOptions = [
 
 const selectedDataView = ref('daily')
 
+const categories = computed(() =>
+  props.categories && Object.keys(props.categories).length > 0
+    ? props.categories
+    : defaultCategories
+)
+
 const WebsiteStatistics = computed(() => {
   switch (selectedDataView.value) {
     case 'weekly':
@@ -46,10 +63,6 @@ const WebsiteStatistics = computed(() => {
 
 const xFormatter = (i: number): string =>
   String(WebsiteStatistics.value[i]?.date ?? '')
-
-function handleDataViewChange(value: string) {
-  console.log('Data view changed to:', value)
-}
 </script>
 
 <template>
@@ -84,7 +97,6 @@ function handleDataViewChange(value: string) {
           :items="dataViewOptions"
           placeholder="Select data view"
           class="w-full focus:ring-0"
-          @update:model-value="handleDataViewChange"
         />
         <UButton
           variant="soft"

package/app/components/V/A/Chart/WinLostDonut.vue

@@ -36,9 +36,22 @@ const winLossData = computed(() => [
   }
 ])
 
+const winLossCategories = computed<Record<string, BulletLegendItemInterface>>(
+  () =>
+    Object.fromEntries(
+      winLossData.value.map(item => [
+        item.name,
+        {
+          name: item.name,
+          color: item.color
+        }
+      ])
+    )
+)
+
 const percentage = computed(() => {
   const total = win.value + loss.value
-  if (total === 0) return '0%'
+  if (total === 0) return 0
   return Math.round((win.value / total) * 100)
 })
 </script>
@@ -56,13 +69,7 @@ const percentage = computed(() => {
             :data="winLossData.map((i) => i.value)"
             :height="160"
             :arc-width="10"
-            :labels="
-              winLossData.map((item) => ({
-                name: item.name,
-                color: item.color,
-                percentage: item.value
-              }))
-            "
+            :categories="winLossCategories"
             :pad-angle="0.1"
             :hide-legend="true"
             :radius="4"

package/app/components/V/A/Chart/WinLostLine.vue

@@ -83,13 +83,8 @@ const xAxisFormatter = (tick: number): string => {
     <LineChart
       :data="chartData"
       :categories="chartCategories"
-      :y-axis="['Income', 'Expense']"
       :x-formatter="xAxisFormatter"
       :height="160"
-      :stacked="false"
-      :radius="3"
-      :group-padding="0.2"
-      :bar-padding="0.2"
       :hide-legend="true"
       :x-grid-line="true"
       :y-grid-line="true"

package/app/composables/useResponsiveHeight.ts

@@ -0,0 +1,44 @@
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import { computed } from 'vue'
+
+interface ResponsiveHeightOptions {
+  default: number
+  sm?: number
+  md?: number
+  lg?: number
+  xl?: number
+  '2xl'?: number
+}
+
+export function useResponsiveHeight(options: ResponsiveHeightOptions) {
+  const breakpoints = useBreakpoints(breakpointsTailwind)
+
+  const height = computed(() => {
+    if (
+      options['2xl'] !== undefined
+      && breakpoints.greaterOrEqual('2xl').value
+    ) {
+      return options['2xl']
+    }
+
+    if (options.xl !== undefined && breakpoints.greaterOrEqual('xl').value) {
+      return options.xl
+    }
+
+    if (options.lg !== undefined && breakpoints.greaterOrEqual('lg').value) {
+      return options.lg
+    }
+
+    if (options.md !== undefined && breakpoints.greaterOrEqual('md').value) {
+      return options.md
+    }
+
+    if (options.sm !== undefined && breakpoints.greaterOrEqual('sm').value) {
+      return options.sm
+    }
+
+    return options.default
+  })
+
+  return { height }
+}

package/app/data/AppPerformance.ts

@@ -0,0 +1,107 @@
+import { computed } from 'vue'
+
+export interface AppPerformanceItem {
+  date: string
+  subscriptions: number
+  downloads: number
+}
+
+const startDate = new Date('2025-01-01T00:00:00Z')
+
+const sourceDailyData: AppPerformanceItem[] = Array.from(
+  { length: 90 },
+  (_, index) => {
+    const date = new Date(startDate)
+    date.setUTCDate(startDate.getUTCDate() + index)
+
+    return {
+      date: date.toISOString().slice(0, 10),
+      subscriptions: Math.max(
+        48,
+        86
+        + Math.round(Math.sin(index / 2.8) * 22)
+        + index
+        + ((index % 6) - 2) * 4
+      ),
+      downloads: Math.max(
+        96,
+        148
+        + Math.round(Math.cos(index / 3.4) * 28)
+        + index * 2
+        + ((index % 5) - 2) * 6
+      )
+    }
+  }
+)
+
+export const getDailyPerformanceData = computed(() => {
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: '2-digit'
+  })
+
+  return sourceDailyData.slice(0, 30).map(item => ({
+    ...item,
+    date: formatter.format(new Date(item.date))
+  }))
+})
+
+export const getWeeklyPerformanceData = computed((): AppPerformanceItem[] => {
+  const aggregated = new Map<
+    number,
+    { subscriptions: number, downloads: number }
+  >()
+
+  for (let index = 0; index < sourceDailyData.length; index++) {
+    const item = sourceDailyData[index]
+    if (!item) continue
+
+    const week = Math.floor(index / 7) + 1
+
+    if (!aggregated.has(week)) {
+      aggregated.set(week, {
+        subscriptions: 0,
+        downloads: 0
+      })
+    }
+
+    const current = aggregated.get(week)!
+    current.subscriptions += item.subscriptions
+    current.downloads += item.downloads
+  }
+
+  return Array.from(aggregated.entries()).map(([week, value]) => ({
+    date: `Week ${String(week).padStart(2, '0')}`,
+    subscriptions: value.subscriptions,
+    downloads: value.downloads
+  }))
+})
+
+export const getMonthlyPerformanceData = computed((): AppPerformanceItem[] => {
+  const aggregated = new Map<string, { subscriptions: number, downloads: number }>()
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    year: '2-digit'
+  })
+
+  for (const item of sourceDailyData) {
+    const monthKey = item.date.slice(0, 7)
+
+    if (!aggregated.has(monthKey)) {
+      aggregated.set(monthKey, {
+        subscriptions: 0,
+        downloads: 0
+      })
+    }
+
+    const current = aggregated.get(monthKey)!
+    current.subscriptions += item.subscriptions
+    current.downloads += item.downloads
+  }
+
+  return Array.from(aggregated.entries()).map(([monthKey, value]) => ({
+    date: formatter.format(new Date(`${monthKey}-01`)),
+    subscriptions: value.subscriptions,
+    downloads: value.downloads
+  }))
+})

package/app/data/WebsiteStatistics.ts

@@ -0,0 +1,122 @@
+import { computed } from 'vue'
+
+export interface WebsitePerformanceMetric {
+  date: string
+  bounceRate: number
+  conversions: number
+}
+
+const startDate = new Date('2025-01-01T00:00:00Z')
+
+const sourceDailyData: WebsitePerformanceMetric[] = Array.from(
+  { length: 90 },
+  (_, index) => {
+    const date = new Date(startDate)
+    date.setUTCDate(startDate.getUTCDate() + index)
+
+    return {
+      date: date.toISOString().slice(0, 10),
+      bounceRate: Math.max(
+        28,
+        Math.min(
+          62,
+          46
+          + Math.round(Math.sin(index / 4) * 5)
+          - (index % 6)
+        )
+      ),
+      conversions: Math.max(
+        72,
+        138
+        + Math.round(Math.cos(index / 3.1) * 18)
+        + Math.round(index * 0.7)
+        + ((index % 4) - 1) * 6
+      )
+    }
+  }
+)
+
+export const getDailyWebsiteStatistics = computed(() => {
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: '2-digit'
+  })
+
+  return sourceDailyData.slice(0, 30).map(item => ({
+    ...item,
+    date: formatter.format(new Date(item.date))
+  }))
+})
+
+export const getWeeklyWebsiteStatistics = computed(
+  (): WebsitePerformanceMetric[] => {
+    const aggregated = new Map<
+      number,
+      { bounceRate: number, conversions: number, count: number }
+    >()
+
+    for (let index = 0; index < sourceDailyData.length; index++) {
+      const item = sourceDailyData[index]
+      if (!item) continue
+
+      const week = Math.floor(index / 7) + 1
+
+      if (!aggregated.has(week)) {
+        aggregated.set(week, {
+          bounceRate: 0,
+          conversions: 0,
+          count: 0
+        })
+      }
+
+      const current = aggregated.get(week)!
+      current.bounceRate += item.bounceRate
+      current.conversions += item.conversions
+      current.count++
+    }
+
+    return Array.from(aggregated.entries()).map(([week, value]) => ({
+      date: `Week ${String(week).padStart(2, '0')}`,
+      bounceRate: Math.round(value.bounceRate / value.count),
+      conversions: value.conversions
+    }))
+  }
+)
+
+export const getMonthlyWebsiteStatistics = computed(
+  (): WebsitePerformanceMetric[] => {
+    const aggregated = new Map<
+      string,
+      { bounceRate: number, conversions: number, count: number }
+    >()
+    const formatter = new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      year: '2-digit'
+    })
+
+    for (const item of sourceDailyData) {
+      const monthKey = item.date.slice(0, 7)
+
+      if (!aggregated.has(monthKey)) {
+        aggregated.set(monthKey, {
+          bounceRate: 0,
+          conversions: 0,
+          count: 0
+        })
+      }
+
+      const current = aggregated.get(monthKey)!
+      current.bounceRate += item.bounceRate
+      current.conversions += item.conversions
+      current.count++
+    }
+
+    return Array.from(aggregated.entries()).map(([monthKey, value]) => ({
+      date: formatter.format(new Date(`${monthKey}-01`)),
+      bounceRate: Math.round(value.bounceRate / value.count),
+      conversions: value.conversions
+    }))
+  }
+)
+
+export const WebsiteStatistics = getMonthlyWebsiteStatistics

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veristone/nuxt-v-app",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "Veristone Nuxt App Layer - Shared components, composables, and layouts",
   "type": "module",
   "private": false,