@veristone/nuxt-v-app 0.1.0

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

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { SpendingData, BulletLegendItemInterface } from './types'
+
+const chartData = ref<SpendingData[]>([
+  {
+    month: 1,
+    amount: 2500,
+    previous: 1100
+  },
+  {
+    month: 2,
+    amount: 1500,
+    previous: 1200
+  },
+  {
+    month: 3,
+    amount: 3000,
+    previous: 2800
+  },
+  {
+    month: 4,
+    amount: 4000,
+    previous: 3500
+  },
+  {
+    month: 5,
+    amount: 4500,
+    previous: 4100
+  },
+  {
+    month: 6,
+    amount: 2800,
+    previous: 2500
+  },
+  {
+    month: 7,
+    amount: 3500,
+    previous: 3200
+  },
+  {
+    month: 8,
+    amount: 3800,
+    previous: 3600
+  },
+  {
+    month: 9,
+    amount: 2000,
+    previous: 1800
+  },
+  {
+    month: 10,
+    amount: 4200,
+    previous: 3900
+  },
+  {
+    month: 11,
+    amount: 2200,
+    previous: 2000
+  },
+  {
+    month: 12,
+    amount: 1800,
+    previous: 1500
+  }
+])
+
+const categories: Record<string, BulletLegendItemInterface> = {
+  amount: {
+    name: 'Current Spending',
+    color: '#22c55e'
+  },
+  previous: {
+    name: 'Last YHear',
+    color: '#00BCFF'
+  }
+}
+
+const formatCurrency = (value: number) => {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(value)
+}
+</script>
+
+<template>
+  <div>
+    <AreaChart
+      :data="chartData"
+      :height="90"
+      :categories="categories"
+      :y-axis="['amount']"
+      :y-num-ticks="2"
+      :y-grid-line="true"
+      :legend-position="LegendPosition.Bottom"
+      :hide-y-axis="true"
+      :hide-x-axis="true"
+      :hide-legend="true"
+      :x-formatter="
+        (i) =>
+          new Date(`2025-${chartData[i]?.month}-02`).toLocaleDateString(
+            'en-US',
+            {
+              month: 'short'
+            }
+          )
+      "
+      :y-formatter="formatCurrency"
+    />
+
+    <div class="flex justify-center pt-5 space-x-5">
+      <div
+        v-for="(category, key) in categories"
+        :key="key"
+        class="flex items-center"
+      >
+        <span
+          class="w-2 h-2 mr-2 rounded-sm"
+          :style="{ 'background-color': category.color }"
+        />
+        <span class="text-xs text-muted">{{ category.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+interface SpendingData {
+  month: string
+  amount: number
+}
+
+const chartData = ref<SpendingData[]>([
+  {
+    month: formatDate(new Date('2025-01-01')),
+    amount: 2500
+  },
+  {
+    month: formatDate(new Date('2025-02-01')),
+    amount: 1500
+  },
+  {
+    month: formatDate(new Date('2025-03-01')),
+    amount: 3000
+  },
+  {
+    month: formatDate(new Date('2025-04-01')),
+    amount: 4000
+  }
+])
+
+const categories: Record<string, BulletLegendItemInterface> = {
+  amount: {
+    name: 'Monthly Spending',
+    color: '#22c55e'
+  }
+}
+
+const formatCurrency = (tick: number) => {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(tick)
+}
+
+function formatDate(dateString: Date) {
+  const options = {
+    month: 'short'
+  }
+
+  const date = new Date(dateString)
+  return new Intl.DateTimeFormat('en-US', options).format(date)
+}
+</script>
+
+<template>
+  <div>
+    <BarChart
+      :data="chartData"
+      :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"
+      :y-formatter="formatCurrency"
+      :hide-legend="true"
+      class="pointer-events-none"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+interface TrafficDataItem {
+  hour: string
+  organic: number
+  paid: number
+  social: number
+  direct: number
+}
+
+const TrafficData: TrafficDataItem[] = [
+  {
+    hour: '06:00',
+    organic: 120,
+    paid: 45,
+    social: 30,
+    direct: 85
+  },
+  {
+    hour: '09:00',
+    organic: 280,
+    paid: 90,
+    social: 65,
+    direct: 150
+  },
+  {
+    hour: '12:00',
+    organic: 450,
+    paid: 180,
+    social: 120,
+    direct: 220
+  },
+  {
+    hour: '15:00',
+    organic: 380,
+    paid: 165,
+    social: 95,
+    direct: 190
+  },
+  {
+    hour: '18:00',
+    organic: 520,
+    paid: 200,
+    social: 140,
+    direct: 260
+  },
+  {
+    hour: '21:00',
+    organic: 320,
+    paid: 130,
+    social: 80,
+    direct: 170
+  }
+]
+
+const TrafficCategories = computed(() => ({
+  organic: {
+    name: 'Organic',
+    color: '#10b981'
+  },
+  paid: {
+    name: 'Paid',
+    color: '#6366f1'
+  },
+  social: {
+    name: 'Social',
+    color: '#8b5cf6'
+  },
+  direct: {
+    name: 'Direct',
+    color: '#f59e0b'
+  }
+}))
+
+const xFormatter = (i: number): string => `${TrafficData[i]?.hour}`
+const yFormatter = (value: number): string => `${value}`
+</script>
+
+<template>
+  <UCard>
+    <div class="space-y-4">
+      <div class="flex items-center justify-between">
+        <h2 class="text-lg font-medium text-highlighted">
+          Traffic Analytics
+        </h2>
+        <div class="text-sm text-toned">
+          Last Hours
+        </div>
+      </div>
+
+      <AreaChart
+        :data="TrafficData"
+        :height="240"
+        :categories="TrafficCategories"
+        :x-formatter="xFormatter"
+        :y-formatter="yFormatter"
+        :curve-type="CurveType.Cardinal"
+        :legend-position="LegendPosition.TopRight"
+        :hide-legend="false"
+        :x-grid-line="false"
+        :y-grid-line="true"
+        :x-domain-line="true"
+        :y-domain-line="false"
+        :x-num-ticks="6"
+        y-label="Visitors"
+      />
+    </div>
+  </UCard>
+</template>

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

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  title: string
+  color?: string
+}>()
+
+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
+  },
+  {
+    month: 'May',
+    desktop: 209,
+    mobile: 130
+  },
+  {
+    month: 'June',
+    desktop: 214,
+    mobile: 140
+  }
+]
+
+const RevenueCategories = {
+  desktop: {
+    name: 'Desktop',
+    color: props.color
+  }
+}
+
+const xFormatter = (i: number): string => `${RevenueData[i]?.month}`
+const yFormatter = (i: number) => i.toString()
+</script>
+
+<template>
+  <UCard>
+    <div class="space-y-4">
+      <div class="flex items-center justify-between">
+        <h2 class="text-lg font-medium text-highlighted">
+          {{ title }}
+        </h2>
+        <div class="text-sm text-toned">
+          Last 6 Months
+        </div>
+      </div>
+
+      <BarChart
+        :data="RevenueData"
+        :height="240"
+        :categories="RevenueCategories"
+        :y-axis="['desktop']"
+        :x-num-ticks="6"
+        :radius="4"
+        :y-grid-line="true"
+        :x-formatter="xFormatter"
+        :y-formatter="yFormatter"
+        :legend-position="LegendPosition.TopRight"
+        y-label="Visitors"
+      />
+    </div>
+  </UCard>
+</template>

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

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+const categories = {
+  'Sustainable TECH': {
+    name: 'Sustainable TECH',
+    color: 'var(--ui-primary)',
+    percentage: 85
+  },
+  'Non-sustainable TECH': {
+    name: 'Non-sustainable TECH',
+    color: 'transparent',
+    percentage: 15
+  }
+}
+</script>
+
+<template>
+  <DonutChart
+    :data="Object.values(categories).map((i) => i.percentage)"
+    :height="180"
+    :categories="categories"
+    :hide-legend="true"
+    :type="DonutType.Half"
+    :pad-angle="0.1"
+    :radius="16"
+  >
+    <div class="mt-16 text-center space-y-2">
+      <div class="text-4xl font-bold">
+        85%
+      </div>
+      <div class="text-muted">
+        Sustainable Tech
+      </div>
+    </div>
+  </DonutChart>
+</template>

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

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+const marketShareLabels = [
+  {
+    name: 'Chrome',
+    color: 'var(--color-success)',
+    percentage: 65.2
+  },
+  {
+    name: 'Safari',
+    color: 'var(--color-indigo-400)',
+    percentage: 18.7
+  },
+  {
+    name: 'Edge',
+    color: 'var(--color-sky-400)',
+    percentage: 4.3
+  }
+]
+
+const marketShareData = marketShareLabels.map(i => i.percentage)
+
+const marketShareCategories = Object.fromEntries(
+  marketShareLabels.map(item => [
+    item.name,
+    {
+      name: item.name,
+      color: item.color
+    }
+  ])
+)
+</script>
+
+<template>
+  <div class="my-4 flex flex-col">
+    <DonutChart
+      :data="marketShareData"
+      :height="110"
+      :type="DonutType.Full"
+      :radius="2"
+      :categories="marketShareCategories"
+      :hide-legend="true"
+      :arc-width="12"
+      :pad-angle="0.1"
+    >
+      <div class=" text-center">
+        <div class="text-muted text-sm">
+          Browser
+        </div>
+      </div>
+    </DonutChart>
+
+    <div
+      class="max-auto divide-rounded-lg w-full space-y-2 divide-y divide-(--ui-border) px-2"
+    >
+      <div class="text-muted flex justify-between pb-2 text-xs">
+        <div>Browser</div>
+        <div>Share</div>
+      </div>
+      <div
+        v-for="(share, shareKey) in marketShareLabels"
+        :key="shareKey"
+        class="flex w-full items-center justify-between pb-2 text-sm last:pb-0"
+      >
+        <div class="flex items-center gap-4">
+          <div
+            class="h-4 w-1"
+            :style="{ backgroundColor: share.color }"
+          />
+          <div class="text-muted">
+            {{ share.name }}
+          </div>
+        </div>
+        <div>{{ share.percentage }}%</div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+interface SalesDataItem {
+  product: string;
+  sales: number;
+  counter: number;
+}
+
+const SalesData: SalesDataItem[] = [
+  { product: "Widgets", sales: 2400, counter: -600 },
+  { product: "Gadgets", sales: 1800, counter: -350 },
+  { product: "Tools", sales: 3200, counter: -800 },
+  { product: "Parts", sales: 2000, counter: -25 },
+  { product: "Kits", sales: 2800, counter: -700 },
+  { product: "Accessories", sales: 1500, counter: -200 },
+  { product: "Supplies", sales: 1700, counter: -300 },
+  { product: "Components", sales: 2600, counter: -500 },
+  { product: "Devices", sales: 2100, counter: -400 },
+  { product: "Modules", sales: 2300, counter: -450 },
+];
+
+const SalesCategories = computed(() => ({
+  sales: {
+    name: "Sales Revenue",
+    color: "var(--ui-primary)",
+  },
+  counter: {
+    name: "Counter Revenue",
+    color: "var(--color-warning-500)",
+  },
+}));
+
+const xFormatter = (i: number): string => `${SalesData[i]?.product}`;
+const yFormatter = (value: number): string => `$${(value / 1000).toFixed(1)}k`;
+</script>
+
+<template>
+  <BarChart
+    :data="SalesData"
+    :height="140"
+    :stacked="true"
+    :categories="SalesCategories"
+    :hide-x-axis="true"
+    :y-num-ticks="4"
+    :y-axis="['sales' ,'counter']"
+    :x-formatter="xFormatter"
+    :y-formatter="yFormatter"
+    :legend-position="LegendPosition.Top"
+    :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="8"
+    :bar-padding="0.6"
+  />
+</template>

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

@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+interface SpendingCategory {
+  color: string;
+  name: string;
+  value: number;
+}
+
+const spendingData = ref<SpendingCategory[]>([
+  {
+    color: "var(--color-emerald-500)", // green
+    name: "Food & Drink",
+    value: 420,
+  },
+  {
+    color: "var(--color-indigo-500)", // purple
+    name: "Grocery",
+    value: 320,
+  },
+  {
+    color: "var(--color-pink-500)", // red/pink
+    name: "Shopping",
+    value: 210,
+  },
+  {
+    color: "var(--color-amber-500)", // warning (amber)
+    name: "Transport",
+    value: 150,
+  },
+]);
+
+const totalSpent = computed(() =>
+  spendingData.value.reduce((sum, item) => sum + item.value, 0)
+);
+
+const formatCurrency = (amount: number) => {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 0,
+  }).format(amount);
+};
+</script>
+
+<template>
+  <div class="space-y-8">
+    <Flex class="gap-8 space-y-4">
+      <div class="relative w-46">
+        <DonutChart
+          :data="spendingData.map((i) => i.value)"
+          :height="200"
+          :arc-width="10"
+          :labels="
+            spendingData.map((item) => ({
+              name: item.name,
+              color: item.color,
+              percentage: item.value,
+            }))
+          "
+          :pad-angle="0.1"
+          :hide-legend="true"
+          :radius="4"
+        >
+          <div
+            class="absolute text-center w-full top-1/2 left-1/2"
+            style="transform: translate(-50%, -50%)"
+          >
+            <div class="text-xs text-muted">Total Spent</div>
+            <div class="text-2xl font-bold">
+              {{ formatCurrency(totalSpent) }}
+            </div>
+          </div>
+        </DonutChart>
+      </div>
+      <FlexCol>
+        <div class="flex flex-wrap gap-.5">
+          <template v-for="(category, index) in spendingData" :key="index">
+            <FlexBetween class="w-full">
+              <Flex class="gap-4">
+                <div
+                  class="h-2 w-2 rounded-full"
+                  :style="{ backgroundColor: category.color }"
+                />
+                <span class="text-muted whitespace-nowrap">{{ category.name }}</span>
+              </Flex>
+              <span>{{ ((category.value / totalSpent) * 100).toFixed(1) }}%</span>
+            </FlexBetween>
+            <div
+              v-if="index < spendingData.length - 1"
+              class="w-full border-t border-dashed border-default my-2"
+            />
+          </template>
+        </div>
+      </FlexCol>
+    </Flex>
+  </div>
+</template>