Products Analytics

Revenue charts and subscription metrics dashboard

SaaSProducts

Overview

ProductsAnalyticsDashboard displays key product metrics including revenue trends with time-series charts, subscription health (active, new, churned, MRR), top-performing products table, and license counts. Supports weekly, monthly, and quarterly periods with currency formatting and trend indicators.

Usage

import { ProductsAnalyticsDashboard } from "@leanicon/web-builder-library/saas";

<ProductsAnalyticsDashboard
  data={analyticsData}
  onPeriodChange={(period) => fetchData(period)}
  onProductClick={(productId) => router.push(`/products/${productId}`)}
  currency="USD"
/>;

Variants

Loading

<SaaSProductsProductsAnalyticsDashboard loading={true} />

Error

<SaaSProductsProductsAnalyticsDashboard error="Unable to connect to analytics service. Please check your connection and try again." />

Empty Data

<SaaSProductsProductsAnalyticsDashboard />

Dark

<SaaSProductsProductsAnalyticsDashboard loading={true} />

Default

<ProductsAnalyticsDashboard
  data={{
    period: "monthly",
    startDate: "2024-01-01",
    endDate: "2024-01-31",
    revenue: {
      total: 125000,
      change: 12.5,
      timeSeries: revenueTimeSeries,
    },
    subscriptions: {
      activeSubscriptions: 1250,
      subscriptionChange: 8.3,
      newSubscriptions: 180,
      churnedSubscriptions: 45,
      churnRate: 3.6,
      mrr: 125000,
      mrrChange: 10.2,
      timeSeries: subscriptionTimeSeries,
    },
    topProducts: [
      {
        productId: "prod-1",
        productName: "Enterprise Suite",
        revenue: 50000,
        units: 120,
        growth: 15.3,
      },
      {
        productId: "prod-2",
        productName: "Professional Plan",
        revenue: 35000,
        units: 280,
        growth: 8.2,
      },
    ],
    licenses: { total: 2500, change: 5.2 },
  }}
  onPeriodChange={(period) => console.log("Period:", period)}
  onProductClick={(id) => console.log("Product:", id)}
/>

High Growth

<ProductsAnalyticsDashboard
  data={{
    ...analyticsData,
    revenue: { ...analyticsData.revenue, total: 250000, change: 45.2 },
    subscriptions: {
      ...analyticsData.subscriptions,
      activeSubscriptions: 2500,
      subscriptionChange: 38.5,
      newSubscriptions: 800,
      churnedSubscriptions: 20,
      churnRate: 0.8,
      mrrChange: 42.1,
    },
  }}
/>

Euro Currency

<ProductsAnalyticsDashboard data={analyticsData} currency="EUR" />