Analytics

const categoryStats = await convex.query(api.shared.analytics.getProductCountsByGlobalCategory);

const categoryStats = await convex.query("shared.analytics.getProductCountsByGlobalCategory");

import requests

response = requests.post(
    f"{CONVEX_URL}/api/query",
    json={
        "path": "shared.analytics.getProductCountsByGlobalCategory",
        "args": {}
    },
    headers={"Authorization": f"Bearer {token}"}
)

category_stats = response.json()

const products = await convex.query(api.shared.analytics.getProductsByGlobalCategory, {
  globalCategoryId: "k123456789",
  limit: 50
});

const products = await convex.query("shared.analytics.getProductsByGlobalCategory", {
  globalCategoryId: "k123456789",
  limit: 50
});

response = requests.post(
    f"{CONVEX_URL}/api/query",
    json={
        "path": "shared.analytics.getProductsByGlobalCategory",
        "args": {
            "globalCategoryId": "k123456789",
            "limit": 50
        }
    },
    headers={"Authorization": f"Bearer {token}"}
)

products = response.json()

const storeDistribution = await convex.query(api.shared.analytics.getStoreDistributionByGlobalCategory, {
  globalCategoryId: "k123456789"
});

const storeDistribution = await convex.query("shared.analytics.getStoreDistributionByGlobalCategory", {
  globalCategoryId: "k123456789"
});

response = requests.post(
    f"{CONVEX_URL}/api/query",
    json={
        "path": "shared.analytics.getStoreDistributionByGlobalCategory",
        "args": {
            "globalCategoryId": "k123456789"
        }
    },
    headers={"Authorization": f"Bearer {token}"}
)

distribution = response.json()

import { useQuery } from 'convex/react';
import { api } from './convex/_generated/api';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

function AnalyticsDashboard() {
  const categoryStats = useQuery(api.shared.analytics.getProductCountsByGlobalCategory);

  if (!categoryStats) return <div>Loading analytics...</div>;

  return (
    <div className="p-6">
      <h2 className="text-2xl font-bold mb-6">Marketplace Analytics</h2>
      
      {/* Category Distribution Chart */}
      <div className="bg-white p-6 rounded-lg shadow mb-6">
        <h3 className="text-lg font-semibold mb-4">Products by Category</h3>
        <ResponsiveContainer width="100%" height={300}>
          <BarChart data={categoryStats}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="categoryName" />
            <YAxis />
            <Tooltip />
            <Bar dataKey="productCount" fill="#0D9373" />
          </BarChart>
        </ResponsiveContainer>
      </div>

      {/* Category Stats Table */}
      <div className="bg-white p-6 rounded-lg shadow">
        <h3 className="text-lg font-semibold mb-4">Category Statistics</h3>
        <div className="overflow-x-auto">
          <table className="min-w-full table-auto">
            <thead>
              <tr className="bg-gray-50">
                <th className="px-4 py-2 text-left">Category</th>
                <th className="px-4 py-2 text-right">Product Count</th>
                <th className="px-4 py-2 text-right">Percentage</th>
              </tr>
            </thead>
            <tbody>
              {categoryStats.map((category) => {
                const total = categoryStats.reduce((sum, cat) => sum + cat.productCount, 0);
                const percentage = ((category.productCount / total) * 100).toFixed(1);
                
                return (
                  <tr key={category.categoryId} className="border-t">
                    <td className="px-4 py-2">{category.categoryName}</td>
                    <td className="px-4 py-2 text-right">{category.productCount}</td>
                    <td className="px-4 py-2 text-right">{percentage}%</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

<template>
  <div class="analytics-dashboard">
    <h2>Marketplace Analytics</h2>
    
    <div v-if="loading">Loading analytics...</div>
    
    <div v-else>
      <!-- Category Stats -->
      <div class="stats-grid">
        <div v-for="category in categoryStats" :key="category.categoryId" class="stat-card">
          <h3>{{ category.categoryName }}</h3>
          <p class="stat-number">{{ category.productCount }}</p>
          <p class="stat-label">Products</p>
        </div>
      </div>
      
      <!-- Store Distribution -->
      <div class="store-distribution" v-if="selectedCategory">
        <h3>Store Distribution for {{ selectedCategoryName }}</h3>
        <div v-for="store in storeDistribution" :key="store.storeId" class="store-item">
          <span>{{ store.storeName }}</span>
          <span>{{ store.productCount }} products</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categoryStats: [],
      storeDistribution: [],
      selectedCategory: null,
      loading: true
    };
  },
  
  async mounted() {
    await this.loadAnalytics();
  },
  
  methods: {
    async loadAnalytics() {
      try {
        this.categoryStats = await convex.query("shared.analytics.getProductCountsByGlobalCategory");
        this.loading = false;
      } catch (error) {
        console.error('Failed to load analytics:', error);
        this.loading = false;
      }
    },
    
    async loadStoreDistribution(categoryId) {
      this.storeDistribution = await convex.query(
        "shared.analytics.getStoreDistributionByGlobalCategory",
        { globalCategoryId: categoryId }
      );
      this.selectedCategory = categoryId;
    }
  }
};
</script>