@quantabit/dashboard-sdk

QuantaBit 数据报表/仪表盘 SDK - 提供 BI 看板、指标统计、可视化图表功能

📦 安装

npm install @quantabit/dashboard-sdk
# 或
yarn add @quantabit/dashboard-sdk

🚀 快速开始

1. 引入 Provider

import { DashboardProvider } from "@quantabit/dashboard-sdk";
import "@quantabit/dashboard-sdk/styles.css";

function App() {
  return (
    <DashboardProvider
      apiUrl="https://api.example.com/v1"
      token="your-auth-token"
    >
      <Dashboard />
    </DashboardProvider>
  );
}

2. 使用组件

import { MetricCard, DateRangeSelector } from '@quantabit/dashboard-sdk';

// 指标卡片
<MetricCard
  title="日活跃用户"
  value={12500}
  change={5.2}
  changeType="vsYesterday"
  icon="👥"
  trend={[80, 85, 90, 88, 95, 100]}
/>

// 日期范围选择器
<DateRangeSelector
  onChange={(range) => loadData(range)}
/>

3. 使用 Hooks

import { useDashboard } from "@quantabit/dashboard-sdk";

function Dashboard() {
  const {
    metrics, // 指标数据
    trends, // 趋势数据
    dateRange, // 当前日期范围
    loadOverview, // 加载概览
    loadTrend, // 加载趋势
    exportData, // 导出数据
    changeDateRange, // 切换日期范围
  } = useDashboard();

  useEffect(() => {
    loadOverview();
  }, [dateRange]);

  return <div>...</div>;
}

📊 指标类型

import { MetricType } from "@quantabit/dashboard-sdk";

MetricType.DAU; // 日活跃用户
MetricType.MAU; // 月活跃用户
MetricType.REVENUE; // 收入
MetricType.ORDERS; // 订单数
MetricType.CONVERSION; // 转化率
MetricType.RETENTION; // 留存率

📅 日期范围

• 今日 / 昨日
• 近7天 / 近30天
• 本月 / 上月
• 自定义范围

📄 许可证

MIT License