Storage Dashboard

Overview

The analytics domain provides components for visualizing storage usage. StorageDashboard shows an overview with stat cards, quota progress bar, and usage-by-type breakdown. StorageStatCard displays individual metrics with optional trend indicators. QuotaIndicator renders storage quota as a bar or circular progress with configurable warning/critical thresholds.

Usage

import { QuotaIndicator, StorageDashboard, StorageStatCard } from "@leanicon/web-builder-library/saas";

<StorageDashboard
  metrics={{
    totalUsed: 7.5 * 1024 * 1024 * 1024,
    quota: 10 * 1024 * 1024 * 1024,
    fileCount: 1247,
    folderCount: 89,
    usageByType: [
      { category: "document", bytes: 3 * 1024 * 1024 * 1024, percentage: 40 },
      { category: "image", bytes: 2 * 1024 * 1024 * 1024, percentage: 27 },
    ],
  }}
/>

<StorageStatCard title="Total Storage" value="7.5" suffix="GB" />

<QuotaIndicator used={5 * 1024 * 1024 * 1024} quota={10 * 1024 * 1024 * 1024} variant="bar" showLabel />

Components

StorageDashboard - Default

StorageDashboard (Dark)

StorageDashboard - Loading

StorageDashboard - Error

StorageStatCard - Default

StorageStatCard - With Positive Change

StorageStatCard - With Negative Change

StorageStatCard - Loading

StorageStatCard - Grid Layout

QuotaIndicator - Bar Variant

QuotaIndicator - Circular Variant

QuotaIndicator - All Sizes

QuotaIndicator - Usage Levels (Bar)

QuotaIndicator - Custom Thresholds