@veristone/nuxt-v-app 0.1.0

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

@@ -0,0 +1,161 @@
+<script lang="ts" setup>
+interface DailyData {
+  day: string
+  portfolioValue: number
+}
+
+const chartData = ref<DailyData[]>([
+  {
+    day: 'Day 1',
+    portfolioValue: 150000
+  },
+  {
+    day: 'Day 2',
+    portfolioValue: 148000
+  },
+  {
+    day: 'Day 3',
+    portfolioValue: 147500
+  },
+  {
+    day: 'Day 4',
+    portfolioValue: 149000
+  },
+  {
+    day: 'Day 5',
+    portfolioValue: 148200
+  },
+  {
+    day: 'Day 6',
+    portfolioValue: 149800
+  },
+  {
+    day: 'Day 7',
+    portfolioValue: 148900
+  },
+  {
+    day: 'Day 8',
+    portfolioValue: 149500
+  },
+  {
+    day: 'Day 9',
+    portfolioValue: 150200
+  },
+  {
+    day: 'Day 10',
+    portfolioValue: 149800
+  },
+  {
+    day: 'Day 11',
+    portfolioValue: 150500
+  },
+  {
+    day: 'Day 12',
+    portfolioValue: 150800
+  },
+  {
+    day: 'Day 13',
+    portfolioValue: 151000
+  },
+  {
+    day: 'Day 14',
+    portfolioValue: 150700
+  },
+  {
+    day: 'Day 15',
+    portfolioValue: 151200
+  },
+  {
+    day: 'Day 16',
+    portfolioValue: 151500
+  },
+  {
+    day: 'Day 17',
+    portfolioValue: 151800
+  },
+  {
+    day: 'Day 18',
+    portfolioValue: 152000
+  },
+  {
+    day: 'Day 19',
+    portfolioValue: 153500
+  },
+  {
+    day: 'Day 20',
+    portfolioValue: 156000
+  },
+  {
+    day: 'Day 21',
+    portfolioValue: 158500
+  },
+  {
+    day: 'Day 22',
+    portfolioValue: 157000
+  },
+  {
+    day: 'Day 23',
+    portfolioValue: 158800
+  },
+  {
+    day: 'Day 24',
+    portfolioValue: 160000
+  },
+  {
+    day: 'Day 25',
+    portfolioValue: 161500
+  },
+  {
+    day: 'Day 26',
+    portfolioValue: 160000
+  },
+  {
+    day: 'Day 27',
+    portfolioValue: 162000
+  },
+  {
+    day: 'Day 28',
+    portfolioValue: 163500
+  },
+  {
+    day: 'Day 29',
+    portfolioValue: 165000
+  },
+  {
+    day: 'Day 30',
+    portfolioValue: 167000
+  }
+])
+
+const chartCategories: Record<string, BulletLegendItemInterface> = {
+  portfolioValue: {
+    name: 'Portfolio Value',
+    color: '#10b981'
+  }
+}
+
+const xAxisFormatter = (tick: number): string => {
+  // tick is the index of the data point
+  const days = chartData.value.map(item => item.day)
+  return days[tick] || ''
+}
+</script>
+
+<template>
+  <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"
+    :y-domain-line="true"
+    :y-num-ticks="4"
+  />
+</template>

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

@@ -0,0 +1,223 @@
+<script lang="ts" setup>
+// 1. Update the interface to include two stock categories
+interface DailyData {
+  day: string
+  domestic: number
+  international: number
+  portfolioValue: number
+}
+
+// Defining a type for chart categories based on nuxt-charts' expected format
+interface BulletLegendItemInterface {
+  name: string
+  color: string
+}
+
+// Function to generate sample daily values for the two categories
+const generateCategoryData = (
+  baseValue: number,
+  dayIndex: number
+): [number, number] => {
+  // Introduce a stronger upward trend for each category, relative to the dayIndex
+  // and ensure their sum is close to the baseValue with minimal fluctuation
+  const domesticRatio = 0.85 + (dayIndex / 30) * 0.08 + Math.sin(dayIndex * 0.5) * 0.005 // Base 85%, stronger growth, very small fluctuation
+  const internationalRatio = 0.15 + (dayIndex / 30) * 0.04 + Math.cos(dayIndex * 0.6) * 0.002 // Base 15%, stronger growth, even smaller fluctuation
+
+  // Calculate raw values
+  let domestic = baseValue * domesticRatio
+  let international = baseValue * internationalRatio
+
+  // Normalize to ensure domestic + international equals baseValue
+  const currentSum = domestic + international
+  if (currentSum > 0) {
+    const normalizationFactor = baseValue / currentSum
+    domestic *= normalizationFactor
+    international *= normalizationFactor
+  }
+
+  return [
+    Math.round(domestic),
+    Math.round(international)
+  ]
+}
+
+const initialData: Omit<
+  DailyData,
+  'domestic' | 'international'
+>[] = [
+  {
+    day: 'Day 1',
+    portfolioValue: 150000
+  },
+  {
+    day: 'Day 2',
+    portfolioValue: 148000
+  },
+  {
+    day: 'Day 3',
+    portfolioValue: 147500
+  },
+  {
+    day: 'Day 4',
+    portfolioValue: 149000
+  },
+  {
+    day: 'Day 5',
+    portfolioValue: 148200
+  },
+  {
+    day: 'Day 6',
+    portfolioValue: 149800
+  },
+  {
+    day: 'Day 7',
+    portfolioValue: 148900
+  },
+  {
+    day: 'Day 8',
+    portfolioValue: 149500
+  },
+  {
+    day: 'Day 9',
+    portfolioValue: 150200
+  },
+  {
+    day: 'Day 10',
+    portfolioValue: 149800
+  },
+  {
+    day: 'Day 11',
+    portfolioValue: 150500
+  },
+  {
+    day: 'Day 12',
+    portfolioValue: 150800
+  },
+  {
+    day: 'Day 13',
+    portfolioValue: 151000
+  },
+  {
+    day: 'Day 14',
+    portfolioValue: 150700
+  },
+  {
+    day: 'Day 15',
+    portfolioValue: 151200
+  },
+  {
+    day: 'Day 16',
+    portfolioValue: 151500
+  },
+  {
+    day: 'Day 17',
+    portfolioValue: 151800
+  },
+  {
+    day: 'Day 18',
+    portfolioValue: 152000
+  },
+  {
+    day: 'Day 19',
+    portfolioValue: 153500
+  },
+  {
+    day: 'Day 20',
+    portfolioValue: 156000
+  },
+  {
+    day: 'Day 21',
+    portfolioValue: 158500
+  },
+  {
+    day: 'Day 22',
+    portfolioValue: 157000
+  },
+  {
+    day: 'Day 23',
+    portfolioValue: 158800
+  },
+  {
+    day: 'Day 24',
+    portfolioValue: 160000
+  },
+  {
+    day: 'Day 25',
+    portfolioValue: 161500
+  },
+  {
+    day: 'Day 26',
+    portfolioValue: 160000
+  },
+  {
+    day: 'Day 27',
+    portfolioValue: 162000
+  },
+  {
+    day: 'Day 28',
+    portfolioValue: 163500
+  },
+  {
+    day: 'Day 29',
+    portfolioValue: 165000
+  },
+  {
+    day: 'Day 30',
+    portfolioValue: 167000
+  }
+]
+
+// 2. Generate the full chart data with categories
+const chartData = ref<DailyData[]>(
+  initialData.map((item, index) => {
+    const [domestic, international] = generateCategoryData(
+      item.portfolioValue,
+      index
+    )
+    return {
+      ...item,
+      domestic,
+      international,
+      // Recalculate portfolioValue as the sum of categories for consistency
+      portfolioValue: domestic + international
+    }
+  })
+)
+
+// 3. Update categories with two dimensions and specified colors
+const chartCategories: Record<string, BulletLegendItemInterface> = {
+  domestic: {
+    name: 'Domestic',
+    color: '#facc15' // amber-400
+  },
+  international: {
+    name: 'International',
+    color: '#d97706' // amber-600
+  }
+}
+
+const xAxisFormatter = (tick: number): string => {
+  // tick is the index of the data point
+  const days = chartData.value.map(item => item.day)
+  return days[tick] || ''
+}
+</script>
+
+<template>
+  <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"
+    :y-domain-line="true"
+    :y-num-ticks="4"
+  />
+</template>

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

@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import { TasksData } from '~/data/TasksData'
+
+interface TaskStatusItem {
+  status: string
+  toDo: number
+  inProgress: number
+  blockedOnHold: number
+}
+
+// Generate task status breakdown data
+const TaskStatusData: TaskStatusItem[] = [
+  {
+    status: 'Week 1',
+    toDo: TasksData.find(d => d.title === 'Backlog')?.tasks.length || 3,
+    inProgress: TasksData.find(d => d.title === 'In Progress')?.tasks.length || 2,
+    blockedOnHold: TasksData.find(d => d.title === 'In Review')?.tasks.length || 3
+  },
+  {
+    status: 'Week 2',
+    toDo: 5,
+    inProgress: 3,
+    blockedOnHold: 2
+  },
+  {
+    status: 'Week 3',
+    toDo: 4,
+    inProgress: 4,
+    blockedOnHold: 1
+  },
+  {
+    status: 'Week 4',
+    toDo: 6,
+    inProgress: 2,
+    blockedOnHold: 2
+  },
+  {
+    status: 'Week 5',
+    toDo: 3,
+    inProgress: 5,
+    blockedOnHold: 1
+  },
+  {
+    status: 'Week 6',
+    toDo: 2,
+    inProgress: 4,
+    blockedOnHold: 3
+  }
+]
+
+const TaskStatusCategories = computed(() => ({
+  toDo: {
+    name: 'To Do',
+    color: '#CE824E'
+  },
+  inProgress: {
+    name: 'In Progress',
+    color: '#5D5AA1'
+  },
+  blockedOnHold: {
+    name: 'Blocked / On Hold',
+    color: '#3C3C3C'
+  }
+}))
+
+const xFormatter = (i: number): string => `${TaskStatusData[i]?.status}`
+const yFormatter = (value: number): string => `${value}`
+</script>
+
+<template>
+  <div>
+    <BarChart
+      :data="TaskStatusData"
+      :height="320"
+      :categories="TaskStatusCategories"
+      :y-axis="['toDo', 'inProgress', 'blockedOnHold']"
+      :x-formatter="xFormatter"
+      :y-formatter="yFormatter"
+      :legend-position="LegendPosition.TopRight"
+      :hide-legend="false"
+      :y-grid-line="true"
+      :x-grid-line="false"
+      :y-domain-line="false"
+      :x-domain-line="false"
+      :y-tick-line="false"
+      :x-tick-line="false"
+      :radius="6"
+      :group-padding="0.15"
+      :bar-padding="0.2"
+      :x-num-ticks="6"
+      :y-num-ticks="6"
+      x-label="Time Period"
+      y-label="Number of Tasks"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+const colorMode = useColorMode()
+
+interface BurndownItem {
+  day: string
+  ideal: number
+  actual: number
+}
+
+// Burndown chart data - shows remaining tasks over time
+const SystemMetricsData: BurndownItem[] = [
+  {
+    day: 'Day 1',
+    ideal: 120,
+    actual: 120
+  },
+  {
+    day: 'Day 2',
+    ideal: 110,
+    actual: 110
+  },
+  {
+    day: 'Day 3',
+    ideal: 100,
+    actual: 110
+  },
+  {
+    day: 'Day 4',
+    ideal: 90,
+    actual: 100
+  },
+  {
+    day: 'Day 5',
+    ideal: 80,
+    actual: 80
+  },
+  {
+    day: 'Day 6',
+    ideal: 70,
+    actual: 90
+  },
+  {
+    day: 'Day 7',
+    ideal: 60,
+    actual: 90
+  },
+  {
+    day: 'Day 8',
+    ideal: 50,
+    actual: 70
+  },
+  {
+    day: 'Day 9',
+    ideal: 40,
+    actual: 60
+  },
+  {
+    day: 'Day 10',
+    ideal: 30,
+    actual: 35
+  },
+  {
+    day: 'Day 11',
+    ideal: 20,
+    actual: 30
+  },
+  {
+    day: 'Day 12',
+    ideal: 10,
+    actual: 30
+  },
+  {
+    day: 'Day 13',
+    ideal: 0,
+    actual: 20
+  },
+  {
+    day: 'Day 14',
+    ideal: 0,
+    actual: 15
+  }
+]
+
+const SystemCategories = computed(() => ({
+  ideal: {
+    name: 'Ideal Progress',
+    color: colorMode.value === 'dark' ? '#5D5AA1' : '#5D5AA1'
+  },
+  actual: {
+    name: 'Actual Progress',
+    color: colorMode.value === 'dark' ? '#CE824E' : '#CE824E'
+  }
+}))
+
+const xFormatter = (i: number): string => `${SystemMetricsData[i]?.day}`
+const yFormatter = (value: number): string => `${value}`
+
+const GradientStops = [
+  {
+    offset: '0%',
+    stopOpacity: 1
+  },
+  {
+    offset: '50%',
+    stopOpacity: 0
+  }
+]
+</script>
+
+<template>
+  <AreaChart
+    :key="colorMode.value"
+    :data="SystemMetricsData"
+    :height="320"
+    :categories="SystemCategories"
+    :curve-type="CurveType.StepAfter"
+    :x-formatter="xFormatter"
+    :y-formatter="yFormatter"
+    :legend-position="LegendPosition.TopRight"
+    :hide-legend="false"
+    :y-grid-line="true"
+    :x-grid-line="true"
+    :y-domain-line="true"
+    :x-domain-line="true"
+    :x-tick-line="true"
+    :y-tick-line="false"
+    x-label="Sprint Days"
+    :gradient-stops="GradientStops"
+  />
+</template>

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

@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+// Use useSlots() instead of defineSlots() to avoid Vue 3.5 runtime error
+const slots = useSlots()
+
+const daysInPeriod = 31
+const avgEngagementMinutes = 4.5
+
+function getDateStr(dayOffset: number) {
+  const date = new Date()
+
+  date.setDate(date.getDate() - (daysInPeriod - 1) + dayOffset)
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: '2-digit'
+  })
+}
+
+const engagementData = Array.from({ length: daysInPeriod }, (_, i) => {
+  const dailyEngagement = avgEngagementMinutes + (Math.random() - 0.5) * 3
+  return {
+    date: getDateStr(i),
+    Engagement: Math.round(dailyEngagement * 10) / 10
+  }
+})
+
+// Previous period data (same range, previous period)
+function getPrevDateStr(dayOffset: number) {
+  const date = new Date()
+  date.setDate(date.getDate() - daysInPeriod - (daysInPeriod - 1) + dayOffset)
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: '2-digit'
+  })
+}
+
+const prevEngagementData = Array.from({ length: daysInPeriod }, (_, i) => {
+  // Simulate previous period with slightly lower engagement
+  const dailyEngagement
+    = avgEngagementMinutes - 0.7 + (Math.random() - 0.5) * 3
+  return {
+    'date': getPrevDateStr(i),
+    'Previous Period': Math.round(dailyEngagement * 10) / 10
+  }
+})
+
+// Merge both datasets by date
+const mergedData = engagementData.map((curr, i) => ({
+  'date': curr.date,
+  'Engagement': curr.Engagement,
+  'Previous Period': prevEngagementData[i]?.['Previous Period'] ?? null
+}))
+
+interface Category {
+  name: string
+  color: string
+}
+const categories: Record<string, Category> = {
+  'Engagement': {
+    name: 'Avg. Engagement (min)',
+    color: 'var(--ui-primary)'
+  },
+  'Previous Period': {
+    name: 'Previous Period',
+    color: 'var(--color-amber-400)'
+  }
+}
+
+const xFormatter = (i: number) => `${engagementData[i]?.date}`
+
+const yFormatter = (value: number) => value + 'K'
+</script>
+
+<template>
+  <UCard :ui="{ footer: 'flex justify-end' }">
+    <template #header>
+      <div class="space-y-2">
+        <CardsSubtitle>Total Users</CardsSubtitle>
+        <CardsTitle>135K</CardsTitle>
+      </div>
+
+      <UButton
+        color="success"
+        variant="soft"
+        size="sm"
+        icon="i-lucide-circle-check"
+        aria-label="Status OK"
+        class="shrink-0"
+      />
+    </template>
+
+    <LineChart
+      :data="mergedData"
+      :height="200"
+      :categories="categories"
+      :y-num-ticks="3"
+      :x-formatter="xFormatter"
+      :y-formatter="yFormatter"
+      :y-min="0"
+      :y-max="600000"
+      :x-grid-line="true"
+      :legend-position="LegendPosition.BottomCenter"
+      :curve-type="CurveType.Linear"
+    />
+
+    <template
+      v-if="slots.action"
+      #footer
+    >
+      <slot name="action" />
+    </template>
+  </UCard>
+</template>